@shtabapp/ui-kit 1.85.0 → 1.85.2

package/dist/components/SList/SList.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,631 @@
+const require_useSelectionGroup = require("../../composables/useSelectionGroup.cjs");
+const require_useAriaAttrs = require("../../composables/useAriaAttrs.cjs");
+const require_useFlatTreeList = require("../../composables/useFlatTreeList.cjs");
+const require_useSListEndReached = require("../../composables/useSListEndReached.cjs");
+const require_context = require("./utils/context.cjs");
+const require_SListItem_types = require("../SListItem/SListItem.types.cjs");
+const require_SListItem = require("../SListItem/SListItem.vue.cjs");
+const require_listGapTokens = require("./utils/listGapTokens.cjs");
+const require_listOptionId = require("./utils/listOptionId.cjs");
+const require_resolveListItemFields = require("./utils/resolveListItemFields.cjs");
+const require_treeKeyboardNavigation = require("../../composables/treeKeyboardNavigation.cjs");
+let vue = require("vue");
+let _shtabapp_ui_kit_primitives = require("@shtabapp/ui-kit-primitives");
+let _tanstack_vue_virtual = require("@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__*/ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "SList",
+	props: /*@__PURE__*/ (0, vue.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: () => require_useSelectionGroup.ESelectionMode.NONE },
+		mandatory: {
+			type: Boolean,
+			default: false
+		},
+		virtual: { type: Boolean },
+		gap: { default: () => require_listGapTokens.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__*/ (0, vue.mergeModels)([
+		"endReached",
+		"loadMoreChildren",
+		"itemClick"
+	], [
+		"update:modelValue",
+		"update:selected",
+		"update:expanded"
+	]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const modelValue = (0, vue.useModel)(__props, "modelValue");
+		const selected = (0, vue.useModel)(__props, "selected");
+		const expanded = (0, vue.useModel)(__props, "expanded");
+		const emit = __emit;
+		const slots = (0, vue.useSlots)();
+		const { getRootAttrs, getAriaAttrs } = require_useAriaAttrs.useAriaAttrs();
+		const listInstanceId = (0, vue.useId)();
+		const scrollElementRef = (0, vue.useTemplateRef)("scrollElementRef");
+		const listRootElementRef = (0, vue.useTemplateRef)("listRootElementRef");
+		const listGapSizePx = (0, vue.computed)(() => {
+			return require_listGapTokens.LIST_GAP_PX[__props.gap];
+		});
+		const isDataDriven = (0, vue.computed)(() => {
+			return __props.items !== void 0;
+		});
+		const virtualEnabled = (0, vue.computed)(() => {
+			if (!isDataDriven.value) return false;
+			if (__props.virtual !== void 0) return __props.virtual;
+			return true;
+		});
+		const { flatRows, toggleExpanded } = require_useFlatTreeList.useFlatTreeList({
+			items: () => __props.items ?? [],
+			childrenKey: () => __props.childrenKey,
+			itemKey: () => __props.itemKey,
+			expanded,
+			hasMoreChildrenKey: () => __props.hasMoreChildrenKey,
+			selectedOnTop: () => __props.selectedOnTop,
+			selectedKeys: () => selected.value
+		});
+		const { t } = (0, _shtabapp_ui_kit_primitives.useUiKitI18n)();
+		const loadingMoreChildrenKeySet = (0, vue.computed)(() => {
+			return new Set(__props.loadingMoreChildrenKeys);
+		});
+		const loadMoreRowLabel = (0, vue.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 = (0, _tanstack_vue_virtual.useVirtualizer)((0, vue.computed)(() => {
+			return {
+				count: flatRows.value.length,
+				getScrollElement: () => scrollElementRef.value,
+				estimateSize: () => __props.estimateItemSize,
+				gap: listGapSizePx.value,
+				overscan: __props.overscan
+			};
+		}));
+		const listItemOrder = (0, vue.computed)(() => {
+			if (!isDataDriven.value) return;
+			return flatRows.value.reduce((orderedKeys, flatRow) => {
+				if (!flatRow.divider) orderedKeys.push(flatRow.key);
+				return orderedKeys;
+			}, []);
+		});
+		const disabledListItemKeys = (0, vue.computed)(() => {
+			const disabledKeys = /* @__PURE__ */ new Set();
+			for (const flatRow of flatRows.value) if (!flatRow.loadMoreForKey && require_resolveListItemFields.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 (0, vue.nextTick)();
+		};
+		const resolveListItemOptionId = (rowKey) => {
+			return require_listOptionId.buildListItemOptionId(listInstanceId, rowKey);
+		};
+		const selection = require_useSelectionGroup.useSelectionGroup({
+			modelValue: () => selected.value,
+			onUpdateModelValue: (next) => {
+				selected.value = next;
+			},
+			mode: () => __props.selectionMode,
+			mandatory: () => __props.mandatory,
+			orientation: () => require_useSelectionGroup.ESelectionOrientation.VERTICAL,
+			enableTabNavigation: true,
+			focusMode: () => {
+				if (virtualEnabled.value) return require_useSelectionGroup.ESelectionFocusMode.ACTIVE_DESCENDANT;
+				return require_useSelectionGroup.ESelectionFocusMode.DOM;
+			},
+			orderedValues: listItemOrder,
+			isValueDisabled: (rowKey) => disabledListItemKeys.value.has(rowKey),
+			onBeforeFocusItem: async (rowKey) => {
+				await scrollListItemIntoView(rowKey);
+			},
+			onFocusGroup: () => {
+				scrollElementRef.value?.focus();
+			}
+		});
+		const hasTreeStructure = (0, vue.computed)(() => {
+			return isDataDriven.value && require_treeKeyboardNavigation.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 = require_treeKeyboardNavigation.resolveListSelectionAnchorKey(currentKey, selected.value);
+			const targetKey = require_treeKeyboardNavigation.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 = require_treeKeyboardNavigation.resolveListSelectionAnchorKey(currentKey, selected.value);
+			const navigationAction = require_treeKeyboardNavigation.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 = require_treeKeyboardNavigation.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);
+		};
+		(0, vue.provide)(require_context.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 ? require_SListItem_types.ESListItemRole.TREEITEM : require_SListItem_types.ESListItemRole.OPTION
+		});
+		const virtualRows = (0, vue.computed)(() => {
+			return rowVirtualizer.value.getVirtualItems();
+		});
+		const virtualRowEntries = (0, vue.computed)(() => {
+			return virtualRows.value.flatMap((virtualRow) => {
+				const flatRow = flatRows.value[virtualRow.index];
+				if (!flatRow) return [];
+				return [{
+					virtualRow,
+					flatRow
+				}];
+			});
+		});
+		const totalSize = (0, vue.computed)(() => {
+			return rowVirtualizer.value.getTotalSize();
+		});
+		const virtualPanelStyle = (0, vue.computed)(() => {
+			return {
+				height: `${totalSize.value}px`,
+				position: "relative",
+				width: "100%"
+			};
+		});
+		const scrollContainerStyle = (0, vue.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 = (0, vue.computed)(() => {
+			return {
+				"s-ui-list--virtual": virtualEnabled.value,
+				"s-ui-list--static": !virtualEnabled.value,
+				"s-ui-list--icon-only": __props.iconOnly
+			};
+		});
+		const rootStyle = (0, vue.computed)(() => {
+			return { "--s-ui-list-gap": require_listGapTokens.LIST_GAP_CSS_VAR[__props.gap] };
+		});
+		const scrollClasses = (0, vue.computed)(() => {
+			return { "s-ui-list__scroll--flat": isDataDriven.value && !virtualEnabled.value };
+		});
+		const ariaMultiselectable = (0, vue.computed)(() => {
+			if (__props.selectionMode === require_useSelectionGroup.ESelectionMode.MULTIPLE) return true;
+		});
+		/** У дерева строки — treeitem: option не допускает aria-expanded и aria-level. */
+		const listboxRole = (0, vue.computed)(() => {
+			return hasTreeStructure.value ? "tree" : "listbox";
+		});
+		const rootListboxRole = (0, vue.computed)(() => {
+			if (virtualEnabled.value) return;
+			return listboxRole.value;
+		});
+		const rootAriaMultiselectable = (0, vue.computed)(() => {
+			if (virtualEnabled.value) return;
+			return ariaMultiselectable.value;
+		});
+		const virtualListTabIndex = (0, vue.computed)(() => {
+			if (!virtualEnabled.value) return;
+			return selection.getGroupTabIndex();
+		});
+		const virtualActiveDescendantKey = (0, vue.computed)(() => {
+			if (modelValue.value) return modelValue.value;
+			return require_treeKeyboardNavigation.resolveListSelectionAnchorKey("", selected.value);
+		});
+		const virtualActiveDescendantId = (0, vue.computed)(() => {
+			if (!virtualEnabled.value) return;
+			const activeDescendantKey = virtualActiveDescendantKey.value;
+			if (!activeDescendantKey) return;
+			return resolveListItemOptionId(activeDescendantKey);
+		});
+		require_useSListEndReached.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: require_resolveListItemFields.resolveListItemBooleanField(listItem, __props.disabledKey),
+				title: require_resolveListItemFields.resolveListItemStringField(listItem, __props.titleKey),
+				subtitle: require_resolveListItemFields.resolveListItemStringField(listItem, __props.subtitleKey),
+				iconLeft: require_resolveListItemFields.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 (0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({
+				ref_key: "listRootElementRef",
+				ref: listRootElementRef,
+				class: ["s-ui-list", rootClasses.value],
+				style: rootStyle.value
+			}, virtualEnabled.value ? (0, vue.unref)(getRootAttrs)() : _ctx.$attrs, {
+				role: rootListboxRole.value,
+				"aria-multiselectable": rootAriaMultiselectable.value,
+				tabindex: "-1",
+				onKeydown: handleListRootKeydown
+			}), [isDataDriven.value && virtualEnabled.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.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
+			}, (0, vue.unref)(getAriaAttrs)(), {
+				tabindex: virtualListTabIndex.value,
+				onKeydown: handleVirtualScrollKeydown
+			}), [(0, vue.createElementVNode)("div", {
+				class: "s-ui-list__virtual-panel",
+				style: (0, vue.normalizeStyle)(virtualPanelStyle.value)
+			}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(virtualRowEntries.value, (virtualEntry) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					key: virtualEntry.virtualRow.index,
+					class: "s-ui-list__virtual-row",
+					"data-index": virtualEntry.virtualRow.index,
+					ref_for: true,
+					ref: getVirtualRowMeasureRef,
+					style: (0, vue.normalizeStyle)(getVirtualRowStyle(virtualEntry.virtualRow))
+				}, [virtualEntry.flatRow.divider ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4)) : virtualEntry.flatRow.loadMoreForKey ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.unref)(slots).loadMore ? (0, vue.renderSlot)(_ctx.$slots, "loadMore", (0, vue.mergeProps)({
+					key: 0,
+					ref_for: true
+				}, getLoadMoreSlotScope(virtualEntry.flatRow))) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SListItem.default), {
+					key: 1,
+					"row-key": virtualEntry.flatRow.key,
+					depth: virtualEntry.flatRow.depth,
+					tiny: "",
+					title: loadMoreRowLabel.value,
+					onClick: ($event) => activateLoadMoreRow(virtualEntry.flatRow)
+				}, (0, vue.createSlots)({ _: 2 }, [isLoadMoreRowLoading(virtualEntry.flatRow) ? {
+					name: "icon-left",
+					fn: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_shtabapp_ui_kit_primitives.SSpinner), { size: 16 })]),
+					key: "0"
+				} : void 0]), 1032, [
+					"row-key",
+					"depth",
+					"title",
+					"onClick"
+				]))], 64)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [(0, vue.unref)(slots).item ? (0, vue.renderSlot)(_ctx.$slots, "item", (0, vue.mergeProps)({
+					key: 0,
+					ref_for: true
+				}, getItemSlotScope(virtualEntry.flatRow))) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SListItem.default), (0, vue.mergeProps)({
+					key: 1,
+					ref_for: true
+				}, getDefaultListItemProps(virtualEntry.flatRow)), (0, vue.createSlots)({ _: 2 }, [
+					(0, vue.unref)(slots).itemIconLeft ? {
+						name: "icon-left",
+						fn: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "itemIconLeft", (0, vue.mergeProps)({ ref_for: true }, getItemSlotScope(virtualEntry.flatRow)))]),
+						key: "0"
+					} : void 0,
+					(0, vue.unref)(slots).itemTitle ? {
+						name: "title",
+						fn: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "itemTitle", (0, vue.mergeProps)({ ref_for: true }, getItemSlotScope(virtualEntry.flatRow)))]),
+						key: "1"
+					} : void 0,
+					(0, vue.unref)(slots).itemSubtitle ? {
+						name: "subtitle",
+						fn: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "itemSubtitle", (0, vue.mergeProps)({ ref_for: true }, getItemSlotScope(virtualEntry.flatRow)))]),
+						key: "2"
+					} : void 0
+				]), 1040))], 64))], 12, _hoisted_3);
+			}), 128))], 4)], 16, _hoisted_2)) : isDataDriven.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 1,
+				ref_key: "scrollElementRef",
+				ref: scrollElementRef,
+				class: (0, vue.normalizeClass)(["s-ui-list__scroll", scrollClasses.value]),
+				style: (0, vue.normalizeStyle)(scrollContainerStyle.value)
+			}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(flatRows), (flatRow) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: flatRow.key }, [flatRow.divider ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_5)) : flatRow.loadMoreForKey ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.unref)(slots).loadMore ? (0, vue.renderSlot)(_ctx.$slots, "loadMore", (0, vue.mergeProps)({
+					key: 0,
+					ref_for: true
+				}, getLoadMoreSlotScope(flatRow))) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SListItem.default), {
+					key: 1,
+					"row-key": flatRow.key,
+					depth: flatRow.depth,
+					tiny: "",
+					title: loadMoreRowLabel.value,
+					onClick: ($event) => activateLoadMoreRow(flatRow)
+				}, (0, vue.createSlots)({ _: 2 }, [isLoadMoreRowLoading(flatRow) ? {
+					name: "icon-left",
+					fn: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_shtabapp_ui_kit_primitives.SSpinner), { size: 16 })]),
+					key: "0"
+				} : void 0]), 1032, [
+					"row-key",
+					"depth",
+					"title",
+					"onClick"
+				]))], 64)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [(0, vue.unref)(slots).item ? (0, vue.renderSlot)(_ctx.$slots, "item", (0, vue.mergeProps)({
+					key: 0,
+					ref_for: true
+				}, getItemSlotScope(flatRow))) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SListItem.default), (0, vue.mergeProps)({
+					key: 1,
+					ref_for: true
+				}, getDefaultListItemProps(flatRow)), (0, vue.createSlots)({ _: 2 }, [
+					(0, vue.unref)(slots).itemIconLeft ? {
+						name: "icon-left",
+						fn: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "itemIconLeft", (0, vue.mergeProps)({ ref_for: true }, getItemSlotScope(flatRow)))]),
+						key: "0"
+					} : void 0,
+					(0, vue.unref)(slots).itemTitle ? {
+						name: "title",
+						fn: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "itemTitle", (0, vue.mergeProps)({ ref_for: true }, getItemSlotScope(flatRow)))]),
+						key: "1"
+					} : void 0,
+					(0, vue.unref)(slots).itemSubtitle ? {
+						name: "subtitle",
+						fn: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "itemSubtitle", (0, vue.mergeProps)({ ref_for: true }, getItemSlotScope(flatRow)))]),
+						key: "2"
+					} : void 0
+				]), 1040))], 64))], 64);
+			}), 128))], 6)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_6, [(0, vue.renderSlot)(_ctx.$slots, "default")]))], 16, _hoisted_1);
+		};
+	}
+});
+//#endregion
+exports.default = SList_vue_vue_type_script_setup_true_lang_default;