plus-pro-components
Version:
Page level components developed based on Element Plus.
577 lines (572 loc) • 23.8 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var index = require('../../utils/index.js');
var iconsVue = require('@element-plus/icons-vue');
require('../../../hooks/index.js');
var index$1 = require('../../render/index.js');
var elementPlus = require('element-plus');
require('../../../constants/index.js');
var formItem = require('./form-item.js');
var useLocale = require('../../../hooks/useLocale.js');
var useGetOptions = require('../../../hooks/useGetOptions.js');
var form = require('../../../constants/form.js');
var is = require('../../utils/is.js');
const _hoisted_1 = { class: "el-form-item__error" };
const _hoisted_2 = { class: "plus-form-item__label" };
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "PlusFormItem"
},
__name: "index",
props: {
modelValue: { default: "" },
hasLabel: { default: true },
label: { default: "" },
prop: {},
fieldProps: { default: () => ({}) },
valueType: { default: void 0 },
options: { default: () => [] },
formItemProps: { default: () => ({}) },
renderField: { default: void 0 },
renderLabel: { default: void 0 },
tooltip: { default: "" },
fieldSlots: { default: () => ({}) },
fieldChildrenSlot: { default: void 0 },
renderErrorMessage: { default: void 0 },
optionsMap: { default: void 0 },
index: { default: 0 },
clearable: { type: Boolean, default: true }
},
emits: ["update:modelValue", "change"],
setup(__props, { expose: __expose, emit: __emit }) {
const ElFormItem = elementPlus.ElFormItem;
const ElTooltip = elementPlus.ElTooltip;
const ElIcon = elementPlus.ElIcon;
const ElInput = elementPlus.ElInput;
const ElSelect = elementPlus.ElSelect;
const ElOption = elementPlus.ElOption;
const props = __props;
const emit = __emit;
const { t } = useLocale.useLocale();
const { customOptions, customOptionsIsReady } = useGetOptions.useGetOptions(props);
const formItemInstance = vue.ref();
const fieldInstance = vue.ref();
const customFormItemProps = vue.ref({});
const customFieldProps = vue.ref({});
const state = vue.ref();
const customFieldPropsIsReady = vue.ref(false);
const valueIsReady = vue.ref(false);
const labelValue = vue.computed(() => index.getLabel(props.label));
const formFieldRefs = vue.inject(form.TableFormFieldRefInjectionKey, {});
const tableRowInfo = vue.inject(form.TableFormRowInfoInjectionKey, {});
const params = vue.computed(() => ({
...props,
...vue.unref(tableRowInfo),
label: labelValue.value,
fieldProps: customFieldProps.value,
formItemProps: customFormItemProps.value,
options: customOptions.value
}));
const isArrayValue = vue.computed(() => {
var _a, _b, _c, _d, _e, _f;
if (props.valueType === "cascader" && ((_b = (_a = customFieldProps.value) == null ? void 0 : _a.props) == null ? void 0 : _b.emitPath) === false) {
return false;
}
if (form.ValueIsArrayList.includes(props.valueType)) {
return true;
}
if (props.valueType === "select" && ((_c = customFieldProps.value) == null ? void 0 : _c.multiple) === true) {
return true;
}
if (props.valueType === "date-picker" && form.DatePickerValueIsArrayList.includes((_d = customFieldProps.value) == null ? void 0 : _d.type)) {
return true;
}
if (props.valueType === "time-picker" && ((_e = customFieldProps.value) == null ? void 0 : _e.isRange) === true) {
return true;
}
if (props.valueType === "tree-select" && ((_f = customFieldProps.value) == null ? void 0 : _f.multiple) === true) {
return true;
}
return false;
});
const isNumberValue = vue.computed(() => {
if (form.ValueIsNumberList.includes(props.valueType)) {
return true;
}
return false;
});
const setValue = (val) => {
if (isArrayValue.value) {
if (is.isArray(val)) {
const [start, end] = val;
if (is.isDate(start) || is.isDate(end)) {
state.value = [String(start), String(end)];
} else {
state.value = val;
}
} else {
state.value = [];
}
} else if (isNumberValue.value) {
state.value = val === null || val === void 0 || val === "" ? null : typeof val === "string" ? Number(val) : val;
} else if (is.isDate(val)) {
state.value = String(val);
} else {
state.value = val;
}
valueIsReady.value = true;
};
const commonProps = vue.computed(() => {
const { hasOptions, hasSelectEvent, props: componentProps } = formItem.getFieldComponent(props.valueType);
return {
...hasOptions ? {
options: customOptions.value
} : null,
...hasSelectEvent ? {
onSelect: handleSelect
} : null,
...componentProps,
placeholder: (componentProps == null ? void 0 : componentProps.placeholder) ? t(componentProps == null ? void 0 : componentProps.placeholder) + labelValue.value : t("plus.field.pleaseSelect") + labelValue.value,
...props.valueType === "date-picker" ? {
startPlaceholder: (componentProps == null ? void 0 : componentProps.startPlaceholder) ? t(componentProps == null ? void 0 : componentProps.startPlaceholder) : "",
endPlaceholder: (componentProps == null ? void 0 : componentProps.startPlaceholder) ? t(componentProps == null ? void 0 : componentProps.endPlaceholder) : ""
} : null,
...customFieldProps.value
};
});
const getChildrenProps = (item) => {
return {
...props.valueType === "select" ? {
label: item.label,
value: item.value
} : index.versionIsLessThan260 ? {
label: item.value
} : {
label: item.label,
value: item.value
},
...item.fieldItemProps
};
};
const index$2 = vue.computed(() => {
var _a;
return (_a = params.value.index) != null ? _a : props.index;
});
vue.watch(
() => [props.formItemProps, state.value],
() => {
index.getCustomProps(props.formItemProps, state.value, vue.unref(params), vue.unref(index$2), "formItemProps").then((data) => {
customFormItemProps.value = data;
}).catch((err) => {
throw err;
});
},
{
immediate: true,
deep: true,
flush: "post"
}
);
vue.watch(
() => [props.fieldProps, state.value],
() => {
index.getCustomProps(props.fieldProps, state.value, vue.unref(params), vue.unref(index$2), "fieldProps").then((data) => {
customFieldProps.value = data;
customFieldPropsIsReady.value = true;
}).catch((err) => {
throw err;
});
},
{
immediate: true,
deep: true,
flush: "post"
}
);
vue.watch(
vue.computed(() => [props.modelValue, customFieldPropsIsReady.value, customOptionsIsReady.value]),
([val, fieldPropsIsReady, optionsIsReady]) => {
if (fieldPropsIsReady && optionsIsReady) {
setValue(val);
}
},
{
immediate: true,
flush: "post"
}
);
const handleChange = (val) => {
emit("update:modelValue", val);
emit("change", val);
};
const handleSelect = ({ value }) => {
handleChange(value);
};
vue.watch(fieldInstance, () => {
formFieldRefs.value = {
fieldInstance: fieldInstance.value,
valueIsReady
};
});
__expose({
formItemInstance,
fieldInstance
});
return (_ctx, _cache) => {
var _a;
return valueIsReady.value ? (vue.openBlock(), vue.createBlock(vue.unref(ElFormItem), vue.mergeProps({
key: 0,
ref_key: "formItemInstance",
ref: formItemInstance,
label: _ctx.hasLabel ? labelValue.value : "",
prop: _ctx.prop,
class: "plus-form-item"
}, customFormItemProps.value, {
"label-width": _ctx.hasLabel ? (_a = customFormItemProps.value) == null ? void 0 : _a.labelWidth : "0px"
}), vue.createSlots({
default: vue.withCtx(() => [
_ctx.renderField && vue.unref(is.isFunction)(_ctx.renderField) ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
valueIsReady.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.PlusRender), {
key: 0,
render: _ctx.renderField,
params: params.value,
"callback-value": state.value,
"custom-field-props": customFieldProps.value,
"render-type": "form",
"handle-change": handleChange
}, null, 8, ["render", "params", "callback-value", "custom-field-props"])) : vue.createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
)) : _ctx.$slots[vue.unref(index.getFieldSlotName)(_ctx.prop)] ? vue.renderSlot(_ctx.$slots, vue.unref(index.getFieldSlotName)(_ctx.prop), vue.mergeProps({ key: 1 }, params.value, { column: props })) : _ctx.valueType === "select" && customFieldProps.value.multiple === true ? (vue.openBlock(), vue.createBlock(vue.unref(ElSelect), vue.mergeProps({
key: 2,
ref_key: "fieldInstance",
ref: fieldInstance,
modelValue: state.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.value = $event),
placeholder: vue.unref(t)("plus.field.pleaseSelect") + labelValue.value,
class: "plus-form-item-field",
clearable: _ctx.clearable
}, customFieldProps.value, { "onUpdate:modelValue": handleChange }), vue.createSlots({
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(vue.unref(customOptions), (item) => {
return vue.openBlock(), vue.createBlock(vue.unref(ElOption), vue.mergeProps({
key: item.label,
label: item.label,
value: item.value
}, item.fieldItemProps), {
default: vue.withCtx(() => [
vue.unref(is.isFunction)(item.fieldSlot) ? (vue.openBlock(), vue.createBlock(
vue.resolveDynamicComponent(item.fieldSlot),
vue.normalizeProps(vue.mergeProps({ key: 0 }, item)),
null,
16
/* FULL_PROPS */
)) : vue.unref(is.isFunction)(_ctx.fieldChildrenSlot) ? (vue.openBlock(), vue.createBlock(
vue.resolveDynamicComponent(_ctx.fieldChildrenSlot),
vue.normalizeProps(vue.mergeProps({ key: 1 }, item)),
null,
16
/* FULL_PROPS */
)) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 2 },
[
vue.createTextVNode(
vue.toDisplayString(item.label),
1
/* TEXT */
)
],
64
/* STABLE_FRAGMENT */
))
]),
_: 2
/* DYNAMIC */
}, 1040, ["label", "value"]);
}),
128
/* KEYED_FRAGMENT */
))
]),
_: 2
/* DYNAMIC */
}, [
vue.renderList(_ctx.fieldSlots, (fieldSlot, key) => {
return {
name: key,
fn: vue.withCtx((data) => [
(vue.openBlock(), vue.createBlock(
vue.resolveDynamicComponent(fieldSlot),
vue.normalizeProps(vue.guardReactiveProps(data)),
null,
16
/* FULL_PROPS */
))
])
};
})
]), 1040, ["modelValue", "placeholder", "clearable"])) : vue.unref(formItem.hasFieldComponent)(_ctx.valueType) ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 3 },
[
vue.createCommentVNode(" \u7EDF\u4E00\u5904\u7406 "),
vue.createCommentVNode(" has-children "),
vue.unref(formItem.getFieldComponent)(_ctx.valueType).children ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(formItem.getFieldComponent)(_ctx.valueType).component), vue.mergeProps({
key: 0,
ref_key: "fieldInstance",
ref: fieldInstance,
modelValue: state.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => state.value = $event),
class: "plus-form-item-field",
clearable: _ctx.clearable
}, commonProps.value, { "onUpdate:modelValue": handleChange }), vue.createSlots({
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(vue.unref(customOptions), (item) => {
return vue.openBlock(), vue.createBlock(
vue.resolveDynamicComponent(vue.unref(formItem.getFieldComponent)(_ctx.valueType).children),
vue.mergeProps({
key: item.label
}, getChildrenProps(item)),
{
default: vue.withCtx(() => [
vue.unref(is.isFunction)(item.fieldSlot) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.fieldSlot), vue.mergeProps({
key: 0,
"model-value": state.value,
column: params.value
}, item), null, 16, ["model-value", "column"])) : vue.unref(is.isFunction)(_ctx.fieldChildrenSlot) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.fieldChildrenSlot), vue.mergeProps({
key: 1,
"model-value": state.value,
column: params.value
}, item), null, 16, ["model-value", "column"])) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 2 },
[
vue.createTextVNode(
vue.toDisplayString(item.label),
1
/* TEXT */
)
],
64
/* STABLE_FRAGMENT */
))
]),
_: 2
/* DYNAMIC */
},
1040
/* FULL_PROPS, DYNAMIC_SLOTS */
);
}),
128
/* KEYED_FRAGMENT */
))
]),
_: 2
/* DYNAMIC */
}, [
vue.renderList(_ctx.fieldSlots, (fieldSlot, key) => {
return {
name: key,
fn: vue.withCtx((data) => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(fieldSlot), vue.mergeProps({
value: state.value,
column: params.value
}, data), null, 16, ["value", "column"]))
])
};
})
]), 1040, ["modelValue", "clearable"])) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createCommentVNode(" no-children "),
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(formItem.getFieldComponent)(_ctx.valueType).component), vue.mergeProps({
ref_key: "fieldInstance",
ref: fieldInstance,
modelValue: state.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => state.value = $event),
class: "plus-form-item-field",
clearable: _ctx.clearable,
"field-children-slot": _ctx.fieldChildrenSlot
}, commonProps.value, { "onUpdate:modelValue": handleChange }), vue.createSlots({
_: 2
/* DYNAMIC */
}, [
vue.renderList(_ctx.fieldSlots, (fieldSlot, key) => {
return {
name: key,
fn: vue.withCtx((data) => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(fieldSlot), vue.mergeProps({
"model-value": state.value,
column: params.value
}, data), null, 16, ["model-value", "column"]))
])
};
})
]), 1040, ["modelValue", "clearable", "field-children-slot"]))
],
2112
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
))
],
64
/* STABLE_FRAGMENT */
)) : _ctx.valueType === "text" ? (vue.openBlock(), vue.createBlock(
vue.unref(elementPlus.ElText),
vue.mergeProps({
key: 4,
ref_key: "fieldInstance",
ref: fieldInstance,
class: "plus-form-item-field"
}, customFieldProps.value),
{
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(state.value),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
},
16
/* FULL_PROPS */
)) : _ctx.valueType === "divider" ? (vue.openBlock(), vue.createBlock(
vue.unref(elementPlus.ElDivider),
vue.mergeProps({
key: 5,
ref_key: "fieldInstance",
ref: fieldInstance,
class: "plus-form-item-field"
}, customFieldProps.value),
{
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(state.value),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
},
16
/* FULL_PROPS */
)) : (vue.openBlock(), vue.createBlock(vue.unref(ElInput), vue.mergeProps({
key: 6,
ref_key: "fieldInstance",
ref: fieldInstance,
modelValue: state.value,
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => state.value = $event),
class: "plus-form-item-field",
placeholder: vue.unref(t)("plus.field.pleaseEnter") + labelValue.value,
autocomplete: "off",
clearable: _ctx.clearable
}, customFieldProps.value, { "onUpdate:modelValue": handleChange }), vue.createSlots({
_: 2
/* DYNAMIC */
}, [
vue.renderList(_ctx.fieldSlots, (fieldSlot, key) => {
return {
name: key,
fn: vue.withCtx((data) => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(fieldSlot), vue.mergeProps({
"model-value": state.value,
column: params.value
}, data), null, 16, ["model-value", "column"]))
])
};
})
]), 1040, ["modelValue", "placeholder", "clearable"]))
]),
_: 2
/* DYNAMIC */
}, [
vue.unref(is.isFunction)(_ctx.renderErrorMessage) ? {
name: "error",
fn: vue.withCtx(({ error }) => [
vue.createElementVNode("div", _hoisted_1, [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.renderErrorMessage), vue.mergeProps(props, {
value: state.value,
error,
label: labelValue.value
}), null, 16, ["value", "error", "label"]))
])
]),
key: "0"
} : void 0,
_ctx.hasLabel ? {
name: "label",
fn: vue.withCtx(({ label: currentLabel }) => [
vue.createElementVNode("span", _hoisted_2, [
_ctx.renderLabel && vue.unref(is.isFunction)(_ctx.renderLabel) ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
valueIsReady.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.PlusRender), {
key: 0,
render: _ctx.renderLabel,
params: params.value,
"callback-value": currentLabel,
"custom-field-props": customFieldProps.value
}, null, 8, ["render", "params", "callback-value", "custom-field-props"])) : vue.createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
)) : vue.renderSlot(_ctx.$slots, vue.unref(index.getLabelSlotName)(_ctx.prop), vue.normalizeProps(vue.mergeProps({ key: 1 }, params.value)), () => [
vue.createTextVNode(
vue.toDisplayString(currentLabel),
1
/* TEXT */
)
]),
_ctx.tooltip ? (vue.openBlock(), vue.createBlock(
vue.unref(ElTooltip),
vue.mergeProps({
key: 2,
placement: "top"
}, vue.unref(index.getTooltip)(_ctx.tooltip)),
{
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "tooltip-icon", {}, () => [
vue.createVNode(vue.unref(ElIcon), {
class: "plus-table-column__label__icon",
size: 16
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(iconsVue.QuestionFilled))
]),
_: 1
/* STABLE */
})
])
]),
_: 3
/* FORWARDED */
},
16
/* FULL_PROPS */
)) : vue.createCommentVNode("v-if", true)
])
]),
key: "1"
} : void 0
]), 1040, ["label", "prop", "label-width"])) : vue.createCommentVNode("v-if", true);
};
}
});
exports.default = _sfc_main;