refactor(layout-sider): sider placement right

src/layout/demos/enUS/basic.demo.md

@@ -6,7 +6,7 @@ I hope the demo can meet you demand, so that you can have more time to do other
 <n-space vertical size="large">
   <n-layout>
     <n-layout-header>Yiheyuan Road</n-layout-header>
-    <n-layout-content content-style="padding: 24px"
+    <n-layout-content content-style="padding: 24px;"
       >Pingshan Road</n-layout-content
     >
     <n-layout-footer>Chengfu Road</n-layout-footer>
@@ -14,10 +14,10 @@ I hope the demo can meet you demand, so that you can have more time to do other
   <n-layout>
     <n-layout-header>Yiheyuan Road</n-layout-header>
     <n-layout has-sider>
-      <n-layout-sider content-style="padding: 24px"
+      <n-layout-sider content-style="padding: 24px;"
         >Handian Bridge</n-layout-sider
       >
-      <n-layout-content content-style="padding: 24px"
+      <n-layout-content content-style="padding: 24px;"
         >Pingshan Road</n-layout-content
       >
     </n-layout>
@@ -29,7 +29,7 @@ I hope the demo can meet you demand, so that you can have more time to do other
     >
     <n-layout>
       <n-layout-header>Yiheyuan Road</n-layout-header>
-      <n-layout-content content-style="padding: 24px"
+      <n-layout-content content-style="padding: 24px;"
         >Pingshan Road</n-layout-content
       >
       <n-layout-footer>Chengfu Road</n-layout-footer>

src/layout/demos/enUS/collapse-right.demo.md

@@ -5,13 +5,16 @@ Sometimes you might want to put the collapsed sidebar on the right.
 ```html
 <n-space vertical size="large">
   <n-layout has-sider sider-placement="right">
+    <n-layout-content content-style="padding: 24px;"
+      >Pingshan Road</n-layout-content
+    >
     <n-layout-sider
       collapse-mode="width"
       :collapsed-width="120"
       :native-scrollbar="true"
       :width="240"
       show-trigger="arrow-circle"
-      content-style="padding: 24px"
+      content-style="padding: 24px;"
       bordered
     >
       <p>
@@ -19,27 +22,25 @@ Sometimes you might want to put the collapsed sidebar on the right.
         Bridge
       </p>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px"
-      >Pingshan Road</n-layout-content
-    >
   </n-layout>
   <n-layout has-sider sider-placement="right">
+    <n-layout-content content-style="padding: 24px;"
+      >Pingshan Road</n-layout-content
+    >
     <n-layout-sider
       collapse-mode="transform"
       :native-scrollbar="false"
       :collapsed-width="120"
       :width="240"
-      show-trigger="arrow-circle"
+      show-trigger="bar"
-      content-style="padding: 24px"
+      content-style="padding: 24px;"
       bordered
     >
       <n-h2>Handian Bridge</n-h2>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px"
-      >Pingshan Road</n-layout-content
-    >
   </n-layout>
   <n-layout has-sider sider-placement="right">
+    <n-layout style="max-height: 320px;" />
     <n-layout-sider
       bordered
       show-trigger
@@ -57,7 +58,6 @@ Sometimes you might want to put the collapsed sidebar on the right.
         :options="menuOptions"
       />
     </n-layout-sider>
-    <n-layout style="max-height: 320px;" />
   </n-layout>
 </n-space>
 ```

src/layout/demos/enUS/collapse.demo.md

@@ -15,8 +15,8 @@ Use `show-trigger` to use builtin button.
       collapse-mode="width"
       :collapsed-width="120"
       :width="240"
-      show-trigger="arrow-circle"
+      show-trigger="bar"
-      content-style="padding: 24px"
+      content-style="padding: 24px;"
       bordered
     >
       <p>
@@ -24,7 +24,7 @@ Use `show-trigger` to use builtin button.
         Bridge
       </p>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px"
+    <n-layout-content content-style="padding: 24px;"
       >Pingshan Road</n-layout-content
     >
   </n-layout>
@@ -34,12 +34,12 @@ Use `show-trigger` to use builtin button.
       :collapsed-width="120"
       :width="240"
       show-trigger="arrow-circle"
-      content-style="padding: 24px"
+      content-style="padding: 24px;"
       bordered
     >
       <n-h2>Handian Bridge</n-h2>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px"
+    <n-layout-content content-style="padding: 24px;"
       >Pingshan Road</n-layout-content
     >
   </n-layout>

src/layout/demos/enUS/embedded.demo.md

@@ -3,7 +3,7 @@
 Sometimes you may want the background to be darker to highlight the content (especially card like things).
 
 ```html
-<n-layout embedded content-style="padding: 24px">
+<n-layout embedded content-style="padding: 24px;">
   <n-card>
     All you need to do to look to those clouds,<br />
     and every day be in a good mood.

src/layout/demos/enUS/show-sider-content.demo.md

@@ -11,12 +11,12 @@ Sometimes you don't want to see content inside sider after it's collapsed. Set `
       :width="240"
       :show-collapsed-content="false"
       show-trigger="arrow-circle"
-      content-style="padding: 24px"
+      content-style="padding: 24px;"
       bordered
     >
       Handian Bridge Handian Bridge Handian Bridge Handian Bridge Handian Bridge
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px"
+    <n-layout-content content-style="padding: 24px;"
       >Pingshan Road</n-layout-content
     >
   </n-layout>
@@ -26,12 +26,12 @@ Sometimes you don't want to see content inside sider after it's collapsed. Set `
       :collapsed-width="120"
       :width="240"
       show-trigger="arrow-circle"
-      content-style="padding: 24px"
+      content-style="padding: 24px;"
       bordered
     >
       <n-h2>Handian Bridge</n-h2>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px"
+    <n-layout-content content-style="padding: 24px;"
       >Pingshan Road</n-layout-content
     >
   </n-layout>

src/layout/demos/zhCN/basic.demo.md

@@ -6,14 +6,14 @@
 <n-space vertical size="large">
   <n-layout>
     <n-layout-header>颐和园路</n-layout-header>
-    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+    <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
     <n-layout-footer>成府路</n-layout-footer>
   </n-layout>
   <n-layout>
     <n-layout-header>颐和园路</n-layout-header>
     <n-layout has-sider>
-      <n-layout-sider content-style="padding: 24px">海淀桥</n-layout-sider>
+      <n-layout-sider content-style="padding: 24px;">海淀桥</n-layout-sider>
-      <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+      <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
     </n-layout>
     <n-layout-footer>成府路</n-layout-footer>
   </n-layout>
@@ -21,7 +21,7 @@
     <n-layout-sider content-style="padding: 24px;">海淀桥</n-layout-sider>
     <n-layout>
       <n-layout-header>颐和园路</n-layout-header>
-      <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+      <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
       <n-layout-footer>成府路</n-layout-footer>
     </n-layout>
   </n-layout>

src/layout/demos/zhCN/collapse-right.demo.md

@@ -5,34 +5,35 @@
 ```html
 <n-space vertical size="large">
   <n-layout has-sider sider-placement="right">
+    <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
     <n-layout-sider
       collapse-mode="width"
       :collapsed-width="120"
       :width="240"
       :native-scrollbar="true"
       show-trigger="arrow-circle"
-      content-style="padding: 24px"
+      content-style="padding: 24px;"
       bordered
     >
       <p>海淀桥 海淀桥 海淀桥 海淀桥 海淀桥</p>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
   </n-layout>
   <n-layout has-sider sider-placement="right">
+    <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
     <n-layout-sider
       collapse-mode="transform"
       :collapsed-width="120"
       :width="240"
       :native-scrollbar="false"
-      show-trigger="arrow-circle"
+      show-trigger="bar"
-      content-style="padding: 24px"
+      content-style="padding: 24px;"
       bordered
     >
       <n-h2>海淀桥</n-h2>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
   </n-layout>
   <n-layout has-sider sider-placement="right">
+    <n-layout style="max-height: 320px;" />
     <n-layout-sider
       bordered
       show-trigger
@@ -48,7 +49,6 @@
         :options="menuOptions"
       />
     </n-layout-sider>
-    <n-layout style="max-height: 320px;" />
   </n-layout>
 </n-space>
 ```

src/layout/demos/zhCN/collapse.demo.md

@@ -14,25 +14,25 @@
       :collapsed-width="120"
       :width="240"
       show-trigger="arrow-circle"
-      content-style="padding: 24px"
+      content-style="padding: 24px;"
       bordered
     >
       <p>海淀桥 海淀桥 海淀桥 海淀桥 海淀桥</p>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+    <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
   </n-layout>
   <n-layout has-sider>
     <n-layout-sider
       collapse-mode="transform"
       :collapsed-width="120"
       :width="240"
-      show-trigger="arrow-circle"
+      show-trigger="bar"
-      content-style="padding: 24px"
+      content-style="padding: 24px;"
       bordered
     >
       <n-h2>海淀桥</n-h2>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+    <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
   </n-layout>
 </n-space>
 ```

src/layout/demos/zhCN/embedded.demo.md

@@ -3,7 +3,7 @@
 有的时候你希望背景色暗一点，来突出上面显示的内容（尤其是卡片）。
 
 ```html
-<n-layout embedded content-style="padding: 24px">
+<n-layout embedded content-style="padding: 24px;">
   <n-card>
     只要是 看到天边云一朵<br />
     逐天拢有好心情

src/layout/demos/zhCN/show-sider-content.demo.md

@@ -16,7 +16,7 @@
     >
       海淀桥 海淀桥 海淀桥 海淀桥 海淀桥
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+    <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
   </n-layout>
   <n-layout has-sider>
     <n-layout-sider
@@ -29,7 +29,7 @@
     >
       <n-h2>海淀桥</n-h2>
     </n-layout-sider>
-    <n-layout-content content-style="padding: 24px">平山道</n-layout-content>
+    <n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
   </n-layout>
 </n-space>
 ```

src/layout/src/Layout.tsx

@@ -40,8 +40,9 @@ const layoutProps = {
 
 export type LayoutProps = ExtractPublicPropTypes<typeof layoutProps>
 
-export const layoutInjectionKey: InjectionKey<ExtractPropTypes<LayoutProps>> =
+export const layoutInjectionKey: InjectionKey<
-  Symbol('layout')
+ExtractPropTypes<typeof layoutProps>
+> = Symbol('layout')
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createLayoutComponent (isContent: boolean) {
@@ -115,9 +116,6 @@ export function createLayoutComponent (isContent: boolean) {
     render () {
       const { mergedClsPrefix, hasSider } = this
       const hasSiderStyle = hasSider ? this.hasSiderStyle : undefined
-      const siderPlacementStyle = {
-        'flex-direction': this.siderPlacement === 'right' && 'row-reverse'
-      }
       const layoutClass = [
         isContent && `${mergedClsPrefix}-layout-content`,
         `${mergedClsPrefix}-layout`,
@@ -129,9 +127,7 @@ export function createLayoutComponent (isContent: boolean) {
             <div
               ref="scrollableElRef"
               class={`${mergedClsPrefix}-layout-scroll-container`}
-              style={
+              style={[this.contentStyle, hasSiderStyle] as any}
-                [this.contentStyle, hasSiderStyle, siderPlacementStyle] as any
-              }
             >
               {this.$slots}
             </div>
@@ -141,7 +137,6 @@ export function createLayoutComponent (isContent: boolean) {
               ref="scrollbarInstRef"
               theme={this.mergedTheme.peers.Scrollbar}
               themeOverrides={this.mergedTheme.peerOverrides.Scrollbar}
-              style={siderPlacementStyle}
               contentStyle={[this.contentStyle, hasSiderStyle] as any}
             >
               {this.$slots}

src/layout/src/LayoutSider.tsx

@@ -123,20 +123,8 @@ export default defineComponent({
         minWidth: formatLength(props.width)
       }
     })
-    const siderScrollContainerTransformStyleRef = computed<CSSProperties>(
-      () => {
-        if (siderPlacementRef.value !== 'left' && props.collapseMode === 'transform') {
-          return {
-            transform: `translateX(calc(${formatLength(props.width)} - ${
-              styleMaxWidthRef.value
-            }px)`
-          }
-        }
-        return {}
-      }
-    )
     const siderPlacementRef = computed(() => {
-      return layoutProps?.siderPlacement || 'left'
+      return layoutProps ? layoutProps.siderPlacement : 'left'
     })
     const uncontrolledCollapsedRef = ref(props.defaultCollapsed)
     const mergedCollapsedRef = useMergedState(
@@ -209,7 +197,6 @@ export default defineComponent({
       styleMaxWidth: styleMaxWidthRef,
       mergedCollapsed: mergedCollapsedRef,
       scrollContainerStyle: scrollContainerStyleRef,
-      siderScrollContainerTransformStyle: siderScrollContainerTransformStyleRef,
       siderPlacement: siderPlacementRef,
       handleTriggerClick,
       cssVars: computed(() => {
@@ -250,7 +237,7 @@ export default defineComponent({
         class={[
           `${mergedClsPrefix}-layout-sider`,
           `${mergedClsPrefix}-layout-sider--${this.position}-positioned`,
-          `${mergedClsPrefix}-layout-sider--${this.siderPlacement}`,
+          `${mergedClsPrefix}-layout-sider--${this.siderPlacement}-placement`,
           this.bordered && `${mergedClsPrefix}-layout-sider--bordered`,
           mergedCollapsed && `${mergedClsPrefix}-layout-sider--collapsed`,
           (!mergedCollapsed || this.showCollapsedContent) &&
@@ -268,10 +255,7 @@ export default defineComponent({
           <NScrollbar
             {...this.scrollbarProps}
             ref="scrollbarInstRef"
-            style={[
+            style={this.scrollContainerStyle}
-              this.scrollContainerStyle,
-              this.siderScrollContainerTransformStyle
-            ]}
             contentStyle={this.contentStyle}
             theme={this.mergedTheme.peers.Scrollbar}
             themeOverrides={this.mergedTheme.peerOverrides.Scrollbar}
@@ -294,7 +278,6 @@ export default defineComponent({
             style={[
               this.scrollContainerStyle,
               this.contentStyle,
-              this.siderScrollContainerTransformStyle,
               {
                 overflow: 'auto'
               }
@@ -307,10 +290,6 @@ export default defineComponent({
         {showTrigger ? (
           showTrigger === 'arrow-circle' ? (
             <ToggleButton
-              class={[
-                mergedCollapsed &&
-                  `${mergedClsPrefix}-layout-toggle-button--collapsed`
-              ]}
               clsPrefix={mergedClsPrefix}
               style={this.triggerStyle}
               onClick={this.handleTriggerClick}
@@ -318,7 +297,6 @@ export default defineComponent({
           ) : (
             <ToggleBar
               clsPrefix={mergedClsPrefix}
-              collapsed={mergedCollapsed}
               style={this.triggerStyle}
               onClick={this.handleTriggerClick}
             />

src/layout/src/ToggleBar.tsx

@@ -6,22 +6,12 @@ export default defineComponent({
       type: String,
       required: true
     },
-    onClick: Function as PropType<(e: MouseEvent) => void>,
+    onClick: Function as PropType<(e: MouseEvent) => void>
-    collapsed: {
-      type: Boolean,
-      default: false
-    }
   },
   render () {
     const { clsPrefix } = this
     return (
-      <div
+      <div onClick={this.onClick} class={`${clsPrefix}-layout-toggle-bar`}>
-        onClick={this.onClick}
-        class={[
-          `${clsPrefix}-layout-toggle-bar`,
-          this.collapsed && `${clsPrefix}-layout-toggle-bar--collapsed`
-        ]}
-      >
         <div class={`${clsPrefix}-layout-toggle-bar__top`} />
         <div class={`${clsPrefix}-layout-toggle-bar__bottom`} />
       </div>

src/layout/src/styles/layout-sider.cssr.ts

@@ -25,26 +25,59 @@ export default cB('layout-sider', `
   display: flex;
   justify-content: flex-end;
 `, [
-  c('>', [
+  cM('right-placement', `
-    cB('scrollbar', `
+    justify-content: flex-start;
-      transition: transform .3s var(--bezier);
+  `, [
-    `)
-  ]),
-  cM('right', [
     cM('bordered', `
+      border-right: none;
       border-left: 1px solid var(--border-color);
     `),
+    cM('collapsed', [
+      cB('layout-toggle-button', `
+        transform: translateX(-50%) translateY(-50%) rotate(0);
+      `),
+      cB('layout-toggle-bar', [
+        c('&:hover', [
+          cE('top', {
+            transform: 'rotate(-12deg) scale(1.15) translateY(-2px)'
+          }),
+          cE('bottom', {
+            transform: 'rotate(12deg) scale(1.15) translateY(2px)'
+          })
+        ])
+      ])
+    ]),
     cB('layout-toggle-button', `
       transform: translateX(-50%) translateY(-50%) rotate(180deg);
       left: 0;
-    `, [
+    `),
-      cM('collapsed', `
-        transform: translateX(-50%) translateY(-50%) rotate(0);
-      `)
-    ]),
     cB('layout-toggle-bar', `
       left: -28px;
       transform: rotate(180deg);
+    `, [
+      c('&:hover', [
+        cE('top', {
+          transform: 'rotate(12deg) scale(1.15) translateY(-2px)'
+        }),
+        cE('bottom', {
+          transform: 'rotate(-12deg) scale(1.15) translateY(2px)'
+        })
+      ])
+    ])
+  ]),
+  cM('collapsed', [
+    cB('layout-toggle-bar', [
+      c('&:hover', [
+        cE('top', {
+          transform: 'rotate(-12deg) scale(1.15) translateY(-2px)'
+        }),
+        cE('bottom', {
+          transform: 'rotate(12deg) scale(1.15) translateY(2px)'
+        })
+      ])
+    ]),
+    cB('layout-toggle-button', `
+      transform: translateX(50%) translateY(-50%) rotate(180deg);
     `)
   ]),
   cB('layout-toggle-button', `
@@ -59,11 +92,7 @@ export default cB('layout-sider', `
     right: 0;
     fill: var(--toggle-button-color);
     transform: translateX(50%) translateY(-50%) rotate(0);
-  `, [
+  `),
-    cM('collapsed', `
-      transform: translateX(50%) translateY(-50%) rotate(180deg);
-    `)
-  ]),
   cB('layout-toggle-bar', `
     cursor: pointer;
     height: 72px;
@@ -94,16 +123,6 @@ export default cB('layout-sider', `
         transform: 'rotate(-12deg) scale(1.15) translateY(2px)'
       })
     ]),
-    cM('collapsed', [
-      c('&:hover', [
-        cE('top', {
-          transform: 'rotate(-12deg) scale(1.15) translateY(-2px)'
-        }),
-        cE('bottom', {
-          transform: 'rotate(12deg) scale(1.15) translateY(2px)'
-        })
-      ])
-    ]),
     cE('top, bottom', {
       backgroundColor: 'var(--toggle-bar-color)'
     }),
@@ -127,7 +146,7 @@ export default cB('layout-sider', `
     box-sizing: border-box;
     height: 100%;
     opacity: 0;
-    transition: transform .3s var(--bezier), opacity .3s var(--bezier);
+    transition: opacity .3s var(--bezier);
     max-width: 100%;
   `),
   cM('show-content', [