@moubing/bing-ui 0.11.2 → 0.12.0

package/dist/components/BingToast/BingToast.service.js

@@ -0,0 +1,132 @@
+import { normalizeBingToastPosition as e } from "./BingToast.types.js";
+import { ref as t } from "vue";
+//#region src/components/BingToast/BingToast.service.ts
+var n = "top-right", r = 120, i = {
+	default: 3200,
+	success: 2600,
+	error: 4200,
+	loading: 0,
+	warning: 3600,
+	info: 3200
+}, a = 0, o = 0, s = 0, c = !1, l = t([]), u = t(), d = [], f = /* @__PURE__ */ new Set(), p = /* @__PURE__ */ new Map();
+function m() {
+	return typeof window < "u";
+}
+function h(t) {
+	return e(t, n);
+}
+function g(e, t) {
+	return typeof e == "number" && Number.isFinite(e) ? Math.max(0, e) : i[t];
+}
+function _(e, t) {
+	return typeof e == "string" ? {
+		message: e,
+		type: t
+	} : {
+		...e,
+		type: t ?? e.type
+	};
+}
+function v(e) {
+	let t = p.get(e);
+	t?.timer !== void 0 && m() && window.clearTimeout(t.timer), p.delete(e), f.delete(e);
+}
+function y(e, t) {
+	let n = Math.max(0, t), r = {
+		dueAt: Date.now() + n,
+		remaining: n,
+		paused: !1,
+		timer: window.setTimeout(() => {
+			T(e);
+		}, n)
+	};
+	p.set(e, r);
+}
+function b(e, t = !1) {
+	if (e.duration <= 0) return;
+	let n = p.get(e.id);
+	f.add(e.id), n?.timer !== void 0 && m() && window.clearTimeout(n.timer), p.set(e.id, {
+		dueAt: Date.now() + e.duration,
+		remaining: t || !n ? e.duration : Math.max(0, n.dueAt - Date.now()),
+		paused: !0
+	});
+}
+function x(e, t = 0) {
+	let n = p.get(e.id);
+	f.delete(e.id), n?.timer !== void 0 && m() && window.clearTimeout(n.timer), p.delete(e.id), !(!m() || e.duration <= 0) && y(e.id, e.duration + t);
+}
+function S(e) {
+	let t = l.value.filter((t) => t.position === e.position).sort((e, t) => e.order - t.order).findIndex((t) => t.id === e.id);
+	return Math.max(0, t) * r;
+}
+function C() {
+	l.value.forEach((e) => {
+		if (c) {
+			b(e, !0);
+			return;
+		}
+		x(e, S(e));
+	});
+}
+function w(e, t) {
+	let n = _(e, t), r = n.type ?? "default", i = String(n.id ?? `bing-toast-${++a}`), s = l.value.find((e) => e.id === i), c = typeof n.message == "string" ? n.message : void 0, u = !!(c && c.length > 0), d = c && c.length > 0 ? c : n.title ?? "", f = {
+		id: i,
+		type: r,
+		title: u ? n.title : void 0,
+		message: d,
+		duration: g(n.duration, r),
+		closable: n.closable ?? !0,
+		position: h(n.position),
+		createdAt: s?.createdAt ?? Date.now(),
+		order: s?.order ?? ++o,
+		ariaLabel: n.ariaLabel,
+		closeAriaLabel: n.closeAriaLabel ?? "关闭消息"
+	};
+	return s ? l.value = l.value.map((e) => e.id === i ? f : e) : l.value = [...l.value, f], C(), i;
+}
+function T(e) {
+	let t = String(e);
+	v(t), l.value = l.value.filter((e) => e.id !== t);
+}
+function E(e) {
+	let t = e ? h(e) : void 0;
+	(e ? l.value.filter((e) => e.position === t) : l.value).forEach((e) => {
+		v(e.id);
+	}), l.value = e ? l.value.filter((e) => e.position !== t) : [];
+}
+function D() {
+	c = !0, l.value.forEach((e) => {
+		b(e, !0);
+	});
+}
+function O() {
+	c = !1, C();
+}
+function k() {
+	return s += 1, `bing-toast-viewport-${s}`;
+}
+function A(e) {
+	d.includes(e) || d.push(e), u.value ??= e;
+}
+function j(e) {
+	let t = d.indexOf(e);
+	t >= 0 && d.splice(t, 1), u.value === e && (u.value = d[0]);
+}
+var M = {
+	show: (e) => w(e),
+	success: (e) => w(e, "success"),
+	error: (e) => w(e, "error"),
+	fail: (e) => w(e, "error"),
+	failed: (e) => w(e, "error"),
+	loading: (e) => w(e, "loading"),
+	warning: (e) => w(e, "warning"),
+	info: (e) => w(e, "info"),
+	close: T,
+	clear: E,
+	getToasts: () => [...l.value]
+};
+function N() {
+	return M;
+}
+//#endregion
+export { u as activeBingToastViewportId, M as bingToast, l as bingToastItems, k as createBingToastViewportId, D as pauseAllBingToastTimers, A as registerBingToastViewport, O as restartAllBingToastTimers, j as unregisterBingToastViewport, N as useBingToast };

package/dist/components/BingToast/BingToast.types.d.ts

@@ -56,4 +56,4 @@ export interface BingToastService {
     clear: (position?: BingToastPosition) => void;
     getToasts: () => BingToastItem[];
 }
-export declare function normalizeBingToastPosition(position: BingToastPosition | undefined, fallback?: BingToastRenderPosition): "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+export declare function normalizeBingToastPosition(position: BingToastPosition | undefined, fallback?: BingToastRenderPosition): "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";

package/dist/components/BingToast/BingToast.types.js

@@ -0,0 +1,19 @@
+//#region src/components/BingToast/BingToast.types.ts
+var e = [
+	"top",
+	"bottom",
+	"left",
+	"right",
+	"top-left",
+	"top-right",
+	"bottom-left",
+	"bottom-right"
+], t = ["top-center", "bottom-center"], n = [...e, ...t], r = new Set(e), i = {
+	"top-center": "top",
+	"bottom-center": "bottom"
+};
+function a(e, t = "top-right") {
+	return e ? r.has(e) ? e : i[e] ?? t : t;
+}
+//#endregion
+export { e as BING_TOAST_POSITIONS, t as BING_TOAST_POSITION_ALIASES, n as BING_TOAST_POSITION_OPTIONS, a as normalizeBingToastPosition };

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

@@ -6,7 +6,6 @@ declare const __VLS_export: import('vue').DefineComponent<BingToastProps, {}, {}
 }>, {
     gap: string | number;
     width: string | number;
-    zIndex: number;
     max: number;
     offset: string | number;
     smoothScroll: import('../..').SmoothScrollValue;

package/dist/components/BingToast/BingToast.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,307 @@
+import { useConfigZIndex as e } from "../../utils/config.js";
+import { useReducedMotion as t } from "../../motion/reducedMotion.js";
+import n from "../BingButton/BingButton.js";
+import { AlertTriangle as r, CheckCircle2 as i, Info as a, LoaderCircle as ee, Sparkles as te, X as ne, XCircle as re } from "../../icons/icons.js";
+import o from "../BingIcon/BingIcon.js";
+import { compactSmoothScrollOptions as ie, resolveComponentSmoothScroll as ae } from "../../motion/smoothScroll.js";
+import oe from "../BingScrollbar/BingScrollbar.js";
+import { useClientReady as se } from "../../utils/useClientReady.js";
+import { BING_TOAST_POSITIONS as ce, normalizeBingToastPosition as s } from "./BingToast.types.js";
+import { activeBingToastViewportId as le, bingToast as ue, bingToastItems as c, createBingToastViewportId as de, pauseAllBingToastTimers as fe, registerBingToastViewport as pe, restartAllBingToastTimers as l, unregisterBingToastViewport as me } from "./BingToast.service.js";
+import { Fragment as u, Teleport as he, TransitionGroup as ge, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, nextTick as v, normalizeClass as y, normalizeStyle as b, onBeforeUnmount as _e, onBeforeUpdate as ve, onMounted as ye, onUpdated as be, openBlock as x, ref as xe, renderList as S, toDisplayString as C, unref as w, watch as Se, withCtx as T } from "vue";
+import { gsap as E } from "gsap";
+//#region src/components/BingToast/BingToast.vue?vue&type=script&setup=true&lang.ts
+var Ce = [
+	"data-position",
+	"data-depth",
+	"role",
+	"aria-live",
+	"aria-label"
+], D = { class: "bing-toast__card" }, O = {
+	class: "bing-toast__icon",
+	"aria-hidden": "true"
+}, k = { class: "bing-toast__content" }, A = {
+	key: 0,
+	class: "bing-toast__title"
+}, we = { class: "bing-toast__message" }, j = /* @__PURE__ */ _({
+	__name: "BingToast",
+	props: {
+		viewportPosition: { default: "all" },
+		zIndex: {},
+		offset: { default: 18 },
+		gap: { default: 10 },
+		width: { default: 360 },
+		max: { default: 5 },
+		smoothScroll: {
+			type: [Boolean, Object],
+			default: !0
+		}
+	},
+	emits: ["close"],
+	setup(_, { emit: j }) {
+		let M = t(), N = _, Te = j, Ee = e("toast", () => N.zIndex), De = se(), P = xe(null), F = {}, I = de(), L = /* @__PURE__ */ new Set(), R, z = !1, Oe = {
+			default: te,
+			success: i,
+			error: re,
+			loading: ee,
+			warning: r,
+			info: a
+		}, B = d(() => Math.max(1, Math.floor(N.max))), ke = d(() => N.viewportPosition === "all" ? ce : [s(N.viewportPosition)]), V = d(() => le.value === I), Ae = d(() => ae(N.smoothScroll, ie, {
+			respectReducedMotion: !0,
+			smoothTouchpad: !1
+		})), H = d(() => ({
+			zIndex: Ee.value,
+			"--bing-toast-offset": G(N.offset, 18),
+			"--bing-toast-gap": G(N.gap, 10),
+			"--bing-toast-width": G(N.width, 360)
+		})), je = d(() => V.value ? ke.value.map((e) => ({
+			position: e,
+			toasts: c.value.filter((t) => t.position === e).sort((e, t) => t.order - e.order)
+		})) : []);
+		function Me(e, t) {
+			if (t) {
+				F[e] = t;
+				return;
+			}
+			delete F[e];
+		}
+		function U() {
+			Object.values(F).forEach((e) => e?.stop());
+		}
+		function W() {
+			Object.values(F).forEach((e) => {
+				if (!e) return;
+				e.stop();
+				let t = e.viewport;
+				if (!t) return;
+				let n = Math.max(0, t.scrollHeight - t.clientHeight), r = Math.min(n, Math.max(0, t.scrollTop));
+				r !== t.scrollTop && e.scrollTo(r), e.update();
+			});
+		}
+		Se(() => [
+			c.value,
+			V.value,
+			N.viewportPosition,
+			N.width,
+			N.gap
+		], () => {
+			U(), v(W);
+		}, { flush: "sync" });
+		function G(e, t) {
+			return typeof e == "number" ? `${e}px` : e ?? `${t}px`;
+		}
+		function Ne(e) {
+			return ["bing-toast-region", `bing-toast-region--${e}`];
+		}
+		function Pe(e, t) {
+			let n = Math.min(e, B.value - 1, 5);
+			return {
+				"--bing-toast-depth": String(n),
+				"--bing-toast-stack-scale": "1",
+				"--bing-toast-stack-shift": "0px",
+				"--bing-toast-stack-opacity": "1",
+				"--bing-toast-stack-edge-shadow": "0.035",
+				"--bing-toast-stack-outline": "0.035",
+				"--bing-toast-stack-z-index": String(20 - n)
+			};
+		}
+		function Fe(e) {
+			return Oe[e];
+		}
+		function Ie(e) {
+			return e.type === "error" || e.type === "warning" ? "alert" : "status";
+		}
+		function Le(e) {
+			return e.type === "error" || e.type === "warning" ? "assertive" : "polite";
+		}
+		function K(e) {
+			let t = 0, n = 0;
+			return e === "right" || e.endsWith("right") ? t = 28 : (e === "left" || e.endsWith("left")) && (t = -28), e === "top" || e.startsWith("top") ? n = -18 : (e === "bottom" || e.startsWith("bottom")) && (n = 18), {
+				x: t,
+				y: n
+			};
+		}
+		function q(e) {
+			return s(e.dataset.position);
+		}
+		function J(e) {
+			return e.querySelector(".bing-toast__card");
+		}
+		function Y() {
+			if (z || R || !P.value) return;
+			let e = Array.from(P.value.querySelectorAll(".bing-toast"));
+			e.forEach((e) => L.add(e)), R = new Map(e.map((e) => [e, e.getBoundingClientRect()])), e.length && (E.getTweensOf(e).forEach((e) => e.kill()), E.set(e, { clearProps: "transform" }));
+		}
+		function X() {
+			let e = R;
+			if (R = void 0, z || !e || !P.value || (W(), M())) return;
+			let t = /* @__PURE__ */ new Map();
+			e.forEach((e, n) => {
+				if (!n.isConnected) return;
+				let r = n.getBoundingClientRect(), i = e.left - r.left, a = e.top - r.top;
+				(Math.abs(i) > .5 || Math.abs(a) > .5) && t.set(n, {
+					x: i,
+					y: a
+				});
+			}), t.size && E.fromTo([...t.keys()], {
+				x: (e, n) => t.get(n).x,
+				y: (e, n) => t.get(n).y
+			}, {
+				x: 0,
+				y: 0,
+				duration: .34,
+				ease: "power3.out",
+				overwrite: !0,
+				clearProps: "transform",
+				onComplete: W
+			});
+		}
+		ve(Y), be(X);
+		function Re(e) {
+			if (z) return;
+			let t = e, n = K(q(t));
+			L.add(t), E.set(J(t), {
+				autoAlpha: 0,
+				x: n.x,
+				y: n.y,
+				scale: .96,
+				force3D: !0
+			});
+		}
+		function ze(e, t) {
+			if (z) {
+				t();
+				return;
+			}
+			let n = J(e);
+			E.killTweensOf(n), E.to(n, {
+				autoAlpha: 1,
+				x: 0,
+				y: 0,
+				scale: 1,
+				duration: M() ? 0 : .34,
+				ease: "back.out(1.7)",
+				overwrite: "auto",
+				clearProps: "visibility,transform",
+				onComplete: t
+			});
+		}
+		function Be(e, t) {
+			if (z) {
+				t();
+				return;
+			}
+			let n = e, r = K(q(n)), i = J(e);
+			L.add(n), E.killTweensOf(i), E.to(i, {
+				autoAlpha: 0,
+				x: r.x * .55,
+				y: r.y,
+				scale: .93,
+				duration: M() ? 0 : .38,
+				ease: "power3.inOut",
+				overwrite: "auto",
+				onComplete: () => {
+					Y(), E.killTweensOf(n), t(), L.delete(n), v(X);
+				}
+			});
+		}
+		function Z() {
+			z || v(W);
+		}
+		function Ve(e) {
+			Te("close", e), ue.close(e.id), l();
+		}
+		function Q() {
+			fe();
+		}
+		function $() {
+			l();
+		}
+		function He(e) {
+			let t = e.currentTarget, n = e.relatedTarget;
+			t && n instanceof Node && t.contains(n) || l();
+		}
+		return ye(() => {
+			pe(I);
+		}), _e(() => {
+			z = !0, R = void 0, U(), me(I);
+			let e = [...L].flatMap((e) => [e, J(e)]);
+			E.getTweensOf(e).forEach((e) => e.kill()), L.clear();
+		}), (e, t) => w(De) ? (x(), f(he, {
+			key: 0,
+			to: "body"
+		}, [h("div", {
+			ref_key: "rootRef",
+			ref: P,
+			class: "bing-toast-root",
+			style: b(H.value)
+		}, [(x(!0), m(u, null, S(je.value, (e) => (x(), m("div", {
+			key: e.position,
+			class: y([Ne(e.position), { "is-empty": e.toasts.length === 0 }])
+		}, [g(oe, {
+			ref_for: !0,
+			ref: (t) => Me(e.position, t),
+			class: "bing-toast-scroll",
+			"max-height": "calc(100vh - var(--bing-toast-offset) - var(--bing-toast-offset))",
+			smooth: Ae.value,
+			always: "",
+			"aria-label": e.toasts.length > 0 ? "消息通知" : void 0,
+			onPointerenter: Q,
+			onPointerleave: $
+		}, {
+			default: T(() => [g(ge, {
+				tag: "div",
+				class: "bing-toast-stack",
+				css: !1,
+				onBeforeEnter: Re,
+				onEnter: ze,
+				onLeave: Be,
+				onAfterEnter: Z,
+				onAfterLeave: Z
+			}, {
+				default: T(() => [(x(!0), m(u, null, S(e.toasts, (t, r) => (x(), m("article", {
+					key: t.id,
+					class: y(["bing-toast", [`bing-toast--${t.type}`, { "has-title": !!t.title }]]),
+					style: b(Pe(r, t)),
+					"data-position": e.position,
+					"data-depth": Math.min(r, B.value - 1, 5),
+					role: Ie(t),
+					"aria-live": Le(t),
+					"aria-label": t.ariaLabel,
+					onPointerenter: Q,
+					onPointerleave: $,
+					onFocusin: Q,
+					onFocusout: He
+				}, [h("div", D, [
+					h("span", O, [g(o, {
+						icon: Fe(t.type),
+						size: "md",
+						"stroke-width": 1.75
+					}, null, 8, ["icon"])]),
+					h("span", k, [t.title ? (x(), m("strong", A, C(t.title), 1)) : p("", !0), h("span", we, C(t.message), 1)]),
+					t.closable ? (x(), f(n, {
+						key: 0,
+						variant: "ghost",
+						size: "xs",
+						rounded: "sm",
+						throttle: !1,
+						class: "bing-toast__close",
+						"aria-label": t.closeAriaLabel,
+						onClick: (e) => Ve(t)
+					}, {
+						prefix: T(() => [g(o, {
+							icon: w(ne),
+							size: "sm",
+							"stroke-width": 1.75
+						}, null, 8, ["icon"])]),
+						_: 1
+					}, 8, ["aria-label", "onClick"])) : p("", !0)
+				])], 46, Ce))), 128))]),
+				_: 2
+			}, 1024)]),
+			_: 2
+		}, 1032, ["smooth", "aria-label"])], 2))), 128))], 4)])) : p("", !0);
+	}
+});
+//#endregion
+export { j as default };

package/dist/components/BingTooltip/BingTooltip.js

@@ -0,0 +1,7 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import t from "./BingTooltip.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                            */
+//#region src/components/BingTooltip/BingTooltip.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-6325878d"]]);
+//#endregion
+export { n as default };

package/dist/components/BingTooltip/BingTooltip.shared.js

@@ -0,0 +1,14 @@
+import { shallowRef as e } from "vue";
+//#region src/components/BingTooltip/BingTooltip.shared.ts
+var t = 0, n = /* @__PURE__ */ new Map(), r = e(), i = e(), a = e(null), o = e(), s = e(!1);
+function c() {
+	return t += 1, `bing-tooltip-owner-${t}`;
+}
+function l(e) {
+	n.set(e.id, e), i.value ||= e.id;
+}
+function u(e) {
+	n.delete(e.id), r.value?.id === e.id && (r.value = void 0, s.value = !1), i.value === e.id && (i.value = n.keys().next().value), n.size === 0 && (a.value = null, o.value = void 0, s.value = !1);
+}
+//#endregion
+export { c as createTooltipOwnerId, l as registerTooltipOwner, r as sharedTooltipActiveOwner, i as sharedTooltipHostId, a as sharedTooltipPanelElement, s as sharedTooltipShouldRender, o as sharedTooltipSuppressRootClickOwnerId, u as unregisterTooltipOwner };

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

@@ -1,4 +1,4 @@
-import { BingTooltipAlign, BingTooltipCloseReason, BingTooltipExpose, BingTooltipOpenReason, BingTooltipPlacement, BingTooltipProps, BingTooltipTrigger } from './BingTooltip.types';
+import { BingTooltipCloseReason, BingTooltipExpose, BingTooltipOpenReason, BingTooltipPlacement, BingTooltipProps, BingTooltipTrigger } from './BingTooltip.types';
 declare function show(reason?: BingTooltipOpenReason): void;
 declare function hide(reason?: BingTooltipCloseReason): void;
 declare function toggle(reason?: BingTooltipOpenReason | BingTooltipCloseReason): void;
@@ -13,21 +13,20 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import('vue').DefineComponent<BingTooltipProps, BingTooltipExpose, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     close: (reason: BingTooltipCloseReason) => any;
-    "update:modelValue": (value: boolean) => any;
     open: (reason: BingTooltipOpenReason) => any;
+    "update:modelValue": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<BingTooltipProps> & Readonly<{
     onClose?: ((reason: BingTooltipCloseReason) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onOpen?: ((reason: BingTooltipOpenReason) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
     trigger: BingTooltipTrigger | BingTooltipTrigger[];
     disabled: boolean;
     content: string;
     maxWidth: string | number;
-    zIndex: number;
     id: string;
     placement: BingTooltipPlacement;
-    align: BingTooltipAlign;
+    align: import('./BingTooltip.types').BingTooltipAlign;
     ariaLabel: string;
     offset: number;
     glass: boolean;