@antdv/pro-field
Version:
原子信息组件，统一 ProForm、ProTable、ProList、Filter 等组件里面的字段定义。
512 lines (511 loc) • 19.3 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
};
import { Fragment as _Fragment, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
import ProConfigContext from "@antdv/pro-provider";
import { boolType, cloneElement, funcType, isValidElement, omit, omitUndefined, oneOfType, pickProProps, vNodeType } from "@antdv/pro-utils";
import { Avatar } from "ant-design-vue";
import dayjs from "dayjs";
import advancedFormat from "dayjs/plugin/advancedFormat";
import isoWeek from "dayjs/plugin/isoWeek";
import localeData from "dayjs/plugin/localeData";
import localizedFormat from "dayjs/plugin/localizedFormat";
import weekday from "dayjs/plugin/weekday";
import weekOfYear from "dayjs/plugin/weekOfYear";
import { computed, defineComponent, unref } from "vue";
import FieldCascader from "./components/Cascader/index.mjs";
import FieldCheckbox from "./components/Checkbox/index.mjs";
import FieldCode from "./components/Code/index.mjs";
import FieldDatePicker from "./components/DatePicker/index.mjs";
import FieldDigit from "./components/Digit/index.mjs";
import FieldDigitRange from "./components/DigitRange/index.mjs";
import FieldFromNow from "./components/FromNow/index.mjs";
import FieldImage from "./components/Image/index.mjs";
import FieldIndexColumn from "./components/IndexColumn/index.mjs";
import FieldMoney from "./components/Money/index.mjs";
import FieldOptions from "./components/Options/index.mjs";
import FieldPassword from "./components/Password/index.mjs";
import FieldPercent from "./components/Percent/index.mjs";
import FieldProgress from "./components/Progress/index.mjs";
import { proFieldFCRenderProps, proRenderFieldProps } from "./components/props.mjs";
import FieldRadio from "./components/Radio/index.mjs";
import FieldRangePicker from "./components/RangePicker/index.mjs";
import FieldRate from "./components/Rate/index.mjs";
import FieldSecond from "./components/Second/index.mjs";
import FieldSegmented from "./components/Segmented/index.mjs";
import FieldSelect, { proFieldParsingValueEnumToArray } from "./components/Select/index.mjs";
import FieldSlider from "./components/Slider/index.mjs";
import FieldStatus from "./components/Status/index.mjs";
import FieldSwitch from "./components/Switch/index.mjs";
import FieldText from "./components/Text/index.mjs";
import FieldTextArea from "./components/TextArea/index.mjs";
import FieldTimePicker, { FieldTimeRangePicker } from "./components/TimePicker/index.mjs";
import FieldTreeSelect from "./components/TreeSelect/index.mjs";
import FieldHOC from "./FieldHOC/index.mjs";
dayjs.extend(localeData);
dayjs.extend(advancedFormat);
dayjs.extend(isoWeek);
dayjs.extend(weekOfYear);
dayjs.extend(weekday);
dayjs.extend(localizedFormat);
function defaultRenderTextByObject(text, valueType, props) {
}
const renderProps = __spreadProps(__spreadValues(__spreadValues({}, omit(proFieldFCRenderProps, ["placeholder"])), proRenderFieldProps), {
request: funcType(),
emptyText: vNodeType(),
open: boolType(),
onOpenChange: funcType()
});
const proFieldProps = __spreadValues({
value: oneOfType([String, Number, Boolean, Object, Array]).def(void 0),
valueType: oneOfType([String, Object])
}, renderProps);
var stdin_default = defineComponent({
name: "ProField",
inheritAttrs: false,
props: proFieldProps,
slots: Object,
emits: {
"update:value": (value) => true
},
setup(props, {
slots,
emit,
attrs
}) {
const {
valueTypeMap
} = ProConfigContext.useContext();
const onChangeCallBack = (...restParams) => {
var _a, _b, _c;
(_b = (_a = props.fieldProps) == null ? void 0 : _a.onChange) == null ? void 0 : _b.call(_a, ...restParams);
(_c = props.onChange) == null ? void 0 : _c.call(props, ...restParams);
};
const fieldProps = computed(() => {
return props.fieldProps && __spreadProps(__spreadValues({}, omitUndefined(props.fieldProps)), {
onChange: onChangeCallBack
});
});
return () => {
var _a, _c, _d, _e, _f;
const _b = __spreadValues(__spreadValues({}, props), attrs), {
text,
value,
valueType = "text",
mode = "read",
onChange,
renderFormItem,
readonly,
fieldProps: restFieldProps,
emptyText = (_a = slots.emptyText) == null ? void 0 : _a.call(slots)
} = _b, rest = __objRest(_b, [
"text",
"value",
"valueType",
"mode",
"onChange",
"renderFormItem",
"readonly",
"fieldProps",
"emptyText"
]);
const fieldMode = readonly ? "read" : mode;
const getFieldProps = pickProProps(omitUndefined(__spreadProps(__spreadValues({}, unref(fieldProps)), {
placeholder: renderFormItem ? void 0 : (_c = unref(fieldProps)) == null ? void 0 : _c.placeholder
})));
const getRenderProps = omitUndefined(__spreadProps(__spreadValues({}, rest), {
emptyText,
"value": value,
"onUpdate:value": (val) => emit("update:value", val),
"mode": readonly ? "read" : mode,
"renderFormItem": renderFormItem ? (curText, _props, dom) => {
const _a2 = _props.value, {
placeholder: _placeholder
} = _a2, restProps = __objRest(_a2, [
"placeholder"
]);
const newDom = renderFormItem(curText, computed(() => restProps), dom);
if (newDom && isValidElement(newDom)) {
return cloneElement(newDom, __spreadValues(__spreadValues({}, unref(fieldProps)), newDom.props || {}));
}
return newDom;
} : void 0,
"placeholder": renderFormItem ? void 0 : (_d = unref(fieldProps)) == null ? void 0 : _d.placeholder,
"fieldProps": getFieldProps
}));
const textValue = text != null ? text : value;
if (emptyText !== false && fieldMode === "read" && valueType !== "option" && valueType !== "switch") {
if (typeof textValue !== "boolean" && typeof textValue !== "number" && !textValue) {
if (props.render) {
return props.render(textValue, computed(() => __spreadValues({
mode
}, getFieldProps)), _createVNode(_Fragment, null, [emptyText]));
}
return _createVNode(_Fragment, null, [emptyText]);
}
}
if (typeof valueType === "object") {
const pickFormItemProps = pickProProps(getFieldProps);
if (valueType.type === "progress") {
return _createVNode(FieldProgress, _mergeProps(getRenderProps, {
"text": text,
"fieldProps": __spreadValues({
status: valueType.status ? valueType.status : void 0
}, pickFormItemProps)
}), null);
}
if (valueType.type === "money") {
return _createVNode(FieldMoney, _mergeProps({
"locale": valueType.locale
}, getRenderProps, {
"text": text,
"fieldProps": pickFormItemProps,
"moneySymbol": valueType.moneySymbol
}), null);
}
if (valueType.type === "percent") {
return _createVNode(FieldPercent, _mergeProps(getRenderProps, {
"text": text,
"showSymbol": valueType.showSymbol,
"precision": valueType.precision,
"fieldProps": pickFormItemProps,
"showColor": valueType.showColor
}), null);
}
if (valueType.type === "image") {
return _createVNode(FieldImage, _mergeProps(getRenderProps, {
"text": text,
"width": valueType.width
}), null);
}
return text;
}
const customValueTypeConfig = valueTypeMap && valueTypeMap[valueType];
if (customValueTypeConfig) {
if (fieldMode === "read") {
return ((_e = customValueTypeConfig.render) == null ? void 0 : _e.call(customValueTypeConfig, text, computed(() => __spreadProps(__spreadValues({
text
}, getRenderProps), {
mode: fieldMode || "read"
})), _createVNode(_Fragment, null, [text]))) || null;
}
if (fieldMode === "update" || fieldMode === "edit") {
return ((_f = customValueTypeConfig.renderFormItem) == null ? void 0 : _f.call(customValueTypeConfig, text, computed(() => __spreadValues({
text
}, getRenderProps)), _createVNode(_Fragment, null, [text]))) || null;
}
}
if (valueType === "avatar" && typeof text === "string" && fieldMode === "read") {
return _createVNode(Avatar, {
"src": text,
"size": 22,
"shape": "circle"
}, null);
}
if (valueType === "select" || valueType === "text" && (props.valueEnum || props.request)) {
return _createVNode(FieldHOC, {
"isLight": props.light
}, {
default: () => [_createVNode(FieldSelect, _mergeProps({
"text": text
}, getRenderProps), null)]
});
}
switch (valueType) {
case "money":
return _createVNode(FieldMoney, _mergeProps(getRenderProps, {
"text": text
}), null);
case "date":
return _createVNode(FieldHOC, {
"isLight": props.light
}, {
default: () => [_createVNode(FieldDatePicker, _mergeProps({
"text": text,
"format": "YYYY-MM-DD"
}, getRenderProps), null)]
});
case "dateWeek":
return _createVNode(FieldHOC, {
"isLight": props.light
}, {
default: () => [_createVNode(FieldDatePicker, _mergeProps({
"text": text,
"format": "YYYY-wo",
"picker": "week"
}, getRenderProps), null)]
});
case "dateWeekRange":
return _createVNode(FieldHOC, {
"isLight": props.light
}, {
default: () => [_createVNode(FieldRangePicker, _mergeProps({
"text": text,
"format": "YYYY-W",
"showTime": true,
"fieldProps": __spreadValues({
picker: "week"
}, getFieldProps)
}, omit(getRenderProps, ["fieldProps"])), null)]
});
case "dateMonthRange":
return _createVNode(FieldHOC, {
"isLight": props.light
}, {
default: () => [_createVNode(FieldRangePicker, _mergeProps({
"text": text,
"format": "YYYY-MM",
"showTime": true,
"fieldProps": __spreadValues({
picker: "month"
}, getFieldProps)
}, omit(getRenderProps, ["fieldProps"])), null)]
});
case "dateQuarterRange":
return _createVNode(FieldHOC, {
"isLight": props.light
}, {
default: () => [_createVNode(FieldRangePicker, _mergeProps({
"text": text,
"format": "YYYY-Q",
"showTime": true,
"fieldProps": __spreadValues({
picker: "quarter"
}, getFieldProps)
}, omit(getRenderProps, ["fieldProps"])), null)]
});
case "dateYearRange":
return _createVNode(FieldHOC, {
"isLight": props.light
}, {
default: () => [_createVNode(FieldRangePicker, _mergeProps({
"text": text,
"format": "YYYY",
"showTime": true,
"fieldProps": __spreadValues({
picker: "year"
}, getFieldProps)
}, omit(getRenderProps, ["fieldProps"])), null)]
});
case "dateMonth":
return _createVNode(FieldHOC, {
"isLight": props.light
}, {
default: () => [_createVNode(FieldDatePicker, _mergeProps({
"text": text,
"format": "YYYY-MM",
"picker": "month"
}, getRenderProps), null)]
});
case "dateQuarter":
return _createVNode(FieldHOC, {
"isLight": props.light
}, {
default: () => [_createVNode(FieldDatePicker, _mergeProps({
"text": text,
"format": "YYYY-[Q]Q",
"picker": "quarter"
}, getRenderProps), null)]
});
case "dateYear":
return _createVNode(FieldHOC, {
"isLight": props.light
}, {
default: () => [_createVNode(FieldDatePicker, _mergeProps({
"text": text,
"format": "YYYY",
"picker": "year"
}, getRenderProps), null)]
});
case "dateRange":
return _createVNode(FieldRangePicker, _mergeProps({
"text": text,
"format": "YYYY-MM-DD"
}, getRenderProps), null);
case "dateTime":
return _createVNode(FieldHOC, {
"isLight": props.light
}, {
default: () => [_createVNode(FieldDatePicker, _mergeProps({
"text": text,
"format": "YYYY-MM-DD HH:mm:ss",
"showTime": true
}, getRenderProps), null)]
});
case "dateTimeRange":
return _createVNode(FieldHOC, {
"isLight": props.light
}, {
default: () => [_createVNode(FieldRangePicker, _mergeProps({
"text": text,
"format": "YYYY-MM-DD HH:mm:ss",
"showTime": true
}, getRenderProps), null)]
});
case "time":
return _createVNode(FieldHOC, {
"isLight": props.light
}, {
default: () => [_createVNode(FieldTimePicker, _mergeProps({
"text": text,
"format": "HH:mm:ss"
}, getRenderProps), null)]
});
case "timeRange":
return _createVNode(FieldHOC, {
"isLight": props.light
}, {
default: () => [_createVNode(FieldTimeRangePicker, _mergeProps({
"text": text != null ? text : [],
"format": "HH:mm:ss"
}, getRenderProps), null)]
});
case "fromNow":
return _createVNode(FieldFromNow, _mergeProps({
"text": text
}, getRenderProps), null);
case "index":
return _createVNode(FieldIndexColumn, {
"index": text + 1
}, null);
case "indexBorder":
return _createVNode(FieldIndexColumn, {
"border": true,
"index": text + 1
}, null);
case "progress":
return _createVNode(FieldProgress, _mergeProps(getRenderProps, {
"text": text
}), null);
case "percent":
return _createVNode(FieldPercent, _mergeProps({
"text": text
}, getRenderProps), null);
case "code":
return _createVNode(FieldCode, _mergeProps({
"text": text
}, getRenderProps), null);
case "jsonCode":
return _createVNode(FieldCode, _mergeProps({
"text": text,
"language": "json"
}, getRenderProps), null);
case "textarea":
return _createVNode(FieldTextArea, _mergeProps({
"text": text
}, getRenderProps), null);
case "digit":
return _createVNode(FieldDigit, _mergeProps({
"text": text
}, getRenderProps), null);
case "digitRange":
return _createVNode(FieldDigitRange, _mergeProps({
"text": text != null ? text : []
}, getRenderProps), null);
case "second":
return _createVNode(FieldSecond, _mergeProps({
"text": text
}, getRenderProps), null);
case "checkbox":
return _createVNode(FieldCheckbox, _mergeProps({
"text": text
}, getRenderProps), null);
case "radio":
return _createVNode(FieldRadio, _mergeProps({
"text": text
}, getRenderProps), null);
case "radioButton":
return _createVNode(FieldRadio, _mergeProps({
"radioType": "button",
"text": text
}, getRenderProps), null);
case "rate":
return _createVNode(FieldRate, _mergeProps({
"text": text
}, getRenderProps), null);
case "slider":
return _createVNode(FieldSlider, _mergeProps({
"text": text
}, getRenderProps), null);
case "switch":
return _createVNode(FieldSwitch, _mergeProps({
"text": text
}, getRenderProps), null);
case "option":
return _createVNode(FieldOptions, _mergeProps({
"text": text
}, getRenderProps), null);
case "password":
return _createVNode(FieldPassword, _mergeProps({
"text": text
}, getRenderProps), null);
case "image":
return _createVNode(FieldImage, _mergeProps({
"text": text
}, getRenderProps), null);
case "cascader":
return _createVNode(FieldCascader, _mergeProps({
"text": text
}, getRenderProps), null);
case "treeSelect":
return _createVNode(FieldTreeSelect, _mergeProps({
"text": text
}, getRenderProps), null);
case "segmented":
return _createVNode(FieldSegmented, _mergeProps({
"text": text
}, getRenderProps), null);
case "avatar":
case "text":
default:
return _createVNode(FieldText, _mergeProps({
"text": text
}, getRenderProps), null);
}
};
}
});
export {
FieldCode,
FieldDatePicker,
FieldIndexColumn,
FieldMoney,
FieldPercent,
FieldProgress,
FieldRangePicker,
FieldSelect,
FieldStatus,
FieldText,
FieldTimePicker,
stdin_default as default,
proFieldParsingValueEnumToArray,
proFieldProps
};