fast-element-plus 1.0.21 → 2.0.0

package/dist/components/selectV2/src/selectV2.mjs

@@ -0,0 +1,649 @@
+import { addCssUnit } from "../../../utils/dom/index.mjs";
+import { useEmits } from "../../../utils/vue/emits.mjs";
+import { useExpose } from "../../../utils/vue/expose.mjs";
+import { definePropType, useProps } from "../../../utils/vue/props.mjs";
+import { useRender } from "../../../utils/vue/render.mjs";
+import { makeSlots } from "../../../utils/vue/slots.mjs";
+import { withDefineType } from "../../../utils/vue/with.mjs";
+import isArray from "../../../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/isArray.mjs";
+import isObject from "../../../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/isObject.mjs";
+import isString from "../../../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/isString.mjs";
+import isBoolean from "../../../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/isBoolean.mjs";
+import isEqual from "../../../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/isEqual.mjs";
+import isNumber from "../../../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/isNumber.mjs";
+import isNil from "../../../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/isNil.mjs";
+import isNull from "../../../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/isNull.mjs";
+import { useVModel } from "../../../node_modules/.pnpm/@vueuse_core@14.4.0_vue@3.5.41_typescript@6.0.3_/node_modules/@vueuse/core/dist/index.mjs";
+import { computed, createVNode, defineComponent, mergeProps, onMounted, reactive, ref, watch } from "vue";
+import { ArrowDown, CircleClose } from "@element-plus/icons-vue";
+import { ElSelectV2, tagProps, useAriaProps, useEmptyValuesProps, useGlobalSize, useSizeProp, useTooltipContentProps } from "element-plus";
+//#region src/components/selectV2/src/selectV2.tsx
+/** FaSelectV2 支持的业务选择器 Props 定义。 */
+const SelectV2Props = {
+	/**
+	* @description whether creating new items is allowed. To use this, `filterable` must be true
+	*/
+	allowCreate: Boolean,
+	/**
+	* @description autocomplete of select input
+	*/
+	autocomplete: {
+		type: definePropType(String),
+		default: "none"
+	},
+	/**
+	* @description for non-filterable Select, this prop decides if the option menu pops up when the input is focused
+	*/
+	automaticDropdown: Boolean,
+	/**
+	* @description whether select can be cleared
+	*/
+	clearable: Boolean,
+	/**
+	* @description custom clear icon
+	*/
+	clearIcon: {
+		type: definePropType([
+			String,
+			Object,
+			Function
+		]),
+		default: CircleClose
+	},
+	/**
+	* @description tooltip theme, built-in theme: `dark` / `light`
+	*/
+	effect: {
+		type: definePropType(String),
+		default: "light"
+	},
+	/**
+	* @description whether to collapse tags to a text when multiple selecting
+	*/
+	collapseTags: Boolean,
+	/**
+	* @description whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true
+	*/
+	collapseTagsTooltip: Boolean,
+	/** @description collapse-tags tooltip configuration */
+	tagTooltip: {
+		type: definePropType(Object),
+		default: () => ({})
+	},
+	/**
+	* @description The max tags number to be shown. To use this, `collapse-tags` must be true
+	*/
+	maxCollapseTags: {
+		type: Number,
+		default: 1
+	},
+	/**
+	* @description
+	*/
+	defaultFirstOption: Boolean,
+	/**
+	* @description is disabled
+	*/
+	disabled: Boolean,
+	/**
+	* @description
+	*/
+	estimatedOptionHeight: {
+		type: Number,
+		default: void 0
+	},
+	/**
+	* @description is filterable
+	*/
+	filterable: Boolean,
+	/**
+	* @description
+	*/
+	filterMethod: Function,
+	/**
+	* @description The height of the dropdown panel, 34px for each item
+	*/
+	height: {
+		type: Number,
+		default: 274
+	},
+	/**
+	* @description The height of the dropdown item
+	*/
+	itemHeight: {
+		type: Number,
+		default: 34
+	},
+	/**
+	* @description
+	*/
+	id: String,
+	/**
+	* @description whether Select is loading data from server
+	*/
+	loading: Boolean,
+	/**
+	* @description displayed text while loading data from server, default is 'Loading'
+	*/
+	loadingText: String,
+	/**
+	* @description biding value
+	*/
+	modelValue: { type: definePropType([
+		Array,
+		String,
+		Number,
+		Boolean,
+		Object
+	]) },
+	/**
+	* @description is multiple
+	*/
+	multiple: Boolean,
+	/**
+	* @description maximum number of options user can select when multiple is true. No limit when set to 0
+	*/
+	multipleLimit: {
+		type: Number,
+		default: 0
+	},
+	/**
+	* @description the name attribute of select input
+	*/
+	name: String,
+	/**
+	* @description displayed text when there is no options, you can also use slot empty, the default is 'No Data'
+	*/
+	noDataText: String,
+	/**
+	* @description displayed text when no data matches the filtering query, you can also use slot `empty`, default is 'No matching data'
+	*/
+	noMatchText: String,
+	/**
+	* @description function that gets called when the input value changes. Its parameter is the current input value. To use this, `filterable` must be true
+	*/
+	remoteMethod: Function,
+	/**
+	* @description whether reserve the keyword after select filtered option.
+	*/
+	reserveKeyword: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	* @description data of the options, the key of `value` and `label` can be customize by `props`
+	*/
+	options: { type: definePropType(Array) },
+	/**
+	* @description placeholder, the default is 'Please select'
+	*/
+	placeholder: { type: String },
+	/**
+	* @description whether select dropdown is teleported to the body
+	*/
+	teleported: useTooltipContentProps.teleported,
+	/**
+	* @description when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed
+	*/
+	persistent: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	* @description custom class name for Select's dropdown
+	*/
+	popperClass: {
+		type: String,
+		default: ""
+	},
+	/** @description custom style for Select's dropdown */
+	popperStyle: useTooltipContentProps.popperStyle,
+	/**
+	* @description [popper.js](https://popper.js.org/docs/v2/) parameters
+	*/
+	popperOptions: {
+		type: definePropType(Object),
+		default: () => ({})
+	},
+	/**
+	* @description whether search data from server
+	*/
+	remote: Boolean,
+	/** @description debounce delay during remote search, in milliseconds */
+	debounce: {
+		type: Number,
+		default: 300
+	},
+	/**
+	* @description size of component
+	*/
+	size: useSizeProp,
+	/**
+	* @description configuration options, see the following table
+	*/
+	props: {
+		type: definePropType(Object),
+		default: () => ({
+			label: "label",
+			value: "value",
+			disabled: "disabled",
+			options: "options"
+		})
+	},
+	/**
+	* @description unique identity key name for value, required when value is an object
+	*/
+	valueKey: {
+		type: String,
+		default: "value"
+	},
+	/**
+	* @description Controls whether the scrollbar is always displayed
+	*/
+	scrollbarAlwaysOn: Boolean,
+	/**
+	* @description whether to trigger form validation
+	*/
+	validateEvent: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	* @description offset of the dropdown
+	*/
+	offset: {
+		type: Number,
+		default: 12
+	},
+	/** @description whether to show the suffix icon during remote search */
+	remoteShowSuffix: Boolean,
+	/**
+	* @description Determines whether the arrow is displayed
+	*/
+	showArrow: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	* @description position of dropdown
+	*/
+	placement: {
+		type: definePropType(String),
+		default: "bottom-start"
+	},
+	/**
+	* @description list of possible positions for dropdown
+	*/
+	fallbackPlacements: {
+		type: definePropType(Array),
+		default: [
+			"bottom-start",
+			"top-start",
+			"right",
+			"left"
+		]
+	},
+	/**
+	* @description tag type
+	*/
+	tagType: {
+		...tagProps.type,
+		default: "info"
+	},
+	/**
+	* @description tag effect
+	*/
+	tagEffect: {
+		...tagProps.effect,
+		default: "light"
+	},
+	/**
+	* @description tabindex for input
+	*/
+	tabindex: {
+		type: [String, Number],
+		default: 0
+	},
+	/**
+	* @description which element the select dropdown appends to
+	*/
+	appendTo: String,
+	/** @description whether the dropdown width follows the input width, or a fixed width */
+	fitInputWidth: {
+		type: [Boolean, Number],
+		default: true,
+		validator: (value) => isBoolean(value) || isNumber(value)
+	},
+	/** @description select suffix icon */
+	suffixIcon: {
+		type: definePropType([
+			String,
+			Object,
+			Function
+		]),
+		default: ArrowDown
+	},
+	...useEmptyValuesProps,
+	...useAriaProps(["ariaLabel"])
+};
+/** 底层虚拟化选择器的运行时 Emits 定义。 */
+const selectV2Emits = {
+	"update:modelValue": (_value) => true,
+	change: (_value) => true,
+	"end-reached": (_direction) => true,
+	"remove-tag": (_value) => true,
+	"visible-change": (_visible) => true,
+	focus: (_event) => true,
+	blur: (_event) => true,
+	clear: () => true
+};
+/** FaSelectV2 的运行时 Props 定义。 */
+const faSelectV2Props = {
+	...SelectV2Props,
+	/** @description whether Select is disabled 重载使其支持 ElForm*/
+	disabled: {
+		type: Boolean,
+		default: void 0
+	},
+	/** @description displayed text while loading data from server, default is 'Loading' */
+	loadingText: {
+		type: String,
+		default: "加载中..."
+	},
+	/** @description displayed text when no data matches the filtering query, you can also use slot `empty`, default is 'No matching data' */
+	noMatchText: {
+		type: String,
+		default: "暂无匹配的数据"
+	},
+	/** @description displayed text when there is no options, you can also use slot `empty`, default is 'No data' */
+	noDataText: {
+		type: String,
+		default: "暂无数据"
+	},
+	/** @description whether to collapse tags to a text when multiple selecting */
+	collapseTags: {
+		type: Boolean,
+		default: true
+	},
+	/** @description whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true */
+	collapseTagsTooltip: {
+		type: Boolean,
+		default: true
+	},
+	/** @description v-model绑定值 */
+	modelValue: {
+		type: definePropType([
+			String,
+			Number,
+			Boolean,
+			Object,
+			Array
+		]),
+		default: void 0
+	},
+	/** @description v-model:label绑定值 */
+	label: definePropType([String, Array]),
+	/** @description 宽度 */
+	width: {
+		type: [String, Number],
+		default: "100%"
+	},
+	/** @description 更多细节，只有使用slot的时候有用 */
+	moreDetail: Boolean,
+	/** @description 懒加载远程数据，默认 true。当下拉框第一次显示的时候才会加载远程数据*/
+	lazy: {
+		type: Boolean,
+		default: true
+	},
+	/** @description 默认选中。不能和懒加载一起使用 */
+	defaultSelected: Boolean,
+	/** @description 下拉框数据 */
+	data: {
+		type: definePropType(Array),
+		default: () => []
+	},
+	/** 分页返回 */
+	pageResult: Boolean,
+	/** @description 请求api */
+	requestApi: { type: definePropType(Function) },
+	/** 初始化参数 */
+	initParam: definePropType([
+		String,
+		Number,
+		Object
+	])
+};
+/** FaSelectV2 的运行时 Emits 定义。 */
+const faSelectV2Emits = {
+	...selectV2Emits,
+	/** @description v-model 回调 */
+	"update:modelValue": (value) => isString(value) || isNumber(value) || isBoolean(value) || isObject(value) || isArray(value) || isNull(value),
+	/** @description v-model:label 回调 */
+	"update:label": (value) => isString(value) || isArray(value) || isNull(value),
+	/** @description 数据改变 */
+	dataChangeCallBack: (data) => isArray(data),
+	/** @description 改变 */
+	change: (_data, _value) => true
+};
+var selectV2_default = defineComponent({
+	name: "FaSelectV2",
+	props: faSelectV2Props,
+	emits: faSelectV2Emits,
+	slots: makeSlots(),
+	setup(props, { slots, emit, expose }) {
+		const selectedLabel = useVModel(props, "label", emit, { passive: true });
+		const _globalSize = useGlobalSize();
+		const state = reactive({
+			value: withDefineType(),
+			loading: false,
+			selectorData: withDefineType([]),
+			/** 首次出现 */
+			debut: true,
+			/** 回显 */
+			echo: props.data?.length > 0 ? false : true,
+			/** 下次刷新 */
+			nextRefresh: false
+		});
+		const selectV2Ref = ref();
+		let requestVersion = 0;
+		const loadData = async () => {
+			const currentRequestVersion = ++requestVersion;
+			if (props.requestApi) {
+				state.loading = true;
+				const params = props.initParam ?? {};
+				try {
+					const resData = await props.requestApi(params);
+					if (currentRequestVersion !== requestVersion) return;
+					state.echo = false;
+					if (props.pageResult) state.selectorData = resData.rows ?? [];
+					else state.selectorData = resData;
+					emit("dataChangeCallBack", state.selectorData);
+				} catch (error) {
+					if (currentRequestVersion !== requestVersion) return;
+					state.selectorData = [];
+					throw error;
+				} finally {
+					if (currentRequestVersion === requestVersion) state.loading = false;
+				}
+			} else {
+				if (currentRequestVersion !== requestVersion) return;
+				state.echo = false;
+				state.selectorData = props.data ?? [];
+			}
+		};
+		const handleChange = (value) => {
+			if (props.multiple) {
+				const valueArr = Array.isArray(value) ? value : [];
+				if (valueArr?.length === 0) {
+					state.value = null;
+					selectedLabel.value = null;
+					emit("update:modelValue", null);
+					emit("change", null, null);
+					return;
+				}
+				const dataList = state.selectorData.filter((item) => item.value !== void 0 && valueArr.includes(item.value));
+				state.value = value;
+				selectedLabel.value = dataList.map((item) => item.label ?? "");
+				emit("update:modelValue", value);
+				emit("change", dataList, value);
+			} else {
+				if (isNil(value)) {
+					state.value = null;
+					selectedLabel.value = null;
+					emit("update:modelValue", null);
+					emit("change", null, null);
+					return;
+				}
+				const data = state.selectorData.find((f) => f.value === value);
+				state.value = value;
+				selectedLabel.value = data?.label ?? null;
+				emit("update:modelValue", value);
+				emit("change", data ?? null, value);
+			}
+		};
+		const handleClear = () => {
+			state.value = null;
+			selectedLabel.value = null;
+			emit("update:modelValue", null);
+			emit("clear");
+		};
+		const handleVisibleChange = async (visible) => {
+			if (visible) {
+				if (state.debut) {
+					state.debut = false;
+					!props.defaultSelected && props.lazy && await loadData();
+				} else if (state.nextRefresh) {
+					state.nextRefresh = false;
+					await loadData();
+				}
+			}
+			emit("visible-change", visible);
+		};
+		watch(() => props.modelValue, (newValue) => {
+			if (state.echo && !isNil(newValue)) {
+				const hasLabel = !isNil(props.label);
+				if (props.multiple) {
+					if (!Array.isArray(newValue)) {
+						console.error("[Fast:FaSelectV2]", "当启用 multiple 时，传入的 modelValue 必须是 Array。");
+						return;
+					}
+					if (hasLabel && !isArray(props.label)) {
+						console.error("[Fast:FaSelectV2]", "当启用 multiple 时，传入的 modelValue:label 必须是 Array。");
+						return;
+					}
+					state.selectorData = newValue.slice(0, props.multipleLimit > 0 ? props.multipleLimit : newValue.length).map((item, index) => {
+						const value = item;
+						const label = Array.isArray(props.label) ? props.label[index] : void 0;
+						return {
+							value: value !== null && (typeof value === "string" || typeof value === "number" || typeof value === "boolean" || typeof value === "object") ? value : void 0,
+							label: hasLabel && typeof label === "string" ? label : void 0
+						};
+					});
+				} else {
+					if (Array.isArray(newValue)) {
+						console.error("[Fast:FaSelectV2]", "当禁用 multiple 时，传入的 modelValue 不能是 Array。");
+						return;
+					}
+					if (hasLabel && isArray(props.label)) {
+						console.error("[Fast:FaSelectV2]", "当禁用 multiple 时，传入的 modelValue:label 不能是 Array。");
+						return;
+					}
+					state.selectorData = [{
+						value: newValue,
+						label: typeof props.label === "string" ? props.label : void 0
+					}];
+				}
+			}
+			state.value = newValue;
+		}, { immediate: true });
+		onMounted(async () => {
+			if (props.defaultSelected) {
+				await loadData();
+				const firstItem = state.selectorData[0];
+				if (firstItem?.value !== void 0) handleChange(props.multiple ? [firstItem.value] : firstItem.value);
+			} else if (!props.requestApi && props.data?.length > 0) {
+				state.debut = false;
+				await loadData();
+			} else if (!props.lazy) await loadData();
+			watch(() => props.initParam, (newValue, oldValue) => {
+				if (!isEqual(newValue, oldValue)) {
+					state.nextRefresh = true;
+					if (!isNil(state.value)) handleChange();
+				}
+			});
+			watch(() => props.data, () => {
+				if (!props.requestApi) return loadData();
+			}, { deep: true });
+		});
+		const elSelectV2Props = useProps(props, SelectV2Props, [
+			"modelValue",
+			"popperClass",
+			"loading",
+			"options",
+			"itemHeight"
+		]);
+		const elSelectV2Emits = useEmits(faSelectV2Emits, emit, [
+			"update:modelValue",
+			"change",
+			"clear",
+			"visible-change"
+		]);
+		const elPopperClass = computed(() => {
+			let localClass = `fa-select-v2-dropdown ${props.popperClass}`;
+			if (props.moreDetail) localClass += ` fa-select-v2-dropdown__more-detail fa-select-v2-dropdown__more-detail-${_globalSize.value}`;
+			return localClass;
+		});
+		useRender(() => createVNode(ElSelectV2, mergeProps(elSelectV2Props.value, elSelectV2Emits.value, {
+			"ref": selectV2Ref,
+			"class": "fa-select-v2",
+			"popperClass": elPopperClass.value,
+			"style": { width: addCssUnit(props.width) },
+			"modelValue": state.value,
+			"onUpdate:modelValue": ($event) => state.value = $event,
+			"loading": state.loading,
+			"options": state.selectorData,
+			"itemHeight": props.itemHeight + (_globalSize.value === "small" ? 0 : 8),
+			"onChange": handleChange,
+			"onClear": handleClear,
+			"onVisible-change": handleVisibleChange
+		}), {
+			...slots.default && { default: ({ item, index, disabled }) => slots.default?.({
+				item,
+				index,
+				disabled
+			}) ?? [] },
+			...slots.header && { header: () => slots.header?.() ?? [] },
+			...slots.footer && { footer: () => slots.footer?.() ?? [] },
+			...slots.prefix && { prefix: () => slots.prefix?.() ?? [] },
+			...slots.empty && { empty: () => slots.empty?.() ?? [] },
+			...slots.tag && { tag: () => slots.tag?.() ?? [] },
+			...slots.loading && { loading: () => slots.loading?.() ?? [] },
+			...slots.label && { label: ({ label, value }) => slots.label?.({
+				label,
+				value
+			}) ?? [] }
+		}));
+		return useExpose(expose, {
+			/** @description 使选择器的输入框获取焦点 */
+			focus: computed(() => selectV2Ref.value?.focus),
+			/** @description 使选择器的输入框失去焦点，并隐藏下拉框 */
+			blur: computed(() => selectV2Ref.value?.blur),
+			/** @description 获取当前选中的标签 */
+			selectedLabel: computed(() => selectV2Ref.value?.selectedLabel),
+			/** @description 滚动到指定选项索引。 */
+			scrollTo: computed(() => selectV2Ref.value?.scrollTo),
+			/** @description 加载状态 */
+			loading: computed(() => state.loading),
+			/** @description 刷新 */
+			refresh: loadData,
+			/** @description 设置选择  */
+			setSelection: (value) => handleChange(value),
+			/** @description 清除选择  */
+			clearSelection: () => handleChange(null)
+		});
+	}
+});
+//#endregion
+export { SelectV2Props, selectV2_default as default, faSelectV2Emits, faSelectV2Props, selectV2Emits };
+
+//# sourceMappingURL=selectV2.mjs.map