@well-insight/ui 0.1.9 → 0.1.11

package/dist/auto-complete/index.js

@@ -1,24 +1,25 @@
-import { t as e } from "../Icon-B6gOD07E.js";
+import { t as e } from "../Icon-DHGs8l-M.js";
 import { n as t, t as n } from "../overlay-oR-5MDuE.js";
-import { c as ee, o as te } from "../config-DWwce9jA.js";
-import { n as ne } from "../locale-CYkJyRd1.js";
+import { t as r } from "../overlayPlacement-CN1tuC95.js";
+import { c as i, o as a } from "../config-CTLkobga.js";
+import { n as o } from "../locale-DxAvgqgB.js";
 import "./style.js";
-import { Fragment as r, Teleport as i, Transition as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, nextTick as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as g, openBlock as _, ref as v, renderList as re, toDisplayString as y, unref as b, watch as x, withCtx as S, withModifiers as C } from "vue";
+import { Fragment as s, Teleport as ee, Transition as te, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, nextTick as h, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as v, openBlock as y, ref as b, renderList as x, toDisplayString as S, unref as C, watch as w, withCtx as T, withModifiers as E } from "vue";
 //#region src/components/AutoComplete/AutoComplete.vue?vue&type=script&setup=true&lang.ts
-var w = [
+var D = [
 	"value",
 	"placeholder",
 	"disabled",
 	"aria-expanded",
 	"aria-busy"
-], T = {
+], O = {
 	key: 0,
 	class: "wi-autocomplete__spinner",
 	"aria-hidden": "true"
-}, E = ["aria-label"], D = ["aria-label", "disabled"], O = {
+}, ne = ["aria-label"], re = ["aria-label", "disabled"], ie = {
 	key: 0,
 	class: "wi-autocomplete__status"
-}, k = ["aria-selected", "onMousedown"], A = /* @__PURE__ */ f({
+}, ae = ["aria-selected", "onMousedown"], k = /* @__PURE__ */ m({
 	__name: "AutoComplete",
 	props: {
 		modelValue: { default: "" },
@@ -47,160 +48,166 @@ var w = [
 		},
 		appendTo: {}
 	},
-	emits: ["update:modelValue", "complete"],
-	setup(f, { emit: A }) {
-		let j = f, M = A, N = ee(), P = ne(), F = te("AutoComplete", () => j.size), I = v(!1), L = v(null), R = v(null), z = v(null), B = v({}), V = v(-1), H = o(() => t(j, N.value.appendTo)), U = o(() => n(j, N.value.appendTo));
-		function W(e) {
+	emits: [
+		"update:modelValue",
+		"complete",
+		"clear"
+	],
+	setup(m, { emit: k }) {
+		let A = m, j = k, M = i(), N = o(), P = a("AutoComplete", () => A.size), F = b(!1), I = b(null), L = b(null), R = b(null), z = b({}), B = b(-1), V = c(() => t(A, M.value.appendTo)), H = c(() => n(A, M.value.appendTo));
+		function U(e) {
 			return typeof e == "string" ? {
 				label: e,
 				value: e
 			} : e;
 		}
-		let G = o(() => j.suggestions.map(W)), K = o(() => {
-			let e = (j.modelValue ?? "").trim().toLowerCase();
-			return e ? G.value.filter((t) => t.label.toLowerCase().includes(e) || t.value.toLowerCase().includes(e)) : G.value;
-		}), q = o(() => j.clearable && !!j.modelValue && !j.disabled), J = o(() => [
+		let W = c(() => A.suggestions.map(U)), G = c(() => {
+			let e = (A.modelValue ?? "").trim().toLowerCase();
+			return e ? W.value.filter((t) => t.label.toLowerCase().includes(e) || t.value.toLowerCase().includes(e)) : W.value;
+		}), K = c(() => A.clearable && !!A.modelValue && !A.disabled), q = c(() => [
 			"wi-autocomplete",
-			`wi-autocomplete--${F.value}`,
+			`wi-autocomplete--${P.value}`,
 			{
-				"wi-autocomplete--disabled": j.disabled,
-				"wi-autocomplete--open": I.value,
-				"wi-autocomplete--loading": j.loading
+				"wi-autocomplete--disabled": A.disabled,
+				"wi-autocomplete--open": F.value,
+				"wi-autocomplete--loading": A.loading
 			}
 		]);
-		function Y() {
-			if (!U.value || !R.value) return;
-			let e = R.value.getBoundingClientRect();
-			B.value = {
-				left: `${e.left}px`,
-				width: `${e.width}px`,
-				top: `${e.bottom + 8}px`
-			};
+		function J() {
+			if (!H.value || !L.value) return;
+			let e = L.value.getBoundingClientRect(), t = `${e.width}px`;
+			z.value = r(e, "bottom-start", {
+				minWidth: t,
+				width: t
+			});
 		}
-		function X(e) {
-			M("complete", e), I.value = !0, V.value = K.value.length ? 0 : -1, p(() => Y());
+		function Y(e) {
+			j("complete", e), F.value = !0, B.value = G.value.length ? 0 : -1, h(() => J());
 		}
-		function ie(e) {
-			if (j.disabled) return;
+		function oe(e) {
+			if (A.disabled) return;
 			let t = e.target.value;
-			M("update:modelValue", t), X(t);
+			j("update:modelValue", t), Y(t);
 		}
-		function Z(e) {
-			j.disabled || (M("update:modelValue", e.value), I.value = !1);
+		function X(e) {
+			A.disabled || (j("update:modelValue", e.value), F.value = !1);
 		}
-		function ae() {
-			j.disabled || (M("update:modelValue", ""), X(""));
+		function se() {
+			A.disabled || (j("update:modelValue", ""), j("clear"), Y(""));
 		}
-		function oe() {
-			if (!j.disabled) {
-				if (I.value) {
-					I.value = !1;
+		function ce() {
+			if (!A.disabled) {
+				if (F.value) {
+					F.value = !1;
 					return;
 				}
-				X(j.modelValue ?? "");
+				Y(A.modelValue ?? "");
 			}
 		}
-		function se(e) {
-			if (!I.value && (e.key === "ArrowDown" || e.key === "Enter")) {
-				X(j.modelValue ?? "");
+		function Z(e) {
+			if (!F.value && (e.key === "ArrowDown" || e.key === "Enter")) {
+				Y(A.modelValue ?? "");
 				return;
 			}
-			if (I.value) {
+			if (F.value) {
 				if (e.key === "Escape") {
-					I.value = !1;
+					F.value = !1;
 					return;
 				}
 				if (e.key === "ArrowDown" || e.key === "ArrowUp") {
 					e.preventDefault();
-					let t = K.value.length;
+					let t = G.value.length;
 					if (!t) return;
 					let n = e.key === "ArrowDown" ? 1 : -1;
-					V.value = (V.value + n + t) % t;
+					B.value = (B.value + n + t) % t;
 				}
-				if (e.key === "Enter" && V.value >= 0) {
+				if (e.key === "Enter" && B.value >= 0) {
 					e.preventDefault();
-					let t = K.value[V.value];
-					t != null && Z(t);
+					let t = G.value[B.value];
+					t != null && X(t);
 				}
 			}
 		}
 		function Q(e) {
 			let t = e.target;
-			L.value?.contains(t) || z.value?.contains(t) || (I.value = !1);
+			I.value?.contains(t) || R.value?.contains(t) || (F.value = !1);
 		}
 		function $() {
-			I.value && Y();
+			F.value && J();
 		}
-		x(I, async (e) => {
-			e ? (document.addEventListener("click", Q), U.value && (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0)), await p(), Y()) : (document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
-		}), x(K, (e) => {
-			e.length ? V.value >= e.length && (V.value = 0) : V.value = -1;
-		}), g(() => {
+		w(F, async (e) => {
+			e ? (document.addEventListener("click", Q), H.value && (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0)), await h(), J()) : (document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
+		}), w(G, (e) => {
+			e.length ? B.value >= e.length && (B.value = 0) : B.value = -1;
+		}), v(() => {
 			document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0);
 		});
-		let ce = o(() => I.value && (K.value.length > 0 || j.loading));
-		return (t, n) => (_(), l("div", {
+		let le = c(() => F.value && (G.value.length > 0 || A.loading));
+		return (t, n) => (y(), d("div", {
 			ref_key: "root",
-			ref: L,
-			class: m(J.value)
-		}, [u("div", {
+			ref: I,
+			class: g(q.value)
+		}, [f("div", {
 			ref_key: "trigger",
-			ref: R,
+			ref: L,
 			class: "wi-autocomplete__control"
 		}, [
-			u("input", {
+			f("input", {
 				class: "wi-autocomplete__input",
 				type: "text",
 				role: "combobox",
-				value: f.modelValue,
-				placeholder: f.placeholder,
-				disabled: f.disabled,
-				"aria-expanded": I.value,
-				"aria-busy": f.loading || void 0,
+				value: m.modelValue,
+				placeholder: m.placeholder,
+				disabled: m.disabled,
+				"aria-expanded": F.value,
+				"aria-busy": m.loading || void 0,
 				"aria-autocomplete": "list",
-				onInput: ie,
-				onKeydown: se,
-				onFocus: n[0] ||= (e) => X(f.modelValue ?? "")
-			}, null, 40, w),
-			f.loading ? (_(), l("span", T)) : q.value ? (_(), l("button", {
+				onInput: oe,
+				onKeydown: Z,
+				onFocus: n[0] ||= (e) => Y(m.modelValue ?? "")
+			}, null, 40, D),
+			m.loading ? (y(), d("span", O)) : K.value ? (y(), d("button", {
 				key: 1,
 				type: "button",
 				class: "wi-autocomplete__clear",
-				"aria-label": b(P).clearInput,
-				onClick: ae
-			}, " × ", 8, E)) : c("", !0),
-			f.dropdown ? (_(), l("button", {
+				"aria-label": C(N).clearInput,
+				onClick: se
+			}, [p(e, {
+				name: "close",
+				size: "sm"
+			})], 8, ne)) : u("", !0),
+			m.dropdown ? (y(), d("button", {
 				key: 2,
 				type: "button",
 				class: "wi-autocomplete__dropdown",
-				"aria-label": b(P).showSuggestions,
-				disabled: f.disabled,
-				onClick: oe
-			}, [d(e, {
+				"aria-label": C(N).showSuggestions,
+				disabled: m.disabled,
+				onClick: ce
+			}, [p(e, {
 				name: "chevron-down",
 				size: "sm"
-			})], 8, D)) : c("", !0)
-		], 512), (_(), s(i, {
-			to: H.value.to,
-			disabled: H.value.disabled
-		}, [d(a, { name: "wi-scale-fade" }, {
-			default: S(() => [ce.value ? (_(), l("ul", {
+			})], 8, re)) : u("", !0)
+		], 512), (y(), l(ee, {
+			to: V.value.to,
+			disabled: V.value.disabled
+		}, [p(te, { name: "wi-scale-fade" }, {
+			default: T(() => [le.value ? (y(), d("ul", {
 				key: 0,
 				ref_key: "panel",
-				ref: z,
-				class: m(["wi-autocomplete__panel", { "wi-autocomplete__panel--teleported": U.value }]),
-				style: h(U.value ? B.value : void 0),
+				ref: R,
+				class: g(["wi-autocomplete__panel", { "wi-autocomplete__panel--teleported": H.value }]),
+				style: _(H.value ? z.value : void 0),
 				role: "listbox"
-			}, [f.loading && !K.value.length ? (_(), l("li", O, y(b(P).loading), 1)) : c("", !0), (_(!0), l(r, null, re(K.value, (e, t) => (_(), l("li", {
+			}, [m.loading && !G.value.length ? (y(), d("li", ie, S(C(N).loading), 1)) : u("", !0), (y(!0), d(s, null, x(G.value, (e, t) => (y(), d("li", {
 				key: `${e.value}-${t}`,
-				class: m(["wi-autocomplete__item", { "wi-autocomplete__item--active": t === V.value }]),
+				class: g(["wi-autocomplete__item", { "wi-autocomplete__item--active": t === B.value }]),
 				role: "option",
-				"aria-selected": t === V.value,
-				onMousedown: C((t) => Z(e), ["prevent"])
-			}, y(e.label), 43, k))), 128))], 6)) : c("", !0)]),
+				"aria-selected": t === B.value,
+				onMousedown: E((t) => X(e), ["prevent"])
+			}, S(e.label), 43, ae))), 128))], 6)) : u("", !0)]),
 			_: 1
 		})], 8, ["to", "disabled"]))], 2));
 	}
 });
 //#endregion
-export { A as WiAutoComplete };
+export { k as WiAutoComplete };