fix: fix Notification component bug

oil-oil · Jul 21, 2023 · 03ebb5f · 03ebb5f
1 parent bd3d3a0
commit 03ebb5f
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 61 deletions.
diff --git a/packages/vuesax/src/App.tsx b/packages/vuesax/src/App.tsx
@@ -1,60 +1,39 @@
-import { defineComponent } from "vue";
+import { defineComponent, ref } from "vue";
 
 import { VsButton, useNotification } from "./components";
 
 export default defineComponent({
   setup() {
     const { open, close, clear } = useNotification();
     let key: string;
+    const n = ref(true);
     return () => (
       <>
         <VsButton
           onClick={() => {
             key = open({
-              success: true,
               text: "These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x",
               title: "Documentation Vuesax 4.0+",
-            });
-            console.log(key);
-          }}
-        >
-          open
-        </VsButton>
-        <VsButton
-          onClick={() => {
-            open({
               warn: true,
-              position: "bottom-left",
-              text: "These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x",
-              title: "Documenasdasdtation Vuesax 4.0+",
+              sticky: true,
             });
           }}
         >
-          bottom-left
+          open
         </VsButton>
         <VsButton
           onClick={() => {
-            open({
-              warn: true,
-              position: "top-center",
-              text: "These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x",
-              title: "Documenasdasdtation Vuesax 4.0+",
-            });
+            n.value = true;
           }}
         >
-          top-center
+          true
         </VsButton>
         <VsButton
           onClick={() => {
-            open({
-              warn: true,
-              position: "bottom-center",
-              text: "These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x",
-              title: "Documenasdasdtation Vuesax 4.0+",
-            });
+            n.value = false;
           }}
         >
-          bottom-center
+          false
         </VsButton>
         <VsButton
           onClick={() => {

diff --git a/packages/vuesax/src/components/notification/base/Notification.tsx b/packages/vuesax/src/components/notification/base/Notification.tsx
@@ -2,6 +2,8 @@ import {
   defineComponent,
   onMounted,
   onUnmounted,
+  PropType,
+  Ref,
   ref,
   Transition,
   watch,
@@ -17,9 +19,6 @@ const Notification = defineComponent({
   name: "VsNotification",
   props: {
     ...BaseProps,
-    index: {
-      type: Number,
-    },
     isVisible: {
       type: Boolean,
       default: true,
@@ -36,10 +35,6 @@ const Notification = defineComponent({
       type: Boolean,
       default: false,
     },
-    // icon: {
-    //   type: Boolean,
-    //   default: false,
-    // },
     clickClose: {
       type: Boolean,
       default: false,
@@ -69,16 +64,11 @@ const Notification = defineComponent({
       default: null,
     },
     loading: {
-      type: Boolean,
-      default: false,
+      type: Object as PropType<Ref<boolean>>,
     },
     progressAuto: {
       type: Boolean,
-      default: true,
-    },
-    progress: {
-      type: Number,
-      default: null,
+      default: false,
     },
     duration: {
       type: Number,
@@ -88,10 +78,6 @@ const Notification = defineComponent({
       type: Boolean,
       default: false,
     },
-    classNotification: {
-      type: String,
-      default: null,
-    },
   },
   emits: ["onClick", "clickClose", "onDestroy"],
   slots: ["default", "content"],
@@ -114,19 +100,19 @@ const Notification = defineComponent({
 
     onMounted(() => {
       innerIsVisible.value = props.isVisible;
-      innerProgress.value = props.progress;
       if (elRef.value) {
         setColor("color", props.color, elRef.value);
         setColor("border", props.color, elRef.value);
       }
-      if (props.progressAuto && props.progress) {
+      if (props.progressAuto) {
         intervalProgress = setInterval(() => {
           innerProgress.value += 1;
+          if (innerProgress.value >= 100) {
+            clearInterval(intervalProgress);
+            innerIsVisible.value = false;
+            emit("clickClose");
+          }
         }, props.duration / 100);
-      } else if (props.progress && !props.progressAuto) {
-        setTimeout(() => {
-          innerIsVisible.value = false;
-        }, props.progress);
       }
     });
     onUnmounted(() => {
@@ -135,7 +121,7 @@ const Notification = defineComponent({
 
     const handleClickClose = () => {
       innerIsVisible.value = false;
-      emit("clickClose", props.index);
+      emit("clickClose");
     };
 
     const beforeEnter = () => {
@@ -233,7 +219,7 @@ const Notification = defineComponent({
               { "vs-notification--square": props.square },
               { "vs-notification--width-all": props.width === "100%" },
               { "vs-notification--width-auto": props.width === "auto" },
-              { "vs-notification--loading": props.loading },
+              { "vs-notification--loading": props.loading?.value },
               { "vs-notification--notPadding": props.noPadding },
               { "vs-notification--primary": props.primary },
               { "vs-notification--success": props.success },
@@ -250,11 +236,11 @@ const Notification = defineComponent({
             }}
             ref={elRef}
           >
-            {!props.loading && slots.icon && icon()}
-            {!props.loading && content()}
+            {!props.loading?.value && slots.icon && icon()}
+            {!props.loading?.value && content()}
             {props.buttonClose && closeBtn()}
-            {props.loading && loading()}
-            {props.progress && progress()}
+            {props.loading?.value && loading()}
+            {props.progressAuto && progress()}
           </div>
         )}
       </Transition>

diff --git a/packages/vuesax/src/components/notification/base/style.scss b/packages/vuesax/src/components/notification/base/style.scss
@@ -72,6 +72,8 @@
         &.vs-notification--border {
           border: 3px solid transparent;
           border-top: 3px solid -color('border');
+          --vs-text:var(--vs-dark);
+          background: rgb(var(--vs-background));
         }
       }
       .notification-enter-from {
@@ -101,6 +103,8 @@
         &.vs-notification--border {
           border: 3px solid transparent;
           border-bottom: 3px solid -color('border');
+          --vs-text:var(--vs-dark);
+          background: rgb(var(--vs-background));
         }
       }
       .notification-enter-from {
@@ -130,6 +134,8 @@
         &.vs-notification--border {
           border: 3px solid transparent;
           border-left: 3px solid -color('border');
+          --vs-text:var(--vs-dark);
+          background: rgb(var(--vs-background));
         }
       }
       .notification-enter-from {
@@ -153,6 +159,8 @@
         &.vs-notification--border {
           border: 3px solid transparent;
           border-left: 3px solid -color('border');
+          --vs-text:var(--vs-dark);
+          background: rgb(var(--vs-background));
         }
       }
       .notification-enter-from {
@@ -167,7 +175,7 @@
 }
 .vs-notification {
     --vs-color: var(--vs-background);
-    --vs-border: var(--vs-background);
+    --vs-border: var(--vs-color);
     --vs-opacity: .6;
     max-height: 112px;
     padding: 20px;
@@ -244,6 +252,8 @@
       &.vs-notification--border {
         border: 0px solid transparent !important;
         border-right: 3px solid -color('border') !important;
+        --vs-text:var(--vs-dark);
+        background: rgb(var(--vs-background));
       }
       &:after {
         content: '';
@@ -287,6 +297,9 @@
     &.vs-notification--border {
       border: 3px solid transparent;
       border-right: 3px solid -color('border');
+      --vs-text:var(--vs-dark);
+      background: rgb(var(--vs-background));
+
     }
     &__progress {
       width: 0%;

diff --git a/packages/vuesax/src/components/notification/base/useNotification.tsx b/packages/vuesax/src/components/notification/base/useNotification.tsx
@@ -1,5 +1,5 @@
 import { nanoid } from "nanoid/non-secure";
-import { createApp, ref, TransitionGroup } from "vue";
+import { createApp, ref, TransitionGroup, VNode } from "vue";
 
 import Notification, { NotificationProps } from "./Notification";
 
@@ -13,6 +13,7 @@ type Position =
 
 type NotificationHookProps = Omit<NotificationProps, "isVisible"> & {
   position?: Position;
+  icon?: VNode;
 };
 
 const useNotification = () => {
@@ -104,6 +105,7 @@ const useNotification = () => {
           close(key, props.position || "bottom-right");
         }}
         key={key}
+        v-slots={props.icon && { icon: () => props.icon }}
       ></Notification>,
     ]);