@veltra/desktop 1.3.2 → 1.3.3

package/dist/components/notification/notification-box.js

@@ -0,0 +1,130 @@
+import _sfc_main$1 from "./notification.js";
+import { Fragment, TransitionGroup, computed, createElementBlock, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, reactive, ref, renderList, unref, withCtx } from "vue";
+import { bem } from "@veltra/utils";
+//#region src/components/notification/notification-box.vue
+const _hoisted_1 = ["data-key"];
+const GAP = 10;
+/** 折叠态每层露出的高度 */
+const PEEK = 14;
+/** 折叠态最多露出的卡片数 */
+const MAX_VISIBLE = 3;
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "UNotificationBox",
+	__name: "notification-box",
+	props: {
+		notifications: {},
+		position: {}
+	},
+	emits: ["closed", "close"],
+	setup(__props, { emit: __emit }) {
+		/** 通知项数据结构 */
+		const props = __props;
+		const emit = __emit;
+		const cls = bem("notification");
+		/** 展开态卡片间距 */
+		const hovering = ref(false);
+		/** 各卡片实测高度, 驱动展开态位移与容器高度 */
+		const heights = reactive({});
+		const vertical = computed(() => props.position.startsWith("top") ? "top" : "bottom");
+		/** 底部锚定向上堆叠(负向偏移), 顶部锚定向下堆叠 */
+		const direction = computed(() => vertical.value === "bottom" ? -1 : 1);
+		const observer = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const el = entry.target;
+				const key = el.dataset.key;
+				if (key) heights[key] = el.offsetHeight;
+			}
+		});
+		function observeItem(el, key) {
+			if (el) observer.observe(el);
+		}
+		onBeforeUnmount(() => observer.disconnect());
+		/** 数组末尾为最新通知, 位于堆叠最前 */
+		function cardStyle(index) {
+			const items = props.notifications;
+			const stackIndex = items.length - 1 - index;
+			if (hovering.value) {
+				let offset = 0;
+				for (let i = index + 1; i < items.length; i++) offset += (heights[items[i].key] ?? 0) + GAP;
+				return {
+					transform: `translateY(${direction.value * offset}px) scale(1)`,
+					opacity: 1,
+					pointerEvents: "auto"
+				};
+			}
+			const clamped = Math.min(stackIndex, MAX_VISIBLE - 1);
+			return {
+				transform: `translateY(${direction.value * clamped * PEEK}px) scale(${1 - clamped * .05})`,
+				opacity: stackIndex >= MAX_VISIBLE ? 0 : 1,
+				pointerEvents: stackIndex === 0 ? "auto" : "none"
+			};
+		}
+		const stackStyle = computed(() => {
+			const items = props.notifications;
+			if (!items.length) return { height: "0px" };
+			if (hovering.value) return { height: `${items.reduce((sum, item) => sum + (heights[item.key] ?? 0), 0) + (items.length - 1) * GAP}px` };
+			return { height: `${(heights[items[items.length - 1].key] ?? 0) + Math.min(items.length - 1, MAX_VISIBLE - 1) * PEEK}px` };
+		});
+		function toCardProps(item) {
+			return {
+				title: item.title,
+				message: item.message,
+				type: item.type,
+				closable: item.closable,
+				duration: item.duration,
+				icon: item.icon,
+				buttonText: item.buttonText,
+				size: item.size
+			};
+		}
+		function handleAfterLeave(el) {
+			const key = el.dataset.key;
+			observer.unobserve(el);
+			delete heights[key];
+			emit("closed", key);
+		}
+		function handleClose(key, onClose) {
+			emit("close", key);
+			onClose?.();
+		}
+		function handleAction(key, onClick, onClose, e) {
+			onClick?.(e);
+			handleClose(key, onClose);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass([unref(cls).e("stack"), unref(cls).em("stack", __props.position)]),
+				style: normalizeStyle(stackStyle.value),
+				onMouseenter: _cache[0] || (_cache[0] = ($event) => hovering.value = true),
+				onMouseleave: _cache[1] || (_cache[1] = ($event) => hovering.value = false)
+			}, [createVNode(TransitionGroup, {
+				name: `notification-${vertical.value}`,
+				appear: "",
+				onAfterLeave: handleAfterLeave
+			}, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.notifications, (item, index) => {
+					return openBlock(), createElementBlock("div", {
+						key: item.key,
+						ref_for: true,
+						ref: (el) => observeItem(el, item.key),
+						"data-key": item.key,
+						class: normalizeClass(unref(cls).e("item"))
+					}, [createVNode(_sfc_main$1, mergeProps({ ref_for: true }, toCardProps(item), {
+						style: cardStyle(index),
+						onClose: ($event) => handleClose(item.key, item.onClose),
+						onAction: ($event) => handleAction(item.key, item.onClick, item.onClose, $event)
+					}), null, 16, [
+						"style",
+						"onClose",
+						"onAction"
+					])], 10, _hoisted_1);
+				}), 128))]),
+				_: 1
+			}, 8, ["name"])], 38);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=notification-box.js.map

package/dist/components/notification/notification-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-box.js","names":[],"sources":["../../../src/components/notification/notification-box.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[cls.e('stack'), cls.em('stack', position)]\"\n    :style=\"stackStyle\"\n    @mouseenter=\"hovering = true\"\n    @mouseleave=\"hovering = false\"\n  >\n    <transition-group :name=\"`notification-${vertical}`\" appear @after-leave=\"handleAfterLeave\">\n      <div\n        v-for=\"(item, index) of notifications\"\n        :key=\"item.key\"\n        :ref=\"(el) => observeItem(el, item.key)\"\n        :data-key=\"item.key\"\n        :class=\"cls.e('item')\"\n      >\n        <UNotification\n          v-bind=\"toCardProps(item)\"\n          :style=\"cardStyle(index)\"\n          @close=\"handleClose(item.key, item.onClose)\"\n          @action=\"handleAction(item.key, item.onClick, item.onClose, $event)\"\n        />\n      </div>\n    </transition-group>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { bem } from '@veltra/utils'\nimport { computed, onBeforeUnmount, reactive, ref, type CSSProperties } from 'vue'\n\nimport type { NotificationOptions, NotificationPosition, NotificationProps } from '../../types'\nimport UNotification from './notification.vue'\n\ndefineOptions({ name: 'UNotificationBox' })\n\n/** 通知项数据结构 */\ntype NotificationItem = NotificationOptions & { key: string }\n\nconst props = defineProps<{ notifications: NotificationItem[]; position: NotificationPosition }>()\n\nconst emit = defineEmits<{ (e: 'closed', key: string): void; (e: 'close', key: string): void }>()\n\nconst cls = bem('notification')\n\n/** 展开态卡片间距 */\nconst GAP = 10\n/** 折叠态每层露出的高度 */\nconst PEEK = 14\n/** 折叠态最多露出的卡片数 */\nconst MAX_VISIBLE = 3\n\nconst hovering = ref(false)\n\n/** 各卡片实测高度, 驱动展开态位移与容器高度 */\nconst heights = reactive<Record<string, number>>({})\n\nconst vertical = computed(() => (props.position.startsWith('top') ? 'top' : 'bottom'))\n\n/** 底部锚定向上堆叠(负向偏移), 顶部锚定向下堆叠 */\nconst direction = computed(() => (vertical.value === 'bottom' ? -1 : 1))\n\nconst observer = new ResizeObserver((entries) => {\n  for (const entry of entries) {\n    const el = entry.target as HTMLElement\n    const key = el.dataset.key\n    if (key) heights[key] = el.offsetHeight\n  }\n})\n\nfunction observeItem(el: Element | null, key: string) {\n  if (el) observer.observe(el)\n}\n\nonBeforeUnmount(() => observer.disconnect())\n\n/** 数组末尾为最新通知, 位于堆叠最前 */\nfunction cardStyle(index: number): CSSProperties {\n  const items = props.notifications\n  const stackIndex = items.length - 1 - index\n\n  if (hovering.value) {\n    // 展开态: 按前方卡片累计高度偏移\n    let offset = 0\n    for (let i = index + 1; i < items.length; i++) {\n      offset += (heights[items[i]!.key] ?? 0) + GAP\n    }\n    return {\n      transform: `translateY(${direction.value * offset}px) scale(1)`,\n      opacity: 1,\n      pointerEvents: 'auto'\n    }\n  }\n\n  const clamped = Math.min(stackIndex, MAX_VISIBLE - 1)\n  return {\n    transform: `translateY(${direction.value * clamped * PEEK}px) scale(${1 - clamped * 0.05})`,\n    opacity: stackIndex >= MAX_VISIBLE ? 0 : 1,\n    pointerEvents: stackIndex === 0 ? 'auto' : 'none'\n  }\n}\n\nconst stackStyle = computed<CSSProperties>(() => {\n  const items = props.notifications\n  if (!items.length) return { height: '0px' }\n\n  if (hovering.value) {\n    const total = items.reduce((sum, item) => sum + (heights[item.key] ?? 0), 0)\n    return { height: `${total + (items.length - 1) * GAP}px` }\n  }\n\n  const frontHeight = heights[items[items.length - 1]!.key] ?? 0\n  const behind = Math.min(items.length - 1, MAX_VISIBLE - 1)\n  return { height: `${frontHeight + behind * PEEK}px` }\n})\n\nfunction toCardProps(item: NotificationItem): NotificationProps {\n  return {\n    title: item.title,\n    message: item.message,\n    type: item.type,\n    closable: item.closable,\n    duration: item.duration,\n    icon: item.icon,\n    buttonText: item.buttonText,\n    size: item.size\n  }\n}\n\nfunction handleAfterLeave(el: Element) {\n  const key = (el as HTMLElement).dataset.key as string\n  observer.unobserve(el as HTMLElement)\n  delete heights[key]\n  emit('closed', key)\n}\n\nfunction handleClose(key: string, onClose?: () => void) {\n  emit('close', key)\n  onClose?.()\n}\n\nfunction handleAction(\n  key: string,\n  onClick: NotificationItem['onClick'],\n  onClose: NotificationItem['onClose'],\n  e: MouseEvent\n) {\n  onClick?.(e)\n  handleClose(key, onClose)\n}\n</script>\n"],"mappings":"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"}

package/dist/components/notification/notification.d.ts

@@ -0,0 +1,8 @@
+import { Notification } from "../../types/notification.js";
+import "../../types/index.js";
+//#region src/components/notification/notification.d.ts
+/** --- 导出 API --- */
+declare const notification: Notification;
+//#endregion
+export { notification };
+//# sourceMappingURL=notification.d.ts.map

package/dist/components/notification/notification.js

@@ -1,6 +1,6 @@
 import _sfc_main$1 from "../icon/icon.js";
 import _sfc_main$2 from "../button/button.js";
-import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, openBlock, ref, resolveDynamicComponent, toDisplayString, unref, vShow, withCtx, withDirectives, withModifiers } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, onBeforeUnmount, onMounted, openBlock, resolveDynamicComponent, toDisplayString, unref, withCtx, withModifiers } from "vue";
 import { useFallbackProps } from "@veltra/compositions";
 import { bem } from "@veltra/utils";
 import { CircleCheckFilled, CircleClose, Close, InfoFilled, QuestionFilled, WarningFilled } from "@veltra/icons/normal";
@@ -9,7 +9,6 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "UNotification",
 	__name: "notification",
 	props: {
-		modelValue: {},
 		title: {},
 		message: {},
 		type: {},
@@ -18,18 +17,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			default: false
 		},
 		duration: { default: 4500 },
-		offset: { default: 20 },
-		onClose: {},
-		onClick: {},
-		id: {},
 		icon: {},
-		zIndex: {},
 		buttonText: { default: "" },
-		width: {},
-		position: { default: "bottom-right" }
+		size: {}
 	},
-	setup(__props, { expose: __expose }) {
+	emits: ["close", "action"],
+	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const emit = __emit;
 		const { type, size } = useFallbackProps([props], {
 			type: "primary",
 			size: "default"
@@ -44,86 +39,69 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			}[type.value];
 		});
 		const cls = bem("notification");
-		const visible = ref(false);
+		/** 剩余时长制的自动关闭计时器, 悬停暂停 */
+		let startTime = 0;
+		let timer = 0;
+		let restDuration = 0;
+		function startTimer() {
+			if (!props.duration) return;
+			startTime = Date.now();
+			timer = setTimeout(() => emit("close"), restDuration);
+		}
+		function suspendTimer() {
+			if (!props.duration) return;
+			clearTimeout(timer);
+			restDuration -= Date.now() - startTime;
+		}
 		onMounted(() => {
-			visible.value = true;
+			restDuration = props.duration;
 			startTimer();
 		});
-		const close = () => {
-			visible.value = false;
-		};
-		const customStyle = computed(() => {
-			return props.offset > 0 ? {
-				[`${props.position.split("-")[0]}`]: `${props.offset}px`,
-				zIndex: props.zIndex,
-				transform: props.position.split("-")[0] === "bottom" ? `translateY(-${props.offset}px)` : `translateY(${props.offset}px)`,
-				transition: `opacity 0.3s, transform 0.4s, top 0.4s`
-			} : {
-				[`${props.position.split("-")[0]}`]: `${props.offset}px`,
-				zIndex: props.zIndex
-			};
-		});
-		let timer = 0;
-		const startTimer = () => {
-			if (props.duration) timer = setTimeout(() => {
-				close();
-			}, props.duration);
-		};
-		const clearTimer = () => clearTimeout(timer);
-		const handleClick = (e) => {
-			if (props.onClick) props.onClick(e);
-			close();
-		};
-		__expose({
-			startTimer,
-			clearTimer
-		});
+		onBeforeUnmount(() => clearTimeout(timer));
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Transition, {
-				name: `notification-fade-${__props.position.split("-")[0]}`,
-				onBeforeLeave: __props.onClose,
-				onAfterLeave: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("destroy")),
-				persisted: ""
-			}, {
-				default: withCtx(() => [withDirectives(createElementVNode("div", {
-					class: normalizeClass([
-						unref(cls).b,
-						unref(cls).m(unref(size)),
-						unref(cls).e(unref(type)),
-						unref(cls).e(__props.position)
-					]),
-					style: normalizeStyle(customStyle.value)
-				}, [
-					createElementVNode("div", { class: normalizeClass(unref(cls).e("icon")) }, [createVNode(unref(_sfc_main$1), null, {
-						default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(typeIcon.value)))]),
-						_: 1
-					})], 2),
-					createElementVNode("div", { class: normalizeClass(unref(cls).e("content")) }, [
-						createElementVNode("div", { class: normalizeClass(unref(cls).em("content", "title")) }, toDisplayString(__props.title), 3),
-						createElementVNode("div", { class: normalizeClass(unref(cls).em("content", "message")) }, toDisplayString(__props.message), 3),
-						__props.buttonText ? (openBlock(), createElementBlock("div", {
-							key: 0,
-							class: normalizeClass(unref(cls).em("content", "button"))
-						}, [createVNode(unref(_sfc_main$2), {
-							type: unref(type),
-							plain: "",
-							onClick: handleClick
-						}, {
-							default: withCtx(() => [createTextVNode(toDisplayString(__props.buttonText), 1)]),
-							_: 1
-						}, 8, ["type"])], 2)) : createCommentVNode("v-if", true)
-					], 2),
-					__props.closable ? (openBlock(), createElementBlock("div", {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass([
+					unref(cls).b,
+					unref(cls).m(unref(size)),
+					unref(cls).e(unref(type))
+				]),
+				onMouseenter: suspendTimer,
+				onMouseleave: startTimer
+			}, [
+				createElementVNode("div", { class: normalizeClass(unref(cls).e("icon")) }, [createVNode(unref(_sfc_main$1), null, {
+					default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(typeIcon.value)))]),
+					_: 1
+				})], 2),
+				createElementVNode("div", { class: normalizeClass(unref(cls).e("content")) }, [
+					__props.title ? (openBlock(), createElementBlock("div", {
 						key: 0,
-						class: normalizeClass(unref(cls).e("close")),
-						onClick: withModifiers(close, ["stop"])
-					}, [createVNode(unref(_sfc_main$1), null, {
-						default: withCtx(() => [createVNode(unref(Close))]),
+						class: normalizeClass(unref(cls).em("content", "title"))
+					}, toDisplayString(__props.title), 3)) : createCommentVNode("v-if", true),
+					__props.message ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: normalizeClass(unref(cls).em("content", "message"))
+					}, toDisplayString(__props.message), 3)) : createCommentVNode("v-if", true),
+					__props.buttonText ? (openBlock(), createElementBlock("div", {
+						key: 2,
+						class: normalizeClass(unref(cls).em("content", "button"))
+					}, [createVNode(unref(_sfc_main$2), {
+						type: unref(type),
+						plain: "",
+						onClick: _cache[0] || (_cache[0] = (e) => emit("action", e))
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.buttonText), 1)]),
 						_: 1
-					})], 2)) : createCommentVNode("v-if", true)
-				], 6), [[vShow, visible.value]])]),
-				_: 1
-			}, 8, ["name", "onBeforeLeave"]);
+					}, 8, ["type"])], 2)) : createCommentVNode("v-if", true)
+				], 2),
+				__props.closable || __props.duration === 0 ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(cls).e("close")),
+					onClick: _cache[1] || (_cache[1] = withModifiers(($event) => emit("close"), ["stop"]))
+				}, [createVNode(unref(_sfc_main$1), null, {
+					default: withCtx(() => [createVNode(unref(Close))]),
+					_: 1
+				})], 2)) : createCommentVNode("v-if", true)
+			], 34);
 		};
 	}
 });

package/dist/components/notification/notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification.js","names":["$emit"],"sources":["../../../src/components/notification/notification.vue"],"sourcesContent":["<template>\n  <transition\n    :name=\"`notification-fade-${position.split('-')[0]}`\"\n    @before-leave=\"onClose\"\n    @after-leave=\"$emit('destroy')\"\n  >\n    <div\n      :class=\"[cls.b, cls.m(size), cls.e(type), cls.e(position)]\"\n      v-show=\"visible\"\n      :style=\"customStyle\"\n    >\n      <div :class=\"cls.e('icon')\">\n        <UIcon>\n          <component :is=\"typeIcon\" />\n        </UIcon>\n      </div>\n      <div :class=\"cls.e('content')\">\n        <div :class=\"cls.em('content', 'title')\">{{ title }}</div>\n        <div :class=\"cls.em('content', 'message')\">{{ message }}</div>\n        <div :class=\"cls.em('content', 'button')\" v-if=\"buttonText\">\n          <UButton :type=\"type\" plain @click=\"handleClick\">{{ buttonText }}</UButton>\n        </div>\n      </div>\n      <div :class=\"cls.e('close')\" v-if=\"closable\" @click.stop=\"close\">\n        <UIcon><Close /></UIcon>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFallbackProps } from '@veltra/compositions'\nimport {\n  CircleCheckFilled,\n  CircleClose,\n  Close,\n  InfoFilled,\n  QuestionFilled,\n  WarningFilled\n} from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { ref, computed, onMounted, type CSSProperties } from 'vue'\n\nimport type { NotificationProps, NotificationExposed, ColorType } from '../../types'\nimport { UButton } from '../button'\nimport { UIcon } from '../icon'\n\ndefineOptions({ name: 'UNotification' })\n\nconst props = withDefaults(defineProps<NotificationProps>(), {\n  closable: false,\n  duration: 4500,\n  offset: 20,\n  buttonText: '',\n  position: 'bottom-right'\n})\n\nconst { type, size } = useFallbackProps([props], { type: 'primary' as ColorType, size: 'default' })\n\nconst typeIcon = computed(() => {\n  return (\n    props.icon ||\n    {\n      primary: InfoFilled,\n      info: QuestionFilled,\n      success: CircleCheckFilled,\n      warning: WarningFilled,\n      danger: CircleClose\n    }[type.value]\n  )\n})\n\nconst cls = bem('notification')\n\nconst visible = ref<boolean>(false)\n\nonMounted(() => {\n  visible.value = true\n  startTimer()\n})\n\nconst close = () => {\n  visible.value = false\n}\n\nconst customStyle = computed<CSSProperties>(() => {\n  return props.offset > 0\n    ? {\n        [`${props.position.split('-')[0]}`]: `${props.offset}px`,\n        zIndex: props.zIndex,\n        transform:\n          props.position.split('-')[0] === 'bottom'\n            ? `translateY(-${props.offset}px)`\n            : `translateY(${props.offset}px)`,\n        transition: `opacity 0.3s, transform 0.4s, top 0.4s`\n      }\n    : { [`${props.position.split('-')[0]}`]: `${props.offset}px`, zIndex: props.zIndex }\n})\n\nlet timer = 0\n\nconst startTimer = () => {\n  if (props.duration) {\n    timer = setTimeout(() => {\n      close()\n    }, props.duration)\n  }\n}\n\nconst clearTimer = () => clearTimeout(timer)\n\nconst handleClick = (e: MouseEvent) => {\n  if (props.onClick) props.onClick(e)\n  close()\n}\n\ndefineExpose<NotificationExposed>({ startTimer, clearTimer })\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"notification.js","names":[],"sources":["../../../src/components/notification/notification.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[cls.b, cls.m(size), cls.e(type)]\"\n    @mouseenter=\"suspendTimer\"\n    @mouseleave=\"startTimer\"\n  >\n    <div :class=\"cls.e('icon')\">\n      <UIcon>\n        <component :is=\"typeIcon\" />\n      </UIcon>\n    </div>\n    <div :class=\"cls.e('content')\">\n      <div :class=\"cls.em('content', 'title')\" v-if=\"title\">{{ title }}</div>\n      <div :class=\"cls.em('content', 'message')\" v-if=\"message\">{{ message }}</div>\n      <div :class=\"cls.em('content', 'button')\" v-if=\"buttonText\">\n        <UButton :type=\"type\" plain @click=\"(e) => emit('action', e)\">{{ buttonText }}</UButton>\n      </div>\n    </div>\n    <div :class=\"cls.e('close')\" v-if=\"closable || duration === 0\" @click.stop=\"emit('close')\">\n      <UIcon><Close /></UIcon>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFallbackProps } from '@veltra/compositions'\nimport {\n  CircleCheckFilled,\n  CircleClose,\n  Close,\n  InfoFilled,\n  QuestionFilled,\n  WarningFilled\n} from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, onBeforeUnmount, onMounted } from 'vue'\n\nimport type { NotificationEmits, NotificationProps, ColorType } from '../../types'\nimport { UButton } from '../button'\nimport { UIcon } from '../icon'\n\ndefineOptions({ name: 'UNotification' })\n\nconst props = withDefaults(defineProps<NotificationProps>(), {\n  closable: false,\n  duration: 4500,\n  buttonText: ''\n})\n\nconst emit = defineEmits<NotificationEmits>()\n\nconst { type, size } = useFallbackProps([props], { type: 'primary' as ColorType, size: 'default' })\n\nconst typeIcon = computed(() => {\n  return (\n    props.icon ||\n    {\n      primary: InfoFilled,\n      info: QuestionFilled,\n      success: CircleCheckFilled,\n      warning: WarningFilled,\n      danger: CircleClose\n    }[type.value]\n  )\n})\n\nconst cls = bem('notification')\n\n/** 剩余时长制的自动关闭计时器, 悬停暂停 */\nlet startTime = 0\nlet timer = 0\nlet restDuration = 0\n\nfunction startTimer() {\n  if (!props.duration) return\n  startTime = Date.now()\n  timer = setTimeout(() => emit('close'), restDuration)\n}\n\nfunction suspendTimer() {\n  if (!props.duration) return\n  clearTimeout(timer)\n  restDuration -= Date.now() - startTime\n}\n\nonMounted(() => {\n  restDuration = props.duration\n  startTimer()\n})\n\nonBeforeUnmount(() => clearTimeout(timer))\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EA2CA,MAAM,QAAQ;EAMd,MAAM,OAAO;EAEb,MAAM,EAAE,MAAM,SAAS,iBAAiB,CAAC,KAAK,GAAG;GAAE,MAAM;GAAwB,MAAM;EAAU,CAAC;EAElG,MAAM,WAAW,eAAe;GAC9B,OACE,MAAM,QACN;IACE,SAAS;IACT,MAAM;IACN,SAAS;IACT,SAAS;IACT,QAAQ;GACV,EAAE,KAAK;EAEX,CAAC;EAED,MAAM,MAAM,IAAI,cAAc;;EAG9B,IAAI,YAAY;EAChB,IAAI,QAAQ;EACZ,IAAI,eAAe;EAEnB,SAAS,aAAa;GACpB,IAAI,CAAC,MAAM,UAAU;GACrB,YAAY,KAAK,IAAI;GACrB,QAAQ,iBAAiB,KAAK,OAAO,GAAG,YAAY;EACtD;EAEA,SAAS,eAAe;GACtB,IAAI,CAAC,MAAM,UAAU;GACrB,aAAa,KAAK;GAClB,gBAAgB,KAAK,IAAI,IAAI;EAC/B;EAEA,gBAAgB;GACd,eAAe,MAAM;GACrB,WAAW;EACb,CAAC;EAED,sBAAsB,aAAa,KAAK,CAAC;;uBAzFvC,mBAoBM,OAAA;IAnBH,OAAK,eAAA;KAAG,MAAA,GAAA,CAAG,CAAC;KAAG,MAAA,GAAA,CAAG,CAAC,EAAE,MAAA,IAAA,CAAI;KAAG,MAAA,GAAA,CAAG,CAAC,EAAE,MAAA,IAAA,CAAI;IAAA,CAAA;IACtC,cAAY;IACZ,cAAY;;IAEb,mBAIM,OAAA,EAJA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,MAAA,CAAA,EAAA,GAAA,CAChB,YAEQ,MAAA,WAAA,GAAA,MAAA;4BADsB,EAAA,UAAA,GAA5B,YAA4B,wBAAZ,SAAA,KAAQ,CAAA,EAAA,CAAA;;;IAG5B,mBAMM,OAAA,EANA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,SAAA,CAAA,EAAA,GAAA;KAC+B,QAAA,SAAA,UAAA,GAA/C,mBAAuE,OAAA;;MAAjE,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,GAAE,WAAA,OAAA,CAAA;wBAAsC,QAAA,KAAK,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA;KACb,QAAA,WAAA,UAAA,GAAjD,mBAA6E,OAAA;;MAAvE,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,GAAE,WAAA,SAAA,CAAA;wBAA0C,QAAA,OAAO,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA;KACpB,QAAA,cAAA,UAAA,GAAhD,mBAEM,OAAA;;MAFA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,GAAE,WAAA,QAAA,CAAA;SACjB,YAAwF,MAAA,WAAA,GAAA;MAA9E,MAAM,MAAA,IAAA;MAAM,OAAA;MAAO,SAAK,OAAA,OAAA,OAAA,MAAG,MAAM,KAAI,UAAW,CAAC;;6BAAmB,CAAA,gBAAA,gBAAb,QAAA,UAAU,GAAA,CAAA,CAAA,CAAA;;;;IAG5C,QAAA,YAAY,QAAA,aAAQ,KAAA,UAAA,GAAvD,mBAEM,OAAA;;KAFA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA;KAA8C,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAO,KAAI,OAAA,GAAA,CAAA,MAAA,CAAA;QAC9E,YAAwB,MAAA,WAAA,GAAA,MAAA;4BAAR,CAAT,YAAS,MAAA,KAAA,CAAA,CAAA,CAAA"}

package/dist/components/notification/notification.vue.d.ts

@@ -1,13 +1,18 @@
-import { NotificationProps, _NotificationExposed } from "../../types/notification.js";
+import { NotificationProps } from "../../types/notification.js";
+import "../../types/index.js";
 //#region src/components/notification/notification.vue.d.ts
-declare const __VLS_export: import("vue").DefineComponent<NotificationProps, import("@veltra/utils").DeconstructValue<_NotificationExposed>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NotificationProps> & Readonly<{}>, {
+declare const __VLS_export: import("vue").DefineComponent<NotificationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+  close: () => any;
+  action: (evt: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<NotificationProps> & Readonly<{
+  onClose?: (() => any) | undefined;
+  onAction?: ((evt: MouseEvent) => any) | undefined;
+}>, {
   closable: boolean;
   duration: number;
-  offset: number;
   buttonText: string;
-  position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion
-export { _default };
+export { _default as default };
 //# sourceMappingURL=notification.vue.d.ts.map

package/dist/components/notification/notification2.js

@@ -0,0 +1,134 @@
+import _sfc_main from "./notification-box.js";
+import { h, render, shallowReactive } from "vue";
+import { bem, setStyles, zIndex } from "@veltra/utils";
+//#region src/components/notification/notification.ts
+const cls = bem("notification");
+/** --- 状态管理 --- */
+const stacks = {
+	"top-left": {
+		container: null,
+		items: shallowReactive([]),
+		activeCount: 0
+	},
+	"top-right": {
+		container: null,
+		items: shallowReactive([]),
+		activeCount: 0
+	},
+	"bottom-left": {
+		container: null,
+		items: shallowReactive([]),
+		activeCount: 0
+	},
+	"bottom-right": {
+		container: null,
+		items: shallowReactive([]),
+		activeCount: 0
+	}
+};
+/** 通知关闭后回调 */
+const closedCallbacks = /* @__PURE__ */ new Map();
+let uid = 0;
+/** --- 内部辅助函数 --- */
+/** 彻底销毁容器 */
+const destroy = (stack) => {
+	if (stack.container) {
+		render(null, stack.container);
+		document.body.removeChild(stack.container);
+		stack.container = null;
+	}
+};
+/** 离开动画结束后的清理 */
+const handleClosed = (stack, key) => {
+	stack.activeCount--;
+	const cb = closedCallbacks.get(key);
+	if (cb) {
+		cb();
+		closedCallbacks.delete(key);
+	}
+	if (stack.activeCount === 0) destroy(stack);
+};
+/** 触发关闭 (仅从数组移除，触发 Transition 离开动画) */
+const handleClose = (stack, key) => {
+	const index = stack.items.findIndex((n) => n.key === key);
+	if (index !== -1) stack.items.splice(index, 1);
+};
+/** 挂载并渲染容器 */
+const updateView = (position, options) => {
+	const stack = stacks[position];
+	if (!stack.container) {
+		stack.container = document.createElement("div");
+		stack.container.className = cls.e("container");
+		document.body.appendChild(stack.container);
+	}
+	const offset = options.offset ?? 20;
+	const [vertical, horizontal] = position.split("-");
+	setStyles(stack.container, {
+		position: "fixed",
+		zIndex: options.zIndex ?? zIndex(),
+		[vertical]: `${offset}px`,
+		[horizontal]: `${offset}px`
+	});
+	const vnode = h(_sfc_main, {
+		notifications: stack.items,
+		position,
+		onClosed: (key) => handleClosed(stack, key),
+		onClose: (key) => handleClose(stack, key)
+	});
+	vnode.appContext = notification._context;
+	render(vnode, stack.container);
+};
+/** 创建通知实例 */
+const createNotification = (options) => {
+	const { onClosed: userOnClosed, position = "bottom-right", ...notificationOptions } = options;
+	const stack = stacks[position];
+	const id = `notification_${uid++}`;
+	stack.activeCount++;
+	let resolveClosed;
+	const onClosed = new Promise((r) => resolveClosed = r);
+	closedCallbacks.set(id, () => {
+		userOnClosed?.();
+		resolveClosed();
+	});
+	stack.items.push({
+		...notificationOptions,
+		position,
+		key: id
+	});
+	updateView(position, options);
+	return {
+		id,
+		close: () => handleClose(stack, id),
+		onClosed
+	};
+};
+/** --- 导出 API --- */
+const notification = ((options) => {
+	return createNotification(typeof options === "string" ? { message: options } : options);
+});
+notification._context = null;
+[
+	"primary",
+	"success",
+	"info",
+	"warning",
+	"danger"
+].forEach((type) => {
+	notification[type] = (msg, config) => notification({
+		...config,
+		message: msg,
+		type
+	});
+});
+/** 关闭所有通知，可指定方位 */
+notification.closeAll = (position) => {
+	if (position) {
+		stacks[position].items.splice(0);
+		return;
+	}
+	Object.keys(stacks).forEach((p) => stacks[p].items.splice(0));
+};
+//#endregion
+export { notification };
+
+//# sourceMappingURL=notification2.js.map

package/dist/components/notification/notification2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification2.js","names":["UNotificationBox"],"sources":["../../../src/components/notification/notification.ts"],"sourcesContent":["import { bem, setStyles, zIndex } from '@veltra/utils'\nimport { h, render, shallowReactive } from 'vue'\n\nimport type {\n  Notification,\n  NotificationInstance,\n  NotificationOptions,\n  NotificationPosition\n} from '../../types'\nimport UNotificationBox from './notification-box.vue'\n\nconst cls = bem('notification')\n\n/** 通知项数据结构 */\ntype NotificationItem = NotificationOptions & { key: string }\n\n/** 单个方位的堆叠状态 */\ninterface NotificationStack {\n  container: HTMLElement | null\n  items: NotificationItem[]\n  /** 正在显示的通知数 (包含动画执行中) */\n  activeCount: number\n}\n\n/** --- 状态管理 --- */\nconst stacks: Record<NotificationPosition, NotificationStack> = {\n  'top-left': { container: null, items: shallowReactive([]), activeCount: 0 },\n  'top-right': { container: null, items: shallowReactive([]), activeCount: 0 },\n  'bottom-left': { container: null, items: shallowReactive([]), activeCount: 0 },\n  'bottom-right': { container: null, items: shallowReactive([]), activeCount: 0 }\n}\n\n/** 通知关闭后回调 */\nconst closedCallbacks = new Map<string, () => void>()\n\nlet uid = 0\n\n/** --- 内部辅助函数 --- */\n\n/** 彻底销毁容器 */\nconst destroy = (stack: NotificationStack) => {\n  if (stack.container) {\n    render(null, stack.container)\n    document.body.removeChild(stack.container)\n    stack.container = null\n  }\n}\n\n/** 离开动画结束后的清理 */\nconst handleClosed = (stack: NotificationStack, key: string) => {\n  stack.activeCount--\n\n  const cb = closedCallbacks.get(key)\n  if (cb) {\n    cb()\n    closedCallbacks.delete(key)\n  }\n\n  // 没有活跃通知时销毁容器，保持页面干净\n  if (stack.activeCount === 0) destroy(stack)\n}\n\n/** 触发关闭 (仅从数组移除，触发 Transition 离开动画) */\nconst handleClose = (stack: NotificationStack, key: string) => {\n  const index = stack.items.findIndex((n) => n.key === key)\n  if (index !== -1) stack.items.splice(index, 1)\n}\n\n/** 挂载并渲染容器 */\nconst updateView = (position: NotificationPosition, options: NotificationOptions) => {\n  const stack = stacks[position]\n\n  if (!stack.container) {\n    stack.container = document.createElement('div')\n    stack.container.className = cls.e('container')\n    document.body.appendChild(stack.container)\n  }\n\n  const offset = options.offset ?? 20\n  const [vertical, horizontal] = position.split('-') as ['top' | 'bottom', 'left' | 'right']\n  setStyles(stack.container, {\n    position: 'fixed',\n    zIndex: options.zIndex ?? zIndex(),\n    [vertical]: `${offset}px`,\n    [horizontal]: `${offset}px`\n  })\n\n  const vnode = h(UNotificationBox, {\n    notifications: stack.items,\n    position,\n    onClosed: (key: string) => handleClosed(stack, key),\n    onClose: (key: string) => handleClose(stack, key)\n  })\n\n  vnode.appContext = notification._context\n  render(vnode, stack.container)\n}\n\n/** 创建通知实例 */\nconst createNotification = (options: NotificationOptions): NotificationInstance => {\n  const { onClosed: userOnClosed, position = 'bottom-right', ...notificationOptions } = options\n  const stack = stacks[position]\n  const id = `notification_${uid++}`\n  stack.activeCount++\n\n  // 生命周期 Promise\n  let resolveClosed: () => void\n  const onClosed = new Promise<void>((r) => (resolveClosed = r))\n\n  closedCallbacks.set(id, () => {\n    userOnClosed?.()\n    resolveClosed()\n  })\n\n  stack.items.push({ ...notificationOptions, position, key: id })\n  updateView(position, options)\n\n  return { id, close: () => handleClose(stack, id), onClosed }\n}\n\n/** --- 导出 API --- */\n\nexport const notification = ((options) => {\n  return createNotification(typeof options === 'string' ? { message: options } : options)\n}) as Notification\n\nnotification._context = null\n\n// 挂载快捷方法: notification.success(...)\nconst notificationTypes = ['primary', 'success', 'info', 'warning', 'danger'] as const\nnotificationTypes.forEach((type) => {\n  notification[type] = (msg, config) => notification({ ...config, message: msg, type })\n})\n\n/** 关闭所有通知，可指定方位 */\nnotification.closeAll = (position?: NotificationPosition) => {\n  if (position) {\n    stacks[position].items.splice(0)\n    return\n  }\n  ;(Object.keys(stacks) as NotificationPosition[]).forEach((p) => stacks[p].items.splice(0))\n}\n"],"mappings":"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"}