@moubing/bing-ui 0.11.2 → 0.12.0

package/dist/motion/optionDetailMotion.js

@@ -0,0 +1,74 @@
+import { gsap as e } from "gsap";
+//#region src/motion/optionDetailMotion.ts
+function t(e) {
+	let t = window.devicePixelRatio || 1;
+	return Math.round(e * t) / t;
+}
+function n(t) {
+	if (!t || (Number(e.getProperty(t, "autoAlpha")) || 0) <= .01) return;
+	let n = t.getBoundingClientRect();
+	if (!(n.width <= 0 || n.height <= 0)) return {
+		height: n.height,
+		left: n.left,
+		top: n.top,
+		width: n.width
+	};
+}
+function r({ panel: r, content: i, getTarget: a, animateContent: o = !1, previousSnapshot: s, reducedMotion: c = !1, hiddenScale: l = .96, enterEase: u = "back.out(1.5)", force3D: d, onComplete: f }) {
+	if (!r) return;
+	let p = !!r.style.height;
+	p && !s && (s = n(r)), (s || p) && (e.killTweensOf(r), e.set(r, { clearProps: "width,height,overflow" }));
+	let m = a();
+	if (!m) return;
+	let h = Number(e.getProperty(r, "autoAlpha")) || 0, g = h > .01 || !!s, _ = r.getBoundingClientRect(), v = s ?? _, y = {
+		height: _.height,
+		width: _.width
+	}, b = !!s && g && (o || p) && y.width > 0 && y.height > 0 && (Math.abs((s?.width ?? 0) - y.width) > .5 || Math.abs((s?.height ?? 0) - y.height) > .5), x = g ? t(v.left - m.x) : m.placement === "right" ? -8 : 8, S = g ? t(v.top - m.y) : 0, C = b ? .32 : g ? .26 : .22, w = b ? "power2.out" : g ? "power3.out" : u;
+	return e.killTweensOf(r), r.style.left = `${m.x}px`, r.style.top = `${m.y}px`, c ? (e.set(r, {
+		autoAlpha: 1,
+		clearProps: "transform,width,height,overflow",
+		willChange: "auto"
+	}), i && (e.killTweensOf(i), e.set(i, { clearProps: "transform,opacity,visibility" })), f?.(), m) : (e.set(r, {
+		autoAlpha: g ? h : 0,
+		scale: g ? 1 : l,
+		...d === void 0 ? {} : { force3D: d },
+		x,
+		y: S,
+		...b && s ? {
+			height: s.height,
+			overflow: "hidden",
+			width: s.width
+		} : {},
+		willChange: b ? "opacity, transform, width, height" : "opacity, transform"
+	}), e.to(r, {
+		autoAlpha: 1,
+		scale: 1,
+		x: 0,
+		y: 0,
+		...b ? {
+			height: y.height,
+			width: y.width
+		} : {},
+		duration: C,
+		ease: w,
+		overwrite: !0,
+		onComplete: () => {
+			e.set(r, {
+				clearProps: "transform,width,height,overflow",
+				willChange: "auto"
+			}), f?.();
+		}
+	}), o && i && (e.killTweensOf(i), e.fromTo(i, {
+		autoAlpha: .72,
+		y: 3
+	}, {
+		autoAlpha: 1,
+		y: 0,
+		duration: .18,
+		ease: "power2.out",
+		overwrite: !0,
+		clearProps: "transform,opacity,visibility"
+	})), m);
+}
+//#endregion
+export { n as getOptionDetailSnapshot, r as moveOptionDetailPanel };

package/dist/motion/panelMotion.js

@@ -0,0 +1,19 @@
+//#region src/motion/panelMotion.ts
+var e = {
+	duration: .18,
+	ease: "power3.out"
+}, t = {
+	duration: .16,
+	ease: "power2.in"
+};
+function n(e) {
+	let t = e === "left" || e === "right";
+	return {
+		x: t ? e === "left" ? 8 : -8 : 0,
+		y: t ? 0 : e === "bottom" ? -8 : 8,
+		scale: .985,
+		transformOrigin: t ? e === "left" ? "100% 50%" : "0% 50%" : e === "bottom" ? "50% 0%" : "50% 100%"
+	};
+}
+//#endregion
+export { n as getPanelHiddenTransform, e as panelEnterMotion, t as panelLeaveMotion };

package/dist/motion/reducedMotion.d.ts

@@ -0,0 +1,16 @@
+import { BingReducedMotion } from '../utils/config';
+type MediaQueryHost = Pick<Window, 'matchMedia'>;
+/** 读取系统的减少动效设置；SSR 环境返回 false。每次调用都实时查询，不做缓存。 */
+export declare function prefersReducedMotion(view?: MediaQueryHost | null | undefined): boolean;
+/** 按全局策略解析是否减少动效；`view` 用于 iframe 等非当前窗口的文档。 */
+export declare function resolveReducedMotion(mode: BingReducedMotion, view?: MediaQueryHost | null): boolean;
+export interface UseReducedMotionOptions {
+    /** 系统设置或全局 `reducedMotion` 配置变化时调用，用于重建常驻动画。 */
+    onChange?: () => void;
+}
+/**
+ * 结合 BingConfigProvider 的 `reducedMotion` 与系统设置，返回实时判断函数。
+ * 必须在组件 setup 中调用。
+ */
+export declare function useReducedMotion(options?: UseReducedMotionOptions): (view?: MediaQueryHost | null) => boolean;
+export {};

package/dist/motion/reducedMotion.js

@@ -0,0 +1,28 @@
+import { useBingConfig as e } from "../utils/config.js";
+import { getCurrentInstance as t, onBeforeUnmount as n, onMounted as r, watch as i } from "vue";
+//#region src/motion/reducedMotion.ts
+var a = "(prefers-reduced-motion: reduce)";
+function o() {
+	return typeof window > "u" ? void 0 : window;
+}
+function s(e = o()) {
+	return !!(e && typeof e.matchMedia == "function" && e.matchMedia(a)?.matches);
+}
+function c(e, t) {
+	return e === "always" ? !0 : e === "never" ? !1 : s(t === void 0 ? o() : t);
+}
+function l(s = {}) {
+	let l = e(), u = (e) => c(l.reducedMotion.value, e), { onChange: d } = s;
+	if (d && t()) {
+		let e;
+		i(l.reducedMotion, () => d()), r(() => {
+			let t = o();
+			e = typeof t?.matchMedia == "function" ? t.matchMedia(a) : void 0, e?.addEventListener?.("change", d);
+		}), n(() => {
+			e?.removeEventListener?.("change", d), e = void 0;
+		});
+	}
+	return u;
+}
+//#endregion
+export { s as prefersReducedMotion, l as useReducedMotion };

package/dist/motion/selectPanelMotion.js

@@ -0,0 +1,115 @@
+import { gsap as e } from "gsap";
+//#region src/motion/selectPanelMotion.ts
+function t(e, t) {
+	return e === "top" ? {
+		x: 0,
+		y: t
+	} : e === "bottom" ? {
+		x: 0,
+		y: -t
+	} : e === "left" ? {
+		x: t,
+		y: 0
+	} : {
+		x: -t,
+		y: 0
+	};
+}
+function n(e, t) {
+	return e === "left" || e === "right" ? { scaleX: t } : { scaleY: t };
+}
+function r(e, t) {
+	let n = t === "middle" ? "50%" : t === "end" ? "100%" : "0%";
+	return e === "top" ? `${n} 100%` : e === "bottom" ? `${n} 0%` : e === "left" ? `100% ${n}` : `0% ${n}`;
+}
+function i(e, t) {
+	return t.getBoundingClientRect().left < e.getBoundingClientRect().left ? 8 : -8;
+}
+function a({ panel: a, items: o, actionRail: s, actionButtons: c, placement: l, align: u, scale: d = !0, onComplete: f }) {
+	let p = l === "left" || l === "right" ? 6 : -6, m = d ? {} : { force3D: !1 }, h = e.timeline({
+		defaults: {
+			duration: .22,
+			ease: "power3.out",
+			overwrite: !0
+		},
+		onComplete: f
+	});
+	if (h.fromTo(a, {
+		autoAlpha: 0,
+		...t(l, 8),
+		...n(l, d ? .96 : 1),
+		...m,
+		transformOrigin: r(l, u)
+	}, {
+		autoAlpha: 1,
+		x: 0,
+		y: 0,
+		...n(l, 1),
+		duration: .24,
+		ease: "power3.out"
+	}, 0), o.length && h.fromTo(o, {
+		autoAlpha: 0,
+		...t(l, p),
+		scale: d ? .98 : 1,
+		...m
+	}, {
+		autoAlpha: 1,
+		x: 0,
+		y: 0,
+		scale: 1,
+		duration: .22,
+		stagger: .022
+	}, .06), s) {
+		let t = i(a, s);
+		e.set(s, { autoAlpha: 1 }), h.fromTo(c, {
+			autoAlpha: 0,
+			x: t,
+			scale: .72,
+			transformOrigin: "50% 50%"
+		}, {
+			autoAlpha: 1,
+			x: 0,
+			scale: 1,
+			duration: .26,
+			ease: "back.out(1.8)",
+			stagger: .055
+		}, .08);
+	}
+	return h;
+}
+function o({ panel: r, items: a, actionRail: o, actionButtons: s, placement: c, scale: l = !0, onComplete: u }) {
+	let d = e.timeline({
+		defaults: {
+			duration: .16,
+			ease: "power2.in",
+			overwrite: !0
+		},
+		onComplete: u
+	});
+	return a.length && d.to(a, {
+		autoAlpha: 0,
+		...t(c, 4),
+		duration: .1,
+		stagger: {
+			each: .01,
+			from: "end"
+		}
+	}, 0), d.to(r, {
+		autoAlpha: 0,
+		...t(c, 6),
+		...n(c, l ? .97 : 1),
+		duration: .16
+	}, 0), o && (d.to(s, {
+		autoAlpha: 0,
+		x: i(r, o),
+		scale: .72,
+		duration: .14,
+		ease: "power2.in",
+		stagger: {
+			each: .045,
+			from: "end"
+		}
+	}, 0), d.set(o, { autoAlpha: 0 }, ">")), d;
+}
+//#endregion
+export { a as createSelectPanelEnter, o as createSelectPanelLeave };

package/dist/motion/smoothScroll.d.ts

@@ -30,6 +30,8 @@ export interface SmoothScrollControllerOptions {
     getOptions?: () => SmoothScrollOptions | undefined;
     getAxes?: () => SmoothScrollAxes;
     isEnabled?: () => boolean;
+    /** 是否减少动效；默认只读取系统设置。 */
+    prefersReducedMotion?: () => boolean;
 }
 export interface SmoothScrollController {
     cancel: () => void;

package/dist/motion/smoothScroll.js

@@ -0,0 +1,276 @@
+import { prefersReducedMotion as e } from "./reducedMotion.js";
+//#region src/motion/smoothScroll.ts
+var t = /^(auto|scroll|overlay)$/, n = [
+	"button",
+	"input",
+	"select",
+	"textarea",
+	"video",
+	"audio",
+	"[contenteditable=\"true\"]",
+	"[role=\"textbox\"]"
+].join(","), r = Object.freeze({
+	duration: 400,
+	stepSize: 100,
+	pulseScale: 4,
+	accelerationDelta: 50,
+	accelerationMax: 3,
+	keyboardStep: 50,
+	keyboard: !0,
+	smoothTouchpad: !1,
+	respectReducedMotion: !0
+}), i = Object.freeze({
+	duration: 280,
+	stepSize: 72,
+	pulseScale: 4,
+	accelerationDelta: 50,
+	accelerationMax: 2,
+	keyboard: !1,
+	smoothTouchpad: !1,
+	respectReducedMotion: !0
+});
+function a(e, t = {}, n = {}) {
+	return e === !1 ? !1 : {
+		...t,
+		...typeof e == "object" ? e : {},
+		...n
+	};
+}
+function o(e, t, n) {
+	return Number.isFinite(e) ? Math.max(n, e) : t;
+}
+function s(e) {
+	return {
+		duration: o(e?.duration, r.duration, 0),
+		stepSize: o(e?.stepSize, r.stepSize, 0),
+		pulseScale: o(e?.pulseScale, r.pulseScale, .1),
+		accelerationDelta: o(e?.accelerationDelta, r.accelerationDelta, 0),
+		accelerationMax: o(e?.accelerationMax, r.accelerationMax, 1),
+		keyboardStep: o(e?.keyboardStep, r.keyboardStep, 0),
+		keyboard: e?.keyboard ?? r.keyboard,
+		smoothTouchpad: e?.smoothTouchpad ?? r.smoothTouchpad,
+		respectReducedMotion: e?.respectReducedMotion ?? r.respectReducedMotion
+	};
+}
+function c(e, t) {
+	let n = e * t;
+	if (n < 1) return n - (1 - Math.exp(-n));
+	let r = Math.exp(-1);
+	return r + (1 - Math.exp(-(n - 1))) * (1 - r);
+}
+function l(e, t = r.pulseScale) {
+	if (e <= 0) return 0;
+	if (e >= 1) return 1;
+	let n = Math.max(.1, t);
+	return c(e, n) / c(1, n);
+}
+function u() {
+	return typeof window < "u" && typeof document < "u";
+}
+function d() {
+	return typeof performance < "u" && typeof performance.now == "function" ? performance.now() : Date.now();
+}
+function f(e, t, n) {
+	return Math.min(n, Math.max(t, e));
+}
+function p(e) {
+	return e === 0 ? 0 : e > 0 ? 1 : -1;
+}
+function m(e, t, n) {
+	if (n === 0) return !1;
+	if (t === "x") {
+		let t = Math.max(0, e.scrollWidth - e.clientWidth);
+		return t > 0 && (n < 0 ? e.scrollLeft > 0 : e.scrollLeft < t - .5);
+	}
+	let r = Math.max(0, e.scrollHeight - e.clientHeight);
+	return r > 0 && (n < 0 ? e.scrollTop > 0 : e.scrollTop < r - .5);
+}
+function h(e) {
+	let t = e.composedPath?.()[0] ?? e.target;
+	return t instanceof Element ? t : null;
+}
+function g(e) {
+	if (e.parentElement) return e.parentElement;
+	let t = e.getRootNode?.();
+	return t && "host" in t && t.host instanceof Element ? t.host : null;
+}
+function _(e, n, r, i) {
+	let a = h(e);
+	for (; a && a !== n;) {
+		if (a instanceof HTMLElement) {
+			let e = r !== 0 && m(a, "x", r), n = i !== 0 && m(a, "y", i);
+			if (!e && !n) {
+				a = g(a);
+				continue;
+			}
+			let o = window.getComputedStyle(a), s = o.overflowX || a.style.overflowX || a.style.overflow, c = o.overflowY || a.style.overflowY || a.style.overflow, l = e && t.test(s), u = n && t.test(c);
+			if (l || u) return !0;
+		}
+		a = g(a);
+	}
+	return !1;
+}
+function v(e, t, n) {
+	let r = e, i = e.deltaX || -Number(r.wheelDeltaX || 0), a = e.deltaY || -Number(r.wheelDeltaY || 0);
+	return !i && !a && (a = -Number(r.wheelDelta || 0)), e.deltaMode === WheelEvent.DOM_DELTA_LINE ? (i *= 40, a *= 40) : e.deltaMode === WheelEvent.DOM_DELTA_PAGE && (i *= Math.max(1, t.clientWidth), a *= Math.max(1, t.clientHeight)), e.shiftKey && n.horizontal && Math.abs(a) > Math.abs(i) && (i = a, a = 0), n.horizontal || (i = 0), n.vertical || (a = 0), {
+		x: i,
+		y: a
+	};
+}
+function y(e, t) {
+	return Math.abs(e) > 1.2 ? t / 120 * e : e;
+}
+function b(e) {
+	let t = h(e);
+	return t instanceof HTMLElement && !!t.closest(n);
+}
+function x(t) {
+	let n = t.prefersReducedMotion ?? (() => e()), r = [], i, a = 0, o = 0, c = 0, h = [], g = 0, x = 0;
+	function S() {
+		return s(t.getOptions?.());
+	}
+	function C() {
+		return t.getAxes?.() ?? {
+			horizontal: !0,
+			vertical: !0
+		};
+	}
+	function w() {
+		return t.isEnabled?.() ?? !0;
+	}
+	function T() {
+		!u() || i === void 0 || (window.cancelAnimationFrame(i), i = void 0);
+	}
+	function E() {
+		T(), r = [], a = 0, o = 0, c = 0, g = 0, x = 0;
+	}
+	function D(e, t, n) {
+		if (t !== 0 || g !== 0) {
+			let n = Math.max(0, e.scrollWidth - e.clientWidth), r = f(e.scrollLeft + t + g, 0, n);
+			e.scrollLeft = r, g = r - e.scrollLeft;
+		}
+		if (n !== 0 || x !== 0) {
+			let t = Math.max(0, e.scrollHeight - e.clientHeight), r = f(e.scrollTop + n + x, 0, t);
+			e.scrollTop = r, x = r - e.scrollTop;
+		}
+	}
+	function O() {
+		i = void 0;
+		let e = t.getElement();
+		if (!e || !w()) {
+			E();
+			return;
+		}
+		let n = d(), a = 0, s = 0;
+		if (r.forEach((e) => {
+			let t = n - e.start, r = e.duration === 0 || t >= e.duration ? 1 : l(t / e.duration, e.pulseScale), i = e.x * r, o = e.y * r;
+			a += i - e.lastX, s += o - e.lastY, e.lastX = i, e.lastY = o;
+		}), r = r.filter((e) => n - e.start < e.duration), D(e, a, s), r.length > 0) {
+			i = window.requestAnimationFrame(O);
+			return;
+		}
+		o = 0, c = 0, g = 0, x = 0;
+	}
+	function k() {
+		if (!(!u() || i !== void 0)) {
+			if (typeof window.requestAnimationFrame != "function") {
+				O();
+				return;
+			}
+			i = window.requestAnimationFrame(O);
+		}
+	}
+	function A(e, n) {
+		let i = t.getElement();
+		if (!i || !e && !n) return !1;
+		let s = S(), l = p(e), f = p(n);
+		(l !== 0 && o !== 0 && l !== o || f !== 0 && c !== 0 && f !== c) && E();
+		let m = d(), h = a ? m - a : Infinity, g = 1;
+		s.accelerationDelta > 0 && h < s.accelerationDelta && (g = Math.min((1 + s.accelerationDelta / Math.max(1, h)) / 2, s.accelerationMax));
+		let _ = e * g, v = n * g;
+		return o = p(_) || o, c = p(v) || c, a = m, s.duration === 0 || !u() || typeof window.requestAnimationFrame != "function" ? (D(i, _, v), !0) : (r.push({
+			x: _,
+			y: v,
+			lastX: 0,
+			lastY: 0,
+			start: m,
+			duration: s.duration,
+			pulseScale: s.pulseScale
+		}), k(), !0);
+	}
+	function j(e) {
+		return h.length === 3 && h.every((t) => t % e === 0);
+	}
+	function M(e, t) {
+		if (e.deltaMode !== WheelEvent.DOM_DELTA_PIXEL) return !1;
+		let n = e, r = n.wheelDeltaX || 0, i = n.wheelDeltaY || 0, a = Math.abs(i) >= Math.abs(r), o = (a ? i : r) || n.wheelDelta || 0, s = a ? e.deltaY : e.deltaX;
+		if (Math.abs(o) >= 24 && o * s < 0 && Math.abs(Math.abs(o) - Math.abs(s) * 1.2) < 1) return !1;
+		let c = Math.abs(o || t);
+		if (!c) return !1;
+		h.length === 0 && (h = [
+			c,
+			c,
+			c
+		]), h.push(c), h.shift();
+		let l = c > 120 && j(c);
+		return !j(120) && !j(100) && !l;
+	}
+	function N(e) {
+		let n = t.getElement();
+		if (!n) return null;
+		let r = S(), i = v(e, n, C()), a = Math.abs(i.y) >= Math.abs(i.x) ? i.y : i.x;
+		if (!r.smoothTouchpad && M(e, a)) return null;
+		let o = y(i.x, r.stepSize), s = y(i.y, r.stepSize);
+		return o && !m(n, "x", o) && (o = 0), s && !m(n, "y", s) && (s = 0), !o && !s || _(e, n, o, s) ? null : {
+			x: o,
+			y: s
+		};
+	}
+	function P(e) {
+		if (!u() || !w() || e.defaultPrevented || e.ctrlKey || S().respectReducedMotion && n()) return !1;
+		let t = N(e);
+		return t ? (e.preventDefault(), A(t.x, t.y)) : (e.defaultPrevented || E(), !1);
+	}
+	function F(e) {
+		let r = t.getElement(), i = S();
+		if (!u() || !r || !w() || !i.keyboard || e.defaultPrevented || e.ctrlKey || e.altKey || e.metaKey || e.shiftKey && e.key !== " " || b(e) || i.respectReducedMotion && n()) return !1;
+		let a = C(), o = 0, s = 0;
+		switch (e.key) {
+			case "ArrowUp":
+				s = a.vertical ? -i.keyboardStep : 0;
+				break;
+			case "ArrowDown":
+				s = a.vertical ? i.keyboardStep : 0;
+				break;
+			case "ArrowLeft":
+				o = a.horizontal ? -i.keyboardStep : 0;
+				break;
+			case "ArrowRight":
+				o = a.horizontal ? i.keyboardStep : 0;
+				break;
+			case "PageUp":
+				s = a.vertical ? -r.clientHeight * .9 : 0;
+				break;
+			case "PageDown":
+			case " ":
+				s = a.vertical ? r.clientHeight * (e.shiftKey ? -.9 : .9) : 0;
+				break;
+			case "Home":
+				s = a.vertical ? -r.scrollTop : 0, o = !a.vertical && a.horizontal ? -r.scrollLeft : 0;
+				break;
+			case "End":
+				s = a.vertical ? Math.max(0, r.scrollHeight - r.clientHeight - r.scrollTop) : 0, o = !a.vertical && a.horizontal ? Math.max(0, r.scrollWidth - r.clientWidth - r.scrollLeft) : 0;
+				break;
+			default: return !1;
+		}
+		return o && !m(r, "x", o) && (o = 0), s && !m(r, "y", s) && (s = 0), !o && !s ? !1 : (e.preventDefault(), A(o, s));
+	}
+	return {
+		cancel: E,
+		handleKeydown: F,
+		handleWheel: P,
+		isAnimating: () => i !== void 0 || r.length > 0
+	};
+}
+//#endregion
+export { i as compactSmoothScrollOptions, x as createSmoothScrollController, r as defaultSmoothScrollOptions, l as pulseEase, a as resolveComponentSmoothScroll, s as resolveSmoothScrollOptions };

package/dist/motion/useClickFeedback.js

@@ -0,0 +1,47 @@
+import { useReducedMotion as e } from "./reducedMotion.js";
+import { createClickParticles as t } from "./clickParticles2.js";
+import { getCurrentInstance as n } from "vue";
+//#region src/motion/useClickFeedback.ts
+var r = /* @__PURE__ */ new WeakMap(), i = /* @__PURE__ */ new WeakSet();
+function a() {
+	let a = n().appContext.app, o = e(), s = r.get(a);
+	if (!s) {
+		s = /* @__PURE__ */ new Map(), r.set(a, s);
+		let e = s;
+		a.onUnmount(() => {
+			for (let t of e.values()) t.clear();
+			e.clear(), r.delete(a);
+		});
+	}
+	function c(e, n = e.currentTarget) {
+		if (!n?.isConnected || i.has(e) || n.matches(":disabled, [aria-disabled=\"true\"]") || n.closest("[inert]") || e.target instanceof Element && e.target.closest(".bing-checkbox:not(.is-decorative), .bing-radio") && !n.matches(".bing-checkbox__control, .bing-radio__control")) return;
+		i.add(e);
+		let r = n.ownerDocument, a = s.get(r);
+		a || (a = t(), s.set(r, a)), a.play(n, e, o(r.defaultView));
+	}
+	let l = /* @__PURE__ */ new WeakMap();
+	return {
+		playClickFeedback: c,
+		vClickFeedback: {
+			mounted(e, t) {
+				let n = {
+					enabled: t.value !== !1,
+					click(t) {
+						n.enabled && !t.defaultPrevented && t.button === 0 && c(t, e);
+					}
+				};
+				l.set(e, n), e.addEventListener("click", n.click);
+			},
+			updated(e, t) {
+				let n = l.get(e);
+				n && (n.enabled = t.value !== !1);
+			},
+			beforeUnmount(e) {
+				let t = l.get(e);
+				t && e.removeEventListener("click", t.click), l.delete(e);
+			}
+		}
+	};
+}
+//#endregion
+export { a as useClickFeedback };