@antdv-next1/pro-field 1.0.0

package/dist/components/Select/index.js

@@ -0,0 +1,357 @@
+import Highlight from "./Highlight/index.js";
+import LightSelect from "./LightSelect/index.js";
+import SearchSelect from "./SearchSelect/index.js";
+import { Fragment, computed, createVNode, defineComponent, mergeProps, ref, shallowRef } from "vue";
+import { useIntl } from "@antdv-next1/pro-provider";
+import { nanoid, objectToMap, proFieldParsingText, useDebounceValue, useEffect, useMemo, useMountMergeState, useRefFunction, useState } from "@antdv-next1/pro-utils";
+import { Spin, useConfig } from "antdv-next";
+import { unit } from "@antdv-next/cssinjs";
+import useSWRV from "swrv";
+//#region src/components/Select/index.tsx
+/**
+* 递归筛选 item
+*/
+function filerByItem(item, keyWords) {
+	if (!keyWords) return true;
+	if (item?.label?.toString().toLowerCase().includes(keyWords.toLowerCase()) || item?.value?.toString().toLowerCase().includes(keyWords.toLowerCase())) return true;
+	if (item.children || item.options) {
+		if ([...item.children || [], item.options || []].find((mapItem) => {
+			return filerByItem(mapItem, keyWords);
+		})) return true;
+	}
+	return false;
+}
+/**
+* 把 value 的枚举转化为数组
+*
+* @param valueEnumParams
+*/
+function proFieldParsingValueEnumToArray(valueEnumParams) {
+	const enumArray = [];
+	const valueEnum = objectToMap(valueEnumParams);
+	valueEnum.forEach((_, key) => {
+		const value = valueEnum.get(key) || valueEnum.get(`${key}`);
+		if (!value) return;
+		if (typeof value === "object" && value?.text) {
+			enumArray.push({
+				text: value.text,
+				value: key,
+				label: value?.text,
+				disabled: value.disabled
+			});
+			return;
+		}
+		enumArray.push({
+			text: value,
+			value: key
+		});
+	});
+	return enumArray;
+}
+function useFieldFetchData(props) {
+	const { request, debounceTime, defaultKeyWords, valueEnum, fieldProps, proFieldKey } = props;
+	const [keyWords, setKeyWords] = useState(defaultKeyWords);
+	/** Key 是用来缓存请求的，如果不在是有问题 */
+	const [cacheKey] = useState(() => {
+		if (proFieldKey) return proFieldKey.toString();
+		if (request) return nanoid();
+		return "no-fetch";
+	});
+	const proFieldKeyRef = ref(cacheKey.value);
+	const getOptionsFormValueEnum = useRefFunction((coverValueEnum) => proFieldParsingValueEnumToArray(objectToMap(coverValueEnum)).map(({ value, text, ...rest }) => ({
+		label: text,
+		value,
+		key: value,
+		...rest
+	})));
+	const [options, setOptions] = useMountMergeState(() => {
+		if (valueEnum) return getOptionsFormValueEnum(valueEnum);
+		return [];
+	}, { value: computed(() => {
+		if (!fieldProps) return void 0;
+		const data = fieldProps?.options || fieldProps?.treeData;
+		if (!data) return void 0;
+		const { children, label, value } = fieldProps?.fieldNames || {};
+		const traverseFieldKey = (_options, type) => {
+			if (!_options?.length) return;
+			const length = _options.length;
+			let i = 0;
+			while (i < length) {
+				const cur = _options[i++];
+				if (cur[children] || cur[label] || cur[value]) {
+					cur[type] = cur[type === "children" ? children : type === "label" ? label : value];
+					traverseFieldKey(cur[children], type);
+				}
+			}
+		};
+		if (children) traverseFieldKey(data, "children");
+		if (label) traverseFieldKey(data, "label");
+		if (value) traverseFieldKey(data, "value");
+		return data;
+	}) });
+	useEffect(() => {
+		if (!valueEnum || fieldProps?.options || fieldProps?.treeData) return;
+		setOptions(getOptionsFormValueEnum(valueEnum));
+	}, [() => valueEnum]);
+	const swrKey = useDebounceValue([
+		proFieldKeyRef.value,
+		props.params,
+		keyWords.value
+	], debounceTime ?? fieldProps?.debounceTime ?? 0, [() => props.params, keyWords]);
+	const { data, mutate: setLocaleData, isValidating } = useSWRV(() => {
+		if (!request) return null;
+		return swrKey.value;
+	}, ([, params, kw]) => request?.({
+		...params,
+		keyWords: kw
+	}, props), {
+		shouldRetryOnError: false,
+		revalidateOnFocus: false
+	});
+	const resOptions = useMemo(() => {
+		const opt = options.value?.map((item) => {
+			if (typeof item === "string") return {
+				label: item,
+				value: item
+			};
+			if (item.children || item.options) {
+				const childrenOptions = [...item.children || [], ...item.options || []].filter((mapItem) => {
+					return filerByItem(mapItem, keyWords.value);
+				});
+				return {
+					...item,
+					children: childrenOptions,
+					options: childrenOptions
+				};
+			}
+			return item;
+		});
+		if (props.fieldProps?.filterOption === true || props.fieldProps?.filterOption === void 0) return opt?.filter((item) => {
+			if (!item) return false;
+			if (!keyWords.value) return true;
+			return filerByItem(item, keyWords.value);
+		});
+		return opt;
+	}, [
+		options,
+		keyWords,
+		() => fieldProps?.filterOption
+	]);
+	return [
+		isValidating,
+		request ? data : resOptions,
+		(fetchKeyWords) => setKeyWords(fetchKeyWords),
+		async () => {
+			setKeyWords(void 0);
+			await setLocaleData(() => [], { shouldRetryOnError: false });
+		}
+	];
+}
+const FieldSelect = /* @__PURE__ */ defineComponent((props, { attrs, expose }) => {
+	const { componentSize } = useConfig();
+	const selectRef = shallowRef(null);
+	const intl = useIntl();
+	const keyWordsRef = shallowRef("");
+	useEffect(() => {
+		if (props.fieldProps?.showSearch && typeof props.fieldProps?.showSearch !== "boolean") keyWordsRef.value = props.fieldProps?.showSearch.searchValue;
+	}, [() => props.fieldProps?.showSearch]);
+	const [loading, options, fetchData, resetData] = useFieldFetchData(props);
+	const optionsValueEnum = useMemo(() => {
+		if (props.mode !== "read") return;
+		const { label: labelPropsName = "label", value: valuePropsName = "value", options: optionsPropsName = "options" } = 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[optionsPropsName]);
+			}
+			return valueEnumObj;
+		};
+		return traverseOptions(options.value);
+	}, [
+		() => props.fieldProps?.fieldNames,
+		() => props.mode,
+		options
+	]);
+	expose({
+		focus: () => selectRef.value?.focus(),
+		blur: () => selectRef.value?.blur(),
+		scrollTo: (arg) => selectRef.value?.scrollTo(arg),
+		fetchData: (keyWord) => fetchData(keyWord)
+	});
+	return () => {
+		const { mode, render, formItemRender, request, params, variant, id, fieldNames, defaultKeyWords, debounceTime, lightLabel, labelTrigger, light, ...rest } = props;
+		if (mode === "read") {
+			const dom = createVNode(Fragment, null, [proFieldParsingText(rest.text, objectToMap(rest.valueEnum || optionsValueEnum.value))]);
+			if (render) return createVNode(Fragment, null, [render(dom, {
+				mode,
+				...rest,
+				light
+			}, dom) ?? null]);
+			return dom;
+		}
+		if (mode === "edit" || mode === "update") {
+			const dom = light ? createVNode(LightSelect, mergeProps({
+				"labelVariant": variant,
+				"id": id,
+				"loading": loading.value,
+				"allowClear": true,
+				"size": componentSize?.value || "middle",
+				"label": rest.label,
+				"placeholder": intl.value.getMessage({
+					id: "tableForm.selectPlaceholder",
+					defaultMessage: "请选择"
+				}),
+				"searchPlaceholder": intl.value.getMessage({
+					id: "tableForm.inputPlaceholder",
+					defaultMessage: "请输入"
+				}),
+				"lightLabel": lightLabel,
+				"labelTrigger": labelTrigger,
+				"fetchData": fetchData
+			}, rest.fieldProps, { "options": options.value }), null) : createVNode(SearchSelect, mergeProps(attrs, {
+				"key": "SearchSelect",
+				"style": rest.fieldProps?.style || {
+					minWidth: unit(100),
+					...attrs.style
+				},
+				"id": id,
+				"loading": loading.value,
+				"ref": selectRef,
+				"allowClear": true,
+				"defaultSearchValue": props.defaultKeyWords,
+				"notFoundContent": loading.value ? createVNode(Spin, { "size": "small" }, null) : rest.fieldProps?.notFoundContent,
+				"fetchData": (keyWord) => {
+					keyWordsRef.value = keyWord ?? "";
+					fetchData(keyWord);
+				},
+				"resetData": resetData,
+				"preserveOriginalLabel": true,
+				"optionItemRender": (item) => {
+					if (typeof item.label === "string" && keyWordsRef.value) return createVNode(Highlight, {
+						"label": item.label,
+						"words": [keyWordsRef.value]
+					}, null);
+					return item.label;
+				},
+				"placeholder": intl.value.getMessage({
+					id: "tableForm.selectPlaceholder",
+					defaultMessage: "请选择"
+				})
+			}, rest.fieldProps, { "options": options.value }), null);
+			if (formItemRender) return createVNode(Fragment, null, [formItemRender(rest.text, {
+				mode,
+				...rest,
+				options: options.value,
+				loading: loading.value
+			}, dom)]);
+			return dom;
+		}
+		return null;
+	};
+}, {
+	props: {
+		text: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		valueEnum: {
+			type: [Map, Object],
+			required: false
+		},
+		debounceTime: {
+			type: Number,
+			required: false
+		},
+		request: {
+			type: Function,
+			required: false
+		},
+		params: { required: false },
+		fieldProps: {
+			type: Object,
+			required: false
+		},
+		variant: {
+			type: String,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		defaultKeyWords: {
+			type: String,
+			required: false
+		},
+		lightLabel: {
+			type: Object,
+			required: false
+		},
+		labelTrigger: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		"onUpdate:text": {
+			type: Function,
+			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
+		},
+		proFieldKey: {
+			type: [String, Number],
+			required: false
+		},
+		render: {
+			type: Function,
+			required: false
+		},
+		formItemRender: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "FieldSelect",
+	inheritAttrs: false
+});
+//#endregion
+export { FieldSelect as default, proFieldParsingValueEnumToArray, useFieldFetchData };

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

@@ -0,0 +1,18 @@
+import { ProFieldFC } from "../../typing.js";
+import * as _$vue from "vue";
+import * as _$_antdv_next1_pro_provider0 from "@antdv-next1/pro-provider";
+import { CustomSlotsType, VueNode } from "@v-c/util/dist/type";
+
+//#region src/components/Slider/index.d.ts
+type FieldSliderProps = ProFieldFC<{
+  text: string;
+}>;
+declare const FieldSlider: _$vue.DefineSetupFnComponent<FieldSliderProps, {}, CustomSlotsType<{
+  default?: () => VueNode;
+}>, _$_antdv_next1_pro_provider0.BaseProFieldFC<any> & _$_antdv_next1_pro_provider0.ProRenderFieldPropsType<any> & {
+  text: string;
+} & {
+  id?: string;
+} & {}, _$vue.PublicProps>;
+//#endregion
+export { FieldSliderProps, FieldSlider as default };

package/dist/components/Slider/index.js

@@ -0,0 +1,99 @@
+import { Fragment, createVNode, defineComponent, mergeProps } from "vue";
+import { Slider } from "antdv-next";
+import { unit } from "@antdv-next/cssinjs";
+//#region src/components/Slider/index.tsx
+const FieldSlider = /* @__PURE__ */ defineComponent((props) => {
+	return () => {
+		const { text, mode, render, formItemRender, fieldProps } = props;
+		if (mode === "read") {
+			const dom = text;
+			if (render) return createVNode(Fragment, null, [render(text, {
+				mode,
+				...fieldProps
+			}, createVNode(Fragment, null, [dom]))]);
+			return createVNode(Fragment, null, [dom]);
+		}
+		if (mode === "edit" || mode === "update") {
+			const dom = createVNode(Slider, mergeProps(fieldProps, { "style": {
+				minWidth: unit(120),
+				...fieldProps?.style
+			} }), null);
+			if (formItemRender) return createVNode(Fragment, null, [formItemRender(text, {
+				mode,
+				...fieldProps
+			}, dom)]);
+			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
+		},
+		id: {
+			type: String,
+			required: false
+		}
+	},
+	name: "FieldSlider",
+	inheritAttrs: false
+});
+//#endregion
+export { FieldSlider as default };

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

@@ -0,0 +1,31 @@
+import * as _$vue from "vue";
+import { CSSProperties, FunctionalComponent } from "vue";
+import { CustomSlotsType, VueNode } from "@v-c/util/dist/type";
+
+//#region src/components/Status/index.d.ts
+interface FieldStatusProps {
+  class?: string;
+  style?: CSSProperties;
+}
+/** 快捷操作，用于快速的展示一个状态 */
+declare const StatusComponents: {
+  Success: FunctionalComponent<FieldStatusProps>;
+  Error: FunctionalComponent<FieldStatusProps>;
+  Processing: FunctionalComponent<FieldStatusProps>;
+  Default: FunctionalComponent<FieldStatusProps>;
+  Warning: FunctionalComponent<FieldStatusProps>;
+  success: FunctionalComponent<FieldStatusProps>;
+  error: FunctionalComponent<FieldStatusProps>;
+  processing: FunctionalComponent<FieldStatusProps>;
+  default: FunctionalComponent<FieldStatusProps>;
+  warning: FunctionalComponent<FieldStatusProps>;
+};
+declare const FieldStatus: _$vue.DefineSetupFnComponent<FieldStatusProps & {
+  color: string;
+}, {}, CustomSlotsType<{
+  default?: () => VueNode;
+}>, FieldStatusProps & {
+  color: string;
+} & {}, _$vue.PublicProps>;
+//#endregion
+export { FieldStatusProps, StatusComponents, FieldStatus as default };

package/dist/components/Status/index.js

@@ -0,0 +1,71 @@
+import { createVNode, defineComponent, mergeProps } from "vue";
+import { Badge } from "antdv-next";
+//#region src/components/Status/index.tsx
+/** 快捷操作，用于快速的展示一个状态 */
+const StatusComponents = {
+	Success: (props, { slots }) => createVNode(Badge, mergeProps(props, {
+		"status": "success",
+		"text": slots.default?.()
+	}), null),
+	Error: (props, { slots }) => createVNode(Badge, mergeProps(props, {
+		"status": "error",
+		"text": slots.default?.()
+	}), null),
+	Default: (props, { slots }) => createVNode(Badge, mergeProps(props, {
+		"status": "default",
+		"text": slots.default?.()
+	}), null),
+	Processing: (props, { slots }) => createVNode(Badge, mergeProps(props, {
+		"status": "processing",
+		"text": slots.default?.()
+	}), null),
+	Warning: (props, { slots }) => createVNode(Badge, mergeProps(props, {
+		"status": "warning",
+		"text": slots.default?.()
+	}), null),
+	success: (props, { slots }) => createVNode(Badge, mergeProps(props, {
+		"status": "success",
+		"text": slots.default?.()
+	}), null),
+	error: (props, { slots }) => createVNode(Badge, mergeProps(props, {
+		"status": "error",
+		"text": slots.default?.()
+	}), null),
+	default: (props, { slots }) => createVNode(Badge, mergeProps(props, {
+		"status": "default",
+		"text": slots.default?.()
+	}), null),
+	processing: (props, { slots }) => createVNode(Badge, mergeProps(props, {
+		"status": "processing",
+		"text": slots.default?.()
+	}), null),
+	warning: (props, { slots }) => createVNode(Badge, mergeProps(props, {
+		"status": "warning",
+		"text": slots.default?.()
+	}), null)
+};
+const FieldStatus = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	return () => createVNode(Badge, {
+		"color": props.color,
+		"text": slots.default?.()
+	}, null);
+}, {
+	props: {
+		class: {
+			type: String,
+			required: false
+		},
+		style: {
+			type: Object,
+			required: false
+		},
+		color: {
+			type: String,
+			required: true
+		}
+	},
+	name: "FieldStatus",
+	inheritAttrs: false
+});
+//#endregion
+export { StatusComponents, FieldStatus as default };

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

@@ -0,0 +1,31 @@
+import { ProFieldFC } from "../../typing.js";
+import * as _$vue from "vue";
+import * as _$_antdv_next1_pro_provider0 from "@antdv-next1/pro-provider";
+import { SwitchProps } from "antdv-next";
+import { CustomSlotsType, VueNode } from "@v-c/util/dist/type";
+import { CheckedValueType } from "antdv-next/dist/switch/index";
+
+//#region src/components/Switch/index.d.ts
+type FieldSwitchProps = ProFieldFC<{
+  text: boolean;
+  variant?: 'outlined' | 'borderless' | 'filled';
+}, SwitchProps & {
+  'onUpdate:checked'?: (checked: CheckedValueType) => void;
+  'onUpdate:value'?: (checked: CheckedValueType) => void;
+}>;
+declare const FieldSwitch: _$vue.DefineSetupFnComponent<FieldSwitchProps, {}, CustomSlotsType<{
+  default?: () => VueNode;
+}>, _$_antdv_next1_pro_provider0.BaseProFieldFC<SwitchProps & {
+  'onUpdate:checked'?: (checked: CheckedValueType) => void;
+  'onUpdate:value'?: (checked: CheckedValueType) => void;
+}> & _$_antdv_next1_pro_provider0.ProRenderFieldPropsType<SwitchProps & {
+  'onUpdate:checked'?: (checked: CheckedValueType) => void;
+  'onUpdate:value'?: (checked: CheckedValueType) => void;
+}> & {
+  text: boolean;
+  variant?: "outlined" | "borderless" | "filled";
+} & {
+  id?: string;
+} & {}, _$vue.PublicProps>;
+//#endregion
+export { FieldSwitchProps, FieldSwitch as default };