update alert (#104)

.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
-
-

.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
       }
     }
   }

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>

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,19 +16,39 @@ export default defineComponent({
 
     const slots = useSlots()
 
+    const isShow = ref(true)
+
+    const close = () => {
+      isShow.value = false
+    }
+
     return {
       styleClass,
+      isShow,
+      close,
       slots
     }
   }
 })
 </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>
 

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));