@shtabapp/ui-kit 1.85.0 → 1.85.2

package/dist/SList-T_fgzdb3.js

@@ -1,477 +0,0 @@
-import { n as e, o as t, r as n, t as r } from "./useSelectionGroup-BCAmPf3R.js";
-import { t as ee } from "./useAriaAttrs-CxGRTeye.js";
-import { a as te, i as ne, n as i, r as re, s as ie, t as ae } from "./treeKeyboardNavigation-SmxTdnDz.js";
-import { i as oe, n as a, t as o } from "./SListItem-CQKZw5Uj.js";
-import { Fragment as s, computed as c, createBlock as l, createElementBlock as u, createElementVNode as se, createSlots as d, createVNode as f, defineComponent as p, mergeModels as m, mergeProps as h, nextTick as ce, normalizeClass as le, normalizeStyle as g, openBlock as _, provide as ue, renderList as de, renderSlot as v, unref as y, useId as fe, useModel as b, useSlots as pe, useTemplateRef as x, withCtx as S } from "vue";
-import { ESIconName as C, SSpinner as me, useUiKitI18n as he } from "@shtabapp/ui-kit-primitives";
-import { useVirtualizer as ge } from "@tanstack/vue-virtual";
-//#region src/components/SList/SList.types.ts
-var w = /* @__PURE__ */ function(e) {
-	return e.NONE = "none", e.TWO_X_SMALL = "2x-small", e.X_SMALL = "x-small", e.SMALL = "small", e.MEDIUM = "medium", e.X_MEDIUM = "x-medium", e.LARGE = "large", e.X_LARGE = "x-large", e.TWO_X_LARGE = "2x-large", e;
-}({}), T = w.TWO_X_SMALL, _e = {
-	[w.NONE]: "var(--s-ui-space-gap-none)",
-	[w.TWO_X_SMALL]: "var(--s-ui-space-gap-2x-small)",
-	[w.X_SMALL]: "var(--s-ui-space-gap-x-small)",
-	[w.SMALL]: "var(--s-ui-space-gap-small)",
-	[w.MEDIUM]: "var(--s-ui-space-gap-medium)",
-	[w.X_MEDIUM]: "var(--s-ui-space-gap-x-medium)",
-	[w.LARGE]: "var(--s-ui-space-gap-large)",
-	[w.X_LARGE]: "var(--s-ui-space-gap-x-large)",
-	[w.TWO_X_LARGE]: "var(--s-ui-space-gap-2x-large)"
-}, ve = {
-	[w.NONE]: 0,
-	[w.TWO_X_SMALL]: 2,
-	[w.X_SMALL]: 4,
-	[w.SMALL]: 8,
-	[w.MEDIUM]: 12,
-	[w.X_MEDIUM]: 16,
-	[w.LARGE]: 20,
-	[w.X_LARGE]: 24,
-	[w.TWO_X_LARGE]: 32
-}, ye = (e, t) => `s-ui-list-option-${e}-${t}`, E = (e, t) => {
-	let n = e[t];
-	if (typeof n == "string") return n;
-}, D = (e, t) => {
-	let n = e[t];
-	return typeof n == "boolean" ? n : !1;
-}, O = (e) => e in C, be = (e, t) => {
-	let n = e[t];
-	if (typeof n == "string" && n.length > 0 && O(n)) return n;
-}, xe = ["role", "aria-multiselectable"], Se = [
-	"role",
-	"aria-multiselectable",
-	"aria-activedescendant",
-	"tabindex"
-], Ce = ["data-index"], we = {
-	key: 0,
-	class: "s-ui-list__divider",
-	"aria-hidden": "true"
-}, Te = {
-	key: 0,
-	class: "s-ui-list__divider",
-	"aria-hidden": "true"
-}, Ee = {
-	key: 2,
-	class: "s-ui-list__static"
-}, k = /* @__PURE__ */ p({
-	inheritAttrs: !1,
-	__name: "SList",
-	props: /*@__PURE__*/ m({
-		items: {},
-		itemKey: {
-			type: [String, Function],
-			default: "id"
-		},
-		childrenKey: { default: "children" },
-		titleKey: { default: "title" },
-		subtitleKey: { default: "subtitle" },
-		iconLeftKey: { default: "iconLeft" },
-		disabledKey: { default: "disabled" },
-		itemProps: { type: Function },
-		selectionMode: { default: () => e.NONE },
-		mandatory: {
-			type: Boolean,
-			default: !1
-		},
-		virtual: { type: Boolean },
-		gap: { default: () => T },
-		estimateItemSize: { default: 36 },
-		overscan: { default: 5 },
-		endReachedDistance: { default: 0 },
-		canLoadMore: { type: Function },
-		height: { default: 320 },
-		maxHeight: {},
-		revealRight: {
-			type: Boolean,
-			default: !1
-		},
-		iconOnly: {
-			type: Boolean,
-			default: !1
-		},
-		expandOnClick: {
-			type: Boolean,
-			default: !1
-		},
-		selectedOnTop: {
-			type: Boolean,
-			default: !1
-		},
-		hasMoreChildrenKey: {},
-		loadingMoreChildrenKeys: { default: () => [] }
-	}, {
-		modelValue: {},
-		modelModifiers: {},
-		selected: {},
-		selectedModifiers: {},
-		expanded: { default: () => [] },
-		expandedModifiers: {}
-	}),
-	emits: /*@__PURE__*/ m([
-		"endReached",
-		"loadMoreChildren",
-		"itemClick"
-	], [
-		"update:modelValue",
-		"update:selected",
-		"update:expanded"
-	]),
-	setup(p, { expose: m, emit: C }) {
-		let w = b(p, "modelValue"), T = b(p, "selected"), O = b(p, "expanded"), k = C, A = pe(), { getRootAttrs: De, getAriaAttrs: Oe } = ee(), ke = fe(), j = x("scrollElementRef"), M = x("listRootElementRef"), Ae = c(() => ve[p.gap]), N = c(() => p.items !== void 0), P = c(() => N.value ? p.virtual === void 0 ? !0 : p.virtual : !1), { flatRows: F, toggleExpanded: I } = ie({
-			items: () => p.items ?? [],
-			childrenKey: () => p.childrenKey,
-			itemKey: () => p.itemKey,
-			expanded: O,
-			hasMoreChildrenKey: () => p.hasMoreChildrenKey,
-			selectedOnTop: () => p.selectedOnTop,
-			selectedKeys: () => T.value
-		}), { t: je } = he(), Me = c(() => new Set(p.loadingMoreChildrenKeys)), Ne = c(() => je("list.loadMore")), L = (e) => e.loadMoreForKey ? Me.value.has(e.loadMoreForKey) : !1, Pe = (e, t) => {
-			Me.value.has(e) || k("loadMoreChildren", {
-				key: e,
-				item: t
-			});
-		}, R = (e) => {
-			e.loadMoreForKey && Pe(e.loadMoreForKey, e.item);
-		}, z = (e) => ({
-			parentKey: e.loadMoreForKey ?? "",
-			parentItem: e.item,
-			depth: e.depth,
-			loading: L(e),
-			loadMore: () => {
-				R(e);
-			}
-		}), B = ge(c(() => ({
-			count: F.value.length,
-			getScrollElement: () => j.value,
-			estimateSize: () => p.estimateItemSize,
-			gap: Ae.value,
-			overscan: p.overscan
-		}))), V = c(() => {
-			if (N.value) return F.value.reduce((e, t) => (t.divider || e.push(t.key), e), []);
-		}), H = c(() => {
-			let e = /* @__PURE__ */ new Set();
-			for (let t of F.value) !t.loadMoreForKey && D(t.item, p.disabledKey) && e.add(t.key);
-			return e;
-		}), U = async (e) => {
-			if (!P.value) return;
-			let t = F.value.findIndex((t) => t.key === e);
-			t !== -1 && (B.value.scrollToIndex(t, { align: "auto" }), await new Promise((e) => {
-				requestAnimationFrame(() => {
-					e();
-				});
-			}), await ce());
-		}, W = (e) => ye(ke, e), G = t({
-			modelValue: () => T.value,
-			onUpdateModelValue: (e) => {
-				T.value = e;
-			},
-			mode: () => p.selectionMode,
-			mandatory: () => p.mandatory,
-			orientation: () => n.VERTICAL,
-			enableTabNavigation: !0,
-			focusMode: () => P.value ? r.ACTIVE_DESCENDANT : r.DOM,
-			orderedValues: V,
-			isValueDisabled: (e) => H.value.has(e),
-			onBeforeFocusItem: async (e) => {
-				await U(e);
-			},
-			onFocusGroup: () => {
-				j.value?.focus();
-			}
-		}), K = c(() => N.value && ae(F.value)), q = () => {
-			if (P.value) {
-				j.value?.focus();
-				return;
-			}
-			M.value?.focus();
-		}, J = () => {
-			G.focusedValue.value = void 0, w.value = void 0;
-			let e = document.activeElement;
-			e instanceof HTMLElement && e !== j.value && e.blur(), q();
-		}, Y = async (e) => {
-			P.value && await U(e);
-		}, Fe = async (e) => {
-			if (J(), e.type === "expand" || e.type === "collapse") {
-				I(e.rowKey), G.select(e.rowKey, !1), await Y(e.rowKey);
-				return;
-			}
-			G.select(e.rowKey, !1), await Y(e.rowKey);
-		}, Ie = async (e, t) => {
-			if (!K.value || e.key !== "ArrowUp" && e.key !== "ArrowDown") return !1;
-			let n = i(t, T.value), r = ne(e.key, n, F.value);
-			return r ? (e.preventDefault(), J(), G.select(r, !1), await Y(r), !0) : !1;
-		}, Le = async (e, t) => {
-			if (!K.value || e.key !== "ArrowLeft" && e.key !== "ArrowRight") return !1;
-			let n = i(t, T.value), r = re(e.key, n, F.value);
-			return r ? (e.preventDefault(), await Fe(r), !0) : !1;
-		}, X = () => {
-			if (w.value) return w.value;
-			let e = i("", T.value);
-			if (e) return e;
-			let t = V.value;
-			if (t) {
-				for (let e of t) if (!H.value.has(e)) return e;
-			}
-		}, Re = () => X(), ze = async (e) => {
-			let t = Re();
-			t && await Z(e, t);
-		}, Be = [
-			"Enter",
-			" ",
-			"Spacebar"
-		], Ve = (e, t) => {
-			if (!Be.includes(e.key)) return !1;
-			let n = F.value.find((e) => e.key === t);
-			return n?.loadMoreForKey ? (e.preventDefault(), Pe(n.loadMoreForKey, n.item), !0) : !1;
-		}, Z = async (e, t) => {
-			Ve(e, t) || await Ie(e, t) || await Le(e, t) || (await G.handleItemKeydown(e, t), w.value = G.focusedValue.value, !G.focusedValue.value && !P.value && q());
-		}, He = async (e) => {
-			let t = X();
-			t && await Z(e, t);
-		}, Ue = async (e) => {
-			if (P.value || e.target !== M.value) return;
-			let t = X();
-			t && await Z(e, t);
-		}, We = async () => {
-			let e = X();
-			if (!e) {
-				q();
-				return;
-			}
-			await G.focusItem(e, !1);
-		};
-		ue(oe, {
-			mode: () => p.selectionMode,
-			isSelected: G.isSelected,
-			selectItem: G.toggle,
-			registerItem: G.registerItem,
-			getItemTabIndex: G.getItemTabIndex,
-			getGroupTabIndex: G.getGroupTabIndex,
-			handleItemKeydown: Z,
-			activeKey: () => w.value,
-			setActiveKey: (e) => {
-				w.value = e;
-			},
-			isExpanded: (e) => O.value.includes(e),
-			toggleExpanded: (e) => {
-				if (N.value) {
-					I(e);
-					return;
-				}
-				let t = new Set(O.value);
-				t.has(e) ? t.delete(e) : t.add(e), O.value = [...t];
-			},
-			revealRight: () => p.revealRight,
-			iconOnly: () => p.iconOnly,
-			expandOnClick: () => p.expandOnClick,
-			getItemOptionId: (e) => {
-				if (P.value) return W(e);
-			},
-			usesActiveDescendantNavigation: () => P.value,
-			handlesTreeKeyboardNavigation: () => N.value,
-			itemRole: () => K.value ? a.TREEITEM : a.OPTION
-		});
-		let Ge = c(() => B.value.getVirtualItems()), Ke = c(() => Ge.value.flatMap((e) => {
-			let t = F.value[e.index];
-			return t ? [{
-				virtualRow: e,
-				flatRow: t
-			}] : [];
-		})), qe = c(() => B.value.getTotalSize()), Je = c(() => ({
-			height: `${qe.value}px`,
-			position: "relative",
-			width: "100%"
-		})), Ye = c(() => {
-			let e = {};
-			return typeof p.height == "number" ? e.height = `${p.height}px` : p.height && (e.height = p.height), p.maxHeight && (typeof p.maxHeight == "number" ? e.maxHeight = `${p.maxHeight}px` : e.maxHeight = p.maxHeight), e;
-		}), Xe = c(() => ({
-			"s-ui-list--virtual": P.value,
-			"s-ui-list--static": !P.value,
-			"s-ui-list--icon-only": p.iconOnly
-		})), Ze = c(() => ({ "--s-ui-list-gap": _e[p.gap] })), Q = c(() => ({ "s-ui-list__scroll--flat": N.value && !P.value })), Qe = c(() => {
-			if (p.selectionMode === e.MULTIPLE) return !0;
-		}), $e = c(() => K.value ? "tree" : "listbox"), et = c(() => {
-			if (!P.value) return $e.value;
-		}), tt = c(() => {
-			if (!P.value) return Qe.value;
-		}), nt = c(() => {
-			if (P.value) return G.getGroupTabIndex();
-		}), rt = c(() => w.value ? w.value : i("", T.value)), it = c(() => {
-			if (!P.value) return;
-			let e = rt.value;
-			if (e) return W(e);
-		});
-		te(() => j.value, {
-			distance: () => p.endReachedDistance,
-			canLoadMore: () => p.canLoadMore?.() ?? !0,
-			onEndReached: () => {
-				k("endReached", { direction: "bottom" });
-			}
-		});
-		let at = (e) => ({
-			position: "absolute",
-			top: 0,
-			left: 0,
-			width: "100%",
-			transform: `translateY(${e.start}px)`
-		}), ot = (e) => {
-			e instanceof HTMLElement && B.value.measureElement(e);
-		}, st = (e) => {
-			let t = e.item, n = {
-				rowKey: e.key,
-				depth: e.depth,
-				expandable: e.hasChildren,
-				expanded: e.expanded,
-				selected: G.isSelected(e.key),
-				active: w.value === e.key,
-				disabled: D(t, p.disabledKey),
-				title: E(t, p.titleKey),
-				subtitle: E(t, p.subtitleKey),
-				iconLeft: be(t, p.iconLeftKey),
-				revealRight: p.revealRight,
-				onClick: () => {
-					k("itemClick", {
-						key: e.key,
-						item: e.item
-					});
-				}
-			};
-			return p.itemProps ? {
-				...n,
-				...p.itemProps(t, e)
-			} : n;
-		}, $ = (e) => ({
-			...e,
-			revealRight: p.revealRight,
-			toggleExpanded: () => {
-				I(e.key);
-			}
-		});
-		return m({
-			focusNavigation: We,
-			handleKeyboardNavigation: He
-		}), (e, t) => (_(), u("div", h({
-			ref_key: "listRootElementRef",
-			ref: M,
-			class: ["s-ui-list", Xe.value],
-			style: Ze.value
-		}, P.value ? y(De)() : e.$attrs, {
-			role: et.value,
-			"aria-multiselectable": tt.value,
-			tabindex: "-1",
-			onKeydown: Ue
-		}), [N.value && P.value ? (_(), u("div", h({
-			key: 0,
-			ref_key: "scrollElementRef",
-			ref: j,
-			class: ["s-ui-list__scroll", Q.value],
-			style: Ye.value,
-			role: $e.value,
-			"aria-multiselectable": Qe.value,
-			"aria-activedescendant": it.value
-		}, y(Oe)(), {
-			tabindex: nt.value,
-			onKeydown: ze
-		}), [se("div", {
-			class: "s-ui-list__virtual-panel",
-			style: g(Je.value)
-		}, [(_(!0), u(s, null, de(Ke.value, (t) => (_(), u("div", {
-			key: t.virtualRow.index,
-			class: "s-ui-list__virtual-row",
-			"data-index": t.virtualRow.index,
-			ref_for: !0,
-			ref: ot,
-			style: g(at(t.virtualRow))
-		}, [t.flatRow.divider ? (_(), u("div", we)) : t.flatRow.loadMoreForKey ? (_(), u(s, { key: 1 }, [y(A).loadMore ? v(e.$slots, "loadMore", h({
-			key: 0,
-			ref_for: !0
-		}, z(t.flatRow))) : (_(), l(y(o), {
-			key: 1,
-			"row-key": t.flatRow.key,
-			depth: t.flatRow.depth,
-			tiny: "",
-			title: Ne.value,
-			onClick: (e) => R(t.flatRow)
-		}, d({ _: 2 }, [L(t.flatRow) ? {
-			name: "icon-left",
-			fn: S(() => [f(y(me), { size: 16 })]),
-			key: "0"
-		} : void 0]), 1032, [
-			"row-key",
-			"depth",
-			"title",
-			"onClick"
-		]))], 64)) : (_(), u(s, { key: 2 }, [y(A).item ? v(e.$slots, "item", h({
-			key: 0,
-			ref_for: !0
-		}, $(t.flatRow))) : (_(), l(y(o), h({
-			key: 1,
-			ref_for: !0
-		}, st(t.flatRow)), d({ _: 2 }, [
-			y(A).itemIconLeft ? {
-				name: "icon-left",
-				fn: S(() => [v(e.$slots, "itemIconLeft", h({ ref_for: !0 }, $(t.flatRow)))]),
-				key: "0"
-			} : void 0,
-			y(A).itemTitle ? {
-				name: "title",
-				fn: S(() => [v(e.$slots, "itemTitle", h({ ref_for: !0 }, $(t.flatRow)))]),
-				key: "1"
-			} : void 0,
-			y(A).itemSubtitle ? {
-				name: "subtitle",
-				fn: S(() => [v(e.$slots, "itemSubtitle", h({ ref_for: !0 }, $(t.flatRow)))]),
-				key: "2"
-			} : void 0
-		]), 1040))], 64))], 12, Ce))), 128))], 4)], 16, Se)) : N.value ? (_(), u("div", {
-			key: 1,
-			ref_key: "scrollElementRef",
-			ref: j,
-			class: le(["s-ui-list__scroll", Q.value]),
-			style: g(Ye.value)
-		}, [(_(!0), u(s, null, de(y(F), (t) => (_(), u(s, { key: t.key }, [t.divider ? (_(), u("div", Te)) : t.loadMoreForKey ? (_(), u(s, { key: 1 }, [y(A).loadMore ? v(e.$slots, "loadMore", h({
-			key: 0,
-			ref_for: !0
-		}, z(t))) : (_(), l(y(o), {
-			key: 1,
-			"row-key": t.key,
-			depth: t.depth,
-			tiny: "",
-			title: Ne.value,
-			onClick: (e) => R(t)
-		}, d({ _: 2 }, [L(t) ? {
-			name: "icon-left",
-			fn: S(() => [f(y(me), { size: 16 })]),
-			key: "0"
-		} : void 0]), 1032, [
-			"row-key",
-			"depth",
-			"title",
-			"onClick"
-		]))], 64)) : (_(), u(s, { key: 2 }, [y(A).item ? v(e.$slots, "item", h({
-			key: 0,
-			ref_for: !0
-		}, $(t))) : (_(), l(y(o), h({
-			key: 1,
-			ref_for: !0
-		}, st(t)), d({ _: 2 }, [
-			y(A).itemIconLeft ? {
-				name: "icon-left",
-				fn: S(() => [v(e.$slots, "itemIconLeft", h({ ref_for: !0 }, $(t)))]),
-				key: "0"
-			} : void 0,
-			y(A).itemTitle ? {
-				name: "title",
-				fn: S(() => [v(e.$slots, "itemTitle", h({ ref_for: !0 }, $(t)))]),
-				key: "1"
-			} : void 0,
-			y(A).itemSubtitle ? {
-				name: "subtitle",
-				fn: S(() => [v(e.$slots, "itemSubtitle", h({ ref_for: !0 }, $(t)))]),
-				key: "2"
-			} : void 0
-		]), 1040))], 64))], 64))), 128))], 6)) : (_(), u("div", Ee, [v(e.$slots, "default")]))], 16, xe));
-	}
-});
-//#endregion
-export { w as a, E as i, D as n, be as r, k as t };