@shtabapp/ui-kit 1.84.0 → 1.85.1

package/dist/components/SList/SList.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,631 @@
+import { ESelectionFocusMode, ESelectionMode, ESelectionOrientation, useSelectionGroup } from "../../composables/useSelectionGroup.js";
+import { useAriaAttrs } from "../../composables/useAriaAttrs.js";
+import { useFlatTreeList } from "../../composables/useFlatTreeList.js";
+import { useSListEndReached } from "../../composables/useSListEndReached.js";
+import { sListInjectionKey } from "./utils/context.js";
+import { ESListItemRole } from "../SListItem/SListItem.types.js";
+import SListItem_default from "../SListItem/SListItem.vue.js";
+import { DEFAULT_LIST_GAP, LIST_GAP_CSS_VAR, LIST_GAP_PX } from "./utils/listGapTokens.js";
+import { buildListItemOptionId } from "./utils/listOptionId.js";
+import { resolveListItemBooleanField, resolveListItemIconField, resolveListItemStringField } from "./utils/resolveListItemFields.js";
+import { listHasTreeStructure, resolveListSelectionAnchorKey, resolveTreeKeyboardNavigationAction, resolveTreeVerticalNavigationTarget } from "../../composables/treeKeyboardNavigation.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, provide, renderList, renderSlot, unref, useId, useModel, useSlots, useTemplateRef, withCtx } from "vue";
+import { SSpinner, useUiKitI18n } from "@shtabapp/ui-kit-primitives";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+//#region src/components/SList/SList.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["role", "aria-multiselectable"];
+var _hoisted_2 = [
+	"role",
+	"aria-multiselectable",
+	"aria-activedescendant",
+	"tabindex"
+];
+var _hoisted_3 = ["data-index"];
+var _hoisted_4 = {
+	key: 0,
+	class: "s-ui-list__divider",
+	"aria-hidden": "true"
+};
+var _hoisted_5 = {
+	key: 0,
+	class: "s-ui-list__divider",
+	"aria-hidden": "true"
+};
+var _hoisted_6 = {
+	key: 2,
+	class: "s-ui-list__static"
+};
+var SList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "SList",
+	props: /*@__PURE__*/ mergeModels({
+		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: () => ESelectionMode.NONE },
+		mandatory: {
+			type: Boolean,
+			default: false
+		},
+		virtual: { type: Boolean },
+		gap: { default: () => DEFAULT_LIST_GAP },
+		estimateItemSize: { default: 36 },
+		overscan: { default: 5 },
+		endReachedDistance: { default: 0 },
+		canLoadMore: { type: Function },
+		height: { default: 320 },
+		maxHeight: {},
+		revealRight: {
+			type: Boolean,
+			default: false
+		},
+		iconOnly: {
+			type: Boolean,
+			default: false
+		},
+		expandOnClick: {
+			type: Boolean,
+			default: false
+		},
+		selectedOnTop: {
+			type: Boolean,
+			default: false
+		},
+		hasMoreChildrenKey: {},
+		loadingMoreChildrenKeys: { default: () => [] }
+	}, {
+		"modelValue": {},
+		"modelModifiers": {},
+		"selected": {},
+		"selectedModifiers": {},
+		"expanded": { default: () => [] },
+		"expandedModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"endReached",
+		"loadMoreChildren",
+		"itemClick"
+	], [
+		"update:modelValue",
+		"update:selected",
+		"update:expanded"
+	]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const modelValue = useModel(__props, "modelValue");
+		const selected = useModel(__props, "selected");
+		const expanded = useModel(__props, "expanded");
+		const emit = __emit;
+		const slots = useSlots();
+		const { getRootAttrs, getAriaAttrs } = useAriaAttrs();
+		const listInstanceId = useId();
+		const scrollElementRef = useTemplateRef("scrollElementRef");
+		const listRootElementRef = useTemplateRef("listRootElementRef");
+		const listGapSizePx = computed(() => {
+			return LIST_GAP_PX[__props.gap];
+		});
+		const isDataDriven = computed(() => {
+			return __props.items !== void 0;
+		});
+		const virtualEnabled = computed(() => {
+			if (!isDataDriven.value) return false;
+			if (__props.virtual !== void 0) return __props.virtual;
+			return true;
+		});
+		const { flatRows, toggleExpanded } = useFlatTreeList({
+			items: () => __props.items ?? [],
+			childrenKey: () => __props.childrenKey,
+			itemKey: () => __props.itemKey,
+			expanded,
+			hasMoreChildrenKey: () => __props.hasMoreChildrenKey,
+			selectedOnTop: () => __props.selectedOnTop,
+			selectedKeys: () => selected.value
+		});
+		const { t } = useUiKitI18n();
+		const loadingMoreChildrenKeySet = computed(() => {
+			return new Set(__props.loadingMoreChildrenKeys);
+		});
+		const loadMoreRowLabel = computed(() => {
+			return t("list.loadMore");
+		});
+		const isLoadMoreRowLoading = (flatRow) => {
+			if (!flatRow.loadMoreForKey) return false;
+			return loadingMoreChildrenKeySet.value.has(flatRow.loadMoreForKey);
+		};
+		const emitLoadMoreChildren = (parentKey, parentItem) => {
+			if (loadingMoreChildrenKeySet.value.has(parentKey)) return;
+			emit("loadMoreChildren", {
+				key: parentKey,
+				item: parentItem
+			});
+		};
+		const activateLoadMoreRow = (flatRow) => {
+			if (!flatRow.loadMoreForKey) return;
+			emitLoadMoreChildren(flatRow.loadMoreForKey, flatRow.item);
+		};
+		const getLoadMoreSlotScope = (flatRow) => {
+			return {
+				parentKey: flatRow.loadMoreForKey ?? "",
+				parentItem: flatRow.item,
+				depth: flatRow.depth,
+				loading: isLoadMoreRowLoading(flatRow),
+				loadMore: () => {
+					activateLoadMoreRow(flatRow);
+				}
+			};
+		};
+		const rowVirtualizer = useVirtualizer(computed(() => {
+			return {
+				count: flatRows.value.length,
+				getScrollElement: () => scrollElementRef.value,
+				estimateSize: () => __props.estimateItemSize,
+				gap: listGapSizePx.value,
+				overscan: __props.overscan
+			};
+		}));
+		const listItemOrder = computed(() => {
+			if (!isDataDriven.value) return;
+			return flatRows.value.reduce((orderedKeys, flatRow) => {
+				if (!flatRow.divider) orderedKeys.push(flatRow.key);
+				return orderedKeys;
+			}, []);
+		});
+		const disabledListItemKeys = computed(() => {
+			const disabledKeys = /* @__PURE__ */ new Set();
+			for (const flatRow of flatRows.value) if (!flatRow.loadMoreForKey && resolveListItemBooleanField(flatRow.item, __props.disabledKey)) disabledKeys.add(flatRow.key);
+			return disabledKeys;
+		});
+		const scrollListItemIntoView = async (rowKey) => {
+			if (!virtualEnabled.value) return;
+			const rowIndex = flatRows.value.findIndex((flatRow) => flatRow.key === rowKey);
+			if (rowIndex === -1) return;
+			rowVirtualizer.value.scrollToIndex(rowIndex, { align: "auto" });
+			await new Promise((resolve) => {
+				requestAnimationFrame(() => {
+					resolve();
+				});
+			});
+			await nextTick();
+		};
+		const resolveListItemOptionId = (rowKey) => {
+			return buildListItemOptionId(listInstanceId, rowKey);
+		};
+		const selection = useSelectionGroup({
+			modelValue: () => selected.value,
+			onUpdateModelValue: (next) => {
+				selected.value = next;
+			},
+			mode: () => __props.selectionMode,
+			mandatory: () => __props.mandatory,
+			orientation: () => ESelectionOrientation.VERTICAL,
+			enableTabNavigation: true,
+			focusMode: () => {
+				if (virtualEnabled.value) return ESelectionFocusMode.ACTIVE_DESCENDANT;
+				return ESelectionFocusMode.DOM;
+			},
+			orderedValues: listItemOrder,
+			isValueDisabled: (rowKey) => disabledListItemKeys.value.has(rowKey),
+			onBeforeFocusItem: async (rowKey) => {
+				await scrollListItemIntoView(rowKey);
+			},
+			onFocusGroup: () => {
+				scrollElementRef.value?.focus();
+			}
+		});
+		const hasTreeStructure = computed(() => {
+			return isDataDriven.value && listHasTreeStructure(flatRows.value);
+		});
+		const focusListNavigationTarget = () => {
+			if (virtualEnabled.value) {
+				scrollElementRef.value?.focus();
+				return;
+			}
+			listRootElementRef.value?.focus();
+		};
+		const clearListFocus = () => {
+			selection.focusedValue.value = void 0;
+			modelValue.value = void 0;
+			const activeElement = document.activeElement;
+			if (activeElement instanceof HTMLElement && activeElement !== scrollElementRef.value) activeElement.blur();
+			focusListNavigationTarget();
+		};
+		const scrollSelectionIntoView = async (rowKey) => {
+			if (!virtualEnabled.value) return;
+			await scrollListItemIntoView(rowKey);
+		};
+		const applyTreeKeyboardNavigationAction = async (action) => {
+			clearListFocus();
+			if (action.type === "expand" || action.type === "collapse") {
+				toggleExpanded(action.rowKey);
+				selection.select(action.rowKey, false);
+				await scrollSelectionIntoView(action.rowKey);
+				return;
+			}
+			selection.select(action.rowKey, false);
+			await scrollSelectionIntoView(action.rowKey);
+		};
+		const handleTreeVerticalKeydown = async (event, currentKey) => {
+			if (!hasTreeStructure.value) return false;
+			if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return false;
+			const anchorKey = resolveListSelectionAnchorKey(currentKey, selected.value);
+			const targetKey = resolveTreeVerticalNavigationTarget(event.key, anchorKey, flatRows.value);
+			if (!targetKey) return false;
+			event.preventDefault();
+			clearListFocus();
+			selection.select(targetKey, false);
+			await scrollSelectionIntoView(targetKey);
+			return true;
+		};
+		const handleTreeHorizontalKeydown = async (event, currentKey) => {
+			if (!hasTreeStructure.value) return false;
+			if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return false;
+			const anchorKey = resolveListSelectionAnchorKey(currentKey, selected.value);
+			const navigationAction = resolveTreeKeyboardNavigationAction(event.key, anchorKey, flatRows.value);
+			if (!navigationAction) return false;
+			event.preventDefault();
+			await applyTreeKeyboardNavigationAction(navigationAction);
+			return true;
+		};
+		const resolveNavigationAnchorKey = () => {
+			if (modelValue.value) return modelValue.value;
+			const selectedAnchorKey = resolveListSelectionAnchorKey("", selected.value);
+			if (selectedAnchorKey) return selectedAnchorKey;
+			const orderedKeys = listItemOrder.value;
+			if (!orderedKeys) return;
+			for (const rowKey of orderedKeys) if (!disabledListItemKeys.value.has(rowKey)) return rowKey;
+		};
+		const resolveVirtualKeydownAnchorKey = () => {
+			return resolveNavigationAnchorKey();
+		};
+		const handleVirtualScrollKeydown = async (event) => {
+			const anchorKey = resolveVirtualKeydownAnchorKey();
+			if (!anchorKey) return;
+			await handleListItemKeydown(event, anchorKey);
+		};
+		const LOAD_MORE_ACTIVATION_KEYS = [
+			"Enter",
+			" ",
+			"Spacebar"
+		];
+		const handleLoadMoreActivationKeydown = (event, currentKey) => {
+			if (!LOAD_MORE_ACTIVATION_KEYS.includes(event.key)) return false;
+			const currentRow = flatRows.value.find((flatRow) => flatRow.key === currentKey);
+			if (!currentRow?.loadMoreForKey) return false;
+			event.preventDefault();
+			emitLoadMoreChildren(currentRow.loadMoreForKey, currentRow.item);
+			return true;
+		};
+		const handleListItemKeydown = async (event, value) => {
+			if (handleLoadMoreActivationKeydown(event, value)) return;
+			if (await handleTreeVerticalKeydown(event, value)) return;
+			if (await handleTreeHorizontalKeydown(event, value)) return;
+			await selection.handleItemKeydown(event, value);
+			modelValue.value = selection.focusedValue.value;
+			if (!selection.focusedValue.value && !virtualEnabled.value) focusListNavigationTarget();
+		};
+		const handleKeyboardNavigation = async (event) => {
+			const anchorKey = resolveNavigationAnchorKey();
+			if (!anchorKey) return;
+			await handleListItemKeydown(event, anchorKey);
+		};
+		const handleListRootKeydown = async (event) => {
+			if (virtualEnabled.value) return;
+			if (event.target !== listRootElementRef.value) return;
+			const anchorKey = resolveNavigationAnchorKey();
+			if (!anchorKey) return;
+			await handleListItemKeydown(event, anchorKey);
+		};
+		const focusNavigation = async () => {
+			const initialKey = resolveNavigationAnchorKey();
+			if (!initialKey) {
+				focusListNavigationTarget();
+				return;
+			}
+			await selection.focusItem(initialKey, false);
+		};
+		provide(sListInjectionKey, {
+			mode: () => __props.selectionMode,
+			isSelected: selection.isSelected,
+			selectItem: selection.toggle,
+			registerItem: selection.registerItem,
+			getItemTabIndex: selection.getItemTabIndex,
+			getGroupTabIndex: selection.getGroupTabIndex,
+			handleItemKeydown: handleListItemKeydown,
+			activeKey: () => modelValue.value,
+			setActiveKey: (nextKey) => {
+				modelValue.value = nextKey;
+			},
+			isExpanded: (rowKey) => {
+				return expanded.value.includes(rowKey);
+			},
+			toggleExpanded: (rowKey) => {
+				if (isDataDriven.value) {
+					toggleExpanded(rowKey);
+					return;
+				}
+				const expandedSet = new Set(expanded.value);
+				if (expandedSet.has(rowKey)) expandedSet.delete(rowKey);
+				else expandedSet.add(rowKey);
+				expanded.value = [...expandedSet];
+			},
+			revealRight: () => __props.revealRight,
+			iconOnly: () => __props.iconOnly,
+			expandOnClick: () => __props.expandOnClick,
+			getItemOptionId: (rowKey) => {
+				if (!virtualEnabled.value) return;
+				return resolveListItemOptionId(rowKey);
+			},
+			usesActiveDescendantNavigation: () => virtualEnabled.value,
+			handlesTreeKeyboardNavigation: () => isDataDriven.value,
+			itemRole: () => hasTreeStructure.value ? ESListItemRole.TREEITEM : ESListItemRole.OPTION
+		});
+		const virtualRows = computed(() => {
+			return rowVirtualizer.value.getVirtualItems();
+		});
+		const virtualRowEntries = computed(() => {
+			return virtualRows.value.flatMap((virtualRow) => {
+				const flatRow = flatRows.value[virtualRow.index];
+				if (!flatRow) return [];
+				return [{
+					virtualRow,
+					flatRow
+				}];
+			});
+		});
+		const totalSize = computed(() => {
+			return rowVirtualizer.value.getTotalSize();
+		});
+		const virtualPanelStyle = computed(() => {
+			return {
+				height: `${totalSize.value}px`,
+				position: "relative",
+				width: "100%"
+			};
+		});
+		const scrollContainerStyle = computed(() => {
+			const styles = {};
+			if (typeof __props.height === "number") styles.height = `${__props.height}px`;
+			else if (__props.height) styles.height = __props.height;
+			if (__props.maxHeight) if (typeof __props.maxHeight === "number") styles.maxHeight = `${__props.maxHeight}px`;
+			else styles.maxHeight = __props.maxHeight;
+			return styles;
+		});
+		const rootClasses = computed(() => {
+			return {
+				"s-ui-list--virtual": virtualEnabled.value,
+				"s-ui-list--static": !virtualEnabled.value,
+				"s-ui-list--icon-only": __props.iconOnly
+			};
+		});
+		const rootStyle = computed(() => {
+			return { "--s-ui-list-gap": LIST_GAP_CSS_VAR[__props.gap] };
+		});
+		const scrollClasses = computed(() => {
+			return { "s-ui-list__scroll--flat": isDataDriven.value && !virtualEnabled.value };
+		});
+		const ariaMultiselectable = computed(() => {
+			if (__props.selectionMode === ESelectionMode.MULTIPLE) return true;
+		});
+		/** У дерева строки — treeitem: option не допускает aria-expanded и aria-level. */
+		const listboxRole = computed(() => {
+			return hasTreeStructure.value ? "tree" : "listbox";
+		});
+		const rootListboxRole = computed(() => {
+			if (virtualEnabled.value) return;
+			return listboxRole.value;
+		});
+		const rootAriaMultiselectable = computed(() => {
+			if (virtualEnabled.value) return;
+			return ariaMultiselectable.value;
+		});
+		const virtualListTabIndex = computed(() => {
+			if (!virtualEnabled.value) return;
+			return selection.getGroupTabIndex();
+		});
+		const virtualActiveDescendantKey = computed(() => {
+			if (modelValue.value) return modelValue.value;
+			return resolveListSelectionAnchorKey("", selected.value);
+		});
+		const virtualActiveDescendantId = computed(() => {
+			if (!virtualEnabled.value) return;
+			const activeDescendantKey = virtualActiveDescendantKey.value;
+			if (!activeDescendantKey) return;
+			return resolveListItemOptionId(activeDescendantKey);
+		});
+		useSListEndReached(() => scrollElementRef.value, {
+			distance: () => __props.endReachedDistance,
+			canLoadMore: () => __props.canLoadMore?.() ?? true,
+			onEndReached: () => {
+				emit("endReached", { direction: "bottom" });
+			}
+		});
+		const getVirtualRowStyle = (virtualRow) => {
+			return {
+				position: "absolute",
+				top: 0,
+				left: 0,
+				width: "100%",
+				transform: `translateY(${virtualRow.start}px)`
+			};
+		};
+		const getVirtualRowMeasureRef = (element) => {
+			if (element instanceof HTMLElement) rowVirtualizer.value.measureElement(element);
+		};
+		const getDefaultListItemProps = (flatRow) => {
+			const listItem = flatRow.item;
+			const resolvedProps = {
+				rowKey: flatRow.key,
+				depth: flatRow.depth,
+				expandable: flatRow.hasChildren,
+				expanded: flatRow.expanded,
+				selected: selection.isSelected(flatRow.key),
+				active: modelValue.value === flatRow.key,
+				disabled: resolveListItemBooleanField(listItem, __props.disabledKey),
+				title: resolveListItemStringField(listItem, __props.titleKey),
+				subtitle: resolveListItemStringField(listItem, __props.subtitleKey),
+				iconLeft: resolveListItemIconField(listItem, __props.iconLeftKey),
+				revealRight: __props.revealRight,
+				onClick: () => {
+					emit("itemClick", {
+						key: flatRow.key,
+						item: flatRow.item
+					});
+				}
+			};
+			if (!__props.itemProps) return resolvedProps;
+			return {
+				...resolvedProps,
+				...__props.itemProps(listItem, flatRow)
+			};
+		};
+		const getItemSlotScope = (flatRow) => {
+			return {
+				...flatRow,
+				revealRight: __props.revealRight,
+				toggleExpanded: () => {
+					toggleExpanded(flatRow.key);
+				}
+			};
+		};
+		__expose({
+			focusNavigation,
+			handleKeyboardNavigation
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				ref_key: "listRootElementRef",
+				ref: listRootElementRef,
+				class: ["s-ui-list", rootClasses.value],
+				style: rootStyle.value
+			}, virtualEnabled.value ? unref(getRootAttrs)() : _ctx.$attrs, {
+				role: rootListboxRole.value,
+				"aria-multiselectable": rootAriaMultiselectable.value,
+				tabindex: "-1",
+				onKeydown: handleListRootKeydown
+			}), [isDataDriven.value && virtualEnabled.value ? (openBlock(), createElementBlock("div", mergeProps({
+				key: 0,
+				ref_key: "scrollElementRef",
+				ref: scrollElementRef,
+				class: ["s-ui-list__scroll", scrollClasses.value],
+				style: scrollContainerStyle.value,
+				role: listboxRole.value,
+				"aria-multiselectable": ariaMultiselectable.value,
+				"aria-activedescendant": virtualActiveDescendantId.value
+			}, unref(getAriaAttrs)(), {
+				tabindex: virtualListTabIndex.value,
+				onKeydown: handleVirtualScrollKeydown
+			}), [createElementVNode("div", {
+				class: "s-ui-list__virtual-panel",
+				style: normalizeStyle(virtualPanelStyle.value)
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(virtualRowEntries.value, (virtualEntry) => {
+				return openBlock(), createElementBlock("div", {
+					key: virtualEntry.virtualRow.index,
+					class: "s-ui-list__virtual-row",
+					"data-index": virtualEntry.virtualRow.index,
+					ref_for: true,
+					ref: getVirtualRowMeasureRef,
+					style: normalizeStyle(getVirtualRowStyle(virtualEntry.virtualRow))
+				}, [virtualEntry.flatRow.divider ? (openBlock(), createElementBlock("div", _hoisted_4)) : virtualEntry.flatRow.loadMoreForKey ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [unref(slots).loadMore ? renderSlot(_ctx.$slots, "loadMore", mergeProps({
+					key: 0,
+					ref_for: true
+				}, getLoadMoreSlotScope(virtualEntry.flatRow))) : (openBlock(), createBlock(unref(SListItem_default), {
+					key: 1,
+					"row-key": virtualEntry.flatRow.key,
+					depth: virtualEntry.flatRow.depth,
+					tiny: "",
+					title: loadMoreRowLabel.value,
+					onClick: ($event) => activateLoadMoreRow(virtualEntry.flatRow)
+				}, createSlots({ _: 2 }, [isLoadMoreRowLoading(virtualEntry.flatRow) ? {
+					name: "icon-left",
+					fn: withCtx(() => [createVNode(unref(SSpinner), { size: 16 })]),
+					key: "0"
+				} : void 0]), 1032, [
+					"row-key",
+					"depth",
+					"title",
+					"onClick"
+				]))], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [unref(slots).item ? renderSlot(_ctx.$slots, "item", mergeProps({
+					key: 0,
+					ref_for: true
+				}, getItemSlotScope(virtualEntry.flatRow))) : (openBlock(), createBlock(unref(SListItem_default), mergeProps({
+					key: 1,
+					ref_for: true
+				}, getDefaultListItemProps(virtualEntry.flatRow)), createSlots({ _: 2 }, [
+					unref(slots).itemIconLeft ? {
+						name: "icon-left",
+						fn: withCtx(() => [renderSlot(_ctx.$slots, "itemIconLeft", mergeProps({ ref_for: true }, getItemSlotScope(virtualEntry.flatRow)))]),
+						key: "0"
+					} : void 0,
+					unref(slots).itemTitle ? {
+						name: "title",
+						fn: withCtx(() => [renderSlot(_ctx.$slots, "itemTitle", mergeProps({ ref_for: true }, getItemSlotScope(virtualEntry.flatRow)))]),
+						key: "1"
+					} : void 0,
+					unref(slots).itemSubtitle ? {
+						name: "subtitle",
+						fn: withCtx(() => [renderSlot(_ctx.$slots, "itemSubtitle", mergeProps({ ref_for: true }, getItemSlotScope(virtualEntry.flatRow)))]),
+						key: "2"
+					} : void 0
+				]), 1040))], 64))], 12, _hoisted_3);
+			}), 128))], 4)], 16, _hoisted_2)) : isDataDriven.value ? (openBlock(), createElementBlock("div", {
+				key: 1,
+				ref_key: "scrollElementRef",
+				ref: scrollElementRef,
+				class: normalizeClass(["s-ui-list__scroll", scrollClasses.value]),
+				style: normalizeStyle(scrollContainerStyle.value)
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(flatRows), (flatRow) => {
+				return openBlock(), createElementBlock(Fragment, { key: flatRow.key }, [flatRow.divider ? (openBlock(), createElementBlock("div", _hoisted_5)) : flatRow.loadMoreForKey ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [unref(slots).loadMore ? renderSlot(_ctx.$slots, "loadMore", mergeProps({
+					key: 0,
+					ref_for: true
+				}, getLoadMoreSlotScope(flatRow))) : (openBlock(), createBlock(unref(SListItem_default), {
+					key: 1,
+					"row-key": flatRow.key,
+					depth: flatRow.depth,
+					tiny: "",
+					title: loadMoreRowLabel.value,
+					onClick: ($event) => activateLoadMoreRow(flatRow)
+				}, createSlots({ _: 2 }, [isLoadMoreRowLoading(flatRow) ? {
+					name: "icon-left",
+					fn: withCtx(() => [createVNode(unref(SSpinner), { size: 16 })]),
+					key: "0"
+				} : void 0]), 1032, [
+					"row-key",
+					"depth",
+					"title",
+					"onClick"
+				]))], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [unref(slots).item ? renderSlot(_ctx.$slots, "item", mergeProps({
+					key: 0,
+					ref_for: true
+				}, getItemSlotScope(flatRow))) : (openBlock(), createBlock(unref(SListItem_default), mergeProps({
+					key: 1,
+					ref_for: true
+				}, getDefaultListItemProps(flatRow)), createSlots({ _: 2 }, [
+					unref(slots).itemIconLeft ? {
+						name: "icon-left",
+						fn: withCtx(() => [renderSlot(_ctx.$slots, "itemIconLeft", mergeProps({ ref_for: true }, getItemSlotScope(flatRow)))]),
+						key: "0"
+					} : void 0,
+					unref(slots).itemTitle ? {
+						name: "title",
+						fn: withCtx(() => [renderSlot(_ctx.$slots, "itemTitle", mergeProps({ ref_for: true }, getItemSlotScope(flatRow)))]),
+						key: "1"
+					} : void 0,
+					unref(slots).itemSubtitle ? {
+						name: "subtitle",
+						fn: withCtx(() => [renderSlot(_ctx.$slots, "itemSubtitle", mergeProps({ ref_for: true }, getItemSlotScope(flatRow)))]),
+						key: "2"
+					} : void 0
+				]), 1040))], 64))], 64);
+			}), 128))], 6)) : (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "default")]))], 16, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { SList_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/SList/utils/context.cjs

@@ -0,0 +1,4 @@
+//#region src/components/SList/utils/context.ts
+var sListInjectionKey = Symbol("sListInjectionKey");
+//#endregion
+exports.sListInjectionKey = sListInjectionKey;

package/dist/components/SList/utils/context.d.ts

@@ -7,6 +7,8 @@ export interface ISListContext extends ISelectionGroupItemContext<string> {
     isExpanded: (rowKey: string) => boolean;
     toggleExpanded: (rowKey: string) => void;
     revealRight: () => boolean;
+    /** Строки — квадратные кнопки с одной иконкой (rail). */
+    iconOnly: () => boolean;
     expandOnClick: () => boolean;
     getItemOptionId: (rowKey: string) => string | undefined;
     usesActiveDescendantNavigation: () => boolean;

package/dist/components/SList/utils/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/SList/utils/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AAEvC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,wCAAwC,CAAA;AACxF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAA;AAErE,MAAM,WAAW,aAAc,SAAQ,0BAA0B,CAAC,MAAM,CAAC;IACvE,SAAS,EAAE,MAAM,MAAM,GAAG,SAAS,CAAA;IACnC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;IACjD,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAA;IACvC,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,WAAW,EAAE,MAAM,OAAO,CAAA;IAC1B,aAAa,EAAE,MAAM,OAAO,CAAA;IAC5B,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAA;IACvD,8BAA8B,EAAE,MAAM,OAAO,CAAA;IAC7C,6BAA6B,EAAE,MAAM,OAAO,CAAA;IAC5C,oEAAoE;IACpE,QAAQ,EAAE,MAAM,cAAc,CAAC,MAAM,GAAG,cAAc,CAAC,QAAQ,CAAA;CAChE;AAED,eAAO,MAAM,iBAAiB,EAAE,YAAY,CAAC,aAAa,CAA+B,CAAA"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/SList/utils/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AAEvC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,wCAAwC,CAAA;AACxF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAA;AAErE,MAAM,WAAW,aAAc,SAAQ,0BAA0B,CAAC,MAAM,CAAC;IACvE,SAAS,EAAE,MAAM,MAAM,GAAG,SAAS,CAAA;IACnC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;IACjD,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAA;IACvC,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,WAAW,EAAE,MAAM,OAAO,CAAA;IAC1B,yDAAyD;IACzD,QAAQ,EAAE,MAAM,OAAO,CAAA;IACvB,aAAa,EAAE,MAAM,OAAO,CAAA;IAC5B,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAA;IACvD,8BAA8B,EAAE,MAAM,OAAO,CAAA;IAC7C,6BAA6B,EAAE,MAAM,OAAO,CAAA;IAC5C,oEAAoE;IACpE,QAAQ,EAAE,MAAM,cAAc,CAAC,MAAM,GAAG,cAAc,CAAC,QAAQ,CAAA;CAChE;AAED,eAAO,MAAM,iBAAiB,EAAE,YAAY,CAAC,aAAa,CAA+B,CAAA"}

package/dist/components/SList/utils/context.js

@@ -0,0 +1,4 @@
+//#region src/components/SList/utils/context.ts
+var sListInjectionKey = Symbol("sListInjectionKey");
+//#endregion
+export { sListInjectionKey };

package/dist/components/SList/utils/listGapTokens.cjs

@@ -0,0 +1,29 @@
+const require_SList_types = require("../SList.types.cjs");
+//#region src/components/SList/utils/listGapTokens.ts
+var DEFAULT_LIST_GAP = require_SList_types.ESListGap.TWO_X_SMALL;
+var LIST_GAP_CSS_VAR = {
+	[require_SList_types.ESListGap.NONE]: "var(--s-ui-space-gap-none)",
+	[require_SList_types.ESListGap.TWO_X_SMALL]: "var(--s-ui-space-gap-2x-small)",
+	[require_SList_types.ESListGap.X_SMALL]: "var(--s-ui-space-gap-x-small)",
+	[require_SList_types.ESListGap.SMALL]: "var(--s-ui-space-gap-small)",
+	[require_SList_types.ESListGap.MEDIUM]: "var(--s-ui-space-gap-medium)",
+	[require_SList_types.ESListGap.X_MEDIUM]: "var(--s-ui-space-gap-x-medium)",
+	[require_SList_types.ESListGap.LARGE]: "var(--s-ui-space-gap-large)",
+	[require_SList_types.ESListGap.X_LARGE]: "var(--s-ui-space-gap-x-large)",
+	[require_SList_types.ESListGap.TWO_X_LARGE]: "var(--s-ui-space-gap-2x-large)"
+};
+var LIST_GAP_PX = {
+	[require_SList_types.ESListGap.NONE]: 0,
+	[require_SList_types.ESListGap.TWO_X_SMALL]: 2,
+	[require_SList_types.ESListGap.X_SMALL]: 4,
+	[require_SList_types.ESListGap.SMALL]: 8,
+	[require_SList_types.ESListGap.MEDIUM]: 12,
+	[require_SList_types.ESListGap.X_MEDIUM]: 16,
+	[require_SList_types.ESListGap.LARGE]: 20,
+	[require_SList_types.ESListGap.X_LARGE]: 24,
+	[require_SList_types.ESListGap.TWO_X_LARGE]: 32
+};
+//#endregion
+exports.DEFAULT_LIST_GAP = DEFAULT_LIST_GAP;
+exports.LIST_GAP_CSS_VAR = LIST_GAP_CSS_VAR;
+exports.LIST_GAP_PX = LIST_GAP_PX;