refactor(statistic): new theme

src/spin/src/Spin.vue

@@ -49,6 +49,7 @@ export default defineComponent({
     NBaseLoading
   },
   props: {
+    ...useTheme.props,
     stroke: {
       type: String,
       default: undefined

src/statistic/src/Statistic.vue

@@ -1,15 +1,10 @@
 <template>
-  <div
-    class="n-statistic"
-    :class="{
-      [`n-${mergedTheme}-theme`]: mergedTheme
-    }"
-  >
+  <div class="n-statistic" :style="cssVars">
     <div class="n-statistic__label">
       {{ label }}
     </div>
     <div class="n-statistic-value">
-      <span class="n-statistic-value__prefix">
+      <span v-if="$slots.prefix" class="n-statistic-value__prefix">
         <slot name="prefix" />
       </span>
       <span v-if="value" class="n-statistic-value__content">
@@ -18,7 +13,7 @@
       <span v-else-if="$slots.default" class="n-statistic-value__content">
         <slot />
       </span>
-      <span class="n-statistic-value__suffix">
+      <span v-if="$slots.suffix" class="n-statistic-value__suffix">
         <slot name="suffix" />
       </span>
     </div>
@@ -26,13 +21,15 @@
 </template>
 
 <script>
-import { configurable, themeable, withCssr } from '../../_mixins'
-import styles from './styles'
+import { defineComponent, computed } from 'vue'
+import { useTheme } from '../../_mixins'
+import { statisticLight } from '../styles'
+import style from './styles/index.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'Statistic',
-  mixins: [configurable, themeable, withCssr(styles)],
   props: {
+    ...useTheme.props,
     label: {
       type: String,
       default: undefined
@@ -45,6 +42,41 @@ export default {
       type: [Object, String],
       default: undefined
     }
+  },
+  setup (props) {
+    const themeRef = useTheme(
+      'Statistic',
+      'Statistic',
+      style,
+      statisticLight,
+      props
+    )
+    return {
+      cssVars: computed(() => {
+        const {
+          self: {
+            labelFontWeight,
+            valueFontWeight,
+            valuePrefixTextColor,
+            labelTextColor,
+            valueSuffixTextColor,
+            valueTextColor,
+            labelFontSize
+          },
+          common: { cubicBezierEaseInOut }
+        } = themeRef.value
+        return {
+          '--bezier': cubicBezierEaseInOut,
+          '--label-font-size': labelFontSize,
+          '--label-font-weight': labelFontWeight,
+          '--label-text-color': labelTextColor,
+          '--value-font-weight': valueFontWeight,
+          '--value-prefix-text-color': valuePrefixTextColor,
+          '--value-suffix-text-color': valueSuffixTextColor,
+          '--value-text-color': valueTextColor
+        }
+      })
+    }
   }
-}
+})
 </script>

src/statistic/src/styles/index.cssr.js

@@ -0,0 +1,48 @@
+import { cB, cE } from '../../../_utils/cssr'
+
+// vars:
+// --bezier
+// --label-font-size
+// --label-font-weight
+// --label-text-color
+// --value-font-weight
+// --value-prefix-text-color
+// --value-suffix-text-color
+// --value-text-color
+export default cB('statistic', [
+  cE('label', `
+    font-weight: var(--label-font-weight);
+    transition: .3s color var(--bezier);
+    font-size: var(--label-font-size);
+    color: var(--label-text-color);
+  `),
+  cB('statistic-value', `
+    margin-top: 4px;
+    font-weight: var(--value-font-weight);
+  `, [
+    cE('prefix', `
+      margin: 0 4px;
+      font-size: 18px;
+      transition: .3s color var(--bezier);
+      color: var(--value-prefix-text-color);
+    `, [
+      cB('icon', {
+        verticalAlign: '-0.125em'
+      })
+    ]),
+    cE('content', `
+      font-size: 24px;
+      transition: .3s color var(--bezier);
+      color: var(--value-text-color);
+    `),
+    cE('suffix', `
+      font-size: 18px;
+      transition: .3s color var(--bezier);
+      color: var(--value-suffix-text-color);
+    `, [
+      cB('icon', {
+        verticalAlign: '-0.125em'
+      })
+    ])
+  ])
+])

src/statistic/src/styles/index.js

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

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

@@ -1,67 +0,0 @@
-import { c, cTB, cB, cE } from '../../../_utils/cssr'
-
-export default c([
-  ({ props }) => {
-    const {
-      $local: {
-        labelFontWeight,
-        valueFontWeight,
-        valuePrefixTextColor,
-        labelTextColor,
-        valueSuffixTextColor,
-        valueTextColor,
-        labelFontSize
-      },
-      $global: {
-        cubicBezierEaseInOut
-      }
-    } = props
-    return cTB('statistic', [
-      cE('label', {
-        raw: `
-          font-weight: ${labelFontWeight};
-          transition: .3s color ${cubicBezierEaseInOut};
-          font-size: ${labelFontSize};
-        `,
-        color: labelTextColor
-      }),
-      cB('statistic-value', {
-        raw: `
-          margin-top: 4px;
-          font-weight: ${valueFontWeight};
-        `
-      }, [
-        cE('prefix', {
-          raw: `
-            margin: 0 4px;
-            font-size: 18px;
-            transition: .3s color ${cubicBezierEaseInOut};
-          `,
-          color: valuePrefixTextColor
-        }, [
-          cB('icon', {
-            verticalAlign: '-0.125em'
-          })
-        ]),
-        cE('content', {
-          raw: `
-            font-size: 24px;
-            transition: .3s color ${cubicBezierEaseInOut};
-          `,
-          color: valueTextColor
-        }),
-        cE('suffix', {
-          raw: `
-            font-size: 18px;
-            transition: .3s color ${cubicBezierEaseInOut};
-          `,
-          color: valueSuffixTextColor
-        }, [
-          cB('icon', {
-            verticalAlign: '-0.125em'
-          })
-        ])
-      ])
-    ])
-  }
-])

src/statistic/styles/dark.js

@@ -1,11 +1,9 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseLight } from '../../_styles/base'
+import { commonDark } from '../../_styles/new-common'
 
-export default create({
+export default {
   name: 'Statistic',
-  theme: 'dark',
-  peer: [baseLight],
-  getLocalVars (vars) {
+  common: commonDark,
+  self (vars) {
     const {
       textColor2Overlay,
       textColor1Overlay,
@@ -22,4 +20,4 @@ export default create({
       valueTextColor: textColor1Overlay
     }
   }
-})
+}

src/statistic/styles/light.js

@@ -1,11 +1,9 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseDark } from '../../_styles/base'
+import { commonLight } from '../../_styles/new-common'
 
-export default create({
+export default {
   name: 'Statistic',
-  theme: 'light',
-  peer: [baseDark],
-  getLocalVars (vars) {
+  common: commonLight,
+  self (vars) {
     const { textColor2, textColor1, fontWeightStrong, fontSize } = vars
     return {
       labelFontSize: fontSize,
@@ -17,4 +15,4 @@ export default create({
       valueTextColor: textColor1
     }
   }
-})
+}

src/styles.js

@@ -69,7 +69,7 @@ export { baseDark, baseLight } from './_styles/base'
 // export { sliderDark, sliderLight } from './slider/styles'
 // export { spaceDark, spaceLight } from './space/styles'
 // export { spinDark, spinLight } from './spin/styles'
-export { statisticDark, statisticLight } from './statistic/styles'
+// export { statisticDark, statisticLight } from './statistic/styles'
 export { stepsDark, stepsLight } from './steps/styles'
 export { switchDark, switchLight } from './switch/styles'
 export { tableDark, tableLight } from './table/styles'

src/styles.new.js

@@ -50,6 +50,7 @@ import { scrollbarDark } from './scrollbar/styles'
 import { sliderDark } from './slider/styles'
 import { spaceDark } from './space/styles'
 import { spinDark } from './spin/styles'
+import { statisticDark } from './statistic/styles'
 
 export const darkTheme = {
   common: commonDark,
@@ -103,5 +104,6 @@ export const darkTheme = {
   Scrollbar: scrollbarDark,
   Slider: sliderDark,
   Space: spaceDark,
-  Spin: spinDark
+  Spin: spinDark,
+  Statistic: statisticDark
 }