refactor(grid): new theme

src/grid/src/Col.vue

@@ -3,8 +3,8 @@
     class="n-col"
     :class="{
       [`n-col--${span}-span`]: true,
-      [`n-col--${computedPush}-push`]: computedPush > 0,
-      [`n-col--${-computedPush}-pull`]: computedPush < 0,
+      [`n-col--${mergedPush}-push`]: mergedPush > 0,
+      [`n-col--${-mergedPush}-pull`]: mergedPush < 0,
       [`n-col--${offset}-offset`]: offset
     }"
     :style="{
@@ -21,15 +21,13 @@
 </template>
 
 <script>
+import { computed, defineComponent, inject } from 'vue'
 import { formatLength } from '../../_utils'
+import { useTheme } from '../../_mixins'
+import style from './styles/index.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'Col',
-  inject: {
-    NRow: {
-      default: null
-    }
-  },
   props: {
     span: {
       type: [String, Number],
@@ -48,18 +46,19 @@ export default {
       default: 0
     }
   },
-  computed: {
-    gutter () {
-      return this.NRow.gutter
-    },
-    stylePadding () {
-      return `${formatLength(this.NRow.verticalGutter, {
-        c: 0.5
-      })} ${formatLength(this.NRow.horizontalGutter, { c: 0.5 })}`
-    },
-    computedPush () {
-      return this.push - this.pull
+  setup (props) {
+    useTheme('Grid', 'Grid', style, null, null)
+    const NRow = inject('NRow')
+    return {
+      gutter: computed(() => NRow.gutter),
+      stylePadding: computed(
+        () =>
+          `${formatLength(NRow.verticalGutter, {
+            c: 0.5
+          })} ${formatLength(NRow.horizontalGutter, { c: 0.5 })}`
+      ),
+      mergedPush: computed(() => props.push - props.pull)
     }
   }
-}
+})
 </script>

src/grid/src/Row.vue

@@ -16,14 +16,14 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue'
+import { useMemo } from 'vooks'
 import { formatLength } from '../../_utils'
-import { configurable, themeable, withCssr } from '../../_mixins'
-import styles from './styles'
+import { useTheme } from '../../_mixins'
+import style from './styles/index.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'Row',
-  cssrName: 'Grid',
-  mixins: [configurable, themeable, withCssr(styles)],
   provide () {
     return {
       NRow: this
@@ -47,27 +47,32 @@ export default {
       default: undefined
     }
   },
-  computed: {
-    verticalGutter () {
-      const gutter = this.gutter
+  setup (props) {
+    useTheme('Grid', 'Grid', style, null, null)
+    const verticalGutterRef = useMemo(() => {
+      const { gutter } = props
       if (Array.isArray(gutter)) {
         return gutter[1] || 0
       }
       return 0
-    },
-    horizontalGutter () {
-      const gutter = this.gutter
+    })
+    const horizontalGutterRef = useMemo(() => {
+      const { gutter } = props
       if (Array.isArray(gutter)) {
         return gutter[0]
       }
       return gutter
-    },
-    styleMargin () {
-      return `0px -${formatLength(this.horizontalGutter, { c: 0.5 })}`
-    },
-    styleWidth () {
-      return `calc(100% + ${formatLength(this.horizontalGutter)})`
+    })
+    return {
+      verticalGutter: verticalGutterRef,
+      horizontalGutter: horizontalGutterRef,
+      styleMargin: useMemo(
+        () => `0px -${formatLength(horizontalGutterRef.value, { c: 0.5 })}`
+      ),
+      styleWidth: useMemo(
+        () => `calc(100% + ${formatLength(horizontalGutterRef.value)})`
+      )
     }
   }
-}
+})
 </script>

src/grid/src/styles/base.cssr.js

@@ -1,51 +0,0 @@
-import { c, cB, cM, cE } from '../../../_utils/cssr'
-
-export default c([
-  () => {
-    return cB('row', {
-      width: '100%'
-    },
-    [
-      cM('flex', {
-        display: 'flex'
-      })
-    ])
-  },
-  () => {
-    const positionStyles = Array
-      .apply(null, { length: 24 })
-      .map((_, index) => {
-        const prefixIndex = index + 1
-        const percent = (1 / 24 * prefixIndex * 100).toFixed(2) + '%'
-        return [
-          cM(`${prefixIndex}-span`, {
-            width: percent
-          }),
-          cM(`${prefixIndex}-offset`, {
-            marginLeft: percent
-          }),
-          cM(`${prefixIndex}-push`, {
-            left: percent
-          }),
-          cM(`${prefixIndex}-pull`, {
-            right: percent
-          })
-        ]
-      })
-    return cB('col', {
-      verticalAlign: 'top',
-      boxSizing: 'border-box',
-      display: 'inline-block',
-      position: 'relative',
-      zIndex: 'auto'
-    }, [
-      cE('box', {
-        position: 'relative',
-        zIndex: 'auto',
-        width: '100%',
-        height: '100%'
-      }),
-      positionStyles
-    ])
-  }
-])

src/grid/src/styles/index.cssr.js

@@ -0,0 +1,48 @@
+import { c, cB, cM, cE } from '../../../_utils/cssr'
+
+const positionStyles = Array
+  .apply(null, { length: 24 })
+  .map((_, index) => {
+    const prefixIndex = index + 1
+    const percent = (1 / 24 * prefixIndex * 100).toFixed(2) + '%'
+    return [
+      cM(`${prefixIndex}-span`, {
+        width: percent
+      }),
+      cM(`${prefixIndex}-offset`, {
+        marginLeft: percent
+      }),
+      cM(`${prefixIndex}-push`, {
+        left: percent
+      }),
+      cM(`${prefixIndex}-pull`, {
+        right: percent
+      })
+    ]
+  })
+
+export default c([
+  cB('row', {
+    width: '100%'
+  },
+  [
+    cM('flex', {
+      display: 'flex'
+    })
+  ]),
+  cB('col', {
+    verticalAlign: 'top',
+    boxSizing: 'border-box',
+    display: 'inline-block',
+    position: 'relative',
+    zIndex: 'auto'
+  }, [
+    cE('box', {
+      position: 'relative',
+      zIndex: 'auto',
+      width: '100%',
+      height: '100%'
+    }),
+    positionStyles
+  ])
+])

src/grid/src/styles/index.js

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

src/grid/styles/dark.js

@@ -1,9 +1,3 @@
-import create from '../../_styles/utils/create-component-base'
-
-export default create({
-  theme: 'dark',
-  name: 'Grid',
-  getLocalVars (vars) {
-    return {}
-  }
-})
+export default {
+  name: 'Grid'
+}

src/grid/styles/light.js

@@ -1,9 +1,3 @@
-import create from '../../_styles/utils/create-component-base'
-
-export default create({
-  theme: 'light',
-  name: 'Grid',
-  getLocalVars (vars) {
-    return {}
-  }
-})
+export default {
+  name: 'Grid'
+}

src/styles.js

@@ -44,7 +44,7 @@ export { baseDark, baseLight } from './_styles/base'
 // export { emptyDark, emptyLight } from './empty/styles'
 // export { formDark, formLight } from './form/styles'
 // export { gradientTextDark, gradientTextLight } from './gradient-text/styles'
-export { gridDark, gridLight } from './grid/styles'
+// export { gridDark, gridLight } from './grid/styles'
 export { iconDark, iconLight } from './icon/styles'
 export { inputDark, inputLight } from './input/styles'
 export { inputNumberDark, inputNumberLight } from './input-number/styles'

src/styles.new.js

@@ -26,6 +26,7 @@ import { elementDark } from './element/styles'
 import { emptyDark } from './empty/styles'
 import { formDark } from './form/styles'
 import { gradientTextDark } from './gradient-text/styles'
+import { gridDark } from './grid/styles'
 
 export const darkTheme = {
   common: commonDark,
@@ -55,5 +56,6 @@ export const darkTheme = {
   Element: elementDark,
   Empty: emptyDark,
   Form: formDark,
-  GradientText: gradientTextDark
+  GradientText: gradientTextDark,
+  Grid: gridDark
 }