plus-pro-components
Version:
Page level components developed based on Element Plus.
216 lines (213 loc) • 9.13 kB
JavaScript
import { defineComponent, ref, computed, shallowRef, unref, watch, openBlock, createBlock, mergeProps, withCtx, renderSlot, createElementBlock, Fragment, renderList, resolveDynamicComponent, createCommentVNode, createTextVNode, toDisplayString, createVNode } from 'vue';
import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
import { PlusDisplayItem } from '../../display-item/index.mjs';
import { getValue, getLabel, getDescLabelSlotName, getDescSlotName } from '../../utils/index.mjs';
import { isFunction } from '../../utils/is.mjs';
var _sfc_main = /* @__PURE__ */ 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 = ref();
const elBorder = computed(() => props.editable ? true : props.border);
const formRefs = shallowRef([]);
const subColumns = computed(
() => props.columns.filter((item) => unref(item.hideInDescriptions) !== true)
);
const getDisplayValue = (prop) => 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;
};
watch(
plusDisplayItemInstance,
() => {
setFormRef();
},
{
deep: true,
flush: "post"
}
);
const getIsRequired = (item, index) => {
var _a;
const itemFormProps = isFunction(item.formProps) ? item.formProps(props.data[item.prop], { row: props.data, index }) : 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 openBlock(), createBlock(unref(ElDescriptions), mergeProps({
title: _ctx.title,
column: _ctx.column,
class: ["plus-description", { "no-border": !_ctx.border }],
border: elBorder.value
}, _ctx.$attrs), {
title: withCtx(() => [
renderSlot(_ctx.$slots, "title")
]),
extra: withCtx(() => [
renderSlot(_ctx.$slots, "extra")
]),
default: withCtx(() => [
renderSlot(_ctx.$slots, "default", {}, () => [
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(subColumns.value, (item, index) => {
var _a, _b;
return openBlock(), createBlock(unref(ElDescriptionsItem), mergeProps({
key: item.prop,
label: unref(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) ? " is-required" : "")
}, item.descriptionsItemProps || _ctx.descriptionsItemProps), {
label: withCtx(() => [
item.renderDescriptionsLabel && unref(isFunction)(item.renderDescriptionsLabel) ? (openBlock(), createBlock(resolveDynamicComponent(item.renderDescriptionsLabel), {
key: 0,
label: unref(getLabel)(item.label),
column: item,
row: _ctx.data
}, null, 8, ["label", "column", "row"])) : _ctx.$slots[unref(getDescLabelSlotName)(item.prop)] ? (openBlock(), createElementBlock(
Fragment,
{ key: 1 },
[
createCommentVNode(" plus-desc-label-* "),
renderSlot(_ctx.$slots, unref(getDescLabelSlotName)(item.prop), {
column: item,
row: _ctx.data,
label: unref(getLabel)(item.label)
})
],
64
/* STABLE_FRAGMENT */
)) : (openBlock(), createElementBlock(
Fragment,
{ key: 2 },
[
createCommentVNode(" normal "),
createTextVNode(
toDisplayString(unref(getLabel)(item.label)),
1
/* TEXT */
)
],
64
/* STABLE_FRAGMENT */
))
]),
default: withCtx(() => [
_ctx.editable ? (openBlock(), createBlock(unref(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, item)
}, null, 8, ["column", "row", "form-props", "onChange"])) : item.renderDescriptionsItem && unref(isFunction)(item.renderDescriptionsItem) ? (openBlock(), createElementBlock(
Fragment,
{ key: 1 },
[
createCommentVNode(" renderDescriptionsItem "),
(openBlock(), createBlock(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[unref(getDescSlotName)(item.prop)] ? (openBlock(), createElementBlock(
Fragment,
{ key: 2 },
[
createCommentVNode(" plus-desc-* "),
renderSlot(_ctx.$slots, unref(getDescSlotName)(item.prop), {
column: item,
row: _ctx.data,
value: getDisplayValue(item.prop)
})
],
64
/* STABLE_FRAGMENT */
)) : (openBlock(), createElementBlock(
Fragment,
{ key: 3 },
[
createCommentVNode(" normal "),
createVNode(unref(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"]);
};
}
});
export { _sfc_main as default };