@sdata/web-vue 3.30.0 → 4.0.0

package/es/auto-complete/auto-complete.js

@@ -1,391 +1,5 @@
-import { useFormItem } from "../_hooks/use-form-item.js";
-import { getPrefixCls } from "../_utils/global-config.js";
-import { isFunction, isNull, isUndefined } from "../_utils/is.js";
-import virtual_list_default from "../_components/virtual-list/index.js";
-import { useAllowClear } from "../_hooks/use-allow-clear.js";
-import { useDropdownVirtualListProps } from "../_hooks/use-dropdown-virtual-list-props.js";
-import { resolveDropdownVirtualListProps } from "../_utils/virtual-dropdown.js";
-import Trigger from "../trigger/index.js";
-import Input from "../input/index.js";
-import { getKeyFromValue } from "../select/utils.js";
-import { useSelect } from "../select/hooks/use-select.js";
-import select_dropdown_default from "../select/select-dropdown.js";
-import { computed, createVNode, defineComponent, mergeProps, ref, toRef, toRefs, watch } from "vue";
-//#region components/auto-complete/auto-complete.tsx
-var DEFAULT_AUTOCOMPLETE_VIRTUAL_ITEM_SIZE = 36;
-var auto_complete_default = /* @__PURE__ */ defineComponent({
-	name: "AutoComplete",
-	inheritAttrs: false,
-	props: {
-		/**
-		* @zh 绑定值
-		* @en Value
-		* @vModel
-		*/
-		modelValue: {
-			type: String,
-			default: void 0
-		},
-		/**
-		* @zh 默认值（非受控模式）
-		* @en Default value (uncontrolled mode)
-		*/
-		defaultValue: {
-			type: String,
-			default: ""
-		},
-		/**
-		* @zh 是否禁用
-		* @en Whether to disable
-		*/
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		* @zh 是否为只读状态
-		* @en Whether it is read-only
-		*/
-		readonly: {
-			type: [Boolean, String],
-			default: false
-		},
-		/**
-		* @zh 用于自动提示的数据
-		* @en Data used for auto-complete
-		*/
-		data: {
-			type: Array,
-			default: () => []
-		},
-		/**
-		* @zh 弹出框的挂载容器
-		* @en Mount container for popup
-		*/
-		popupContainer: { type: [String, Object] },
-		/**
-		* @zh 是否为严格校验模式
-		* @en Whether it is strict verification mode
-		*/
-		strict: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		* @zh 自定义选项过滤方法
-		* @en Custom option filtering method
-		*/
-		filterOption: {
-			type: [Boolean, Function],
-			default: true
-		},
-		/**
-		* @zh trigger 组件属性
-		* @en trigger props
-		* @version 2.14.0
-		*/
-		triggerProps: { type: Object },
-		floatingOptions: { type: Object },
-		/**
-		* @zh 是否允许清空输入框
-		* @en Whether to allow the input to be cleared
-		* @version 2.23.0
-		*/
-		allowClear: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		* @zh 宽度是否适应文字内容
-		* @en Whether the width adapts to the text content
-		*/
-		fitWidth: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		* @zh 最大宽度是否限制为父容器宽度
-		* @en Whether the maximum width is limited to the parent container width
-		*/
-		maxWFull: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		* @zh 传递虚拟列表属性，传入此参数以开启虚拟滚动 [VirtualListProps](#VirtualListProps)
-		* @en Pass the virtual list attribute, pass in this parameter to turn on virtual scrolling [VirtualListProps](#VirtualListProps)
-		* @type VirtualListProps
-		* @version 2.50.0
-		*/
-		virtualListProps: { type: Object }
-	},
-	emits: {
-		"update:modelValue": (_value) => true,
-		/**
-		* @zh 绑定值发生改变时触发
-		* @en Emitted when the value changes
-		* @property {string} value
-		*/
-		"change": (_value) => true,
-		/**
-		* @zh 用户搜索时触发
-		* @en Emitted when the user searches
-		* @property {string} value
-		*/
-		"search": (_value) => true,
-		/**
-		* @zh 选择选项时触发
-		* @en Emitted when an option is selected
-		* @property {string} value
-		*/
-		"select": (_value) => true,
-		/**
-		* @zh 用户点击清除按钮时触发
-		* @en Triggered when the user clicks the clear button
-		* @param {Event} ev
-		* @version 2.23.0
-		*/
-		"clear": (_ev) => true,
-		/**
-		* @zh 下拉菜单发生滚动时触发
-		* @en Triggered when the drop-down scrolls
-		* @param {Event} ev
-		* @version 2.52.0
-		*/
-		"dropdownScroll": (_ev) => true,
-		/**
-		* @zh 下拉菜单滚动到底部时触发
-		* @en Triggered when the drop-down menu is scrolled to the bottom
-		* @param {Event} ev
-		* @version 2.52.0
-		*/
-		"dropdownReachBottom": (_ev) => true
-	},
-	/**
-	* @zh 前缀元素
-	* @en Prefix
-	* @slot prefix
-	*/
-	/**
-	* @zh 后缀元素
-	* @en Suffix
-	* @slot suffix
-	*/
-	/**
-	* @zh 弹出框的页脚
-	* @en The footer of the popup menu box
-	* @slot footer
-	*/
-	/**
-	* @zh 选项内容
-	* @en Display content of options
-	* @slot option
-	* @binding {OptionInfo} data
-	* @version 2.13.0
-	*/
-	setup(props, { emit, attrs, slots }) {
-		const { modelValue, allowClear } = toRefs(props);
-		const prefixCls = getPrefixCls("auto-complete");
-		const { mergedDisabled, eventHandlers } = useFormItem({ disabled: toRef(props, "disabled") });
-		const { mergedAllowClear } = useAllowClear(allowClear);
-		const _value = ref(props.defaultValue);
-		const inputRef = ref();
-		const computedValue = computed(() => {
-			var _props$modelValue;
-			return (_props$modelValue = props.modelValue) !== null && _props$modelValue !== void 0 ? _props$modelValue : _value.value;
-		});
-		watch(modelValue, (value) => {
-			if (isUndefined(value) || isNull(value)) _value.value = "";
-		});
-		const computedValueKeys = computed(() => computedValue.value ? [getKeyFromValue(computedValue.value)] : []);
-		const { data } = toRefs(props);
-		const dropdownRef = ref();
-		const optionRefs = ref({});
-		const _popupVisible = ref(false);
-		const computedPopupVisible = computed(() => _popupVisible.value && validOptionInfos.value.length > 0);
-		const virtualListRef = ref();
-		const { mergedDropdownVirtualListProps } = useDropdownVirtualListProps(computed(() => props.virtualListProps));
-		const component = computed(() => mergedDropdownVirtualListProps.value ? "div" : "li");
-		const resolvedVirtualListProps = computed(() => {
-			return resolveDropdownVirtualListProps(mergedDropdownVirtualListProps.value, props.triggerProps, DEFAULT_AUTOCOMPLETE_VIRTUAL_ITEM_SIZE);
-		});
-		const handlePopupVisibleChange = (popupVisible) => {
-			if (popupVisible && props.readonly) return;
-			_popupVisible.value = popupVisible;
-		};
-		const strictFilterOption = (inputValue, option) => {
-			var _option$label;
-			return Boolean((_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.includes(inputValue));
-		};
-		const mergedFilterOption = computed(() => {
-			if (isFunction(props.filterOption)) return props.filterOption;
-			if (props.filterOption && props.strict) return strictFilterOption;
-			return props.filterOption;
-		});
-		const handleChange = (value) => {
-			var _eventHandlers$value, _eventHandlers$value$;
-			_value.value = value;
-			emit("update:modelValue", 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);
-		};
-		const handleClear = (ev) => {
-			var _eventHandlers$value2, _eventHandlers$value3;
-			_value.value = "";
-			emit("update:modelValue", "");
-			emit("change", "");
-			(_eventHandlers$value2 = eventHandlers.value) === null || _eventHandlers$value2 === void 0 || (_eventHandlers$value3 = _eventHandlers$value2.onChange) === null || _eventHandlers$value3 === void 0 || _eventHandlers$value3.call(_eventHandlers$value2);
-			emit("clear", ev);
-		};
-		const handleSelect = (key, _ev) => {
-			var _optionInfoMap$get, _inputRef$value;
-			const value = (_optionInfoMap$get = optionInfoMap.get(key)) === null || _optionInfoMap$get === void 0 ? void 0 : _optionInfoMap$get.value;
-			emit("select", value);
-			handleChange(value);
-			(_inputRef$value = inputRef.value) === null || _inputRef$value === void 0 || _inputRef$value.blur();
-		};
-		const handleInputValueChange = (value) => {
-			emit("search", value);
-			handleChange(value);
-		};
-		const handleDropdownScroll = (e) => {
-			emit("dropdownScroll", e);
-		};
-		const handleDropdownReachBottom = (e) => {
-			emit("dropdownReachBottom", e);
-		};
-		const { validOptions, optionInfoMap, validOptionInfos, activeKey, setActiveKey, handleKeyDown } = useSelect({
-			options: data,
-			inputValue: computedValue,
-			filterOption: mergedFilterOption,
-			popupVisible: computedPopupVisible,
-			valueKeys: computedValueKeys,
-			component,
-			dropdownRef,
-			optionRefs,
-			onSelect: handleSelect,
-			onPopupVisibleChange: handlePopupVisibleChange
-		});
-		const ellipsisPrefixCls = getPrefixCls("ellipsis");
-		const renderOptionEllipsis = (label) => createVNode("span", { "class": [ellipsisPrefixCls, `${ellipsisPrefixCls}--single-line`] }, [createVNode("span", { "class": `${ellipsisPrefixCls}-content` }, [label])]);
-		const getOptionContentFunc = (item) => {
-			if (isFunction(slots.option) && item.value) {
-				const optionInfo = optionInfoMap.get(item.key);
-				const optionSlot = slots.option;
-				return () => optionSlot({ data: optionInfo });
-			}
-			return () => renderOptionEllipsis(item.label);
-		};
-		const optionPrefixCls = getPrefixCls("select-option");
-		const renderOption = (item) => {
-			const isActive = activeKey.value === item.key;
-			const cls = [optionPrefixCls, {
-				[`${optionPrefixCls}-active`]: isActive,
-				[`${optionPrefixCls}-disabled`]: item.disabled
-			}];
-			return createVNode("li", {
-				"ref": (el) => {
-					var _el$$el;
-					const element = (_el$$el = el === null || el === void 0 ? void 0 : el.$el) !== null && _el$$el !== void 0 ? _el$$el : el;
-					if (element instanceof HTMLElement) optionRefs.value[item.key] = element;
-				},
-				"key": item.key,
-				"class": cls,
-				"role": "option",
-				"aria-disabled": item.disabled || void 0,
-				"onClick": (ev) => {
-					if (!item.disabled) handleSelect(item.key, ev);
-				},
-				"onMouseenter": () => {
-					if (!item.disabled) setActiveKey(item.key);
-				},
-				"onMouseleave": () => {
-					if (!item.disabled) setActiveKey();
-				}
-			}, [createVNode("span", { "class": `${optionPrefixCls}-content` }, [getOptionContentFunc(item)()])]);
-		};
-		const renderDropdown = () => {
-			return createVNode(select_dropdown_default, {
-				"ref": dropdownRef,
-				"class": `${prefixCls}-dropdown`,
-				"virtualList": Boolean(resolvedVirtualListProps.value),
-				"onScroll": handleDropdownScroll,
-				"onReachBottom": handleDropdownReachBottom
-			}, {
-				"default": () => validOptions.value.map((info) => renderOption(info)),
-				"virtual-list": () => createVNode(virtual_list_default, mergeProps(resolvedVirtualListProps.value, {
-					"ref": virtualListRef,
-					"items": validOptions.value
-				}), { item: ({ item }) => renderOption(item) }),
-				"footer": slots.footer
-			});
-		};
-		const render = () => {
-			var _props$floatingOption, _props$triggerProps;
-			return createVNode(Trigger, mergeProps({
-				"trigger": "focus",
-				"position": "bl",
-				"animationName": "slide-dynamic-origin",
-				"autoFitTransformOrigin": true,
-				"popupVisible": computedPopupVisible.value,
-				"clickToClose": false,
-				"preventFocus": true,
-				"popupOffset": 4,
-				"disabled": mergedDisabled.value,
-				"autoFitPopupWidth": true
-			}, props.triggerProps, {
-				"floatingOptions": (_props$floatingOption = props.floatingOptions) !== null && _props$floatingOption !== void 0 ? _props$floatingOption : (_props$triggerProps = props.triggerProps) === null || _props$triggerProps === void 0 ? void 0 : _props$triggerProps.floatingOptions,
-				"onPopupVisibleChange": handlePopupVisibleChange
-			}), {
-				default: () => [createVNode(Input, mergeProps({ "ref": inputRef }, attrs, {
-					"allowClear": mergedAllowClear.value,
-					"modelValue": computedValue.value,
-					"disabled": mergedDisabled.value,
-					"readonly": props.readonly,
-					"fitWidth": props.fitWidth,
-					"maxWFull": props.maxWFull,
-					"inputAttrs": {
-						"role": "combobox",
-						"aria-haspopup": "listbox",
-						"aria-expanded": computedPopupVisible.value,
-						"aria-autocomplete": "list"
-					},
-					"onInput": handleInputValueChange,
-					"onClear": handleClear
-				}, { onKeydown: handleKeyDown }), slots)],
-				content: renderDropdown
-			});
-		};
-		return {
-			inputRef,
-			render
-		};
-	},
-	methods: {
-		/**
-		* @zh 使输入框获取焦点
-		* @en Make the input box focus
-		* @public
-		* @version 2.40.0
-		*/
-		focus() {
-			var _this$inputRef;
-			(_this$inputRef = this.inputRef) === null || _this$inputRef === void 0 || _this$inputRef.focus();
-		},
-		/**
-		* @zh 使输入框失去焦点
-		* @en Make the input box lose focus
-		* @public
-		* @version 2.40.0
-		*/
-		blur() {
-			var _this$inputRef2;
-			(_this$inputRef2 = this.inputRef) === null || _this$inputRef2 === void 0 || _this$inputRef2.blur();
-		}
-	},
-	render() {
-		return this.render();
-	}
-});
+import auto_complete_vue_vue_type_script_setup_true_lang_default from "./auto-complete.vue_vue_type_script_setup_true_lang.js";
+//#region components/auto-complete/auto-complete.vue
+var auto_complete_default = auto_complete_vue_vue_type_script_setup_true_lang_default;
 //#endregion
 export { auto_complete_default as default };