@v-c/notification 2.0.0-beta.1 → 2.0.0-rc.2

package/docs/index.less

@@ -5,11 +5,16 @@
   position: fixed;
   z-index: 1000;
   display: flex;
+  max-height: 100vh;
+  padding: 10px;
+  align-items: flex-end;
   width: 340px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: 100vh;
   box-sizing: border-box;
   pointer-events: none;
   flex-direction: column;
-  padding: 10px;
 
   // Position
   &-top,
@@ -29,68 +34,37 @@
     right: 0;
   }
 
-  // ===================== List Content =======================
-  &-list-content {
-    position: relative;
-    display: block;
-    width: 100%;
-    transition: height 0.3s;
-  }
-
   // ========================= Notice =========================
   &-notice {
-    pointer-events: auto;
-    position: absolute;
-    inset-inline: 0;
+    position: relative;
+    display: block;
     box-sizing: border-box;
     line-height: 1.5;
-    width: 300px;
-    border-radius: 3px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-    background: #fff;
-    border: 0px solid rgba(0, 0, 0, 0);
-    transform: translateY(var(--notification-y, 0));
-    transition: transform 0.3s, opacity 0.3s;
-
-    // Title
-    &-title {
-      padding: 7px 30px 0 10px;
-      font-weight: 600;
-    }
-
-    // Description
-    &-description {
-      padding: 7px 30px 7px 10px;
-    }
-
-    // Section (title + description)
-    &-section {
-      display: block;
-    }
+    width: 100%;
 
-    // Wrapper (icon + section)
     &-wrapper {
-      display: flex;
-      gap: 8px;
-      padding: 7px 30px 7px 10px;
-    }
-
-    &-wrapper > &-section,
-    &-wrapper > &-title,
-    &-wrapper > &-description {
-      padding: 0;
+      pointer-events: auto;
+      position: relative;
+      display: block;
+      box-sizing: border-box;
+      border-radius: 3px 3px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+      margin: 0 0 16px;
+      border: 1px solid #999;
+      border: 0px solid rgba(0, 0, 0, 0);
+      background: #fff;
+      width: 300px;
     }
 
-    &-icon {
-      flex: none;
+    // Content
+    &-content {
+      padding: 7px 20px 7px 10px;
     }
 
-    // Actions
-    &-actions {
-      padding: 0 10px 7px;
+    &-closable &-content {
+      padding-right: 20px;
     }
 
-    // Close
     &-close {
       position: absolute;
       top: 3px;
@@ -104,12 +78,18 @@
       outline: none;
       cursor: pointer;
       opacity: 0.2;
+      filter: alpha(opacity=20);
       border: 0;
-      background-color: transparent;
+      background-color: #fff;
+
+      &-x:after {
+        content: '×';
+      }
 
       &:hover {
         text-decoration: none;
         opacity: 1;
+        filter: alpha(opacity=100);
       }
     }
 
@@ -118,13 +98,12 @@
       position: absolute;
       left: 3px;
       right: 3px;
-      bottom: 0;
       border-radius: 1px;
       overflow: hidden;
       appearance: none;
       -webkit-appearance: none;
       display: block;
-      inline-size: calc(100% - 6px);
+      inline-size: 100%;
       block-size: 2px;
       border: 0;
 
@@ -163,21 +142,123 @@
     opacity: 1;
   }
 
+  // .fade-effect() {
+  //   animation-duration: 0.3s;
+  //   animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
+  //   animation-fill-mode: both;
+  // }
+
+  // &-fade-appear,
+  // &-fade-enter {
+  //   opacity: 0;
+  //   animation-play-state: paused;
+  //   .fade-effect();
+  // }
+
+  // &-fade-leave {
+  //   .fade-effect();
+  //   animation-play-state: paused;
+  // }
+
+  // &-fade-appear&-fade-appear-active,
+  // &-fade-enter&-fade-enter-active {
+  //   animation-name: rcNotificationFadeIn;
+  //   animation-play-state: running;
+  // }
+
+  // &-fade-leave&-fade-leave-active {
+  //   animation-name: rcDialogFadeOut;
+  //   animation-play-state: running;
+  // }
+
+  // @keyframes rcNotificationFadeIn {
+  //   0% {
+  //     opacity: 0;
+  //   }
+  //   100% {
+  //     opacity: 1;
+  //   }
+  // }
+
+  // @keyframes rcDialogFadeOut {
+  //   0% {
+  //     opacity: 1;
+  //   }
+  //   100% {
+  //     opacity: 0;
+  //   }
+  // }
+
   // ========================= Stack =========================
   &-stack {
-    & > .@{notificationPrefixCls}-list-content > .@{notificationPrefixCls}-notice {
-      transition: transform 0.3s, opacity 0.3s;
+    & > .@{notificationPrefixCls}-notice {
+      &-wrapper {
+        transition: all 0.3s;
+        position: absolute;
+        top: 12px;
+        opacity: 1;
+
+        &:not(:nth-last-child(-n + 3)) {
+          opacity: 0;
+          right: 34px;
+          width: 252px;
+          overflow: hidden;
+          color: transparent;
+          pointer-events: none;
+        }
+
+        &:nth-last-child(1) {
+          right: 10px;
+        }
 
-      &:not(.@{notificationPrefixCls}-notice-stack-in-threshold) {
-        opacity: 0;
-        pointer-events: none;
+        &:nth-last-child(2) {
+          right: 18px;
+          width: 284px;
+          color: transparent;
+          overflow: hidden;
+        }
+
+        &:nth-last-child(3) {
+          right: 26px;
+          width: 268px;
+          color: transparent;
+          overflow: hidden;
+        }
       }
     }
 
     &&-expanded {
-      & > .@{notificationPrefixCls}-list-content > .@{notificationPrefixCls}-notice {
-        opacity: 1;
-        pointer-events: auto;
+      & > .@{notificationPrefixCls}-notice {
+        &-wrapper {
+          &:not(:nth-last-child(-n + 1)) {
+            opacity: 1;
+            width: 300px;
+            right: 10px;
+            overflow: unset;
+            color: inherit;
+            pointer-events: auto;
+          }
+
+          &::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: -16px;
+            width: 100%;
+            height: calc(100% + 32px);
+            background: transparent;
+            pointer-events: auto;
+            color: rgb(0,0,0);
+          }
+        }
+      }
+    }
+
+    &.@{notificationPrefixCls}-bottomRight {
+      & > .@{notificationPrefixCls}-notice-wrapper {
+        top: unset;
+        bottom: 12px;
       }
     }
   }

package/docs/maxCount.vue

@@ -10,7 +10,7 @@ const [notice, contextHolder] = useNotification({ maxCount: 3, motion })
   <button
     @click="() => {
       notice.open({
-        description: `${new Date().toISOString()}`,
+        content: `${new Date().toISOString()}`,
       });
     }"
   >

package/docs/showProgress.vue

@@ -10,7 +10,7 @@ const [notice, contextHolder] = useNotification({ showProgress: true, motion })
   <button
     @click="() => {
       notice.open({
-        description: `${new Date().toISOString()}`,
+        content: `${new Date().toISOString()}`,
       });
     }"
   >
@@ -19,7 +19,7 @@ const [notice, contextHolder] = useNotification({ showProgress: true, motion })
   <button
     @click="() => {
       notice.open({
-        description: `${new Date().toISOString()}`,
+        content: `${new Date().toISOString()}`,
         pauseOnHover: false,
       });
     }"

package/docs/stack.vue

@@ -7,7 +7,7 @@ const [{ open }, contextHolder] = useNotification({ motion, stack: true })
 
 function getConfig() {
   return {
-    description: `${Array.from({ length: Math.round(Math.random() * 5) + 1 })
+    content: `${Array.from({ length: Math.round(Math.random() * 5) + 1 })
       .fill(1)
       .map(() => new Date().toISOString())
       .join('\n')}`,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/notification",
   "type": "module",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-rc.2",
   "publishConfig": {
     "access": "public"
   },
@@ -25,7 +25,6 @@
     "build": "vite build",
     "test": "vitest run",
     "prepublish": "pnpm build",
-    "bump": "bumpp",
-    "patch": "bumpp --release patch"
+    "bump": "bumpp --release patch"
   }
 }