@well-insight/ui 0.1.6 → 0.1.8

package/dist/scrollbar/style.js

@@ -0,0 +1,3 @@
+import '../theme/styles.css'
+import '../styles/base.css'
+import '../components/Scrollbar/styles.css'

package/dist/select/index.js

@@ -0,0 +1,362 @@
+import { n as e, t } from "../overlay-oR-5MDuE.js";
+import { c as n, i as ee, o as te } from "../config-DWwce9jA.js";
+import { n as ne, t as r } from "../locale-CYkJyRd1.js";
+import "./style.js";
+import { Fragment as i, Teleport as re, Transition as ie, computed as a, createBlock as ae, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as oe, defineComponent as l, nextTick as se, normalizeClass as u, normalizeStyle as ce, onBeforeUnmount as le, openBlock as d, ref as f, renderList as p, toDisplayString as m, unref as h, vModelText as ue, watch as de, withCtx as fe, withDirectives as pe, withModifiers as me } from "vue";
+//#region src/components/Select/Select.vue?vue&type=script&setup=true&lang.ts
+var he = ["for"], ge = [
+	"id",
+	"tabindex",
+	"aria-expanded",
+	"aria-controls",
+	"aria-invalid",
+	"aria-describedby",
+	"aria-disabled",
+	"aria-busy",
+	"aria-multiselectable"
+], _e = {
+	key: 0,
+	class: "wi-select__tags"
+}, ve = { class: "wi-select__tag-label" }, ye = [
+	"aria-label",
+	"disabled",
+	"onClick"
+], be = ["aria-label"], xe = {
+	key: 1,
+	class: "wi-select__value"
+}, Se = {
+	key: 2,
+	class: "wi-select__spinner",
+	"aria-hidden": "true"
+}, Ce = ["aria-label"], we = [
+	"id",
+	"aria-multiselectable",
+	"aria-label"
+], Te = ["placeholder", "aria-label"], Ee = {
+	key: 1,
+	class: "wi-select__empty",
+	role: "status"
+}, De = [
+	"aria-selected",
+	"disabled",
+	"onMouseenter",
+	"onClick"
+], Oe = {
+	key: 0,
+	class: "wi-select__check",
+	"aria-hidden": "true"
+}, ke = {
+	key: 2,
+	class: "wi-select__empty",
+	role: "status"
+}, Ae = ["required", "value"], je = ["id", "role"], g = /* @__PURE__ */ l({
+	__name: "Select",
+	props: {
+		modelValue: { default: void 0 },
+		options: {},
+		label: {},
+		helpText: {},
+		error: {
+			type: Boolean,
+			default: !1
+		},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		errorMessage: {},
+		id: {},
+		placeholder: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		size: {},
+		fluid: {
+			type: Boolean,
+			default: void 0
+		},
+		multiple: {
+			type: Boolean,
+			default: void 0
+		},
+		tag: {
+			type: Boolean,
+			default: void 0
+		},
+		remote: {
+			type: Boolean,
+			default: void 0
+		},
+		loading: {
+			type: Boolean,
+			default: void 0
+		},
+		maxTagCount: {},
+		showClear: {
+			type: Boolean,
+			default: void 0
+		},
+		emptyMessage: {},
+		filter: {
+			type: Boolean,
+			default: void 0
+		},
+		teleport: {
+			type: Boolean,
+			default: !0
+		},
+		appendTo: {},
+		placement: { default: "bottom-start" }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"clear",
+		"show",
+		"hide",
+		"search",
+		"create"
+	],
+	setup(l, { emit: g }) {
+		let _ = l, v = g, y = ee("Select"), b = n(), x = ne(), S = f(null), C = f(null), w = f(null), T = f(null), E = f(!1), D = f(""), O = f(-1), k = f({}), A = f([]), j = a(() => _.id ?? `wi-select-${Math.random().toString(36).slice(2, 8)}`), Me = a(() => _.emptyMessage ?? x.value.emptyOptions), M = a(() => _.multiple ?? y.value.multiple ?? !1), Ne = a(() => _.tag ?? y.value.tag ?? !1), N = a(() => _.remote ?? y.value.remote ?? !1), P = a(() => _.loading ?? !1), F = a(() => _.fluid ?? y.value.fluid ?? !1), Pe = a(() => _.showClear ?? y.value.showClear ?? !1), I = a(() => _.filter ?? y.value.filter ?? !1), Fe = te("Select", () => _.size), Ie = a(() => e(_, b.value.appendTo)), L = a(() => t(_, b.value.appendTo)), R = a(() => _.error || _.invalid || !!_.errorMessage), z = a(() => _.errorMessage || _.helpText), Le = a(() => !!_.errorMessage || R.value && !!_.helpText), B = a(() => M.value ? Array.isArray(_.modelValue) ? _.modelValue : _.modelValue == null ? [] : [_.modelValue] : _.modelValue == null || Array.isArray(_.modelValue) ? [] : [_.modelValue]), V = a(() => {
+			let e = new Set(_.options.map((e) => String(e.value))), t = [];
+			for (let n of A.value) e.has(String(n.value)) || (t.push(n), e.add(String(n.value)));
+			for (let n of B.value) e.has(String(n)) || (t.push({
+				label: String(n),
+				value: n
+			}), e.add(String(n)));
+			return [..._.options, ...t];
+		});
+		function Re(e) {
+			return V.value.find((t) => t.value === e);
+		}
+		let H = a(() => B.value.map((e) => Re(e) ?? {
+			label: String(e),
+			value: e
+		})), ze = a(() => {
+			let e = H.value;
+			return _.maxTagCount == null || e.length <= _.maxTagCount ? e : e.slice(0, _.maxTagCount);
+		}), U = a(() => Math.max(0, H.value.length - ze.value.length)), Be = a(() => M.value ? void 0 : H.value[0]), Ve = a(() => Be.value?.label ?? _.placeholder ?? x.value.selectPlaceholder), W = a(() => B.value.length > 0), He = a(() => Pe.value && W.value && !_.disabled), G = a(() => D.value.trim()), Ue = a(() => !Ne.value || !I.value || !G.value ? !1 : !V.value.some((e) => e.label.toLowerCase() === G.value.toLowerCase() || String(e.value) === G.value)), We = a(() => {
+			if (N.value) return _.options;
+			let e = G.value.toLowerCase();
+			return e ? V.value.filter((t) => t.label.toLowerCase().includes(e)) : V.value;
+		}), K = a(() => Ue.value ? [{
+			label: G.value,
+			value: G.value,
+			created: !0
+		}, ...We.value] : We.value), q = a(() => K.value.filter((e) => !e.disabled)), Ge = a(() => r(x.value.createOption, { value: G.value })), Ke = a(() => r(x.value.moreTags, { count: U.value }));
+		function J(e) {
+			return B.value.some((t) => t === e);
+		}
+		function Y(e) {
+			v("update:modelValue", e), v("change", e);
+		}
+		function qe() {
+			if (!L.value || !C.value) return;
+			let e = C.value.getBoundingClientRect(), t = b.value.zIndex ?? 1e3;
+			k.value = {
+				left: _.placement === "bottom-end" ? `${e.right}px` : `${e.left}px`,
+				minWidth: `${e.width}px`,
+				top: `${e.bottom + 8}px`,
+				zIndex: String(t),
+				..._.placement === "bottom-end" ? { transform: "translateX(-100%)" } : {}
+			};
+		}
+		function X(e) {
+			_.disabled || E.value === e || (E.value = e, e ? (D.value = "", O.value = Math.max(0, q.value.findIndex((e) => !e.created && J(e.value))), v("show"), se(() => {
+				qe(), I.value ? T.value?.focus({ preventScroll: !0 }) : w.value?.focus({ preventScroll: !0 });
+			})) : (D.value = "", v("hide")));
+		}
+		function Z(e) {
+			if (!e.disabled) {
+				if (e.created) {
+					Je();
+					return;
+				}
+				if (M.value) {
+					Y(J(e.value) ? B.value.filter((t) => t !== e.value) : [...B.value, e.value]);
+					return;
+				}
+				Y(e.value), X(!1), C.value?.focus({ preventScroll: !0 });
+			}
+		}
+		function Je() {
+			let e = G.value;
+			if (!e || !Ue.value) return;
+			let t = {
+				label: e,
+				value: e
+			};
+			A.value.some((e) => e.value === t.value) || (A.value = [...A.value, t]), v("create", t), Z({ ...t }), D.value = "";
+		}
+		function Ye(e, t) {
+			t.stopPropagation(), t.preventDefault(), !(_.disabled || !M.value) && Y(B.value.filter((t) => t !== e));
+		}
+		function Xe(e) {
+			e?.stopPropagation(), e?.preventDefault(), !(_.disabled || !W.value) && (Y(M.value ? [] : void 0), v("clear"), C.value?.focus({ preventScroll: !0 }));
+		}
+		function Ze(e) {
+			_.disabled || [
+				"Enter",
+				" ",
+				"ArrowDown",
+				"ArrowUp"
+			].includes(e.key) && (e.preventDefault(), E.value || X(!0));
+		}
+		function Qe(e) {
+			if (e.key === "Escape") {
+				e.preventDefault(), X(!1), C.value?.focus({ preventScroll: !0 });
+				return;
+			}
+			let t = q.value.length;
+			if (t && ((e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), O.value = (O.value + (e.key === "ArrowDown" ? 1 : -1) + t) % t), e.key === "Home" && (e.preventDefault(), O.value = 0), e.key === "End" && (e.preventDefault(), O.value = t - 1), e.key === "Enter" || e.key === " " && e.target !== T.value)) {
+				let t = q.value[O.value];
+				t && (e.preventDefault(), Z(t));
+			}
+		}
+		function Q(e) {
+			E.value && !S.value?.contains(e.target) && !w.value?.contains(e.target) && X(!1);
+		}
+		function $() {
+			E.value && qe();
+		}
+		return de(D, (e) => {
+			O.value = q.value.length ? 0 : -1, E.value && (I.value || N.value) && v("search", e);
+		}), de(E, (e) => {
+			e && N.value && v("search", D.value), e ? (document.addEventListener("click", Q), L.value && (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0))) : (document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
+		}), le(() => {
+			document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0);
+		}), (e, t) => (d(), s("div", {
+			ref_key: "root",
+			ref: S,
+			class: u(["wi-select-field", { "wi-select-field--fluid": F.value }])
+		}, [
+			l.label ? (d(), s("label", {
+				key: 0,
+				class: "wi-select-field__label",
+				for: j.value
+			}, m(l.label), 9, he)) : o("", !0),
+			c("div", { class: u(["wi-select__control", { "wi-select__control--clearable": He.value }]) }, [c("div", {
+				id: j.value,
+				ref_key: "trigger",
+				ref: C,
+				class: u(["wi-select", [`wi-select--${h(Fe)}`, {
+					"wi-select--error": R.value,
+					"wi-select--open": E.value,
+					"wi-select--placeholder": !W.value,
+					"wi-select--fluid": F.value,
+					"wi-select--multiple": M.value,
+					"wi-select--disabled": l.disabled,
+					"wi-select--loading": P.value
+				}]]),
+				role: "combobox",
+				tabindex: l.disabled ? -1 : 0,
+				"aria-expanded": E.value,
+				"aria-haspopup": "listbox",
+				"aria-controls": `${j.value}-listbox`,
+				"aria-invalid": R.value || void 0,
+				"aria-describedby": z.value ? `${j.value}-help` : void 0,
+				"aria-disabled": l.disabled || void 0,
+				"aria-busy": P.value || void 0,
+				"aria-multiselectable": M.value || void 0,
+				onClick: t[0] ||= (e) => X(!E.value),
+				onKeydown: Ze
+			}, [
+				M.value && W.value ? (d(), s("div", _e, [(d(!0), s(i, null, p(ze.value, (e) => (d(), s("span", {
+					key: String(e.value),
+					class: "wi-select__tag"
+				}, [c("span", ve, m(e.label), 1), c("button", {
+					class: "wi-select__tag-remove",
+					type: "button",
+					"aria-label": h(x).removeTag,
+					disabled: l.disabled,
+					onClick: (t) => Ye(e.value, t)
+				}, " × ", 8, ye)]))), 128)), U.value ? (d(), s("span", {
+					key: 0,
+					class: "wi-select__tag wi-select__tag--more",
+					"aria-label": Ke.value
+				}, " +" + m(U.value), 9, be)) : o("", !0)])) : (d(), s("span", xe, m(Ve.value), 1)),
+				P.value ? (d(), s("span", Se)) : o("", !0),
+				t[3] ||= c("span", {
+					class: "wi-select__indicator",
+					"aria-hidden": "true"
+				}, null, -1)
+			], 42, ge), He.value ? (d(), s("button", {
+				key: 0,
+				class: "wi-select__clear",
+				type: "button",
+				"aria-label": h(x).clear,
+				onClick: Xe
+			}, " × ", 8, Ce)) : o("", !0)], 2),
+			(d(), ae(re, {
+				to: Ie.value.to,
+				disabled: Ie.value.disabled
+			}, [oe(ie, { name: "wi-scale-fade" }, {
+				default: fe(() => [E.value ? (d(), s("div", {
+					key: 0,
+					id: `${j.value}-listbox`,
+					ref_key: "menu",
+					ref: w,
+					class: u(["wi-select__menu", [`wi-select__menu--${l.placement}`, { "wi-select__menu--teleported": L.value }]]),
+					style: ce(L.value ? k.value : void 0),
+					role: "listbox",
+					tabindex: "-1",
+					"aria-multiselectable": M.value || void 0,
+					"aria-label": l.label ?? l.placeholder ?? h(x).selectOption,
+					onKeydown: Qe
+				}, [
+					I.value ? pe((d(), s("input", {
+						key: 0,
+						ref_key: "filterInput",
+						ref: T,
+						"onUpdate:modelValue": t[1] ||= (e) => D.value = e,
+						class: "wi-select__filter",
+						type: "search",
+						placeholder: h(x).searchPlaceholder,
+						"aria-label": h(x).filterOptions,
+						onClick: t[2] ||= me(() => {}, ["stop"]),
+						onKeydown: me(Qe, ["stop"])
+					}, null, 40, Te)), [[ue, D.value]]) : o("", !0),
+					P.value ? (d(), s("div", Ee, m(h(x).loading), 1)) : o("", !0),
+					(d(!0), s(i, null, p(K.value, (e) => (d(), s("button", {
+						key: e.created ? `__create:${String(e.value)}` : String(e.value),
+						class: u(["wi-select__option", {
+							"wi-select__option--selected": !e.created && J(e.value),
+							"wi-select__option--highlighted": q.value[O.value]?.value === e.value && !!q.value[O.value]?.created == !!e.created,
+							"wi-select__option--create": e.created
+						}]),
+						type: "button",
+						role: "option",
+						"aria-selected": e.created ? void 0 : J(e.value),
+						disabled: e.disabled,
+						onMouseenter: (t) => !e.disabled && (O.value = q.value.findIndex((t) => t.value === e.value && !!t.created == !!e.created)),
+						onClick: (t) => Z(e)
+					}, [c("span", null, m(e.created ? Ge.value : e.label), 1), !e.created && J(e.value) ? (d(), s("span", Oe, "✓")) : o("", !0)], 42, De))), 128)),
+					!K.value.length && !P.value ? (d(), s("div", ke, m(Me.value), 1)) : o("", !0)
+				], 46, we)) : o("", !0)]),
+				_: 1
+			})], 8, ["to", "disabled"])),
+			l.required ? (d(), s("input", {
+				key: 1,
+				class: "wi-select__required-input",
+				tabindex: "-1",
+				"aria-hidden": "true",
+				required: !W.value,
+				value: M.value ? B.value.join(",") : B.value[0]
+			}, null, 8, Ae)) : o("", !0),
+			z.value ? (d(), s("span", {
+				key: 2,
+				id: `${j.value}-help`,
+				class: u(["wi-select-field__help", { "wi-select-field__help--error": Le.value }]),
+				role: Le.value ? "alert" : void 0
+			}, m(z.value), 11, je)) : o("", !0)
+		], 2));
+	}
+});
+//#endregion
+export { g as WiSelect };