@sdata/web-vue 1.9.0 → 1.10.0

package/es/cascader/cascader.vue_vue_type_script_lang.js

@@ -2,8 +2,10 @@ import { useFormItem } from "../_hooks/use-form-item.js";
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.124.0/helpers/objectSpread2.js";
 import { isArray, isFunction, isNull, isUndefined } from "../_utils/is.js";
 import { useAllowClear } from "../_hooks/use-allow-clear.js";
+import { resolveDropdownVirtualListProps } from "../_utils/virtual-dropdown.js";
 import { KEYBOARD_KEY, getKeyDownHandler } from "../_utils/keyboard.js";
 import Trigger from "../trigger/index.js";
+import { useTrigger } from "../_hooks/use-trigger.js";
 import select_view_default from "../_components/select-view/select-view.js";
 import { debounce } from "../_utils/debounce.js";
 import { cascaderInjectionKey } from "./context.js";
@@ -11,8 +13,14 @@ import { getCheckedStatus, getLeafOptionInfos, getLeafOptionKeys, getOptionInfos
 import base_cascader_panel_default from "./base-cascader-panel.js";
 import { useSelectedPath } from "./hooks/use-selected-path.js";
 import cascader_search_panel_default from "./cascader-search-panel.js";
-import { computed, defineComponent, provide, reactive, ref, toRefs, watch } from "vue";
+import { computed, defineComponent, getCurrentInstance, provide, reactive, ref, toRefs, watch } from "vue";
 //#region components/cascader/cascader.vue?vue&type=script&lang.ts
+var DEFAULT_CASCADER_VIRTUAL_ITEM_SIZE = 36;
+var getDefaultValue = (multiple, pathMode) => {
+	if (multiple) return [];
+	if (pathMode) return;
+	return "";
+};
 var cascader_vue_vue_type_script_lang_default = defineComponent({
 	name: "Cascader",
 	components: {
@@ -37,6 +45,12 @@ var cascader_vue_vue_type_script_lang_default = defineComponent({
 			Object,
 			Array
 		] },
+		value: { type: [
+			String,
+			Number,
+			Object,
+			Array
+		] },
 		defaultValue: {
 			type: [
 				String,
@@ -44,7 +58,7 @@ var cascader_vue_vue_type_script_lang_default = defineComponent({
 				Object,
 				Array
 			],
-			default: (props) => props.multiple ? [] : props.pathMode ? void 0 : ""
+			default: (props) => getDefaultValue(Boolean(props.multiple), Boolean(props.pathMode))
 		},
 		options: {
 			type: Array,
@@ -63,10 +77,12 @@ var cascader_vue_vue_type_script_lang_default = defineComponent({
 			type: Boolean,
 			default: (props) => Boolean(props.multiple)
 		},
+		filterable: { type: Boolean },
 		allowClear: {
 			type: Boolean,
 			default: false
 		},
+		clearable: { type: Boolean },
 		inputValue: {
 			type: String,
 			default: void 0
@@ -79,6 +95,10 @@ var cascader_vue_vue_type_script_lang_default = defineComponent({
 			type: Boolean,
 			default: void 0
 		},
+		show: {
+			type: Boolean,
+			default: void 0
+		},
 		expandTrigger: {
 			type: String,
 			default: "click"
@@ -87,13 +107,25 @@ var cascader_vue_vue_type_script_lang_default = defineComponent({
 			type: Boolean,
 			default: false
 		},
+		defaultShow: {
+			type: Boolean,
+			default: void 0
+		},
 		placeholder: String,
 		filterOption: { type: Function },
 		popupContainer: { type: [String, Object] },
 		maxTagCount: {
-			type: Number,
+			type: [Number, String],
 			default: 0
 		},
+		showPath: {
+			type: Boolean,
+			default: true
+		},
+		separator: {
+			type: String,
+			default: " / "
+		},
 		formatLabel: { type: Function },
 		triggerProps: { type: Object },
 		checkStrictly: {
@@ -134,24 +166,46 @@ var cascader_vue_vue_type_script_lang_default = defineComponent({
 	},
 	emits: {
 		"update:modelValue": (_value) => true,
+		"update:value": (_value) => true,
 		"update:popupVisible": (_visible) => true,
+		"update:show": (_visible) => true,
 		"change": (_value) => true,
 		"inputValueChange": (_value) => true,
 		"clear": () => true,
 		"search": (_value) => true,
 		"popupVisibleChange": (_visible) => true,
+		"showChange": (_visible) => true,
 		"focus": (_ev) => true,
 		"blur": (_ev) => true
 	},
 	setup(props, { emit, slots }) {
-		const { options, checkStrictly, loadMore, formatLabel, modelValue, disabled, valueKey, expandTrigger, expandChild, pathMode, multiple, allowClear } = toRefs(props);
+		const { options, checkStrictly, loadMore, formatLabel, modelValue, value: valueProp, disabled, valueKey, expandTrigger, expandChild, pathMode, multiple, popupVisible, show, defaultPopupVisible, defaultShow } = toRefs(props);
 		const _value = ref(props.defaultValue);
 		const _inputValue = ref(props.defaultInputValue);
-		const _popupVisible = ref(props.defaultPopupVisible);
+		const instance = getCurrentInstance();
 		const { mergedDisabled, eventHandlers } = useFormItem({ disabled });
-		const { mergedAllowClear } = useAllowClear(allowClear);
-		watch(modelValue, (value) => {
-			if (isUndefined(value) || isNull(value)) _value.value = props.multiple ? [] : void 0;
+		const mergedAllowSearch = computed(() => {
+			const rawProps = instance === null || instance === void 0 ? void 0 : instance.vnode.props;
+			if (!!rawProps && ["allowSearch", "allow-search"].some((propName) => Object.hasOwn(rawProps, propName))) return props.allowSearch;
+			if (props.filterable !== void 0) return props.filterable;
+			return props.allowSearch;
+		});
+		const { mergedAllowClear } = useAllowClear(computed(() => {
+			var _props$clearable;
+			const rawProps = instance === null || instance === void 0 ? void 0 : instance.vnode.props;
+			if (!!rawProps && ["allowClear", "allow-clear"].some((propName) => Object.hasOwn(rawProps, propName))) return props.allowClear;
+			return (_props$clearable = props.clearable) !== null && _props$clearable !== void 0 ? _props$clearable : props.allowClear;
+		}), ["clearable"]);
+		const { computedPopupVisible, handlePopupVisibleChange } = useTrigger({
+			popupVisible,
+			defaultPopupVisible,
+			show,
+			defaultShow,
+			emit
+		});
+		watch([modelValue, valueProp], ([nextModelValue, nextValue]) => {
+			const mergedValue = nextModelValue !== null && nextModelValue !== void 0 ? nextModelValue : nextValue;
+			if (isUndefined(mergedValue) || isNull(mergedValue)) _value.value = getDefaultValue(props.multiple, props.pathMode);
 		});
 		const optionInfos = ref([]);
 		const totalLevel = ref(1);
@@ -169,7 +223,6 @@ var cascader_vue_vue_type_script_lang_default = defineComponent({
 			disabled: "disabled",
 			children: "children",
 			tagProps: "tagProps",
-			render: "render",
 			isLeaf: "isLeaf"
 		};
 		watch([
@@ -198,8 +251,8 @@ var cascader_vue_vue_type_script_lang_default = defineComponent({
 			deep: true
 		});
 		const computedValueMap = computed(() => {
-			var _props$modelValue;
-			const values = getValidValues((_props$modelValue = props.modelValue) !== null && _props$modelValue !== void 0 ? _props$modelValue : _value.value, {
+			var _ref, _props$modelValue;
+			const values = getValidValues((_ref = (_props$modelValue = props.modelValue) !== null && _props$modelValue !== void 0 ? _props$modelValue : props.value) !== null && _ref !== void 0 ? _ref : _value.value, {
 				multiple: props.multiple,
 				pathMode: props.pathMode
 			});
@@ -212,9 +265,8 @@ var cascader_vue_vue_type_script_lang_default = defineComponent({
 			var _props$inputValue;
 			return (_props$inputValue = props.inputValue) !== null && _props$inputValue !== void 0 ? _props$inputValue : _inputValue.value;
 		});
-		const computedPopupVisible = computed(() => {
-			var _props$popupVisible;
-			return (_props$popupVisible = props.popupVisible) !== null && _props$popupVisible !== void 0 ? _props$popupVisible : _popupVisible.value;
+		const resolvedVirtualListProps = computed(() => {
+			return resolveDropdownVirtualListProps(props.virtualListProps, props.triggerProps, DEFAULT_CASCADER_VIRTUAL_ITEM_SIZE);
 		});
 		const getFilteredStatus = (label) => {
 			var _computedInputValue$v;
@@ -237,6 +289,7 @@ var cascader_vue_vue_type_script_lang_default = defineComponent({
 			}
 			_value.value = value;
 			emit("update:modelValue", value);
+			emit("update:value", value);
 			emit("change", value);
 			(_eventHandlers$value = eventHandlers.value) === null || _eventHandlers$value === void 0 || (_eventHandlers$value$ = _eventHandlers$value.onChange) === null || _eventHandlers$value$ === void 0 || _eventHandlers$value$.call(_eventHandlers$value);
 		};
@@ -248,12 +301,6 @@ var cascader_vue_vue_type_script_lang_default = defineComponent({
 			});
 			updateValue(values);
 		});
-		const handlePopupVisibleChange = (visible) => {
-			if (computedPopupVisible.value !== visible) {
-				_popupVisible.value = visible;
-				emit("popupVisibleChange", visible);
-			}
-		};
 		const handleRemove = (key) => {
 			if (props.multiple) {
 				const option = leafOptionMap.get(key);
@@ -296,13 +343,10 @@ var cascader_vue_vue_type_script_lang_default = defineComponent({
 		}, props.searchDelay);
 		const handleInputValueChange = (value, reason) => {
 			if (value !== computedInputValue.value) {
-				if (reason === "manual" && !computedPopupVisible.value) {
-					_popupVisible.value = true;
-					emit("popupVisibleChange", true);
-				}
+				if (reason === "manual" && !computedPopupVisible.value) handlePopupVisibleChange(true);
 				_inputValue.value = value;
 				emit("inputValueChange", value);
-				if (props.allowSearch) handleSearch(value);
+				if (mergedAllowSearch.value) handleSearch(value);
 			}
 		};
 		watch(computedPopupVisible, (value) => {
@@ -328,7 +372,7 @@ var cascader_vue_vue_type_script_lang_default = defineComponent({
 			e.stopPropagation();
 			if (props.multiple) {
 				const newValues = [];
-				computedValueMap.value.forEach((value, key) => {
+				computedValueMap.value.forEach((_value, key) => {
 					const option = leafOptionMap.get(key);
 					if (option === null || option === void 0 ? void 0 : option.disabled) newValues.push(props.pathMode ? option.pathValue : option.value);
 				});
@@ -337,7 +381,7 @@ var cascader_vue_vue_type_script_lang_default = defineComponent({
 			handleInputValueChange("", "manual");
 			emit("clear");
 		};
-		const showSearchPanel = computed(() => props.allowSearch && computedInputValue.value.length > 0);
+		const showSearchPanel = computed(() => Boolean(mergedAllowSearch.value) && computedInputValue.value.length > 0);
 		const handleFocus = (e) => {
 			emit("focus", e);
 		};
@@ -358,6 +402,7 @@ var cascader_vue_vue_type_script_lang_default = defineComponent({
 			expandTrigger,
 			addLazyLoadOptions,
 			formatLabel,
+			separator: props.separator,
 			slots,
 			valueMap: computedValueMap
 		}));
@@ -425,12 +470,20 @@ var cascader_vue_vue_type_script_lang_default = defineComponent({
 						var _props$formatLabel, _props$formatLabel2;
 						result.push({
 							value: key,
-							label: (_props$formatLabel = (_props$formatLabel2 = props.formatLabel) === null || _props$formatLabel2 === void 0 ? void 0 : _props$formatLabel2.call(props, option.path.map((item) => item.raw))) !== null && _props$formatLabel !== void 0 ? _props$formatLabel : getOptionLabel(option),
+							label: (_props$formatLabel = (_props$formatLabel2 = props.formatLabel) === null || _props$formatLabel2 === void 0 ? void 0 : _props$formatLabel2.call(props, option.path.map((item) => item.raw))) !== null && _props$formatLabel !== void 0 ? _props$formatLabel : getOptionLabel(option, {
+								showPath: props.showPath,
+								separator: props.separator
+							}),
 							closable: !option.disabled,
 							tagProps: option.tagProps
 						});
 					} else if (props.fallback) {
-						const label = isFunction(props.fallback) ? props.fallback(value) : isArray(value) ? value.join(" / ") : String(value);
+						let label;
+						if (isFunction(props.fallback)) label = props.fallback(value);
+						else if (isArray(value)) {
+							var _value2;
+							label = props.showPath ? value.map((item) => String(item)).join(props.separator) : String((_value2 = value[value.length - 1]) !== null && _value2 !== void 0 ? _value2 : "");
+						} else label = String(value);
 						result.push({
 							value: key,
 							label,
@@ -448,8 +501,10 @@ var cascader_vue_vue_type_script_lang_default = defineComponent({
 			handleRemove,
 			mergedDisabled,
 			mergedAllowClear,
+			mergedAllowSearch,
 			handleKeyDown,
-			totalLevel
+			totalLevel,
+			resolvedVirtualListProps
 		};
 	}
 });

package/es/cascader/context.d.ts

@@ -1,15 +1,15 @@
 import { InjectionKey, Slots } from 'vue';
-import { UnionType } from '../_utils/types';
-import { CascaderOption, CascaderOptionInfo } from './interface';
+import { CascaderOption, CascaderOptionInfo, CascaderSingleValue } from './interface';
 export interface CascaderContext {
     onClickOption: (option: CascaderOptionInfo, checked?: boolean) => void;
     setActiveKey: (key?: string) => void;
     setSelectedPath: (key?: string) => void;
-    loadMore: (option: CascaderOption, done: (children?: CascaderOption[]) => void) => void;
+    loadMore?: (option: CascaderOption, done: (children?: CascaderOption[]) => void) => void;
     addLazyLoadOptions: (children: CascaderOption[], key: string) => void;
-    formatLabel: (options: CascaderOption[]) => string;
+    formatLabel?: (options: CascaderOption[]) => string;
+    separator?: string;
     slots: Slots;
-    valueMap: Map<string, UnionType | UnionType[]>;
+    valueMap: Map<string, CascaderSingleValue>;
     expandTrigger: 'click' | 'hover';
 }
 export declare const cascaderInjectionKey: InjectionKey<CascaderContext>;