From b907e295d709f37d39313b8839fb4b84ce181896 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Fri, 15 Jan 2021 00:35:19 +0800
Subject: [PATCH] refactor(alert): ts

---
 src/alert/{index.js => index.ts}              |   0
 src/alert/src/Alert.vue                       |  24 ++--
 .../styles/{index.cssr.js => index.cssr.ts}   | 120 +++++++++++-------
 src/alert/styles/{dark.js => dark.ts}         |   4 +-
 src/alert/styles/index.js                     |   2 -
 src/alert/styles/index.ts                     |   3 +
 src/alert/styles/{light.js => light.ts}       |   8 +-
 7 files changed, 99 insertions(+), 62 deletions(-)
 rename src/alert/{index.js => index.ts} (100%)
 rename src/alert/src/styles/{index.cssr.js => index.cssr.ts} (50%)
 rename src/alert/styles/{dark.js => dark.ts} (94%)
 delete mode 100644 src/alert/styles/index.js
 create mode 100644 src/alert/styles/index.ts
 rename src/alert/styles/{light.js => light.ts} (93%)

diff --git a/src/alert/index.js b/src/alert/index.ts
similarity index 100%
rename from src/alert/index.js
rename to src/alert/index.ts
diff --git a/src/alert/src/Alert.vue b/src/alert/src/Alert.vue
index 0be7d7c7a..34e173684 100644
--- a/src/alert/src/Alert.vue
+++ b/src/alert/src/Alert.vue
@@ -37,8 +37,8 @@
   </n-fade-in-expand-transition>
 </template>
 
-<script>
-import { ref, computed, defineComponent } from 'vue'
+<script lang="ts">
+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) {
-        return ['info', 'warning', 'error', 'success', 'default'].includes(type)
-      },
+      type: String as PropType<
+        '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 },
diff --git a/src/alert/src/styles/index.cssr.js b/src/alert/src/styles/index.cssr.ts
similarity index 50%
rename from src/alert/src/styles/index.cssr.js
rename to src/alert/src/styles/index.cssr.ts
index c44e07d7b..2ed1d7864 100644
--- a/src/alert/src/styles/index.cssr.js
+++ b/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)'
-  }),
-  cB('alert-body', {
-    border: 'var(--border)'
-  }, [
-    cE('title', {
-      color: 'var(--title-text-color)'
+`,
+  [
+    cE('icon', {
+      color: 'var(--icon-color)'
     }),
-    cE('content', {
-      color: 'var(--content-text-color)'
-    })
-  ]),
-  fadeInHeightExpandTranstion({
-    originalTransition: 'transform .3s var(--bezier)',
-    enterToProps: {
-      transform: 'scale(1)'
-    },
-    leaveToProps: {
-      transform: 'scale(0.9)'
-    }
-  }),
-  cE('icon', `
+    cB(
+      'alert-body',
+      {
+        border: 'var(--border)'
+      },
+      [
+        cE('title', {
+          color: 'var(--title-text-color)'
+        }),
+        cE('content', {
+          color: 'var(--content-text-color)'
+        })
+      ]
+    ),
+    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', {
-      transition: 'color .3s var(--bezier)',
-      fontSize: 'var(--font-size)'
-    })
-  ]),
-  cE('icon', {
-    transition: 'color .3s var(--bezier)'
-  }),
-  cM('no-icon', [
-    cB('alert-body', {
-      paddingLeft: '19px'
-    })
-  ])
-])
+      ]
+    ),
+    cE('icon', {
+      transition: 'color .3s var(--bezier)'
+    }),
+    cM('no-icon', [
+      cB('alert-body', {
+        paddingLeft: '19px'
+      })
+    ])
+  ]
+)
diff --git a/src/alert/styles/dark.js b/src/alert/styles/dark.ts
similarity index 94%
rename from src/alert/styles/dark.js
rename to src/alert/styles/dark.ts
index c920c6bf6..bd90d4dc1 100644
--- a/src/alert/styles/dark.js
+++ b/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,
diff --git a/src/alert/styles/index.js b/src/alert/styles/index.js
deleted file mode 100644
index f3c55e073..000000000
--- a/src/alert/styles/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as alertDark } from './dark.js'
-export { default as alertLight } from './light.js'
diff --git a/src/alert/styles/index.ts b/src/alert/styles/index.ts
new file mode 100644
index 000000000..29ff0bd51
--- /dev/null
+++ b/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'
diff --git a/src/alert/styles/light.js b/src/alert/styles/light.ts
similarity index 93%
rename from src/alert/styles/light.js
rename to src/alert/styles/light.ts
index b4f456c51..c4c2e1a22 100644
--- a/src/alert/styles/light.js
+++ b/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>