refactor(alert): 优化Alert组件的目录结构 (#290)

Author: kagol

packages/devui-vue/devui/alert/index.ts

@@ -1,9 +1,7 @@
 import type { App } from 'vue';
 import Alert from './src/alert';
 
-Alert.install = function (app: App) {
-  app.component(Alert.name, Alert);
-};
+export * from './src/alert-types';
 
 export { Alert };
 
@@ -12,6 +10,6 @@ export default {
   category: '反馈',
   status: '100%',
   install(app: App): void {
-    app.use(Alert as any);
+    app.component(Alert.name, Alert);
   },
 };

packages/devui-vue/devui/alert/src/alert-close-icon.tsx

@@ -0,0 +1,28 @@
+import { ExtractPropTypes } from 'vue';
+
+export type AlertType = 'success' | 'danger' | 'warning' | 'info' | 'simple';
+
+export const alertProps = {
+  type: {
+    type: String as () => AlertType,
+    default: 'info',
+  },
+  cssClass: {
+    type: String,
+    default: '',
+  },
+  closeable: {
+    type: Boolean,
+    default: true,
+  },
+  showIcon: {
+    type: Boolean,
+    default: true,
+  },
+  dismissTime: {
+    type: Number,
+    default: 0,
+  },
+} as const;
+
+export type AlertProps = ExtractPropTypes<typeof alertProps>;

packages/devui-vue/devui/alert/src/alert-types.ts

@@ -1,8 +1,4 @@
-@import '../../style/mixins/index';
-@import '../../style/theme/color';
-@import '../../style/theme/shadow';
-@import '../../style/theme/corner';
-@import '../../style/theme/font';
+@import '../../styles-var/devui-var.scss';
 
 .devui-alert {
   color: $devui-text;

packages/devui-vue/devui/alert/src/alert.scss

@@ -1,36 +1,14 @@
 import { defineComponent, ref, Transition, onMounted } from 'vue';
 
-import AlertCloseIcon from './alert-close-icon';
-import AlertTypeIcon from './alert-type-icon';
+import AlertCloseIcon from './components/alert-close-icon';
+import AlertTypeIcon from './components/alert-type-icon';
 
+import { alertProps } from './alert-types';
 import './alert.scss';
 
-export type AlertType = 'success' | 'danger' | 'warning' | 'info' | 'simple';
-
 export default defineComponent({
   name: 'DAlert',
-  props: {
-    type: {
-      type: String as () => AlertType,
-      default: 'info',
-    },
-    cssClass: {
-      type: String,
-      default: '',
-    },
-    closeable: {
-      type: Boolean,
-      default: true,
-    },
-    showIcon: {
-      type: Boolean,
-      default: true,
-    },
-    dismissTime: {
-      type: Number,
-      default: 0,
-    },
-  },
+  props: alertProps,
   emits: ['close'],
   setup(props, ctx) {
     const hide = ref(false);

packages/devui-vue/devui/alert/src/alert.tsx

@@ -0,0 +1,21 @@
+const AlertCloseIcon = (): unknown => (
+  <svg width='10px' height='10px' viewBox='0 0 10 10' version='1.1' xmlns='http://www.w3.org/2000/svg'>
+    <g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>
+      <g transform='translate(-3.000000, -3.000000)' fill-rule='nonzero'>
+        <path d='M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891 \
+        12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416 \
+        12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416 \
+        C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749 \
+        L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548 \
+        11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858 \
+        3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894 \
+        C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416 \
+        L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908 \
+        2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057 \
+        C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936 \
+        L8,6.85411161 L11.6426,3.19816936 Z'></path>
+      </g>
+    </g>
+  </svg>
+);
+export default AlertCloseIcon;

packages/devui-vue/devui/alert/src/components/alert-close-icon.tsx

@@ -1,6 +1,6 @@
-import { AlertType } from './alert';
+import type { AlertType } from '../alert-types';
 
-const AlertTypeIcon = (props: { type: AlertType }) => (
+const AlertTypeIcon = (props: { type: AlertType }): unknown => (
   <svg
     width="16px"
     height="16px"
@@ -32,13 +32,20 @@ const AlertTypeIcon = (props: { type: AlertType }) => (
           <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
             <path
               class="devui-icon-warning-outer"
-              d="M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z"
+              d="M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 \
+              15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 \
+              14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 \
+              0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 \
+              C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 \
+              C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z"
             ></path>
             <path
               class="devui-icon-warning-inner"
               stroke-width="0.3"
               fill-rule="nonzero"
-              d="M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 L8.87894737,13 Z M8.62102372,9.86842105 L7.32800539,9.86842105 L7,4.5 L8.96842105,4.5 L8.62102372,9.86842105 Z"
+              d="M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 \
+              L8.87894737,13 Z M8.62102372,9.86842105 L7.32800539,9.86842105 L7,4.5 \
+              L8.96842105,4.5 L8.62102372,9.86842105 Z"
             ></path>
           </g>
         );