@sdata/web-vue 3.30.0 → 4.0.0

package/es/mention/mention.js

@@ -1,439 +1,5 @@
-import { useFormItem } from "../_hooks/use-form-item.js";
-import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
-import { getPrefixCls } from "../_utils/global-config.js";
-import { isFunction, isNull, isUndefined } from "../_utils/is.js";
-import resize_observer_default from "../_components/resize-observer.js";
-import { useAllowClear } from "../_hooks/use-allow-clear.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 { getSizeStyles } from "../textarea/utils.js";
-import Textarea from "../textarea/index.js";
-import { getLastMeasureIndex, getTextBeforeSelection, isValidSearch } from "./utils.js";
-import { computed, createTextVNode, createVNode, defineComponent, isVNode, mergeProps, nextTick, onMounted, ref, toRef, toRefs, watch } from "vue";
-//#region components/mention/mention.tsx
-function _isSlot(s) {
-	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
-var mention_default = /* @__PURE__ */ defineComponent({
-	name: "Mention",
-	inheritAttrs: false,
-	props: {
-		/**
-		* @zh 绑定值
-		* @en Value
-		* @vModel
-		*/
-		modelValue: String,
-		/**
-		* @zh 默认值（非受控状态）
-		* @en Default value (uncontrolled state)
-		*/
-		defaultValue: {
-			type: String,
-			default: ""
-		},
-		/**
-		* @zh 用于自动补全的数据
-		* @en Data for automatic completion
-		*/
-		data: {
-			type: Array,
-			default: () => []
-		},
-		/**
-		* @zh 触发自动补全的关键字
-		* @en Keywords that trigger auto-completion
-		*/
-		prefix: {
-			type: [String, Array],
-			default: "@"
-		},
-		/**
-		* @zh 选中项的前后分隔符
-		* @en Before and after the selected item separator
-		*/
-		split: {
-			type: String,
-			default: " "
-		},
-		/**
-		* @zh 输入框或文本域
-		* @en default input or textarea
-		*/
-		type: {
-			type: String,
-			default: "input"
-		},
-		/**
-		* @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 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 Floating UI Vue 的完整定位配置
-		* @en Complete Floating UI Vue positioning options
-		*/
-		floatingOptions: { type: Object }
-	},
-	emits: {
-		"update:modelValue": (_value) => true,
-		/**
-		* @zh 值发生改变时触发
-		* @en Triggered when the value changes
-		* @property {string} value
-		*/
-		"change": (_value) => true,
-		/**
-		* @zh 动态搜索时触发，2.47.0 版本增加 prefix 参数
-		* @en Trigger on dynamic search prefix, version 2.47.0 adds prefix param
-		* @property {string} value
-		* @property {string} prefix
-		*/
-		"search": (_value, _prefix) => true,
-		/**
-		* @zh 选择下拉选项时触发
-		* @en Triggered when the drop-down option is selected
-		* @property {string | number | Record<string, any> | undefined} value
-		*/
-		"select": (_value) => true,
-		/**
-		* @zh 用户点击清除按钮时触发
-		* @en Triggered when the user clicks the clear button
-		* @version 2.23.0
-		*/
-		"clear": (_ev) => true,
-		/**
-		* @zh 文本框获取焦点时触发
-		* @en Emitted when the text box gets focus
-		* @param {FocusEvent} ev
-		* @version 2.42.0
-		*/
-		"focus": (_ev) => true,
-		/**
-		* @zh 文本框失去焦点时触发
-		* @en Emitted when the text box loses focus
-		* @param {FocusEvent} ev
-		* @version 2.42.0
-		*/
-		"blur": (_ev) => true
-	},
-	/**
-	* @zh 选项内容
-	* @en Display content of options
-	* @slot option
-	* @binding {OptionInfo} data
-	* @version 2.13.0
-	*/
-	setup(props, { emit, attrs, slots }) {
-		const prefixCls = getPrefixCls("mention");
-		const { mergedAllowClear } = useAllowClear(toRef(props, "allowClear"));
-		let styleDeclaration;
-		const { mergedDisabled, eventHandlers } = useFormItem({ disabled: toRef(props, "disabled") });
-		const { data, modelValue } = toRefs(props);
-		const dropdownRef = ref();
-		const optionRefs = ref({});
-		const _value = ref(props.defaultValue);
-		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 measureInfo = ref({
-			measuring: false,
-			location: -1,
-			prefix: "",
-			text: ""
-		});
-		const resetMeasureInfo = () => {
-			measureInfo.value = {
-				measuring: false,
-				location: -1,
-				prefix: "",
-				text: ""
-			};
-		};
-		const inputRef = ref();
-		const measureText = computed(() => measureInfo.value.text);
-		const filterOption = ref(true);
-		const handleInput = (value, e) => {
-			var _eventHandlers$value, _eventHandlers$value$;
-			if (props.readonly) return;
-			const text = getTextBeforeSelection(e.target);
-			const lastMeasure = getLastMeasureIndex(text, props.prefix);
-			if (lastMeasure.location > -1) {
-				const measureText = text.slice(lastMeasure.location + lastMeasure.prefix.length);
-				if (isValidSearch(measureText, props.split)) {
-					_popupVisible.value = true;
-					measureInfo.value = _objectSpread2({
-						measuring: true,
-						text: measureText
-					}, lastMeasure);
-					emit("search", measureText, lastMeasure.prefix);
-				} else if (measureInfo.value.location > -1) resetMeasureInfo();
-			} else if (measureInfo.value.location > -1) resetMeasureInfo();
-			_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 = "";
-			resetMeasureInfo();
-			_popupVisible.value = false;
-			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 _popupVisible = ref(false);
-		const computedPopupVisible = computed(() => _popupVisible.value && measureInfo.value.measuring && validOptionInfos.value.length > 0);
-		const handleResize = () => {
-			mirrorStyle.value = getSizeStyles(styleDeclaration);
-		};
-		const handlePopupVisibleChange = (popupVisible) => {
-			_popupVisible.value = popupVisible;
-		};
-		const handleSelect = (key, _e) => {
-			var _optionInfoMap$get, _eventHandlers$value4, _eventHandlers$value5;
-			const { value } = (_optionInfoMap$get = optionInfoMap.get(key)) !== null && _optionInfoMap$get !== void 0 ? _optionInfoMap$get : {};
-			const measureStart = measureInfo.value.location;
-			const measureEnd = measureInfo.value.location + measureInfo.value.text.length;
-			let head = _value.value.slice(0, measureStart);
-			let tail = _value.value.slice(measureEnd + 1);
-			head += !head || head.endsWith(props.split) || head.endsWith("\n") ? "" : props.split;
-			tail = (!tail || tail.startsWith(props.split) || tail.startsWith("\n") ? "" : props.split) + tail;
-			const match = `${measureInfo.value.prefix}${value}`;
-			const nextValue = `${head}${match}${tail}`;
-			_value.value = nextValue;
-			emit("select", value);
-			emit("update:modelValue", nextValue);
-			emit("change", nextValue);
-			resetMeasureInfo();
-			(_eventHandlers$value4 = eventHandlers.value) === null || _eventHandlers$value4 === void 0 || (_eventHandlers$value5 = _eventHandlers$value4.onChange) === null || _eventHandlers$value5 === void 0 || _eventHandlers$value5.call(_eventHandlers$value4);
-		};
-		const { validOptions, optionInfoMap, validOptionInfos, activeKey, setActiveKey, handleKeyDown } = useSelect({
-			options: data,
-			inputValue: measureText,
-			filterOption,
-			popupVisible: computedPopupVisible,
-			valueKeys: computedValueKeys,
-			dropdownRef,
-			optionRefs,
-			onSelect: handleSelect,
-			onPopupVisibleChange: handlePopupVisibleChange,
-			enterToOpen: false
-		});
-		const mirrorStyle = ref();
-		onMounted(() => {
-			var _inputRef$value;
-			const textareaEl = (_inputRef$value = inputRef.value) === null || _inputRef$value === void 0 ? void 0 : _inputRef$value.textareaRef;
-			if (props.type === "textarea" && textareaEl) {
-				styleDeclaration = window.getComputedStyle(textareaEl);
-				mirrorStyle.value = getSizeStyles(styleDeclaration);
-			}
-		});
-		const getOptionContentFunc = (item) => {
-			if (isFunction(slots.option) && item.value) {
-				const optionInfo = optionInfoMap.get(item.key);
-				const optionSlot = slots.option;
-				return () => optionSlot({ data: optionInfo });
-			}
-			return () => 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 = () => {
-			let _slot;
-			return createVNode(select_dropdown_default, { "ref": dropdownRef }, _isSlot(_slot = validOptions.value.map((info) => renderOption(info))) ? _slot : { default: () => [_slot] });
-		};
-		const mirrorRef = ref();
-		watch(computedPopupVisible, (visible) => {
-			if (props.type === "textarea" && visible) nextTick(() => {
-				var _inputRef$value2;
-				const textareaEl = (_inputRef$value2 = inputRef.value) === null || _inputRef$value2 === void 0 ? void 0 : _inputRef$value2.textareaRef;
-				if (textareaEl && textareaEl.scrollTop > 0) {
-					var _mirrorRef$value;
-					(_mirrorRef$value = mirrorRef.value) === null || _mirrorRef$value === void 0 || _mirrorRef$value.scrollTo(0, textareaEl.scrollTop);
-				}
-			});
-		});
-		const onFocus = (ev) => {
-			emit("focus", ev);
-		};
-		const onBlur = (ev) => {
-			emit("blur", ev);
-		};
-		const render = () => {
-			if (props.type === "textarea") {
-				var _computedValue$value;
-				return createVNode("div", { "class": [prefixCls, {
-					[`${prefixCls}-fit-width`]: props.fitWidth,
-					[`${prefixCls}-max-w-full`]: props.maxWFull
-				}] }, [createVNode(resize_observer_default, { "onResize": handleResize }, { default: () => [createVNode(Textarea, mergeProps(attrs, {
-					"ref": inputRef,
-					"allowClear": mergedAllowClear.value,
-					"modelValue": computedValue.value,
-					"disabled": mergedDisabled.value,
-					"readonly": props.readonly,
-					"fitWidth": props.fitWidth,
-					"maxWFull": props.maxWFull,
-					"onInput": handleInput,
-					"onClear": handleClear,
-					"onFocus": onFocus,
-					"onBlur": onBlur
-				}, { onKeydown: handleKeyDown }), null)] }), measureInfo.value.measuring && validOptionInfos.value.length > 0 && createVNode("div", {
-					"ref": mirrorRef,
-					"style": mirrorStyle.value,
-					"class": `${prefixCls}-measure`
-				}, [(_computedValue$value = computedValue.value) === null || _computedValue$value === void 0 ? void 0 : _computedValue$value.slice(0, measureInfo.value.location), createVNode(Trigger, {
-					"trigger": "focus",
-					"position": "bl",
-					"popupOffset": 4,
-					"preventFocus": true,
-					"popupVisible": computedPopupVisible.value,
-					"clickToClose": false,
-					"floatingOptions": props.floatingOptions,
-					"onPopupVisibleChange": handlePopupVisibleChange
-				}, {
-					default: () => [createVNode("span", null, [createTextVNode("@")])],
-					content: renderDropdown
-				})])]);
-			}
-			return createVNode(Trigger, {
-				"trigger": "focus",
-				"position": "bl",
-				"animationName": "slide-dynamic-origin",
-				"popupOffset": 4,
-				"preventFocus": true,
-				"popupVisible": computedPopupVisible.value,
-				"clickToClose": false,
-				"floatingOptions": props.floatingOptions,
-				"autoFitPopupWidth": true,
-				"autoFitTransformOrigin": true,
-				"disabled": mergedDisabled.value,
-				"onPopupVisibleChange": handlePopupVisibleChange
-			}, {
-				default: () => [createVNode(Input, mergeProps(attrs, {
-					"ref": inputRef,
-					"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": handleInput,
-					"onClear": handleClear,
-					"onFocus": onFocus,
-					"onBlur": onBlur
-				}, { onKeydown: handleKeyDown }), slots)],
-				content: renderDropdown
-			});
-		};
-		return {
-			inputRef,
-			render
-		};
-	},
-	methods: {
-		/**
-		* @zh 使输入框获取焦点
-		* @en Make the input box focus
-		* @public
-		* @version 2.24.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.24.0
-		*/
-		blur() {
-			var _this$inputRef2;
-			(_this$inputRef2 = this.inputRef) === null || _this$inputRef2 === void 0 || _this$inputRef2.blur();
-		}
-	},
-	render() {
-		return this.render();
-	}
-});
+import mention_vue_vue_type_script_setup_true_lang_default from "./mention.vue_vue_type_script_setup_true_lang.js";
+//#region components/mention/mention.vue
+var mention_default = mention_vue_vue_type_script_setup_true_lang_default;
 //#endregion
 export { mention_default as default };