@v-c/cascader 0.0.1

package/dist/OptionList/useKeyboard.js

@@ -0,0 +1,102 @@
+import { SEARCH_MARK } from "../hooks/useSearchOptions.js";
+import { getFullPathKeys, toPathKey } from "../utils/commonUtil.js";
+import KeyCode from "@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 = getFullPathKeys(options.value, fieldNames.value);
+		for (let i = 0; i < len && currentOptions; i += 1) {
+			const nextActiveIndex = currentOptions.findIndex((option, index) => (pathKeys[index] ? 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] ? 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 KeyCode.UP:
+				case KeyCode.DOWN: {
+					let offset = 0;
+					if (which === KeyCode.UP) offset = -1;
+					else if (which === KeyCode.DOWN) offset = 1;
+					if (offset !== 0) offsetActiveOption(offset);
+					break;
+				}
+				case KeyCode.LEFT:
+					if (searchValue) break;
+					if (rtl) nextColumn();
+					else prevColumn();
+					break;
+				case KeyCode.RIGHT:
+					if (searchValue) break;
+					if (rtl) prevColumn();
+					else nextColumn();
+					break;
+				case KeyCode.BACKSPACE:
+					if (!searchValue) prevColumn();
+					break;
+				case KeyCode.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 KeyCode.ESC:
+					contextProps.toggleOpen(false);
+					if (open) event.stopPropagation();
+			}
+		},
+		onKeyUp: () => {}
+	};
+}
+export { useKeyboard as default };

package/dist/Panel.cjs

@@ -0,0 +1,209 @@
+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_useMissingValues = require("./hooks/useMissingValues.cjs");
+const require_useOptions = require("./hooks/useOptions.cjs");
+const require_useSelect = require("./hooks/useSelect.cjs");
+const require_useValues = require("./hooks/useValues.cjs");
+const require_List = require("./OptionList/List.cjs");
+let vue = require("vue");
+let _v_c_util = require("@v-c/util");
+let _v_c_util_dist_hooks_useEvent = require("@v-c/util/dist/hooks/useEvent");
+_v_c_util_dist_hooks_useEvent = require_rolldown_runtime.__toESM(_v_c_util_dist_hooks_useEvent);
+function noop() {}
+var panelDefaults = {
+	prefixCls: "vc-cascader",
+	expandIcon: ">",
+	showCheckedStrategy: require_commonUtil.SHOW_PARENT,
+	notFoundContent: "Not Found"
+};
+var Panel = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
+	const multiple = (0, vue.computed)(() => !!props.checkable);
+	const mergedShowCheckedStrategy = (0, vue.computed)(() => props.showCheckedStrategy ?? panelDefaults.showCheckedStrategy);
+	const internalRawValues = (0, vue.shallowRef)(props?.value ?? props?.defaultValue);
+	(0, vue.watch)(() => props.value, () => {
+		internalRawValues.value = props?.value;
+	});
+	const setRawValues = (values) => {
+		internalRawValues.value = values;
+	};
+	const rawValues = (0, vue.computed)(() => require_commonUtil.toRawValues(internalRawValues.value));
+	const mergedFieldNames = (0, vue.computed)(() => require_commonUtil.fillFieldNames(props.fieldNames));
+	const [mergedOptions, getPathKeyEntities, getValueByKeyPath] = require_useOptions.default(mergedFieldNames, (0, vue.computed)(() => props.options));
+	const valuesInfo = require_useValues.default(multiple, rawValues, getPathKeyEntities, getValueByKeyPath, require_useMissingValues.default(mergedOptions, mergedFieldNames));
+	const checkedValues = (0, vue.computed)(() => valuesInfo.value[0]);
+	const halfCheckedValues = (0, vue.computed)(() => valuesInfo.value[1]);
+	const missingCheckedValues = (0, vue.computed)(() => valuesInfo.value[2]);
+	const handleSelection = require_useSelect.default(multiple, (0, _v_c_util_dist_hooks_useEvent.default)((nextValues) => {
+		setRawValues(nextValues);
+		if (props.onChange) {
+			const nextRawValues = require_commonUtil.toRawValues(nextValues);
+			const valueOptions = nextRawValues.map((valueCells) => require_treeUtil.toPathOptions(valueCells, mergedOptions.value, mergedFieldNames.value).map((valueOpt) => valueOpt.option));
+			const triggerValues = multiple.value ? nextRawValues : nextRawValues[0];
+			const triggerOptions = multiple.value ? valueOptions : valueOptions[0];
+			props.onChange(triggerValues, triggerOptions);
+		}
+	}), checkedValues, halfCheckedValues, missingCheckedValues, getPathKeyEntities, getValueByKeyPath, mergedShowCheckedStrategy);
+	const onInternalSelect = (0, _v_c_util_dist_hooks_useEvent.default)((valuePath) => {
+		handleSelection(valuePath);
+	});
+	require_context.useCascaderProvider((0, vue.computed)(() => ({
+		options: mergedOptions.value,
+		fieldNames: mergedFieldNames.value,
+		values: checkedValues.value,
+		halfValues: halfCheckedValues.value,
+		changeOnSelect: props.changeOnSelect,
+		onSelect: onInternalSelect,
+		checkable: props.checkable,
+		searchOptions: [],
+		popupPrefixCls: void 0,
+		loadData: props.loadData,
+		expandTrigger: props.expandTrigger,
+		expandIcon: props.expandIcon !== void 0 ? props.expandIcon : panelDefaults.expandIcon,
+		loadingIcon: props.loadingIcon,
+		popupMenuColumnStyle: void 0,
+		optionRender: props.optionRender
+	})));
+	return () => {
+		const panelPrefixCls = `${props.prefixCls ?? panelDefaults.prefixCls}-panel`;
+		const isEmpty = !mergedOptions.value.length;
+		return (0, vue.createVNode)("div", {
+			"class": (0, _v_c_util.clsx)(panelPrefixCls, {
+				[`${panelPrefixCls}-rtl`]: props.direction === "rtl",
+				[`${panelPrefixCls}-empty`]: isEmpty
+			}, props.className),
+			"style": props.style
+		}, [isEmpty ? props.notFoundContent ?? panelDefaults.notFoundContent : (0, vue.createVNode)(require_List.default, {
+			"prefixCls": props.prefixCls ?? panelDefaults.prefixCls,
+			"searchValue": "",
+			"multiple": multiple.value,
+			"toggleOpen": noop,
+			"open": true,
+			"direction": props.direction,
+			"disabled": props.disabled
+		}, null)]);
+	};
+}, { props: /* @__PURE__ */ (0, vue.mergeDefaults)({
+	value: {
+		required: false,
+		default: void 0
+	},
+	defaultValue: {
+		required: false,
+		default: void 0
+	},
+	changeOnSelect: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	},
+	onChange: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	options: {
+		type: Array,
+		required: false,
+		default: void 0
+	},
+	prefixCls: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	checkable: {
+		required: false,
+		default: void 0
+	},
+	fieldNames: {
+		type: Object,
+		required: false,
+		default: void 0
+	},
+	showCheckedStrategy: {
+		required: false,
+		default: void 0
+	},
+	loadData: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	expandTrigger: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	expandIcon: {
+		type: [
+			Object,
+			Function,
+			String,
+			Number,
+			null,
+			Boolean,
+			Array
+		],
+		required: false,
+		default: void 0
+	},
+	loadingIcon: {
+		type: [
+			Object,
+			Function,
+			String,
+			Number,
+			null,
+			Boolean,
+			Array
+		],
+		required: false,
+		default: void 0
+	},
+	className: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	style: {
+		type: Object,
+		required: false,
+		default: void 0
+	},
+	direction: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	notFoundContent: {
+		type: [
+			Object,
+			Function,
+			String,
+			Number,
+			null,
+			Boolean,
+			Array
+		],
+		required: false,
+		default: void 0
+	},
+	disabled: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	},
+	optionRender: {
+		type: Function,
+		required: false,
+		default: void 0
+	}
+}, panelDefaults) });
+var Panel_default = Panel;
+exports.default = Panel_default;

package/dist/Panel.d.ts

@@ -0,0 +1,5 @@
+import { CascaderProps, DefaultOptionType } from './Cascader';
+export type PickType = 'value' | 'defaultValue' | 'changeOnSelect' | 'onChange' | 'options' | 'prefixCls' | 'checkable' | 'fieldNames' | 'showCheckedStrategy' | 'loadData' | 'expandTrigger' | 'expandIcon' | 'loadingIcon' | 'className' | 'style' | 'direction' | 'notFoundContent' | 'disabled' | 'optionRender';
+export type PanelProps<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends boolean | any = false> = Pick<CascaderProps<OptionType, ValueField, Multiple>, PickType>;
+declare const Panel: import('vue').DefineSetupFnComponent<PanelProps<DefaultOptionType, string, false>, {}, {}, PanelProps<DefaultOptionType, string, false> & {}, import('vue').PublicProps>;
+export default Panel;

package/dist/Panel.js

@@ -0,0 +1,202 @@
+import { useCascaderProvider } from "./context.js";
+import { SHOW_PARENT, fillFieldNames, toRawValues } from "./utils/commonUtil.js";
+import { toPathOptions } from "./utils/treeUtil.js";
+import useMissingValues from "./hooks/useMissingValues.js";
+import useOptions from "./hooks/useOptions.js";
+import useSelect from "./hooks/useSelect.js";
+import useValues from "./hooks/useValues.js";
+import List_default from "./OptionList/List.js";
+import { computed, createVNode, defineComponent, mergeDefaults, shallowRef, watch } from "vue";
+import { clsx } from "@v-c/util";
+import useEvent from "@v-c/util/dist/hooks/useEvent";
+function noop() {}
+var panelDefaults = {
+	prefixCls: "vc-cascader",
+	expandIcon: ">",
+	showCheckedStrategy: SHOW_PARENT,
+	notFoundContent: "Not Found"
+};
+var Panel_default = /* @__PURE__ */ defineComponent((props) => {
+	const multiple = computed(() => !!props.checkable);
+	const mergedShowCheckedStrategy = computed(() => props.showCheckedStrategy ?? panelDefaults.showCheckedStrategy);
+	const internalRawValues = shallowRef(props?.value ?? props?.defaultValue);
+	watch(() => props.value, () => {
+		internalRawValues.value = props?.value;
+	});
+	const setRawValues = (values) => {
+		internalRawValues.value = values;
+	};
+	const rawValues = computed(() => toRawValues(internalRawValues.value));
+	const mergedFieldNames = computed(() => fillFieldNames(props.fieldNames));
+	const [mergedOptions, getPathKeyEntities, getValueByKeyPath] = useOptions(mergedFieldNames, computed(() => props.options));
+	const valuesInfo = useValues(multiple, rawValues, getPathKeyEntities, getValueByKeyPath, useMissingValues(mergedOptions, mergedFieldNames));
+	const checkedValues = computed(() => valuesInfo.value[0]);
+	const halfCheckedValues = computed(() => valuesInfo.value[1]);
+	const missingCheckedValues = computed(() => valuesInfo.value[2]);
+	const handleSelection = useSelect(multiple, useEvent((nextValues) => {
+		setRawValues(nextValues);
+		if (props.onChange) {
+			const nextRawValues = toRawValues(nextValues);
+			const valueOptions = nextRawValues.map((valueCells) => toPathOptions(valueCells, mergedOptions.value, mergedFieldNames.value).map((valueOpt) => valueOpt.option));
+			const triggerValues = multiple.value ? nextRawValues : nextRawValues[0];
+			const triggerOptions = multiple.value ? valueOptions : valueOptions[0];
+			props.onChange(triggerValues, triggerOptions);
+		}
+	}), checkedValues, halfCheckedValues, missingCheckedValues, getPathKeyEntities, getValueByKeyPath, mergedShowCheckedStrategy);
+	const onInternalSelect = useEvent((valuePath) => {
+		handleSelection(valuePath);
+	});
+	useCascaderProvider(computed(() => ({
+		options: mergedOptions.value,
+		fieldNames: mergedFieldNames.value,
+		values: checkedValues.value,
+		halfValues: halfCheckedValues.value,
+		changeOnSelect: props.changeOnSelect,
+		onSelect: onInternalSelect,
+		checkable: props.checkable,
+		searchOptions: [],
+		popupPrefixCls: void 0,
+		loadData: props.loadData,
+		expandTrigger: props.expandTrigger,
+		expandIcon: props.expandIcon !== void 0 ? props.expandIcon : panelDefaults.expandIcon,
+		loadingIcon: props.loadingIcon,
+		popupMenuColumnStyle: void 0,
+		optionRender: props.optionRender
+	})));
+	return () => {
+		const panelPrefixCls = `${props.prefixCls ?? panelDefaults.prefixCls}-panel`;
+		const isEmpty = !mergedOptions.value.length;
+		return createVNode("div", {
+			"class": clsx(panelPrefixCls, {
+				[`${panelPrefixCls}-rtl`]: props.direction === "rtl",
+				[`${panelPrefixCls}-empty`]: isEmpty
+			}, props.className),
+			"style": props.style
+		}, [isEmpty ? props.notFoundContent ?? panelDefaults.notFoundContent : createVNode(List_default, {
+			"prefixCls": props.prefixCls ?? panelDefaults.prefixCls,
+			"searchValue": "",
+			"multiple": multiple.value,
+			"toggleOpen": noop,
+			"open": true,
+			"direction": props.direction,
+			"disabled": props.disabled
+		}, null)]);
+	};
+}, { props: /* @__PURE__ */ mergeDefaults({
+	value: {
+		required: false,
+		default: void 0
+	},
+	defaultValue: {
+		required: false,
+		default: void 0
+	},
+	changeOnSelect: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	},
+	onChange: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	options: {
+		type: Array,
+		required: false,
+		default: void 0
+	},
+	prefixCls: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	checkable: {
+		required: false,
+		default: void 0
+	},
+	fieldNames: {
+		type: Object,
+		required: false,
+		default: void 0
+	},
+	showCheckedStrategy: {
+		required: false,
+		default: void 0
+	},
+	loadData: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	expandTrigger: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	expandIcon: {
+		type: [
+			Object,
+			Function,
+			String,
+			Number,
+			null,
+			Boolean,
+			Array
+		],
+		required: false,
+		default: void 0
+	},
+	loadingIcon: {
+		type: [
+			Object,
+			Function,
+			String,
+			Number,
+			null,
+			Boolean,
+			Array
+		],
+		required: false,
+		default: void 0
+	},
+	className: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	style: {
+		type: Object,
+		required: false,
+		default: void 0
+	},
+	direction: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	notFoundContent: {
+		type: [
+			Object,
+			Function,
+			String,
+			Number,
+			null,
+			Boolean,
+			Array
+		],
+		required: false,
+		default: void 0
+	},
+	disabled: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	},
+	optionRender: {
+		type: Function,
+		required: false,
+		default: void 0
+	}
+}, panelDefaults) });
+export { Panel_default as default };

package/dist/_virtual/rolldown_runtime.cjs

@@ -0,0 +1,21 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+exports.__toESM = __toESM;

package/dist/context.cjs

@@ -0,0 +1,12 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+var CascaderContextKey = Symbol("CascaderContext");
+function useCascaderProvider(value) {
+	(0, vue.provide)(CascaderContextKey, value);
+}
+function useCascaderContext() {
+	return (0, vue.inject)(CascaderContextKey, (0, vue.ref)(null));
+}
+exports.useCascaderContext = useCascaderContext;
+exports.useCascaderProvider = useCascaderProvider;

package/dist/context.d.ts

@@ -0,0 +1,23 @@
+import { Ref } from 'vue';
+import { CascaderProps, DefaultOptionType, InternalFieldNames, SingleValueType } from './Cascader';
+export interface CascaderContextProps {
+    options: NonNullable<CascaderProps['options']>;
+    fieldNames: InternalFieldNames;
+    values: SingleValueType[];
+    halfValues: SingleValueType[];
+    changeOnSelect?: boolean;
+    onSelect: (valuePath: SingleValueType) => void;
+    checkable?: boolean | any;
+    searchOptions: DefaultOptionType[];
+    popupPrefixCls?: string;
+    loadData?: (selectOptions: DefaultOptionType[]) => void;
+    expandTrigger?: 'hover' | 'click';
+    expandIcon?: any;
+    loadingIcon?: any;
+    popupMenuColumnStyle?: CascaderProps['popupMenuColumnStyle'];
+    optionRender?: CascaderProps['optionRender'];
+    classNames?: CascaderProps['classNames'];
+    styles?: CascaderProps['styles'];
+}
+export declare function useCascaderProvider(value: Ref<CascaderContextProps>): void;
+export declare function useCascaderContext(): Ref<CascaderContextProps | null>;

package/dist/context.js

@@ -0,0 +1,9 @@
+import { inject, provide, ref } from "vue";
+var CascaderContextKey = Symbol("CascaderContext");
+function useCascaderProvider(value) {
+	provide(CascaderContextKey, value);
+}
+function useCascaderContext() {
+	return inject(CascaderContextKey, ref(null));
+}
+export { useCascaderContext, useCascaderProvider };

package/dist/hooks/useDisplayValues.cjs

@@ -0,0 +1,39 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+const require_commonUtil = require("../utils/commonUtil.cjs");
+const require_treeUtil = require("../utils/treeUtil.cjs");
+let vue = require("vue");
+var useDisplayValues_default = (rawValues, options, fieldNames, multiple, displayRender) => {
+	return (0, vue.computed)(() => {
+		const mergedDisplayRender = displayRender.value || ((labels) => {
+			const mergedLabels = multiple.value ? labels.slice(-1) : labels;
+			const split = " / ";
+			if (mergedLabels.every((label) => ["string", "number"].includes(typeof label))) return mergedLabels.join(split);
+			return mergedLabels.reduce((list, label, index) => {
+				const nextLabel = (0, vue.isVNode)(label) ? (0, vue.cloneVNode)(label, { key: index }) : label;
+				if (index === 0) return [nextLabel];
+				return [
+					...list,
+					split,
+					nextLabel
+				];
+			}, []);
+		});
+		return rawValues.value.map((valueCells) => {
+			const valueOptions = require_treeUtil.toPathOptions(valueCells, options.value, fieldNames.value);
+			const label = mergedDisplayRender(valueOptions.map(({ option, value: value$1 }) => option?.[fieldNames.value.label] ?? value$1), valueOptions.map(({ option }) => option));
+			const value = require_commonUtil.toPathKey(valueCells);
+			return {
+				label,
+				value,
+				key: value,
+				valueCells,
+				disabled: valueOptions[valueOptions.length - 1]?.option?.disabled
+			};
+		});
+	});
+};
+exports.default = useDisplayValues_default;

package/dist/hooks/useDisplayValues.d.ts

@@ -0,0 +1,4 @@
+import { ComputedRef, Ref } from 'vue';
+import { CascaderProps, DefaultOptionType, InternalFieldNames, SingleValueType } from '../Cascader';
+declare const _default: (rawValues: Ref<SingleValueType[]>, options: Ref<DefaultOptionType[]>, fieldNames: Ref<InternalFieldNames>, multiple: Ref<boolean>, displayRender: Ref<CascaderProps["displayRender"] | undefined>) => ComputedRef<any[]>;
+export default _default;

package/dist/hooks/useDisplayValues.js

@@ -0,0 +1,34 @@
+import { toPathKey } from "../utils/commonUtil.js";
+import { toPathOptions } from "../utils/treeUtil.js";
+import { cloneVNode, computed, isVNode } from "vue";
+var useDisplayValues_default = (rawValues, options, fieldNames, multiple, displayRender) => {
+	return computed(() => {
+		const mergedDisplayRender = displayRender.value || ((labels) => {
+			const mergedLabels = multiple.value ? labels.slice(-1) : labels;
+			const split = " / ";
+			if (mergedLabels.every((label) => ["string", "number"].includes(typeof label))) return mergedLabels.join(split);
+			return mergedLabels.reduce((list, label, index) => {
+				const nextLabel = isVNode(label) ? cloneVNode(label, { key: index }) : label;
+				if (index === 0) return [nextLabel];
+				return [
+					...list,
+					split,
+					nextLabel
+				];
+			}, []);
+		});
+		return rawValues.value.map((valueCells) => {
+			const valueOptions = toPathOptions(valueCells, options.value, fieldNames.value);
+			const label = mergedDisplayRender(valueOptions.map(({ option, value: value$1 }) => option?.[fieldNames.value.label] ?? value$1), valueOptions.map(({ option }) => option));
+			const value = toPathKey(valueCells);
+			return {
+				label,
+				value,
+				key: value,
+				valueCells,
+				disabled: valueOptions[valueOptions.length - 1]?.option?.disabled
+			};
+		});
+	});
+};
+export { useDisplayValues_default as default };