@v-c/notification 0.0.2

package/dist/hooks/useNotification.js

@@ -0,0 +1,78 @@
+import Notifications_default from "../Notifications.js";
+import { createVNode, onMounted, shallowRef, watch } from "vue";
+var defaultGetContainer = () => document.body;
+var uniqueKey = 0;
+function mergeConfig(...objList) {
+	const clone = {};
+	objList.forEach((obj) => {
+		if (obj) Object.keys(obj).forEach((key) => {
+			const val = obj[key];
+			if (val !== void 0) clone[key] = val;
+		});
+	});
+	return clone;
+}
+function useNotification(rootConfig = {}) {
+	const { getContainer = defaultGetContainer, motion, prefixCls, maxCount, className, style, onAllRemoved, stack, renderNotifications,...shareConfig } = rootConfig;
+	const container = shallowRef();
+	const notificationRef = shallowRef();
+	const contextHolder = () => createVNode(Notifications_default, {
+		"container": container.value,
+		"ref": notificationRef,
+		"prefixCls": prefixCls,
+		"motion": motion,
+		"maxCount": maxCount,
+		"className": className,
+		"style": style,
+		"onAllRemoved": onAllRemoved,
+		"stack": stack,
+		"renderNotifications": renderNotifications
+	}, null);
+	const taskQueue = shallowRef([]);
+	const api = {
+		open(config) {
+			const mergedConfig = mergeConfig(shareConfig, config);
+			if (mergedConfig.key === null || mergedConfig.key === void 0) {
+				mergedConfig.key = `vc-notification-${uniqueKey}`;
+				uniqueKey += 1;
+			}
+			taskQueue.value = [...taskQueue.value, {
+				type: "open",
+				config: mergedConfig
+			}];
+		},
+		close(key) {
+			taskQueue.value = [...taskQueue.value, {
+				type: "close",
+				key
+			}];
+		},
+		destroy() {
+			taskQueue.value = [...taskQueue.value, { type: "destroy" }];
+		}
+	};
+	onMounted(() => {
+		container.value = getContainer();
+	});
+	watch(taskQueue, () => {
+		if (notificationRef.value && taskQueue.value.length) {
+			taskQueue.value.forEach((task) => {
+				switch (task.type) {
+					case "open":
+						notificationRef.value?.open(task.config);
+						break;
+					case "close":
+						notificationRef.value?.close(task.key);
+						break;
+					case "destroy":
+						notificationRef.value?.destroy();
+						break;
+					default: break;
+				}
+			});
+			taskQueue.value = taskQueue.value.filter((task) => !taskQueue.value.includes(task));
+		}
+	});
+	return [api, contextHolder];
+}
+export { useNotification as default };

package/dist/hooks/useStack.cjs

@@ -0,0 +1,24 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+var DEFAULT_OFFSET = 8;
+var DEFAULT_THRESHOLD = 3;
+var DEFAULT_GAP = 16;
+var useStack = (config) => {
+	const result = (0, vue.reactive)({
+		offset: DEFAULT_OFFSET,
+		threshold: DEFAULT_THRESHOLD,
+		gap: DEFAULT_GAP
+	});
+	(0, vue.watchEffect)(() => {
+		const _config = (0, vue.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 [(0, vue.computed)(() => !!(0, vue.unref)(config)), (0, vue.toRefs)(result)];
+};
+var useStack_default = useStack;
+exports.default = useStack_default;

package/dist/hooks/useStack.d.ts

@@ -0,0 +1,6 @@
+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>];
+declare const useStack: UseStack;
+export default useStack;

package/dist/hooks/useStack.js

@@ -0,0 +1,22 @@
+import { computed, reactive, toRefs, unref, watchEffect } from "vue";
+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)];
+};
+var useStack_default = useStack;
+export { useStack_default as default };

package/dist/index.cjs

@@ -0,0 +1,6 @@
+const require_Notice = require("./Notice.cjs");
+const require_NotificationProvider = require("./NotificationProvider.cjs");
+const require_useNotification = require("./hooks/useNotification.cjs");
+exports.Notice = require_Notice.default;
+exports.useNotification = require_useNotification.default;
+exports.useNotificationProvider = require_NotificationProvider.useNotificationProvider;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+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';

package/dist/index.js

@@ -0,0 +1,4 @@
+import Notice_default from "./Notice.js";
+import { useNotificationProvider } from "./NotificationProvider.js";
+import useNotification from "./hooks/useNotification.js";
+export { Notice_default as Notice, useNotification, useNotificationProvider };

package/dist/interface.d.ts

@@ -0,0 +1,55 @@
+import { VueNode } from '@v-c/util/dist/type';
+import { CSSProperties } from 'vue';
+export type Placement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
+type NoticeSemanticProps = 'wrapper';
+export type Key = string | number;
+export interface NoticeConfig {
+    content?: VueNode;
+    duration?: number | false | null;
+    showProgress?: boolean;
+    pauseOnHover?: boolean;
+    closeIcon?: VueNode;
+    closable?: boolean | ({
+        closeIcon?: VueNode;
+        onClose?: VoidFunction;
+    } & Record<string, any>);
+    className?: string;
+    style?: CSSProperties;
+    classNames?: {
+        [key in NoticeSemanticProps]?: string;
+    };
+    styles?: {
+        [key in NoticeSemanticProps]?: CSSProperties;
+    };
+    /** @private Internal usage. Do not override in your code */
+    props?: Record<string, any>;
+    onClose?: VoidFunction;
+    onClick?: (event: Event) => void;
+}
+export interface OpenConfig extends NoticeConfig {
+    key: Key;
+    placement?: Placement;
+    content?: VueNode;
+    duration?: number | false | null;
+}
+export type InnerOpenConfig = OpenConfig & {
+    times?: number;
+};
+export type Placements = Partial<Record<Placement, OpenConfig[]>>;
+export type StackConfig = boolean | {
+    /**
+     * When number is greater than threshold, notifications will be stacked together.
+     * @default 3
+     */
+    threshold?: number;
+    /**
+     * Offset when notifications are stacked together.
+     * @default 8
+     */
+    offset?: number;
+    /**
+     * Spacing between each notification when expanded.
+     */
+    gap?: number;
+};
+export {};

package/docs/context.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { h } from 'vue'
+import { useNotification } from '../src'
+import motion from './motion'
+
+const [{ open }, holder] = useNotification({ motion })
+const NOTICE = {
+  content: h('span', ['simple show']),
+  onclose() {
+    console.log('simple close')
+  },
+}
+function handleClick() {
+  open({
+    ...NOTICE,
+    props: {
+      'data-testid': 'my-data-testid',
+    },
+  })
+}
+</script>
+
+<template>
+  <div>
+    <button @click="handleClick">
+      simple show
+    </button>
+    <holder />
+  </div>
+</template>
+
+<style lang="less">
+@import "./index.less";
+</style>

package/docs/hooks.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { useNotification } from '../src'
+import motion from './motion'
+
+const [notice, contextHolder] = useNotification({ motion, closable: true })
+</script>
+
+<template>
+  <div>
+    <!-- Default     -->
+    <button
+      @click="() => {
+        notice.open({
+          content: `${new Date().toISOString()}`,
+        })
+      }"
+    >
+      Basic
+    </button>
+    <button
+      @click="() => {
+        notice.open({
+          content: `${Array(Math.round(Math.random() * 5) + 1)
+            .fill(1)
+            .map(() => new Date().toISOString())
+            .join('\n')}`,
+          duration: null,
+        })
+      }"
+    >
+      Not Auto Close
+    </button>
+
+    <button
+      @click="() => {
+        notice.open({
+          content: `${Array(5)
+            .fill(1)
+            .map(() => new Date().toISOString())
+            .join('\n')}`,
+          duration: null,
+        });
+      }"
+    >
+      Not Auto Close
+    </button>
+  </div>
+
+  <div>
+    <button
+      @click="() => {
+        notice.open({
+          content: `No Close! ${new Date().toISOString()}`,
+          duration: null,
+          closable: false,
+          key: 'No Close',
+          onClose: () => {
+            console.log('Close!!!');
+          },
+        });
+      }"
+    >
+      No Closable
+    </button>
+
+    <button
+      @click="() => {
+        notice.close('No Close');
+      }"
+    >
+      Force Close No Closable
+    </button>
+  </div>
+
+  <div>
+    <button
+      @click="() => {
+        notice.destroy();
+      }"
+    >
+      Destroy All
+    </button>
+  </div>
+  <contextHolder />
+</template>
+
+<style scoped>
+
+</style>

package/docs/index.less

@@ -0,0 +1,265 @@
+@notificationPrefixCls: vc-notification;
+
+.@{notificationPrefixCls} {
+  // ====================== Notification ======================
+  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;
+
+  // Position
+  &-top,
+  &-topLeft,
+  &-topRight {
+    top: 0;
+  }
+
+  &-bottom,
+  &-bottomRight,
+  &-bottomLeft {
+    bottom: 0;
+  }
+
+  &-bottomRight,
+  &-topRight {
+    right: 0;
+  }
+
+  // ========================= Notice =========================
+  &-notice {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    line-height: 1.5;
+    width: 100%;
+
+    &-wrapper {
+      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;
+    }
+
+    // Content
+    &-content {
+      padding: 7px 20px 7px 10px;
+    }
+
+    &-closable &-content {
+      padding-right: 20px;
+    }
+
+    &-close {
+      position: absolute;
+      top: 3px;
+      right: 5px;
+      color: #000;
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 1;
+      text-decoration: none;
+      text-shadow: 0 1px 0 #fff;
+      outline: none;
+      cursor: pointer;
+      opacity: 0.2;
+      filter: alpha(opacity=20);
+      border: 0;
+      background-color: #fff;
+
+      &-x:after {
+        content: '×';
+      }
+
+      &:hover {
+        text-decoration: none;
+        opacity: 1;
+        filter: alpha(opacity=100);
+      }
+    }
+
+    // Progress
+    &-progress {
+      position: absolute;
+      left: 3px;
+      right: 3px;
+      border-radius: 1px;
+      overflow: hidden;
+      appearance: none;
+      -webkit-appearance: none;
+      display: block;
+      inline-size: 100%;
+      block-size: 2px;
+      border: 0;
+
+      &,
+      &::-webkit-progress-bar {
+        background-color: rgba(0, 0, 0, 0.04);
+      }
+
+      &::-moz-progress-bar {
+        background-color: #31afff;
+      }
+
+      &::-webkit-progress-value {
+        background-color: #31afff;
+      }
+    }
+  }
+
+  &-fade {
+    overflow: hidden;
+    transition: all 0.3s;
+  }
+
+  &-fade-appear-prepare {
+    pointer-events: none;
+    opacity: 0 !important;
+  }
+
+  &-fade-appear-start {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+
+  &-fade-appear-active {
+    transform: translateX(0);
+    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;
+        }
+
+        &: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}-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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useNotification } from '../src'
+import motion from './motion.ts'
+import './index.less'
+
+const [notice, contextHolder] = useNotification({ maxCount: 3, motion })
+</script>
+
+<template>
+  <button
+    @click="() => {
+      notice.open({
+        content: `${new Date().toISOString()}`,
+      });
+    }"
+  >
+    Max Count
+  </button>
+  <contextHolder />
+</template>
+
+<style scoped>
+
+</style>

package/docs/motion.ts

@@ -0,0 +1,33 @@
+import type { TransitionGroupProps } from 'vue'
+
+const motion: TransitionGroupProps = {
+  appear: true,
+  name: 'vc-notification-fade',
+  // enterFromClass: 'vc-notification-fade-appear-start vc-notification-fade-appear-prepare',
+  // enterActiveClass: 'vc-notification-fade',
+  // enterToClass: 'vc-notification-fade-appear-active',
+  // leaveFromClass: 'vc-notification-fade-appear-active',
+  // leaveToClass: 'vc-notification-fade-appear-start vc-notification-fade-appear-prepare',
+  // leaveActiveClass: 'vc-notification-fade vc-notification-fade-appear-leave',
+  // moveClass: 'vc-notification-fade',
+  onBeforeLeave: (el) => {
+    const _el = el as HTMLDivElement
+    _el.style.height = `${_el.offsetHeight}px`
+  },
+  onLeave(el) {
+    setTimeout(() => {
+      const _el = el as HTMLDivElement
+      _el.style.height = '0px'
+      _el.style.opacity = '1'
+      _el.style.margin = '0px'
+    })
+  },
+  onAfterLeave(el) {
+    const _el = el as HTMLDivElement
+    _el.style.height = ''
+    _el.style.opacity = ''
+    _el.style.margin = ''
+  },
+}
+
+export default motion

package/docs/notification.stories.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Context from './context.vue'
+import Hooks from './hooks.vue'
+import MaxCount from './maxCount.vue'
+import ShowProgress from './showProgress.vue'
+import Stack from './stack.vue'
+</script>
+
+<template>
+  <Story title="Notification">
+    <Variant title="Context">
+      <Context />
+    </Variant>
+
+    <Variant title="Hooks">
+      <Hooks />
+    </Variant>
+
+    <Variant title="MaxCount">
+      <MaxCount />
+    </Variant>
+
+    <Variant title="ShowProgress">
+      <ShowProgress />
+    </Variant>
+
+    <Variant title="Stack">
+      <Stack />
+    </Variant>
+  </Story>
+</template>