@moubing/bing-ui 0.11.1 → 0.12.0

package/dist/components/BingAnimatedText/BingAnimatedText.js

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

package/dist/components/BingAnimatedText/BingAnimatedText.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,194 @@
+import { useReducedMotion as e } from "../../motion/reducedMotion.js";
+import { computed as t, createElementBlock as n, createElementVNode as r, defineComponent as i, nextTick as a, normalizeClass as o, normalizeStyle as s, onMounted as c, onUnmounted as l, onUpdated as u, openBlock as d, ref as f, renderSlot as p, watch as m } from "vue";
+import { gsap as h } from "gsap";
+import { SplitText as g } from "gsap/SplitText";
+//#region src/components/BingAnimatedText/BingAnimatedText.vue?vue&type=script&setup=true&lang.ts
+var _ = /* @__PURE__ */ i({
+	__name: "BingAnimatedText",
+	props: {
+		effect: { default: "none" },
+		trigger: { default: "always" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		shineColor: { default: void 0 },
+		shineBaseColor: { default: void 0 },
+		shineSpeed: { default: 3 },
+		shineDelay: { default: 0 },
+		shineInterval: { default: 1.6 },
+		shineDirection: { default: "left" },
+		shineAngle: { default: 120 },
+		jumpY: { default: -6 },
+		jumpStagger: { default: .035 },
+		jumpDuration: { default: .34 },
+		jumpEase: { default: "power2.out" },
+		jumpReturnEase: { default: "back.out(2.4)" },
+		jumpRepeatDelay: { default: 1.2 }
+	},
+	setup(i) {
+		let _ = e({ onChange: () => X() }), v = !1, y = i, b = f(null), x = f(null), S = f(null), C, w, T, E, D, O = !1, k = !1, A = !1, j = "", M = t(() => y.effect !== "none" && !y.disabled), N = t(() => M.value && y.effect === "shine"), P = t(() => M.value && y.effect === "jump"), F = t(() => [
+			"bing-animated-text",
+			`bing-animated-text--${y.effect}`,
+			{
+				"is-disabled": y.disabled,
+				"is-shine-active": N.value,
+				[`bing-animated-text--shine-${y.trigger}`]: N.value,
+				[`bing-animated-text--shine-direction-${y.shineDirection}`]: N.value,
+				[`bing-animated-text--jump-${y.trigger}`]: P.value
+			}
+		]), I = t(() => {
+			let e = {};
+			return P.value && (e["--animated-text-jump-room"] = `${Math.max(2, Math.abs(Math.min(0, y.jumpY)) + 2)}px`), N.value ? (e["--animated-text-shine-angle"] = `${y.shineAngle}deg`, y.shineColor && (e["--animated-text-shine-color"] = y.shineColor), y.shineBaseColor && (e["--animated-text-shine-base-color"] = y.shineBaseColor), e) : e;
+		});
+		function L() {
+			return typeof window < "u" && typeof document < "u";
+		}
+		function R() {
+			v ||= (h.registerPlugin(g), !0);
+		}
+		function z() {
+			O = !1, b.value?.removeAttribute("data-jump-playing"), b.value?.removeAttribute("data-jump-ready"), T?.kill(), T = void 0, C?.revert(), C = void 0, w?.revert(), w = void 0, S.value?.replaceChildren();
+		}
+		function B() {
+			return y.shineDirection === "left" ? {
+				start: "150% 0",
+				end: "-150% 0"
+			} : {
+				start: "-150% 0",
+				end: "150% 0"
+			};
+		}
+		function V() {
+			k = !1, b.value?.removeAttribute("data-shine-playing"), E?.kill(), E = void 0, D?.kill(), D = void 0, x.value && h.set(x.value, { clearProps: "backgroundPosition" });
+		}
+		function H() {
+			y.trigger !== "always" || !N.value || _() || (D?.kill(), D = h.delayedCall(Math.max(0, y.shineInterval), () => {
+				D = void 0, U(0);
+			}));
+		}
+		function U(e = y.shineDelay) {
+			let t = x.value;
+			if (k || D || !t || !N.value || _()) return;
+			let n = B();
+			k = !0, b.value?.setAttribute("data-shine-playing", "true"), h.set(t, { backgroundPosition: n.start }), E = h.to(t, {
+				backgroundPosition: n.end,
+				duration: Math.max(.1, y.shineSpeed),
+				delay: Math.max(0, e),
+				ease: "none",
+				overwrite: !0,
+				onComplete: () => {
+					h.set(t, { backgroundPosition: n.start }), k = !1, E = void 0, b.value?.removeAttribute("data-shine-playing"), H();
+				}
+			});
+		}
+		function W() {
+			V(), !(!N.value || !x.value || _()) && (h.set(x.value, { backgroundPosition: B().start }), (y.trigger === "always" || y.trigger === "once") && U());
+		}
+		function G() {
+			if (O || !C?.chars.length || !P.value || _()) return;
+			let e = Math.max(.1, y.jumpDuration), t = y.trigger === "always";
+			O = !0, b.value?.setAttribute("data-jump-playing", "true"), T = h.timeline({
+				repeat: t ? -1 : 0,
+				repeatDelay: Math.max(0, y.jumpRepeatDelay),
+				onComplete: () => {
+					O = !1, T = void 0, b.value?.removeAttribute("data-jump-playing");
+				}
+			}), T.fromTo(C.chars, { y: 0 }, {
+				keyframes: [{
+					y: y.jumpY,
+					duration: e * .45,
+					ease: y.jumpEase
+				}, {
+					y: 0,
+					duration: e * .55,
+					ease: y.jumpReturnEase
+				}],
+				stagger: Math.max(0, y.jumpStagger),
+				overwrite: !0
+			});
+		}
+		function K() {
+			z();
+			let e = x.value, t = S.value, n = b.value;
+			j = e?.innerHTML ?? "", !(!P.value || !e || !t || !n || _()) && (R(), t.innerHTML = j, t.querySelectorAll("[id]").forEach((e) => e.removeAttribute("id")), w = h.context(() => {
+				C = g.create(t, {
+					type: "words, chars",
+					tag: "span",
+					aria: "hidden",
+					wordsClass: "bing-animated-text__word",
+					charsClass: "bing-animated-text__char"
+				}), C.words.forEach((e) => {
+					/[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}]/u.test(e.textContent ?? "") && e.classList.add("bing-animated-text__word--breakable");
+				}), h.set(C.chars, {
+					display: "inline-block",
+					transformOrigin: "50% 100%",
+					willChange: "transform"
+				}), n.setAttribute("data-jump-ready", "true"), (y.trigger === "always" || y.trigger === "once") && G();
+			}, n));
+		}
+		function q() {
+			!L() || A || (A = !0, a(() => {
+				A = !1, b.value && K();
+			}));
+		}
+		function J() {
+			L() && a(() => {
+				W();
+			});
+		}
+		function Y() {
+			y.trigger === "hover" && (N.value && U(), P.value && G());
+		}
+		m(() => [
+			y.effect,
+			y.trigger,
+			y.disabled,
+			y.shineSpeed,
+			y.shineDelay,
+			y.shineInterval,
+			y.shineDirection,
+			y.shineAngle,
+			y.shineColor,
+			y.shineBaseColor
+		], J, { flush: "post" }), m(() => [
+			y.effect,
+			y.trigger,
+			y.disabled,
+			y.jumpY,
+			y.jumpStagger,
+			y.jumpDuration,
+			y.jumpEase,
+			y.jumpReturnEase,
+			y.jumpRepeatDelay
+		], q, { flush: "post" }), c(() => {
+			J(), q();
+		}), u(() => {
+			x.value?.innerHTML !== j && q();
+		}), l(() => {
+			V(), z();
+		});
+		function X() {
+			J(), q();
+		}
+		return (e, t) => (d(), n("span", {
+			ref_key: "rootRef",
+			ref: b,
+			class: o(F.value),
+			style: s(I.value),
+			onMouseenter: Y
+		}, [r("span", {
+			ref_key: "contentRef",
+			ref: x,
+			class: "bing-animated-text__content"
+		}, [p(e.$slots, "default", {}, void 0, !0)], 512), r("span", {
+			ref_key: "jumpContentRef",
+			ref: S,
+			class: "bing-animated-text__jump-layer",
+			"aria-hidden": "true",
+			inert: ""
+		}, null, 512)], 38));
+	}
+});
+//#endregion
+export { _ as default };

package/dist/components/BingAppSwitcherTransition/BingAppSwitcherTransition.js

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

package/dist/components/BingAppSwitcherTransition/BingAppSwitcherTransition.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,244 @@
+import { useReducedMotion as e } from "../../motion/reducedMotion.js";
+import t from "../BingTabs/BingTabs.js";
+import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, nextTick as u, normalizeClass as d, onBeforeUnmount as f, onBeforeUpdate as p, onMounted as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, watch as b } from "vue";
+import { gsap as x } from "gsap";
+//#region src/components/BingAppSwitcherTransition/BingAppSwitcherTransition.vue?vue&type=script&setup=true&lang.ts
+var S = ["aria-hidden"], C = /* @__PURE__ */ l({
+	__name: "BingAppSwitcherTransition",
+	props: {
+		modelValue: { default: void 0 },
+		items: { default: () => [] },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		respectReducedMotion: {
+			type: Boolean,
+			default: !0
+		},
+		loop: {
+			type: Boolean,
+			default: !0
+		},
+		showTabs: {
+			type: Boolean,
+			default: !0
+		},
+		ariaLabel: { default: "应用切换面板" }
+	},
+	emits: ["update:modelValue", "change"],
+	setup(l, { emit: C }) {
+		let w = e(), T = l, E = C, D = g([]), O = g(null), k = g(!1), A = g(void 0), j, M = 0, N, P, F = r(() => T.items.filter((e) => !e.disabled)), I = r(() => F.value[0]), L = r(() => T.modelValue !== void 0), R = r(() => L.value ? T.modelValue : A.value ?? I.value?.value), z = r(() => {
+			let e = T.items.findIndex((e) => Object.is(e.value, R.value));
+			return e >= 0 ? e : 0;
+		}), B = r(() => T.items.map((e) => ({
+			...e,
+			value: e.value,
+			label: e.label,
+			disabled: T.disabled || e.disabled
+		})));
+		function V() {
+			return typeof window < "u";
+		}
+		function H() {
+			return T.disabled || T.respectReducedMotion && w();
+		}
+		function U(e) {
+			let t = T.items.length;
+			return t === 0 ? 0 : T.loop ? (e + t) % t : Math.min(Math.max(e, 0), t - 1);
+		}
+		function W(e, t) {
+			let n = e - t, r = T.items.length;
+			return r === 0 ? 0 : (n > r / 2 && (n -= r), n < r / -2 && (n += r), n);
+		}
+		function G(e, t, n = t) {
+			let r = W(e, t), i = Math.abs(r), a = e === n;
+			return {
+				xPercent: r * 58,
+				y: 30 + i * 3,
+				scale: a ? .68 : .6,
+				rotation: r * -1.4,
+				opacity: a ? .98 : Math.max(.46, .66 - i * .1),
+				zIndex: a ? 18 : 10 - i,
+				force3D: !0
+			};
+		}
+		function K(e, t) {
+			let n = W(e, t), r = Math.abs(n);
+			return {
+				xPercent: n * 116,
+				y: r === 0 ? 0 : 22,
+				scale: r === 0 ? 1 : .78,
+				rotation: n * -1.4,
+				opacity: +(r === 0),
+				zIndex: r === 0 ? 24 : 5 - r,
+				force3D: !0
+			};
+		}
+		function q(e, t) {
+			e instanceof HTMLElement && (D.value[t] = e);
+		}
+		function J(e) {
+			let t = T.items[e];
+			if (!t || T.disabled || t.disabled || Object.is(t.value, R.value)) return !1;
+			let n = R.value, r = T.items.find((e) => Object.is(e.value, n));
+			return P = t.value, L.value || (A.value = t.value), E("update:modelValue", t.value), E("change", {
+				value: t.value,
+				previousValue: n,
+				item: t,
+				previousItem: r
+			}), !0;
+		}
+		function Y(e = z.value, t = !1) {
+			let n = t || H() ? 0 : .32;
+			j?.kill(), j = x.timeline({
+				defaults: {
+					duration: n,
+					ease: "power3.out",
+					overwrite: "auto"
+				},
+				onStart: () => {
+					k.value = !0;
+				},
+				onComplete: () => {
+					k.value = !1, j = void 0;
+				},
+				onInterrupt: () => {
+					k.value = !1;
+				}
+			}), D.value.forEach((t, n) => {
+				j?.to(t, K(n, e), 0);
+			});
+		}
+		function X(e, t) {
+			let n = W(e, t) >= 0 ? 1 : -1;
+			if (H()) {
+				Y(e, !0);
+				return;
+			}
+			j?.kill(), k.value = !0, j = x.timeline({
+				defaults: { overwrite: "auto" },
+				onComplete: () => {
+					k.value = !1, j = void 0;
+				},
+				onInterrupt: () => {
+					k.value = !1;
+				}
+			}), O.value && j.to(O.value, {
+				x: n * -10,
+				scale: .996,
+				duration: .16,
+				ease: "power2.out",
+				force3D: !0
+			}, 0).to(O.value, {
+				x: 0,
+				scale: 1,
+				duration: .5,
+				ease: "expo.out",
+				force3D: !0
+			}, .18), D.value.forEach((e, n) => {
+				j?.to(e, {
+					...G(n, t, t),
+					duration: .2,
+					ease: "power3.out"
+				}, 0);
+			}), D.value.forEach((t, n) => {
+				j?.to(t, {
+					...G(n, e, e),
+					duration: .34,
+					ease: "power3.inOut"
+				}, .1);
+			}), D.value.forEach((t, n) => {
+				let r = K(n, e), i = n === e;
+				j?.to(t, {
+					...r,
+					duration: i ? .48 : .32,
+					ease: i ? "expo.out" : "power3.out"
+				}, i ? .3 : .34);
+			});
+		}
+		function Z(e) {
+			let t = U(e), n = z.value;
+			t === z.value || k.value || !J(t) || X(t, n);
+		}
+		function Q(e) {
+			Z(T.items.findIndex((t) => Object.is(t.value, e)));
+		}
+		function $(e) {
+			e.defaultPrevented || T.disabled || Math.abs(e.deltaX) <= Math.abs(e.deltaY) || (e.preventDefault(), !(k.value || !V()) && (M += e.deltaX, N && window.clearTimeout(N), N = window.setTimeout(() => {
+				let e = M > 0 ? 1 : -1, t = Math.abs(M) > 34;
+				M = 0, N = void 0, t && Z(z.value + e);
+			}, 58)));
+		}
+		return p(() => {
+			D.value = [];
+		}), m(() => {
+			u().then(() => {
+				D.value.forEach((e) => {
+					x.set(e, {
+						transformOrigin: "50% 50%",
+						willChange: "transform, opacity",
+						force3D: !0
+					});
+				}), Y(z.value, !0);
+			});
+		}), f(() => {
+			j?.kill(), x.killTweensOf(D.value), O.value && x.killTweensOf(O.value), N && V() && window.clearTimeout(N);
+		}), b(R, (e, t) => {
+			if (e === void 0) return;
+			if (Object.is(e, P)) {
+				P = void 0;
+				return;
+			}
+			let n = T.items.findIndex((t) => Object.is(t.value, e));
+			if (n < 0) return;
+			let r = T.items.findIndex((e) => Object.is(e.value, t));
+			u().then(() => {
+				if (r < 0) {
+					Y(n, !0);
+					return;
+				}
+				X(n, r);
+			});
+		}), (e, r) => (h(), o("section", {
+			class: d(["bing-app-switcher-transition", { "is-disabled": l.disabled }]),
+			onWheel: $
+		}, [s("div", {
+			ref_key: "stageRef",
+			ref: O,
+			class: "bing-app-switcher-transition__stage"
+		}, [(h(!0), o(n, null, _(l.items, (t, n) => (h(), o("article", {
+			key: String(t.value),
+			ref_for: !0,
+			ref: (e) => q(e, n),
+			class: d(["bing-app-switcher-transition__card", { "is-active": Object.is(R.value, t.value) }]),
+			"aria-hidden": !Object.is(R.value, t.value)
+		}, [v(e.$slots, "default", {
+			item: t,
+			index: n,
+			active: Object.is(R.value, t.value),
+			isAnimating: k.value
+		}, () => [c(y(t.label), 1)], !0)], 10, S))), 128))], 512), l.showTabs ? (h(), i(t, {
+			key: 0,
+			items: B.value,
+			"model-value": R.value,
+			variant: "glass",
+			size: "md",
+			block: "",
+			disabled: l.disabled,
+			loop: l.loop,
+			"respect-reduced-motion": l.respectReducedMotion,
+			"aria-label": l.ariaLabel,
+			"onUpdate:modelValue": Q
+		}, null, 8, [
+			"items",
+			"model-value",
+			"disabled",
+			"loop",
+			"respect-reduced-motion",
+			"aria-label"
+		])) : a("", !0)], 34));
+	}
+});
+//#endregion
+export { C as default };

package/dist/components/BingAutocomplete/BingAutocomplete.js

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

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

@@ -1,17 +1,17 @@
 import { BingAutocompleteExpose, BingAutocompleteOption, BingAutocompleteProps, BingAutocompleteSlots } from './BingAutocomplete.types';
 type __VLS_Slots = BingAutocompleteSlots;
 declare const __VLS_base: import('vue').DefineComponent<BingAutocompleteProps, BingAutocompleteExpose, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
+    open: () => any;
     clear: () => any;
     select: (option: BingAutocompleteOption) => any;
-    close: () => any;
     "update:modelValue": (value: string) => any;
-    open: () => any;
 }, string, import('vue').PublicProps, Readonly<BingAutocompleteProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
     onClear?: (() => any) | undefined;
     onSelect?: ((option: BingAutocompleteOption) => any) | undefined;
-    onClose?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    onOpen?: (() => any) | undefined;
 }>, {
     disabled: boolean;
     filter: boolean;