@v-c/cascader 0.0.1

package/dist/OptionList/List.cjs

@@ -0,0 +1,195 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+const require_context = require("../context.cjs");
+const require_commonUtil = require("../utils/commonUtil.cjs");
+const require_treeUtil = require("../utils/treeUtil.cjs");
+const require_CacheContent = require("./CacheContent.cjs");
+const require_Column = require("./Column.cjs");
+const require_useActive = require("./useActive.cjs");
+const require_useKeyboard = require("./useKeyboard.cjs");
+let vue = require("vue");
+let _v_c_util = require("@v-c/util");
+var RawOptionList = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose }) => {
+	const containerRef = (0, vue.ref)(null);
+	const rtl = (0, vue.computed)(() => props.direction === "rtl");
+	const context = require_context.useCascaderContext();
+	const mergedPrefixCls = (0, vue.computed)(() => context.value?.popupPrefixCls || props.prefixCls);
+	const mergedFieldNames = (0, vue.computed)(() => context.value?.fieldNames);
+	const loadingKeys = (0, vue.ref)([]);
+	const internalLoadData = (valueCells) => {
+		if (!context.value?.loadData || props.searchValue) return;
+		const fieldNames = mergedFieldNames.value;
+		const options = context.value?.options || [];
+		if (!fieldNames) return;
+		const rawOptions = require_treeUtil.toPathOptions(valueCells, options, fieldNames).map(({ option }) => option);
+		const lastOption = rawOptions[rawOptions.length - 1];
+		if (lastOption && !require_commonUtil.isLeaf(lastOption, fieldNames)) {
+			const pathKey = require_commonUtil.toPathKey(valueCells);
+			loadingKeys.value = [...loadingKeys.value, pathKey];
+			context.value.loadData(rawOptions);
+		}
+	};
+	(0, vue.watchEffect)(() => {
+		const fieldNames = mergedFieldNames.value;
+		const options = context.value?.options || [];
+		if (!loadingKeys.value.length || !fieldNames) return;
+		const nextLoadingKeys = loadingKeys.value.filter((loadingKey) => {
+			const optionList = require_treeUtil.toPathOptions(require_commonUtil.toPathValueStr(String(loadingKey)), options, fieldNames, true).map(({ option }) => option);
+			const lastOption = optionList[optionList.length - 1];
+			return !(!lastOption || lastOption[fieldNames.children] || require_commonUtil.isLeaf(lastOption, fieldNames));
+		});
+		if (!(nextLoadingKeys.length === loadingKeys.value.length && nextLoadingKeys.every((key, index) => key === loadingKeys.value[index]))) loadingKeys.value = nextLoadingKeys;
+	});
+	const checkedSet = (0, vue.computed)(() => new Set(require_commonUtil.toPathKeys(context.value?.values || [])));
+	const halfCheckedSet = (0, vue.computed)(() => new Set(require_commonUtil.toPathKeys(context.value?.halfValues || [])));
+	const [activeValueCells, setActiveValueCells] = require_useActive.default((0, vue.computed)(() => !!props.multiple), (0, vue.computed)(() => props.open));
+	const onPathOpen = (nextValueCells) => {
+		setActiveValueCells(nextValueCells);
+		internalLoadData(nextValueCells);
+	};
+	const isSelectable = (option) => {
+		if (props.disabled) return false;
+		const { disabled: optionDisabled } = option;
+		const fieldNames = mergedFieldNames.value;
+		if (!fieldNames) return false;
+		const isMergedLeaf = require_commonUtil.isLeaf(option, fieldNames);
+		return !optionDisabled && (isMergedLeaf || context.value?.changeOnSelect || props.multiple);
+	};
+	const onPathSelect = (valuePath, leaf, fromKeyboard = false) => {
+		context.value?.onSelect(valuePath);
+		if (!props.multiple && (leaf || context.value?.changeOnSelect && (context.value?.expandTrigger === "hover" || fromKeyboard))) props.toggleOpen(false);
+	};
+	const mergedOptions = (0, vue.computed)(() => {
+		if (props.searchValue) return context.value?.searchOptions || [];
+		return context.value?.options || [];
+	});
+	const optionColumns = (0, vue.computed)(() => {
+		const fieldNames = mergedFieldNames.value;
+		if (!fieldNames) return [];
+		const optionList = [{ options: mergedOptions.value }];
+		let currentList = mergedOptions.value;
+		const fullPathKeys = require_commonUtil.getFullPathKeys(currentList, fieldNames);
+		for (let i = 0; i < activeValueCells.value.length; i += 1) {
+			const activeValueCell = activeValueCells.value[i];
+			const subOptions = currentList.find((option, index) => (fullPathKeys[index] ? require_commonUtil.toPathKey(fullPathKeys[index]) : option[fieldNames.value]) === activeValueCell)?.[fieldNames.children];
+			if (!subOptions?.length) break;
+			currentList = subOptions;
+			optionList.push({ options: subOptions });
+		}
+		return optionList;
+	});
+	const onKeyboardSelect = (selectValueCells, option) => {
+		if (isSelectable(option) && mergedFieldNames.value) onPathSelect(selectValueCells, require_commonUtil.isLeaf(option, mergedFieldNames.value), true);
+	};
+	expose(require_useKeyboard.default(mergedOptions, mergedFieldNames, activeValueCells, onPathOpen, onKeyboardSelect, {
+		direction: (0, vue.computed)(() => props.direction),
+		searchValue: (0, vue.computed)(() => props.searchValue || ""),
+		toggleOpen: props.toggleOpen,
+		open: (0, vue.computed)(() => props.open)
+	}));
+	(0, vue.watch)([() => activeValueCells.value, () => props.searchValue], () => {
+		if (props.searchValue) return;
+		(0, vue.nextTick)(() => {
+			for (let i = 0; i < activeValueCells.value.length; i += 1) {
+				const cellKeyPath = require_commonUtil.toPathKey(activeValueCells.value.slice(0, i + 1));
+				const ele = containerRef.value?.querySelector(`li[data-path-key="${cellKeyPath.replace(/\\{0,2}"/g, "\\\"")}"]`);
+				if (ele) require_commonUtil.scrollIntoParentView(ele);
+			}
+		});
+	}, { deep: true });
+	return () => {
+		const fieldNames = mergedFieldNames.value;
+		if (!fieldNames) return null;
+		const isEmpty = !optionColumns.value[0]?.options?.length;
+		const emptyList = [{
+			[fieldNames.value]: "__EMPTY__",
+			[require_Column.FIX_LABEL]: props.notFoundContent,
+			disabled: true
+		}];
+		const columnProps = {
+			...props,
+			multiple: !isEmpty && props.multiple,
+			onSelect: onPathSelect,
+			onActive: onPathOpen,
+			onToggleOpen: props.toggleOpen,
+			checkedSet: checkedSet.value,
+			halfCheckedSet: halfCheckedSet.value,
+			loadingKeys: loadingKeys.value,
+			isSelectable
+		};
+		const columnNodes = (isEmpty ? [{ options: emptyList }] : optionColumns.value).map((col, index) => {
+			const prevValuePath = activeValueCells.value.slice(0, index);
+			const activeValue = activeValueCells.value[index];
+			return (0, vue.createVNode)(require_Column.default, (0, vue.mergeProps)({ "key": index }, columnProps, {
+				"prefixCls": mergedPrefixCls.value,
+				"options": col.options,
+				"prevValuePath": prevValuePath,
+				"activeValue": activeValue
+			}), null);
+		});
+		return (0, vue.createVNode)(require_CacheContent.default, { "open": props.open }, { default: () => [(0, vue.createVNode)("div", {
+			"class": (0, _v_c_util.clsx)(`${mergedPrefixCls.value}-menus`, {
+				[`${mergedPrefixCls.value}-menu-empty`]: isEmpty,
+				[`${mergedPrefixCls.value}-rtl`]: rtl.value
+			}),
+			"ref": containerRef
+		}, [columnNodes])] });
+	};
+}, {
+	props: /* @__PURE__ */ (0, vue.mergeDefaults)({
+		prefixCls: {
+			type: String,
+			required: true,
+			default: void 0
+		},
+		multiple: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		searchValue: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		toggleOpen: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		notFoundContent: {
+			required: false,
+			default: void 0
+		},
+		direction: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		open: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		}
+	}, {
+		prefixCls: "",
+		multiple: false,
+		searchValue: "",
+		toggleOpen: () => {},
+		open: false,
+		direction: "ltr",
+		disabled: false
+	}),
+	name: "RawOptionList",
+	inheritAttrs: false
+});
+var List_default = RawOptionList;
+exports.default = List_default;

package/dist/OptionList/List.d.ts

@@ -0,0 +1,12 @@
+export interface RawOptionListProps {
+    prefixCls: string;
+    multiple?: boolean;
+    searchValue?: string;
+    toggleOpen: (open?: boolean) => void;
+    notFoundContent?: any;
+    direction?: 'ltr' | 'rtl';
+    open?: boolean;
+    disabled?: boolean;
+}
+declare const RawOptionList: import('vue').DefineSetupFnComponent<RawOptionListProps, {}, {}, RawOptionListProps & {}, import('vue').PublicProps>;
+export default RawOptionList;

package/dist/OptionList/List.js

@@ -0,0 +1,189 @@
+import { useCascaderContext } from "../context.js";
+import { getFullPathKeys, isLeaf, scrollIntoParentView, toPathKey, toPathKeys, toPathValueStr } from "../utils/commonUtil.js";
+import { toPathOptions } from "../utils/treeUtil.js";
+import CacheContent_default from "./CacheContent.js";
+import Column_default, { FIX_LABEL } from "./Column.js";
+import useActive_default from "./useActive.js";
+import useKeyboard from "./useKeyboard.js";
+import { computed, createVNode, defineComponent, mergeDefaults, mergeProps, nextTick, ref, watch, watchEffect } from "vue";
+import { clsx } from "@v-c/util";
+var List_default = /* @__PURE__ */ defineComponent((props, { expose }) => {
+	const containerRef = ref(null);
+	const rtl = computed(() => props.direction === "rtl");
+	const context = useCascaderContext();
+	const mergedPrefixCls = computed(() => context.value?.popupPrefixCls || props.prefixCls);
+	const mergedFieldNames = computed(() => context.value?.fieldNames);
+	const loadingKeys = ref([]);
+	const internalLoadData = (valueCells) => {
+		if (!context.value?.loadData || props.searchValue) return;
+		const fieldNames = mergedFieldNames.value;
+		const options = context.value?.options || [];
+		if (!fieldNames) return;
+		const rawOptions = toPathOptions(valueCells, options, fieldNames).map(({ option }) => option);
+		const lastOption = rawOptions[rawOptions.length - 1];
+		if (lastOption && !isLeaf(lastOption, fieldNames)) {
+			const pathKey = toPathKey(valueCells);
+			loadingKeys.value = [...loadingKeys.value, pathKey];
+			context.value.loadData(rawOptions);
+		}
+	};
+	watchEffect(() => {
+		const fieldNames = mergedFieldNames.value;
+		const options = context.value?.options || [];
+		if (!loadingKeys.value.length || !fieldNames) return;
+		const nextLoadingKeys = loadingKeys.value.filter((loadingKey) => {
+			const optionList = toPathOptions(toPathValueStr(String(loadingKey)), options, fieldNames, true).map(({ option }) => option);
+			const lastOption = optionList[optionList.length - 1];
+			return !(!lastOption || lastOption[fieldNames.children] || isLeaf(lastOption, fieldNames));
+		});
+		if (!(nextLoadingKeys.length === loadingKeys.value.length && nextLoadingKeys.every((key, index) => key === loadingKeys.value[index]))) loadingKeys.value = nextLoadingKeys;
+	});
+	const checkedSet = computed(() => new Set(toPathKeys(context.value?.values || [])));
+	const halfCheckedSet = computed(() => new Set(toPathKeys(context.value?.halfValues || [])));
+	const [activeValueCells, setActiveValueCells] = useActive_default(computed(() => !!props.multiple), computed(() => props.open));
+	const onPathOpen = (nextValueCells) => {
+		setActiveValueCells(nextValueCells);
+		internalLoadData(nextValueCells);
+	};
+	const isSelectable = (option) => {
+		if (props.disabled) return false;
+		const { disabled: optionDisabled } = option;
+		const fieldNames = mergedFieldNames.value;
+		if (!fieldNames) return false;
+		const isMergedLeaf = isLeaf(option, fieldNames);
+		return !optionDisabled && (isMergedLeaf || context.value?.changeOnSelect || props.multiple);
+	};
+	const onPathSelect = (valuePath, leaf, fromKeyboard = false) => {
+		context.value?.onSelect(valuePath);
+		if (!props.multiple && (leaf || context.value?.changeOnSelect && (context.value?.expandTrigger === "hover" || fromKeyboard))) props.toggleOpen(false);
+	};
+	const mergedOptions = computed(() => {
+		if (props.searchValue) return context.value?.searchOptions || [];
+		return context.value?.options || [];
+	});
+	const optionColumns = computed(() => {
+		const fieldNames = mergedFieldNames.value;
+		if (!fieldNames) return [];
+		const optionList = [{ options: mergedOptions.value }];
+		let currentList = mergedOptions.value;
+		const fullPathKeys = getFullPathKeys(currentList, fieldNames);
+		for (let i = 0; i < activeValueCells.value.length; i += 1) {
+			const activeValueCell = activeValueCells.value[i];
+			const subOptions = currentList.find((option, index) => (fullPathKeys[index] ? toPathKey(fullPathKeys[index]) : option[fieldNames.value]) === activeValueCell)?.[fieldNames.children];
+			if (!subOptions?.length) break;
+			currentList = subOptions;
+			optionList.push({ options: subOptions });
+		}
+		return optionList;
+	});
+	const onKeyboardSelect = (selectValueCells, option) => {
+		if (isSelectable(option) && mergedFieldNames.value) onPathSelect(selectValueCells, isLeaf(option, mergedFieldNames.value), true);
+	};
+	expose(useKeyboard(mergedOptions, mergedFieldNames, activeValueCells, onPathOpen, onKeyboardSelect, {
+		direction: computed(() => props.direction),
+		searchValue: computed(() => props.searchValue || ""),
+		toggleOpen: props.toggleOpen,
+		open: computed(() => props.open)
+	}));
+	watch([() => activeValueCells.value, () => props.searchValue], () => {
+		if (props.searchValue) return;
+		nextTick(() => {
+			for (let i = 0; i < activeValueCells.value.length; i += 1) {
+				const cellKeyPath = toPathKey(activeValueCells.value.slice(0, i + 1));
+				const ele = containerRef.value?.querySelector(`li[data-path-key="${cellKeyPath.replace(/\\{0,2}"/g, "\\\"")}"]`);
+				if (ele) scrollIntoParentView(ele);
+			}
+		});
+	}, { deep: true });
+	return () => {
+		const fieldNames = mergedFieldNames.value;
+		if (!fieldNames) return null;
+		const isEmpty = !optionColumns.value[0]?.options?.length;
+		const emptyList = [{
+			[fieldNames.value]: "__EMPTY__",
+			[FIX_LABEL]: props.notFoundContent,
+			disabled: true
+		}];
+		const columnProps = {
+			...props,
+			multiple: !isEmpty && props.multiple,
+			onSelect: onPathSelect,
+			onActive: onPathOpen,
+			onToggleOpen: props.toggleOpen,
+			checkedSet: checkedSet.value,
+			halfCheckedSet: halfCheckedSet.value,
+			loadingKeys: loadingKeys.value,
+			isSelectable
+		};
+		const columnNodes = (isEmpty ? [{ options: emptyList }] : optionColumns.value).map((col, index) => {
+			const prevValuePath = activeValueCells.value.slice(0, index);
+			const activeValue = activeValueCells.value[index];
+			return createVNode(Column_default, mergeProps({ "key": index }, columnProps, {
+				"prefixCls": mergedPrefixCls.value,
+				"options": col.options,
+				"prevValuePath": prevValuePath,
+				"activeValue": activeValue
+			}), null);
+		});
+		return createVNode(CacheContent_default, { "open": props.open }, { default: () => [createVNode("div", {
+			"class": clsx(`${mergedPrefixCls.value}-menus`, {
+				[`${mergedPrefixCls.value}-menu-empty`]: isEmpty,
+				[`${mergedPrefixCls.value}-rtl`]: rtl.value
+			}),
+			"ref": containerRef
+		}, [columnNodes])] });
+	};
+}, {
+	props: /* @__PURE__ */ mergeDefaults({
+		prefixCls: {
+			type: String,
+			required: true,
+			default: void 0
+		},
+		multiple: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		searchValue: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		toggleOpen: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		notFoundContent: {
+			required: false,
+			default: void 0
+		},
+		direction: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		open: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		}
+	}, {
+		prefixCls: "",
+		multiple: false,
+		searchValue: "",
+		toggleOpen: () => {},
+		open: false,
+		direction: "ltr",
+		disabled: false
+	}),
+	name: "RawOptionList",
+	inheritAttrs: false
+});
+export { List_default as default };

package/dist/OptionList/index.cjs

@@ -0,0 +1,24 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+const require_List = require("./List.cjs");
+let vue = require("vue");
+let _v_c_select = require("@v-c/select");
+var OptionList = /* @__PURE__ */ (0, vue.defineComponent)((_, { expose }) => {
+	const baseProps = (0, _v_c_select.useBaseProps)();
+	const listRef = (0, vue.shallowRef)(null);
+	expose({
+		onKeyDown: (event) => listRef.value?.onKeyDown(event),
+		onKeyUp: (event) => listRef.value?.onKeyUp(event)
+	});
+	return () => (0, vue.createVNode)(require_List.default, (0, vue.mergeProps)(baseProps.value || {}, { "ref": (el) => {
+		listRef.value = el;
+	} }), null);
+}, {
+	name: "OptionList",
+	inheritAttrs: false
+});
+var OptionList_default = OptionList;
+exports.default = OptionList_default;

package/dist/OptionList/index.d.ts

@@ -0,0 +1,2 @@
+declare const OptionList: import('vue').DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import('vue').PublicProps>;
+export default OptionList;

package/dist/OptionList/index.js

@@ -0,0 +1,18 @@
+import List_default from "./List.js";
+import { createVNode, defineComponent, mergeProps, shallowRef } from "vue";
+import { useBaseProps } from "@v-c/select";
+var OptionList_default = /* @__PURE__ */ defineComponent((_, { expose }) => {
+	const baseProps = useBaseProps();
+	const listRef = shallowRef(null);
+	expose({
+		onKeyDown: (event) => listRef.value?.onKeyDown(event),
+		onKeyUp: (event) => listRef.value?.onKeyUp(event)
+	});
+	return () => createVNode(List_default, mergeProps(baseProps.value || {}, { "ref": (el) => {
+		listRef.value = el;
+	} }), null);
+}, {
+	name: "OptionList",
+	inheritAttrs: false
+});
+export { OptionList_default as default };

package/dist/OptionList/useActive.cjs

@@ -0,0 +1,19 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+const require_context = require("../context.cjs");
+let vue = require("vue");
+function useActive(multiple, open) {
+	const context = require_context.useCascaderContext();
+	const activeValueCells = (0, vue.ref)([]);
+	(0, vue.watch)([open, () => context.value?.values?.[0]], () => {
+		if (!multiple.value) activeValueCells.value = context.value?.values?.[0] || [];
+	}, { immediate: true });
+	return [activeValueCells, (next) => {
+		activeValueCells.value = next;
+	}];
+}
+var useActive_default = useActive;
+exports.default = useActive_default;

package/dist/OptionList/useActive.d.ts

@@ -0,0 +1,7 @@
+import { Ref } from 'vue';
+import { LegacyKey } from '../Cascader';
+/**
+ * Control the active open options path.
+ */
+declare function useActive(multiple: Ref<boolean>, open: Ref<boolean | undefined>): [Ref<LegacyKey[]>, (activeValueCells: LegacyKey[]) => void];
+export default useActive;

package/dist/OptionList/useActive.js

@@ -0,0 +1,14 @@
+import { useCascaderContext } from "../context.js";
+import { ref, watch } from "vue";
+function useActive(multiple, open) {
+	const context = useCascaderContext();
+	const activeValueCells = ref([]);
+	watch([open, () => context.value?.values?.[0]], () => {
+		if (!multiple.value) activeValueCells.value = context.value?.values?.[0] || [];
+	}, { immediate: true });
+	return [activeValueCells, (next) => {
+		activeValueCells.value = next;
+	}];
+}
+var useActive_default = useActive;
+export { useActive_default as default };

package/dist/OptionList/useKeyboard.cjs

@@ -0,0 +1,108 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+const require_useSearchOptions = require("../hooks/useSearchOptions.cjs");
+const require_commonUtil = require("../utils/commonUtil.cjs");
+let _v_c_util_dist_KeyCode = require("@v-c/util/dist/KeyCode");
+_v_c_util_dist_KeyCode = require_rolldown_runtime.__toESM(_v_c_util_dist_KeyCode);
+function useKeyboard(options, fieldNames, activeValueCells, setActiveValueCells, onKeyBoardSelect, contextProps) {
+	const getActiveStatus = () => {
+		let activeIndex = -1;
+		let currentOptions = options.value;
+		const mergedActiveIndexes = [];
+		const mergedActiveValueCells = [];
+		const len = activeValueCells.value.length;
+		const pathKeys = require_commonUtil.getFullPathKeys(options.value, fieldNames.value);
+		for (let i = 0; i < len && currentOptions; i += 1) {
+			const nextActiveIndex = currentOptions.findIndex((option, index) => (pathKeys[index] ? require_commonUtil.toPathKey(pathKeys[index]) : option[fieldNames.value.value]) === activeValueCells.value[i]);
+			if (nextActiveIndex === -1) break;
+			activeIndex = nextActiveIndex;
+			mergedActiveIndexes.push(activeIndex);
+			mergedActiveValueCells.push(activeValueCells.value[i]);
+			currentOptions = currentOptions[activeIndex]?.[fieldNames.value.children];
+		}
+		let activeOptions = options.value;
+		for (let i = 0; i < mergedActiveIndexes.length - 1; i += 1) activeOptions = activeOptions[mergedActiveIndexes[i]]?.[fieldNames.value.children] || [];
+		return {
+			validActiveValueCells: mergedActiveValueCells,
+			lastActiveIndex: activeIndex,
+			lastActiveOptions: activeOptions,
+			fullPathKeys: pathKeys
+		};
+	};
+	const internalSetActiveValueCells = (next) => {
+		setActiveValueCells(next);
+	};
+	const offsetActiveOption = (offset) => {
+		const { lastActiveOptions, lastActiveIndex, fullPathKeys, validActiveValueCells } = getActiveStatus();
+		const len = lastActiveOptions.length;
+		let currentIndex = lastActiveIndex;
+		if (currentIndex === -1 && offset < 0) currentIndex = len;
+		for (let i = 0; i < len; i += 1) {
+			currentIndex = (currentIndex + offset + len) % len;
+			const option = lastActiveOptions[currentIndex];
+			if (option && !option.disabled) {
+				internalSetActiveValueCells(validActiveValueCells.slice(0, -1).concat(fullPathKeys[currentIndex] ? require_commonUtil.toPathKey(fullPathKeys[currentIndex]) : option[fieldNames.value.value]));
+				return;
+			}
+		}
+	};
+	const prevColumn = () => {
+		const { validActiveValueCells } = getActiveStatus();
+		if (validActiveValueCells.length > 1) internalSetActiveValueCells(validActiveValueCells.slice(0, -1));
+		else contextProps.toggleOpen(false);
+	};
+	const nextColumn = () => {
+		const { lastActiveOptions, lastActiveIndex, validActiveValueCells } = getActiveStatus();
+		const nextOption = (lastActiveOptions[lastActiveIndex]?.[fieldNames.value.children] || []).find((option) => !option.disabled);
+		if (nextOption) internalSetActiveValueCells([...validActiveValueCells, nextOption[fieldNames.value.value]]);
+	};
+	return {
+		scrollTo: () => {},
+		onKeyDown: (event) => {
+			const { which } = event;
+			const rtl = contextProps.direction.value === "rtl";
+			const searchValue = contextProps.searchValue.value;
+			const open = contextProps.open.value;
+			switch (which) {
+				case _v_c_util_dist_KeyCode.default.UP:
+				case _v_c_util_dist_KeyCode.default.DOWN: {
+					let offset = 0;
+					if (which === _v_c_util_dist_KeyCode.default.UP) offset = -1;
+					else if (which === _v_c_util_dist_KeyCode.default.DOWN) offset = 1;
+					if (offset !== 0) offsetActiveOption(offset);
+					break;
+				}
+				case _v_c_util_dist_KeyCode.default.LEFT:
+					if (searchValue) break;
+					if (rtl) nextColumn();
+					else prevColumn();
+					break;
+				case _v_c_util_dist_KeyCode.default.RIGHT:
+					if (searchValue) break;
+					if (rtl) prevColumn();
+					else nextColumn();
+					break;
+				case _v_c_util_dist_KeyCode.default.BACKSPACE:
+					if (!searchValue) prevColumn();
+					break;
+				case _v_c_util_dist_KeyCode.default.ENTER: {
+					const { validActiveValueCells, lastActiveOptions, lastActiveIndex } = getActiveStatus();
+					if (validActiveValueCells.length) {
+						const originOptions = lastActiveOptions[lastActiveIndex]?.["__vc_cascader_search_mark__"] || [];
+						if (originOptions.length) onKeyBoardSelect(originOptions.map((opt) => opt[fieldNames.value.value]), originOptions[originOptions.length - 1]);
+						else onKeyBoardSelect(validActiveValueCells, lastActiveOptions[lastActiveIndex]);
+					}
+					break;
+				}
+				case _v_c_util_dist_KeyCode.default.ESC:
+					contextProps.toggleOpen(false);
+					if (open) event.stopPropagation();
+			}
+		},
+		onKeyUp: () => {}
+	};
+}
+exports.default = useKeyboard;

package/dist/OptionList/useKeyboard.d.ts

@@ -0,0 +1,9 @@
+import { RefOptionListProps } from '@v-c/select';
+import { Ref } from 'vue';
+import { DefaultOptionType, InternalFieldNames, LegacyKey, SingleValueType } from '../Cascader';
+export default function useKeyboard(options: Ref<DefaultOptionType[]>, fieldNames: Ref<InternalFieldNames>, activeValueCells: Ref<LegacyKey[]>, setActiveValueCells: (activeValueCells: LegacyKey[]) => void, onKeyBoardSelect: (valueCells: SingleValueType, option: DefaultOptionType) => void, contextProps: {
+    direction: Ref<'ltr' | 'rtl' | undefined>;
+    searchValue: Ref<string>;
+    toggleOpen: (open?: boolean) => void;
+    open: Ref<boolean | undefined>;
+}): RefOptionListProps;