@v-c/notification 0.0.3 → 2.0.0-beta.1

package/dist/hooks/useStack.d.ts

@@ -1,6 +1,10 @@
-import { ComputedRef, MaybeRef, ToRefs } from 'vue';
-import { StackConfig } from '../interface';
-type StackParams = Exclude<StackConfig, boolean>;
-type UseStack = (config?: MaybeRef<StackConfig | undefined>) => [ComputedRef<boolean>, ToRefs<StackParams>];
+import { ComputedRef, MaybeRef } from 'vue';
+export interface StackConfig {
+    threshold?: number;
+    offset?: number;
+}
+type StackParams = Required<StackConfig>;
+export type StackInput = boolean | StackConfig;
+type UseStack = (config?: MaybeRef<StackInput | undefined>) => [ComputedRef<boolean>, ComputedRef<StackParams>];
 declare const useStack: UseStack;
 export default useStack;

package/dist/hooks/useStack.js

@@ -1,22 +1,19 @@
-import { computed, reactive, toRefs, unref, watchEffect } from "vue";
+import { computed, unref } from "vue";
+//#region src/hooks/useStack.ts
 var DEFAULT_OFFSET = 8;
 var DEFAULT_THRESHOLD = 3;
-var DEFAULT_GAP = 16;
 var useStack = (config) => {
-	const result = reactive({
-		offset: DEFAULT_OFFSET,
-		threshold: DEFAULT_THRESHOLD,
-		gap: DEFAULT_GAP
-	});
-	watchEffect(() => {
-		const _config = unref(config);
-		if (_config && typeof _config === "object") {
-			result.offset = _config.offset ?? DEFAULT_OFFSET;
-			result.threshold = _config.threshold ?? DEFAULT_THRESHOLD;
-			result.gap = _config.gap ?? DEFAULT_GAP;
-		}
-	});
-	return [computed(() => !!unref(config)), toRefs(result)];
+	return [computed(() => !!unref(config)), computed(() => {
+		const value = unref(config);
+		if (value && typeof value === "object") return {
+			offset: value.offset ?? DEFAULT_OFFSET,
+			threshold: value.threshold ?? DEFAULT_THRESHOLD
+		};
+		return {
+			offset: DEFAULT_OFFSET,
+			threshold: DEFAULT_THRESHOLD
+		};
+	})];
 };
-var useStack_default = useStack;
-export { useStack_default as default };
+//#endregion
+export { useStack as default };

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 import { NotificationAPI, NotificationConfig, default as useNotification } from './hooks/useNotification';
-import { default as Notice } from './Notice';
-import { useNotificationProvider } from './NotificationProvider';
-export { Notice, useNotification, useNotificationProvider };
-export type { NotificationAPI, NotificationConfig };
-export type { NoticeProps } from './Notice';
+import { ComponentsType, NotificationProps, default as Notification } from './Notification';
+import { NotificationProgressProps, default as Progress } from './Progress';
+import { default as NotificationList } from './NotificationList';
+import { default as NotificationProvider, useNotificationProvider } from './NotificationProvider';
+export { Notification, NotificationList, NotificationProvider, Progress, useNotification, useNotificationProvider, };
+export type { ComponentsType, NotificationAPI, NotificationConfig, NotificationProgressProps, NotificationProps, };
+export type { NotificationClassNames, NotificationListConfig, NotificationListProps, NotificationStyles, Placement, StackConfig, StackInput, } from './NotificationList';

package/dist/index.js

@@ -1,4 +1,6 @@
-import Notice_default from "./Notice.js";
-import { useNotificationProvider } from "./NotificationProvider.js";
+import Progress from "./Progress.js";
+import Notification from "./Notification.js";
+import NotificationProvider, { useNotificationProvider } from "./NotificationProvider.js";
+import NotificationList from "./NotificationList/index.js";
 import useNotification from "./hooks/useNotification.js";
-export { Notice_default as Notice, useNotification, useNotificationProvider };
+export { Notification, NotificationList, NotificationProvider, Progress, useNotification, useNotificationProvider };

package/docs/context.vue

@@ -5,7 +5,7 @@ import motion from './motion'
 
 const [{ open }, holder] = useNotification({ motion })
 const NOTICE = {
-  content: h('span', ['simple show']),
+  description: h('span', ['simple show']),
   onclose() {
     console.log('simple close')
   },

package/docs/hooks.vue

@@ -11,7 +11,7 @@ const [notice, contextHolder] = useNotification({ motion, closable: true })
     <button
       @click="() => {
         notice.open({
-          content: `${new Date().toISOString()}`,
+          description: `${new Date().toISOString()}`,
         })
       }"
     >
@@ -20,7 +20,7 @@ const [notice, contextHolder] = useNotification({ motion, closable: true })
     <button
       @click="() => {
         notice.open({
-          content: `${Array(Math.round(Math.random() * 5) + 1)
+          description: `${Array(Math.round(Math.random() * 5) + 1)
             .fill(1)
             .map(() => new Date().toISOString())
             .join('\n')}`,
@@ -34,7 +34,7 @@ const [notice, contextHolder] = useNotification({ motion, closable: true })
     <button
       @click="() => {
         notice.open({
-          content: `${Array(5)
+          description: `${Array(5)
             .fill(1)
             .map(() => new Date().toISOString())
             .join('\n')}`,
@@ -50,7 +50,7 @@ const [notice, contextHolder] = useNotification({ motion, closable: true })
     <button
       @click="() => {
         notice.open({
-          content: `No Close! ${new Date().toISOString()}`,
+          description: `No Close! ${new Date().toISOString()}`,
           duration: null,
           closable: false,
           key: 'No Close',

package/docs/index.less

@@ -5,16 +5,11 @@
   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,
@@ -34,37 +29,68 @@
     right: 0;
   }
 
-  // ========================= Notice =========================
-  &-notice {
+  // ===================== List Content =======================
+  &-list-content {
     position: relative;
     display: block;
+    width: 100%;
+    transition: height 0.3s;
+  }
+
+  // ========================= Notice =========================
+  &-notice {
+    pointer-events: auto;
+    position: absolute;
+    inset-inline: 0;
     box-sizing: border-box;
     line-height: 1.5;
-    width: 100%;
+    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;
+    }
 
-    &-wrapper {
-      pointer-events: auto;
-      position: relative;
+    // Description
+    &-description {
+      padding: 7px 30px 7px 10px;
+    }
+
+    // Section (title + description)
+    &-section {
       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;
     }
 
-    // Content
-    &-content {
-      padding: 7px 20px 7px 10px;
+    // Wrapper (icon + section)
+    &-wrapper {
+      display: flex;
+      gap: 8px;
+      padding: 7px 30px 7px 10px;
+    }
+
+    &-wrapper > &-section,
+    &-wrapper > &-title,
+    &-wrapper > &-description {
+      padding: 0;
+    }
+
+    &-icon {
+      flex: none;
     }
 
-    &-closable &-content {
-      padding-right: 20px;
+    // Actions
+    &-actions {
+      padding: 0 10px 7px;
     }
 
+    // Close
     &-close {
       position: absolute;
       top: 3px;
@@ -78,18 +104,12 @@
       outline: none;
       cursor: pointer;
       opacity: 0.2;
-      filter: alpha(opacity=20);
       border: 0;
-      background-color: #fff;
-
-      &-x:after {
-        content: '×';
-      }
+      background-color: transparent;
 
       &:hover {
         text-decoration: none;
         opacity: 1;
-        filter: alpha(opacity=100);
       }
     }
 
@@ -98,12 +118,13 @@
       position: absolute;
       left: 3px;
       right: 3px;
+      bottom: 0;
       border-radius: 1px;
       overflow: hidden;
       appearance: none;
       -webkit-appearance: none;
       display: block;
-      inline-size: 100%;
+      inline-size: calc(100% - 6px);
       block-size: 2px;
       border: 0;
 
@@ -142,123 +163,21 @@
     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}-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;
-        }
+    & > .@{notificationPrefixCls}-list-content > .@{notificationPrefixCls}-notice {
+      transition: transform 0.3s, opacity 0.3s;
 
-        &:nth-last-child(2) {
-          right: 18px;
-          width: 284px;
-          color: transparent;
-          overflow: hidden;
-        }
-
-        &:nth-last-child(3) {
-          right: 26px;
-          width: 268px;
-          color: transparent;
-          overflow: hidden;
-        }
+      &:not(.@{notificationPrefixCls}-notice-stack-in-threshold) {
+        opacity: 0;
+        pointer-events: none;
       }
     }
 
     &&-expanded {
-      & > .@{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;
+      & > .@{notificationPrefixCls}-list-content > .@{notificationPrefixCls}-notice {
+        opacity: 1;
+        pointer-events: auto;
       }
     }
   }

package/docs/maxCount.vue

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

package/docs/showProgress.vue

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

package/docs/stack.vue

@@ -7,7 +7,7 @@ const [{ open }, contextHolder] = useNotification({ motion, stack: true })
 
 function getConfig() {
   return {
-    content: `${Array.from({ length: Math.round(Math.random() * 5) + 1 })
+    description: `${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": "0.0.3",
+  "version": "2.0.0-beta.1",
   "publishConfig": {
     "access": "public"
   },
@@ -9,7 +9,7 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "default": "./dist/index.js"
     },
     "./dist/*": "./dist/*",
     "./package.json": "./package.json"
@@ -19,12 +19,13 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/util": "^1.0.8"
+    "@v-c/util": "^1.0.19"
   },
   "scripts": {
     "build": "vite build",
     "test": "vitest run",
     "prepublish": "pnpm build",
-    "bump": "bumpp --release patch"
+    "bump": "bumpp",
+    "patch": "bumpp --release patch"
   }
 }