@antdv-next1/pro-field 1.0.0

package/dist/components/Select/SearchSelect/index.d.ts

@@ -0,0 +1,78 @@
+import * as _$vue from "vue";
+import { RequestOptionsType, VueNode } from "@antdv-next1/pro-utils";
+import { SelectProps } from "antdv-next";
+import { LabeledValue } from "antdv-next/dist/select/index";
+
+//#region src/components/Select/SearchSelect/index.d.ts
+type KeyLabel = Partial<LabeledValue> & RequestOptionsType;
+/** 用户扩展数据后的值类型 */
+type DataValueType<T> = KeyLabel & T;
+/** 可能单选，可能多选 */
+type DataValuesType<T> = DataValueType<T> | DataValueType<T>[];
+interface SearchSelectProps<T = Record<string, any>> extends Omit<SelectProps, 'options' | 'searchValue'> {
+  /** 防抖动时间 默认10 单位ms */
+  debounceTime?: number;
+  /** 自定义搜索方法, 返回搜索结果的 Promise */
+  request?: (params: {
+    query: string;
+  }) => Promise<DataValueType<T>[]>;
+  /** 自定义选项渲染 */
+  optionItemRender?: (item: DataValueType<T>) => VueNode;
+  /** 指定组件中的值 */
+  value?: KeyLabel | KeyLabel[];
+  /** 指定默认选中的条目 */
+  defaultValue?: KeyLabel | KeyLabel[];
+  options?: RequestOptionsType[];
+  /**
+   * Placeholder 输入提示
+   *
+   * @default 请输入关键字搜索
+   */
+  placeholder?: VueNode;
+  /**
+   * 是否在输入框聚焦时触发搜索
+   *
+   * @default false
+   */
+  searchOnFocus?: boolean;
+  /**
+   * 选择完一个之后是否清空搜索项重新搜索
+   *
+   * @default false
+   */
+  resetAfterSelect?: boolean;
+  /**
+   * 自定义前缀
+   *
+   * @ignore
+   */
+  prefixCls?: string;
+  /** 刷新数据 */
+  fetchData: (keyWord?: string) => void;
+  /** 清空数据 */
+  resetData: () => void;
+  /**
+   * 当搜索关键词发生变化时是否请求远程数据
+   *
+   * @default true
+   */
+  fetchDataOnSearch?: boolean;
+  /** 默认搜索关键词 */
+  defaultSearchValue?: string;
+  /**
+   * 在选择时保留选项的原始标签文本
+   * 当设置为 true 时，选中后回填的内容将使用选项的原始 label，而不是经过 optionItemRender 处理后的内容
+   * @default false
+   */
+  preserveOriginalLabel?: boolean;
+}
+declare const SearchSelect: new <T extends Record<string, any>>(props: SearchSelectProps<T> & {} & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps) => _$vue.CreateComponentPublicInstanceWithMixins<SearchSelectProps<T> & {}, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, _$vue.PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, _$vue.ComponentProvideOptions, {
+  P: {};
+  B: {};
+  D: {};
+  C: {};
+  M: {};
+  Defaults: {};
+}, SearchSelectProps<T> & {}, {}, {}, {}, {}, {}>;
+//#endregion
+export { DataValueType, DataValuesType, KeyLabel, SearchSelectProps, SearchSelect as default };

package/dist/components/Select/SearchSelect/index.js

@@ -0,0 +1,273 @@
+import { computed, createVNode, defineComponent, isVNode, mergeProps, ref } from "vue";
+import { nanoid, useEffect, useState } from "@antdv-next1/pro-utils";
+import { Select } from "antdv-next";
+import { classNames } from "@v-c/util";
+import { useConfig as useConfig$1 } from "antdv-next/dist/config-provider/context";
+//#region src/components/Select/SearchSelect/index.tsx
+/** 用户扩展数据后的值类型 */
+/** 可能单选，可能多选 */
+const SearchSelect = /* @__PURE__ */ defineComponent((props, { attrs, expose }) => {
+	const config = useConfig$1();
+	const prefixCls = computed(() => props.prefixCls || config.value.getPrefixCls("pro"));
+	const baseClassName = computed(() => `${prefixCls.value}-filed-search-select`);
+	const [searchValue, setSearchValue] = useState((typeof props.showSearch !== "boolean" ? props.showSearch?.searchValue : void 0) ?? props.defaultSearchValue);
+	const selectRef = ref(null);
+	useEffect(() => {
+		if (props.autoFocus) selectRef.value?.focus();
+	}, [() => props.autoFocus]);
+	useEffect(() => {
+		if (typeof props.showSearch !== "boolean") setSearchValue(props.showSearch?.searchValue);
+	}, [() => props.showSearch]);
+	const getOriginalLabel = (item, fallbackValue) => {
+		if (item && typeof item.label === "string" && item.label) return item.label;
+		if (item && item.text && typeof item.text === "string") return item.text;
+		if (item && item.label) return String(item.label);
+		if (item && item.text) return String(item.text);
+		if (fallbackValue && fallbackValue.label) {
+			const labelValue = fallbackValue.label;
+			if ((isVNode(labelValue) || labelValue && typeof labelValue === "object" && "props" in labelValue) && labelValue.props && labelValue.props.label) return String(labelValue.props.label);
+			if (typeof labelValue === "string") return labelValue;
+			return String(labelValue);
+		}
+		return "";
+	};
+	const getMergeValue = (value, option) => {
+		if (Array.isArray(value) && Array.isArray(option) && value.length > 0) return value.map((item, index) => {
+			const dataItem = (option?.[index])?.["data-item"] || {};
+			const originalLabel = getOriginalLabel(dataItem, item);
+			return {
+				...dataItem,
+				...item,
+				label: originalLabel || item.label
+			};
+		});
+		return [];
+	};
+	const genOptions = (mapOptions) => mapOptions.map((item, index) => {
+		const { class: itemClassName, optionType, ...resetItem } = item;
+		const label = item[props.fieldNames?.label || "label"] ?? item.text;
+		const value = item[props.fieldNames?.value || "value"];
+		const itemOptions = item[props.fieldNames?.options || "options"] ?? [];
+		if (optionType === "optGroup" || item.options) return {
+			label,
+			...resetItem,
+			data_title: label,
+			title: label,
+			key: value ?? `${label?.toString()}-${index}-${nanoid()}`,
+			children: genOptions(itemOptions)
+		};
+		return {
+			title: label,
+			...resetItem,
+			data_title: label,
+			value: value ?? index,
+			key: value ?? `${label?.toString()}-${index}-${nanoid()}`,
+			"data-item": item,
+			class: `${baseClassName.value}-option ${itemClassName || ""}`.trim(),
+			label: props.optionItemRender?.(item) || label
+		};
+	});
+	expose({
+		focus: () => selectRef.value?.focus(),
+		blur: () => selectRef.value?.blur(),
+		scrollTo: (arg) => selectRef.value?.scrollTo(arg)
+	});
+	return () => {
+		const { request, autoFocus, debounceTime, optionItemRender, mode, onFocus, onChange, searchOnFocus = false, resetAfterSelect = false, fetchDataOnSearch = true, optionLabelProp = "label", disabled, options, fetchData, resetData, prefixCls: customizePrefixCls, onClear, showSearch, fieldNames, defaultSearchValue, preserveOriginalLabel: _preserveOriginalLabel = false, ...restProps } = props;
+		return createVNode(Select, mergeProps({ "ref": selectRef }, attrs, restProps, {
+			"class": classNames(baseClassName.value, attrs.class, { [`${baseClassName.value}-disabled`]: disabled }),
+			"disabled": disabled,
+			"mode": mode,
+			"showSearch": showSearch && typeof showSearch !== "boolean" ? {
+				...showSearch,
+				searchValue: searchValue.value,
+				onSearch: (value) => {
+					if (fetchDataOnSearch) fetchData?.(value);
+					showSearch?.onSearch?.(value);
+					setSearchValue(value);
+				},
+				filterOption: showSearch?.filterOption === false ? false : (inputValue, option) => {
+					const effectiveSearchValue = searchValue.value === "" ? "" : inputValue || searchValue.value;
+					if (!effectiveSearchValue) return true;
+					if (showSearch?.filterOption && typeof showSearch.filterOption === "function") return showSearch.filterOption(effectiveSearchValue, {
+						...option,
+						label: option?.data_title
+					});
+					return !!(option?.data_title?.toString().toLowerCase().includes(effectiveSearchValue.toLowerCase()) || option[typeof showSearch !== "boolean" && showSearch.optionFilterProp || "label"]?.toString().toLowerCase().includes(effectiveSearchValue.toLowerCase()));
+				}
+			} : showSearch,
+			"optionLabelProp": optionLabelProp,
+			"onClear": () => {
+				onClear?.();
+				fetchData?.(void 0);
+				if (showSearch) {
+					if (typeof showSearch !== "boolean") showSearch.onSearch?.("");
+					setSearchValue(void 0);
+				}
+			},
+			"onChange": (value, optionList, ...rest) => {
+				if (showSearch && typeof showSearch !== "boolean" && showSearch?.autoClearSearchValue) {
+					fetchData?.(void 0);
+					showSearch.onSearch?.("");
+					setSearchValue(void 0);
+				}
+				if (!props.labelInValue) {
+					onChange?.(value, optionList, ...rest);
+					return;
+				}
+				if (mode !== "multiple" && !Array.isArray(optionList)) {
+					let foundDataItem = optionList && optionList["data-item"];
+					if (!foundDataItem && value && options) {
+						const optionValue = value[props.fieldNames?.value || "value"] ?? value.value;
+						const findDataItem = (opts) => {
+							for (const opt of opts) {
+								if ((opt[props.fieldNames?.value || "value"] ?? opt.value) === optionValue) return opt;
+								if (opt[props.fieldNames?.options || "options"] || opt.options) {
+									const found = findDataItem(opt[props.fieldNames?.options || "options"] || opt.options || []);
+									if (found) return found;
+								}
+							}
+							return null;
+						};
+						foundDataItem = findDataItem(options);
+					}
+					if (!value || !foundDataItem) {
+						const originalLabel = getOriginalLabel(foundDataItem, value);
+						const changedValue = value ? {
+							...value,
+							label: originalLabel
+						} : value;
+						onChange?.(changedValue, optionList, ...rest);
+					} else {
+						const originalLabel = getOriginalLabel(foundDataItem, value);
+						onChange?.({
+							...value,
+							...foundDataItem,
+							label: originalLabel
+						}, optionList, ...rest);
+					}
+					return;
+				}
+				const mergeValue = getMergeValue(value, optionList);
+				onChange?.(mergeValue, optionList, ...rest);
+				if (resetAfterSelect) resetData?.();
+			},
+			"onFocus": (e) => {
+				if (searchOnFocus) {
+					fetchData?.(void 0);
+					if (showSearch) {
+						if (typeof showSearch !== "boolean") showSearch.onSearch?.("");
+						setSearchValue("");
+					}
+				}
+				onFocus?.(e);
+			},
+			"options": genOptions(options || [])
+		}), null);
+	};
+}, {
+	name: "SearchSelect",
+	inheritAttrs: false,
+	props: [
+		"allowClear",
+		"animation",
+		"autoClearSearchValue",
+		"autoFocus",
+		"bordered",
+		"builtinPlacements",
+		"choiceTransitionName",
+		"classes",
+		"clearIcon",
+		"components",
+		"debounceTime",
+		"defaultActiveFirstOption",
+		"defaultOpen",
+		"defaultSearchValue",
+		"direction",
+		"disabled",
+		"dropdownClassName",
+		"dropdownMatchSelectWidth",
+		"dropdownRender",
+		"dropdownStyle",
+		"fetchData",
+		"fetchDataOnSearch",
+		"fieldNames",
+		"filterOption",
+		"filterSort",
+		"getPopupContainer",
+		"id",
+		"labelInValue",
+		"labelRender",
+		"listHeight",
+		"listItemHeight",
+		"loading",
+		"maxCount",
+		"maxLength",
+		"maxTagCount",
+		"maxTagPlaceholder",
+		"maxTagTextLength",
+		"menuItemSelectedIcon",
+		"mode",
+		"notFoundContent",
+		"onActive",
+		"onBlur",
+		"onChange",
+		"onClear",
+		"onClick",
+		"onDeselect",
+		"onDropdownVisibleChange",
+		"onFocus",
+		"onInputKeydown",
+		"onKeydown",
+		"onKeyup",
+		"onMousedown",
+		"onMouseenter",
+		"onMouseleave",
+		"onOpenChange",
+		"onPopupScroll",
+		"onSearch",
+		"onSelect",
+		"onUpdate:value",
+		"open",
+		"optionFilterProp",
+		"optionItemRender",
+		"optionLabelProp",
+		"optionRender",
+		"options",
+		"placeholder",
+		"placement",
+		"popupAlign",
+		"popupClassName",
+		"popupMatchSelectWidth",
+		"popupRender",
+		"popupStyle",
+		"prefix",
+		"prefixCls",
+		"preserveOriginalLabel",
+		"removeIcon",
+		"request",
+		"resetAfterSelect",
+		"resetData",
+		"rootClass",
+		"searchOnFocus",
+		"showAction",
+		"showArrow",
+		"showScrollBar",
+		"showSearch",
+		"size",
+		"status",
+		"styles",
+		"suffix",
+		"suffixIcon",
+		"tabIndex",
+		"tagRender",
+		"title",
+		"tokenSeparators",
+		"transitionName",
+		"value",
+		"variant",
+		"virtual"
+	]
+});
+//#endregion
+export { SearchSelect as default };

package/dist/components/Select/index.d.ts

@@ -0,0 +1,67 @@
+import { ProFieldLightProps } from "../../typing.js";
+import * as _$vue from "vue";
+import { CSSProperties, Ref } from "vue";
+import * as _$_antdv_next1_pro_provider0 from "@antdv-next1/pro-provider";
+import { Key, ProFieldRequestData, ProFieldValueEnumType, RequestOptionsType, VueNode } from "@antdv-next1/pro-utils";
+import { SelectProps } from "antdv-next";
+import { CustomSlotsType } from "@v-c/util/dist/type";
+
+//#region src/components/Select/index.d.ts
+type SelectOptionType = Partial<RequestOptionsType>[];
+type FieldSelectProps = {
+  text?: VueNode; /** 值的枚举，如果存在枚举，Search 中会生成 select */
+  valueEnum?: ProFieldValueEnumType; /** 防抖动时间 默认10 单位ms */
+  debounceTime?: number; /** 从服务器读取选项 */
+  request?: ProFieldRequestData; /** 重新触发的时机 */
+  params?: any; /** 组件的全局设置 */
+  fieldProps?: SelectProps & {
+    style?: CSSProperties;
+  };
+  variant?: 'outlined' | 'filled' | 'borderless';
+  id?: string; /** 默认搜素条件 */
+  defaultKeyWords?: string;
+} & ProFieldLightProps;
+/**
+ * 把 value 的枚举转化为数组
+ *
+ * @param valueEnumParams
+ */
+declare function proFieldParsingValueEnumToArray(valueEnumParams: ProFieldValueEnumType): SelectOptionType;
+declare function useFieldFetchData(props: Omit<FieldSelectProps, 'fieldProps'> & {
+  proFieldKey?: Key;
+  defaultKeyWords?: string;
+  fieldProps?: any;
+}): [Ref<boolean>, Ref<SelectOptionType | undefined>, (keyWord?: string) => void, () => void];
+declare const FieldSelect: _$vue.DefineSetupFnComponent<{
+  text?: VueNode; /** 值的枚举，如果存在枚举，Search 中会生成 select */
+  valueEnum?: ProFieldValueEnumType; /** 防抖动时间 默认10 单位ms */
+  debounceTime?: number; /** 从服务器读取选项 */
+  request?: ProFieldRequestData; /** 重新触发的时机 */
+  params?: any; /** 组件的全局设置 */
+  fieldProps?: SelectProps & {
+    style?: CSSProperties;
+  };
+  variant?: "outlined" | "filled" | "borderless";
+  id?: string; /** 默认搜素条件 */
+  defaultKeyWords?: string;
+} & ProFieldLightProps & _$_antdv_next1_pro_provider0.BaseProFieldFC<SelectProps> & _$_antdv_next1_pro_provider0.ProRenderFieldPropsType<SelectProps> & Pick<SelectProps, "fieldNames"> & {
+  id?: string;
+}, {}, CustomSlotsType<{
+  default?: () => VueNode;
+}>, {
+  text?: VueNode; /** 值的枚举，如果存在枚举，Search 中会生成 select */
+  valueEnum?: ProFieldValueEnumType; /** 防抖动时间 默认10 单位ms */
+  debounceTime?: number; /** 从服务器读取选项 */
+  request?: ProFieldRequestData; /** 重新触发的时机 */
+  params?: any; /** 组件的全局设置 */
+  fieldProps?: SelectProps & {
+    style?: CSSProperties;
+  };
+  variant?: "outlined" | "filled" | "borderless";
+  id?: string; /** 默认搜素条件 */
+  defaultKeyWords?: string;
+} & ProFieldLightProps & _$_antdv_next1_pro_provider0.BaseProFieldFC<SelectProps> & _$_antdv_next1_pro_provider0.ProRenderFieldPropsType<SelectProps> & Pick<SelectProps, "fieldNames"> & {
+  id?: string;
+} & {}, _$vue.PublicProps>;
+//#endregion
+export { FieldSelectProps, FieldSelect as default, proFieldParsingValueEnumToArray, useFieldFetchData };