@veltra/desktop 1.0.0

package/dist/components/multi-tree-select/style2.css

@@ -0,0 +1,146 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-multi-tree-select {
+  width: 100%;
+  box-shadow: inset 0 0 1px 1px var(--u-border-color);
+  transition: box-shadow 0.25s ease;
+  overflow: hidden;
+  cursor: pointer;
+  line-height: 1;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-multi-tree-select:hover {
+  box-shadow: inset 0 0 1px 1px var(--u-color-primary);
+}
+.u-multi-tree-select--small {
+  min-height: var(--u-form-component-height-small);
+  border-radius: var(--u-radius-small);
+  padding: calc((var(--u-form-component-height-small) - var(--u-tag-small)) / 2) calc(var(--u-gap-small) / 2);
+}
+.u-multi-tree-select--small .u-multi-tree-select__clear {
+  font-size: var(--u-font-size-main-small);
+}
+.u-multi-tree-select--small .u-multi-tree-select__tags {
+  gap: calc((var(--u-form-component-height-small) - var(--u-tag-small)) / 2);
+}
+.u-multi-tree-select--default {
+  min-height: var(--u-form-component-height-default);
+  border-radius: var(--u-radius-default);
+  padding: calc((var(--u-form-component-height-default) - var(--u-tag-default)) / 2) calc(var(--u-gap-default) / 2);
+}
+.u-multi-tree-select--default .u-multi-tree-select__clear {
+  font-size: var(--u-font-size-main-default);
+}
+.u-multi-tree-select--default .u-multi-tree-select__tags {
+  gap: calc((var(--u-form-component-height-default) - var(--u-tag-default)) / 2);
+}
+.u-multi-tree-select--large {
+  min-height: var(--u-form-component-height-large);
+  border-radius: var(--u-radius-large);
+  padding: calc((var(--u-form-component-height-large) - var(--u-tag-large)) / 2) calc(var(--u-gap-large) / 2);
+}
+.u-multi-tree-select--large .u-multi-tree-select__clear {
+  font-size: var(--u-font-size-main-large);
+}
+.u-multi-tree-select--large .u-multi-tree-select__tags {
+  gap: calc((var(--u-form-component-height-large) - var(--u-tag-large)) / 2);
+}
+.u-multi-tree-select.is-disabled {
+  cursor: not-allowed;
+  background-color: var(--u-color-disabled);
+  box-shadow: inset 0 0 1px 1px var(--u-border-color);
+}
+.u-multi-tree-select.is-disabled .u-multi-tree-select__arrow {
+  color: var(--u-text-color-disabled);
+}
+.u-multi-tree-select.is-disabled .u-tag {
+  border: var(--u-border);
+}
+.u-multi-tree-select__placeholder {
+  flex-shrink: 0;
+  flex-grow: 1;
+  user-select: none;
+  color: var(--u-text-color-placeholder);
+}
+.u-multi-tree-select__filter {
+  margin-bottom: 4px;
+}
+.u-multi-tree-select__tags {
+  flex-grow: 1;
+  overflow: hidden;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.u-multi-tree-select__readonly-tags {
+  padding-left: 0;
+  padding-right: 0;
+  overflow: hidden;
+}
+.u-multi-tree-select__readonly-tags .u-tag {
+  border: 1px dashed var(--u-text-color-main);
+}
+.u-multi-tree-select__arrow, .u-multi-tree-select__clear {
+  min-width: 20px;
+  color: var(--u-text-color-main);
+}
+.u-multi-tree-select__content-header {
+  border-bottom: var(--u-border);
+  border-radius: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-multi-tree-select__panel--small .u-multi-tree-select__content-filter {
+  padding: calc(var(--u-gap-small) / 2) var(--u-gap-small);
+}
+.u-multi-tree-select__panel--small .u-multi-tree-select__content-header {
+  padding: calc(var(--u-gap-small) / 2) var(--u-gap-small);
+  border-bottom: var(--u-border);
+}
+.u-multi-tree-select__panel--small .u-multi-tree-select__content-tree {
+  padding: calc(var(--u-gap-small) / 2) var(--u-gap-small);
+}
+.u-multi-tree-select__panel--default .u-multi-tree-select__content-filter {
+  padding: calc(var(--u-gap-default) / 2) var(--u-gap-default);
+}
+.u-multi-tree-select__panel--default .u-multi-tree-select__content-header {
+  padding: calc(var(--u-gap-default) / 2) var(--u-gap-default);
+  border-bottom: var(--u-border);
+}
+.u-multi-tree-select__panel--default .u-multi-tree-select__content-tree {
+  padding: calc(var(--u-gap-default) / 2) var(--u-gap-default);
+}
+.u-multi-tree-select__panel--large .u-multi-tree-select__content-filter {
+  padding: calc(var(--u-gap-large) / 2) var(--u-gap-large);
+}
+.u-multi-tree-select__panel--large .u-multi-tree-select__content-header {
+  padding: calc(var(--u-gap-large) / 2) var(--u-gap-large);
+  border-bottom: var(--u-border);
+}
+.u-multi-tree-select__panel--large .u-multi-tree-select__content-tree {
+  padding: calc(var(--u-gap-large) / 2) var(--u-gap-large);
+}
+.u-multi-tree-select__content-tree {
+  max-height: 272px;
+}

package/dist/components/node-render/index.d.ts

@@ -0,0 +1 @@
+import { NodeRender } from "./node-render.js";

package/dist/components/node-render/node-render.d.ts

@@ -0,0 +1,9 @@
+import { DefineComponent, VNode, VNodeArrayChildren } from "vue";
+
+//#region src/components/node-render/node-render.d.ts
+declare const NodeRender: DefineComponent<{
+  content: null | undefined | VNodeArrayChildren | VNode | string | number | boolean;
+}>;
+//#endregion
+export { NodeRender };
+//# sourceMappingURL=node-render.d.ts.map

package/dist/components/node-render/node-render.js

@@ -0,0 +1,21 @@
+import { defineComponent, isVNode, mergeProps } from "vue";
+//#region src/components/node-render/node-render.ts
+const NodeRender = defineComponent({
+	name: "NodeRender",
+	inheritAttrs: false,
+	props: ["content"],
+	render() {
+		const { content, $slots, $attrs, $props } = this;
+		if (content === void 0) return $slots.default?.();
+		if (Array.isArray(content)) return content;
+		if (isVNode(content)) {
+			content.props = $attrs ? mergeProps(content.props ?? {}, $attrs) : $props;
+			return content;
+		}
+		return content;
+	}
+});
+//#endregion
+export { NodeRender as default };
+
+//# sourceMappingURL=node-render.js.map

package/dist/components/node-render/node-render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"node-render.js","names":[],"sources":["../../../src/components/node-render/node-render.ts"],"sourcesContent":["import {\n  type DefineComponent,\n  type VNode,\n  type VNodeArrayChildren,\n  defineComponent,\n  isVNode,\n  mergeProps\n} from 'vue'\n\nconst NodeRender: DefineComponent<{\n  content: null | undefined | VNodeArrayChildren | VNode | string | number | boolean\n}> = defineComponent({\n  name: 'NodeRender',\n\n  inheritAttrs: false,\n\n  props: ['content'],\n\n  render() {\n    const { content, $slots, $attrs, $props } = this\n\n    if (content === undefined) {\n      return $slots.default?.()\n    }\n\n    if (Array.isArray(content)) {\n      return content\n    }\n\n    if (isVNode(content)) {\n      content.props = $attrs ? mergeProps(content.props ?? {}, $attrs) : $props\n      return content\n    }\n\n    return content\n  }\n})\n\nexport default NodeRender\n"],"mappings":";;AASA,MAAM,aAED,gBAAgB;CACnB,MAAM;CAEN,cAAc;CAEd,OAAO,CAAC,UAAU;CAElB,SAAS;EACP,MAAM,EAAE,SAAS,QAAQ,QAAQ,WAAW;AAE5C,MAAI,YAAY,KAAA,EACd,QAAO,OAAO,WAAW;AAG3B,MAAI,MAAM,QAAQ,QAAQ,CACxB,QAAO;AAGT,MAAI,QAAQ,QAAQ,EAAE;AACpB,WAAQ,QAAQ,SAAS,WAAW,QAAQ,SAAS,EAAE,EAAE,OAAO,GAAG;AACnE,UAAO;;AAGT,SAAO;;CAEV,CAAC"}

package/dist/components/node-render/style.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/components/node-render/style.js

@@ -0,0 +1 @@
+import "./style2.css";

package/dist/components/node-render/style2.css

@@ -0,0 +1,17 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */

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

@@ -0,0 +1,8 @@
+import { NotificationProps } from "../../types/notification.js";
+import { _default } from "./notification.vue.js";
+
+//#region src/components/notification/index.d.ts
+declare const Notification: (options: NotificationProps) => void;
+//#endregion
+export { Notification };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/notification/index.js

@@ -0,0 +1,140 @@
+import _sfc_main from "./notification.js";
+import { createVNode, reactive, render } from "vue";
+import { zIndex } from "@veltra/utils";
+//#region src/components/notification/index.ts
+const notificationQueue = reactive({
+	"bottom-right": [],
+	"bottom-left": [],
+	"top-right": [],
+	"top-left": []
+});
+const length = (key) => {
+	return notificationQueue[key].length;
+};
+let count = 1;
+const close = (id, position, userClose) => {
+	const index = notificationQueue[position].findIndex(({ vm }) => {
+		return id === vm.component.props.id;
+	});
+	if (index > -1) {
+		const { vm } = notificationQueue[position][index];
+		userClose?.(vm);
+		let offset = Number(notificationQueue[position][index].vm.component.props.offset);
+		notificationQueue[position].splice(index, 1);
+		let temp = 0;
+		for (let i = length(position); i > 0; i--) if (i < index + 1) {
+			temp = Number(notificationQueue[position][i - 1].vm.component.props.offset);
+			notificationQueue[position][i - 1].vm.component.props.offset = offset;
+			offset = temp;
+		}
+	}
+	if (!notificationQueue[position].length) {
+		const wrapper = document.getElementById(`notification-${position}-id`);
+		wrapper.style.removeProperty("height");
+		wrapper.style.removeProperty("overflow");
+	}
+};
+const createWrapper = (options) => {
+	const position = options.position || "bottom-right";
+	if (document.getElementById(`notification-${position}-id`)) return document.getElementById(`notification-${position}-id`);
+	else {
+		const offset = options.offset || 20;
+		const wrapper = document.createElement("div");
+		wrapper.id = `notification-${position}-id`;
+		Object.assign(wrapper.style, {
+			position: "fixed",
+			textAlign: "center"
+		}, {
+			"top-right": {
+				top: `${offset}px`,
+				right: `${offset}px`
+			},
+			"top-left": {
+				top: `${offset}px`,
+				left: `${offset}px`
+			},
+			"bottom-left": {
+				bottom: `${offset}px`,
+				left: `${offset}px`
+			},
+			"bottom-right": {
+				bottom: `${offset}px`,
+				right: `${offset}px`
+			}
+		}[position]);
+		wrapper.addEventListener("mouseenter", (e) => {
+			if (length(position)) {
+				let innerCount = 0;
+				let innerOffset = 0;
+				let width = 0;
+				let height = 0;
+				for (let i = length(position); i > 0; i--) {
+					notificationQueue[position][i - 1].vm.component.exposed.clearTimer();
+					if (i === length(position)) width = notificationQueue[position][i - 1].vm.el?.offsetWidth + 8;
+					notificationQueue[position][i - 1].vm.component.props.offset = innerOffset;
+					innerOffset += notificationQueue[position][i - 1].vm.el?.offsetHeight / 2 + 5;
+					if (innerCount < 3) height += notificationQueue[position][i - 1].vm.el?.offsetHeight + 10;
+					innerCount++;
+				}
+				Object.assign(e.target.style, {
+					width: `${width}px`,
+					height: `${height}px`,
+					overflow: "hidden",
+					transition: "height 0.4s"
+				});
+			}
+		});
+		wrapper.addEventListener("mouseleave", (e) => {
+			if (length(position)) {
+				let innerOffset = 0;
+				let innerCount = 0;
+				let height = 0;
+				for (let i = length(position); i > 0; i--) {
+					notificationQueue[position][i - 1].vm.component.exposed.startTimer();
+					if (i === length(position)) height = notificationQueue[position][i - 1].vm.el?.offsetHeight + 80;
+					notificationQueue[position][i - 1].vm.component.props.offset = innerOffset;
+					if (innerCount < 2) innerOffset += 10;
+					innerCount++;
+				}
+				e.target.style.transition = "height 0.45s";
+				e.target.style.height = `${height}px`;
+			} else {
+				e.target.style.removeProperty("height");
+				e.target.style.removeProperty("overflow");
+			}
+		});
+		document.body.appendChild(wrapper);
+		return wrapper;
+	}
+};
+const Notification = (options) => {
+	const position = options.position || "bottom-right";
+	const container = document.createElement("div");
+	const id = `notification_${count++}`;
+	if (length(position)) {
+		let innerOffset = 0;
+		let innerCount = 0;
+		for (let i = length(position); i > 0; i--) {
+			if (innerCount < 2) innerOffset += 10;
+			notificationQueue[position][i - 1].vm.component.props.offset = innerOffset;
+			innerCount++;
+		}
+	}
+	const vm = createVNode(_sfc_main, {
+		...options,
+		offset: 0,
+		id,
+		zIndex: zIndex(),
+		onClose: () => {
+			close(id, position, options.onClose);
+		}
+	});
+	vm.props.onDestroy = () => render(null, container);
+	render(vm, container);
+	notificationQueue[position].push({ vm });
+	createWrapper(options)?.appendChild(container.firstElementChild);
+};
+//#endregion
+export { Notification };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["UNotification"],"sources":["../../../src/components/notification/index.ts"],"sourcesContent":["export { default as UNotification } from './notification.vue'\nimport { zIndex } from '@veltra/utils'\nimport { createVNode, render, type VNode, reactive } from 'vue'\n\nimport type { NotificationProps } from '../../types'\nimport UNotification from './notification.vue'\n\ntype NotificationItem = { vm: VNode }\n\nconst notificationQueue = reactive({\n  'bottom-right': [] as NotificationItem[],\n  'bottom-left': [] as NotificationItem[],\n  'top-right': [] as NotificationItem[],\n  'top-left': [] as NotificationItem[]\n})\n\nconst length = (key: string) => {\n  return notificationQueue[key].length\n}\n\nlet count = 1\n\nconst close = (id: string, position: string, userClose?: (vm: VNode) => void) => {\n  const index = notificationQueue[position].findIndex(({ vm }) => {\n    return id === vm.component!.props.id\n  })\n  if (index > -1) {\n    const { vm } = notificationQueue[position][index]!\n    userClose?.(vm)\n    let offset = Number(notificationQueue[position][index]!.vm.component!.props.offset)\n    notificationQueue[position].splice(index, 1)\n    let temp = 0\n    for (let i = length(position); i > 0; i--) {\n      if (i < index + 1) {\n        temp = Number(notificationQueue[position][i - 1]!.vm.component!.props.offset)\n        notificationQueue[position][i - 1]!.vm.component!.props.offset = offset\n        offset = temp\n      }\n    }\n  }\n  if (!notificationQueue[position].length) {\n    const wrapper = document.getElementById(`notification-${position}-id`)!\n    wrapper.style.removeProperty('height')\n    wrapper.style.removeProperty('overflow')\n  }\n}\n\nconst createWrapper = (options: NotificationProps) => {\n  const position = options.position || 'bottom-right'\n  if (document.getElementById(`notification-${position}-id`)) {\n    return document.getElementById(`notification-${position}-id`)\n  } else {\n    const offset = options.offset || 20\n    const wrapper = document.createElement('div')\n    wrapper.id = `notification-${position}-id`\n    Object.assign(\n      wrapper.style,\n      { position: 'fixed', textAlign: 'center' },\n      {\n        'top-right': { top: `${offset}px`, right: `${offset}px` },\n        'top-left': { top: `${offset}px`, left: `${offset}px` },\n        'bottom-left': { bottom: `${offset}px`, left: `${offset}px` },\n        'bottom-right': { bottom: `${offset}px`, right: `${offset}px` }\n      }[position]\n    )\n    wrapper.addEventListener('mouseenter', (e: MouseEvent) => {\n      if (length(position)) {\n        let innerCount = 0\n        let innerOffset = 0\n        let width = 0\n        let height = 0\n        for (let i = length(position); i > 0; i--) {\n          notificationQueue[position][i - 1]!.vm.component!.exposed!.clearTimer()\n          if (i === length(position)) {\n            width = notificationQueue[position][i - 1]!.vm.el?.offsetWidth + 8\n          }\n          notificationQueue[position][i - 1]!.vm.component!.props.offset = innerOffset\n          innerOffset += notificationQueue[position][i - 1]!.vm.el?.offsetHeight / 2 + 5\n          if (innerCount < 3) height += notificationQueue[position][i - 1]!.vm.el?.offsetHeight + 10\n          innerCount++\n        }\n\n        Object.assign((e.target as HTMLElement).style, {\n          width: `${width}px`,\n          height: `${height}px`,\n          overflow: 'hidden',\n          transition: 'height 0.4s'\n        })\n      }\n    })\n    wrapper.addEventListener('mouseleave', (e: MouseEvent) => {\n      if (length(position)) {\n        let innerOffset = 0\n        let innerCount = 0\n        let height = 0\n        for (let i = length(position); i > 0; i--) {\n          notificationQueue[position][i - 1]!.vm.component!.exposed!.startTimer()\n          if (i === length(position))\n            height = notificationQueue[position][i - 1]!.vm.el?.offsetHeight + 80\n          notificationQueue[position][i - 1]!.vm.component!.props.offset = innerOffset\n          if (innerCount < 2) innerOffset += 10\n          innerCount++\n        }\n        ;(e.target as HTMLElement).style.transition = 'height 0.45s'\n        ;(e.target as HTMLElement).style.height = `${height}px`\n      } else {\n        ;(e.target as HTMLElement).style.removeProperty('height')\n        ;(e.target as HTMLElement).style.removeProperty('overflow')\n      }\n    })\n    document.body.appendChild(wrapper)\n    return wrapper\n  }\n}\n\nexport const Notification = (options: NotificationProps): void => {\n  const position = options.position || 'bottom-right'\n  const container = document.createElement('div')\n  const id = `notification_${count++}`\n\n  if (length(position)) {\n    let innerOffset = 0\n    let innerCount = 0\n    for (let i = length(position); i > 0; i--) {\n      if (innerCount < 2) innerOffset += 10\n      notificationQueue[position][i - 1]!.vm.component!.props.offset = innerOffset\n      innerCount++\n    }\n  }\n\n  const vm = createVNode(UNotification, {\n    ...options,\n    offset: 0,\n    id,\n    zIndex: zIndex(),\n    onClose: () => {\n      close(id, position, options.onClose)\n    }\n  })\n  vm.props!.onDestroy = () => render(null, container)\n  render(vm, container)\n  notificationQueue[position].push({ vm })\n  const wrapper = createWrapper(options)\n  wrapper?.appendChild(container.firstElementChild!)\n}\n"],"mappings":"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"}

package/dist/components/notification/notification.js

@@ -0,0 +1,133 @@
+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 { bem } from "@veltra/utils";
+import { useFallbackProps } from "@veltra/compositions";
+import { CircleCheckFilled, CircleClose, Close, InfoFilled, QuestionFilled, WarningFilled } from "@veltra/icons/normal";
+//#region src/components/notification/notification.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "Notification",
+	__name: "notification",
+	props: {
+		modelValue: {},
+		title: {},
+		message: {},
+		type: {},
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		duration: { default: 4500 },
+		offset: { default: 20 },
+		onClose: {},
+		onClick: {},
+		id: {},
+		icon: {},
+		zIndex: {},
+		buttonText: { default: "" },
+		width: {},
+		position: { default: "bottom-right" }
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const { type, size } = useFallbackProps([props], {
+			type: "primary",
+			size: "default"
+		});
+		const typeIcon = computed(() => {
+			return props.icon || {
+				primary: InfoFilled,
+				info: QuestionFilled,
+				success: CircleCheckFilled,
+				warning: WarningFilled,
+				danger: CircleClose
+			}[type.value];
+		});
+		const cls = bem("notification");
+		const visible = ref(false);
+		onMounted(() => {
+			visible.value = true;
+			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
+		});
+		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", {
+						key: 0,
+						class: normalizeClass(unref(cls).e("close")),
+						onClick: withModifiers(close, ["stop"])
+					}, [createVNode(unref(_sfc_main$1), null, {
+						default: withCtx(() => [createVNode(unref(Close))]),
+						_: 1
+					})], 2)) : createCommentVNode("v-if", true)
+				], 6), [[vShow, visible.value]])]),
+				_: 1
+			}, 8, ["name", "onBeforeLeave"]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=notification.js.map

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

@@ -0,0 +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({\n  name: 'Notification'\n})\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], {\n  type: 'primary' as ColorType,\n  size: 'default'\n})\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    : {\n        [`${props.position.split('-')[0]}`]: `${props.offset}px`,\n        zIndex: props.zIndex\n      }\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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"}

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

@@ -0,0 +1,16 @@
+import { NotificationProps, _NotificationExposed } from "../../types/notification.js";
+import * as _$vue from "vue";
+import * as _$_veltra_utils0 from "@veltra/utils";
+
+//#region src/components/notification/notification.vue.d.ts
+declare const __VLS_export: _$vue.DefineComponent<NotificationProps, _$_veltra_utils0.DeconstructValue<_NotificationExposed>, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<NotificationProps> & Readonly<{}>, {
+  duration: number;
+  closable: boolean;
+  offset: number;
+  buttonText: string;
+  position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default };
+//# sourceMappingURL=notification.vue.d.ts.map

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

@@ -0,0 +1 @@
+export { };

package/dist/components/notification/style.js

@@ -0,0 +1 @@
+import "./style2.css";