@moubing/bing-ui 0.11.2 → 0.12.0

package/dist/components/BingDialog/BingDialog.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,558 @@
+import { useConfigZIndex as e } from "../../utils/config.js";
+import { useReducedMotion as t } from "../../motion/reducedMotion.js";
+import n from "../BingButton/BingButton.js";
+import { Eye as r, EyeOff as i, X as a } from "../../icons/icons.js";
+import o from "../BingIcon/BingIcon.js";
+import s from "../BingScrollbar/BingScrollbar.js";
+import { useOverlay as ee } from "../../utils/overlay.js";
+import { useClientReady as c } from "../../utils/useClientReady.js";
+import { normalizeGlassCssLength as te } from "../../utils/glass.js";
+import { createScrollLock as ne } from "../../utils/scrollLock.js";
+import { Fragment as re, Teleport as ie, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, nextTick as ae, normalizeClass as oe, normalizeStyle as _, onBeforeUnmount as se, openBlock as v, ref as y, renderList as ce, renderSlot as b, toDisplayString as x, unref as S, useId as le, watch as C, withCtx as w } from "vue";
+import { gsap as T } from "gsap";
+//#region src/components/BingDialog/BingDialog.vue?vue&type=script&setup=true&lang.ts
+var ue = {
+	key: 0,
+	class: "bing-dialog__ambience",
+	"aria-hidden": "true"
+}, de = [
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby"
+], fe = { class: "bing-dialog__header" }, pe = { class: "bing-dialog__heading" }, me = ["id"], he = { class: "bing-dialog__actions" }, ge = ["aria-pressed"], _e = {
+	key: 0,
+	class: "bing-dialog__header-addon"
+}, ve = { class: "bing-dialog__body" }, ye = {
+	key: 0,
+	class: "bing-dialog__footer"
+}, be = 220, xe = /* @__PURE__ */ g({
+	__name: "BingDialog",
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		title: { default: void 0 },
+		width: { default: "520px" },
+		maxWidth: { default: void 0 },
+		height: { default: void 0 },
+		maxHeight: { default: void 0 },
+		zIndex: {},
+		lockScroll: {
+			type: Boolean,
+			default: !0
+		},
+		smoothScroll: {
+			type: [Boolean, Object],
+			default: !0
+		},
+		closeOnOverlay: {
+			type: Boolean,
+			default: !0
+		},
+		closeOnEsc: {
+			type: Boolean,
+			default: !0
+		},
+		closeOnConfirm: {
+			type: Boolean,
+			default: !1
+		},
+		showClose: {
+			type: Boolean,
+			default: !0
+		},
+		showFooter: {
+			type: Boolean,
+			default: !0
+		},
+		cancelText: { default: "关闭" },
+		confirmText: { default: "确定" },
+		confirmLoading: {
+			type: Boolean,
+			default: !1
+		},
+		confirmDisabled: {
+			type: Boolean,
+			default: !1
+		},
+		glass: {
+			type: Boolean,
+			default: !0
+		},
+		overlayBlur: {
+			type: Boolean,
+			default: !0
+		},
+		overlayOrbs: { default: () => [] },
+		overlayOrbsAnimated: {
+			type: Boolean,
+			default: !1
+		},
+		showPeek: {
+			type: Boolean,
+			default: !0
+		},
+		peekOpacity: { default: 0 },
+		ariaLabel: { default: void 0 },
+		ariaDescribedby: { default: void 0 },
+		glassBlur: { default: void 0 },
+		glassOpacity: { default: void 0 },
+		glassSaturation: { default: void 0 }
+	},
+	emits: [
+		"update:modelValue",
+		"close",
+		"cancel",
+		"confirm"
+	],
+	setup(g, { emit: xe }) {
+		let Se = t(), E = g, D = xe, Ce = e("dialog", () => E.zIndex), O = c(), we = `bing-dialog-${le()}`, k = 0, A, j, M = !1, N, P = y(E.modelValue), F = y(!1), I = y(!1), L = y(null), R = y(null), z = y(null), Te = l(() => typeof E.width == "number" ? `${E.width}px` : E.width), Ee = ee({
+			open: () => O.value && P.value,
+			elements: () => [L.value?.querySelector(".bing-dialog")],
+			zIndex: () => Ce.value,
+			modal: !0,
+			closeOnEscape: () => E.modelValue && E.closeOnEsc,
+			onEscape: () => G("escape")
+		}), De = l(() => ({
+			"--bing-dialog-overlay-glass-blur": E.glassBlur === void 0 ? "var(--bing-glass-blur, 16px)" : te(E.glassBlur),
+			"--bing-dialog-overlay-glass-saturation": E.glassSaturation === void 0 ? "var(--bing-glass-saturation, 1.05)" : String(Math.max(0, E.glassSaturation)),
+			zIndex: Ee.zIndex.value
+		})), Oe = l(() => ({
+			width: Te.value,
+			height: B(E.height),
+			maxWidth: E.maxWidth === void 0 ? void 0 : `min(100%, ${B(E.maxWidth)})`,
+			maxHeight: E.height === void 0 && E.maxHeight === void 0 ? void 0 : `min(${B(E.maxHeight) ?? "100dvh"}, calc(100dvh - 2 * var(--bing-dialog-gutter)))`
+		}));
+		function B(e) {
+			return typeof e == "number" ? `${Math.max(0, e)}px` : e;
+		}
+		let ke = l(() => ["bing-dialog"]), Ae = l(() => ["bing-dialog-root", {
+			"is-active": F.value,
+			"is-peeking": I.value,
+			"has-overlay-blur": E.overlayBlur,
+			"has-animated-orbs": E.overlayBlur && E.overlayOrbsAnimated
+		}]), V = l(() => E.title ? `${we}-title` : void 0), je = l(() => E.ariaLabel ?? (E.title ? void 0 : "对话框")), Me = l(() => Math.min(1, Math.max(0, E.peekOpacity))), H = l(() => E.overlayBlur ? E.overlayOrbs : []);
+		function Ne(e, t) {
+			return typeof e == "number" ? `${e}px` : e ?? `${t}px`;
+		}
+		function Pe(e) {
+			return {
+				left: `${e.x ?? 50}%`,
+				top: `${e.y ?? 50}%`,
+				width: Ne(e.size, 360),
+				height: Ne(e.size, 360),
+				"--bing-dialog-orb-color": e.color,
+				"--bing-dialog-orb-opacity": Math.min(1, Math.max(0, e.opacity ?? .18)),
+				"--bing-dialog-orb-blur": `${Math.max(0, e.blur ?? 64)}px`
+			};
+		}
+		function U() {
+			return typeof window < "u" && typeof document < "u";
+		}
+		let { lock: Fe, unlock: W } = ne();
+		function Ie() {
+			if (E.modelValue && E.lockScroll) {
+				Fe();
+				return;
+			}
+			E.lockScroll || W();
+		}
+		function G(e) {
+			z.value?.stop(), D("update:modelValue", !1), D("close", e);
+		}
+		function Le() {
+			G("close");
+		}
+		function Re() {
+			D("cancel"), G("cancel");
+		}
+		function ze() {
+			D("confirm"), E.closeOnConfirm && G("confirm");
+		}
+		function Be() {
+			E.closeOnOverlay && G("overlay");
+		}
+		let Ve = /^(auto|scroll|overlay)$/;
+		function He(e, t, n) {
+			if (!n) return !1;
+			let r = t === "vertical", i = r ? e.clientHeight : e.clientWidth, a = r ? e.scrollHeight : e.scrollWidth, o = Math.max(0, a - i);
+			if (o <= .5) return !1;
+			let s = window.getComputedStyle(e), ee = r ? s.overflowY : s.overflowX;
+			if (!Ve.test(ee)) return !1;
+			let c = r ? e.scrollTop : e.scrollLeft;
+			return n < 0 ? c > .5 : c < o - .5;
+		}
+		function Ue(e) {
+			if (!(e.target instanceof Element)) return !1;
+			let t = e.target.closest(".bing-dialog");
+			if (!t || !L.value?.contains(t)) return !1;
+			let n = e.deltaX || (e.shiftKey ? e.deltaY : 0), r = e.shiftKey && !e.deltaX ? 0 : e.deltaY, i = e.target instanceof HTMLElement ? e.target : e.target.parentElement;
+			for (; i && i !== t;) {
+				if (He(i, "horizontal", n) || He(i, "vertical", r)) return !0;
+				i = i.parentElement;
+			}
+			return !1;
+		}
+		function We(e) {
+			e.defaultPrevented || Ue(e) || e.preventDefault();
+		}
+		function Ge() {
+			U() && (k &&= (window.cancelAnimationFrame(k), 0), A &&= (window.clearTimeout(A), void 0));
+		}
+		function K() {
+			N?.revert(), N = void 0;
+		}
+		function Ke(e) {
+			let t = e.motionX ?? 48, n = e.motionY ?? 34, r = Math.abs(t), i = Math.abs(n), a = t < 0 ? -1 : 1, o = n < 0 ? -1 : 1;
+			return [
+				{
+					x: -r * .42 * a,
+					y: -i * .28 * o
+				},
+				{
+					x: r * .34 * a,
+					y: -i * .7 * o
+				},
+				{
+					x: r * .72 * a,
+					y: i * .18 * o
+				},
+				{
+					x: -r * .16 * a,
+					y: i * .78 * o
+				},
+				{
+					x: -r * .62 * a,
+					y: i * .08 * o
+				}
+			];
+		}
+		function q() {
+			if (K(), !E.modelValue || !E.overlayBlur || !E.overlayOrbsAnimated || Se() || !L.value) return;
+			let e = Array.from(L.value.querySelectorAll(".bing-dialog__orb"));
+			e.length !== 0 && (N = T.context(() => {
+				e.forEach((e, t) => {
+					let n = H.value[t];
+					if (!n) return;
+					let r = Ke(n), i = Math.max(4, n.duration ?? 12) / r.length, a = T.timeline({
+						delay: Math.max(0, n.delay ?? t * .28),
+						repeat: -1
+					});
+					T.set(e, {
+						x: r[0].x,
+						y: r[0].y,
+						force3D: !0
+					}), r.slice(1).forEach((t) => {
+						a.to(e, {
+							x: t.x,
+							y: t.y,
+							duration: i,
+							ease: "sine.inOut",
+							force3D: !0
+						});
+					}), a.to(e, {
+						x: r[0].x,
+						y: r[0].y,
+						duration: i,
+						ease: "sine.inOut",
+						force3D: !0
+					});
+				});
+			}, L.value));
+		}
+		async function qe() {
+			await ae(), q();
+		}
+		function J() {
+			j?.kill(), j = void 0;
+		}
+		function Je() {
+			return L.value ? {
+				overlay: L.value.querySelector(".bing-dialog__overlay"),
+				overlayBlur: L.value.querySelector(".bing-dialog__overlay-blur"),
+				ambience: L.value.querySelector(".bing-dialog__ambience"),
+				dialog: L.value.querySelector(".bing-dialog"),
+				peek: L.value.querySelector(".bing-dialog__peek"),
+				peekAnchor: R.value
+			} : null;
+		}
+		function Y(e) {
+			return e.filter((e) => e !== null);
+		}
+		function Ye(e) {
+			let t = Je();
+			if (!t) return;
+			let n = Y([
+				t.overlay,
+				t.overlayBlur,
+				t.ambience
+			]), r = Se() ? 0 : e ? .32 : .42, i = e ? "power3.inOut" : "power4.out";
+			if (!t.dialog || !t.peekAnchor) return;
+			J();
+			let a = .08;
+			if (e) {
+				let e = t.dialog.getBoundingClientRect(), n = t.peek?.getBoundingClientRect();
+				if (!n) return;
+				let r = n.left + n.width / 2, i = n.top + n.height / 2, o = r - e.left, s = i - e.top;
+				a = Math.min(.12, Math.max(.055, n.width / Math.max(e.width, e.height))), T.set(t.dialog, {
+					transformOrigin: `${o}px ${s}px`,
+					transition: "none"
+				}), T.set(t.peekAnchor, {
+					x: r,
+					y: i,
+					xPercent: -50,
+					yPercent: -50
+				});
+			}
+			if (j = T.timeline({
+				defaults: {
+					duration: r,
+					ease: i,
+					overwrite: "auto"
+				},
+				onComplete: () => {
+					if (j = void 0, !e) {
+						let e = Y([
+							...n,
+							t.dialog,
+							t.peekAnchor
+						]);
+						T.set(e, { clearProps: "opacity,visibility,transform,transformOrigin,transition" });
+					}
+				}
+			}), e) {
+				T.set(t.peekAnchor, {
+					autoAlpha: 0,
+					scale: 1
+				}), j.to(n, { opacity: 0 }, 0).to(t.dialog, {
+					scale: a,
+					opacity: Me.value,
+					force3D: !0
+				}, 0).to(t.peekAnchor, {
+					autoAlpha: 1,
+					duration: r * .58,
+					ease: "power3.out"
+				}, r * .18);
+				return;
+			}
+			j.to(t.dialog, {
+				scale: 1,
+				opacity: 1,
+				force3D: !0
+			}, 0).to(t.peekAnchor, {
+				autoAlpha: 0,
+				duration: Math.min(r * .48, .18),
+				ease: "power2.in"
+			}, 0).to(t.overlay, { opacity: 1 }, .04).to(t.overlayBlur, { opacity: +!!E.overlayBlur }, .04).to(t.ambience, { opacity: E.overlayBlur && H.value.length > 0 ? 1 : 0 }, .04);
+		}
+		function X() {
+			!U() || !M || (window.removeEventListener("pointerup", Q), window.removeEventListener("pointercancel", Q), window.removeEventListener("blur", Q), M = !1);
+		}
+		function Xe() {
+			!U() || M || (window.addEventListener("pointerup", Q), window.addEventListener("pointercancel", Q), window.addEventListener("blur", Q), M = !0);
+		}
+		function Ze() {
+			if (I.value = !1, X(), J(), L.value) {
+				let e = Je();
+				e && T.set(Y([
+					e.overlay,
+					e.overlayBlur,
+					e.ambience,
+					e.dialog,
+					e.peekAnchor
+				]), { clearProps: "opacity,visibility,transform,transformOrigin,transition" });
+			}
+		}
+		async function Qe(e) {
+			if (!U()) {
+				P.value = e, F.value = e;
+				return;
+			}
+			if (Ge(), e) {
+				P.value = !0, F.value = !1, await ae(), Ze(), q(), k = window.requestAnimationFrame(() => {
+					k = 0, F.value = !0;
+				});
+				return;
+			}
+			z.value?.stop(), F.value = !1, K(), Ze(), A = window.setTimeout(() => {
+				A = void 0, P.value = !1, W();
+			}, be);
+		}
+		function $e(e) {
+			if (e.preventDefault(), !(I.value || "repeat" in e && e.repeat)) {
+				if (I.value = !0, "pointerId" in e) {
+					let t = e.currentTarget;
+					Xe();
+					try {
+						t?.setPointerCapture?.(e.pointerId);
+					} catch {}
+				}
+				Ye(!0);
+			}
+		}
+		function Z() {
+			X(), I.value && (I.value = !1, Ye(!1));
+		}
+		function Q() {
+			Z();
+		}
+		function $(e) {
+			return e.key === " " || e.key === "Enter";
+		}
+		function et(e) {
+			$(e) && $e(e);
+		}
+		function tt(e) {
+			$(e) && (e.preventDefault(), Z());
+		}
+		return C(() => [
+			O.value,
+			E.modelValue,
+			E.lockScroll
+		], () => {
+			O.value && Ie();
+		}, { immediate: !0 }), C([O, () => E.modelValue], ([e, t]) => {
+			e && Qe(t);
+		}, { immediate: !0 }), C(() => [
+			E.overlayBlur,
+			E.overlayOrbsAnimated,
+			E.overlayOrbs
+		], qe, {
+			deep: !0,
+			flush: "post"
+		}), se(() => {
+			Ge(), K(), X(), J(), z.value?.stop(), W();
+		}), (e, t) => S(O) ? (v(), u(ie, {
+			key: 0,
+			to: "body"
+		}, [P.value ? (v(), f("div", {
+			key: 0,
+			ref_key: "rootRef",
+			ref: L,
+			class: oe(Ae.value),
+			style: _(De.value),
+			onWheel: We
+		}, [
+			t[3] ||= p("div", {
+				class: "bing-dialog__overlay-blur",
+				"aria-hidden": "true"
+			}, null, -1),
+			H.value.length > 0 ? (v(), f("div", ue, [(v(!0), f(re, null, ce(H.value, (e, n) => (v(), f("span", {
+				key: e.id ?? n,
+				class: "bing-dialog__orb-anchor",
+				style: _(Pe(e))
+			}, [...t[0] ||= [p("span", { class: "bing-dialog__orb" }, null, -1)]], 4))), 128))])) : d("", !0),
+			p("div", {
+				class: "bing-dialog__overlay",
+				"aria-hidden": "true",
+				onClick: Be
+			}),
+			p("section", {
+				class: oe(ke.value),
+				style: _(Oe.value),
+				role: "dialog",
+				tabindex: "-1",
+				"aria-modal": "true",
+				"aria-label": je.value,
+				"aria-labelledby": V.value,
+				"aria-describedby": g.ariaDescribedby
+			}, [
+				t[1] ||= p("div", {
+					class: "bing-dialog__surface",
+					"aria-hidden": "true"
+				}, null, -1),
+				t[2] ||= p("div", {
+					class: "bing-dialog__outline",
+					"aria-hidden": "true"
+				}, null, -1),
+				p("header", fe, [
+					p("div", pe, [b(e.$slots, "title", {}, () => [g.title ? (v(), f("h2", {
+						key: 0,
+						id: V.value,
+						class: "bing-dialog__title"
+					}, x(g.title), 9, me)) : d("", !0)], !0)]),
+					p("div", he, [g.showPeek ? (v(), f("button", {
+						key: 0,
+						class: "bing-dialog__icon-button bing-dialog__peek",
+						type: "button",
+						"aria-label": "按住查看背景",
+						"aria-pressed": I.value || void 0,
+						onPointerdown: $e,
+						onPointerup: Z,
+						onPointercancel: Z,
+						onLostpointercapture: Z,
+						onBlur: Z,
+						onKeydown: et,
+						onKeyup: tt
+					}, [h(o, {
+						icon: I.value ? S(i) : S(r),
+						size: "sm",
+						"stroke-width": 1.75
+					}, null, 8, ["icon"])], 40, ge)) : d("", !0), g.showClose ? (v(), u(n, {
+						key: 1,
+						class: "bing-dialog__close",
+						throttle: !1,
+						variant: "ghost",
+						size: "sm",
+						rounded: "md",
+						"aria-label": "关闭弹窗",
+						onClick: Le
+					}, {
+						prefix: w(() => [h(o, {
+							icon: S(a),
+							size: "sm",
+							"stroke-width": 1.75
+						}, null, 8, ["icon"])]),
+						_: 1
+					})) : d("", !0)]),
+					e.$slots["header-addon"] ? (v(), f("div", _e, [b(e.$slots, "header-addon", {}, void 0, !0)])) : d("", !0)
+				]),
+				h(s, {
+					ref_key: "bodyScrollRef",
+					ref: z,
+					class: "bing-dialog__body-scroll",
+					smooth: g.smoothScroll,
+					focusable: !0
+				}, {
+					default: w(() => [p("div", ve, [b(e.$slots, "default", {}, void 0, !0)])]),
+					_: 3
+				}, 8, ["smooth"]),
+				e.$slots.footer || g.showFooter ? (v(), f("footer", ye, [b(e.$slots, "footer", {
+					close: G,
+					cancel: Re,
+					confirm: ze
+				}, () => [h(n, {
+					variant: "secondary",
+					throttle: !1,
+					onClick: Re
+				}, {
+					default: w(() => [m(x(g.cancelText), 1)]),
+					_: 1
+				}), h(n, {
+					variant: "primary",
+					throttle: !0,
+					loading: g.confirmLoading,
+					disabled: g.confirmDisabled,
+					onClick: ze
+				}, {
+					default: w(() => [m(x(g.confirmText), 1)]),
+					_: 1
+				}, 8, ["loading", "disabled"])], !0)])) : d("", !0)
+			], 14, de),
+			g.showPeek ? (v(), f("div", {
+				key: 1,
+				ref_key: "peekAnchorRef",
+				ref: R,
+				class: "bing-dialog__peek-anchor",
+				"aria-hidden": "true"
+			}, [h(o, {
+				icon: S(i),
+				size: "sm",
+				"stroke-width": 1.75
+			}, null, 8, ["icon"])], 512)) : d("", !0)
+		], 38)) : d("", !0)])) : d("", !0);
+	}
+});
+//#endregion
+export { xe as default };

package/dist/components/BingDropDown/BingDropDown.context.js

@@ -0,0 +1,4 @@
+//#region src/components/BingDropDown/BingDropDown.context.ts
+var e = Symbol("BingDropDownContext");
+//#endregion
+export { e as bingDropDownContextKey };

package/dist/components/BingDropDown/BingDropDown.js

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

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

@@ -18,12 +18,11 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<BingDr
     "onAfter-enter"?: (() => any) | undefined;
     "onAfter-leave"?: (() => any) | undefined;
 }>, {
+    open: boolean | null;
     trigger: import('./BingDropDown.types').BingDropDownTrigger;
     placement: BingDropDownPlacement;
-    size: import('./BingDropDown.types').BingDropDownSize;
     block: boolean;
     ariaLabel: string;
-    open: boolean | null;
     glass: boolean;
     glassBlur: string | number;
     glassOpacity: number;