plus-pro-components
Version:
Page level components developed based on Element Plus.
363 lines (360 loc) • 14.8 kB
JavaScript
import { defineComponent, ref, unref, computed, useAttrs, withModifiers, useSlots, watch, openBlock, createBlock, mergeProps, withCtx, renderSlot, createCommentVNode, createElementBlock, Fragment, renderList, createElementVNode, resolveDynamicComponent, createTextVNode, toDisplayString, createVNode, createSlots, normalizeProps, guardReactiveProps, normalizeStyle } from 'vue';
import { ElMessage, ElForm, ElCard, ElIcon, ElButton } from 'element-plus';
import '../../../hooks/index.mjs';
import { filterSlots, getLabelSlotName, getFieldSlotName, getExtraSlotName } from '../../utils/index.mjs';
import PlusFormContent from './form-content.vue.mjs';
import { useLocale } from '../../../hooks/useLocale.mjs';
import { isArray, isFunction, isPlainObject } from '../../utils/is.mjs';
const _hoisted_1 = { class: "plus-form__group__item__icon" };
var _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "PlusForm",
inheritAttrs: false
},
__name: "index",
props: {
modelValue: { default: () => ({}) },
defaultValues: { default: () => ({}) },
columns: { default: () => [] },
labelWidth: { default: "80px" },
labelPosition: { default: "left" },
rowProps: { default: () => ({}) },
colProps: { default: () => ({}) },
labelSuffix: { default: ":" },
hasErrorTip: { type: Boolean, default: true },
hasFooter: { type: Boolean, default: true },
hasReset: { type: Boolean, default: true },
hasLabel: { type: Boolean, default: true },
submitText: { default: "" },
resetText: { default: "" },
submitLoading: { type: Boolean, default: false },
footerAlign: { default: "left" },
rules: { default: () => ({}) },
group: { type: [Boolean, Array], default: false },
cardProps: { default: () => ({}) },
prevent: { type: Boolean, default: false },
collapseDuration: { default: void 0 },
collapseTransition: { type: Boolean, default: void 0 },
clearable: { type: Boolean, default: true }
},
emits: ["update:modelValue", "submit", "change", "reset", "submitError", "validate"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const { t } = useLocale();
const formInstance = ref(null);
const values = ref({});
const filterHide = (columns) => {
return columns.filter((item) => unref(item.hideInForm) !== true);
};
const model = computed(() => values.value);
const style = computed(() => ({
justifyContent: props.footerAlign === "left" ? "flex-start" : props.footerAlign === "center" ? "center" : "flex-end"
}));
const subColumns = computed(() => filterHide(props.columns));
const subGroup = computed(
() => {
var _a;
return isArray(props.group) ? (_a = props.group) == null ? void 0 : _a.filter((item) => unref(item.hideInGroup) !== true) : props.group;
}
);
const originAttrs = useAttrs();
const attrs = computed(() => ({
...originAttrs,
...props.prevent ? {
onSubmit: withModifiers(
(...arg) => {
if ((originAttrs == null ? void 0 : originAttrs.onSubmit) && isFunction(originAttrs == null ? void 0 : originAttrs.onSubmit)) {
;
originAttrs.onSubmit(...arg);
}
},
["prevent"]
)
} : {}
}));
const slots = useSlots();
const labelSlots = filterSlots(slots, getLabelSlotName());
const fieldSlots = filterSlots(slots, getFieldSlotName());
const extraSlots = filterSlots(slots, getExtraSlotName());
watch(
() => props.modelValue,
(val) => {
values.value = val;
},
{
immediate: true
}
);
const handleChange = (_, column) => {
emit("update:modelValue", values.value);
emit("change", values.value, column);
};
const clearValidate = () => {
var _a;
(_a = formInstance.value) == null ? void 0 : _a.clearValidate();
};
const handleSubmit = async () => {
var _a, _b, _c;
try {
const valid = await ((_a = formInstance.value) == null ? void 0 : _a.validate());
if (valid) {
emit("submit", values.value);
return true;
}
} catch (errors) {
if (props.hasErrorTip) {
ElMessage.closeAll();
const values2 = isPlainObject(errors) && Object.values(errors);
const message = values2 ? (_c = (_b = values2[0]) == null ? void 0 : _b[0]) == null ? void 0 : _c.message : void 0;
ElMessage.warning(message || t("plus.form.errorTip"));
}
emit("submitError", errors);
}
return false;
};
const handleReset = () => {
clearValidate();
values.value = { ...props.defaultValues };
emit("update:modelValue", values.value);
emit("reset", values.value);
};
const handleValidate = (...args) => {
emit("validate", ...args);
};
__expose({
formInstance,
handleSubmit,
handleReset
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(ElForm), mergeProps({
ref_key: "formInstance",
ref: formInstance,
rules: _ctx.rules,
"label-width": _ctx.hasLabel ? _ctx.labelWidth : 0,
class: ["plus-form", _ctx.hasLabel ? "" : "no-has-label"],
"label-position": _ctx.labelPosition,
"validate-on-rule-change": false,
"label-suffix": _ctx.hasLabel ? _ctx.labelSuffix : ""
}, attrs.value, {
model: model.value,
onValidate: handleValidate
}), {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default", {}, () => [
createCommentVNode(" \u5206\u7EC4\u8868\u5355 "),
subGroup.value ? (openBlock(true), createElementBlock(
Fragment,
{ key: 0 },
renderList(subGroup.value, (groupItem, index) => {
return openBlock(), createBlock(
unref(ElCard),
mergeProps({
key: unref(groupItem.title)
}, groupItem.cardProps || _ctx.cardProps, { class: "plus-form__group__item" }),
{
header: withCtx(() => [
renderSlot(_ctx.$slots, "group-header", {
title: unref(groupItem.title),
columns: groupItem.columns,
icon: groupItem.icon,
index
}, () => [
createElementVNode("div", _hoisted_1, [
groupItem.icon ? (openBlock(), createBlock(
unref(ElIcon),
{ key: 0 },
{
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(groupItem.icon)))
]),
_: 2
/* DYNAMIC */
},
1024
/* DYNAMIC_SLOTS */
)) : createCommentVNode("v-if", true),
createTextVNode(
" " + toDisplayString(unref(groupItem.title)),
1
/* TEXT */
)
])
])
]),
default: withCtx(() => [
createVNode(PlusFormContent, {
modelValue: values.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => values.value = $event),
"row-props": _ctx.rowProps,
"col-props": _ctx.colProps,
columns: filterHide(groupItem.columns),
"has-label": _ctx.hasLabel,
"collapse-transition": _ctx.collapseTransition,
"collapse-duration": _ctx.collapseDuration,
clearable: _ctx.clearable,
onChange: handleChange
}, createSlots({
_: 2
/* DYNAMIC */
}, [
renderList(unref(labelSlots), (_, key) => {
return {
name: key,
fn: withCtx((data) => [
renderSlot(_ctx.$slots, key, normalizeProps(guardReactiveProps(data)))
])
};
}),
renderList(unref(fieldSlots), (_, key) => {
return {
name: key,
fn: withCtx((data) => [
renderSlot(_ctx.$slots, key, normalizeProps(guardReactiveProps(data)))
])
};
}),
renderList(unref(extraSlots), (_, key) => {
return {
name: key,
fn: withCtx((data) => [
renderSlot(_ctx.$slots, key, normalizeProps(guardReactiveProps(data)))
])
};
}),
_ctx.$slots["tooltip-icon"] ? {
name: "tooltip-icon",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "tooltip-icon")
]),
key: "0"
} : void 0
]), 1032, ["modelValue", "row-props", "col-props", "columns", "has-label", "collapse-transition", "collapse-duration", "clearable"])
]),
_: 2
/* DYNAMIC */
},
1040
/* FULL_PROPS, DYNAMIC_SLOTS */
);
}),
128
/* KEYED_FRAGMENT */
)) : (openBlock(), createElementBlock(
Fragment,
{ key: 1 },
[
createCommentVNode(" \u666E\u901A\u8868\u5355 "),
createVNode(PlusFormContent, {
modelValue: values.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => values.value = $event),
"row-props": _ctx.rowProps,
"col-props": _ctx.colProps,
columns: subColumns.value,
"has-label": _ctx.hasLabel,
"collapse-transition": _ctx.collapseTransition,
"collapse-duration": _ctx.collapseDuration,
clearable: _ctx.clearable,
onChange: handleChange
}, createSlots({
_: 2
/* DYNAMIC */
}, [
renderList(unref(labelSlots), (_, key) => {
return {
name: key,
fn: withCtx((data) => [
renderSlot(_ctx.$slots, key, normalizeProps(guardReactiveProps(data)))
])
};
}),
renderList(unref(fieldSlots), (_, key) => {
return {
name: key,
fn: withCtx((data) => [
renderSlot(_ctx.$slots, key, normalizeProps(guardReactiveProps(data)))
])
};
}),
renderList(unref(extraSlots), (_, key) => {
return {
name: key,
fn: withCtx((data) => [
renderSlot(_ctx.$slots, key, normalizeProps(guardReactiveProps(data)))
])
};
}),
_ctx.$slots["search-footer"] ? {
name: "search-footer",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "search-footer")
]),
key: "0"
} : void 0,
_ctx.$slots["tooltip-icon"] ? {
name: "tooltip-icon",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "tooltip-icon")
]),
key: "1"
} : void 0
]), 1032, ["modelValue", "row-props", "col-props", "columns", "has-label", "collapse-transition", "collapse-duration", "clearable"])
],
64
/* STABLE_FRAGMENT */
))
]),
_ctx.hasFooter ? (openBlock(), createElementBlock(
"div",
{
key: 0,
class: "plus-form__footer",
style: normalizeStyle(style.value)
},
[
renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps({ handleReset, handleSubmit })), () => [
_ctx.hasReset ? (openBlock(), createBlock(unref(ElButton), {
key: 0,
onClick: handleReset
}, {
default: withCtx(() => [
createCommentVNode(" \u91CD\u7F6E "),
createTextVNode(
" " + toDisplayString(_ctx.resetText || unref(t)("plus.form.resetText")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
})) : createCommentVNode("v-if", true),
createVNode(unref(ElButton), {
type: "primary",
loading: _ctx.submitLoading,
onClick: handleSubmit
}, {
default: withCtx(() => [
createCommentVNode(" \u63D0\u4EA4 "),
createTextVNode(
" " + toDisplayString(_ctx.submitText || unref(t)("plus.form.submitText")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["loading"])
])
],
4
/* STYLE */
)) : createCommentVNode("v-if", true)
]),
_: 3
/* FORWARDED */
}, 16, ["rules", "label-width", "class", "label-position", "label-suffix", "model"]);
};
}
});
export { _sfc_main as default };