@antdv-next1/pro-field 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 asuradaSong
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/FieldHOC/index.d.ts

@@ -0,0 +1,16 @@
+import { ProFieldLightProps } from "../typing.js";
+import * as _$vue from "vue";
+import { VNode } from "vue";
+import { CustomSlotsType } from "@v-c/util/dist/type";
+
+//#region src/FieldHOC/index.d.ts
+type FieldHOCProps = ProFieldLightProps & {
+  isLight?: boolean;
+};
+declare const FieldHOC: _$vue.DefineSetupFnComponent<FieldHOCProps, {}, CustomSlotsType<{
+  default?: () => VNode[];
+}>, ProFieldLightProps & {
+  isLight?: boolean;
+} & {}, _$vue.PublicProps>;
+//#endregion
+export { FieldHOCProps, FieldHOC as default };

package/dist/FieldHOC/index.js

@@ -0,0 +1,51 @@
+import { Fragment, cloneVNode, createVNode, defineComponent, isVNode, shallowRef } from "vue";
+import { childrenToArray, isSpecialNode, useState } from "@antdv-next1/pro-utils";
+//#region src/FieldHOC/index.tsx
+const FieldHOC = /* @__PURE__ */ defineComponent((props, { slots, expose }) => {
+	const [labelTrigger, setLabelTrigger] = useState(false);
+	const lightLabel = shallowRef();
+	const isTriggeredByLabel = (e) => {
+		const isLabelMouseDown = lightLabel.value?.labelRef?.value?.contains(e.target);
+		const isClearMouseDown = lightLabel.value?.clearRef?.value?.contains(e.target);
+		return isLabelMouseDown && !isClearMouseDown;
+	};
+	const handleMouseDown = (e) => {
+		if (isTriggeredByLabel(e)) setLabelTrigger(true);
+	};
+	const handleMouseUp = () => setLabelTrigger(false);
+	expose({});
+	return () => {
+		if (props.isLight) return createVNode("div", {
+			"onMousedown": handleMouseDown,
+			"onMouseup": handleMouseUp
+		}, [childrenToArray(slots.default?.(), true).map((item) => {
+			if (isVNode(item) && !isSpecialNode(item)) return cloneVNode(item, {
+				labelTrigger: labelTrigger.value,
+				lightLabel
+			});
+			return item;
+		})]);
+		return createVNode(Fragment, null, [slots.default?.()]);
+	};
+}, {
+	props: {
+		lightLabel: {
+			type: Object,
+			required: false
+		},
+		labelTrigger: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		isLight: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "FieldHOC",
+	inheritAttrs: false
+});
+//#endregion
+export { FieldHOC as default };

package/dist/ProField.d.ts

@@ -0,0 +1,18 @@
+import { RenderProps } from "./typing.js";
+import * as _$vue from "vue";
+import { Plugin } from "vue";
+import { ProFieldTextType, ProFieldValueObjectType, ProFieldValueType } from "@antdv-next1/pro-utils";
+import { CustomSlotsType, VueNode as VueNode$1 } from "@v-c/util/dist/type";
+
+//#region src/ProField.d.ts
+interface ProFieldProps extends RenderProps {
+  valueType?: ProFieldValueType | ProFieldValueObjectType;
+  text?: ProFieldTextType;
+  placeholder?: string | string[];
+}
+declare const _ProField: _$vue.DefineSetupFnComponent<ProFieldProps, {}, CustomSlotsType<{
+  default?: () => VueNode$1;
+}>, ProFieldProps & {}, _$vue.PublicProps>;
+declare const ProField: typeof _ProField & Plugin;
+//#endregion
+export { ProFieldProps, ProField as default };

package/dist/ProField.js

@@ -0,0 +1,417 @@
+import FieldSelect from "./components/Select/index.js";
+import FieldCascader from "./components/Cascader/index.js";
+import FieldCheckbox from "./components/Checkbox/index.js";
+import FieldCode from "./components/Code/index.js";
+import FieldColorPicker from "./components/ColorPicker/index.js";
+import FieldDatePicker from "./components/DatePicker/index.js";
+import FieldDigit from "./components/Digit/index.js";
+import FieldDigitRange from "./components/DigitRange/index.js";
+import FieldFromNow from "./components/FromNow/index.js";
+import FieldImage from "./components/Image/index.js";
+import FieldIndexColumn from "./components/IndexColumn/index.js";
+import FieldMoney from "./components/Money/index.js";
+import FieldOptions from "./components/Options/index.js";
+import FieldPassword from "./components/Password/index.js";
+import FieldPercent from "./components/Percent/index.js";
+import FieldProgress from "./components/Progress/index.js";
+import FieldRadio from "./components/Radio/index.js";
+import FieldTimeRangePicker from "./components/RangePicker/TimePicker.js";
+import FieldDateRangePicker from "./components/RangePicker/DatePicker.js";
+import FieldRate from "./components/Rate/index.js";
+import FieldSecond from "./components/Second/index.js";
+import FieldSegmented from "./components/Segmented/index.js";
+import FieldSlider from "./components/Slider/index.js";
+import FieldSwitch from "./components/Switch/index.js";
+import FieldText from "./components/Text/index.js";
+import FieldTextArea from "./components/TextArea/index.js";
+import FieldTimePicker from "./components/TimePicker/index.js";
+import FieldTreeSelect from "./components/TreeSelect/index.js";
+import FieldHOC from "./FieldHOC/index.js";
+import { useFieldExpose } from "./utils/useFieldExpose.js";
+import { Fragment, cloneVNode, createVNode, defineComponent, isVNode, mergeProps, shallowRef } from "vue";
+import { useProConfig } from "@antdv-next1/pro-provider";
+import { omitUndefined, pickProProps } from "@antdv-next1/pro-utils";
+import { isEmptyElement } from "@v-c/util/dist/props-util/index";
+import { Avatar } from "antdv-next";
+import dayjs from "dayjs";
+import advancedFormat from "dayjs/plugin/advancedFormat.js";
+import isoWeek from "dayjs/plugin/isoWeek.js";
+import localeData from "dayjs/plugin/localeData.js";
+import localizedFormat from "dayjs/plugin/localizedFormat.js";
+import weekday from "dayjs/plugin/weekday.js";
+import weekOfYear from "dayjs/plugin/weekOfYear.js";
+//#region src/ProField.tsx
+dayjs.extend(localeData);
+dayjs.extend(advancedFormat);
+dayjs.extend(isoWeek);
+dayjs.extend(weekOfYear);
+dayjs.extend(weekday);
+dayjs.extend(localizedFormat);
+/**
+* Render valueType object
+*
+* @param text String | number
+* @param valueType ProColumnsValueObjectType
+* @param props
+*/
+function defaultRenderTextByObject(text, valueType, props) {
+	const pickFormItemProps = pickProProps(props.fieldProps);
+	if (valueType.type === "progress") return createVNode(FieldProgress, mergeProps(props, {
+		"text": text,
+		"fieldProps": {
+			...pickFormItemProps,
+			status: valueType.status ? valueType.status : void 0
+		}
+	}), null);
+	if (valueType.type === "money") return createVNode(FieldMoney, mergeProps(props, {
+		"locale": valueType.locale,
+		"fieldProps": pickFormItemProps,
+		"text": text,
+		"moneySymbol": valueType.moneySymbol
+	}), null);
+	if (valueType.type === "percent") return createVNode(FieldPercent, mergeProps(props, {
+		"text": text,
+		"showSymbol": valueType.showSymbol,
+		"precision": valueType.precision,
+		"fieldProps": pickFormItemProps,
+		"showColor": valueType.showColor
+	}), null);
+	if (valueType.type === "image") return createVNode(FieldImage, mergeProps(props, {
+		"text": text,
+		"width": valueType.width
+	}), null);
+	return text;
+}
+/**
+* 根据不同的类型来转化数值
+*
+*/
+function defaultRenderText(dataValue, valueType, props, valueTypeMap) {
+	const { mode = "read", render, emptyText = "-" } = props;
+	if (emptyText !== false && mode === "read" && valueType !== "option" && valueType !== "switch") {
+		if (typeof dataValue !== "boolean" && typeof dataValue !== "number" && !dataValue) {
+			if (render) return createVNode(Fragment, null, [render(dataValue, { mode }, createVNode(Fragment, null, [emptyText]))]);
+			return createVNode(Fragment, null, [emptyText]);
+		}
+	}
+	delete props.emptyText;
+	if (typeof valueType === "object") return createVNode(Fragment, null, [defaultRenderTextByObject(dataValue, valueType, props)]);
+	const customValueTypeConfig = valueTypeMap && valueTypeMap[valueType];
+	if (customValueTypeConfig) {
+		if (mode === "read") return createVNode(Fragment, null, [customValueTypeConfig.render?.(dataValue, {
+			text: dataValue,
+			...props,
+			mode: mode || "read"
+		}, createVNode(Fragment, null, [dataValue]))]);
+		if (mode === "update" || mode === "edit") return createVNode(Fragment, null, [customValueTypeConfig.formItemRender?.(dataValue, {
+			text: dataValue,
+			...props
+		}, createVNode(Fragment, null, [dataValue]))]);
+	}
+	/** 如果是金额的值 */
+	if (valueType === "money") return createVNode(FieldMoney, mergeProps(props, { "text": dataValue }), null);
+	/** 如果是日期的值 */
+	if (valueType === "date") return createVNode(FieldHOC, { "isLight": props.light }, { default: () => [createVNode(FieldDatePicker, mergeProps(props, {
+		"text": dataValue,
+		"format": "YYYY-MM-DD"
+	}), null)] });
+	/** 如果是周的值 */
+	if (valueType === "dateWeek") return createVNode(FieldHOC, { "isLight": props.light }, { default: () => [createVNode(FieldDatePicker, mergeProps(props, {
+		"text": dataValue,
+		"format": "YYYY-wo",
+		"picker": "week"
+	}), null)] });
+	/** 如果是周范围的值 */
+	if (valueType === "dateWeekRange") {
+		const { fieldProps, ...otherProps } = props;
+		return createVNode(FieldHOC, { "isLight": props.light }, { default: () => [createVNode(FieldDateRangePicker, mergeProps(otherProps, {
+			"text": dataValue || [],
+			"format": "YYYY-wo",
+			"showTime": true,
+			"fieldProps": {
+				picker: "week",
+				...fieldProps
+			}
+		}), null)] });
+	}
+	/** 如果是月范围的值 */
+	if (valueType === "dateMonthRange") {
+		const { fieldProps, ...otherProps } = props;
+		return createVNode(FieldHOC, { "isLight": props.light }, { default: () => [createVNode(FieldDateRangePicker, mergeProps(otherProps, {
+			"text": dataValue || [],
+			"format": "YYYY-MM",
+			"showTime": true,
+			"fieldProps": {
+				picker: "month",
+				...fieldProps
+			}
+		}), null)] });
+	}
+	/** 如果是季范围的值 */
+	if (valueType === "dateQuarterRange") {
+		const { fieldProps, ...otherProps } = props;
+		return createVNode(FieldHOC, { "isLight": props.light }, { default: () => [createVNode(FieldDateRangePicker, mergeProps(otherProps, {
+			"text": dataValue || [],
+			"format": "YYYY-[Q]Q",
+			"showTime": true,
+			"fieldProps": {
+				picker: "quarter",
+				...fieldProps
+			}
+		}), null)] });
+	}
+	/** 如果是年范围的值 */
+	if (valueType === "dateYearRange") {
+		const { fieldProps, ...otherProps } = props;
+		return createVNode(FieldHOC, { "isLight": props.light }, { default: () => [createVNode(FieldDateRangePicker, mergeProps(otherProps, {
+			"text": dataValue || [],
+			"format": "YYYY",
+			"showTime": true,
+			"fieldProps": {
+				picker: "year",
+				...fieldProps
+			}
+		}), null)] });
+	}
+	/** 如果是月的值 */
+	if (valueType === "dateMonth") return createVNode(FieldHOC, { "isLight": props.light }, { default: () => [createVNode(FieldDatePicker, mergeProps(props, {
+		"text": dataValue,
+		"format": "YYYY-MM",
+		"picker": "month"
+	}), null)] });
+	/** 如果是季度的值 */
+	if (valueType === "dateQuarter") return createVNode(FieldHOC, { "isLight": props.light }, { default: () => [createVNode(FieldDatePicker, mergeProps(props, {
+		"text": dataValue,
+		"format": "YYYY-[Q]Q",
+		"picker": "quarter"
+	}), null)] });
+	/** 如果是年的值 */
+	if (valueType === "dateYear") return createVNode(FieldHOC, { "isLight": props.light }, { default: () => [createVNode(FieldDatePicker, mergeProps(props, {
+		"text": dataValue,
+		"format": "YYYY",
+		"picker": "year"
+	}), null)] });
+	/** 如果是日期范围的值 */
+	if (valueType === "dateRange") return createVNode(FieldDateRangePicker, mergeProps(props, {
+		"text": dataValue || [],
+		"format": "YYYY-MM-DD"
+	}), null);
+	/** 如果是日期加时间类型的值 */
+	if (valueType === "dateTime") return createVNode(FieldHOC, { "isLight": props.light }, { default: () => [createVNode(FieldDatePicker, mergeProps(props, {
+		"text": dataValue,
+		"format": "YYYY-MM-DD HH:mm:ss",
+		"showTime": true
+	}), null)] });
+	/** 如果是日期加时间类型的值的值 */
+	if (valueType === "dateTimeRange") return createVNode(FieldHOC, { "isLight": props.light }, { default: () => [createVNode(FieldDateRangePicker, mergeProps(props, {
+		"text": dataValue || [],
+		"format": "YYYY-MM-DD HH:mm:ss",
+		"showTime": true
+	}), null)] });
+	/** 如果是时间类型的值 */
+	if (valueType === "time") return createVNode(FieldHOC, { "isLight": props.light }, { default: () => [createVNode(FieldTimePicker, mergeProps(props, {
+		"text": dataValue,
+		"format": "HH:mm:ss"
+	}), null)] });
+	/** 如果是时间类型的值 */
+	if (valueType === "timeRange") return createVNode(FieldHOC, { "isLight": props.light }, { default: () => [createVNode(FieldTimeRangePicker, mergeProps(props, {
+		"text": dataValue || [],
+		"format": "HH:mm:ss"
+	}), null)] });
+	if (valueType === "fromNow") return createVNode(FieldFromNow, mergeProps(props, { "text": dataValue }), null);
+	if (valueType === "index") return createVNode(FieldIndexColumn, { "children": dataValue + 1 }, null);
+	if (valueType === "indexBorder") return createVNode(FieldIndexColumn, {
+		"border": true,
+		"children": dataValue + 1
+	}, null);
+	if (valueType === "progress") return createVNode(FieldProgress, mergeProps(props, { "text": dataValue }), null);
+	if (valueType === "percent") return createVNode(FieldPercent, mergeProps(props, { "text": dataValue }), null);
+	if (valueType === "avatar" && typeof dataValue === "string" && props.mode === "read") return createVNode(Avatar, {
+		"src": dataValue,
+		"size": 22,
+		"shape": "circle"
+	}, null);
+	if (valueType === "code") return createVNode(FieldCode, mergeProps(props, { "text": dataValue }), null);
+	if (valueType === "jsonCode") return createVNode(FieldCode, mergeProps(props, {
+		"text": dataValue,
+		"language": "json"
+	}), null);
+	if (valueType === "textarea") return createVNode(FieldTextArea, mergeProps(props, { "text": dataValue }), null);
+	if (valueType === "digit") return createVNode(FieldDigit, mergeProps(props, { "text": dataValue }), null);
+	if (valueType === "digitRange") return createVNode(FieldDigitRange, mergeProps(props, { "text": dataValue || [] }), null);
+	if (valueType === "second") return createVNode(FieldSecond, mergeProps(props, { "text": dataValue }), null);
+	if (valueType === "select" || valueType === "text" && (props.valueEnum || props.request)) return createVNode(FieldHOC, { "isLight": props.light }, { default: () => [createVNode(FieldSelect, mergeProps(props, { "text": dataValue }), null)] });
+	if (valueType === "checkbox") return createVNode(FieldCheckbox, mergeProps(props, { "text": dataValue }), null);
+	if (valueType === "radio") return createVNode(FieldRadio, mergeProps(props, { "text": dataValue }), null);
+	if (valueType === "radioButton") return createVNode(FieldRadio, mergeProps({ "radioType": "button" }, props, { "text": dataValue }), null);
+	if (valueType === "rate") return createVNode(FieldRate, mergeProps(props, { "text": dataValue }), null);
+	if (valueType === "slider") return createVNode(FieldSlider, mergeProps(props, { "text": dataValue }), null);
+	if (valueType === "switch") return createVNode(FieldSwitch, mergeProps(props, { "text": dataValue }), null);
+	if (valueType === "option") return createVNode(FieldOptions, mergeProps(props, { "text": dataValue }), null);
+	if (valueType === "password") return createVNode(FieldPassword, mergeProps(props, { "text": dataValue }), null);
+	if (valueType === "image") return createVNode(FieldImage, mergeProps(props, { "text": dataValue }), null);
+	if (valueType === "cascader") return createVNode(FieldCascader, mergeProps(props, { "text": dataValue || [] }), null);
+	if (valueType === "treeSelect") return createVNode(FieldTreeSelect, mergeProps(props, { "text": dataValue || [] }), null);
+	if (valueType === "color") return createVNode(FieldColorPicker, mergeProps(props, { "text": dataValue }), null);
+	if (valueType === "segmented") return createVNode(FieldSegmented, mergeProps(props, {
+		"emptyText": void 0,
+		"text": dataValue
+	}), null);
+	return createVNode(FieldText, mergeProps(props, { "text": dataValue }), null);
+}
+const ProField = /* @__PURE__ */ defineComponent((props, { expose }) => {
+	const proProvide = useProConfig();
+	const profieldRef = shallowRef(null);
+	const handleChange = (...restParams) => {
+		props.fieldProps?.onChange?.(...restParams);
+		props.onChange?.(...restParams);
+	};
+	expose(useFieldExpose(profieldRef, props.valueType));
+	return () => {
+		const { text, valueType = "text", mode = "read", onChange, formItemRender, value, "onUpdate:text": onUpdateText, "onUpdate:value": onUpdateValue, readonly, fieldProps: restFieldProps, ...rest } = props;
+		const fieldProps = (value !== void 0 || restFieldProps) && {
+			value,
+			"onUpdate:value": (_value) => {
+				onUpdateValue?.(_value);
+				onUpdateText?.(_value);
+			},
+			...omitUndefined(restFieldProps || {}),
+			onChange: handleChange
+		};
+		return defaultRenderText(mode === "edit" ? fieldProps?.value ?? text ?? "" : text ?? fieldProps?.value ?? "", valueType || "text", omitUndefined({
+			ref: profieldRef,
+			...rest,
+			mode: readonly ? "read" : mode,
+			formItemRender: formItemRender ? (curText, props, dom) => {
+				const { placeholder: _placeholder, ...restProps } = props;
+				const newDom = formItemRender(curText, restProps, dom);
+				if (isVNode(newDom) && !isEmptyElement(newDom)) return cloneVNode(newDom, {
+					...fieldProps,
+					...newDom.props || {}
+				});
+				return newDom;
+			} : void 0,
+			placeholder: formItemRender ? void 0 : rest?.placeholder ?? fieldProps?.placeholder,
+			fieldProps: pickProProps(omitUndefined({
+				...fieldProps,
+				placeholder: formItemRender ? void 0 : rest?.placeholder ?? fieldProps?.placeholder
+			}), Object.keys(proProvide.value.valueTypeMap || {})?.includes(valueType))
+		}), proProvide.value.valueTypeMap || {});
+	};
+}, {
+	props: {
+		valueType: { required: false },
+		text: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		placeholder: {
+			type: [String, Array],
+			required: false
+		},
+		mode: {
+			type: String,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		value: { required: false },
+		"onUpdate:value": {
+			type: Function,
+			required: false
+		},
+		onChange: {
+			type: Function,
+			required: false
+		},
+		"onUpdate:text": {
+			type: Function,
+			required: false
+		},
+		fieldProps: { 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
+		},
+		request: {
+			type: Function,
+			required: false
+		},
+		emptyText: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		open: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onOpenChange: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "ProField",
+	inheritAttrs: false
+});
+ProField.install = (app) => {
+	app.component(ProField.name, ProField);
+	return app;
+};
+//#endregion
+export { ProField as default };

package/dist/ProPureField.d.ts

@@ -0,0 +1,10 @@
+import { ProFieldProps } from "./ProField.js";
+import * as _$vue from "vue";
+import { CustomSlotsType, VueNode } from "@v-c/util/dist/type";
+
+//#region src/ProPureField.d.ts
+declare const ProPureField: _$vue.DefineSetupFnComponent<ProFieldProps, {}, CustomSlotsType<{
+  default?: () => VueNode;
+}>, ProFieldProps & {}, _$vue.PublicProps>;
+//#endregion
+export { ProPureField as default };