morya-ui 0.2.9 → 0.3.1

package/dist/listbox/index.js

@@ -1,26 +1,36 @@
-import { r as e } from "../useComponentAttrs-BTYEe61P.js";
+import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
 import { t } from "../useMenuKeyboard-BedmYE4W.js";
-import { t as n } from "../Scrollbar-BYnCO8fv.js";
+import { t as n } from "../Scrollbar-DTeJ8P5b.js";
 import { t as r } from "../useFieldFeedback-C5qIqYMK.js";
-import { o as i } from "../config-BdK5ccNT.js";
-import { n as a } from "../locale-B36KH7c3.js";
+import { t as i } from "../VirtualScroller-CHoFCmpP.js";
+import { o as a } from "../config-CapALqt3.js";
+import { n as o } from "../locale-Bzm2nbEp.js";
 import "./style.js";
-import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, mergeProps as m, normalizeClass as h, openBlock as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, useAttrs as S, vModelText as C, watch as w, withCtx as T, withDirectives as E } from "vue";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeProps as ee, nextTick as te, normalizeClass as g, openBlock as _, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, useAttrs as C, vModelText as w, watch as T, withCtx as E, withDirectives as ne } from "vue";
 //#region src/components/Listbox/Listbox.vue?vue&type=script&setup=true&lang.ts
-var D = [
+var re = [
 	"placeholder",
 	"disabled",
 	"aria-label"
-], O = [
+], ie = [
 	"aria-selected",
 	"disabled",
 	"tabindex",
 	"onClick",
 	"onFocus"
-], k = {
+], ae = [
+	"aria-selected",
+	"disabled",
+	"tabindex",
+	"onClick",
+	"onFocus"
+], oe = {
 	key: 0,
 	class: "m-listbox__empty"
-}, A = /* @__PURE__ */ p({
+}, se = {
+	key: 3,
+	class: "m-listbox__empty"
+}, ce = 80, D = /* @__PURE__ */ h({
 	inheritAttrs: !1,
 	__name: "Listbox",
 	props: {
@@ -45,113 +55,158 @@ var D = [
 		},
 		emptyMessage: {},
 		listStyle: {},
+		virtual: {
+			type: Boolean,
+			default: void 0
+		},
 		pt: {}
 	},
 	emits: ["update:modelValue"],
-	setup(p, { emit: A }) {
-		let j = p, M = A, N = S(), { rootAttrs: P } = e(N, () => j.pt), F = _(""), I = a(), L = i("Listbox", () => j.size), { isInvalid: R } = r(j), z = s(() => j.emptyMessage ?? I.value.emptyOptions), B = s(() => j.listStyle), V = s(() => {
-			let e = F.value.trim().toLowerCase();
-			return e ? j.options.filter((t) => t.label.toLowerCase().includes(e)) : j.options;
-		}), H = s(() => [
+	setup(h, { emit: D }) {
+		let O = h, k = D, A = C(), { rootAttrs: j } = e(A, () => O.pt), M = v(""), N = o(), P = a("Listbox", () => O.size), { isInvalid: F } = r(O), I = c(() => O.emptyMessage ?? N.value.emptyOptions), L = c(() => O.listStyle), R = c(() => {
+			let e = M.value.trim().toLowerCase();
+			return e ? O.options.filter((t) => t.label.toLowerCase().includes(e)) : O.options;
+		}), z = c(() => O.virtual === !1 ? !1 : O.virtual === !0 || R.value.length >= ce), B = c(() => P.value === "small" ? 28 : P.value === "large" ? 40 : 34), V = c(() => Math.min(280, Math.max(B.value * 5, R.value.length * B.value))), H = c(() => [
 			"m-listbox",
-			`m-listbox--${L.value}`,
+			`m-listbox--${P.value}`,
 			{
-				"m-listbox--disabled": j.disabled,
-				"m-listbox--multiple": j.multiple,
-				"m-listbox--invalid": R.value
+				"m-listbox--disabled": O.disabled,
+				"m-listbox--multiple": O.multiple,
+				"m-listbox--invalid": F.value
 			}
 		]);
 		function U(e) {
-			return j.multiple ? (Array.isArray(j.modelValue) ? j.modelValue : []).includes(e) : j.modelValue === e;
+			return O.multiple ? (Array.isArray(O.modelValue) ? O.modelValue : []).includes(e) : O.modelValue === e;
 		}
 		function W(e) {
-			if (!(j.disabled || e.disabled)) {
-				if (j.multiple) {
-					let t = Array.isArray(j.modelValue) ? [...j.modelValue] : [], n = t.indexOf(e.value);
-					n >= 0 ? t.splice(n, 1) : t.push(e.value), M("update:modelValue", t);
+			if (!(O.disabled || e.disabled)) {
+				if (O.multiple) {
+					let t = Array.isArray(O.modelValue) ? [...O.modelValue] : [], n = t.indexOf(e.value);
+					n >= 0 ? t.splice(n, 1) : t.push(e.value), k("update:modelValue", t);
 					return;
 				}
-				M("update:modelValue", e.value);
+				k("update:modelValue", e.value);
 			}
 		}
-		let G = _(null);
-		function K() {
-			return G.value?.$el ?? null;
+		function G(e) {
+			return e;
+		}
+		let K = v(null), q = v(null), J = v(null);
+		function Y() {
+			return z.value ? q.value : K.value?.$el ?? null;
 		}
-		let q = t({
-			itemCount: () => V.value.length,
-			isItemDisabled: (e) => !!V.value[e]?.disabled,
-			enabled: () => !j.disabled,
+		let X = t({
+			itemCount: () => R.value.length,
+			isItemDisabled: (e) => !!R.value[e]?.disabled,
+			enabled: () => !O.disabled,
 			onActivate: (e) => {
-				let t = V.value[e];
+				let t = R.value[e];
 				t && W(t);
 			}
 		});
-		function J(e) {
-			if (q.activeIndex.value >= 0) return q.tabindexFor(e);
-			let t = V.value.findIndex((e) => !e.disabled && U(e.value));
-			return e === (t >= 0 ? t : V.value.findIndex((e) => !e.disabled)) ? 0 : -1;
+		function Z(e) {
+			if (X.activeIndex.value >= 0) return X.tabindexFor(e);
+			let t = R.value.findIndex((e) => !e.disabled && U(e.value));
+			return e === (t >= 0 ? t : R.value.findIndex((e) => !e.disabled)) ? 0 : -1;
 		}
-		function Y() {
-			let e = q.activeIndex.value;
-			e < 0 || K()?.querySelectorAll(".m-listbox__option")[e]?.focus({ preventScroll: !0 });
+		async function Q() {
+			let e = X.activeIndex.value;
+			e < 0 || (z.value && (J.value?.scrollToIndex(e), await te()), (z.value ? q.value?.querySelector(`[data-index="${e}"] .m-listbox__option`) : Y()?.querySelectorAll(".m-listbox__option")[e])?.focus({ preventScroll: !0 }));
 		}
-		function X(e) {
-			q.onKeydown(e);
+		function $(e) {
+			X.onKeydown(e);
 		}
-		function Z(e) {
+		function le(e) {
 			[
 				"ArrowUp",
 				"ArrowDown",
 				"Home",
 				"End",
 				"Enter"
-			].includes(e.key) && (q.onKeydown(e), Y());
+			].includes(e.key) && (X.onKeydown(e), Q());
 		}
-		return w(q.activeIndex, () => {
-			K()?.contains(document.activeElement) && Y();
-		}), (e, t) => (g(), l("div", m(x(P), { class: H.value }), [p.filter ? E((g(), l("input", {
-			key: 0,
-			"onUpdate:modelValue": t[0] ||= (e) => F.value = e,
-			class: "m-listbox__filter",
-			type: "search",
-			placeholder: x(I).filterOptions,
-			disabled: p.disabled,
-			"aria-label": x(I).filterOptions,
-			onKeydown: Z
-		}, null, 40, D)), [[C, F.value]]) : c("", !0), f(n, {
-			ref_key: "list",
-			ref: G,
-			tag: "ul",
-			role: "listbox",
-			class: "m-listbox__list",
-			"fit-content": "",
-			"view-class": "m-listbox__list-view",
-			"view-style": B.value,
-			"aria-label": x(I).selectOption,
-			"aria-multiselectable": p.multiple || void 0,
-			onKeydown: X
-		}, {
-			default: T(() => [(g(!0), l(o, null, v(V.value, (t, n) => (g(), l("li", {
-				key: String(t.value),
-				role: "presentation"
-			}, [u("button", {
-				type: "button",
-				class: h(["m-listbox__option", { "m-listbox__option--selected": U(t.value) }]),
-				role: "option",
-				"aria-selected": U(t.value),
-				disabled: p.disabled || t.disabled,
-				tabindex: J(n),
-				onClick: (e) => W(t),
-				onFocus: (e) => x(q).setActive(n)
-			}, [y(e.$slots, "option", { option: t }, () => [d(b(t.label), 1)])], 42, O)]))), 128)), V.value.length ? c("", !0) : (g(), l("li", k, b(z.value), 1))]),
-			_: 3
-		}, 8, [
-			"view-style",
-			"aria-label",
-			"aria-multiselectable"
-		])], 16));
+		return T(X.activeIndex, () => {
+			Y()?.contains(document.activeElement) && Q();
+		}), (e, t) => (_(), d("div", ee(S(j), { class: H.value }), [
+			h.filter ? ne((_(), d("input", {
+				key: 0,
+				"onUpdate:modelValue": t[0] ||= (e) => M.value = e,
+				class: "m-listbox__filter",
+				type: "search",
+				placeholder: S(N).filterOptions,
+				disabled: h.disabled,
+				"aria-label": S(N).filterOptions,
+				onKeydown: le
+			}, null, 40, re)), [[w, M.value]]) : u("", !0),
+			z.value && R.value.length ? (_(), d("div", {
+				key: 1,
+				ref_key: "virtualHost",
+				ref: q,
+				class: "m-listbox__virtual-host",
+				onKeydown: $
+			}, [m(i, {
+				ref_key: "virtualList",
+				ref: J,
+				class: "m-listbox__list m-listbox__list--virtual",
+				role: "listbox",
+				"aria-label": S(N).selectOption,
+				items: R.value,
+				"item-size": B.value,
+				height: V.value,
+				buffer: 4
+			}, {
+				item: E(({ item: t, index: n }) => [f("button", {
+					type: "button",
+					class: g(["m-listbox__option", { "m-listbox__option--selected": U(G(t).value) }]),
+					role: "option",
+					"aria-selected": U(G(t).value),
+					disabled: h.disabled || G(t).disabled,
+					tabindex: Z(n),
+					onClick: (e) => W(G(t)),
+					onFocus: (e) => S(X).setActive(n)
+				}, [b(e.$slots, "option", { option: G(t) }, () => [p(x(G(t).label), 1)])], 42, ie)]),
+				_: 3
+			}, 8, [
+				"aria-label",
+				"items",
+				"item-size",
+				"height"
+			])], 544)) : (_(), l(n, {
+				key: 2,
+				ref_key: "list",
+				ref: K,
+				tag: "ul",
+				role: "listbox",
+				class: "m-listbox__list",
+				"fit-content": "",
+				"view-class": "m-listbox__list-view",
+				"view-style": L.value,
+				"aria-label": S(N).selectOption,
+				"aria-multiselectable": h.multiple || void 0,
+				onKeydown: $
+			}, {
+				default: E(() => [(_(!0), d(s, null, y(R.value, (t, n) => (_(), d("li", {
+					key: String(t.value),
+					role: "presentation"
+				}, [f("button", {
+					type: "button",
+					class: g(["m-listbox__option", { "m-listbox__option--selected": U(t.value) }]),
+					role: "option",
+					"aria-selected": U(t.value),
+					disabled: h.disabled || t.disabled,
+					tabindex: Z(n),
+					onClick: (e) => W(t),
+					onFocus: (e) => S(X).setActive(n)
+				}, [b(e.$slots, "option", { option: t }, () => [p(x(t.label), 1)])], 42, ae)]))), 128)), R.value.length ? u("", !0) : (_(), d("li", oe, x(I.value), 1))]),
+				_: 3
+			}, 8, [
+				"view-style",
+				"aria-label",
+				"aria-multiselectable"
+			])),
+			z.value && !R.value.length ? (_(), d("div", se, x(I.value), 1)) : u("", !0)
+		], 16));
 	}
 });
 //#endregion
-export { A as MListbox };
+export { D as MListbox };