From 0af205e586aee7e51fea2346abce684ec343b918 Mon Sep 17 00:00:00 2001
From: lyuly <20879193+lyuly@users.noreply.github.com>
Date: Mon, 13 Mar 2023 21:10:09 +0800
Subject: [PATCH] update alert (#104)

---
 .eslintignore                                 |  2 --
 .eslintrc.json                                |  8 ++---
 .../src/example/other/alert/sizeAlert.vue     |  1 +
 .../src/components/alert/wAlert.vue           | 30 +++++++++++++++----
 .../src/styles/components/alert.scss          | 13 ++++++++
 5 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index 87bd9d9..071bbd5 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -12,5 +12,3 @@ packages/wview-components/src/components/icons/font/food.js
 packages/wview-components/src/components/icons/font/goods.js
 packages/wview-components/src/components/progress/wProgress.vue
 packages/wview-components/src/components/modal/wModal.vue
-
-
diff --git a/.eslintrc.json b/.eslintrc.json
index e0fbc55..2654aa8 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -11,8 +11,9 @@
   "parserOptions": {
     "ecmaVersion": "latest",
     "parser": "@typescript-eslint/parser",
-    "project": "packages/*/tsconfig.json",
-    "sourceType": "module"
+    // "project": "packages/*/tsconfig.json",
+    "sourceType": "module",
+    "extraFileExtensions": [".vue"]
   },
   "plugins": [
     "vue",
@@ -26,8 +27,7 @@
     },
     "import/resolver": {
       "typescript": {
-        "alwaysTryTypes": true,
-        "project": "packages/*/tsconfig.json"
+        "alwaysTryTypes": true
       }
     }
   }
diff --git a/packages/document/docs/src/example/other/alert/sizeAlert.vue b/packages/document/docs/src/example/other/alert/sizeAlert.vue
index f2cf674..1a28358 100644
--- a/packages/document/docs/src/example/other/alert/sizeAlert.vue
+++ b/packages/document/docs/src/example/other/alert/sizeAlert.vue
@@ -3,6 +3,7 @@ import { Alert } from 'wviewui'
 </script>
 
 <template>
+  <Alert type="danger">默认警告</Alert>
   <Alert type="success" size="mini">成功警告</Alert>
   <Alert type="warning" size="small">严重警告</Alert>
   <Alert type="info">通知警告</Alert>
diff --git a/packages/wview-components/src/components/alert/wAlert.vue b/packages/wview-components/src/components/alert/wAlert.vue
index 635ccf5..3507057 100644
--- a/packages/wview-components/src/components/alert/wAlert.vue
+++ b/packages/wview-components/src/components/alert/wAlert.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import '@/styles/components/alert.scss'
-import { computed, defineComponent, useSlots } from 'vue'
+import { computed, defineComponent, ref, useSlots } from 'vue'
 import { alertProps } from './types'
 
 export default defineComponent({
@@ -16,8 +16,16 @@ export default defineComponent({
 
     const slots = useSlots()
 
+    const isShow = ref(true)
+
+    const close = () => {
+      isShow.value = false
+    }
+
     return {
       styleClass,
+      isShow,
+      close,
       slots
     }
   }
@@ -25,10 +33,22 @@ export default defineComponent({
 </script>
 
 <template>
-  <div class="w-alert" :class="styleClass" role="alert">
-    <span v-if="slots.default">
-      <slot />
-    </span>
+  <div class="w-alert" :class="styleClass" role="alert" v-if="isShow">
+    <span v-if="slots.default"><slot /></span>
+    <button @click="close" class="w-alert--btn">
+      <svg
+        style="width: 1.25rem; height: 1.25rem"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clip-rule="evenodd"
+        ></path>
+      </svg>
+    </button>
   </div>
 </template>
 
diff --git a/packages/wview-components/src/styles/components/alert.scss b/packages/wview-components/src/styles/components/alert.scss
index 63d9db7..fd0442d 100644
--- a/packages/wview-components/src/styles/components/alert.scss
+++ b/packages/wview-components/src/styles/components/alert.scss
@@ -2,6 +2,7 @@
 @use '../color/color.scss' as *;
 
 @include b(alert) {
+  display: flex;
   margin-bottom: 1rem;
   border-radius: 0.5rem;
   padding: 1rem;
@@ -13,6 +14,18 @@
   --tw-text-opacity: 1;
   color: rgb(23 114 180 / var(--tw-text-opacity));
 
+  @include m(btn) {
+    margin: -.375rem;
+    margin-left: auto;
+    display: inline-flex;
+    height: 2rem;
+    width: 2rem;
+    border-radius: .5rem;
+    --tw-bg-opacity: 1;
+    padding: .375rem;
+    --tw-text-opacity: 1;
+  }
+
   @include m(default) {
     --tw-bg-opacity: 0.3;
     background-color: rgb(23 114 180 / var(--tw-bg-opacity));