@moubing/bing-ui 0.11.2 → 0.12.1

package/dist/utils/useClientReady.js

@@ -0,0 +1,10 @@
+import { onMounted as e, ref as t } from "vue";
+//#region src/utils/useClientReady.ts
+function n() {
+	let n = t(!1);
+	return e(() => {
+		n.value = !0;
+	}), n;
+}
+//#endregion
+export { n as useClientReady };

package/dist/utils/useDeferredBlurValidation.d.ts

@@ -0,0 +1,18 @@
+export interface UseDeferredBlurValidationOptions {
+    /** 所在表单项；不在表单中时为空，此时不做任何事。 */
+    formItem: {
+        handleControlBlur: () => void;
+    } | null | undefined;
+    isOpen: () => boolean;
+    /** 焦点仍在组件自身（触发器、浮层、工具栏等）时不算失焦。 */
+    isInteractionTarget: (target: EventTarget | null) => boolean;
+}
+/**
+ * 弹出类表单控件的失焦校验：焦点可能只是从触发器移到浮层里，
+ * 所以等下一帧确认焦点确实离开组件且浮层已关闭后，再通知表单项校验。
+ */
+export declare function useDeferredBlurValidation({ formItem, isOpen, isInteractionTarget, }: UseDeferredBlurValidationOptions): {
+    schedule: () => void;
+    cancel: () => void;
+    handleBlur: (event: FocusEvent) => void;
+};

package/dist/utils/useDeferredBlurValidation.js

@@ -0,0 +1,34 @@
+import { getCurrentInstance as e, nextTick as t, onBeforeUnmount as n } from "vue";
+//#region src/utils/useDeferredBlurValidation.ts
+function r({ formItem: r, isOpen: i, isInteractionTarget: a }) {
+	let o = 0, s = 0;
+	function c() {
+		!s || typeof window > "u" || (window.cancelAnimationFrame(s), s = 0);
+	}
+	function l() {
+		o += 1, c();
+	}
+	function u() {
+		if (!r) return;
+		if (typeof window > "u" || typeof document > "u") {
+			r.handleControlBlur();
+			return;
+		}
+		let e = ++o;
+		t(() => {
+			e === o && (c(), s = window.requestAnimationFrame(() => {
+				s = 0, !(e !== o || i() || a(document.activeElement)) && r.handleControlBlur();
+			}));
+		});
+	}
+	function d(e) {
+		a(e.relatedTarget) || u();
+	}
+	return e() && n(l), {
+		schedule: u,
+		cancel: l,
+		handleBlur: d
+	};
+}
+//#endregion
+export { r as useDeferredBlurValidation };

package/dist/utils/useKeyboardScrollSync.d.ts

@@ -0,0 +1,11 @@
+import { Ref } from 'vue';
+/**
+ * 键盘导航触发列表滚动期间的标记。滚动事件持续到来时不断顺延，
+ * 停止 120ms 后自动结束，组件可据此在滚动中暂停悬停效果。
+ */
+export declare function useKeyboardScrollSync(isKeyboardNavigating: Ref<boolean>): {
+    isSyncing: Ref<boolean, boolean>;
+    start: () => void;
+    scheduleEnd: () => void;
+    finish: () => void;
+};

package/dist/utils/useKeyboardScrollSync.js

@@ -0,0 +1,28 @@
+import { getCurrentInstance as e, onBeforeUnmount as t, ref as n } from "vue";
+//#region src/utils/useKeyboardScrollSync.ts
+var r = 120;
+function i(i) {
+	let a = n(!1), o;
+	function s() {
+		o === void 0 || typeof window > "u" || (window.clearTimeout(o), o = void 0);
+	}
+	function c() {
+		a.value = !1, s();
+	}
+	function l() {
+		typeof window > "u" || !a.value || (s(), o = window.setTimeout(() => {
+			o = void 0, a.value = !1;
+		}, r));
+	}
+	function u() {
+		typeof window > "u" || !i.value || (a.value = !0, l());
+	}
+	return e() && t(c), {
+		isSyncing: a,
+		start: u,
+		scheduleEnd: l,
+		finish: c
+	};
+}
+//#endregion
+export { i as useKeyboardScrollSync };

package/dist/utils/useOptionDetailPanel.d.ts

@@ -0,0 +1,50 @@
+import { Ref } from 'vue';
+export interface OptionDetailItemState {
+    disabled?: boolean;
+    hasDetail: boolean;
+}
+export interface UseOptionDetailPanelOptions {
+    /** 选项列表所在的浮层面板，详情贴在它的左右两侧。 */
+    listPanel: Ref<HTMLElement | null>;
+    detailPanel: Ref<HTMLElement | null>;
+    detailContent: Ref<HTMLElement | null>;
+    /** 选项元素选择器，用于根据指针位置找回选项。 */
+    itemSelector: string;
+    /** 选项元素上记录序号的 `data-*` 属性名（camelCase）。 */
+    indexAttribute: string;
+    isOpen: () => boolean;
+    isKeyboardNavigating: Ref<boolean>;
+    /** 返回 `undefined` 表示该序号的选项已不存在。 */
+    getItemState: (index: number) => OptionDetailItemState | undefined;
+    getItemElement: (index: number) => HTMLElement | null;
+    /** 详情纵向对齐的参考元素，默认就是选项元素本身。 */
+    getItemSurface?: (element: HTMLElement) => HTMLElement;
+    /** 键盘导航时当前激活的序号，-1 表示没有。 */
+    getKeyboardIndex: () => number;
+    /** 滚动结束后根据指针位置找回选项时调用，用于同步激活态。 */
+    onPointerRestore?: (index: number) => void;
+    hiddenScale?: number;
+    enterEase?: string;
+    force3D?: boolean;
+}
+/**
+ * Select 与 TreeSelect 的选项详情浮层：悬停或键盘激活时显示，跟随选项移动，
+ * 滚动期间先隐藏、停止后按指针位置恢复。
+ */
+export declare function useOptionDetailPanel(options: UseOptionDetailPanelOptions): {
+    index: Ref<number, number>;
+    shouldRender: Ref<boolean, boolean>;
+    placement: Ref<"left" | "right", "left" | "right">;
+    show: (itemElement: HTMLElement, itemIndex: number) => void;
+    showIfAvailable: (itemElement: HTMLElement | null, itemIndex: number) => void;
+    hide: (immediate?: boolean) => void;
+    scheduleHide: (itemIndex?: number) => void;
+    cancelHide: () => void;
+    rememberPointer: (event: MouseEvent | PointerEvent | WheelEvent) => void;
+    handleListScroll: () => void;
+    showForKeyboard: () => void;
+    scheduleKeyboardShow: () => void;
+    updatePosition: () => void;
+    dispose: () => void;
+};
+export type OptionDetailPanel = ReturnType<typeof useOptionDetailPanel>;

package/dist/utils/useOptionDetailPanel.js

@@ -0,0 +1,180 @@
+import { useReducedMotion as e } from "../motion/reducedMotion.js";
+import { getOptionDetailSnapshot as t, moveOptionDetailPanel as n } from "../motion/optionDetailMotion.js";
+import { computeFloatingPosition as r, snapToDevicePixel as i } from "./floating.js";
+import { getCurrentInstance as a, nextTick as o, onBeforeUnmount as s, ref as c } from "vue";
+import { gsap as l } from "gsap";
+//#region src/utils/useOptionDetailPanel.ts
+var u = 12, d = 12, f = 120, p = 150;
+function m() {
+	return typeof window < "u" && typeof document < "u";
+}
+function h(h) {
+	let g = e(), { listPanel: _, detailPanel: v, detailContent: y, isKeyboardNavigating: b, getItemState: x, getItemElement: S, getItemSurface: C = (e) => e, hiddenScale: w = .96 } = h, T = c(-1), E = c(!1), D = c("right"), O = 0, k, A, j = 0, M, N;
+	function P() {
+		!m() || !O || (window.cancelAnimationFrame(O), O = 0);
+	}
+	function F() {
+		!m() || k === void 0 || (window.clearTimeout(k), k = void 0);
+	}
+	function I() {
+		!m() || A === void 0 || (window.clearTimeout(A), A = void 0);
+	}
+	function L(e) {
+		let t = _.value, n = v.value;
+		if (!t || !n || !m()) return null;
+		let a = t.getBoundingClientRect(), o = C(e).getBoundingClientRect(), s = n.getBoundingClientRect(), c = r({
+			anchor: {
+				left: a.left,
+				right: a.right,
+				width: a.width,
+				top: o.top,
+				bottom: o.bottom,
+				height: o.height
+			},
+			floating: {
+				width: s.width || 236,
+				height: s.height || 132
+			},
+			side: "right",
+			align: "center",
+			gap: d,
+			padding: u
+		});
+		return {
+			placement: c.side,
+			x: i(c.left),
+			y: i(c.top)
+		};
+	}
+	function R(e, t = !1, r) {
+		if (!m()) return;
+		let i = n({
+			panel: v.value,
+			content: y.value,
+			getTarget: () => L(e),
+			animateContent: t,
+			previousSnapshot: r,
+			reducedMotion: g(),
+			hiddenScale: w,
+			enterEase: h.enterEase,
+			force3D: h.force3D
+		});
+		i && (D.value = i.placement);
+	}
+	function z(e, t = !1, n) {
+		!e || !m() || (P(), O = window.requestAnimationFrame(() => {
+			O = 0, R(e, t, n);
+		}));
+	}
+	function B(e, n) {
+		if (!x(n)?.hasDetail) return;
+		let r = T.value, i = r === n ? void 0 : t(v.value);
+		F(), T.value = n, E.value = !0, o(() => {
+			z(e, r !== n, i);
+		});
+	}
+	function V() {
+		E.value = !1, T.value = -1;
+	}
+	function H(e = !1) {
+		F(), P();
+		let t = v.value;
+		if (!t) {
+			V();
+			return;
+		}
+		if (l.killTweensOf([t, y.value].filter(Boolean)), e || g()) {
+			l.set(t, {
+				autoAlpha: 0,
+				scale: w,
+				clearProps: "width,height,overflow",
+				willChange: "auto"
+			}), V();
+			return;
+		}
+		l.to(t, {
+			autoAlpha: 0,
+			scale: w,
+			x: `+=${D.value === "right" ? -6 : 6}`,
+			duration: .14,
+			ease: "power2.out",
+			overwrite: !0,
+			onComplete: V
+		});
+	}
+	function U(e = T.value) {
+		!m() || e < 0 || e !== T.value || (F(), k = window.setTimeout(() => {
+			k = void 0, H();
+		}, f));
+	}
+	function W(e, t) {
+		let n = x(t);
+		if (!e || !n || n.disabled || !n.hasDetail) {
+			H(!0);
+			return;
+		}
+		B(e, t);
+	}
+	function G(e) {
+		!Number.isFinite(e.clientX) || !Number.isFinite(e.clientY) || (M = e.clientX, N = e.clientY);
+	}
+	function K() {
+		if (!m() || M === void 0 || N === void 0) return null;
+		let e = document.elementFromPoint(M, N)?.closest?.(h.itemSelector);
+		return !e || !_.value?.contains(e) ? null : e;
+	}
+	function q() {
+		if (b.value) return;
+		let e = K(), t = e?.dataset[h.indexAttribute], n = t === void 0 ? NaN : Number(t);
+		!e || !Number.isInteger(n) || !x(n) || (b.value = !1, h.onPointerRestore?.(n), W(e, n));
+	}
+	function J() {
+		H(!0), !(!m() || b.value) && (I(), A = window.setTimeout(() => {
+			A = void 0, !b.value && o(q);
+		}, p));
+	}
+	function Y() {
+		let e = h.isOpen() ? h.getKeyboardIndex() : -1;
+		W(e < 0 ? null : S(e), e);
+	}
+	function X() {
+		if (!m() || !h.isOpen()) return;
+		j += 1;
+		let e = j;
+		F(), I(), o(() => {
+			!m() || e !== j || window.requestAnimationFrame(() => {
+				e === j && Y();
+			});
+		});
+	}
+	function Z() {
+		if (!E.value || !x(T.value)?.hasDetail) return;
+		let e = S(T.value);
+		if (!e) {
+			H(!0);
+			return;
+		}
+		z(e);
+	}
+	function Q() {
+		P(), F(), I(), j += 1;
+	}
+	return a() && s(Q), {
+		index: T,
+		shouldRender: E,
+		placement: D,
+		show: B,
+		showIfAvailable: W,
+		hide: H,
+		scheduleHide: U,
+		cancelHide: F,
+		rememberPointer: G,
+		handleListScroll: J,
+		showForKeyboard: Y,
+		scheduleKeyboardShow: X,
+		updatePosition: Z,
+		dispose: Q
+	};
+}
+//#endregion
+export { h as useOptionDetailPanel };

package/dist/utils/useOutsidePointerDown.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 在捕获阶段监听窗口的 `pointerdown`，用于浮层打开期间检测外部点击。
+ * 只在 `start` 和 `stop` 之间生效。
+ */
+export declare function useOutsidePointerDown(handler: (event: PointerEvent) => void): {
+    start: () => void;
+    stop: () => void;
+};

package/dist/utils/useOutsidePointerDown.js

@@ -0,0 +1,17 @@
+import { getCurrentInstance as e, onBeforeUnmount as t } from "vue";
+//#region src/utils/useOutsidePointerDown.ts
+function n(n) {
+	let r = !1;
+	function i() {
+		r || typeof window > "u" || (window.addEventListener("pointerdown", n, !0), r = !0);
+	}
+	function a() {
+		!r || typeof window > "u" || (window.removeEventListener("pointerdown", n, !0), r = !1);
+	}
+	return e() && t(a), {
+		start: i,
+		stop: a
+	};
+}
+//#endregion
+export { n as useOutsidePointerDown };

package/dist/utils/useSearchShortcutFocus.d.ts

@@ -0,0 +1,18 @@
+import { Ref } from 'vue';
+export interface UseSearchShortcutFocusOptions {
+    input: Ref<{
+        focus: () => void;
+    } | null>;
+    isOpen: () => boolean;
+    isSearchable: () => boolean;
+}
+/**
+ * 浮层内搜索框的聚焦：打开动画期间连续尝试几帧，确保焦点最终落在输入框上；
+ * 面板打开时在非输入区域按 `/` 也可以聚焦搜索框。
+ */
+export declare function useSearchShortcutFocus({ input, isOpen, isSearchable }: UseSearchShortcutFocusOptions): {
+    focus: () => Promise<void>;
+    handleShortcut: (event: KeyboardEvent) => boolean;
+    start: () => void;
+    stop: () => void;
+};

package/dist/utils/useSearchShortcutFocus.js

@@ -0,0 +1,47 @@
+import { getCurrentInstance as e, nextTick as t, onBeforeUnmount as n } from "vue";
+//#region src/utils/useSearchShortcutFocus.ts
+function r(e) {
+	return typeof HTMLElement > "u" || !(e instanceof HTMLElement) ? !1 : e.isContentEditable || [
+		"INPUT",
+		"TEXTAREA",
+		"SELECT"
+	].includes(e.tagName);
+}
+function i() {
+	return new Promise((e) => {
+		if (typeof window > "u" || typeof window.requestAnimationFrame != "function") {
+			e();
+			return;
+		}
+		window.requestAnimationFrame(() => e());
+	});
+}
+function a({ input: a, isOpen: o, isSearchable: s }) {
+	let c = !1;
+	function l() {
+		o() && s() && a.value?.focus();
+	}
+	async function u() {
+		s() && (await t(), l(), await i(), l(), await i(), l());
+	}
+	function d(e) {
+		return e.key !== "/" || e.altKey || e.ctrlKey || e.metaKey || !o() || !s() || r(e.target) ? !1 : (e.preventDefault(), u(), !0);
+	}
+	function f(e) {
+		d(e);
+	}
+	function p() {
+		c || typeof window > "u" || (window.addEventListener("keydown", f), c = !0);
+	}
+	function m() {
+		!c || typeof window > "u" || (window.removeEventListener("keydown", f), c = !1);
+	}
+	return e() && n(m), {
+		focus: u,
+		handleShortcut: d,
+		start: p,
+		stop: m
+	};
+}
+//#endregion
+export { a as useSearchShortcutFocus };

package/dist/utils/useVirtualList.d.ts

@@ -0,0 +1,42 @@
+import { CSSProperties, Ref } from 'vue';
+import { BingScrollbarExpose } from '../components/BingScrollbar/BingScrollbar.types';
+/** 虚拟列表上下各留出的内边距总和，和面板内容区的上下 padding 对应。 */
+export declare const VIRTUAL_LIST_PADDING_Y = 18;
+export interface UseVirtualListOptions {
+    /** 当前可见条目总数（已过滤）。 */
+    count: () => number;
+    /** `true` 强制开启，`false` 关闭，`'auto'` 超过阈值后开启。 */
+    mode: () => boolean | 'auto';
+    threshold: () => number;
+    /** 已归一化的固定行高。 */
+    itemHeight: () => number;
+    overscan: () => number;
+    scrollbar: Ref<BingScrollbarExpose | null>;
+    /** 面板滚动区域的计算高度，视口还没挂载时用它兜底。 */
+    fallbackViewportHeight: Ref<number>;
+    /** 写在面板内容区上的行高 CSS 变量名。 */
+    itemHeightVar: string;
+}
+/**
+ * 固定行高的虚拟列表窗口计算，配合 BingScrollbar 使用。
+ */
+export declare function useVirtualList(options: UseVirtualListOptions): {
+    enabled: import('vue').ComputedRef<boolean>;
+    scrollTop: Ref<number, number>;
+    viewportHeight: Ref<number, number>;
+    totalHeight: import('vue').ComputedRef<number>;
+    startIndex: import('vue').ComputedRef<number>;
+    endIndex: import('vue').ComputedRef<number>;
+    bodyStyle: import('vue').ComputedRef<CSSProperties | undefined>;
+    stackStyle: import('vue').ComputedRef<CSSProperties | undefined>;
+    getContentHeight: () => number | undefined;
+    readViewport: (viewport: HTMLElement) => void;
+    sync: () => void;
+    refresh: () => void;
+    reset: () => void;
+    clampScroll: () => void;
+    scrollToIndex: (index: number, { offsetTop, beforeScroll }?: {
+        offsetTop?: number;
+        beforeScroll?: () => void;
+    }) => boolean;
+};

package/dist/utils/useVirtualList.js

@@ -0,0 +1,74 @@
+import { clampToRange as e } from "./floating.js";
+import { computed as t, nextTick as n, ref as r } from "vue";
+function i(i) {
+	let { scrollbar: a, fallbackViewportHeight: o } = i, s = r(0), c = r(0), l = t(() => {
+		let e = i.mode(), t = i.count();
+		return e === !0 ? t > 0 : e === !1 ? !1 : t > i.threshold();
+	}), u = t(() => l.value ? i.count() * i.itemHeight() : 0), d = t(() => l.value ? e(Math.floor(s.value / i.itemHeight()) - i.overscan(), 0, i.count()) : 0), f = t(() => {
+		if (!l.value) return i.count();
+		let t = c.value || o.value || i.itemHeight();
+		return e(Math.ceil((s.value + t) / i.itemHeight()) + i.overscan(), d.value, i.count());
+	}), p = t(() => {
+		if (l.value) return {
+			height: `${u.value + 18}px`,
+			[i.itemHeightVar]: `${i.itemHeight()}px`
+		};
+	}), m = t(() => {
+		if (l.value) return { transform: `translate3d(0, ${d.value * i.itemHeight() + 18 / 2}px, 0)` };
+	});
+	function h() {
+		return l.value ? u.value + 18 : void 0;
+	}
+	function g(e) {
+		s.value = e.scrollTop, c.value = e.clientHeight || o.value;
+	}
+	function _() {
+		let e = a.value?.viewport;
+		if (!e) {
+			c.value = o.value;
+			return;
+		}
+		g(e);
+	}
+	function v() {
+		n(() => {
+			_(), a.value?.update();
+		});
+	}
+	function y() {
+		s.value = 0, a.value?.stop(), a.value?.scrollTo(0), c.value = a.value?.viewport?.clientHeight || o.value, a.value?.update();
+	}
+	function b() {
+		if (!l.value) {
+			s.value = 0;
+			return;
+		}
+		let e = c.value || o.value || i.itemHeight(), t = Math.max(0, u.value - e);
+		s.value <= t || (a.value?.scrollTo(t), s.value = t);
+	}
+	function x(e, { offsetTop: t = 18 / 2, beforeScroll: n } = {}) {
+		let r = a.value?.viewport;
+		if (!r || e < 0) return !1;
+		let s = i.itemHeight(), c = e * s + t, l = c + s, u = r.clientHeight || o.value, d = r.scrollTop, f = d;
+		return c < d ? f = c : l > d + u && (f = l - u), Math.abs(f - d) > .5 && (n?.(), a.value?.scrollTo(f)), _(), a.value?.update(), !0;
+	}
+	return {
+		enabled: l,
+		scrollTop: s,
+		viewportHeight: c,
+		totalHeight: u,
+		startIndex: d,
+		endIndex: f,
+		bodyStyle: p,
+		stackStyle: m,
+		getContentHeight: h,
+		readViewport: g,
+		sync: _,
+		refresh: v,
+		reset: y,
+		clampScroll: b,
+		scrollToIndex: x
+	};
+}
+//#endregion
+export { i as useVirtualList };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@moubing/bing-ui",
-  "version": "0.11.2",
+  "version": "0.12.1",
   "type": "module",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "main": "./dist/bing-ui.umd.js",
-  "module": "./dist/bing-ui.es.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist"
@@ -19,16 +19,23 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/bing-ui.es.js"
+      "import": "./dist/index.js"
     },
     "./style.css": "./dist/bing-ui.css"
   },
   "peerDependencies": {
     "gsap": "^3.15.0",
-    "vue": "^3.5.0"
+    "vue": "^3.5.0",
+    "zod": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "zod": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@changesets/cli": "^2.31.0",
+    "@lucide/vue": "^1.61.0",
     "@playwright/test": "^1.60.0",
     "@storybook/addon-docs": "^10.4.1",
     "@storybook/vue3-vite": "^10.4.1",
@@ -48,15 +55,14 @@
     "vite-plugin-dts": "^5.0.1",
     "vitest": "^4.1.7",
     "vue": "^3.5.35",
-    "vue-tsc": "^3.2.8"
+    "vue-tsc": "^3.2.8",
+    "zod": "^4.4.3"
   },
   "dependencies": {
     "@dnd-kit/dom": "^0.5.0",
     "@dnd-kit/vue": "^0.5.0",
     "dayjs": "^1.11.21",
-    "lucide-vue-next": "^1.0.0",
-    "shiki": "^4.2.0",
-    "zod": "^4.4.3"
+    "shiki": "^4.2.0"
   },
   "scripts": {
     "dev": "vite",