feat(layout): css in js (#275)

* feat(layout): css in js

* chore: fix code review

* fix: code review

src/Layout/index.js

@@ -1,15 +0,0 @@
-/* istanbul ignore file */
-import Layout from './src/Layout.vue'
-import LayoutHeader from './src/LayoutHeader.vue'
-import LayoutFooter from './src/LayoutFooter.vue'
-import LayoutSider from './src/LayoutSider.vue'
-
-Layout.install = function (Vue) {
-  Vue.component(Layout.name, Layout)
-  Vue.component('NLayoutContent', Layout)
-  Vue.component(LayoutHeader.name, LayoutHeader)
-  Vue.component(LayoutFooter.name, LayoutFooter)
-  Vue.component(LayoutSider.name, LayoutSider)
-}
-
-export default Layout

src/_styles/index.scss

@@ -12,7 +12,7 @@
 // @import './Radio.scss';
 @import './Form.scss';
 // @import './Grid.scss';
-@import './Layout.scss';
+// @import './Layout.scss';
 @import './Message.scss';
 @import './Notification.scss';
 @import './Pagination.scss';

src/index.js

@@ -34,7 +34,7 @@ import Input from './input'
 import InputGroup from './input-group'
 import InputGroupLabelStyle from './input-group-label'
 import InputNumber from './input-number'
-import Layout from './Layout'
+import Layout from './layout'
 import List from './list'
 import LoadingBar from './loading-bar'
 import Log from './log'
@@ -170,6 +170,8 @@ import switchLightStyle from './switch/styles/light'
 import switchDarkStyle from './switch/styles/dark'
 import radioLightStyle from './radio/styles/light'
 import radioDarkStyle from './radio/styles/dark'
+import layoutDarkStyle from './layout/styles/dark'
+import layoutLightStyle from './layout/styles/light'
 
 // Can be remove after refactoring
 import baseSelectionLightStyle from './_base/selection/styles/light'
@@ -369,6 +371,8 @@ export default create({
     switchDarkStyle,
     radioLightStyle,
     radioDarkStyle,
+    layoutDarkStyle,
+    layoutLightStyle,
     // Can be remove after refactoring
     baseSelectionLightStyle,
     baseSelectionDarkStyle

src/layout/index.js

@@ -0,0 +1,15 @@
+/* istanbul ignore file */
+import Layout from './src/Layout.vue'
+import LayoutHeader from './src/LayoutHeader.vue'
+import LayoutFooter from './src/LayoutFooter.vue'
+import LayoutSider from './src/LayoutSider.vue'
+
+Layout.install = function (Vue, naive) {
+  Vue.component(naive.componentPrefix + Layout.name, Layout)
+  Vue.component(naive.componentPrefix + 'LayoutContent', Layout)
+  Vue.component(naive.componentPrefix + LayoutHeader.name, LayoutHeader)
+  Vue.component(naive.componentPrefix + LayoutFooter.name, LayoutFooter)
+  Vue.component(naive.componentPrefix + LayoutSider.name, LayoutSider)
+}
+
+export default Layout

src/layout/src/Layout.vue

@@ -27,13 +27,20 @@ import layoutModeMixin from './layoutModeMixin'
 import themeable from '../../_mixins/themeable'
 import withapp from '../../_mixins/withapp'
 import NScrollbar from '../../scrollbar'
+import usecssr from '../../_mixins/usecssr'
+import styles from './styles'
 
 export default {
-  name: 'NLayout',
+  name: 'Layout',
   components: {
     NScrollbar
   },
-  mixins: [ withapp, themeable, layoutModeMixin ],
+  mixins: [
+    withapp,
+    themeable,
+    layoutModeMixin,
+    usecssr(styles)
+  ],
   provide () {
     return {
       NLayout: this

src/layout/src/LayoutFooter.vue

@@ -18,7 +18,7 @@ import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 
 export default {
-  name: 'NLayoutFooter',
+  name: 'LayoutFooter',
   mixins: [ withapp, themeable, layoutModeMixin ],
   props: {
     bordered: {

src/layout/src/LayoutHeader.vue

@@ -18,7 +18,7 @@ import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 
 export default {
-  name: 'NLayoutHeader',
+  name: 'LayoutHeader',
   mixins: [ withapp, themeable, layoutModeMixin ],
   props: {
     bordered: {

src/layout/src/LayoutSider.vue

@@ -54,7 +54,7 @@ import ToggleBar from './ToggleBar'
 import NScrollbar from '../../scrollbar'
 
 export default {
-  name: 'NLayoutSider',
+  name: 'LayoutSider',
   components: {
     ToggleButton,
     ToggleBar,

src/layout/src/styles/index.js

@@ -0,0 +1,9 @@
+import baseStyle from './themed-base.cssr.js'
+
+export default [
+  {
+    key: 'syntheticTheme',
+    watch: ['syntheticTheme'],
+    CNode: baseStyle
+  }
+]

src/layout/src/styles/themed-base.cssr.js

@@ -0,0 +1,287 @@
+import { cTB, c, cB, cE, cM } from '../../../_utils/cssr'
+
+export default c([
+  ({ props }) => {
+    const {
+      textColor,
+      color
+    } = props.$local
+    const {
+      easeInOutCubicBezier
+    } = props.$base
+    return cTB('layout', {
+      raw: `
+        color: ${textColor};
+        background-color: ${color};
+        box-sizing: border-box;
+        position: relative;
+        z-index: auto;
+        transition:
+          margin-left .3s ${easeInOutCubicBezier},
+          background-color .3s ${easeInOutCubicBezier},
+          color .3s ${easeInOutCubicBezier};
+        flex: auto;
+        overflow-x: hidden;
+      `
+    }, [
+      cM('has-sider', {
+        raw: `
+          display: flex;
+          flex-wrap: nowrap;
+          width: 100%;
+          flex-direction: row;
+        `
+      }),
+      cM('absolute-positioned', {
+        raw: `
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+        `
+      }, [
+        cB('layout-sider', {
+          raw: `
+            z-index: 1;
+          `
+        })
+      ])
+    ])
+  },
+  ({ props }) => {
+    const {
+      headerBackgroundColor,
+      layoutHeaderBorderColor
+    } = props.$local
+    const {
+      easeInOutCubicBezier
+    } = props.$base
+    return cTB('layout-header', {
+      raw: `
+        transition:
+          background-color .3s ${easeInOutCubicBezier},
+          box-shadow .3s ${easeInOutCubicBezier},
+          border-color .3s ${easeInOutCubicBezier};
+        box-sizing: border-box;
+        width: 100%;
+        background-color: ${headerBackgroundColor};
+      `
+    }, [
+      cM('bordered', {
+        raw: `
+          border-bottom: solid 1px ${layoutHeaderBorderColor};
+        `
+      })
+    ])
+  },
+  ({ props }) => {
+    const {
+      easeInOutCubicBezier
+    } = props.$base
+    return cTB('layout-content', {
+      raw: `
+        transition:
+          margin-left .3s ${easeInOutCubicBezier},
+          background-color .3s ${easeInOutCubicBezier},
+          color .3s ${easeInOutCubicBezier};
+        box-sizing: border-box;
+        position: relative;
+        z-index: auto;
+      `
+    })
+  },
+  ({ props }) => {
+    const {
+      footerBorderColor
+    } = props.$local
+    const {
+      easeInOutCubicBezier
+    } = props.$base
+    return cTB('layout-footer', {
+      raw: `
+        transition:
+          background-color .3s ${easeInOutCubicBezier},
+          border-color .3s ${easeInOutCubicBezier};
+        box-sizing: border-box;
+      `
+    }, [
+      cM('absolute-positioned', {
+        raw: `
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 0;
+        `
+      }),
+      cM('bordered', {
+        raw: `
+          border-top: solid 1px ${footerBorderColor};
+        `
+      })
+    ])
+  },
+  ({ props }) => {
+    const {
+      siderBackgroundColor,
+      siderToggleButtonFill,
+      siderBorderColor,
+      siderToggleBarBackgroundColor
+    } = props.$local
+    const {
+      easeInOutCubicBezier
+    } = props.$base
+    return cTB('layout-sider', {
+      raw: `
+        box-sizing: border-box;
+        position: relative;
+        z-index: auto;
+        transition:
+          min-width .3s ${easeInOutCubicBezier},
+          max-width .3s ${easeInOutCubicBezier},
+          transform .3s ${easeInOutCubicBezier},
+          background-color .3s ${easeInOutCubicBezier};
+        background-color: ${siderBackgroundColor};
+      `
+    }, [
+      cB('layout-toggle-button', {
+        raw: `
+          z-index: 1;
+          transition:
+            transform .3s ${easeInOutCubicBezier},
+            fill .3s ${easeInOutCubicBezier};
+          cursor: pointer;
+          width: 36px;
+          height: 36px;
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateX(50%) translateY(-50%);
+          fill: ${siderToggleButtonFill};
+        `
+      }),
+      cE('border', {
+        raw: `
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          width: 1px;
+          transition: background-color .3s ${easeInOutCubicBezier};
+        `
+      }),
+      cB('layout-toggle-bar', {
+        raw: `
+          cursor: pointer;
+          height: 72px;
+          width: 32px;
+          position: absolute;
+          top: calc(50% - 36px);
+          right: -28px;
+        `
+      }, [
+        cE('top, bottom', {
+          raw: `
+            position: absolute;
+            width: 4px;
+            border-radius: 2px;
+            height: 38px;
+            left: 14px;
+            transition: 
+              background-color .3s ${easeInOutCubicBezier},
+              transform .3s ${easeInOutCubicBezier};
+          `
+        }),
+        cE('bottom', {
+          raw: `
+            position: absolute;
+            top: 34px;
+          `
+        }),
+        c('&:hover', [
+          cE('top', {
+            raw: `
+              transform: rotate(12deg) scale(1.15) translateY(-2px);
+            `
+          }),
+          cE('bottom', {
+            raw: `
+              transform: rotate(-12deg) scale(1.15) translateY(2px);
+            `
+          })
+        ]),
+        cM('collapsed', [
+          c('&:hover', [
+            cE('top', {
+              raw: `
+                transform: rotate(-12deg) scale(1.15) translateY(-2px);
+              `
+            }),
+            cE('bottom', {
+              raw: `
+                transform: rotate(12deg) scale(1.15) translateY(2px);
+              `
+            })
+          ])
+        ]),
+        cE('top, bottom', {
+          raw: `
+            background-color: ${siderToggleBarBackgroundColor.default}
+          `
+        }),
+        c('&:hover', [
+          cE('top, bottom', {
+            raw: `
+              background-color: ${siderToggleBarBackgroundColor.hover}
+            `
+          })
+        ]),
+        cE('content', {
+          raw: `
+            opacity: 0;
+            transition: opacity .3s ${easeInOutCubicBezier};
+          `
+        }),
+        cM('show-content', [
+          cE('content', {
+            raw: `
+              opacity: 1;
+            `
+          })
+        ]),
+        cM('collapsed', [
+          cB('layout-toggle-button', {
+            raw: `
+              transform: translateX(50%) translateY(-50%) rotate(180deg);
+            `
+          })
+        ]),
+        cM('absolute-positioned', {
+          raw: `
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+          `
+        }, [
+          cE('content', {
+            raw: `
+              position: absolute;
+              left: 0;
+              right: 0;
+              top: 0;
+              bottom: 0;
+            `
+          })
+        ]),
+        cM('bordered', [
+          cE('border', {
+            raw: `
+              background-color: ${siderBorderColor};
+            `
+          })
+        ])
+      ])
+    ])
+  }
+])

src/layout/styles/dark.js

@@ -0,0 +1,35 @@
+import create from '../../styles/_utils/create-component-base'
+import { composite } from '../../_utils/color/index'
+
+export default create({
+  name: 'Layout',
+  theme: 'dark',
+  getDerivedVariables ({ base, derived }) {
+    const {
+      secondaryTextOverlayColor,
+      bodyBackgroundColor,
+      cardBackgroundColor,
+      dividerOverlayColor,
+      scrollbarBackgroundOverlayColor,
+      scrollbarHoverBackgroundOverlayColor
+    } = derived
+    const {
+      borderRadius
+    } = base
+    return {
+      borderRadius,
+      textColor: secondaryTextOverlayColor,
+      color: bodyBackgroundColor,
+      headerBackgroundColor: cardBackgroundColor,
+      headerBorderColor: dividerOverlayColor,
+      footerBorderColor: dividerOverlayColor,
+      siderBorderColor: dividerOverlayColor,
+      siderBackgroundColor: cardBackgroundColor,
+      siderToggleButtonFill: 'rgba(255, 255, 255, .3)',
+      siderToggleBarBackgroundColor: {
+        default: composite(bodyBackgroundColor, scrollbarBackgroundOverlayColor),
+        hover: composite(bodyBackgroundColor, scrollbarHoverBackgroundOverlayColor)
+      }
+    }
+  }
+})

src/layout/styles/light.js

@@ -0,0 +1,35 @@
+import create from '../../styles/_utils/create-component-base'
+import { composite } from '../../_utils/color/index'
+
+export default create({
+  name: 'Layout',
+  theme: 'light',
+  getDerivedVariables ({ base, derived }) {
+    const {
+      secondaryTextColor,
+      bodyBackgroundColor,
+      cardBackgroundColor,
+      dividerOverlayColor,
+      scrollbarBackgroundOverlayColor,
+      scrollbarHoverBackgroundOverlayColor
+    } = derived
+    const {
+      borderRadius
+    } = base
+    return {
+      borderRadius,
+      textColor: secondaryTextColor,
+      color: bodyBackgroundColor,
+      headerBackgroundColor: cardBackgroundColor,
+      headerBorderColor: dividerOverlayColor,
+      footerBorderColor: dividerOverlayColor,
+      siderBorderColor: dividerOverlayColor,
+      siderBackgroundColor: cardBackgroundColor,
+      siderToggleButtonFill: 'rgba(0, 0, 0, .15)',
+      siderToggleBarBackgroundColor: {
+        default: composite(bodyBackgroundColor, scrollbarBackgroundOverlayColor),
+        hover: composite(bodyBackgroundColor, scrollbarHoverBackgroundOverlayColor)
+      }
+    }
+  }
+})