@moubing/bing-ui 0.9.4 → 0.10.0

package/dist/bing-ui.es.js

@@ -926,7 +926,7 @@ function gt() {
 	};
 }
 //#endregion
-//#region src/components/BingInput/useInputCaret.ts
+//#region src/motion/useTextControlCaret.ts
 var _t = "(prefers-reduced-motion: reduce), (forced-colors: active), (pointer: coarse)", vt = new Set([
 	"text",
 	"search",
@@ -951,92 +951,111 @@ function xt(e, t, n, r) {
 	w(() => i()), ee(() => a()), S(() => {
 		let o = e.value, s = t.value, c = n.value;
 		if (!o || !s || !c) return;
-		let l = o.ownerDocument, u = l.defaultView, d = u.matchMedia(_t), f = !1, p = !1, m = !1, h = !1, g = !1, _ = 0, v = !1, y = !1, b, ee, x, S = "", C = NaN, w = 0, T = 0, E, D, O = l.createRange();
-		function k() {
-			g && (o.removeAttribute("data-smooth-caret"), c.removeAttribute("data-active")), g = !1, c.classList.contains("is-idle") && c.classList.remove("is-idle"), clearTimeout(b), D?.tween.pause();
+		let l = o.tagName === "TEXTAREA", u = () => l || vt.has(o.type), d = o.ownerDocument, f = d.defaultView, p = f.matchMedia(_t), m = !1, h = !1, g = !1, _ = !1, v = !1, y = 0, b = !1, ee = !1, x, S, C, w = "", T = NaN, E = NaN, D = 0, O = 0, k = 0, A, j, M, N = d.createRange();
+		function P() {
+			v && (o.removeAttribute("data-smooth-caret"), c.removeAttribute("data-active")), v = !1, c.classList.contains("is-idle") && c.classList.remove("is-idle"), clearTimeout(x), j?.tween.pause(), M?.tween.pause();
 		}
-		function A() {
-			clearTimeout(b), c.classList.remove("is-idle"), b = setTimeout(() => {
-				g && !h && c.classList.add("is-idle");
+		function F() {
+			clearTimeout(x), c.classList.remove("is-idle"), x = setTimeout(() => {
+				v && !_ && c.classList.add("is-idle");
 			}, 600);
 		}
-		function j() {
-			_ = 0;
-			let e = v, t = y;
-			if (v = y = !1, h) return;
-			let n = p && o.selectionDirection !== "backward" ? o.selectionEnd : o.selectionStart;
-			if (!f || !r() || o.disabled || o.readOnly || m || d.matches || l.hidden || !l.hasFocus() || l.activeElement !== o || !vt.has(o.type) || n === null || !p && n !== o.selectionEnd || yt.test(o.value)) {
-				k(), x && !vt.has(o.type) && (x.data = "");
+		function I() {
+			y = 0;
+			let e = b, t = ee;
+			if (b = ee = !1, _) return;
+			let n = h && o.selectionDirection !== "backward" ? o.selectionEnd : o.selectionStart;
+			if (!m || !r() || o.disabled || o.readOnly || g || p.matches || d.hidden || !d.hasFocus() || d.activeElement !== o || !u() || n === null || !h && n !== o.selectionEnd || yt.test(o.value)) {
+				P(), C && !u() && (C.data = "");
 				return;
 			}
-			let i = u.getComputedStyle(o);
+			let i = f.getComputedStyle(o);
 			if (i.direction !== "ltr" || i.writingMode !== "horizontal-tb" || !["start", "left"].includes(i.textAlign) || parseFloat(i.textIndent) !== 0 || !o.clientWidth) {
-				k();
+				P();
 				return;
 			}
-			ee || (ee = l.createElement("span"), ee.setAttribute("aria-hidden", "true"), ee.style.cssText = "position:absolute;left:0;top:0;visibility:hidden;white-space:pre;width:max-content;pointer-events:none;", x = l.createTextNode(""), ee.append(x), s.append(ee));
+			S || (S = d.createElement("span"), S.setAttribute("aria-hidden", "true"), S.style.cssText = "position:absolute;left:0;top:0;visibility:hidden;white-space:pre;width:max-content;pointer-events:none;", l && (S.style.cssText = "position:fixed;left:0;top:0;display:block;visibility:hidden;pointer-events:none;box-sizing:content-box;margin:0;padding:0;border:0;direction:ltr;", S.dataset.bingTextareaMeasure = ""), C = d.createTextNode(""), S.append(C), (l ? d.body : s).append(S));
 			let a = bt.map((e) => i[e]).join("|");
-			S !== a && (bt.forEach((e) => {
-				ee.style[e] = i[e];
-			}), S = a);
-			let b = o.value || "​";
-			x.data !== b && (x.data = b), O.setStart(x, n), O.collapse(!0);
-			let j = O.getClientRects();
-			if (!j.length) {
-				k();
+			if (w !== a && (bt.forEach((e) => {
+				S.style[e] = i[e];
+			}), w = a), l) {
+				let e = o.clientWidth - parseFloat(i.paddingLeft) - parseFloat(i.paddingRight);
+				if (e <= 0) {
+					P();
+					return;
+				}
+				for (let e of [
+					"lineHeight",
+					"whiteSpace",
+					"overflowWrap",
+					"wordBreak",
+					"tabSize"
+				]) S.style[e] !== i[e] && (S.style[e] = i[e]);
+				S.style.width !== `${e}px` && (S.style.width = `${e}px`);
+			}
+			let x = l ? o.value + "​" : o.value || "​";
+			C.data !== x && (C.data = x), N.setStart(C, n), N.collapse(!0);
+			let I = N.getClientRects();
+			if (!I.length) {
+				P();
 				return;
 			}
-			let M = ee.getBoundingClientRect(), N = s.getBoundingClientRect().width / s.clientWidth || 1, P = parseFloat(i.paddingLeft) || 0, F = o.offsetLeft + P + (j[0].left - M.left) / N - o.scrollLeft;
-			if (F < o.offsetLeft - 1 || F > o.offsetLeft + o.clientWidth + 1) {
-				k();
+			let L = S.getBoundingClientRect(), R = l ? 1 : s.getBoundingClientRect().width / s.clientWidth || 1, z = parseFloat(i.paddingLeft) || 0, B = I[0], V = o.offsetLeft + z + (B.left - L.left) / R - o.scrollLeft, te = Math.min(o.clientHeight, parseFloat(i.fontSize) * 1.2), ne = parseFloat(i.lineHeight) || B.height, H = Math.max(0, Math.round((B.top - L.top) / ne)), U = l ? o.offsetTop + parseFloat(i.paddingTop) + H * ne + (ne - te) / 2 - o.scrollTop : o.offsetTop + (o.clientHeight - te) / 2;
+			if (V < o.offsetLeft - 1 || V > o.offsetLeft + o.clientWidth + 1 || U + te <= o.offsetTop || U >= o.offsetTop + o.clientHeight) {
+				P();
 				return;
 			}
-			let I = Math.max(o.offsetLeft, Math.min(o.offsetLeft + o.clientWidth - 2, F)), L = Math.min(o.clientHeight, parseFloat(i.fontSize) * 1.2), R = o.offsetTop + (o.clientHeight - L) / 2, z = !g || Math.abs(C - I) > .1, B = w !== o.scrollLeft || T !== o.clientWidth;
-			D || (E = K.context(() => {
-				D = K.quickTo(c, "x", {
+			let W = Math.max(o.offsetLeft, Math.min(o.offsetLeft + o.clientWidth - 2, V)), G = !v || Math.abs(T - W) > .1 || Math.abs(E - U) > .1, re = D !== o.scrollLeft || O !== o.scrollTop || k !== o.clientWidth;
+			j || (A = K.context(() => {
+				j = K.quickTo(c, "x", {
 					duration: .09,
 					ease: "power2.out"
-				});
-			}, s)), !g || e || B ? (D(I, I), D.tween.progress(1).pause()) : z && D(I), c.style.height !== `${L}px` && (c.style.height = `${L}px`), c.style.top !== `${R}px` && (c.style.top = `${R}px`), c.style.color !== i.color && (c.style.color = i.color), g || (c.setAttribute("data-active", ""), o.setAttribute("data-smooth-caret", "")), g = !0, C = I, w = o.scrollLeft, T = o.clientWidth, (z || t) && A();
+				}), l && (M = K.quickTo(c, "y", {
+					duration: .09,
+					ease: "power2.out"
+				}));
+			}, s)), !v || e || re ? (j(W, W), j.tween.progress(1).pause(), M && (M(U, U), M.tween.progress(1).pause())) : G && (j(W), M?.(U)), c.style.height !== `${te}px` && (c.style.height = `${te}px`);
+			let ie = l ? "0px" : `${U}px`;
+			c.style.top !== ie && (c.style.top = ie), c.style.color !== i.color && (c.style.color = i.color), v || (c.setAttribute("data-active", ""), o.setAttribute("data-smooth-caret", "")), v = !0, T = W, E = U, D = o.scrollLeft, O = o.scrollTop, k = o.clientWidth, (G || t) && F();
 		}
-		function M(e = !1, t = !1) {
-			h || !f || (v ||= e, y ||= t, _ ||= u.requestAnimationFrame(j));
+		function L(e = !1, t = !1) {
+			_ || !m || (b ||= e, ee ||= t, y ||= f.requestAnimationFrame(I));
 		}
-		function N() {
-			h || !f || (u.cancelAnimationFrame(_), v = y = !0, j());
+		function R() {
+			_ || !m || (f.cancelAnimationFrame(y), b = ee = !0, I());
 		}
-		let P = () => M(), F = () => M(!0), I = () => M(!1, !0), L = () => k(), R = () => l.hidden ? k() : M(!0), z = () => N(), B = new ResizeObserver(F);
-		function V() {
-			f || (f = !0, l.addEventListener("selectionchange", P), l.addEventListener("pointerup", z), l.addEventListener("pointercancel", z), l.addEventListener("visibilitychange", R), u.addEventListener("blur", L), u.addEventListener("focus", F), u.addEventListener("resize", F), d.addEventListener("change", F), l.fonts?.addEventListener("loadingdone", F), B.observe(o), N(), M(!0, !0));
+		let z = () => L(), B = () => L(!0), V = () => L(!1, !0), te = () => P(), ne = () => d.hidden ? P() : L(!0), H = () => R(), U = new ResizeObserver(() => L());
+		function W() {
+			m || (m = !0, d.addEventListener("selectionchange", z), d.addEventListener("pointerup", H), d.addEventListener("pointercancel", H), d.addEventListener("visibilitychange", ne), f.addEventListener("blur", te), f.addEventListener("focus", B), f.addEventListener("resize", B), p.addEventListener("change", B), d.fonts?.addEventListener("loadingdone", B), U.observe(o), R(), L(!0, !0));
 		}
-		function te() {
-			f = p = m = !1, k(), u.cancelAnimationFrame(_), _ = 0, v = y = !1, l.removeEventListener("selectionchange", P), l.removeEventListener("pointerup", z), l.removeEventListener("pointercancel", z), l.removeEventListener("visibilitychange", R), u.removeEventListener("blur", L), u.removeEventListener("focus", F), u.removeEventListener("resize", F), d.removeEventListener("change", F), l.fonts?.removeEventListener("loadingdone", F), B.disconnect(), E?.revert(), E = D = void 0, ee?.remove(), ee = x = void 0, S = "";
-		}
-		let ne = {
-			focus: V,
-			blur: te,
-			input: I,
-			keydown: I,
-			keyup: P,
-			select: P,
-			scroll: F,
+		function G() {
+			m = h = g = !1, P(), f.cancelAnimationFrame(y), y = 0, b = ee = !1, d.removeEventListener("selectionchange", z), d.removeEventListener("pointerup", H), d.removeEventListener("pointercancel", H), d.removeEventListener("visibilitychange", ne), f.removeEventListener("blur", te), f.removeEventListener("focus", B), f.removeEventListener("resize", B), p.removeEventListener("change", B), d.fonts?.removeEventListener("loadingdone", B), U.disconnect(), A?.revert(), A = j = M = void 0, S?.remove(), S = C = void 0, w = "";
+		}
+		let re = {
+			focus: W,
+			blur: G,
+			input: V,
+			keydown: V,
+			keyup: z,
+			select: z,
+			scroll: B,
 			pointerdown: (e) => {
-				m ||= e.pointerType === "touch", m ? k() : M(!0, !0);
+				g ||= e.pointerType === "touch", g ? P() : L(!0, !0);
 			},
 			compositionstart: () => {
-				p = !0, M(!1, !0);
+				h = !0, L(!1, !0);
 			},
-			compositionupdate: I,
+			compositionupdate: V,
 			compositionend: () => {
-				p = !1, M(!1, !0);
+				h = !1, L(!1, !0);
 			}
 		};
-		for (let [e, t] of Object.entries(ne)) o.addEventListener(e, t);
-		i = () => M(), a = () => {
-			h = !0, te();
-			for (let [e, t] of Object.entries(ne)) o.removeEventListener(e, t);
+		for (let [e, t] of Object.entries(re)) o.addEventListener(e, t);
+		i = () => L(), a = () => {
+			_ = !0, G();
+			for (let [e, t] of Object.entries(re)) o.removeEventListener(e, t);
 			i = () => {};
-		}, l.activeElement === o && V();
+		}, d.activeElement === o && W();
 	});
 }
 //#endregion
@@ -2069,7 +2088,7 @@ var St = (e) => {
 			}, 8, ["aria-label"])) : o("", !0)])) : o("", !0)
 		], 16));
 	}
-}), [["__scopeId", "data-v-0e642a76"]]), Rn = /^(auto|scroll|overlay)$/, zn = [
+}), [["__scopeId", "data-v-75070b0c"]]), Rn = /^(auto|scroll|overlay)$/, zn = [
 	"button",
 	"input",
 	"select",
@@ -26689,6 +26708,10 @@ var pA = ["aria-grabbed", "data-bing-sortable-key"], mA = /* @__PURE__ */ Q(/* @
 			type: Boolean,
 			default: !0
 		},
+		smoothCaret: {
+			type: Boolean,
+			default: !0
+		},
 		rows: { default: 3 },
 		autosize: {
 			type: [Boolean, Object],
@@ -26725,8 +26748,10 @@ var pA = ["aria-grabbed", "data-bing-sortable-key"], mA = /* @__PURE__ */ Q(/* @
 		"keydown"
 	],
 	setup(e, { expose: t, emit: n }) {
-		V((e) => ({ v24ba19d8: e.resize }));
-		let r = e, l = n, { rootAttrs: u, controlAttrs: f } = gt(), { formItem: p, resolvedId: m, resolvedSize: h, resolvedDisabled: v, resolvedStatus: y, resolvedAriaDescribedby: b } = at(r), x = k(null), C = k(null), w = k(null), T, D, O = !1, A = i(() => r.modelValue.length > 0), j = i(() => r.clearable && !r.readonly && !v.value && A.value), M = i(() => r.modelValue.length), N = i(() => typeof r.maxLength == "number" ? `${M.value}/${r.maxLength}` : String(M.value)), P = i(() => [
+		V((e) => ({ v7511cae1: e.resize }));
+		let r = e, l = n, { rootAttrs: u, controlAttrs: f } = gt(), { formItem: p, resolvedId: m, resolvedSize: h, resolvedDisabled: v, resolvedStatus: y, resolvedAriaDescribedby: b } = at(r), x = k(null), C = k(null), w = k(null);
+		xt(x, C, w, () => r.smoothCaret);
+		let T = k(null), D = k(null), O, A, j = !1, M = i(() => r.modelValue.length > 0), N = i(() => r.clearable && !r.readonly && !v.value && M.value), P = i(() => r.modelValue.length), F = i(() => typeof r.maxLength == "number" ? `${P.value}/${r.maxLength}` : String(P.value)), L = i(() => [
 			"bing-textarea",
 			`bing-textarea--${h.value}`,
 			`bing-textarea--status-${y.value}`,
@@ -26734,13 +26759,13 @@ var pA = ["aria-grabbed", "data-bing-sortable-key"], mA = /* @__PURE__ */ Q(/* @
 				"is-block": r.block || !!p,
 				"is-disabled": v.value,
 				"is-invalid": y.value === "error",
-				"has-value": A.value,
-				"can-clear": j.value,
+				"has-value": M.value,
+				"can-clear": N.value,
 				"has-footer": r.showCount,
 				"is-resizable": r.resize !== "none"
 			}
 		]);
-		function F() {
+		function R() {
 			if (r.autosize === !0) return {
 				minRows: r.rows,
 				maxRows: void 0
@@ -26750,37 +26775,37 @@ var pA = ["aria-grabbed", "data-bing-sortable-key"], mA = /* @__PURE__ */ Q(/* @
 				maxRows: r.autosize.maxRows
 			};
 		}
-		function L() {
-			let e = x.value, t = F();
+		function B() {
+			let e = x.value, t = R();
 			if (!e) return;
 			if (!t) {
-				O &&= (e.style.height = "", e.style.overflowY = "", !1), C.value?.update();
+				j &&= (e.style.height = "", e.style.overflowY = "", !1), T.value?.update();
 				return;
 			}
-			O = !0;
+			j = !0;
 			let n = window.getComputedStyle(e), r = Number.parseFloat(n.lineHeight) || 20, i = Number.parseFloat(n.borderTopWidth) + Number.parseFloat(n.borderBottomWidth) + Number.parseFloat(n.paddingTop) + Number.parseFloat(n.paddingBottom), a = t.minRows * r + i, o = typeof t.maxRows == "number" ? t.maxRows * r + i : Infinity;
-			e.style.height = "0px", e.style.height = `${Math.max(a, Math.min(e.scrollHeight, o))}px`, e.style.overflowY = e.scrollHeight > o ? "auto" : "hidden", C.value?.update();
+			e.style.height = "0px", e.style.height = `${Math.max(a, Math.min(e.scrollHeight, o))}px`, e.style.overflowY = e.scrollHeight > o ? "auto" : "hidden", T.value?.update();
 		}
-		function R(e) {
+		function te(e) {
 			let t = e.target.value;
-			l("update:modelValue", t), l("input", t, e), p?.handleControlChange(), _(L);
+			l("update:modelValue", t), l("input", t, e), p?.handleControlChange(), _(B);
 		}
-		function B() {
-			j.value && (l("update:modelValue", ""), l("clear"), p?.handleControlChange(), _(L), x.value?.focus());
+		function ne() {
+			N.value && (l("update:modelValue", ""), l("clear"), p?.handleControlChange(), _(B), x.value?.focus());
 		}
-		function te(e) {
+		function H(e) {
 			l("focus", e);
 		}
-		function ne(e) {
+		function W(e) {
 			l("blur", e), p?.handleControlBlur();
 		}
-		function H(e) {
+		function re(e) {
 			e?.target instanceof Element && e.target.closest(".bing-scrollbar__rail") || x.value?.focus();
 		}
-		function W() {
+		function K() {
 			x.value?.blur();
 		}
-		function re() {
+		function q() {
 			x.value?.select();
 		}
 		return U(() => [
@@ -26789,33 +26814,33 @@ var pA = ["aria-grabbed", "data-bing-sortable-key"], mA = /* @__PURE__ */ Q(/* @
 			r.rows,
 			h.value
 		], () => {
-			_(L);
+			_(B);
 		}), S(() => {
-			if (L(), !w.value || typeof ResizeObserver > "u") return;
+			if (B(), !D.value || typeof ResizeObserver > "u") return;
 			let e = -1;
-			T = new ResizeObserver(([t]) => {
-				!t || t.contentRect.width === e || (e = t.contentRect.width, D !== void 0 && cancelAnimationFrame(D), D = requestAnimationFrame(() => {
-					D = void 0, L();
+			O = new ResizeObserver(([t]) => {
+				!t || t.contentRect.width === e || (e = t.contentRect.width, A !== void 0 && cancelAnimationFrame(A), A = requestAnimationFrame(() => {
+					A = void 0, B();
 				}));
-			}), T.observe(w.value);
+			}), O.observe(D.value);
 		}), ee(() => {
-			T?.disconnect(), D !== void 0 && cancelAnimationFrame(D);
+			O?.disconnect(), A !== void 0 && cancelAnimationFrame(A);
 		}), t({
 			get textarea() {
 				return x.value;
 			},
-			focus: H,
-			blur: W,
-			select: re
+			focus: re,
+			blur: K,
+			select: q
 		}), (t, n) => (E(), s("div", g(z(u)(), {
 			ref_key: "rootRef",
-			ref: w,
-			class: P.value,
-			onClick: H
+			ref: D,
+			class: L.value,
+			onClick: re
 		}), [
 			d(sr, {
 				ref_key: "scrollbarRef",
-				ref: C,
+				ref: T,
 				class: "bing-textarea__scroll",
 				smooth: !1,
 				focusable: !1,
@@ -26840,14 +26865,23 @@ var pA = ["aria-grabbed", "data-bing-sortable-key"], mA = /* @__PURE__ */ Q(/* @
 					"aria-label": e.ariaLabel || void 0,
 					"aria-describedby": z(b),
 					"aria-invalid": z(y) === "error" || void 0,
-					onInput: R,
-					onFocus: te,
-					onBlur: ne,
+					onInput: te,
+					onFocus: H,
+					onBlur: W,
 					onKeydown: n[0] ||= (e) => l("keydown", e)
-				}), null, 16, _A)]),
+				}), null, 16, _A), c("span", {
+					ref_key: "caretLayerRef",
+					ref: C,
+					class: "bing-textarea__caret-layer",
+					"aria-hidden": "true"
+				}, [c("span", {
+					ref_key: "caretRef",
+					ref: w,
+					class: "bing-textarea__caret"
+				}, null, 512)], 512)]),
 				_: 1
 			}, 512),
-			j.value ? (E(), a(mt, {
+			N.value ? (E(), a(mt, {
 				key: 0,
 				variant: "ghost",
 				size: "xs",
@@ -26856,7 +26890,7 @@ var pA = ["aria-grabbed", "data-bing-sortable-key"], mA = /* @__PURE__ */ Q(/* @
 				class: "bing-textarea__clear",
 				"aria-label": e.clearAriaLabel,
 				onMousedown: n[1] ||= ie(() => {}, ["prevent"]),
-				onClick: ie(B, ["stop"])
+				onClick: ie(ne, ["stop"])
 			}, {
 				prefix: G(() => [d(kn, {
 					icon: z(En),
@@ -26865,10 +26899,10 @@ var pA = ["aria-grabbed", "data-bing-sortable-key"], mA = /* @__PURE__ */ Q(/* @
 				}, null, 8, ["icon"])]),
 				_: 1
 			}, 8, ["aria-label"])) : o("", !0),
-			e.showCount ? (E(), s("span", vA, I(N.value), 1)) : o("", !0)
+			e.showCount ? (E(), s("span", vA, I(F.value), 1)) : o("", !0)
 		], 16));
 	}
-}), [["__scopeId", "data-v-fd9bf41f"]]), bA = [
+}), [["__scopeId", "data-v-df9f3a93"]]), bA = [
 	"top",
 	"bottom",
 	"left",