plus-pro-components
Version:
Page level components developed based on Element Plus.
220 lines (215 loc) • 9.26 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var elementPlus = require('element-plus');
var index$1 = require('../../display-item/index.js');
var index = require('../../utils/index.js');
var is = require('../../utils/is.js');
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "PlusDescriptions"
},
__name: "index",
props: {
data: { default: () => ({}) },
columns: { default: () => [] },
column: { default: 3 },
title: { default: "" },
border: { type: Boolean, default: true },
editable: { type: Boolean, default: false },
formProps: { default: void 0 },
descriptionsItemProps: { default: void 0 }
},
emits: ["formChange"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const plusDisplayItemInstance = vue.ref();
const elBorder = vue.computed(() => props.editable ? true : props.border);
const formRefs = vue.shallowRef([]);
const subColumns = vue.computed(
() => props.columns.filter((item) => vue.unref(item.hideInDescriptions) !== true)
);
const getDisplayValue = (prop) => index.getValue(props.data, prop);
const setFormRef = () => {
var _a, _b;
if (!((_a = plusDisplayItemInstance.value) == null ? void 0 : _a.length)) return;
const list = ((_b = plusDisplayItemInstance.value) == null ? void 0 : _b.map((item) => ({
...item,
...item == null ? void 0 : item.getDisplayItemInstance()
}))) || [];
formRefs.value = list;
};
vue.watch(
plusDisplayItemInstance,
() => {
setFormRef();
},
{
deep: true,
flush: "post"
}
);
const getIsRequired = (item, index) => {
var _a;
const itemFormProps = is.isFunction(item.formProps) ? item.formProps(props.data[item.prop], { row: props.data, index }) : vue.unref(item.formProps);
const rules = Reflect.get((itemFormProps == null ? void 0 : itemFormProps.rules) || ((_a = props.formProps) == null ? void 0 : _a.rules) || {}, item.prop) || {};
const isRequired = Object.values(rules).some((i) => i.required);
return isRequired;
};
const handleChange = (data, index, item) => {
const formChangeCallBackParams = { ...data, index, column: { ...item } };
emit("formChange", formChangeCallBackParams);
};
const validate = async () => {
var _a;
try {
await Promise.all(
(_a = formRefs.value) == null ? void 0 : _a.map((item) => {
var _a2;
return (_a2 = item.formInstance.value) == null ? void 0 : _a2.validate();
})
);
} catch (errors) {
return Promise.reject(errors);
}
};
const clearValidate = () => {
var _a;
(_a = formRefs.value) == null ? void 0 : _a.forEach((item) => {
var _a2;
(_a2 = item.formInstance.value) == null ? void 0 : _a2.clearValidate();
});
};
__expose({
formRefs,
validate,
clearValidate
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElDescriptions), vue.mergeProps({
title: _ctx.title,
column: _ctx.column,
class: ["plus-description", { "no-border": !_ctx.border }],
border: elBorder.value
}, _ctx.$attrs), {
title: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "title")
]),
extra: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "extra")
]),
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default", {}, () => [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(subColumns.value, (item, index$2) => {
var _a, _b;
return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElDescriptionsItem), vue.mergeProps({
key: item.prop,
label: vue.unref(index.getLabel)(item.label),
"class-name": (((_a = item.descriptionsItemProps) == null ? void 0 : _a.className) || "") + " plus-description__name plus-description__content",
"label-class-name": (((_b = item.descriptionsItemProps) == null ? void 0 : _b.labelClassName) || "") + " plus-description__label" + (getIsRequired(item, index$2) ? " is-required" : "")
}, item.descriptionsItemProps || _ctx.descriptionsItemProps), {
label: vue.withCtx(() => [
item.renderDescriptionsLabel && vue.unref(is.isFunction)(item.renderDescriptionsLabel) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.renderDescriptionsLabel), {
key: 0,
label: vue.unref(index.getLabel)(item.label),
column: item,
row: _ctx.data
}, null, 8, ["label", "column", "row"])) : _ctx.$slots[vue.unref(index.getDescLabelSlotName)(item.prop)] ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createCommentVNode(" plus-desc-label-* "),
vue.renderSlot(_ctx.$slots, vue.unref(index.getDescLabelSlotName)(item.prop), {
column: item,
row: _ctx.data,
label: vue.unref(index.getLabel)(item.label)
})
],
64
/* STABLE_FRAGMENT */
)) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 2 },
[
vue.createCommentVNode(" normal "),
vue.createTextVNode(
vue.toDisplayString(vue.unref(index.getLabel)(item.label)),
1
/* TEXT */
)
],
64
/* STABLE_FRAGMENT */
))
]),
default: vue.withCtx(() => [
_ctx.editable ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.PlusDisplayItem), {
key: 0,
ref_for: true,
ref_key: "plusDisplayItemInstance",
ref: plusDisplayItemInstance,
column: item,
row: _ctx.data,
editable: "",
"form-props": _ctx.formProps,
onChange: (data) => handleChange(data, index$2, item)
}, null, 8, ["column", "row", "form-props", "onChange"])) : item.renderDescriptionsItem && vue.unref(is.isFunction)(item.renderDescriptionsItem) ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createCommentVNode(" renderDescriptionsItem "),
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.renderDescriptionsItem), {
value: getDisplayValue(item.prop),
column: item,
row: _ctx.data
}, null, 8, ["value", "column", "row"]))
],
2112
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
)) : _ctx.$slots[vue.unref(index.getDescSlotName)(item.prop)] ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 2 },
[
vue.createCommentVNode(" plus-desc-* "),
vue.renderSlot(_ctx.$slots, vue.unref(index.getDescSlotName)(item.prop), {
column: item,
row: _ctx.data,
value: getDisplayValue(item.prop)
})
],
64
/* STABLE_FRAGMENT */
)) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 3 },
[
vue.createCommentVNode(" normal "),
vue.createVNode(vue.unref(index$1.PlusDisplayItem), {
column: item,
row: _ctx.data
}, null, 8, ["column", "row"])
],
64
/* STABLE_FRAGMENT */
))
]),
_: 2
/* DYNAMIC */
}, 1040, ["label", "class-name", "label-class-name"]);
}),
128
/* KEYED_FRAGMENT */
))
])
]),
_: 3
/* FORWARDED */
}, 16, ["title", "column", "class", "border"]);
};
}
});
exports.default = _sfc_main;