refactor(divider): ts

src/divider/src/Divider.tsx

@@ -0,0 +1,79 @@
+import {
+  h,
+  computed,
+  defineComponent,
+  CSSProperties,
+  PropType,
+  Fragment,
+  renderSlot
+} from 'vue'
+import { useConfig, useTheme } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
+import { dividerLight } from '../styles'
+import type { DividerTheme } from '../styles'
+import style from './styles/index.cssr'
+
+export default defineComponent({
+  name: 'Divider',
+  props: {
+    ...(useTheme.props as ThemeProps<DividerTheme>),
+    titlePlacement: {
+      type: String as PropType<'left' | 'center' | 'right'>,
+      default: 'center'
+    },
+    dashed: {
+      type: Boolean,
+      default: false
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup (props) {
+    const themeRef = useTheme('Divider', 'Divider', style, dividerLight, props)
+    return {
+      ...useConfig(props),
+      cssVars: computed(() => {
+        const {
+          common: { cubicBezierEaseInOut },
+          self: { color, textColor, fontWeight }
+        } = themeRef.value
+        return {
+          '--bezier': cubicBezierEaseInOut,
+          '--color': color,
+          '--text-color': textColor,
+          '--font-weight': fontWeight
+        }
+      })
+    }
+  },
+  render () {
+    const { $slots, titlePlacement, vertical, dashed, cssVars } = this
+    return (
+      <div
+        class={[
+          'n-divider',
+          {
+            'n-divider--vertical': vertical,
+            'n-divider--no-title': !$slots.default,
+            'n-divider--dashed': dashed,
+            [`n-divider--title-position-${titlePlacement}`]:
+              $slots.default && titlePlacement
+          }
+        ]}
+        style={cssVars as CSSProperties}
+      >
+        {!vertical ? (
+          <hr class="n-divider__line n-divider__line--left" />
+        ) : null}
+        {!vertical && $slots.default ? (
+          <>
+            <div class="n-divider__title">{renderSlot($slots, 'default')}</div>
+            <div class="n-divider__line n-divider__line--right" />
+          </>
+        ) : null}
+      </div>
+    )
+  }
+})

src/divider/src/Divider.vue

@@ -1,66 +0,0 @@
-<template>
-  <div
-    class="n-divider"
-    :class="{
-      'n-divider--vertical': vertical,
-      'n-divider--no-title': !$slots.default,
-      'n-divider--dashed': dashed,
-      [`n-divider--title-position-${titlePlacement}`]:
-        $slots.default && titlePlacement
-    }"
-    :style="cssVars"
-  >
-    <hr v-if="!vertical" class="n-divider__line n-divider__line--left">
-    <div v-if="!vertical && $slots.default" class="n-divider__title">
-      <slot />
-    </div>
-    <div
-      v-if="!vertical && $slots.default"
-      class="n-divider__line n-divider__line--right"
-    />
-  </div>
-</template>
-
-<script>
-import { computed, defineComponent } from 'vue'
-import { useConfig, useTheme } from '../../_mixins'
-import { dividerLight } from '../styles'
-import style from './styles/index.cssr'
-
-export default defineComponent({
-  name: 'Divider',
-  props: {
-    ...useTheme.props,
-    titlePlacement: {
-      type: String,
-      default: 'center'
-    },
-    dashed: {
-      type: Boolean,
-      default: false
-    },
-    vertical: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup (props) {
-    const themeRef = useTheme('Divider', 'Divider', style, dividerLight, props)
-    return {
-      ...useConfig(props),
-      cssVars: computed(() => {
-        const {
-          common: { cubicBezierEaseInOut },
-          self: { color, textColor, fontWeight }
-        } = themeRef.value
-        return {
-          '--bezier': cubicBezierEaseInOut,
-          '--color': color,
-          '--text-color': textColor,
-          '--font-weight': fontWeight
-        }
-      })
-    }
-  }
-})
-</script>

src/divider/styles/dark.ts

@@ -1,6 +1,7 @@
 import { commonDark } from '../../_styles/new-common'
+import type { DividerTheme } from './light'
 
-export default {
+const dividerDark: DividerTheme = {
   name: 'Divider',
   common: commonDark,
   self (vars) {
@@ -12,3 +13,5 @@ export default {
     }
   }
 }
+
+export default dividerDark

src/divider/styles/index.js

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

src/divider/styles/index.ts

@@ -0,0 +1,3 @@
+export { default as dividerDark } from './dark'
+export { default as dividerLight } from './light'
+export type { DividerThemeVars, DividerTheme } from './light'

src/divider/styles/light.js

@@ -1,14 +0,0 @@
-import { commonLight } from '../../_styles/new-common'
-
-export default {
-  name: 'Divider',
-  common: commonLight,
-  self (vars) {
-    const { textColor1, dividerColorOverlay, fontWeightStrong } = vars
-    return {
-      textColor: textColor1,
-      color: dividerColorOverlay,
-      fontWeight: fontWeightStrong
-    }
-  }
-}

src/divider/styles/light.ts

@@ -0,0 +1,23 @@
+import { commonLight } from '../../_styles/new-common'
+import type { ThemeCommonVars } from '../../_styles/new-common'
+import type { Theme } from '../../_mixins'
+
+const self = (vars: ThemeCommonVars) => {
+  const { textColor1, dividerColorOverlay, fontWeightStrong } = vars
+  return {
+    textColor: textColor1,
+    color: dividerColorOverlay,
+    fontWeight: fontWeightStrong
+  }
+}
+
+export type DividerThemeVars = ReturnType<typeof self>
+
+const dividerLight: Theme<DividerThemeVars> = {
+  name: 'Divider',
+  common: commonLight,
+  self
+}
+
+export default dividerLight
+export type DividerTheme = typeof dividerLight