@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/input/Cascader.js

@@ -0,0 +1,593 @@
+import { t } from "../config/theme/tokens.js";
+import { useLang, useTextMatcher } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { Spinner } from "../base/Spinner.js";
+import { disclosureStyles } from "../utils/style/transitions.js";
+import { buttonBaseStyles } from "../base/button-core.js";
+import { inlineArrows, isRtl } from "../utils/dom/direction.js";
+import { anchoredPanelSx, floatingStyles, useAnchoredPopover } from "../utils/dom/floating.js";
+import { openSetter } from "../utils/dom/open-change.js";
+import { useFieldControl } from "../form/Field.js";
+import { isExpandable } from "../utils/data/tree.js";
+import { itemStyles } from "../utils/style/item-styles.js";
+import { clickOnShell, controlClear, controlIcon, controlParts, focusOnShell, useControlAppearance } from "./control.js";
+import { FormValue } from "../form/FormValue.js";
+import { listPopoverStyles } from "./ListPopover.js";
+import { TextField } from "./TextField.js";
+import { selectStyles } from "./Select.js";
+import { Fragment, computed, createVNode, mergeProps, nextTick, ref, shallowRef, useId } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Check, ChevronDown, ChevronRight, Search } from "@lucide/icons";
+//#region src/input/Cascader.tsx
+/**
+* 级联选择：一列一列往下选（省 / 市 / 区、产品大类 / 小类 / 型号、物料分类），触发框里显示整条路径“浙江 / 杭州 / 西湖区”。
+*
+*   <Cascader items={regions} getKey={(r) => r.code} getLabel={(r) => r.name} getChildren={(r) => r.children} _value={path} />
+*   <Cascader … changeOnSelect />                                      每一级都能选（选到市也行）
+*   <Cascader … hasChildren={(r) => !r.leaf} loadChildren={loadNext} />  展开时远程取下一级
+*   <Cascader … searchable />                                          按整条路径搜索（在已加载的节点里）
+*
+* - value 是从第一级到选中节点的 key 路径（同 Ant Design、Element Plus），key 只要在同级里唯一；没有选择时 null。
+* - 默认只能选到叶子：点有下一级的项只是展开；changeOnSelect 时点任何一级都选中它（并展开下一级）。
+* - 弹出层里每一级是一列 listbox，焦点在列上、高亮项经 aria-activedescendant：↑↓ 移动（有下一级的跟着显示下一列），
+*   → 进入下一级（懒加载的先取回来），← 回到上一级，Enter 选中（叶子选中后关闭），Esc 关闭并把焦点还给触发按钮。
+*   从右到左排版时左右键对调。
+* - searchable：搜索框里输入后换成一列匹配的完整路径，只列能选的（默认是叶子），↑↓、Enter 在搜索框里操作。
+* - 懒加载：hasChildren 声明有下一级，进入时 loadChildren 取回来放进数据里（数据要是响应式的），期间显示转圈；
+*   打开时沿着已选的路径逐级取回来，已选的那一列看得见。
+*
+* 部件：Root（外壳）、Trigger（button，主元素）、Value、Clear、Chevron、Popover、Search（TextField）、Column（每一列）、Option。
+*/
+/** 未声明的属性落到触发按钮（主元素）上，外壳用 propsRoot */
+/** Cascader 的样式：columns、column、option、onPath、focused、chevron、results */
+var cascaderStyles = css.create({
+	columns: {
+		display: "flex",
+		minHeight: 0,
+		flexGrow: 1,
+		overflowX: "auto"
+	},
+	column: {
+		boxSizing: "border-box",
+		flexShrink: 0,
+		minWidth: "10em",
+		maxWidth: "16em",
+		overflowY: "auto",
+		padding: "_xs",
+		outlineStyle: "none",
+		borderInlineEndWidth: {
+			default: "_xs",
+			":last-child": 0
+		},
+		borderInlineEndStyle: "solid",
+		borderInlineEndColor: "_borderMuted"
+	},
+	results: {
+		flexGrow: 1,
+		maxWidth: "none"
+	},
+	onPath: { backgroundColor: "_fillHover" },
+	focused: {
+		outlineStyle: "solid",
+		outlineWidth: "_sm",
+		outlineColor: "_focusRing",
+		outlineOffset: `calc(-1 * ${t.borderWidths.sm})`
+	},
+	chevron: {
+		flexShrink: 0,
+		color: "_textMuted",
+		scale: {
+			default: null,
+			":dir(rtl)": "-1 1"
+		}
+	},
+	check: { flexShrink: 0 },
+	empty: {
+		paddingBlock: "_sm",
+		paddingInline: "_sm",
+		color: "_textMuted"
+	}
+});
+/** 搜索结果的一项：整条路径 */
+/** 级联选择：触发框 + 一列一列的选项，选到叶子（或任意一级） */
+var Cascader = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const items = readonlyProp(_props, "items", () => []);
+	const getKey = readonlyProp(_props, "getKey");
+	const getLabel = readonlyProp(_props, "getLabel");
+	const getChildren = readonlyProp(_props, "getChildren");
+	const hasChildren = readonlyProp(_props, "hasChildren");
+	const loadChildren = readonlyProp(_props, "loadChildren");
+	const isDisabled = readonlyProp(_props, "isDisabled");
+	const value = bindable(_props, "_value", () => null, _ctx.emit);
+	const changeOnSelect = readonlyProp(_props, "changeOnSelect", false);
+	const showAllLevels = readonlyProp(_props, "showAllLevels", true);
+	const separator = readonlyProp(_props, "separator", " / ");
+	const renderValue = readonlyProp(_props, "renderValue");
+	const searchable = readonlyProp(_props, "searchable", false);
+	const filter = readonlyProp(_props, "filter");
+	const placeholder = readonlyProp(_props, "placeholder");
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const onOpenChange = readonlyProp(_props, "onOpenChange");
+	const placement = readonlyProp(_props, "placement", "bottom-start");
+	const clearable = readonlyProp(_props, "clearable", false);
+	const name = readonlyProp(_props, "name");
+	const variant = readonlyProp(_props, "variant");
+	const size = readonlyProp(_props, "size");
+	const radius = readonlyProp(_props, "radius");
+	const disabled = readonlyProp(_props, "disabled");
+	const readonly = readonlyProp(_props, "readonly");
+	const required = readonlyProp(_props, "required");
+	const invalid = readonlyProp(_props, "invalid");
+	const id = readonlyProp(_props, "id");
+	const icon = readonlyProp(_props, "icon");
+	const propsRoot = readonlyProp(_props, "propsRoot");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsValue = readonlyProp(_props, "propsValue");
+	const propsClear = readonlyProp(_props, "propsClear");
+	const propsChevron = readonlyProp(_props, "propsChevron");
+	const propsPopover = readonlyProp(_props, "propsPopover");
+	const propsSearch = readonlyProp(_props, "propsSearch");
+	const propsColumn = readonlyProp(_props, "propsColumn");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const textMatcher = useTextMatcher();
+	const baseId = useId();
+	const appearance = useControlAppearance(() => ({
+		variant: variant.value,
+		size: size.value,
+		radius: radius.value
+	}));
+	const control = useFieldControl(() => ({
+		id: id.value,
+		invalid: invalid.value,
+		required: required.value,
+		disabled: disabled.value,
+		readonly: readonly.value
+	}));
+	const expandable = (node) => isExpandable(node, {
+		getKey: getKey.value,
+		getChildren: getChildren.value,
+		hasChildren: hasChildren.value
+	});
+	let path = ref([]);
+	let focusedColumn = ref(null);
+	let search = ref("");
+	let hit = ref(0);
+	let loading = shallowRef(/* @__PURE__ */ new Set());
+	let shell = shallowRef(null);
+	let trigger = shallowRef(null);
+	let panel = shallowRef(null);
+	const setOpen = openSetter(() => open.value, (next) => open.value = next, () => onOpenChange.value);
+	const columnId = (level) => `${baseId}-column-${level}`;
+	const optionId = (level, index) => `${baseId}-${level}-${index}`;
+	const disabledNode = (node) => isDisabled.value?.(node) ?? false;
+	const loaded = (node) => (getChildren.value(node)?.length ?? 0) > 0;
+	/** 沿着 keys 找到各级的节点（找不到的地方停下：还没加载，或数据变了） */
+	function nodesAlong(keys) {
+		const found = [];
+		let level = items.value;
+		for (const key of keys) {
+			const node = level.find((item, index) => getKey.value(item, index) === key);
+			if (!node) break;
+			found.push(node);
+			level = getChildren.value(node) ?? [];
+		}
+		return found;
+	}
+	/** 要显示的各列：第一级，以及路径上每个已加载（或正在加载）下一级的节点的下一级 */
+	const columns = computed(() => {
+		const list = [{
+			parent: void 0,
+			items: items.value
+		}];
+		for (const node of nodesAlong(path.value)) {
+			if (!expandable(node) || !(loaded(node) || loading.value.has(node))) break;
+			list.push({
+				parent: node,
+				items: getChildren.value(node) ?? []
+			});
+		}
+		return list;
+	});
+	/** 取回节点的下一级；有了（或取回来了）返回 true */
+	async function ensureChildren(node) {
+		if (loaded(node)) return true;
+		if (!loadChildren.value || loading.value.has(node)) return false;
+		const pending = loadChildren.value(node);
+		if (!(pending instanceof Promise)) return loaded(node);
+		loading.value = /* @__PURE__ */ new Set([...loading.value, node]);
+		try {
+			await pending;
+		} catch (error) {
+			console.error("级联选择的下一级加载失败", error);
+			return false;
+		} finally {
+			const next = new Set(loading.value);
+			next.delete(node);
+			loading.value = next;
+		}
+		return loaded(node);
+	}
+	function focusColumn(level) {
+		nextTick(() => panel.value?.querySelector(`#${CSS.escape(columnId(level))}`)?.focus());
+	}
+	/** 高亮第 level 列的一项：它后面的路径换成它（有已加载的下一级时显示出来） */
+	function activate(level, key) {
+		path.value = [...path.value.slice(0, level), key];
+	}
+	/** 进入一项的下一级：先取回来，再高亮下一列的第一项并把焦点移过去 */
+	async function enter(level, node, key) {
+		activate(level, key);
+		if (!expandable(node) || !await ensureChildren(node)) return;
+		if (path.value[level] !== key) return;
+		const children = getChildren.value(node) ?? [];
+		const first = children.findIndex((child) => !disabledNode(child));
+		if (first < 0) return;
+		activate(level + 1, getKey.value(children[first], first));
+		focusColumn(level + 1);
+	}
+	/** 选中一条路径；选到叶子（或从搜索结果里选）时关闭 */
+	function pick(keys, node, close, event) {
+		value.value = [...keys];
+		if (close || !expandable(node)) setOpen(false, "select", event);
+	}
+	/** 点一项：有下一级的展开（changeOnSelect 时同时选中），叶子选中 */
+	function onOptionClick(level, node, key, event) {
+		if (disabledNode(node)) return;
+		focusedColumn.value = level;
+		if (!expandable(node)) return pick([...path.value.slice(0, level), key], node, true, event);
+		if (changeOnSelect.value) pick([...path.value.slice(0, level), key], node, false, event);
+		activate(level, key);
+		ensureChildren(node);
+	}
+	function onColumnKeydown(level, event) {
+		if (event.altKey || event.ctrlKey || event.metaKey) return;
+		if (event.key === "Tab") {
+			setOpen(false, "focus", event);
+			return;
+		}
+		const list = columns.value[level]?.items ?? [];
+		const current = list.findIndex((item, index) => getKey.value(item, index) === path.value[level]);
+		const enabled = list.flatMap((item, index) => disabledNode(item) ? [] : [index]);
+		const go = (index) => {
+			if (index !== void 0) activate(level, getKey.value(list[index], index));
+		};
+		const { forward, backward } = inlineArrows(!!panel.value && isRtl(panel.value));
+		const node = current >= 0 ? list[current] : void 0;
+		switch (event.key) {
+			case "ArrowDown":
+				go(enabled.find((index) => index > current) ?? enabled[0]);
+				break;
+			case "ArrowUp":
+				go(enabled.findLast((index) => index < current) ?? enabled.at(-1));
+				break;
+			case "Home":
+				go(enabled[0]);
+				break;
+			case "End":
+				go(enabled.at(-1));
+				break;
+			case forward:
+				if (node) enter(level, node, path.value[level]);
+				break;
+			case backward:
+				if (level > 0) focusColumn(level - 1);
+				break;
+			case "Enter":
+				if (!node || disabledNode(node)) break;
+				if (!expandable(node)) pick(path.value.slice(0, level + 1), node, true, event);
+				else {
+					if (changeOnSelect.value) pick(path.value.slice(0, level + 1), node, false, event);
+					enter(level, node, path.value[level]);
+				}
+				break;
+			default: return;
+		}
+		event.preventDefault();
+	}
+	function onColumnFocus(level) {
+		focusedColumn.value = level;
+		if (path.value[level] !== void 0) return;
+		const list = columns.value[level]?.items ?? [];
+		const first = list.findIndex((item) => !disabledNode(item));
+		if (first >= 0) activate(level, getKey.value(list[first], first));
+	}
+	const hits = computed(() => {
+		const text = search.value.trim();
+		if (!searchable.value || !text) return null;
+		const match = textMatcher();
+		const found = [];
+		const visit = (level, keys, nodes, off) => {
+			level.forEach((node, index) => {
+				const nextKeys = [...keys, getKey.value(node, index)];
+				const nextNodes = [...nodes, node];
+				const nextOff = off || disabledNode(node);
+				const label = nextNodes.map(getLabel.value).join(separator.value);
+				if ((changeOnSelect.value || !expandable(node)) && (filter.value ? filter.value(nextNodes, text) : match(label, text))) found.push({
+					keys: nextKeys,
+					nodes: nextNodes,
+					label,
+					disabled: nextOff
+				});
+				visit(getChildren.value(node) ?? [], nextKeys, nextNodes, nextOff);
+			});
+		};
+		visit(items.value, [], [], false);
+		return found;
+	});
+	function onSearchKeydown(event) {
+		const list = hits.value;
+		if (event.key === "Tab") {
+			setOpen(false, "focus", event);
+			return;
+		}
+		if (!list) {
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				focusColumn(Math.max(path.value.length - 1, 0));
+			}
+			return;
+		}
+		const enabled = list.flatMap((item, index) => item.disabled ? [] : [index]);
+		if (event.key === "ArrowDown") hit.value = enabled.find((index) => index > hit.value) ?? enabled[0] ?? 0;
+		else if (event.key === "ArrowUp") hit.value = enabled.findLast((index) => index < hit.value) ?? enabled.at(-1) ?? 0;
+		else if (event.key === "Enter") {
+			const chosen = list[hit.value];
+			if (chosen && !chosen.disabled) pick(chosen.keys, chosen.nodes.at(-1), true, event);
+		} else return;
+		event.preventDefault();
+	}
+	async function show(event) {
+		search.value = "";
+		hit.value = 0;
+		path.value = [...value.value ?? []];
+		setOpen(true, "trigger", event);
+		for (const node of nodesAlong(path.value).slice(0, -1)) if (!await ensureChildren(node)) break;
+	}
+	function clear() {
+		value.value = null;
+		trigger.value?.focus();
+	}
+	const { onToggle } = useAnchoredPopover(() => ({
+		open: open.value,
+		anchor: shell.value,
+		panel: panel.value,
+		floating: {
+			placement: placement.value,
+			matchWidth: true,
+			fitHeight: true
+		},
+		restoreFocus: false
+	}), { close: (reason, event) => setOpen(false, reason, event) });
+	function onPanelToggle(event) {
+		onToggle(event);
+		if (event.newState === "open") {
+			if (searchable.value) panel.value?.querySelector("input[type=\"search\"]")?.focus();
+			else focusColumn(Math.max(path.value.length - 1, 0));
+			return;
+		}
+		focusedColumn.value = null;
+		const active = document.activeElement;
+		if (!active || active === document.body || panel.value?.contains(active)) trigger.value?.focus();
+	}
+	function onTriggerKeydown(event) {
+		const state = control();
+		if (state.disabled || state.readonly) return;
+		if (!open.value && (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ")) {
+			event.preventDefault();
+			show(event);
+		}
+	}
+	function toggle(event) {
+		if (open.value) setOpen(false, "trigger", event);
+		else show(event);
+	}
+	/** 一列选项 */
+	function renderColumn(level, parent, list, label) {
+		const activeIndex = list.findIndex((item, index) => getKey.value(item, index) === path.value[level]);
+		const focused = focusedColumn.value === level;
+		const chosen = value.value ?? [];
+		const onChosenPath = path.value.slice(0, level).every((key, index) => chosen[index] === key);
+		return createVNode("div", mergeProps({ "key": level }, mergeAttrs({ sx: cascaderStyles.column }, propsColumn.value, {
+			id: columnId(level),
+			role: "listbox",
+			tabindex: -1,
+			...label(),
+			"aria-activedescendant": activeIndex >= 0 ? optionId(level, activeIndex) : void 0,
+			"aria-busy": parent && loading.value.has(parent) ? true : void 0,
+			onKeydown: (event) => onColumnKeydown(level, event),
+			onFocus: () => onColumnFocus(level),
+			onBlur: () => focusedColumn.value = focusedColumn.value === level ? null : focusedColumn.value
+		})), [parent && loading.value.has(parent) && list.length === 0 && createVNode("div", css.attrs(cascaderStyles.empty), [createVNode(Spinner, { "label": lang.loading }, null)]), list.map((node, index) => {
+			const key = getKey.value(node, index);
+			const off = disabledNode(node);
+			const branch = expandable(node);
+			const active = index === activeIndex;
+			const selected = onChosenPath && chosen[level] === key;
+			return createVNode("div", mergeProps({
+				"key": key,
+				"id": optionId(level, index),
+				"role": "option",
+				"aria-selected": selected,
+				"aria-disabled": off || void 0,
+				"aria-haspopup": branch ? "listbox" : void 0,
+				"aria-expanded": branch ? active && columns.value.length > level + 1 : void 0
+			}, css.attrs(itemStyles.row, itemStyles.hoverable, active && cascaderStyles.onPath, active && focused && cascaderStyles.focused, selected && itemStyles.selected, off && itemStyles.disabled), {
+				"onPointerdown": _cache[0] || (_cache[0] = (event) => event.preventDefault()),
+				"onClick": (event) => {
+					panel.value?.querySelector(`#${CSS.escape(columnId(level))}`)?.focus();
+					onOptionClick(level, node, key, event);
+				},
+				"data-state": selected ? "checked" : "unchecked",
+				"data-active": active || void 0,
+				"data-disabled": off || void 0
+			}), [createVNode("span", css.attrs(itemStyles.label), [getLabel.value(node)]), branch ? loading.value.has(node) ? createVNode(Spinner, { "size": "sm" }, null) : createVNode(Icon, {
+				"icon": ChevronRight,
+				"sx": cascaderStyles.chevron
+			}, null) : selected && createVNode(Icon, {
+				"icon": Check,
+				"sx": cascaderStyles.check
+			}, null)]);
+		})]);
+	}
+	/** 搜索结果：一列完整路径 */
+	function renderHits(list) {
+		const chosen = (value.value ?? []).join("\0");
+		return createVNode("div", mergeAttrs({ sx: [cascaderStyles.column, cascaderStyles.results] }, propsColumn.value, {
+			id: columnId(0),
+			role: "listbox",
+			tabindex: -1,
+			"aria-label": lang.selectSearch
+		}), [list.length === 0 && createVNode("div", css.attrs(cascaderStyles.empty), [lang.selectNoMatch]), list.map((item, index) => {
+			const selected = item.keys.join("\0") === chosen;
+			return createVNode("div", mergeProps({
+				"key": item.keys.join("\0"),
+				"id": optionId(0, index),
+				"role": "option",
+				"aria-selected": selected,
+				"aria-disabled": item.disabled || void 0
+			}, css.attrs(itemStyles.row, itemStyles.hoverable, index === hit.value && itemStyles.highlighted, selected && itemStyles.selected, item.disabled && itemStyles.disabled), {
+				"onPointerdown": _cache[1] || (_cache[1] = (event) => event.preventDefault()),
+				"onPointermove": () => !item.disabled && (hit.value = index),
+				"onClick": (event) => !item.disabled && pick(item.keys, item.nodes.at(-1), true, event)
+			}), [createVNode("span", css.attrs(itemStyles.label), [item.label]), selected && createVNode(Icon, {
+				"icon": Check,
+				"sx": cascaderStyles.check
+			}, null)]);
+		})]);
+	}
+	return () => {
+		const state = control();
+		const s = controlParts(appearance(), state);
+		const off = state.disabled;
+		const locked = off || state.readonly;
+		const keys = value.value ?? [];
+		const nodes = nodesAlong(keys);
+		const labels = keys.map((key, index) => nodes[index] ? getLabel.value(nodes[index]) : key);
+		const shown = keys.length === 0 ? createVNode("span", css.attrs(selectStyles.placeholder), [placeholder.value ?? lang.selectPlaceholder]) : renderValue.value?.(labels, keys.map((_, index) => nodes[index])) ?? (showAllLevels.value ? labels.join(separator.value) : labels.at(-1));
+		const firstLabel = () => state.labelledBy ? { "aria-labelledby": state.labelledBy } : { "aria-label": rest["aria-label"] };
+		const list = hits.value;
+		return createVNode(Fragment, null, [createVNode("div", mergeProps(mergeAttrs({
+			...s.root,
+			sx: [s.root.sx, selectStyles.root]
+		}, propsRoot.value, {
+			ref: shell,
+			onPointerdown: off ? void 0 : focusOnShell(() => trigger.value),
+			onClick: locked ? void 0 : clickOnShell(() => trigger.value, (event) => toggle(event))
+		}), {
+			"data-state": open.value ? "open" : "closed",
+			"data-invalid": state.invalid || void 0,
+			"data-disabled": off || void 0
+		}), [
+			controlIcon(s, icon.value, propsIcon.value),
+			createVNode("button", mergeAttrs({ sx: [buttonBaseStyles.root, selectStyles.trigger] }, rest, {
+				ref: trigger,
+				id: state.id,
+				type: "button",
+				role: "combobox",
+				disabled: off,
+				"aria-haspopup": "listbox",
+				"aria-expanded": open.value,
+				"aria-controls": columnId(0),
+				"aria-invalid": state.invalid || void 0,
+				"aria-required": state.required || void 0,
+				"aria-readonly": state.readonly || void 0,
+				"aria-describedby": state.describedBy,
+				onClick: (event) => {
+					trigger.value?.focus();
+					if (!locked) toggle(event);
+				},
+				onKeydown: onTriggerKeydown
+			}), [createVNode("span", mergeAttrs({ sx: selectStyles.value }, propsValue.value), [shown])]),
+			clearable.value && keys.length > 0 && !locked && controlClear(s, propsClear.value, clear),
+			createVNode(Icon, mergePartProps({
+				...s.icon,
+				icon: ChevronDown,
+				sx: [
+					s.icon.sx,
+					disclosureStyles.icon,
+					open.value && selectStyles.chevronOpen
+				]
+			}, propsChevron.value), null),
+			createVNode(FormValue, {
+				"name": name.value,
+				"value": keys,
+				"disabled": state.disabled
+			}, null)
+		]), createVNode("div", mergeAttrs({ sx: [
+			anchoredPanelSx(appearance().size),
+			floatingStyles.scrollPanel,
+			listPopoverStyles.panel
+		] }, propsPopover.value, {
+			ref: panel,
+			popover: "auto",
+			onToggle: onPanelToggle
+		}), [searchable.value && createVNode("div", css.attrs(listPopoverStyles.header), [createVNode(TextField, mergeProps(mergePartProps({
+			icon: Search,
+			variant: "soft",
+			placeholder: lang.selectSearch,
+			"aria-label": lang.selectSearch,
+			propsRoot: { sx: selectStyles.search }
+		}, propsSearch.value), {
+			"type": "search",
+			"_value": search.value,
+			"onUpdate:_value": _cache[2] || (_cache[2] = (next) => {
+				search.value = next;
+				hit.value = 0;
+			}),
+			"aria-controls": columnId(0),
+			"aria-activedescendant": list?.length ? optionId(0, hit.value) : void 0,
+			"onKeydown": onSearchKeydown
+		}), null)]), open.value && createVNode("div", css.attrs(cascaderStyles.columns), [list ? renderHits(list) : columns.value.map((column, level) => renderColumn(level, column.parent, column.items, () => column.parent ? { "aria-label": getLabel.value(column.parent) } : firstLabel()))])])]);
+	};
+}, {
+	name: "Cascader",
+	props: [
+		"items",
+		"getKey",
+		"getLabel",
+		"getChildren",
+		"hasChildren",
+		"loadChildren",
+		"isDisabled",
+		"_value",
+		"onUpdate:_value",
+		"changeOnSelect",
+		"showAllLevels",
+		"separator",
+		"renderValue",
+		"searchable",
+		"filter",
+		"placeholder",
+		"_open",
+		"onUpdate:_open",
+		"onOpenChange",
+		"placement",
+		"clearable",
+		"name",
+		"variant",
+		"size",
+		"radius",
+		"disabled",
+		"readonly",
+		"required",
+		"invalid",
+		"id",
+		"icon",
+		"propsRoot",
+		"propsIcon",
+		"propsValue",
+		"propsClear",
+		"propsChevron",
+		"propsPopover",
+		"propsSearch",
+		"propsColumn"
+	]
+});
+//#endregion
+export { Cascader, cascaderStyles };
+
+//# sourceMappingURL=Cascader.js.map