@moubing/bing-ui 0.11.2 → 0.12.0

package/dist/components/BingSlider/BingSlider.js

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

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

@@ -1,25 +1,25 @@
 import { BingSliderProps, BingSliderExpose } from './BingSlider.types';
 declare const __VLS_export: import('vue').DefineComponent<BingSliderProps, BingSliderExpose, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    change: (value: number) => any;
     blur: (event: FocusEvent) => any;
     focus: (event: FocusEvent) => any;
+    change: (value: number) => any;
     "update:modelValue": (value: number) => any;
 }, string, import('vue').PublicProps, Readonly<BingSliderProps> & Readonly<{
-    onChange?: ((value: number) => any) | undefined;
     onBlur?: ((event: FocusEvent) => any) | undefined;
     onFocus?: ((event: FocusEvent) => any) | undefined;
+    onChange?: ((value: number) => any) | undefined;
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
+    name: string;
+    status: import('..').BingControlStatus;
     disabled: boolean;
     id: string;
     ariaLabel: string;
-    modelValue: number;
-    min: number;
     max: number;
+    min: number;
     step: number;
+    modelValue: number;
     ariaDescribedby: string;
-    status: import('..').BingControlStatus;
-    name: string;
     defaultValue: number;
     ariaLabelledby: string;
     formatValueText: (value: number) => string;

package/dist/components/BingSlider/BingSlider.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,130 @@
+import { useFormControl as e } from "../BingForm/useFormControl.js";
+import { computed as t, createElementBlock as n, createElementVNode as r, defineComponent as i, nextTick as a, normalizeClass as o, normalizeStyle as s, openBlock as c, ref as l, unref as u, watch as d } from "vue";
+//#region src/components/BingSlider/BingSlider.vue?vue&type=script&setup=true&lang.ts
+var f = [
+	"id",
+	"name",
+	"min",
+	"max",
+	"step",
+	"value",
+	"disabled",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-valuetext",
+	"aria-valuenow",
+	"aria-invalid"
+], p = /* @__PURE__ */ i({
+	__name: "BingSlider",
+	props: {
+		id: { default: void 0 },
+		modelValue: { default: void 0 },
+		defaultValue: { default: 0 },
+		min: { default: 0 },
+		max: { default: 100 },
+		step: { default: 1 },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		name: { default: void 0 },
+		status: { default: void 0 },
+		ariaLabel: { default: void 0 },
+		ariaLabelledby: { default: void 0 },
+		ariaDescribedby: { default: void 0 },
+		formatValueText: {
+			type: Function,
+			default: void 0
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"focus",
+		"blur"
+	],
+	setup(i, { expose: p, emit: m }) {
+		let h = i, g = m, _ = l(null), v = l(h.defaultValue), { formItem: y, resolvedId: b, resolvedDisabled: x, resolvedStatus: S, resolvedAriaDescribedby: C } = e(h), w = t(() => Number.isFinite(h.min) ? h.min : 0), T = t(() => Math.max(w.value, Number.isFinite(h.max) ? h.max : 100)), E = t(() => Number.isFinite(h.step) && h.step > 0 ? h.step : 1);
+		function D(e) {
+			let t = w.value, n = Number.isFinite(e) ? e : t, r = Math.floor((T.value - t) / E.value + 1e-9), i = Math.min(r, Math.max(0, Math.round((n - t) / E.value)));
+			return Number((t + i * E.value).toPrecision(14));
+		}
+		let O = t(() => D(h.modelValue ?? v.value)), k = t(() => x.value || T.value === w.value), A = t(() => T.value === w.value ? 0 : (O.value - w.value) / (T.value - w.value) * 100), j = t(() => h.formatValueText?.(O.value)), M, N = O.value, P = !1, F = new Set([
+			"ArrowLeft",
+			"ArrowRight",
+			"ArrowUp",
+			"ArrowDown",
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		]);
+		function I(e) {
+			let t = e.target;
+			if (k.value) {
+				t.value = String(O.value);
+				return;
+			}
+			let n = D(t.valueAsNumber);
+			M = n, h.modelValue === void 0 && (v.value = n), g("update:modelValue", n), a(() => {
+				_.value && (_.value.value = String(O.value));
+			});
+		}
+		function L(e) {
+			M = void 0, !(k.value || e === N) && (N = e, g("change", e), y?.handleControlChange());
+		}
+		function R(e) {
+			let t = D(e.target.valueAsNumber);
+			P ? M = t : L(t);
+		}
+		function z(e) {
+			!k.value && F.has(e.key) && (P = !0);
+		}
+		function B(e) {
+			F.has(e.key) && (P = !1, M !== void 0 && L(M));
+		}
+		function V(e) {
+			P = !1, M !== void 0 && L(M), g("blur", e), y?.handleControlBlur();
+		}
+		return d(O, (e) => {
+			M === void 0 && (N = e);
+		}), d(k, (e) => {
+			e && (P = !1, M = void 0);
+		}), p({
+			get input() {
+				return _.value;
+			},
+			focus: () => _.value?.focus(),
+			blur: () => _.value?.blur()
+		}), (e, t) => (c(), n("div", {
+			class: o(["bing-slider", [`bing-slider--${u(S)}`, { "is-disabled": k.value }]]),
+			style: s({ "--bing-slider-progress": `${A.value}%` })
+		}, [r("input", {
+			id: u(b),
+			ref_key: "input",
+			ref: _,
+			type: "range",
+			name: i.name,
+			min: w.value,
+			max: T.value,
+			step: E.value,
+			value: O.value,
+			disabled: k.value,
+			"aria-label": i.ariaLabel,
+			"aria-labelledby": i.ariaLabelledby,
+			"aria-describedby": u(C),
+			"aria-valuetext": j.value,
+			"aria-valuenow": O.value,
+			"aria-invalid": u(S) === "error" || void 0,
+			onInput: I,
+			onChange: R,
+			onKeydown: z,
+			onKeyup: B,
+			onFocus: t[0] ||= (e) => g("focus", e),
+			onBlur: V
+		}, null, 40, f)], 6));
+	}
+});
+//#endregion
+export { p as default };

package/dist/components/BingSortableList/BingSortableList.js

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

package/dist/components/BingSortableList/BingSortableList.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,334 @@
+import { useReducedMotion as e } from "../../motion/reducedMotion.js";
+import t from "./BingSortableListItem.js";
+import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, mergeProps as l, nextTick as ee, normalizeProps as te, onBeforeUnmount as ne, openBlock as u, ref as d, renderList as re, renderSlot as f, unref as p, useAttrs as m, watch as h, withCtx as g } from "vue";
+import { gsap as _ } from "gsap";
+import { DragDropProvider as ie, DragOverlay as v } from "@dnd-kit/vue";
+import { Feedback as y, PointerActivationConstraints as ae, PointerSensor as b } from "@dnd-kit/dom";
+import { isSortable as x } from "@dnd-kit/vue/sortable";
+//#region src/components/BingSortableList/BingSortableList.vue?vue&type=script&setup=true&lang.ts
+var oe = ["aria-label"], S = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "BingSortableList",
+	props: {
+		items: { default: () => [] },
+		order: { default: void 0 },
+		itemKey: {
+			type: Function,
+			default: "id"
+		},
+		itemDisabled: {
+			type: Function,
+			default: void 0
+		},
+		disabledKeys: { default: () => [] },
+		axis: { default: "vertical" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		keyboard: {
+			type: Boolean,
+			default: !0
+		},
+		flip: {
+			type: Boolean,
+			default: !0
+		},
+		reorderMode: { default: "drop" },
+		duration: { default: .26 },
+		settleDuration: { default: .16 },
+		dragThreshold: { default: 4 },
+		dragOverlay: {
+			type: Boolean,
+			default: !1
+		},
+		ariaLabel: { default: "可排序列表" },
+		handleAriaLabel: {
+			type: [String, Function],
+			default: "调整顺序"
+		}
+	},
+	emits: [
+		"update:order",
+		"reorder",
+		"drag-start",
+		"drag",
+		"drag-end"
+	],
+	setup(c, { emit: S }) {
+		let C = e(), w = c, T = S, E = m(), D = d(null), O = d([]), k = d(null), A = d(null), j = d(null), M = null, N = [], se = r(() => {
+			let e = Math.max(0, w.dragThreshold);
+			return e > 0 ? [b.configure({ activationConstraints: [new ae.Distance({ value: e })] })] : [b];
+		}), P = r(() => w.settleDuration > 0 && !C() ? {
+			duration: Math.max(0, w.settleDuration * 1e3),
+			easing: "cubic-bezier(0.22, 1, 0.36, 1)"
+		} : null), ce = r(() => (e) => e.map((e) => e === y ? y.configure({ dropAnimation: P.value }) : e)), le = r(() => [
+			"bing-sortable-list",
+			`bing-sortable-list--${w.axis}`,
+			{
+				"is-disabled": w.disabled,
+				"is-dragging": k.value !== null
+			}
+		]), ue = r(() => {
+			let { class: e, style: t, ...n } = E;
+			return n;
+		}), F = r(() => w.items.map((e, t) => G(e, t))), I = r(() => K(w.order ?? O.value)), L = r(() => j.value ?? I.value), R = r(() => {
+			let e = /* @__PURE__ */ new Map();
+			return w.items.forEach((t, n) => {
+				let r = G(t, n);
+				e.set(r, {
+					item: t,
+					key: r,
+					sourceIndex: n,
+					disabled: pe(t, n, r)
+				});
+			}), L.value.map((t) => e.get(t)).filter((e) => !!e);
+		});
+		h(F, () => {
+			O.value = K(w.order ?? O.value);
+		}, { immediate: !0 });
+		function z(e, t, n) {
+			return Math.min(n, Math.max(t, e));
+		}
+		function B(e, t) {
+			return e.length === t.length && e.every((e, n) => e === t[n]);
+		}
+		function V(e) {
+			return JSON.stringify(e);
+		}
+		function H() {
+			let e = D.value;
+			return e ? Array.from(e.children).filter((e) => e instanceof HTMLElement && !!e.dataset.bingSortableKey) : [];
+		}
+		function de() {
+			let e = /* @__PURE__ */ new Map();
+			return H().forEach((t) => {
+				let n = t.dataset.bingSortableKey;
+				n && e.set(n, t.getBoundingClientRect());
+			}), e;
+		}
+		function U(e = !0) {
+			N.length && (_.killTweensOf(N), e && _.set(N, { clearProps: "transform" }), N = []);
+		}
+		async function fe(e) {
+			if (!w.flip || w.duration <= 0 || C()) return;
+			await ee();
+			let t = /* @__PURE__ */ new WeakMap(), n = H().filter((n) => {
+				let r = n.dataset.bingSortableKey, i = r ? e.get(r) : void 0;
+				if (!i) return !1;
+				let a = n.getBoundingClientRect(), o = i.left - a.left, s = i.top - a.top, c = Math.abs(o) > .5 || Math.abs(s) > .5;
+				return c && t.set(n, {
+					x: o,
+					y: s
+				}), c;
+			});
+			n.length && (U(), N = n, _.fromTo(n, {
+				x: (e, n) => t.get(n)?.x ?? 0,
+				y: (e, n) => t.get(n)?.y ?? 0
+			}, {
+				x: 0,
+				y: 0,
+				duration: Math.max(0, w.duration),
+				ease: "power3.out",
+				stagger: {
+					each: .012,
+					from: "start"
+				},
+				overwrite: !0,
+				clearProps: "transform",
+				onComplete: () => {
+					N = [];
+				}
+			}));
+		}
+		function W(e) {
+			return typeof e == "string" || typeof e == "number";
+		}
+		function G(e, t) {
+			if (typeof w.itemKey == "function") return w.itemKey(e, t);
+			let n = e?.[w.itemKey];
+			return W(n) ? n : t;
+		}
+		function pe(e, t, n) {
+			return w.disabledKeys.includes(n) ? !0 : w.itemDisabled ? typeof w.itemDisabled == "function" ? w.itemDisabled(e, t) : !!e?.[w.itemDisabled] : !1;
+		}
+		function K(e) {
+			let t = F.value, n = new Set(t), r = e.filter((t, r) => n.has(t) && e.indexOf(t) === r), i = t.filter((e) => !r.includes(e));
+			return [...r, ...i];
+		}
+		function q(e, t) {
+			return typeof w.handleAriaLabel == "function" ? w.handleAriaLabel(e, t) : w.handleAriaLabel;
+		}
+		function J(e) {
+			return R.value.find((t) => t.key === e);
+		}
+		function me(e) {
+			let t = J(e), n = L.value.indexOf(e);
+			return {
+				item: t?.item,
+				key: e,
+				index: n,
+				active: !0,
+				dragging: !0,
+				disabled: t?.disabled ?? !1,
+				handleProps: {
+					ref: () => {},
+					role: "button",
+					tabindex: -1,
+					"aria-label": q(t?.item, n),
+					"aria-disabled": "true",
+					onKeydown: () => {}
+				}
+			};
+		}
+		function Y(e) {
+			return e.nativeEvent instanceof PointerEvent ? e.nativeEvent : void 0;
+		}
+		function X(e, t, n) {
+			let r = [...e], [i] = r.splice(t, 1);
+			return i === void 0 || r.splice(z(n, 0, r.length), 0, i), r;
+		}
+		function Z(e, t, n, r = I.value) {
+			let i = r.indexOf(e);
+			return K(X(r, i >= 0 ? i : t, n));
+		}
+		function Q(e, t, n = I.value, r = {}) {
+			let i = K(e);
+			return B(n, i) ? !1 : (r.skipFlip && (M = V(i)), w.order === void 0 && (O.value = i), T("update:order", i), T("reorder", {
+				...t,
+				order: i
+			}), !0);
+		}
+		function $(e, t, n, r) {
+			let i = J(e);
+			return i ? {
+				key: e,
+				item: i.item,
+				index: t,
+				order: n,
+				event: r
+			} : null;
+		}
+		function he(e) {
+			let { source: t } = e.operation, n = Y(e);
+			if (!n || !x(t) || !W(t.id)) return;
+			let r = J(t.id);
+			r && (k.value = t.id, A.value = t.index, T("drag-start", {
+				key: t.id,
+				item: r.item,
+				index: t.index,
+				order: L.value,
+				event: n
+			}));
+		}
+		function ge(e) {
+			let { source: t } = e.operation, n = Y(e);
+			if (!n || !x(t) || !W(t.id)) return;
+			let r = A.value ?? t.initialIndex, i = Z(t.id, r, t.index);
+			j.value = i;
+			let a = $(t.id, t.index, i, n);
+			if (a && T("drag", a), w.reorderMode === "live") {
+				let e = J(t.id);
+				e && Q(i, {
+					key: t.id,
+					item: e.item,
+					from: r,
+					to: t.index,
+					event: n
+				}, I.value, { skipFlip: !0 });
+			}
+		}
+		function _e(e) {
+			let { source: t } = e.operation, n = Y(e), r = k.value, i = A.value;
+			if (k.value = null, A.value = null, j.value = null, !n || !x(t) || !W(t.id)) return;
+			let a = J(t.id);
+			if (!a) return;
+			let o = i ?? t.initialIndex, s = e.canceled ? I.value.indexOf(t.id) : t.index, c = Z(t.id, o, s);
+			!e.canceled && w.reorderMode === "drop" && Q(c, {
+				key: t.id,
+				item: a.item,
+				from: o,
+				to: s,
+				event: n
+			}, I.value, { skipFlip: !0 });
+			let l = $(t.id, s, !e.canceled && w.reorderMode === "drop" ? K(c) : I.value, n);
+			l && r === t.id && T("drag-end", l);
+		}
+		function ve(e, t) {
+			if (w.disabled || e.disabled || !w.keyboard) return;
+			let n = t.key, r = null, i = L.value.indexOf(e.key);
+			w.axis === "vertical" ? n === "ArrowUp" ? r = i - 1 : n === "ArrowDown" && (r = i + 1) : n === "ArrowLeft" ? r = i - 1 : n === "ArrowRight" && (r = i + 1), n === "Home" ? r = 0 : n === "End" && (r = L.value.length - 1), !(r === null || i < 0) && (t.preventDefault(), Q(X(L.value, i, z(r, 0, L.value.length - 1)), {
+				key: e.key,
+				item: e.item,
+				from: i,
+				to: z(r, 0, L.value.length - 1),
+				event: t
+			}));
+		}
+		return h(I, (e, t) => {
+			if (!t.length || B(e, t)) return;
+			let n = V(e);
+			if (M === n) {
+				M = null;
+				return;
+			}
+			M = null, fe(de());
+		}, { flush: "pre" }), ne(() => {
+			U(!1);
+		}), (e, r) => (u(), i(p(ie), {
+			sensors: se.value,
+			plugins: ce.value,
+			onDragStart: he,
+			onDragMove: ge,
+			onDragEnd: _e
+		}, {
+			default: g(() => [s("div", l({
+				ref_key: "rootRef",
+				ref: D
+			}, ue.value, {
+				class: [le.value, p(E).class],
+				style: p(E).style,
+				role: "list",
+				"aria-label": c.ariaLabel
+			}), [(u(!0), o(n, null, re(R.value, (n, r) => (u(), i(t, {
+				key: n.key,
+				item: n.item,
+				"item-key": n.key,
+				index: r,
+				"active-key": k.value,
+				disabled: c.disabled || n.disabled,
+				axis: c.axis,
+				flip: c.flip,
+				duration: c.duration,
+				"handle-label": q(n.item, r),
+				onKeyboardMove: (e) => ve(n, e)
+			}, {
+				default: g((t) => [f(e.$slots, "default", l({ ref_for: !0 }, t), void 0, !0)]),
+				_: 3
+			}, 8, [
+				"item",
+				"item-key",
+				"index",
+				"active-key",
+				"disabled",
+				"axis",
+				"flip",
+				"duration",
+				"handle-label",
+				"onKeyboardMove"
+			]))), 128)), c.dragOverlay ? (u(), i(p(v), {
+				key: 0,
+				class: "bing-sortable-list__overlay",
+				"drop-animation": P.value,
+				"aria-hidden": "true",
+				inert: ""
+			}, {
+				default: g(({ source: t }) => [t && J(t.id) ? f(e.$slots, "default", te(l({ key: 0 }, me(t.id))), void 0, !0) : a("", !0)]),
+				_: 3
+			}, 8, ["drop-animation"])) : a("", !0)], 16, oe)]),
+			_: 3
+		}, 8, ["sensors", "plugins"]));
+	}
+});
+//#endregion
+export { S as default };

package/dist/components/BingSortableList/BingSortableListItem.js

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

package/dist/components/BingSortableList/BingSortableListItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,76 @@
+import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, openBlock as i, ref as a, renderSlot as o } from "vue";
+import { useSortable as s } from "@dnd-kit/vue/sortable";
+//#region src/components/BingSortableList/BingSortableListItem.vue?vue&type=script&setup=true&lang.ts
+var c = ["aria-grabbed", "data-bing-sortable-key"], l = /* @__PURE__ */ n({
+	__name: "BingSortableListItem",
+	props: {
+		item: {},
+		itemKey: {},
+		index: {},
+		activeKey: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		axis: { default: "vertical" },
+		flip: {
+			type: Boolean,
+			default: !0
+		},
+		duration: { default: .26 },
+		handleLabel: {}
+	},
+	emits: ["keyboard-move"],
+	setup(n, { emit: l }) {
+		let u = n, d = l, f = a(null), p = a(null), m = e(() => u.flip ? {
+			duration: Math.max(0, u.duration * 1e3),
+			easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+			idle: !1
+		} : null), { isDragging: h, isDropping: g, isDragSource: _ } = s({
+			id: e(() => u.itemKey),
+			index: e(() => u.index),
+			element: f,
+			handle: p,
+			disabled: e(() => u.disabled),
+			transition: m
+		}), v = e(() => h.value || g.value || _.value), y = e(() => u.activeKey === u.itemKey), b = e(() => ({
+			"is-active": y.value,
+			"is-dragging": v.value,
+			"is-disabled": u.disabled
+		}));
+		function x(e) {
+			if (e && "$el" in e) {
+				p.value = e.$el;
+				return;
+			}
+			p.value = e;
+		}
+		let S = e(() => ({
+			ref: x,
+			class: ["bing-sortable-list__handle", { "is-disabled": u.disabled }],
+			role: "button",
+			tabindex: u.disabled ? -1 : 0,
+			"aria-label": u.handleLabel,
+			"aria-disabled": u.disabled ? "true" : "false",
+			onKeydown: (e) => d("keyboard-move", e)
+		}));
+		return (e, a) => (i(), t("div", {
+			ref_key: "elementRef",
+			ref: f,
+			class: r(["bing-sortable-list__item", b.value]),
+			role: "listitem",
+			"aria-grabbed": y.value ? "true" : "false",
+			"data-bing-sortable-key": String(n.itemKey)
+		}, [o(e.$slots, "default", {
+			item: n.item,
+			key: n.itemKey,
+			index: n.index,
+			active: y.value,
+			dragging: v.value,
+			disabled: n.disabled,
+			handleProps: S.value
+		}, void 0, !0)], 10, c));
+	}
+});
+//#endregion
+export { l as default };

package/dist/components/BingSplitPane/BingSplitPane.js

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