refactor(alert): ts

src/alert/src/Alert.vue

@@ -37,8 +37,8 @@
   </n-fade-in-expand-transition>
 </template>
 
-<script>
+<script lang="ts">
-import { ref, computed, defineComponent } from 'vue'
+import { ref, computed, defineComponent, PropType } from 'vue'
 import {
   InfoIcon,
   SuccessIcon,
@@ -48,7 +48,8 @@ import {
 import { NFadeInExpandTransition, NBaseClose, NBaseIcon } from '../../_base'
 import { useTheme } from '../../_mixins'
 import { warn, createKey } from '../../_utils'
-import { alertLight } from '../styles'
+import { alertLight } from '../styles/index'
+import type { AlertThemeVars } from '../styles/index'
 import style from './styles/index.cssr'
 
 export default defineComponent({
@@ -74,9 +75,9 @@ export default defineComponent({
       default: true
     },
     type: {
-      validator (type) {
+      type: String as PropType<
-        return ['info', 'warning', 'error', 'success', 'default'].includes(type)
+        'info' | 'warning' | 'error' | 'success' | 'default'
-      },
+      >,
       default: 'default'
     },
     closable: {
@@ -92,7 +93,8 @@ export default defineComponent({
       default: undefined
     },
     onAfterHide: {
-      validator () {
+      type: Function,
+      validator: () => {
         if (__DEV__) {
           warn(
             'alert',
@@ -105,7 +107,13 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const themeRef = useTheme('Alert', 'Alert', style, alertLight, props)
+    const themeRef = useTheme<AlertThemeVars>(
+      'Alert',
+      'Alert',
+      style,
+      alertLight,
+      props
+    )
     const cssVars = computed(() => {
       const {
         common: { cubicBezierEaseInOut },

src/alert/src/styles/index.cssr.ts

@@ -15,37 +15,46 @@ import fadeInHeightExpandTranstion from '../../../_styles/transitions/fade-in-he
 // --border-radius
 // --font-size
 // --title-font-weight
-export default cB('alert', `
+export default cB(
+  'alert',
+  `
   line-height: var(--line-height);
   border-radius: var(--border-radius);
   position: relative;
   transition: background-color .3s var(--bezier);
   background-color: var(--color);
   text-align: start;
-`, [
+`,
-  cE('icon', {
+  [
-    color: 'var(--icon-color)'
+    cE('icon', {
-  }),
+      color: 'var(--icon-color)'
-  cB('alert-body', {
-    border: 'var(--border)'
-  }, [
-    cE('title', {
-      color: 'var(--title-text-color)'
     }),
-    cE('content', {
+    cB(
-      color: 'var(--content-text-color)'
+      'alert-body',
-    })
+      {
-  ]),
+        border: 'var(--border)'
-  fadeInHeightExpandTranstion({
+      },
-    originalTransition: 'transform .3s var(--bezier)',
+      [
-    enterToProps: {
+        cE('title', {
-      transform: 'scale(1)'
+          color: 'var(--title-text-color)'
-    },
+        }),
-    leaveToProps: {
+        cE('content', {
-      transform: 'scale(0.9)'
+          color: 'var(--content-text-color)'
-    }
+        })
-  }),
+      ]
-  cE('icon', `
+    ),
+    fadeInHeightExpandTranstion({
+      originalTransition: 'transform .3s var(--bezier)',
+      enterToProps: {
+        transform: 'scale(1)'
+      },
+      leaveToProps: {
+        transform: 'scale(0.9)'
+      }
+    }),
+    cE(
+      'icon',
+      `
     position: absolute;
     left: 12px;
     top: 14px;
@@ -54,42 +63,55 @@ export default cB('alert', `
     width: 26px;
     height: 26px;
     font-size: 26px;
-  `),
+  `
-  cE('close', `
+    ),
+    cE(
+      'close',
+      `
     transition: color .3s var(--bezier);
     position: absolute;
     right: 16px;
     font-size: 14px;
     top: 14px;
-  `),
+  `
-  cB('alert-body', `
+    ),
+    cB(
+      'alert-body',
+      `
     border-radius: var(--border-radius);
     padding: 15px 15px 15px 47px;
     transition: border-color .3s var(--bezier);
-  `, [
+  `,
-    cE('title', `
+      [
+        cE(
+          'title',
+          `
       transition: color .3s var(--bezier);
       font-size: 16px;
       line-height: 19px;
       font-weight: var(--title-font-weight);
-    `, [
+    `,
-      c('& +', [
+          [
+            c('& +', [
+              cE('content', {
+                marginTop: '9px'
+              })
+            ])
+          ]
+        ),
         cE('content', {
-          marginTop: '9px'
+          transition: 'color .3s var(--bezier)',
+          fontSize: 'var(--font-size)'
         })
-      ])
+      ]
-    ]),
+    ),
-    cE('content', {
+    cE('icon', {
-      transition: 'color .3s var(--bezier)',
+      transition: 'color .3s var(--bezier)'
-      fontSize: 'var(--font-size)'
+    }),
-    })
+    cM('no-icon', [
-  ]),
+      cB('alert-body', {
-  cE('icon', {
+        paddingLeft: '19px'
-    transition: 'color .3s var(--bezier)'
+      })
-  }),
+    ])
-  cM('no-icon', [
+  ]
-    cB('alert-body', {
+)
-      paddingLeft: '19px'
-    })
-  ])
-])

src/alert/styles/dark.ts

@@ -1,10 +1,12 @@
 import { changeColor } from 'seemly'
 import { commonDark } from '../../_styles/new-common'
+import type { ThemeCommonVars } from '../../_styles/new-common'
+import type { AlertThemeVars } from './light'
 
 export default {
   name: 'Alert',
   common: commonDark,
-  self (vars) {
+  self (vars: ThemeCommonVars): AlertThemeVars {
     const {
       lineHeight,
       borderRadius,

src/alert/styles/index.js

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

src/alert/styles/index.ts

@@ -0,0 +1,3 @@
+export { default as alertDark } from './dark'
+export { default as alertLight } from './light'
+export type { AlertThemeVars } from './light'

src/alert/styles/light.ts

@@ -1,10 +1,11 @@
 import { changeColor, composite } from 'seemly'
 import { commonLight } from '../../_styles/new-common'
+import type { ThemeCommonVars } from '../../_styles/new-common'
 
-export default {
+const alertLight = {
   name: 'Alert',
   common: commonLight,
-  self (vars) {
+  self (vars: ThemeCommonVars) {
     const {
       lineHeight,
       borderRadius,
@@ -92,3 +93,6 @@ export default {
     }
   }
 }
+
+export default alertLight
+export type AlertThemeVars = ReturnType<typeof alertLight.self>