refactor(element): ts

.eslintrc.js

@@ -1,8 +1,5 @@
 module.exports = {
   extends: ['plugin:markdown/recommended'],
-  rules: {
-    'no-void': 0
-  },
   overrides: [
     {
       files: 'src/**/*.vue',
@@ -38,7 +35,9 @@ module.exports = {
       },
       rules: {
         '@typescript-eslint/strict-boolean-expressions': 0,
-        '@typescript-eslint/prefer-nullish-coalescing': 0
+        '@typescript-eslint/prefer-nullish-coalescing': 0,
+        '@typescript-eslint/naming-convention': 0,
+        'no-void': 0
       }
     },
     {

.prettierignore

@@ -1,2 +1,3 @@
 src/_deprecated/icons
 *.cssr.js
+*.cssr.ts

demo/utils/ComponentDemos.js

@@ -1,6 +1,6 @@
 import { h } from 'vue'
-import NCol from '../../src/grid/src/Col.vue'
-import NRow from '../../src/grid/src/Row.vue'
+import NCol from '../../src/grid/src/Col'
+import NRow from '../../src/grid/src/Row'
 
 export default {
   name: 'ComponentDemos',

package.json

@@ -127,7 +127,7 @@
     "treemate": "^0.1.18",
     "vdirs": "^0.0.3",
     "vfonts": "^0.0.1",
-    "vooks": "^0.0.6",
+    "vooks": "0.0.8",
     "vue": "^3.0.5",
     "vueuc": "0.0.11"
   },

src/_mixins/use-theme.ts

@@ -12,11 +12,11 @@ globalStyle.mount({
   id: 'naive-ui-global'
 })
 
-export interface Theme<T, R = any> {
+export interface Theme<T = undefined, R = any> {
   name: string
   common?: ThemeCommonVars
   peers?: R
-  self(vars: ThemeCommonVars): T
+  self?: (vars: ThemeCommonVars) => T
 }
 
 type UseThemeProps<T> = Readonly<{
@@ -121,7 +121,7 @@ useTheme.props = {
   }
 } as const
 
-export type ThemeProps<T> = {
+export interface ThemeProps<T> {
   unstableTheme: {
     type: PropType<T>
     default: undefined
@@ -136,7 +136,7 @@ export type ThemeProps<T> = {
   }
 }
 
-export type ThemePropsReactive<T> = {
+export interface ThemePropsReactive<T> {
   unstableTheme: T
   unstableThemeOverrides: Record<string, any>
   builtinThemeOverrides: Record<string, any>

src/config-consumer/src/use-legacy.ts

@@ -1,4 +1,4 @@
-import { computed, watch, toRef } from 'vue'
+import { computed, watch, toRef, ComputedRef } from 'vue'
 import { ConfigProviderInjection } from '../../config-provider'
 import styleScheme from '../../_deprecated/style-scheme'
 
@@ -9,11 +9,18 @@ interface UseLegacyProps {
   ) => void
 }
 
+interface UseLegacy {
+  legacyTheme: ComputedRef<string | undefined>
+  legacyLanguage: ComputedRef<string | undefined>
+  legacyThemeEnvironment: ComputedRef<any>
+  legacyStyleScheme: ComputedRef<any>
+}
+
 export default function useLegacy (
   NConfigProvider: ConfigProviderInjection | null,
-  props: UseLegacyProps
-) {
-  if (NConfigProvider) {
+  props?: UseLegacyProps
+): UseLegacy {
+  if (NConfigProvider && props) {
     watch(toRef(NConfigProvider, 'mergedLanguage'), (value, oldValue) => {
       const { onLanguageChange } = props
       if (onLanguageChange) onLanguageChange(value, oldValue)
@@ -21,10 +28,10 @@ export default function useLegacy (
   }
   return {
     legacyTheme: computed(() => {
-      return (NConfigProvider && NConfigProvider.mergedTheme) || 'light'
+      return NConfigProvider?.mergedTheme || 'light'
     }),
     legacyLanguage: computed(() => {
-      return NConfigProvider ? NConfigProvider.mergedLanguage : null
+      return NConfigProvider ? NConfigProvider.mergedLanguage : undefined
     }),
     legacyThemeEnvironment: computed(() => {
       const { mergedThemeEnvironments, mergedTheme } = NConfigProvider || {}

src/divider/index.ts

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

src/element/src/Element.ts

@@ -1,6 +1,7 @@
-import { computed, h, defineComponent } from 'vue'
+import { computed, h, defineComponent, PropType } from 'vue'
 import { kebabCase } from 'lodash-es'
 import { useConfig, useTheme } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
 import { warn } from '../../_utils'
 
 /**
@@ -8,26 +9,29 @@ import { warn } from '../../_utils'
  */
 import useLegacy from '../../config-consumer/src/use-legacy'
 import { elementLight } from '../styles'
+import type { ElementTheme } from '../styles'
 
 export default defineComponent({
   name: 'Element',
   alias: ['El'],
   props: {
-    ...useTheme.props,
+    ...(useTheme.props as ThemeProps<ElementTheme>),
     tag: {
       type: String,
       default: 'div'
     },
     // deprecated
     onThemeChange: {
-      validator () {
+      type: Function as PropType<(theme: string | undefined) => void>,
+      validator: () => {
         warn('element', '`on-theme-change` is deprecated.')
         return true
       },
       default: undefined
     },
     as: {
-      validator () {
+      type: String,
+      validator: () => {
         warn('element', '`as` is deprecated, please use `tag` instead.')
         return true
       },
@@ -35,13 +39,22 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const themeRef = useTheme('Element', 'Element', null, elementLight, props)
+    const themeRef = useTheme(
+      'Element',
+      'Element',
+      undefined,
+      elementLight,
+      props
+    )
+    const { NConfigProvider, namespace } = useConfig(props)
     return {
-      ...useLegacy(props),
-      ...useConfig(props),
+      ...useLegacy(NConfigProvider),
+      namespace,
       cssVars: computed(() => {
         const { common } = themeRef.value
-        return Object.keys(common).reduce((prevValue, key) => {
+        return ((Object.keys(common) as unknown) as Array<
+        keyof typeof common
+        >).reduce<Record<string, string | number>>((prevValue, key) => {
           prevValue[`--${kebabCase(key)}`] = common[key]
           return prevValue
         }, {})
@@ -63,22 +76,15 @@ export default defineComponent({
     return h(
       as || tag,
       {
-        class: [
-          'n-element',
-          {
-            [`n-${legacyTheme}-theme`]: legacyTheme
-          }
-        ],
+        class: ['n-element', legacyTheme && `n-${legacyTheme}-theme`],
         style: cssVars
       },
-      ($slots.default &&
-        $slots.default({
-          namespace: namespace,
-          theme: legacyTheme,
-          themeEnvironment: legacyThemeEnvironment,
-          styleScheme: legacyStyleScheme
-        })) ||
-        null
+      ($slots.default?.({
+        namespace: namespace,
+        theme: legacyTheme,
+        themeEnvironment: legacyThemeEnvironment,
+        styleScheme: legacyStyleScheme
+      }) || null) as any
     )
   }
 })

src/element/styles/dark.js

@@ -1,6 +0,0 @@
-import { commonDark } from '../../_styles/new-common'
-
-export default {
-  name: 'Element',
-  common: commonDark
-}

src/element/styles/dark.ts

@@ -0,0 +1,9 @@
+import { commonDark } from '../../_styles/new-common'
+import { ElementTheme } from './light'
+
+const elementDark: ElementTheme = {
+  name: 'Element',
+  common: commonDark
+}
+
+export default elementDark

src/element/styles/index.ts

@@ -1,2 +1,3 @@
 export { default as elementDark } from './dark'
 export { default as elementLight } from './light'
+export type { ElementTheme } from './light'

src/element/styles/light.js

@@ -1,6 +0,0 @@
-import { commonLight } from '../../_styles/new-common'
-
-export default {
-  name: 'Element',
-  common: commonLight
-}

src/element/styles/light.ts

@@ -0,0 +1,10 @@
+import { Theme } from '../../_mixins'
+import { commonLight } from '../../_styles/new-common'
+
+const elementLight: Theme = {
+  name: 'Element',
+  common: commonLight
+}
+
+export default elementLight
+export type ElementTheme = typeof elementLight

src/global.d.ts

@@ -1,5 +1,10 @@
+import { HTMLAttributes } from 'vue'
 export {}
 
 declare global {
   var __DEV__: boolean
-}
+}
+
+declare module 'vue' {
+  interface ComponentCustomProps extends HTMLAttributes {}
+}

src/grid/src/Row.tsx

@@ -10,7 +10,7 @@ import {
 import { useMemo } from 'vooks'
 import { formatLength } from '../../_utils'
 import { useStyle } from '../../_mixins'
-import style from './styles/index.cssr.js'
+import style from './styles/index.cssr'
 
 export interface RowInjection {
   gutter: any