refactor(statistic): ts

src/statistic/index.js

@@ -1,2 +0,0 @@
-/* istanbul ignore file */
-export { default as NStatistic } from './src/Statistic.vue'

src/statistic/index.ts

@@ -0,0 +1,2 @@
+/* istanbul ignore file */
+export { default as NStatistic } from './src/Statistic'

src/statistic/src/Statistic.tsx

@@ -1,35 +1,21 @@
-<template>
-  <div class="n-statistic" :style="cssVars">
-    <div class="n-statistic__label">
-      {{ label }}
-    </div>
-    <div class="n-statistic-value">
-      <span v-if="$slots.prefix" class="n-statistic-value__prefix">
-        <slot name="prefix" />
-      </span>
-      <span v-if="value" class="n-statistic-value__content">
-        {{ value }}
-      </span>
-      <span v-else-if="$slots.default" class="n-statistic-value__content">
-        <slot />
-      </span>
-      <span v-if="$slots.suffix" class="n-statistic-value__suffix">
-        <slot name="suffix" />
-      </span>
-    </div>
-  </div>
-</template>
-
-<script>
-import { defineComponent, computed } from 'vue'
+import {
+  defineComponent,
+  computed,
+  CSSProperties,
+  PropType,
+  h,
+  renderSlot
+} from 'vue'
 import { useTheme } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
 import { statisticLight } from '../styles'
-import style from './styles/index.cssr.js'
+import type { StatisticTheme } from '../styles'
+import style from './styles/index.cssr'
 
 export default defineComponent({
   name: 'Statistic',
   props: {
-    ...useTheme.props,
+    ...(useTheme.props as ThemeProps<StatisticTheme>),
     label: {
       type: String,
       default: undefined
@@ -39,7 +25,7 @@ export default defineComponent({
       default: undefined
     },
     valueStyle: {
-      type: [Object, String],
+      type: [Object, String] as PropType<undefined | string | CSSProperties>,
       default: undefined
     }
   },
@@ -77,6 +63,32 @@ export default defineComponent({
         }
       })
     }
+  },
+  render () {
+    const { $slots } = this
+    return (
+      <div class="n-statistic" style={this.cssVars as CSSProperties}>
+        <div class="n-statistic__label">{this.label}</div>
+        <div class="n-statistic-value">
+          {$slots.prefix ? (
+            <span class="n-statistic-value__prefix">
+              {renderSlot($slots, 'prefix')}
+            </span>
+          ) : null}
+          {this.value !== undefined ? (
+            <span class="n-statistic-value__content">{this.value}</span>
+          ) : (
+            <span class="n-statistic-value__content">
+              {renderSlot($slots, 'default')}
+            </span>
+          )}
+          {$slots.suffix ? (
+            <span class="n-statistic-value__suffix">
+              {renderSlot($slots, 'suffix')}
+            </span>
+          ) : null}
+        </div>
+      </div>
+    )
   }
 })
-</script>

src/statistic/styles/dark.ts

@@ -1,6 +1,7 @@
 import { commonDark } from '../../_styles/new-common'
+import type { StatisticTheme } from './light'
 
-export default {
+const statisticDark: StatisticTheme = {
   name: 'Statistic',
   common: commonDark,
   self (vars) {
@@ -21,3 +22,5 @@ export default {
     }
   }
 }
+
+export default statisticDark

src/statistic/styles/index.js

@@ -1,2 +0,0 @@
-export { default as statisticDark } from './dark.js'
-export { default as statisticLight } from './light.js'

src/statistic/styles/index.ts

@@ -0,0 +1,3 @@
+export { default as statisticDark } from './dark'
+export { default as statisticLight } from './light'
+export type { StatisticTheme, StatisticThemeVars } from './light'

src/statistic/styles/light.js

@@ -1,18 +0,0 @@
-import { commonLight } from '../../_styles/new-common'
-
-export default {
-  name: 'Statistic',
-  common: commonLight,
-  self (vars) {
-    const { textColor2, textColor1, fontWeightStrong, fontSize } = vars
-    return {
-      labelFontSize: fontSize,
-      labelFontWeight: fontWeightStrong,
-      valueFontWeight: fontWeightStrong,
-      labelTextColor: textColor2,
-      valuePrefixTextColor: textColor1,
-      valueSuffixTextColor: textColor1,
-      valueTextColor: textColor1
-    }
-  }
-}

src/statistic/styles/light.ts

@@ -0,0 +1,26 @@
+import { commonLight } from '../../_styles/new-common'
+import type { ThemeCommonVars } from '../../_styles/new-common'
+
+const self = (vars: ThemeCommonVars) => {
+  const { textColor2, textColor1, fontWeightStrong, fontSize } = vars
+  return {
+    labelFontSize: fontSize,
+    labelFontWeight: fontWeightStrong,
+    valueFontWeight: fontWeightStrong,
+    labelTextColor: textColor2,
+    valuePrefixTextColor: textColor1,
+    valueSuffixTextColor: textColor1,
+    valueTextColor: textColor1
+  }
+}
+
+export type StatisticThemeVars = ReturnType<typeof self>
+
+const statisticLight = {
+  name: 'Statistic',
+  common: commonLight,
+  self
+}
+
+export default statisticLight
+export type StatisticTheme = typeof statisticLight