@moubing/bing-ui 0.11.2 → 0.12.0

package/dist/components/BingDropDown/BingDropDown.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,649 @@
+import { useConfigSize as e, useConfigZIndex as t } from "../../utils/config.js";
+import { useReducedMotion as n } from "../../motion/reducedMotion.js";
+import { createSelectPanelEnter as r, createSelectPanelLeave as i } from "../../motion/selectPanelMotion.js";
+import { useClickFeedback as a } from "../../motion/useClickFeedback.js";
+import { useOverlay as o } from "../../utils/overlay.js";
+import { useClientReady as s } from "../../utils/useClientReady.js";
+import { createGlassCssVariables as c, defaultGlassEffect as l } from "../../utils/glass.js";
+import { computeFloatingPosition as ee, useFloatingAutoUpdate as te } from "../../utils/floating.js";
+import { bingDropDownContextKey as ne } from "./BingDropDown.context.js";
+import { Teleport as re, computed as u, createBlock as ie, createCommentVNode as d, createElementBlock as f, createElementVNode as ae, defineComponent as oe, nextTick as p, normalizeClass as se, normalizeStyle as ce, onBeforeUnmount as le, onMounted as ue, openBlock as m, provide as de, ref as h, renderSlot as g, unref as fe, watch as _ } from "vue";
+import { gsap as v } from "gsap";
+//#region src/components/BingDropDown/BingDropDown.vue?vue&type=script&setup=true&lang.ts
+var pe = ["aria-label"], me = {
+	key: 0,
+	class: "bing-dropdown__header"
+}, he = { class: "bing-dropdown__body" }, ge = {
+	key: 1,
+	class: "bing-dropdown__footer"
+}, _e = 0, ve = /* @__PURE__ */ oe({
+	__name: "BingDropDown",
+	props: {
+		open: {
+			type: [Boolean, null],
+			default: null
+		},
+		context: {},
+		trigger: { default: "click" },
+		placement: { default: "bottom-start" },
+		size: {},
+		width: {},
+		minWidth: {},
+		maxWidth: {},
+		panelClass: { default: void 0 },
+		block: {
+			type: Boolean,
+			default: !1
+		},
+		closeOnOutside: {
+			type: Boolean,
+			default: !0
+		},
+		closeOnEscape: {
+			type: Boolean,
+			default: !0
+		},
+		autoFocus: {
+			type: Boolean,
+			default: !1
+		},
+		loop: {
+			type: Boolean,
+			default: !0
+		},
+		ariaLabel: { default: "下拉菜单" },
+		glass: {
+			type: Boolean,
+			default: l.glass
+		},
+		glassBlur: { default: void 0 },
+		glassOpacity: { default: void 0 },
+		glassSaturation: { default: void 0 }
+	},
+	emits: [
+		"update:open",
+		"update:context",
+		"open",
+		"close",
+		"context-open",
+		"after-enter",
+		"after-leave"
+	],
+	setup(l, { expose: oe, emit: ve }) {
+		let { playClickFeedback: ye } = a(), y = l, b = ve, x = e(() => y.size), be = s(), S = `bing-dropdown-${++_e}`, C = h(), w = h(), xe = h(), T = h(!1), Se = h(!1), E = h(y.context ?? null), D = h(null), O = n(), k = h({
+			align: "start",
+			placement: "bottom",
+			left: 0,
+			top: 0
+		}), A, j, M, N, Ce = u(() => y.open !== null), P = u(() => Ce.value ? !!y.open : Se.value), we = u(() => [
+			"bing-dropdown",
+			`bing-dropdown--${x.value}`,
+			`bing-dropdown--${y.placement}`,
+			`bing-dropdown--trigger-${y.trigger}`,
+			{
+				"is-open": P.value,
+				"is-block": y.block
+			}
+		]), Te = u(() => Le()), Ee = u(() => [
+			"bing-dropdown__panel",
+			y.panelClass,
+			`is-placement-${k.value.placement}`,
+			`is-align-${k.value.align}`,
+			{ "is-glass": y.glass }
+		]), De = u(() => ({
+			...c("bing-dropdown", {
+				glass: y.glass,
+				glassBlur: y.glassBlur,
+				glassOpacity: y.glassOpacity,
+				glassSaturation: y.glassSaturation
+			}),
+			"--bing-dropdown-z-index": String(I.zIndex.value),
+			"--bing-dropdown-item-height": {
+				sm: "28px",
+				md: "32px",
+				lg: "36px"
+			}[x.value]
+		})), F = te(Z), Oe = t("popover"), I = o({
+			open: () => T.value,
+			elements: () => [
+				C.value,
+				w.value,
+				...Array.from(document.querySelectorAll(`[data-bing-dropdown-floating="${S}"]`))
+			],
+			zIndex: () => Oe.value,
+			closeOnEscape: () => y.closeOnEscape,
+			onEscape: () => V(!0)
+		}), ke = u(() => {
+			let e = {
+				...De.value,
+				zIndex: String(I.zIndex.value)
+			}, t = L(y.width), n = L(y.minWidth), r = L(y.maxWidth);
+			return t && (e["--bing-dropdown-width"] = t), n && (e["--bing-dropdown-min-width"] = n), r && (e["--bing-dropdown-max-width"] = r), T.value && (e.top = `${k.value.top}px`, e.left = `${k.value.left}px`), e;
+		});
+		de(ne, {
+			close: V,
+			floatingId: S,
+			getGlassStyle: () => De.value,
+			onMenuKeydown: vt
+		}), _(P, async (e, t) => {
+			if (e !== t) {
+				if (Xe(), e) {
+					T.value = !0, F.start(), b("open"), await p(), Z(), dt(), mt();
+					return;
+				}
+				F.dispose(), b("close"), ft();
+			}
+		}, { flush: "post" }), _(() => y.context, (e) => {
+			E.value = e ?? null;
+		}), _(() => [
+			y.placement,
+			y.width,
+			y.minWidth,
+			y.maxWidth
+		], () => {
+			P.value && F.schedule();
+		}), ue(async () => {
+			C.value && (M = v.context(() => void 0, C.value)), P.value && (T.value = !0, Xe(), F.start(), await p(), Z(), dt(), mt());
+		}), le(() => {
+			Ze(), F.dispose(), W(), G(), K(), v.killTweensOf([w.value, ...J()].filter(Boolean)), M?.revert(), M = void 0;
+		});
+		function L(e) {
+			return typeof e == "number" ? `${e}px` : e;
+		}
+		function R() {
+			return typeof window < "u" && typeof document < "u";
+		}
+		function Ae(e, t) {
+			if (typeof e == "number") return Math.max(0, e);
+			if (typeof e == "string") {
+				let n = Number.parseFloat(e);
+				return Number.isFinite(n) ? Math.max(0, n) : t;
+			}
+			return t;
+		}
+		function je(e) {
+			let [t, n] = e.split("-");
+			return {
+				align: n,
+				side: t
+			};
+		}
+		function Me() {
+			if (y.trigger === "contextmenu" && D.value) {
+				let { x: e, y: t } = D.value;
+				return {
+					bottom: t,
+					height: 0,
+					left: e,
+					right: e,
+					top: t,
+					width: 0
+				};
+			}
+			return C.value?.getBoundingClientRect();
+		}
+		function Ne(e, t) {
+			return {
+				x: e + 6,
+				y: t + 6
+			};
+		}
+		function z(e) {
+			e !== P.value && (Ce.value || (Se.value = e), b("update:open", e));
+		}
+		function Pe(e) {
+			E.value = e, b("update:context", e);
+		}
+		function Fe() {
+			D.value = null, E.value !== null && Pe(null);
+		}
+		function B() {
+			W(), z(!0);
+		}
+		function V(e = !1) {
+			W(), z(!1), e && ze();
+		}
+		function H() {
+			W(), z(!P.value);
+		}
+		function U(e) {
+			return e.pointerType === "touch";
+		}
+		function W() {
+			!R() || N === void 0 || (window.clearTimeout(N), N = void 0);
+		}
+		function Ie() {
+			!R() || y.trigger !== "hover" || (W(), N = window.setTimeout(() => {
+				N = void 0, z(!1);
+			}, 110));
+		}
+		function Le(e = null) {
+			let t = {
+				"aria-expanded": P.value ? "true" : "false",
+				"aria-haspopup": "menu",
+				"data-bing-dropdown-trigger": ""
+			};
+			return y.trigger === "contextmenu" ? {
+				...t,
+				onContextmenu: (t) => {
+					He(t, e);
+				},
+				onKeydown: (t) => {
+					Ue(t, e);
+				}
+			} : {
+				...t,
+				onClick: We,
+				onKeydown: Ge,
+				onPointerenter: Ke,
+				onPointerleave: qe
+			};
+		}
+		function Re(e) {
+			e.currentTarget instanceof HTMLElement && (xe.value = e.currentTarget);
+		}
+		function ze() {
+			xe.value?.focus();
+		}
+		async function Be(e) {
+			W(), P.value || z(!0), await p(), await p(), $(e);
+		}
+		async function Ve(e, t, n, r) {
+			Re(e), W();
+			let i = Ne(n, r), a = y.trigger === "contextmenu" && P.value && T.value && w.value ? it() : void 0;
+			if (D.value = i, k.value = {
+				...k.value,
+				left: i.x,
+				top: i.y
+			}, Pe(t), b("context-open", {
+				event: e,
+				context: t,
+				x: n,
+				y: r
+			}), !P.value) {
+				z(!0), await p(), await p(), Z(), Q();
+				return;
+			}
+			await p(), Z(), await p(), a && at(a), Q();
+		}
+		async function He(e, t = null) {
+			y.trigger === "contextmenu" && (e.preventDefault(), await Ve(e, t, e.clientX, e.clientY));
+		}
+		async function Ue(e, t = null) {
+			if (y.trigger !== "contextmenu" || !(e.key === "ContextMenu" || e.shiftKey && e.key === "F10")) return;
+			e.preventDefault();
+			let n = (e.currentTarget instanceof HTMLElement ? e.currentTarget : C.value)?.getBoundingClientRect();
+			await Ve(e, t, n?.left ?? 0, n?.bottom ?? 0);
+		}
+		function We(e) {
+			if (!e.defaultPrevented) {
+				if (ye(e), Re(e), W(), y.trigger === "hover") {
+					P.value || B();
+					return;
+				}
+				H();
+			}
+		}
+		function Ge(e) {
+			if (Re(e), e.key === "ArrowDown") {
+				e.preventDefault(), ye(e), Be("first");
+				return;
+			}
+			if (e.key === "ArrowUp") {
+				e.preventDefault(), ye(e), Be("last");
+				return;
+			}
+			I.isTop(e) && e.key === "Escape" && P.value && y.closeOnEscape && (e.preventDefault(), e.stopPropagation(), V(!0));
+		}
+		function Ke(e) {
+			y.trigger !== "hover" || U(e) || (W(), B());
+		}
+		function qe(e) {
+			y.trigger !== "hover" || U(e) || Ie();
+		}
+		function Je(e) {
+			y.trigger !== "hover" || U(e) || W();
+		}
+		function Ye(e) {
+			y.trigger !== "hover" || U(e) || Ie();
+		}
+		function Xe() {
+			typeof document > "u" || (Ze(), P.value && (document.addEventListener("pointerdown", tt), document.addEventListener("keydown", nt)));
+		}
+		function Ze() {
+			typeof document > "u" || (document.removeEventListener("pointerdown", tt), document.removeEventListener("keydown", nt));
+		}
+		function Qe(e) {
+			return e instanceof Element ? e : e instanceof Node ? e.parentElement : null;
+		}
+		function $e(e) {
+			return (Qe(e)?.closest("[data-bing-dropdown-floating]"))?.dataset.bingDropdownFloating === S;
+		}
+		function et(e) {
+			return e instanceof Node ? !!(w.value?.contains(e) || $e(e) || I.contains(e) && !C.value?.contains(e)) : !1;
+		}
+		function tt(e) {
+			if (!y.closeOnOutside) return;
+			let t = e.target;
+			!(t instanceof Node) || et(t) || y.trigger === "contextmenu" && C.value?.contains(t) && (e.button === 2 || e.buttons === 2) || y.trigger !== "contextmenu" && C.value?.contains(t) || V();
+		}
+		function nt(e) {
+			e.key === "Escape" && !e.defaultPrevented && I.isTop(e) && y.closeOnEscape && (e.preventDefault(), V(!0));
+		}
+		function G() {
+			A?.kill(), A = void 0;
+		}
+		function K(e = {}) {
+			j?.kill(), j = void 0;
+			let t = w.value;
+			if (t) {
+				if (e.resetTransform) {
+					v.set(t, {
+						x: 0,
+						y: 0,
+						clearProps: "height,overflow"
+					});
+					return;
+				}
+				v.set(t, { clearProps: "height,overflow" });
+			}
+		}
+		function q(e) {
+			if (M && !M.isReverted) {
+				M.add(e);
+				return;
+			}
+			e();
+		}
+		function J() {
+			return Array.from(w.value?.querySelectorAll("[data-bing-dropdown-item], [data-bing-dropdown-stagger]") ?? []);
+		}
+		function rt(e = w.value) {
+			return e ? Array.from(e.querySelectorAll("[data-bing-dropdown-item]")).filter((t) => t.closest("[role=\"menu\"]") === e) : [];
+		}
+		function it() {
+			let e = w.value;
+			if (!e) return;
+			let t = e.getBoundingClientRect();
+			return {
+				height: t.height,
+				left: t.left,
+				top: t.top
+			};
+		}
+		function at(e) {
+			let t = w.value;
+			if (!t || !P.value || y.trigger !== "contextmenu") return;
+			G(), K({ resetTransform: !0 }), v.killTweensOf([t, ...J()]);
+			let n = rt(t), r = t.getBoundingClientRect(), i = r.height, a = e.left - r.left, o = e.top - r.top, s = Math.abs(a) > .5 || Math.abs(o) > .5, c = e.height > 0 && i > 0 && Math.abs(e.height - i) > .5;
+			if (O()) {
+				q(() => {
+					v.set(t, {
+						autoAlpha: 1,
+						x: 0,
+						y: 0,
+						clearProps: "height,overflow"
+					}), v.set(n, { autoAlpha: 1 });
+				});
+				return;
+			}
+			q(() => {
+				j = v.timeline({
+					defaults: {
+						ease: "power3.out",
+						overwrite: "auto"
+					},
+					onComplete: () => {
+						j = void 0, v.set(t, { clearProps: "height,overflow" });
+					}
+				}), s || c ? j?.fromTo(t, {
+					...s ? {
+						x: a,
+						y: o
+					} : {
+						x: 0,
+						y: 0
+					},
+					...c ? {
+						height: e.height,
+						overflow: "hidden"
+					} : {},
+					autoAlpha: 1,
+					force3D: !0
+				}, {
+					...s ? {
+						x: 0,
+						y: 0
+					} : {},
+					...c ? { height: i } : {},
+					autoAlpha: 1,
+					duration: s ? .32 : .18,
+					force3D: !0,
+					immediateRender: !0
+				}, 0) : v.set(t, {
+					autoAlpha: 1,
+					x: 0,
+					y: 0
+				}), n.length > 0 && j?.fromTo(n, { autoAlpha: 0 }, {
+					autoAlpha: 1,
+					duration: .14,
+					stagger: .014
+				}, c || s ? .035 : 0);
+			});
+		}
+		function Y(e = w.value) {
+			return rt(e).filter((e) => e.getAttribute("aria-disabled") !== "true" && !e.matches(":disabled"));
+		}
+		function X(e) {
+			let t = e.target, n = document.activeElement, r = t instanceof HTMLElement && t.matches("[data-bing-dropdown-item]") ? t : n;
+			if (!(r instanceof HTMLElement) || !et(r)) return w.value;
+			let i = r.closest("[role=\"menu\"]");
+			return i && et(i) ? i : w.value;
+		}
+		function ot(e) {
+			let t = e.target, n = document.activeElement, r = t instanceof HTMLElement && t.matches("[data-bing-dropdown-item]") ? t : n;
+			if (r instanceof HTMLElement) return r.closest("[data-bing-dropdown-item]") ?? void 0;
+		}
+		function st(e) {
+			let t = e?.getAttribute("aria-controls");
+			if (t) return document.getElementById(t) ?? void 0;
+			let n = e?.closest(".bing-dropdown-item-shell");
+			if (n) return Array.from(n.children).find((e) => e.classList.contains("bing-dropdown-item__submenu"));
+		}
+		function ct(e) {
+			return e?.id ? Array.from(document.querySelectorAll("[data-bing-dropdown-item]")).find((t) => t.getAttribute("aria-controls") === e.id) : (e?.closest(".bing-dropdown-item-shell"))?.querySelector(":scope > [data-bing-dropdown-item]");
+		}
+		function lt(e, t) {
+			let n = e.getBoundingClientRect().height - (t?.getBoundingClientRect().height ?? 0);
+			return Math.max(2, n);
+		}
+		function ut(e, t) {
+			let n = J().length, r = x.value === "sm" ? 28 : x.value === "lg" ? 36 : 32, i = n > 0 ? n * r + 8 : 0, a = t?.scrollHeight || i;
+			return lt(e, t) + a;
+		}
+		function Z() {
+			if (!R() || !C.value || !w.value) return;
+			let e = y.trigger === "contextmenu" ? 0 : 8, t = Me();
+			if (!t) return;
+			let n = w.value, r = n.querySelector(".bing-dropdown__body"), i = window.innerWidth, a = window.innerHeight, { align: o, side: s } = je(y.placement), c = n.getBoundingClientRect(), l = ut(n, r), te = Ae(y.minWidth, 228), ne = c.width || te, re = Math.max(0, i - 24), { side: u, left: ie, top: d } = ee({
+				anchor: t,
+				floating: {
+					width: Math.min(ne, re),
+					height: l
+				},
+				side: s,
+				align: o,
+				gap: e,
+				padding: 12,
+				viewport: {
+					width: i,
+					height: a
+				},
+				shiftMainAxis: s === "left" || s === "right"
+			});
+			k.value = {
+				align: o,
+				placement: u,
+				left: ie,
+				top: d
+			};
+		}
+		function dt() {
+			let e = w.value;
+			if (!e) return;
+			let t = J();
+			if (G(), K(), v.killTweensOf([e, ...t]), O()) {
+				q(() => {
+					v.set([e, ...t], {
+						autoAlpha: 1,
+						clearProps: "transform"
+					});
+				}), b("after-enter");
+				return;
+			}
+			q(() => {
+				A = r({
+					panel: e,
+					items: t,
+					actionRail: null,
+					actionButtons: [],
+					placement: k.value.placement,
+					align: k.value.align,
+					onComplete: () => {
+						A = void 0, y.autoFocus && P.value && Q(), b("after-enter");
+					}
+				});
+			});
+		}
+		function ft() {
+			let e = w.value;
+			if (!e || O()) {
+				pt();
+				return;
+			}
+			let t = J();
+			G(), K(), v.killTweensOf([e, ...t]), q(() => {
+				A = i({
+					panel: e,
+					items: t,
+					actionRail: null,
+					actionButtons: [],
+					placement: k.value.placement,
+					align: k.value.align,
+					onComplete: () => {
+						A = void 0, pt();
+					}
+				});
+			});
+		}
+		function pt() {
+			T.value = !1, Fe(), b("after-leave");
+		}
+		function mt() {
+			if (y.autoFocus) {
+				if (typeof window > "u") {
+					Q();
+					return;
+				}
+				window.requestAnimationFrame(() => {
+					P.value && !A && Q();
+				});
+			}
+		}
+		function Q() {
+			Y()[0]?.focus();
+		}
+		function ht(e, t = w.value) {
+			let n = Y(t);
+			if (n.length === 0) return;
+			let r = document.activeElement, i = n.findIndex((e) => e === r), a = (i === -1 ? e > 0 ? -1 : 0 : i) + e;
+			a = y.loop ? (a + n.length) % n.length : Math.max(0, Math.min(n.length - 1, a)), n[a]?.focus();
+		}
+		function $(e, t = w.value) {
+			let n = Y(t);
+			(e === "first" ? n[0] : n[n.length - 1])?.focus();
+		}
+		function gt(e) {
+			let t = st(e);
+			if (!t) return !1;
+			let n = Y(t)[0];
+			return n ? (n.focus(), !0) : !1;
+		}
+		function _t(e) {
+			if (!e || e === w.value) return !1;
+			let t = ct(e);
+			return t ? (t.focus(), !0) : !1;
+		}
+		function vt(e) {
+			if (!e.defaultPrevented && !(e.key === "Escape" && (e.defaultPrevented || !I.isTop(e)))) {
+				if (e.key === "Escape" && y.closeOnEscape) {
+					e.preventDefault(), e.stopPropagation(), V(!0);
+					return;
+				}
+				if (e.key === "ArrowDown") {
+					e.preventDefault(), ht(1, X(e));
+					return;
+				}
+				if (e.key === "ArrowUp") {
+					e.preventDefault(), ht(-1, X(e));
+					return;
+				}
+				if (e.key === "ArrowRight") {
+					gt(ot(e)) && e.preventDefault();
+					return;
+				}
+				if (e.key === "ArrowLeft") {
+					_t(X(e)) && e.preventDefault();
+					return;
+				}
+				if (e.key === "Home") {
+					e.preventDefault(), $("first", X(e));
+					return;
+				}
+				e.key === "End" && (e.preventDefault(), $("last", X(e)));
+			}
+		}
+		return oe({
+			openPanel: B,
+			close: V,
+			toggle: H,
+			focusFirstItem: Q
+		}), (e, t) => (m(), f("div", {
+			ref_key: "rootRef",
+			ref: C,
+			class: se(we.value)
+		}, [g(e.$slots, "trigger", {
+			open: P.value,
+			context: E.value,
+			openPanel: B,
+			triggerProps: Te.value,
+			getTriggerProps: Le,
+			close: V,
+			toggle: H
+		}, void 0, !0), fe(be) ? (m(), ie(re, {
+			key: 0,
+			to: "body"
+		}, [T.value ? (m(), f("div", {
+			key: 0,
+			ref_key: "panelRef",
+			ref: w,
+			class: se(Ee.value),
+			style: ce(ke.value),
+			"data-bing-dropdown-floating": S,
+			role: "menu",
+			"aria-label": l.ariaLabel,
+			onKeydown: vt,
+			onPointerenter: Je,
+			onPointerleave: Ye
+		}, [
+			e.$slots.header ? (m(), f("div", me, [g(e.$slots, "header", {}, void 0, !0)])) : d("", !0),
+			ae("div", he, [g(e.$slots, "default", {
+				context: E.value,
+				close: V
+			}, void 0, !0)]),
+			e.$slots.footer ? (m(), f("div", ge, [g(e.$slots, "footer", {}, void 0, !0)])) : d("", !0)
+		], 46, pe)) : d("", !0)])) : d("", !0)], 2));
+	}
+});
+//#endregion
+export { ve as default };

package/dist/components/BingDropDown/BingDropDownItem.js

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

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

@@ -10,9 +10,9 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<BingDr
     title: string;
     target: string;
     ariaLabel: string;
+    href: string;
     icon: import('vue').Component;
     tone: import('./BingDropDown.types').BingDropDownItemTone;
-    href: string;
     description: string;
     active: boolean;
     shortcut: string | string[];