@moubing/bing-ui 0.11.2 → 0.12.0

package/dist/components/BingForm/BingForm.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,300 @@
+import { useConfigSize as e } from "../../utils/config.js";
+import { bingFormContextKey as t, cloneErrors as n } from "./BingForm.context.js";
+import { isInActiveOverlayScope as r } from "../../utils/overlay.js";
+import { useFormNextHint as i } from "./useFormNextHint.js";
+import { computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, nextTick as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as ee, onMounted as te, openBlock as p, provide as m, reactive as ne, ref as h, renderSlot as re, toDisplayString as g, toRaw as _, unref as v, watch as y, withModifiers as ie } from "vue";
+//#region src/components/BingForm/BingForm.vue?vue&type=script&setup=true&lang.ts
+var ae = { class: "bing-form__layout" }, oe = ["data-target", "data-offscreen"], se = { class: "bing-form__next-hint-text" }, b = /* @__PURE__ */ l({
+	__name: "BingForm",
+	props: {
+		model: { default: void 0 },
+		schema: { default: void 0 },
+		layout: { default: "grid" },
+		columns: { default: () => ({
+			base: 1,
+			sm: 2,
+			xl: 5
+		}) },
+		gap: { default: () => ({
+			row: 12,
+			column: 16
+		}) },
+		labelPosition: { default: "top" },
+		labelWidth: { default: 112 },
+		size: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		validateTrigger: { default: "auto" },
+		scrollToError: {
+			type: Boolean,
+			default: !0
+		},
+		focusOnError: {
+			type: Boolean,
+			default: !0
+		},
+		nextStepHint: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["submit", "invalid"],
+	setup(l, { expose: b, emit: ce }) {
+		let x = l, S = ce, C = e(() => x.size), w = h(null), T = h(null), { context: le, hint: E, style: ue } = i(w, T, () => x.nextStepHint && !x.disabled), D = ne({}), O = /* @__PURE__ */ new Set(), k, A = 0, j = 0, M = !1, N = 0, P = 0, F = /* @__PURE__ */ new Set(), I = /* @__PURE__ */ new Map(), L = 0;
+		y(() => [x.model, x.schema], () => {
+			j += 1;
+		}, {
+			deep: !0,
+			flush: "sync"
+		});
+		let R = a(() => Array.isArray(x.validateTrigger) ? x.validateTrigger : [x.validateTrigger]), z = a(() => fe(x.columns, {
+			base: 1,
+			sm: 2,
+			xl: 5
+		})), B = a(() => U(x.labelWidth)), V = a(() => [
+			"bing-form",
+			`bing-form--${x.layout}`,
+			`bing-form--label-${x.labelPosition}`,
+			`bing-form--${C.value}`,
+			{ "is-disabled": x.disabled }
+		]), H = a(() => {
+			let e = z.value, t = de(x.gap);
+			return {
+				"--bing-form-columns-base": String(e.base),
+				"--bing-form-columns-sm": String(e.sm),
+				"--bing-form-columns-md": String(e.md),
+				"--bing-form-columns-lg": String(e.lg),
+				"--bing-form-columns-xl": String(e.xl),
+				"--bing-form-row-gap": t.row,
+				"--bing-form-column-gap": t.column,
+				"--bing-form-label-width": B.value
+			};
+		});
+		function U(e) {
+			return typeof e == "number" ? `${e}px` : e;
+		}
+		function de(e) {
+			if (typeof e == "string" || typeof e == "number") {
+				let t = U(e);
+				return {
+					row: t,
+					column: t
+				};
+			}
+			return {
+				row: U(e.row ?? 12),
+				column: U(e.column ?? 16)
+			};
+		}
+		function fe(e, t) {
+			let n = [
+				"base",
+				"sm",
+				"md",
+				"lg",
+				"xl"
+			], r = {
+				base: t.base ?? 1,
+				sm: t.sm ?? t.base ?? 1,
+				md: t.md ?? t.sm ?? t.base ?? 1,
+				lg: t.lg ?? t.md ?? t.sm ?? t.base ?? 1,
+				xl: t.xl ?? t.lg ?? t.md ?? t.sm ?? t.base ?? 1
+			};
+			if (typeof e == "number") return n.forEach((t) => {
+				r[t] = Math.max(1, Math.floor(e));
+			}), r;
+			let i = r.base;
+			return n.forEach((t) => {
+				let n = e[t];
+				typeof n == "number" && (i = Math.max(1, Math.floor(n))), r[t] = i;
+			}), r;
+		}
+		function W(e) {
+			let t = _(e);
+			if (typeof structuredClone == "function") try {
+				return structuredClone(t);
+			} catch {
+				return JSON.parse(JSON.stringify(t));
+			}
+			return JSON.parse(JSON.stringify(t));
+		}
+		function pe(e, t) {
+			Object.keys(e).forEach((n) => {
+				n in t || delete e[n];
+			}), Object.entries(W(t)).forEach(([t, n]) => {
+				e[t] = n;
+			});
+		}
+		function me(e) {
+			return e.length > 0 ? e.map(String).join(".") : "_form";
+		}
+		function he(e) {
+			let t = {};
+			return e.forEach((e) => {
+				let n = me(e.path);
+				t[n] ??= [], t[n].push(e.message);
+			}), t;
+		}
+		function G(e, t) {
+			return e === t || e.startsWith(`${t}.`) || t.startsWith(`${e}.`);
+		}
+		function ge(e) {
+			Object.keys(D).forEach((e) => {
+				delete D[e];
+			}), Object.entries(e).forEach(([e, t]) => {
+				D[e] = [...t];
+			});
+		}
+		function _e(e, t) {
+			Object.keys(D).forEach((t) => {
+				G(t, e) && delete D[t];
+			}), Object.entries(t).forEach(([t, n]) => {
+				G(t, e) && (D[t] = [...n]);
+			});
+		}
+		async function K(e) {
+			let t = {
+				id: ++A,
+				prop: e,
+				cancelled: !1
+			};
+			for (let t of F) t.prop === e && (t.cancelled = !0);
+			F.add(t), e ? I.set(e, t.id) : L = t.id;
+			try {
+				for (; !M && !t.cancelled;) {
+					let n = j, r = x.schema, i = r ? await r.safeParseAsync(W(x.model ?? {})) : void 0;
+					if (M || t.cancelled) return !1;
+					if (n !== j) continue;
+					let a = i && !i.success ? he(i.error.issues) : {}, o = Object.entries(a).filter(([t]) => !e || G(t, e)).length === 0;
+					if (e) t.id >= L && _e(e, a);
+					else {
+						let e = new Set([...Object.keys(D), ...Object.keys(a)]);
+						for (let n of e) [...I].some(([e, r]) => r > t.id && G(n, e)) || (a[n] ? D[n] = [...a[n]] : delete D[n]);
+					}
+					return o;
+				}
+				return !1;
+			} finally {
+				F.delete(t);
+			}
+		}
+		function q(e, t) {
+			return !e || e === "manual" || R.value.includes(e) ? !0 : R.value.includes("auto") ? e === "blur" || e === "submit" || e === "change" && !!(t && J(t).length) : !1;
+		}
+		function J(e) {
+			return Object.entries(D).filter(([t]) => G(t, e)).flatMap(([, e]) => e);
+		}
+		function Y() {
+			return n(D);
+		}
+		function X(e) {
+			N += 1;
+			for (let t of F) (!e || !t.prop || G(t.prop, e)) && (t.cancelled = !0);
+			if (e ? I.set(e, ++A) : (I.clear(), L = ++A), !e) {
+				ge({});
+				return;
+			}
+			Object.keys(D).forEach((t) => {
+				G(t, e) && delete D[t];
+			});
+		}
+		function ve(e) {
+			O.add(e);
+		}
+		function ye(e) {
+			O.delete(e);
+		}
+		function be() {
+			return [...O].filter((e) => J(e.prop).length > 0).sort((e, t) => {
+				let n = e.element(), r = t.element();
+				if (!n || !r) return 0;
+				let i = n.compareDocumentPosition(r);
+				return i & 4 ? -1 : i & 2 ? 1 : 0;
+			});
+		}
+		function Z(e = !1) {
+			let t = w.value;
+			if (!(!t || !r(t))) for (let t of be()) {
+				let n = t.target();
+				if (n) {
+					e && n.focus({ preventScroll: !0 }), x.scrollToError && t.scrollToField();
+					break;
+				}
+			}
+		}
+		async function xe() {
+			let e = A + 1, t = N, n = await K();
+			return !n && !M && L === e && t === N && (await u(), !M && L === e && t === N && Z()), n;
+		}
+		async function Q(e, t) {
+			return q(t, e) ? K(e) : J(e).length === 0;
+		}
+		function Se() {
+			x.model && k && pe(x.model, k), X();
+		}
+		async function Ce(e) {
+			if (x.disabled) return;
+			let t = ++N, n = w.value?.ownerDocument.activeElement, r = P, i = j, a = e, o = q("submit") ? await K() : !0;
+			if (M || x.disabled || t !== N) return;
+			let s = {
+				valid: o,
+				errors: Y(),
+				event: a
+			};
+			S("submit", s), o || (S("invalid", {
+				valid: o,
+				errors: s.errors
+			}), await u(), !M && !x.disabled && t === N && r === P && i === j && w.value?.ownerDocument.activeElement === n && Z(x.focusOnError));
+		}
+		function $() {
+			P += 1;
+		}
+		return te(() => {
+			k = x.model ? W(x.model) : void 0;
+		}), ee(() => {
+			M = !0, F.forEach((e) => {
+				e.cancelled = !0;
+			});
+		}), m(t, {
+			size: C,
+			disabled: a(() => x.disabled),
+			columns: z,
+			labelPosition: a(() => x.labelPosition),
+			labelWidth: B,
+			validateField: Q,
+			clearValidate: X,
+			getFieldErrors: J,
+			registerField: ve,
+			unregisterField: ye,
+			nextHint: le
+		}), b({
+			validate: xe,
+			validateField: (e) => Q(e),
+			clearValidate: X,
+			resetFields: Se,
+			getErrors: Y
+		}), (e, t) => (p(), s("form", {
+			ref_key: "rootRef",
+			ref: w,
+			class: d(V.value),
+			style: f(H.value),
+			novalidate: "",
+			onSubmit: ie(Ce, ["prevent"]),
+			onFocusinCapture: $,
+			onFocusoutCapture: $
+		}, [c("div", ae, [re(e.$slots, "default", {}, void 0, !0)]), v(E) ? (p(), s("span", {
+			key: 0,
+			ref_key: "nextHintRef",
+			ref: T,
+			class: "bing-form__next-hint",
+			style: f(v(ue)),
+			"data-target": v(E).target.id || void 0,
+			"data-offscreen": v(E).offscreen || void 0,
+			"aria-hidden": "true"
+		}, [c("span", se, g(v(E).text), 1), t[0] ||= c("kbd", null, "Tab", -1)], 12, oe)) : o("", !0)], 38));
+	}
+});
+//#endregion
+export { b as default };

package/dist/components/BingForm/formFocus.js

@@ -0,0 +1,13 @@
+//#region src/components/BingForm/formFocus.ts
+var e = "input:not([type=\"hidden\"]),textarea,select,button,[tabindex],[contenteditable=\"true\"]";
+function t(e) {
+	return !!(e?.isConnected && !e.matches(":disabled,[aria-disabled=\"true\"]") && !e.closest("[inert],[hidden]") && e.getClientRects().length > 0 && !["hidden", "collapse"].includes(e.ownerDocument.defaultView.getComputedStyle(e).visibility));
+}
+function n(n) {
+	if (!n) return null;
+	if (n.matches(e) && t(n)) return n;
+	let r = Array.from(n.querySelectorAll(e)).filter(t);
+	return r.find((e) => e === n.ownerDocument.activeElement) ?? r.find((e) => e.matches("input[type=\"radio\"]:checked")) ?? r[0] ?? null;
+}
+//#endregion
+export { n as findFormControlTarget };

package/dist/components/BingForm/formTabOrder.js

@@ -0,0 +1,27 @@
+//#region src/components/BingForm/formTabOrder.ts
+var e = "input,textarea,select,button,a[href],area[href],summary,iframe,object,embed,audio[controls],video[controls],[tabindex],[contenteditable]", t = "iframe,object,embed,audio[controls],video[controls],select,input[type=\"file\"],input[type=\"color\"],input[type=\"date\"],input[type=\"time\"],input[type=\"month\"],input[type=\"week\"],input[type=\"datetime-local\"],[contenteditable]:not([contenteditable=\"false\"])";
+function n(e) {
+	return !e.closest("[hidden],[inert]") && e.getClientRects().length > 0 && !["hidden", "collapse"].includes(e.ownerDocument.defaultView.getComputedStyle(e).visibility);
+}
+function r(e) {
+	return e.matches("input[type=\"radio\"]") && !!e.name;
+}
+function i(e, t) {
+	return e.name === t.name && e.form === t.form && e.getRootNode() === t.getRootNode();
+}
+function a(a, o) {
+	if (o.closest("form") !== a || o.shadowRoot || o.matches(t)) return null;
+	let s = Array.from(a.ownerDocument.body.querySelectorAll("*"));
+	if (s.some((e) => e.hasAttribute("tabindex") && e.tabIndex > 0)) return null;
+	let c = s.filter((r) => {
+		let i = r.shadowRoot || r.localName.includes("-") || r.matches(t);
+		return !i && !(r.matches(e) && r.tabIndex >= 0 && !r.matches(":disabled,input[type=\"hidden\"]")) ? !1 : n(r) || !!(i && !r.closest("[hidden],[inert]") && r.ownerDocument.defaultView.getComputedStyle(r).display === "contents");
+	}), l = c.filter((e) => {
+		if (!r(e)) return !0;
+		let t = c.filter((t) => r(t) && i(e, t));
+		return e === (t.find((e) => e === o) ?? t.find((e) => e.checked) ?? t[0]);
+	}), u = l.indexOf(o), d = u < 0 ? void 0 : l[u + 1];
+	return !d || d.closest("form") !== a || d.shadowRoot || d.localName.includes("-") || d.matches(t) ? null : d;
+}
+//#endregion
+export { a as nextFormTabStop };

package/dist/components/BingForm/useFormControl.d.ts

@@ -11,7 +11,7 @@ export declare function useFormControl<Size extends string | number>(props: {
 }): {
     formItem: import('./BingForm.context').BingFormItemContext | null;
     resolvedId: import('vue').ComputedRef<string>;
-    resolvedSize: import('vue').ComputedRef<import('./BingForm.types').BingFormSize | Size>;
+    resolvedSize: import('vue').ComputedRef<"sm" | "md" | "lg" | Size>;
     resolvedDisabled: import('vue').ComputedRef<boolean>;
     resolvedStatus: import('vue').ComputedRef<BingControlStatus>;
     resolvedAriaDescribedby: import('vue').ComputedRef<string | undefined>;

package/dist/components/BingForm/useFormControl.js

@@ -0,0 +1,24 @@
+import { useBingConfig as e } from "../../utils/config.js";
+import { bingFormContextKey as t, bingFormItemContextKey as n } from "./BingForm.context.js";
+import { computed as r, inject as i, onBeforeUnmount as a, provide as o, useId as s } from "vue";
+//#region src/components/BingForm/useFormControl.ts
+function c(o, c = {}) {
+	let l = i(n, null), u = i(t, null), d = e(), f = `bing-control-${s()}`, p = c.register === !1 ? void 0 : l?.nextControlId?.(f) ?? l?.controlId.value, m = r(() => o.id ?? p ?? f), h = r(() => o.size ?? l?.size.value ?? u?.size.value ?? d.size.value ?? "md"), g = r(() => o.disabled ?? l?.disabled.value ?? u?.disabled.value ?? !1), _ = r(() => o.status ?? l?.status.value ?? "default"), v = r(() => [...new Set([o.ariaDescribedby, l?.ariaDescribedby.value].filter(Boolean))].join(" ") || void 0), y = r(() => c.group ? l?.labelId?.value : void 0);
+	return c.register !== !1 && l?.registerControl && a(l.registerControl({
+		id: m,
+		group: c.group ?? !1
+	})), {
+		formItem: l,
+		resolvedId: m,
+		resolvedSize: h,
+		resolvedDisabled: g,
+		resolvedStatus: _,
+		resolvedAriaDescribedby: v,
+		resolvedAriaLabelledby: y
+	};
+}
+function l() {
+	o(n, null), o(t, null);
+}
+//#endregion
+export { l as isolateFormControls, c as useFormControl };

package/dist/components/BingForm/useFormNextHint.js

@@ -0,0 +1,135 @@
+import { isInActiveOverlayScope as e, onOverlayScopeChange as t } from "../../utils/overlay.js";
+import { nextFormTabStop as n } from "./formTabOrder.js";
+import { nextTick as r, onBeforeUnmount as i, onMounted as a, shallowRef as o, watch as s } from "vue";
+//#region src/components/BingForm/useFormNextHint.ts
+function c(c, l, u) {
+	let d = /* @__PURE__ */ new Set(), f = o(null), p = o({ visibility: "hidden" }), m, h = () => {}, g = !0;
+	function _(e) {
+		let t = e.ownerDocument, n = {
+			left: 0,
+			top: 0,
+			right: t.documentElement.clientWidth,
+			bottom: t.documentElement.clientHeight
+		};
+		for (let r = e.parentElement; r; r = r.parentElement) {
+			let e = t.defaultView.getComputedStyle(r), i = r.getBoundingClientRect();
+			/(auto|scroll|hidden|clip)/.test(e.overflowX) && (n.left = Math.max(n.left, i.left), n.right = Math.min(n.right, i.right)), /(auto|scroll|hidden|clip)/.test(e.overflowY) && (n.top = Math.max(n.top, i.top), n.bottom = Math.min(n.bottom, i.bottom));
+		}
+		return n;
+	}
+	function v(e) {
+		let t = e.getBoundingClientRect(), n = _(e);
+		return t.top >= n.top && t.bottom <= n.bottom && t.left >= n.left && t.right <= n.right;
+	}
+	function y(e) {
+		return [...d].find((t) => t.element() === e.closest(".bing-form-item"));
+	}
+	function b() {
+		let t = c.value, i = t?.ownerDocument.activeElement;
+		if (f.value = null, p.value = { visibility: "hidden" }, !u() || !g || !t || !i || !e(t)) return;
+		let a = y(i);
+		if (!a || i.closest("[aria-expanded=\"true\"]")) return;
+		let o = n(t, i);
+		if (!o || o.matches("[aria-disabled=\"true\"]")) return;
+		let s = (o instanceof HTMLButtonElement || o instanceof HTMLInputElement) && o.type === "submit" && o.form === t, l = y(o);
+		if (!s && (!l || l === a || l.target() !== o)) return;
+		let d = !v(o), m = d ? a.element() : s ? o : l?.element();
+		m && (f.value = {
+			target: o,
+			anchor: m,
+			offscreen: d,
+			submit: s,
+			text: d ? s ? "下一步：前往提交" : `下一项：${l.label()}` : s ? "前往提交" : "下一项"
+		}, r(x));
+	}
+	function x() {
+		let e = c.value, t = l.value, n = f.value;
+		if (!e || !t || !n || !u()) return;
+		let r = _(n.anchor), i = e.getBoundingClientRect(), a = n.anchor.getBoundingClientRect(), o = i.width / e.offsetWidth || 1, s = i.height / e.offsetHeight || 1, d = t.offsetHeight * s, m, h, g = Math.min(r.right - 4, i.right, a.right);
+		if (n.submit && !n.offscreen) m = a.left, h = a.top - d - 6, g = Math.min(r.right - 4, i.right);
+		else {
+			let e = n.anchor.querySelector(".bing-form-item__label"), t = e ? Array.from(e.children).filter((e) => !e.matches("kbd") && e.getBoundingClientRect().width > 0) : [];
+			if (!e || !t.length || n.anchor.classList.contains("bing-form-item--label-left")) return;
+			let r = e.getBoundingClientRect();
+			m = Math.max(...t.map((e) => e.getBoundingClientRect().right)) + 10, h = r.top + (r.height - d) / 2;
+		}
+		if (!(g - m < 88 * o || m < r.left || h < r.top || h + d > r.bottom)) {
+			if (n.submit && !n.offscreen) {
+				let n = m + Math.min(t.offsetWidth * o, g - m), r = e.querySelectorAll(".bing-form-item__control,.bing-form-item__label,.bing-form-item__message-text,button,a[href]");
+				if (Array.from(r).some((e) => {
+					let t = e.getBoundingClientRect();
+					return t.width > 0 && t.height > 0 && t.left < n && t.right > m && t.top < h + d && t.bottom > h;
+				})) return;
+			}
+			p.value = {
+				left: `${(m - i.left) / o - e.clientLeft + e.scrollLeft}px`,
+				top: `${(h - i.top) / s - e.clientTop + e.scrollTop}px`,
+				maxWidth: `${Math.min(280, (g - m) / o)}px`,
+				visibility: "visible"
+			};
+		}
+	}
+	function S() {
+		if (m?.(), m = void 0, f.value = null, !u() || !c.value) return;
+		let e = c.value, n = e.ownerDocument, r = n.defaultView, i = 0, a = !1;
+		h = () => {
+			!a && !i && (i = r.requestAnimationFrame(() => {
+				i = 0, b();
+			}));
+		};
+		let o = new MutationObserver((e) => {
+			e.some((e) => !l.value?.contains(e.target)) && h();
+		});
+		o.observe(e, {
+			subtree: !0,
+			childList: !0,
+			characterData: !0,
+			attributes: !0,
+			attributeFilter: [
+				"disabled",
+				"hidden",
+				"inert",
+				"tabindex",
+				"style",
+				"class",
+				"aria-expanded",
+				"aria-disabled",
+				"name",
+				"type",
+				"open"
+			]
+		});
+		let s = new ResizeObserver(h);
+		s.observe(e);
+		let d = t(n, h), p = [
+			"focusin",
+			"focusout",
+			"input",
+			"change",
+			"scroll"
+		];
+		p.forEach((e) => n.addEventListener(e, h, !0)), r.addEventListener("resize", h);
+		let _ = () => {
+			g = !1, C();
+		}, v = () => {
+			g = !0, h();
+		};
+		r.addEventListener("blur", _), r.addEventListener("focus", v), m = () => {
+			a = !0, r.cancelAnimationFrame(i), o.disconnect(), s.disconnect(), d(), p.forEach((e) => n.removeEventListener(e, h, !0)), r.removeEventListener("resize", h), r.removeEventListener("blur", _), r.removeEventListener("focus", v), h = () => {}, C();
+		}, h();
+	}
+	function C() {
+		f.value = null, p.value = { visibility: "hidden" };
+	}
+	return a(S), s(u, S, { flush: "post" }), i(() => m?.()), {
+		context: { register(e) {
+			return d.add(e), h(), () => {
+				d.delete(e), h();
+			};
+		} },
+		hint: f,
+		style: p
+	};
+}
+//#endregion
+export { c as useFormNextHint };

package/dist/components/BingFormItem/BingFormItem.js

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

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

@@ -6,7 +6,7 @@ declare var __VLS_1: {
     'aria-describedby': string | undefined;
     invalid: boolean;
     disabled: boolean;
-    size: import('..').BingFormSize;
+    size: import('..').BingConfigSize;
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;