@aifuxi/semi-ui-vue 0.1.0-alpha.0

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

@@ -0,0 +1,7 @@
+import { NotificationStore } from './notification-store';
+type __VLS_Props = {
+    store: NotificationStore;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/notification/NotificationNodeRenderer.d.ts

@@ -0,0 +1,15 @@
+import { PropType, VNodeChild } from 'vue';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    content: {
+        type: PropType<VNodeChild>;
+        default: undefined;
+    };
+}>, () => VNodeChild, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    content: {
+        type: PropType<VNodeChild>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    content: VNodeChild;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,16 @@
+import { ConfigDirection } from '../config-provider';
+import { NotificationEntry } from './types';
+type __VLS_Props = {
+    animationClass?: string | undefined;
+    direction: ConfigDirection;
+    entry: NotificationEntry;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    animationEnd: (id: string) => any;
+    remove: (id: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onAnimationEnd?: (id: string) => any;
+    onRemove?: (id: string) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/notification/imperative.d.ts

@@ -0,0 +1,12 @@
+import { NotificationConfig, NotificationId, NotificationOptions } from './types';
+export declare const imperativeMethods: {
+    close(id: NotificationId): NotificationId;
+    error: (options: NotificationOptions) => string;
+    info: (options: NotificationOptions) => string;
+    open: (options: NotificationOptions) => string;
+    success: (options: NotificationOptions) => string;
+    warning: (options: NotificationOptions) => string;
+};
+export declare function config(options: NotificationConfig): void;
+export declare function destroyAll(): void;
+export declare function resetNotificationForTests(): void;

package/dist/notification/index.d.ts

@@ -0,0 +1,6 @@
+import { useNotification } from './use-notification';
+import { NotificationStaticMethods } from './types';
+export declare const Notification: NotificationStaticMethods;
+export default Notification;
+export { useNotification };
+export { NOTIFICATION_POSITIONS, NOTIFICATION_THEMES, NOTIFICATION_TYPES, type NotificationConfig, type NotificationId, type NotificationMethod, type NotificationMethods, type NotificationOptions, type NotificationPosition, type NotificationStaticMethods, type NotificationTheme, type NotificationType, type NotificationUseResult, } from './types';

package/dist/notification/index.js

@@ -0,0 +1,2 @@
+import { a as e, i as t, n, r, t as i } from "../notification-DIsvgiIO.js";
+export { r as NOTIFICATION_POSITIONS, t as NOTIFICATION_THEMES, e as NOTIFICATION_TYPES, i as Notification, i as default, n as useNotification };

package/dist/notification/notification-store.d.ts

@@ -0,0 +1,24 @@
+import { NotificationEntry, NotificationId, NotificationOptions } from './types';
+interface NotificationListState {
+    notices: NotificationEntry[];
+    removedItems: NotificationEntry[];
+    updatedItems: NotificationEntry[];
+}
+export declare class NotificationStore {
+    private readonly animated;
+    readonly state: import('vue').ShallowReactive<NotificationListState>;
+    private readonly cache;
+    private readonly removalTimers;
+    private readonly foundation;
+    constructor(animated: boolean);
+    add(entry: NotificationEntry): void;
+    has(id: NotificationId): boolean;
+    update(id: NotificationId, options: NotificationOptions): void;
+    remove(id: NotificationId): void;
+    finishEnter(id: NotificationId): void;
+    finishRemove(id: NotificationId): void;
+    destroyAll(): void;
+    destroy(): void;
+    private scheduleRemovalFallback;
+}
+export {};

package/dist/notification/types.d.ts

@@ -0,0 +1,63 @@
+import { Component, HTMLAttributes, StyleValue, VNodeChild } from 'vue';
+import { ConfigDirection } from '../config-provider';
+export declare const NOTIFICATION_POSITIONS: readonly ["top", "topLeft", "topRight", "bottom", "bottomLeft", "bottomRight"];
+export declare const NOTIFICATION_TYPES: readonly ["warning", "success", "info", "error", "default"];
+export declare const NOTIFICATION_THEMES: readonly ["normal", "light"];
+export type NotificationPosition = (typeof NOTIFICATION_POSITIONS)[number];
+export type NotificationType = (typeof NOTIFICATION_TYPES)[number];
+export type NotificationTheme = (typeof NOTIFICATION_THEMES)[number];
+export type NotificationId = string;
+export interface NotificationOptions {
+    className?: HTMLAttributes['class'];
+    content?: VNodeChild;
+    direction?: ConfigDirection;
+    duration?: number;
+    getPopupContainer?: () => HTMLElement;
+    icon?: VNodeChild;
+    id?: NotificationId;
+    onClick?: (event: MouseEvent) => void;
+    onClose?: () => void;
+    onCloseClick?: (id: NotificationId) => void;
+    position?: NotificationPosition;
+    showClose?: boolean;
+    style?: StyleValue;
+    theme?: NotificationTheme;
+    title?: VNodeChild;
+    type?: NotificationType;
+    zIndex?: number;
+}
+export interface NotificationConfig {
+    bottom?: number | string;
+    direction?: ConfigDirection;
+    duration?: number;
+    left?: number | string;
+    position?: NotificationPosition;
+    right?: number | string;
+    top?: number | string;
+    zIndex?: number;
+}
+export interface NotificationEntry extends NotificationOptions {
+    bottom?: number | string;
+    id: NotificationId;
+    left?: number | string;
+    phase: 'enter' | 'stable' | 'leave';
+    revision: number;
+    right?: number | string;
+    top?: number | string;
+    type: NotificationType;
+}
+export type NotificationMethod = (options: NotificationOptions) => NotificationId;
+export interface NotificationMethods {
+    close: (id: NotificationId) => NotificationId;
+    error: NotificationMethod;
+    info: NotificationMethod;
+    open: NotificationMethod;
+    success: NotificationMethod;
+    warning: NotificationMethod;
+}
+export type NotificationUseResult = readonly [NotificationMethods, Component];
+export interface NotificationStaticMethods extends NotificationMethods {
+    config: (config: NotificationConfig) => void;
+    destroyAll: () => void;
+    useNotification: () => NotificationUseResult;
+}

package/dist/notification/use-notification.d.ts

@@ -0,0 +1,2 @@
+import { NotificationUseResult } from './types';
+export declare function useNotification(): NotificationUseResult;

package/dist/notification-DIsvgiIO.js

@@ -0,0 +1,445 @@
+import "./src-DNBBthjO.js";
+import { h as e, t } from "./foundation-Cawx37mp.js";
+import { t as n } from "./config-context-CyynTtDb.js";
+import { n as r } from "./config-provider-VMfNNSF1.js";
+import { t as i } from "./Button-RCaDTqHh.js";
+import { Comment as a, Fragment as o, Text as s, computed as c, createApp as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, h as g, inject as _, markRaw as v, normalizeClass as y, normalizeStyle as b, onBeforeUnmount as x, onMounted as S, openBlock as C, renderList as w, resolveDynamicComponent as T, shallowReactive as E, unref as D, watch as ee, withCtx as O } from "vue";
+import { IconAlertCircle as k, IconAlertTriangle as A, IconClose as j, IconInfoCircle as M, IconTickCircle as N } from "@aifuxi/semi-icons-vue";
+//#region bundled-foundation
+var P = class n extends t {
+	constructor(e) {
+		super({
+			...n.defaultAdapter,
+			...e
+		}), this._timer = null, this._id = null;
+	}
+	init() {
+		this._startCloseTimer(), this._id = this.getProp("id");
+	}
+	destroy() {
+		this._clearCloseTimer();
+	}
+	_startCloseTimer() {
+		let t = this.getProp("duration");
+		t && (0, e.default)(t) && (this._timer = setTimeout(() => {
+			this.close();
+		}, t * 1e3));
+	}
+	close(e) {
+		e && e.stopPropagation(), this._adapter.notifyWrapperToRemove(this._id), this._adapter.notifyClose();
+	}
+	_clearCloseTimer() {
+		this._timer &&= (clearTimeout(this._timer), null);
+	}
+	restartCloseTimer() {
+		this._clearCloseTimer(), this._startCloseTimer();
+	}
+}, F = class extends t {
+	addNotice(e) {
+		let t = this._adapter.getNotices();
+		this._adapter.updateNotices([e, ...t]);
+	}
+	has(e) {
+		return this._adapter.getNotices().some((t) => t.id === e);
+	}
+	update(e, t) {
+		let n = this._adapter.getNotices();
+		n = n.map((n) => n.id === e ? {
+			...n,
+			...t
+		} : n);
+		let r = n.filter((t) => t.id === e);
+		this._adapter.updateNotices(n, [], r);
+	}
+	removeNotice(e) {
+		let t = this._adapter.getNotices(), n = [];
+		t = t.filter((t) => t.id !== e || (n.push(t), !1)), this._adapter.updateNotices(t, n);
+	}
+	destroyAll() {
+		let e = this._adapter.getNotices();
+		e.length > 0 && this._adapter.updateNotices([], e);
+	}
+}, I = h({
+	name: "NotificationNodeRenderer",
+	props: { content: {
+		type: [
+			String,
+			Number,
+			Boolean,
+			Array,
+			Object
+		],
+		default: void 0
+	} },
+	setup(e) {
+		return () => e.content;
+	}
+}), L = ["aria-labelledby"], te = { class: "semi-notification-notice-inner" }, ne = { class: "semi-notification-notice-content-wrapper" }, re = ["id"], ie = {
+	key: 1,
+	class: "semi-notification-notice-content",
+	"x-semi-prop": "content"
+}, R = /* @__PURE__ */ h({
+	name: "NotificationNotice",
+	__name: "NotificationNotice",
+	props: {
+		animationClass: {},
+		direction: {},
+		entry: {}
+	},
+	emits: ["animationEnd", "remove"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, o = E({ visible: !0 }), l = /* @__PURE__ */ new Map(), h = v(new P({
+			getContext: () => void 0,
+			getContexts: () => void 0,
+			getProp: (e) => n.entry[e],
+			getProps: () => n.entry,
+			getState: (e) => o[e],
+			getStates: () => o,
+			setState: (e, t) => {
+				Object.assign(o, e), t?.();
+			},
+			getCache: (e) => l.get(e),
+			getCaches: () => l,
+			setCache: (e, t) => l.set(String(e), t),
+			stopPropagation: (e) => e.stopPropagation?.(),
+			persistEvent: () => void 0,
+			notifyWrapperToRemove: (e) => r("remove", e),
+			notifyClose: () => n.entry.onClose?.()
+		})), g = {
+			error: k,
+			info: M,
+			success: N,
+			warning: A
+		}, _ = c(() => g[n.entry.type]), w = c(() => !!n.entry.icon), F = c(() => w.value || !!_.value), R = c(() => `semi-notification-title-${n.entry.id.replace(/[^a-zA-Z0-9_-]/g, "-")}`);
+		function z(e) {
+			if (Array.isArray(e)) return !0;
+			if (e == null || e === !1 || e === "" || e === 0) return !1;
+			if (typeof e != "object") return !!e;
+			let t = e;
+			return t.type === a ? !1 : t.type !== s || z(t.children);
+		}
+		let B = c(() => z(n.entry.title)), V = c(() => z(n.entry.content)), H = c(() => [
+			"semi-notification-notice",
+			F.value ? "semi-notification-notice-icon-show" : void 0,
+			`semi-notification-notice-${n.entry.type}`,
+			n.entry.theme === "light" ? "semi-notification-notice-light" : void 0,
+			n.direction === "rtl" ? "semi-notification-notice-rtl" : void 0,
+			n.entry.className,
+			n.animationClass
+		]);
+		function U(e) {
+			n.entry.onCloseClick?.(n.entry.id), h.close(e);
+		}
+		function W() {
+			r("animationEnd", n.entry.id);
+		}
+		return ee(() => n.entry.revision, (e, t) => {
+			e !== t && h.restartCloseTimer();
+		}), S(() => h.init()), x(() => h.destroy()), (e, t) => (C(), f("div", {
+			class: y(H.value),
+			style: b(n.entry.style),
+			"aria-labelledby": R.value,
+			role: "alert",
+			onAnimationend: W,
+			onClick: t[0] ||= (e) => n.entry.onClick?.(e),
+			onMouseenter: t[1] ||= (e) => D(h)._clearCloseTimer(),
+			onMouseleave: t[2] ||= (e) => D(h)._startCloseTimer()
+		}, [p("div", null, [F.value ? (C(), f("div", {
+			key: 0,
+			class: y(["semi-notification-notice-icon", `semi-notification-notice-${n.entry.type}`]),
+			"x-semi-prop": "icon"
+		}, [w.value ? (C(), u(D(I), {
+			key: 0,
+			content: n.entry.icon
+		}, null, 8, ["content"])) : (C(), u(T(_.value), {
+			key: 1,
+			size: "large"
+		}))], 2)) : d("", !0)]), p("div", te, [p("div", ne, [B.value ? (C(), f("div", {
+			key: 0,
+			id: R.value,
+			class: "semi-notification-notice-title",
+			"x-semi-prop": "title"
+		}, [m(D(I), { content: n.entry.title }, null, 8, ["content"])], 8, re)) : d("", !0), V.value ? (C(), f("div", ie, [m(D(I), { content: n.entry.content }, null, 8, ["content"])])) : d("", !0)]), n.entry.showClose === !1 ? d("", !0) : (C(), u(i, {
+			key: 0,
+			class: "semi-notification-notice-icon-close",
+			size: "small",
+			theme: "borderless",
+			type: "tertiary",
+			onClick: U
+		}, {
+			icon: O(() => [m(D(j))]),
+			_: 1
+		}))])], 46, L));
+	}
+}), z = 340, B = class {
+	animated;
+	state = E({
+		notices: [],
+		removedItems: [],
+		updatedItems: []
+	});
+	cache = /* @__PURE__ */ new Map();
+	removalTimers = /* @__PURE__ */ new Map();
+	foundation;
+	constructor(e) {
+		this.animated = e;
+		let t = {
+			getContext: () => void 0,
+			getContexts: () => void 0,
+			getProp: () => void 0,
+			getProps: () => ({}),
+			getState: (e) => this.state[e],
+			getStates: () => this.state,
+			setState: (e, t) => {
+				Object.assign(this.state, e), t?.();
+			},
+			getCache: (e) => this.cache.get(e),
+			getCaches: () => this.cache,
+			setCache: (e, t) => this.cache.set(String(e), t),
+			stopPropagation: (e) => e.stopPropagation?.(),
+			persistEvent: () => void 0,
+			getNotices: () => this.state.notices,
+			updateNotices: (e, t = [], n = []) => {
+				this.state.notices = e.map((e) => ({
+					...e,
+					phase: this.animated ? e.phase : "stable"
+				})), this.state.removedItems = t.map((e) => ({
+					...e,
+					phase: "leave"
+				})), this.state.updatedItems = n;
+				for (let e of this.state.removedItems) this.animated ? this.scheduleRemovalFallback(e.id) : this.finishRemove(e.id);
+			}
+		};
+		this.foundation = v(new F(t));
+	}
+	add(e) {
+		this.foundation.addNotice(e);
+	}
+	has(e) {
+		return this.foundation.has(e);
+	}
+	update(e, t) {
+		let n = this.state.notices.find((t) => t.id === e);
+		n && this.foundation.update(e, {
+			...t,
+			id: e,
+			phase: n.phase,
+			revision: n.revision + 1
+		});
+	}
+	remove(e) {
+		this.foundation.removeNotice(e);
+	}
+	finishEnter(e) {
+		this.state.notices = this.state.notices.map((t) => t.id === e ? {
+			...t,
+			phase: "stable"
+		} : t);
+	}
+	finishRemove(e) {
+		let t = this.removalTimers.get(e);
+		t && clearTimeout(t), this.removalTimers.delete(e), this.state.removedItems = this.state.removedItems.filter((t) => t.id !== e);
+	}
+	destroyAll() {
+		this.foundation.destroyAll();
+	}
+	destroy() {
+		for (let e of this.removalTimers.values()) clearTimeout(e);
+		this.removalTimers.clear(), this.state.notices = [], this.state.removedItems = [], this.state.updatedItems = [];
+	}
+	scheduleRemovalFallback(e) {
+		let t = this.removalTimers.get(e);
+		t && clearTimeout(t), this.removalTimers.set(e, setTimeout(() => this.finishRemove(e), z));
+	}
+}, V = [
+	"top",
+	"topLeft",
+	"topRight",
+	"bottom",
+	"bottomLeft",
+	"bottomRight"
+], H = [
+	"warning",
+	"success",
+	"info",
+	"error",
+	"default"
+], U = ["normal", "light"], W = ["placement"], G = /* @__PURE__ */ h({
+	name: "NotificationHost",
+	__name: "NotificationHost",
+	props: { store: {} },
+	setup(e) {
+		let t = e, r = _(n, void 0), i = c(() => {
+			let e = {
+				top: [],
+				topLeft: [],
+				topRight: [],
+				bottom: [],
+				bottomLeft: [],
+				bottomRight: []
+			}, n = [...t.store.state.notices, ...t.store.state.removedItems].filter((e, t, n) => n.findIndex((t) => t.id === e.id) === t);
+			for (let t of n) {
+				let n = t.direction ?? r?.value.direction ?? "ltr";
+				e[t.position ?? (n === "rtl" ? "topLeft" : "topRight")].push({
+					direction: n,
+					entry: t
+				});
+			}
+			return e;
+		});
+		function a(e) {
+			let t = e[0]?.entry;
+			if (!t) return {};
+			let n = {};
+			for (let e of [
+				"top",
+				"left",
+				"bottom",
+				"right"
+			]) {
+				let r = t[e];
+				r !== void 0 && (n[e] = typeof r == "number" ? `${r}px` : r);
+			}
+			return n;
+		}
+		function s(e, t) {
+			if (e.phase !== "stable") return `semi-notification-notice-animation-${e.phase === "leave" ? "hide" : "show"}_${t}`;
+		}
+		function l(e) {
+			e.phase === "leave" ? t.store.finishRemove(e.id) : t.store.finishEnter(e.id);
+		}
+		function p(e) {
+			t.store.remove(e);
+		}
+		return (e, t) => (C(!0), f(o, null, w(D(V), (e) => (C(), f(o, { key: e }, [i.value[e].length ? (C(), f("div", {
+			key: 0,
+			class: "semi-notification-list",
+			placement: e,
+			style: b(a(i.value[e]))
+		}, [(C(!0), f(o, null, w(i.value[e], (t) => (C(), u(R, {
+			key: t.entry.id,
+			"animation-class": s(t.entry, e),
+			direction: t.direction,
+			entry: t.entry,
+			onAnimationEnd: (e) => l(t.entry),
+			onRemove: p
+		}, null, 8, [
+			"animation-class",
+			"direction",
+			"entry",
+			"onAnimationEnd"
+		]))), 128))], 12, W)) : d("", !0)], 64))), 128));
+	}
+}), K = {
+	content: "",
+	duration: 3,
+	position: "topRight",
+	title: "",
+	zIndex: 1010
+}, q, J = 0, Y = 0;
+function ae(e = "notification") {
+	return J += 1, `${e}-${Date.now()}-${J}`;
+}
+function oe(e) {
+	if (q) return q;
+	if (typeof document > "u") throw Error("Notification imperative methods are only available in a browser.");
+	let t = document.createElement("div");
+	t.className = "semi-notification-wrapper", Y += 1, t.id = `semi-notification-wrapper-${Y}`, t.style.zIndex = String(typeof e.zIndex == "number" ? e.zIndex : K.zIndex), (e.getPopupContainer?.() ?? document.body).appendChild(t);
+	let n = v(new B(!0)), r = h({
+		name: "ImperativeNotificationRoot",
+		setup: () => () => g(G, { store: n })
+	}), i = l(r);
+	return i.mount(t), t.removeAttribute("data-v-app"), q = {
+		app: i,
+		host: t,
+		store: n
+	}, q;
+}
+function se(e, t) {
+	let n = r.config.overrideDefaultProps?.Notification ?? {}, i = {
+		...K,
+		...n,
+		...e,
+		type: t
+	};
+	return {
+		...i,
+		id: i.id ?? ae(),
+		phase: "enter",
+		revision: 0,
+		type: t
+	};
+}
+function X(e, t) {
+	let n = se(t, e), r = oe(n);
+	return r.store.has(n.id) ? r.store.update(n.id, n) : r.store.add(n), n.id;
+}
+var ce = {
+	close(e) {
+		return q?.store.remove(e), e;
+	},
+	error: (e) => X("error", e),
+	info: (e) => X("info", e),
+	open: (e) => X("default", e),
+	success: (e) => X("success", e),
+	warning: (e) => X("warning", e)
+};
+function Z(e) {
+	for (let t of [
+		"top",
+		"left",
+		"bottom",
+		"right"
+	]) if (t in e) {
+		let n = e[t];
+		n === void 0 ? delete K[t] : K[t] = n;
+	}
+	typeof e.zIndex == "number" && (K.zIndex = e.zIndex), typeof e.duration == "number" && (K.duration = e.duration), typeof e.position == "string" && (K.position = e.position);
+}
+function le() {
+	q &&= (q.store.destroyAll(), q.store.destroy(), q.app.unmount(), q.host.remove(), void 0);
+}
+//#endregion
+//#region src/notification/use-notification.ts
+var Q = 0;
+function ue() {
+	return Q += 1, `semi_notice_${Date.now()}-${Q}`;
+}
+function $() {
+	let e = v(new B(!1));
+	function t(t, n) {
+		let r = {
+			content: "",
+			duration: 3,
+			position: "topRight",
+			title: "",
+			zIndex: 1010,
+			...n,
+			id: ue(),
+			phase: "stable",
+			revision: 0,
+			type: t
+		};
+		return e.add(r), r.id;
+	}
+	return [{
+		close: (t) => (e.remove(t), t),
+		error: (e) => t("error", e),
+		info: (e) => t("info", e),
+		open: (e) => t("default", e),
+		success: (e) => t("success", e),
+		warning: (e) => t("warning", e)
+	}, v(h({
+		name: "NotificationContextHolder",
+		setup: () => (x(() => e.destroy()), () => g(G, { store: e }))
+	}))];
+}
+//#endregion
+//#region src/notification/index.ts
+var de = Object.assign({}, ce, {
+	config: Z,
+	destroyAll: le,
+	useNotification: $
+});
+//#endregion
+export { H as a, U as i, $ as n, V as r, de as t };