@moubing/bing-ui 0.11.2 → 0.12.1

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

@@ -0,0 +1,308 @@
+import { useReducedMotion as e } from "../../motion/reducedMotion.js";
+import { createSelectPanelEnter as t, createSelectPanelLeave as n } from "../../motion/selectPanelMotion.js";
+import { enterLiquidHover as r, leaveLiquidHover as i, resetLiquidHover as a, setLiquidHoverOrigin as o } from "../../motion/liquidHover.js";
+import { useClickFeedback as ee } from "../../motion/useClickFeedback.js";
+import { ChevronRight as s } from "../../icons/icons.js";
+import c from "../BingIcon/BingIcon.js";
+import { useClientReady as te } from "../../utils/useClientReady.js";
+import { bingDropDownContextKey as ne } from "./BingDropDown.context.js";
+import { Teleport as re, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as ie, defineComponent as m, inject as ae, nextTick as oe, normalizeClass as h, normalizeStyle as se, onBeforeUnmount as ce, openBlock as g, ref as _, renderSlot as v, resolveDynamicComponent as le, toDisplayString as y, unref as b, useSlots as ue, watch as de, withCtx as fe } from "vue";
+import { gsap as x } from "gsap";
+//#region src/components/BingDropDown/BingDropDownItem.vue?vue&type=script&setup=true&lang.ts
+var pe = {
+	key: 0,
+	class: "bing-dropdown-item__prefix",
+	"aria-hidden": "true"
+}, me = { class: "bing-dropdown-item__content" }, he = { class: "bing-dropdown-item__title" }, ge = {
+	key: 0,
+	class: "bing-dropdown-item__description"
+}, _e = {
+	key: 1,
+	class: "bing-dropdown-item__suffix"
+}, ve = {
+	key: 1,
+	class: "bing-dropdown-item__shortcut"
+}, ye = ["data-bing-dropdown-floating"], be = 0, xe = /* @__PURE__ */ m({
+	__name: "BingDropDownItem",
+	props: {
+		title: { default: void 0 },
+		description: { default: void 0 },
+		shortcut: { default: void 0 },
+		icon: { default: void 0 },
+		href: { default: void 0 },
+		target: { default: void 0 },
+		rel: { default: void 0 },
+		tone: { default: "default" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		active: {
+			type: Boolean,
+			default: !1
+		},
+		closeOnClick: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: { default: void 0 }
+	},
+	emits: ["click"],
+	setup(m, { emit: xe }) {
+		let { playClickFeedback: Se } = ee(), S = m, Ce = xe, we = te(), C = ue(), w = ae(ne, null), T = _(), E = _(), D = _(), O = _(!1), k = _(!1), A = _(!1), j = _("right"), M = _({
+			left: 0,
+			top: 0
+		}), N, P = 0, F = !1, I, L, R = !1, z = !1, Te = `bing-dropdown-submenu-${++be}`, Ee = l(() => S.shortcut ? Array.isArray(S.shortcut) ? S.shortcut : [S.shortcut] : []), De = l(() => Ee.value.join("+")), Oe = l(() => !!(S.icon || C.prefix)), ke = l(() => !!(S.description || C.description)), B = l(() => !!C.submenu), Ae = l(() => !!(C.suffix || Ee.value.length > 0 || B.value)), je = l(() => S.closeOnClick ?? !B.value), V = l(() => !!(S.href && !S.disabled)), H = l(() => V.value ? "a" : "button"), Me = l(() => {
+			if (V.value) return S.rel ? S.rel : S.target === "_blank" ? "noreferrer noopener" : void 0;
+		}), Ne = l(() => ["bing-dropdown-item-shell", {
+			"has-submenu": B.value,
+			"is-submenu-visible": O.value
+		}]), Pe = l(() => [
+			"bing-dropdown-item",
+			`bing-dropdown-item--${S.tone}`,
+			{
+				"is-active": S.active,
+				"is-disabled": S.disabled,
+				"has-prefix": Oe.value,
+				"has-description": ke.value,
+				"has-suffix": Ae.value
+			}
+		]), Fe = l(() => [
+			"bing-dropdown-item__submenu",
+			`is-side-${j.value}`,
+			{ "is-visible": O.value }
+		]), Ie = l(() => ({
+			...w?.getGlassStyle() ?? {},
+			left: `${M.value.left}px`,
+			top: `${M.value.top}px`
+		}));
+		function U() {
+			return typeof window < "u" && typeof document < "u";
+		}
+		function Le(e, t, n) {
+			return Math.min(n, Math.max(t, e));
+		}
+		let Re = e();
+		function W() {
+			return !U() || Re();
+		}
+		function G() {
+			z = !1, E.value && a(E.value);
+		}
+		function ze(e) {
+			if (S.disabled || e.pointerType === "touch" || W()) {
+				G();
+				return;
+			}
+			!T.value || !E.value || (o(T.value, E.value, e), z || (z = !0, r(E.value)));
+		}
+		function Be() {
+			!z || !E.value || (z = !1, W() ? G() : i(E.value));
+		}
+		function K() {
+			!R || !O.value || S.disabled || (R = !1, document.activeElement === T.value && D.value?.querySelector("[data-bing-dropdown-item]:not([disabled]):not([aria-disabled=\"true\"])")?.focus());
+		}
+		function Ve(e) {
+			e.defaultPrevented || e.key !== "ArrowRight" || !B.value || S.disabled || (e.preventDefault(), e.stopPropagation(), R = !0, Se(e), Q(), oe(() => {
+				I || K();
+			}));
+		}
+		function q(e) {
+			let r = D.value;
+			if (I?.kill(), I = void 0, !r) return;
+			let i = Array.from(r.querySelectorAll("[data-bing-dropdown-item]"));
+			if (x.killTweensOf([r, ...i]), W()) {
+				x.set([r, ...i], { clearProps: "transform,opacity,visibility" }), e && K();
+				return;
+			}
+			let a = e ? t : n;
+			L ??= x.context(() => {}, r), L.add(() => {
+				I = a({
+					panel: r,
+					items: i,
+					actionRail: null,
+					actionButtons: [],
+					placement: j.value,
+					align: "start",
+					scale: !1,
+					onComplete: () => {
+						I = void 0, x.set([r, ...i], { clearProps: O.value ? "transform" : "transform,opacity,visibility" }), e && K();
+					}
+				});
+			});
+		}
+		function He(e) {
+			if (S.disabled) {
+				e.preventDefault();
+				return;
+			}
+			Ce("click", e), e.defaultPrevented || Se(e), !(!e.defaultPrevented && B.value) && !e.defaultPrevented && je.value && w?.close();
+		}
+		function J() {
+			!U() || N === void 0 || (window.clearTimeout(N), N = void 0);
+		}
+		function Y() {
+			!U() || !P || (window.cancelAnimationFrame(P), P = 0);
+		}
+		function X() {
+			!U() || !O.value || (Y(), P = window.requestAnimationFrame(() => {
+				P = 0, Ge();
+			}));
+		}
+		function Ue() {
+			!U() || F || (window.addEventListener("resize", X), window.addEventListener("scroll", X, !0), F = !0);
+		}
+		function We() {
+			!U() || !F || (window.removeEventListener("resize", X), window.removeEventListener("scroll", X, !0), F = !1);
+		}
+		function Ge() {
+			if (!U() || !T.value || !D.value) return;
+			let e = T.value.getBoundingClientRect(), t = D.value.getBoundingClientRect(), n = window.innerWidth, r = window.innerHeight, i = t.width || 220, a = t.height || 0, o = n - e.right - 12 - 12, ee = e.left - 12 - 12, s = o >= i || o >= ee, c = s ? e.right + 12 : e.left - i - 12, te = Math.max(12, n - 12 - i), ne = e.top - 6, re = Math.max(12, r - 12 - a);
+			j.value = s ? "right" : "left", M.value = {
+				left: Le(c, 12, te),
+				top: Le(ne, 12, re)
+			};
+		}
+		function Z() {
+			R = !1, O.value && (O.value = !1, q(!1), We(), Y());
+		}
+		function Q() {
+			!B.value || S.disabled || (J(), !O.value && (O.value = !0, oe(() => {
+				O.value && (Ge(), Ue(), q(!0));
+			})));
+		}
+		function $() {
+			if (!(!B.value || k.value || A.value)) {
+				if (J(), !U()) {
+					Z();
+					return;
+				}
+				N = window.setTimeout(() => {
+					N = void 0, !k.value && !A.value && Z();
+				}, 90);
+			}
+		}
+		function Ke() {
+			!B.value || S.disabled || (k.value = !0, Q());
+		}
+		function qe() {
+			B.value && (k.value = !1, A.value = !1, $());
+		}
+		function Je() {
+			!B.value || S.disabled || (A.value = !0, Q());
+		}
+		function Ye(e) {
+			if (!B.value) return;
+			let t = e.relatedTarget;
+			t instanceof Node && e.currentTarget.contains(t) || (A.value = !1, $());
+		}
+		function Xe() {
+			!B.value || S.disabled || (k.value = !0, J());
+		}
+		function Ze() {
+			B.value && (k.value = !1, $());
+		}
+		function Qe() {
+			!B.value || S.disabled || (A.value = !0, J());
+		}
+		function $e(e) {
+			if (!B.value) return;
+			let t = e.relatedTarget;
+			if (t instanceof Node && e.currentTarget instanceof HTMLElement) {
+				let n = T.value?.closest(".bing-dropdown-item-shell");
+				if (e.currentTarget.contains(t) || n?.contains(t)) return;
+			}
+			A.value = !1, $();
+		}
+		return de(() => S.disabled, (e) => {
+			e && (G(), Z());
+		}), ce(() => {
+			G(), I?.kill(), L?.revert(), J(), We(), Y();
+		}), (e, t) => (g(), f("div", {
+			class: h(Ne.value),
+			onPointerenter: Ke,
+			onPointerleave: qe,
+			onFocusin: Je,
+			onFocusout: Ye
+		}, [(g(), u(le(H.value), {
+			ref_key: "itemRef",
+			ref: T,
+			class: h(Pe.value),
+			"data-bing-dropdown-item": "",
+			role: "menuitem",
+			type: H.value === "button" ? "button" : void 0,
+			href: V.value ? m.href : void 0,
+			target: V.value ? m.target : void 0,
+			rel: Me.value,
+			disabled: H.value === "button" ? m.disabled : void 0,
+			tabindex: m.disabled ? -1 : void 0,
+			"aria-disabled": m.disabled || void 0,
+			"aria-current": m.active ? "true" : void 0,
+			"aria-label": m.ariaLabel,
+			"aria-haspopup": B.value ? "menu" : void 0,
+			"aria-expanded": B.value ? String(O.value) : void 0,
+			"aria-controls": B.value ? Te : void 0,
+			onClick: He,
+			onPointerenter: ze,
+			onPointermove: ze,
+			onPointerleave: Be,
+			onKeydown: Ve
+		}, {
+			default: fe(() => [
+				p("span", {
+					ref_key: "liquidRef",
+					ref: E,
+					class: "bing-dropdown-item__liquid",
+					"aria-hidden": "true"
+				}, null, 512),
+				Oe.value ? (g(), f("span", pe, [v(e.$slots, "prefix", {}, () => [m.icon ? (g(), u(c, {
+					key: 0,
+					icon: m.icon,
+					size: 16,
+					"stroke-width": 1.75
+				}, null, 8, ["icon"])) : d("", !0)], !0)])) : d("", !0),
+				p("span", me, [p("span", he, [v(e.$slots, "default", {}, () => [ie(y(m.title), 1)], !0)]), ke.value ? (g(), f("span", ge, [v(e.$slots, "description", {}, () => [ie(y(m.description), 1)], !0)])) : d("", !0)]),
+				Ae.value ? (g(), f("span", _e, [e.$slots.suffix ? v(e.$slots, "suffix", { key: 0 }, void 0, !0) : De.value ? (g(), f("span", ve, y(De.value), 1)) : d("", !0), B.value ? (g(), u(c, {
+					key: 2,
+					class: "bing-dropdown-item__submenu-icon",
+					icon: b(s),
+					size: "xs",
+					"stroke-width": 1.75
+				}, null, 8, ["icon"])) : d("", !0)])) : d("", !0)
+			]),
+			_: 3
+		}, 40, [
+			"class",
+			"type",
+			"href",
+			"target",
+			"rel",
+			"disabled",
+			"tabindex",
+			"aria-disabled",
+			"aria-current",
+			"aria-label",
+			"aria-haspopup",
+			"aria-expanded",
+			"aria-controls"
+		])), b(we) && B.value ? (g(), u(re, {
+			key: 0,
+			to: "body"
+		}, [p("div", {
+			id: Te,
+			ref_key: "submenuRef",
+			ref: D,
+			class: h(Fe.value),
+			style: se(Ie.value),
+			"data-bing-dropdown-floating": b(w)?.floatingId,
+			role: "menu",
+			onKeydown: t[0] ||= (e) => b(w)?.onMenuKeydown(e),
+			onPointerenter: Xe,
+			onPointerleave: Ze,
+			onFocusin: Qe,
+			onFocusout: $e
+		}, [v(e.$slots, "submenu", {}, void 0, !0)], 46, ye)])) : d("", !0)], 34));
+	}
+});
+//#endregion
+export { xe as default };

package/dist/components/BingFilePreview/BingFilePreview.js

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

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

@@ -2,26 +2,25 @@ import { BingFilePreviewCloseReason, BingFilePreviewFile, BingFilePreviewProps }
 declare const __VLS_export: import('vue').DefineComponent<BingFilePreviewProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     close: (reason: BingFilePreviewCloseReason) => any;
     error: (error: Error) => any;
-    "update:modelValue": (value: boolean) => any;
     download: (payload: import('./BingFilePreview.types').BingFilePreviewDownloadPayload) => any;
+    "update:modelValue": (value: boolean) => any;
     openExternal: (payload: import('./BingFilePreview.types').BingFilePreviewOpenExternalPayload) => any;
 }, string, import('vue').PublicProps, Readonly<BingFilePreviewProps> & Readonly<{
     onClose?: ((reason: BingFilePreviewCloseReason) => any) | undefined;
     onError?: ((error: Error) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onDownload?: ((payload: import('./BingFilePreview.types').BingFilePreviewDownloadPayload) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onOpenExternal?: ((payload: import('./BingFilePreview.types').BingFilePreviewOpenExternalPayload) => any) | undefined;
 }>, {
+    name: string;
     content: string;
     height: string | number;
     width: string | number;
-    zIndex: number;
     type: import('./BingFilePreview.types').BingFilePreviewKind;
     size: number;
     ariaLabel: string;
-    modelValue: boolean;
-    name: string;
     file: BingFilePreviewFile;
+    modelValue: boolean;
     glass: boolean;
     glassBlur: string | number;
     glassOpacity: number;