@antdv-next1/pro-field 1.0.0

package/dist/components/TreeSelect/index.js

@@ -0,0 +1,762 @@
+import { useFieldFetchData } from "../Select/index.js";
+import { Fragment, computed, createVNode, defineComponent, mergeProps, shallowRef } from "vue";
+import { useIntl } from "@antdv-next1/pro-provider";
+import { FieldLabel, objectToMap, proFieldParsingText, useMemo, useState } from "@antdv-next1/pro-utils";
+import { Spin, TreeSelect } from "antdv-next";
+import { classNames, omit, useMergedState } from "@v-c/util";
+import { useConfig as useConfig$1 } from "antdv-next/dist/config-provider/context";
+import { unit } from "@antdv-next/cssinjs";
+//#region src/components/TreeSelect/index.tsx
+const FieldTreeSelect = /* @__PURE__ */ defineComponent((props, { expose, attrs }) => {
+	const config = useConfig$1();
+	const layoutClassName = computed(() => config.value.getPrefixCls("pro-field-tree-select"));
+	const treeSelectRef = shallowRef(null);
+	const [open, setOpen] = useState(false);
+	const intl = useIntl();
+	const [loading, options, fetchData] = useFieldFetchData({
+		...omit(props, ["variant"]),
+		defaultKeyWords: props.fieldProps?.showSearch !== void 0 ? typeof props.fieldProps?.showSearch !== "boolean" ? props.fieldProps.showSearch.searchValue : void 0 : void 0
+	});
+	const [searchValue, setSearchValue] = useMergedState(void 0, {
+		onChange: (value) => props.fieldProps?.onSearch?.(value),
+		value: computed(() => props.fieldProps?.showSearch !== void 0 ? typeof props.fieldProps?.showSearch !== "boolean" ? props.fieldProps.showSearch.searchValue : void 0 : void 0)
+	});
+	const optionsValueEnum = useMemo(() => {
+		if (props.mode !== "read") return;
+		/**
+		* Support TreeSelect fieldNames
+		* @see https://ant.design/components/tree-select-cn
+		*/
+		const { value: valuePropsName = "value", label: labelPropsName = "label", children: childrenPropsName = "children" } = props.fieldProps?.fieldNames || {};
+		const valueEnumObj = {};
+		const traverseOptions = (_options) => {
+			if (!_options?.length) return valueEnumObj;
+			const length = _options.length;
+			let i = 0;
+			while (i < length) {
+				const cur = _options[i++];
+				valueEnumObj[cur[valuePropsName]] = {
+					text: cur.text || cur[labelPropsName],
+					status: cur.status,
+					color: cur.color,
+					disabled: cur.disabled
+				};
+				traverseOptions(cur[childrenPropsName]);
+			}
+			return valueEnumObj;
+		};
+		return traverseOptions(options.value);
+	}, [
+		() => props.fieldProps?.fieldNames,
+		() => props.mode,
+		options
+	]);
+	const onChange = (value, optionList, extra) => {
+		if (props.fieldProps?.showSearch && typeof props.fieldProps.showSearch !== "boolean" && props.fieldProps.showSearch.autoClearSearchValue) {
+			fetchData(void 0);
+			setSearchValue(void 0);
+		}
+		props.fieldProps?.onChange?.(value, optionList, extra);
+	};
+	expose({ fetchData: (keyWord) => fetchData(keyWord) });
+	return () => {
+		const { mode, text, render, fetchDataOnSearch, request, params, variant, onClear: propsOnClear, showSearch: propsShowSearch, placeholder: propsPlaceholder, onBlur: propsOnBlur, formItemRender, ...rest } = props;
+		if (mode === "read") {
+			const dom = createVNode(Fragment, null, [proFieldParsingText(text, objectToMap(rest.valueEnum || optionsValueEnum.value))]);
+			if (render) return createVNode(Fragment, null, [render(text, {
+				mode,
+				...rest,
+				treeData: options.value
+			}, dom) ?? null]);
+			return dom;
+		}
+		if (mode === "edit") {
+			const showSearch = rest.fieldProps?.showSearch || propsShowSearch;
+			const onClear = rest.fieldProps?.onClear || propsOnClear;
+			const onBlur = rest.fieldProps?.onBlur || propsOnBlur;
+			const valuesLength = Array.isArray(rest.fieldProps?.value) ? rest.fieldProps.value.length : 0;
+			const placeholder = rest.fieldProps?.placeholder || propsPlaceholder || intl.value.getMessage({
+				id: "tableForm.selectPlaceholder",
+				defaultMessage: "请选择"
+			});
+			let dom = createVNode(Spin, { "spinning": loading.value }, { default: () => [createVNode(TreeSelect, mergeProps(attrs, {
+				"open": open.value,
+				"onOpenChange": (isOpen) => {
+					rest.fieldProps?.onOpenChange?.(isOpen);
+					setOpen(isOpen);
+				},
+				"ref": treeSelectRef,
+				"popupMatchSelectWidth": !rest.light,
+				"placeholder": placeholder,
+				"tagRender": rest.light ? (item) => {
+					if (valuesLength < 2) return createVNode(Fragment, null, [item.label]);
+					const itemIndex = rest.fieldProps?.value?.findIndex((v) => v === item.value || v.value === item.value);
+					return createVNode(Fragment, null, [
+						item.label,
+						" ",
+						itemIndex < valuesLength - 1 ? "," : ""
+					]);
+				} : void 0
+			}, omit(rest.fieldProps, [
+				"options",
+				"onBlur",
+				"onChange"
+			]), {
+				"treeData": options.value,
+				"showSearch": showSearch && typeof showSearch !== "boolean" ? {
+					...showSearch,
+					searchValue: searchValue.value,
+					onSearch: (value) => {
+						if (fetchDataOnSearch && request) fetchData(value);
+						setSearchValue(value);
+					}
+				} : showSearch,
+				"style": {
+					minWidth: unit(60),
+					...rest.fieldProps?.style
+				},
+				"allowClear": rest.fieldProps?.allowClear !== false,
+				"onClear": () => {
+					onClear?.();
+					fetchData(void 0);
+					if (showSearch) setSearchValue(void 0);
+				},
+				"onChange": onChange,
+				"onBlur": (event) => {
+					setSearchValue(void 0);
+					fetchData(void 0);
+					onBlur?.(event);
+				},
+				"class": classNames(rest.fieldProps?.class, layoutClassName.value)
+			}), null)] });
+			if (formItemRender) dom = createVNode(Fragment, null, [formItemRender(text, {
+				mode,
+				...rest,
+				options: options.value,
+				loading: loading.value
+			}, dom) ?? null]);
+			if (rest.light) {
+				const notEmpty = !!rest.fieldProps?.value && rest.fieldProps.value?.length !== 0;
+				return createVNode(FieldLabel, {
+					"label": rest.label,
+					"disabled": rest.fieldProps?.disabled,
+					"placeholder": placeholder,
+					"onClick": () => {
+						setOpen(true);
+						rest.fieldProps?.onOpenChange?.(true);
+					},
+					"variant": variant,
+					"value": notEmpty || open.value ? dom : null,
+					"style": notEmpty ? { paddingInlineEnd: 0 } : void 0,
+					"allowClear": false,
+					"downIcon": false
+				}, null);
+			}
+			return dom;
+		}
+		return null;
+	};
+}, {
+	props: {
+		text: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		"onUpdate:text": {
+			type: Function,
+			required: false
+		},
+		fieldProps: {
+			type: Object,
+			required: false
+		},
+		mode: {
+			type: String,
+			required: false
+		},
+		light: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		label: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		valueEnum: {
+			type: [Object, Map],
+			required: false
+		},
+		proFieldKey: {
+			type: [String, Number],
+			required: false
+		},
+		render: {
+			type: Function,
+			required: false
+		},
+		formItemRender: {
+			type: Function,
+			required: false
+		},
+		fetchDataOnSearch: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		suffixIcon: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		size: {
+			type: [String, null],
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		placement: {
+			type: String,
+			required: false
+		},
+		popupClassName: {
+			type: String,
+			required: false
+		},
+		dropdownClassName: {
+			type: String,
+			required: false
+		},
+		dropdownRender: {
+			type: Function,
+			required: false
+		},
+		popupRender: {
+			type: Function,
+			required: false
+		},
+		dropdownStyle: {
+			type: Object,
+			required: false
+		},
+		bordered: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		treeLine: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		status: {
+			type: String,
+			required: false
+		},
+		switcherIcon: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		dropdownMatchSelectWidth: {
+			type: [Boolean, Number],
+			required: false,
+			default: void 0
+		},
+		popupMatchSelectWidth: {
+			type: [Boolean, Number],
+			required: false,
+			default: void 0
+		},
+		showArrow: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		variant: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		value: { required: false },
+		defaultValue: { required: false },
+		showSearch: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		searchValue: {
+			type: String,
+			required: false
+		},
+		inputValue: {
+			type: String,
+			required: false
+		},
+		autoClearSearchValue: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		filterTreeNode: {
+			type: [Boolean, Function],
+			required: false,
+			default: void 0
+		},
+		treeNodeFilterProp: {
+			type: String,
+			required: false
+		},
+		showCheckedStrategy: { required: false },
+		treeNodeLabelProp: {
+			type: String,
+			required: false
+		},
+		fieldNames: {
+			type: Object,
+			required: false
+		},
+		multiple: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		treeCheckable: {
+			type: [
+				Boolean,
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		treeCheckStrictly: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		labelInValue: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		maxCount: {
+			type: Number,
+			required: false
+		},
+		treeData: {
+			type: Array,
+			required: false
+		},
+		treeDataSimpleMode: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		loadData: {
+			type: Function,
+			required: false
+		},
+		treeLoadedKeys: {
+			type: Array,
+			required: false
+		},
+		treeDefaultExpandAll: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		treeExpandedKeys: {
+			type: Array,
+			required: false
+		},
+		treeDefaultExpandedKeys: {
+			type: Array,
+			required: false
+		},
+		treeExpandAction: {
+			type: [Boolean, String],
+			required: false,
+			default: void 0
+		},
+		virtual: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		listHeight: {
+			type: Number,
+			required: false
+		},
+		listItemHeight: {
+			type: Number,
+			required: false
+		},
+		listItemScrollOffset: {
+			type: Number,
+			required: false
+		},
+		treeTitleRender: {
+			type: Function,
+			required: false
+		},
+		treeIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		className: {
+			type: String,
+			required: false
+		},
+		tagRender: {
+			type: Function,
+			required: false
+		},
+		direction: {
+			type: String,
+			required: false
+		},
+		autoFocus: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		placeholder: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		tabIndex: {
+			type: Number,
+			required: false
+		},
+		notFoundContent: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		onClear: {
+			type: Function,
+			required: false
+		},
+		maxLength: {
+			type: Number,
+			required: false
+		},
+		showScrollBar: {
+			type: [Boolean, String],
+			required: false,
+			default: void 0
+		},
+		choiceTransitionName: {
+			type: String,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		open: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		getRawInputElement: {
+			type: Function,
+			required: false
+		},
+		maxTagTextLength: {
+			type: Number,
+			required: false
+		},
+		maxTagCount: {
+			type: [Number, String],
+			required: false
+		},
+		maxTagPlaceholder: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		tokenSeparators: {
+			type: [Array, Function],
+			required: false
+		},
+		allowClear: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		prefix: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		suffix: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		clearIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		removeIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		animation: {
+			type: String,
+			required: false
+		},
+		transitionName: {
+			type: String,
+			required: false
+		},
+		popupStyle: {
+			type: Object,
+			required: false
+		},
+		popupAlign: {
+			type: Object,
+			required: false
+		},
+		builtinPlacements: {
+			type: Object,
+			required: false
+		},
+		getPopupContainer: {
+			type: Function,
+			required: false
+		},
+		showAction: {
+			type: Array,
+			required: false
+		},
+		onBlur: {
+			type: Function,
+			required: false
+		},
+		onFocus: {
+			type: Function,
+			required: false
+		},
+		onKeyUp: {
+			type: Function,
+			required: false
+		},
+		onKeyDown: {
+			type: Function,
+			required: false
+		},
+		onMouseDown: {
+			type: Function,
+			required: false
+		},
+		onInputKeyDown: {
+			type: Function,
+			required: false
+		},
+		onMouseEnter: {
+			type: Function,
+			required: false
+		},
+		onMouseLeave: {
+			type: Function,
+			required: false
+		},
+		onClick: {
+			type: Function,
+			required: false
+		},
+		components: {
+			type: Object,
+			required: false
+		},
+		onOpenChange: {
+			type: Function,
+			required: false
+		},
+		onDropdownVisibleChange: {
+			type: Function,
+			required: false
+		},
+		onSelect: {
+			type: Function,
+			required: false
+		},
+		onTreeExpand: {
+			type: Function,
+			required: false
+		},
+		onTreeLoad: {
+			type: Function,
+			required: false
+		},
+		onChange: {
+			type: Function,
+			required: false
+		},
+		"onUpdate:value": {
+			type: Function,
+			required: false
+		},
+		onDeselect: {
+			type: Function,
+			required: false
+		},
+		onPopupScroll: {
+			type: Function,
+			required: false
+		},
+		onSearch: {
+			type: Function,
+			required: false
+		},
+		debounceTime: {
+			type: Number,
+			required: false
+		},
+		request: {
+			type: Function,
+			required: false
+		},
+		params: { required: false },
+		defaultKeyWords: {
+			type: String,
+			required: false
+		}
+	},
+	name: "FieldTreeSelect",
+	inheritAttrs: false
+});
+//#endregion
+export { FieldTreeSelect as default };