refactor(gradient-text): ts

src/gradient-text/index.js

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

src/gradient-text/index.ts

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

src/gradient-text/src/GradientText.tsx

@@ -1,32 +1,32 @@
-<template>
-  <span
-    class="n-gradient-text"
-    :class="{
-      [`n-gradient-text--${compatibleType}-type`]: true
-    }"
-    :style="{
-      fontSize: styleFontSize,
-      backgroundImage: styleBgImage,
-      ...cssVars
-    }"
-  >
-    <slot />
-  </span>
-</template>
-
-<script>
-import { defineComponent, computed, onBeforeMount } from 'vue'
+import {
+  defineComponent,
+  computed,
+  onBeforeMount,
+  renderSlot,
+  h,
+  PropType
+} from 'vue'
 import { useTheme } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
 import { createKey, formatLength } from '../../_utils'
 import { gradientTextLight } from '../styles'
-import style from './styles/index.cssr.js'
+import type { GradientTextTheme } from '../styles'
+import style from './styles/index.cssr'
 
 let houdiniRegistered = false
 
+type Gradient =
+  | string
+  | {
+    deg?: string | number
+    from: string
+    to: string
+  }
+
 export default defineComponent({
   name: 'GradientText',
   props: {
-    ...useTheme.props,
+    ...(useTheme.props as ThemeProps<GradientTextTheme>),
     size: {
       type: [String, Number],
       default: undefined
@@ -36,15 +36,17 @@ export default defineComponent({
       default: undefined
     },
     type: {
-      type: String,
+      type: String as PropType<
+      'info' | 'success' | 'warning' | 'error' | 'primary' | 'danger'
+      >,
       default: 'primary'
     },
     color: {
-      type: [Object, String],
+      type: [Object, String] as PropType<Gradient | undefined>,
       default: undefined
     },
     gradient: {
-      type: [Object, String],
+      type: [Object, String] as PropType<Gradient | undefined>,
       default: undefined
     }
   },
@@ -52,14 +54,14 @@ export default defineComponent({
     onBeforeMount(() => {
       if (!houdiniRegistered) {
         houdiniRegistered = true
-        if (window?.CSS?.registerProperty) {
-          CSS.registerProperty({
+        if ((window?.CSS as any)?.registerProperty) {
+          ;(CSS as any).registerProperty({
             name: '--color-start',
             syntax: '<color>',
             inherits: false,
             initialValue: 'transparent'
           })
-          CSS.registerProperty({
+          ;(CSS as any).registerProperty({
             name: '--color-end',
             syntax: '<color>',
             inherits: false,
@@ -68,7 +70,9 @@ export default defineComponent({
         }
       }
     })
-    const compatibleTypeRef = computed(() => {
+    const compatibleTypeRef = computed<
+    'info' | 'success' | 'warning' | 'error' | 'primary'
+    >(() => {
       const { type } = props
       if (type === 'danger') return 'error'
       return type
@@ -121,6 +125,22 @@ export default defineComponent({
         }
       })
     }
+  },
+  render () {
+    return (
+      <span
+        class={[
+          'n-gradient-text',
+          `n-gradient-text--${this.compatibleType}-type`
+        ]}
+        style={{
+          fontSize: this.styleFontSize,
+          backgroundImage: this.styleBgImage,
+          ...this.cssVars
+        }}
+      >
+        {renderSlot(this.$slots, 'default')}
+      </span>
+    )
   }
 })
-</script>

src/gradient-text/styles/index.js

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

src/gradient-text/styles/index.ts

@@ -0,0 +1,3 @@
+export { default as gradientTextDark } from './dark'
+export { default as gradientTextLight } from './light'
+export type { GradientTextTheme, GradientTextThemeVars } from './light'

src/gradient-text/styles/light.js

@@ -1,31 +0,0 @@
-import { changeColor } from 'seemly'
-import { commonLight } from '../../_styles/new-common'
-
-export default {
-  name: 'GradientText',
-  common: commonLight,
-  self (vars) {
-    const {
-      primaryColor,
-      successColor,
-      warningColor,
-      errorColor,
-      infoColor,
-      fontWeightStrong
-    } = vars
-    return {
-      fontWeight: fontWeightStrong,
-      rotate: '252deg',
-      colorStartPrimary: changeColor(primaryColor, { alpha: 0.6 }),
-      colorEndPrimary: primaryColor,
-      colorStartInfo: changeColor(infoColor, { alpha: 0.6 }),
-      colorEndInfo: infoColor,
-      colorStartWarning: changeColor(warningColor, { alpha: 0.6 }),
-      colorEndWarning: warningColor,
-      colorStartError: changeColor(errorColor, { alpha: 0.6 }),
-      colorEndError: errorColor,
-      colorStartSuccess: changeColor(successColor, { alpha: 0.6 }),
-      colorEndSuccess: successColor
-    }
-  }
-}

src/gradient-text/styles/light.ts

@@ -0,0 +1,40 @@
+import { changeColor } from 'seemly'
+import type { Theme } from '../../_mixins'
+import { commonLight } from '../../_styles/new-common'
+import type { ThemeCommonVars } from '../../_styles/new-common'
+
+const self = (vars: ThemeCommonVars) => {
+  const {
+    primaryColor,
+    successColor,
+    warningColor,
+    errorColor,
+    infoColor,
+    fontWeightStrong
+  } = vars
+  return {
+    fontWeight: fontWeightStrong,
+    rotate: '252deg',
+    colorStartPrimary: changeColor(primaryColor, { alpha: 0.6 }),
+    colorEndPrimary: primaryColor,
+    colorStartInfo: changeColor(infoColor, { alpha: 0.6 }),
+    colorEndInfo: infoColor,
+    colorStartWarning: changeColor(warningColor, { alpha: 0.6 }),
+    colorEndWarning: warningColor,
+    colorStartError: changeColor(errorColor, { alpha: 0.6 }),
+    colorEndError: errorColor,
+    colorStartSuccess: changeColor(successColor, { alpha: 0.6 }),
+    colorEndSuccess: successColor
+  }
+}
+
+export type GradientTextThemeVars = ReturnType<typeof self>
+
+const gradientTextLight: Theme<GradientTextThemeVars> = {
+  name: 'GradientText',
+  common: commonLight,
+  self
+}
+
+export default gradientTextLight
+export type GradientTextTheme = typeof gradientTextLight

src/rate/src/Rate.tsx

@@ -121,9 +121,7 @@ export default defineComponent({
                 onClick={() => this.handleClick(index)}
                 onMouseenter={() => this.handleMouseEnter(index)}
               >
-                <n-base-icon>
-                  <star-icon />
-                </n-base-icon>
+                <NBaseIcon>{{ default: () => StarIcon }}</NBaseIcon>
               </div>
             ) as VNode
         )}