refactor(table): new theme

src/styles.js

@@ -72,7 +72,7 @@ export { baseDark, baseLight } from './_styles/base'
 // export { statisticDark, statisticLight } from './statistic/styles'
 // export { stepsDark, stepsLight } from './steps/styles'
 // export { switchDark, switchLight } from './switch/styles'
-export { tableDark, tableLight } from './table/styles'
+// export { tableDark, tableLight } from './table/styles'
 export { tabsDark, tabsLight } from './tabs/styles'
 export { tagDark, tagLight } from './tag/styles'
 export { thingDark, thingLight } from './thing/styles'

src/styles.new.js

@@ -53,6 +53,7 @@ import { spinDark } from './spin/styles'
 import { statisticDark } from './statistic/styles'
 import { stepsDark } from './steps/styles'
 import { switchDark } from './switch/styles'
+import { tableDark } from './table/styles'
 
 export const darkTheme = {
   common: commonDark,
@@ -109,5 +110,6 @@ export const darkTheme = {
   Spin: spinDark,
   Statistic: statisticDark,
   Steps: stepsDark,
-  Switch: switchDark
+  Switch: switchDark,
+  Table: tableDark
 }

src/table/src/Table.vue

@@ -2,24 +2,25 @@
   <table
     class="n-table"
     :class="{
-      [`n-${mergedTheme}-theme`]: mergedTheme,
-      [`n-table--${size}-size`]: true,
       'n-table--bordered': bordered,
       'n-table--single-line': singleLine,
       'n-table--single-column': singleColumn
     }"
+    :style="cssVars"
   >
     <slot />
   </table>
 </template>
 
 <script>
-import { configurable, themeable, withCssr } from '../../_mixins'
-import styles from './styles'
+import { defineComponent, computed } from 'vue'
+import { useTheme } from '../../_mixins'
+import { createKey } from '../../_utils'
+import { tableLight } from '../styles'
+import style from './styles/index.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'Table',
-  mixins: [configurable, themeable, withCssr(styles)],
   props: {
     bordered: {
       type: Boolean,
@@ -39,6 +40,46 @@ export default {
       },
       default: 'medium'
     }
+  },
+  setup (props) {
+    const themeRef = useTheme('Table', 'Table', style, tableLight, props)
+    return {
+      cssVars: computed(() => {
+        const { size } = props
+        const {
+          self: {
+            borderColor,
+            bodyColor,
+            bodyColorModal,
+            thColor,
+            thTextColor,
+            tdTextColor,
+            borderRadius,
+            tdFontWeight,
+            lineHeight,
+            [createKey('fontSize', size)]: fontSize,
+            [createKey('tdPadding', size)]: tdPadding,
+            [createKey('thPadding', size)]: thPadding
+          },
+          common: { cubicBezierEaseInOut }
+        } = themeRef.value
+        return {
+          '--bezier': cubicBezierEaseInOut,
+          '--td-color': bodyColor,
+          '--td-color-modal': bodyColorModal,
+          '--td-text-color': tdTextColor,
+          '--border-color': borderColor,
+          '--border-radius': borderRadius,
+          '--font-size': fontSize,
+          '--th-color': thColor,
+          '--th-font-weight': tdFontWeight,
+          '--th-text-color': thTextColor,
+          '--line-height': lineHeight,
+          '--td-padding': tdPadding,
+          '--th-padding': thPadding
+        }
+      })
+    }
   }
-}
+})
 </script>

src/table/src/Tbody.vue

@@ -5,7 +5,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'Tbody'
-}
+})
 </script>

src/table/src/Td.vue

@@ -5,7 +5,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'Td'
-}
+})
 </script>

src/table/src/Th.vue

@@ -5,7 +5,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'Th'
-}
+})
 </script>

src/table/src/Thead.vue

@@ -5,7 +5,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'Thead'
-}
+})
 </script>

src/table/src/Tr.vue

@@ -5,7 +5,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'Tr'
-}
+})
 </script>

src/table/src/styles/index.cssr.js

@@ -0,0 +1,107 @@
+import { c, cB, cE, cM, insideModal } from '../../../_utils/cssr'
+
+// vars:
+// --bezier
+// --td-color
+// --td-color-modal
+// --td-text-color
+// --border-color
+// --border-radius
+// --font-size
+// --th-color
+// --th-font-weight
+// --th-text-color
+// --line-height
+// --td-padding
+// --th-padding
+export default c([
+  cB('table', `
+    font-size: var(--font-size);
+    font-variant-numeric: tabular-nums;
+    line-height: var(--line-height);
+    width: 100%;
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+    text-align: left;
+    border-collapse: separate;
+    border-spacing: 0;
+    overflow: hidden;
+    background-color: var(--td-color);
+    transition:
+      background-color .3s var(--bezier),
+      border-color .3s var(--bezier),
+      color .3s var(--bezier);
+  `, [
+    cE('th', `
+      background-clip: padding-box;
+      white-space: nowrap;
+      transition:
+        background-color .3s var(--bezier),
+        border-color .3s var(--bezier),
+        color .3s var(--bezier);
+      text-align: inherit;
+      padding: var(--th-padding);
+      vertical-align: inherit;
+      text-transform: none;
+      border: none;
+      font-weight: var(--th-font-weight);
+      color: var(--th-text-color);
+      background-color: var(--th-color);
+      border-color: var(--border-color);
+      border-bottom: 1px solid var(--border-color);
+      border-right: 1px solid var(--border-color);
+    `, [
+      c('&:last-child', `
+        border-right: none;
+      `)
+    ]),
+    cE('td', `
+      transition:
+        background-color .3s var(--bezier),
+        border-color .3s var(--bezier),
+        color .3s var(--bezier);
+      padding: var(--td-padding);
+      color: var(--td-text-color);
+      background-color: var(--td-color);
+      border-right: 1px solid var(--border-color);
+      border-bottom: 1px solid var(--border-color);
+    `, [
+      c('&:last-child', `
+        border-right: none;
+      `)
+    ]),
+    cM('bordered', `
+      border: 1px solid var(--border-color);
+      border-radius: var(--border-radius);
+    `, [
+      cE('tr', [
+        c('&:last-child', [
+          cE('td', `
+            border-bottom: none;
+          `)
+        ])
+      ])
+    ]),
+    cM('single-line', [
+      cE('th', `
+        border-right: none;
+      `),
+      cE('td', `
+        border-right: none;
+      `)
+    ]),
+    cM('single-column', [
+      cE('td', `
+        border-bottom: none;
+      `)
+    ])
+  ]),
+  insideModal(
+    cB('table', `
+      background-color: var(--td-color-modal);
+    `, [
+      cE('td', `
+        background-color: var(--td-color-modal);
+      `)
+    ])
+  )
+])

src/table/src/styles/index.js

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

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

@@ -1,151 +0,0 @@
-import { c, cE, cM, cTB, insideModal, createKey } from '../../../_utils/cssr'
-
-function sizeStyle (size, props) {
-  return cM(`${size}-size`, {
-    fontSize: props[createKey('fontSize', size)]
-  }, [
-    cE('th', {
-      padding: props[createKey('thPadding', size)]
-    }),
-    cE('td', {
-      padding: props[createKey('tdPadding', size)]
-    })
-  ])
-}
-
-export default c([
-  ({ props }) => {
-    const {
-      $local: {
-        borderColor,
-        bodyColor,
-        bodyColorModal,
-        headerColor,
-        headerTextColor,
-        bodyTextColor,
-        borderRadius,
-        headFontWeight,
-        lineHeight
-      },
-      $global: {
-        cubicBezierEaseInOut
-      }
-    } = props
-    return [
-      cTB('table', {
-        raw: `
-          font-variant-numeric: tabular-nums;
-          line-height: ${lineHeight};
-          width: 100%;
-          border-radius: ${borderRadius} ${borderRadius} 0 0;
-          text-align: left;
-          border-collapse: separate;
-          border-spacing: 0;
-          overflow: hidden;
-          background-color: ${bodyColor};
-          transition:
-            background-color .3s ${cubicBezierEaseInOut},
-            border-color .3s ${cubicBezierEaseInOut},
-            color .3s ${cubicBezierEaseInOut};
-        `
-      }, [
-        ['small', 'medium', 'large']
-          .map(size => sizeStyle(size, props.$local)),
-        cE('th', {
-          raw: `
-            background-clip: padding-box;
-            white-space: nowrap;
-            transition:
-              background-color .3s ${cubicBezierEaseInOut},
-              border-color .3s ${cubicBezierEaseInOut},
-              color .3s ${cubicBezierEaseInOut};
-            text-align: inherit;
-            padding: 14px 12px;
-            vertical-align: inherit;
-            text-transform: none;
-            border: none;
-            font-weight: ${headFontWeight};
-            color: ${headerTextColor};
-            background-color: ${headerColor};
-            border-color: ${borderColor};
-            border-bottom: 1px solid ${borderColor};
-            border-right: 1px solid ${borderColor};
-          `
-        }, [
-          c('&:last-child', {
-            raw: `
-              border-right: none;
-            `
-          })
-        ]),
-        cE('td', {
-          raw: `
-            transition:
-              background-color .3s ${cubicBezierEaseInOut},
-              border-color .3s ${cubicBezierEaseInOut},
-              color .3s ${cubicBezierEaseInOut};
-            padding: 12px;
-            color: ${bodyTextColor};
-            background-color: ${bodyColor};
-            border-right: 1px solid ${borderColor};
-            border-bottom: 1px solid ${borderColor};
-          `
-        }, [
-          c('&:last-child', {
-            raw: `
-              border-right: none;
-            `
-          })
-        ]),
-        cM('bordered', {
-          raw: `
-            border: 1px solid ${borderColor};
-            border-radius: ${borderRadius};
-          `
-        }, [
-          cE('tr', [
-            c('&:last-child', [
-              cE('td', {
-                raw: `
-                  border-bottom: none;
-                `
-              })
-            ])
-          ])
-        ]),
-        cM('single-line', [
-          cE('th', {
-            raw: `
-              border-right: none;
-            `
-          }),
-          cE('td', {
-            raw: `
-              border-right: none;
-            `
-          })
-        ]),
-        cM('single-column', [
-          cE('td', {
-            raw: `
-              border-bottom: none;
-            `
-          })
-        ])
-      ]),
-      insideModal(
-        cTB('table', {
-          raw: `
-            background-color: ${bodyColorModal};
-          `
-        }, [
-          cE('td', {
-            raw: `
-              background-color: ${bodyColorModal};
-            `
-          })
-        ])
-      )
-    ]
-  }
-])

src/table/styles/dark.js

@@ -1,12 +1,10 @@
-import create from '../../_styles/utils/create-component-base'
 import sizeVariables from './_common'
-import { baseDark } from '../../_styles/base'
+import { commonDark } from '../../_styles/new-common'
 
-export default create({
-  theme: 'dark',
+export default {
   name: 'Table',
-  peer: [baseDark],
-  getLocalVars (vars) {
+  common: commonDark,
+  self (vars) {
     const {
       dividerColorOverlay,
       cardColor,
@@ -27,14 +25,14 @@ export default create({
       fontSizeMedium,
       fontSizeLarge,
       lineHeight,
+      borderRadius,
       borderColor: dividerColorOverlay,
       bodyColor: cardColor,
       bodyColorModal: modalColor,
-      headerColor: actionColorOverlay,
-      headerTextColor: textColor1Overlay,
-      bodyTextColor: textColor2Overlay,
-      borderRadius,
-      headFontWeight: fontWeightStrong
+      thColor: actionColorOverlay,
+      thTextColor: textColor1Overlay,
+      tdTextColor: textColor2Overlay,
+      tdFontWeight: fontWeightStrong
     }
   }
-})
+}

src/table/styles/light.js

@@ -1,12 +1,10 @@
-import create from '../../_styles/utils/create-component-base'
 import sizeVariables from './_common'
-import { baseLight } from '../../_styles/base'
+import { commonLight } from '../../_styles/new-common'
 
-export default create({
-  theme: 'light',
+export default {
   name: 'Table',
-  peer: [baseLight],
-  getLocalVars (vars) {
+  common: commonLight,
+  self (vars) {
     const {
       dividerColorOverlay,
       cardColor,
@@ -27,14 +25,14 @@ export default create({
       fontSizeMedium,
       fontSizeLarge,
       lineHeight,
+      borderRadius,
       borderColor: dividerColorOverlay,
       bodyColor: cardColor,
       bodyColorModal: modalColor,
-      headerColor: actionColorOverlay,
-      headerTextColor: textColor1,
-      bodyTextColor: textColor2,
-      borderRadius,
-      headFontWeight: fontWeightStrong
+      thColor: actionColorOverlay,
+      thTextColor: textColor1,
+      tdTextColor: textColor2,
+      tdFontWeight: fontWeightStrong
     }
   }
-})
+}