plus-pro-components
Version:
Page level components developed based on Element Plus.
367 lines (362 loc) • 15 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var elementPlus = require('element-plus');
require('../../../hooks/index.js');
var index = require('../../utils/index.js');
var formContent = require('./form-content.vue.js');
var useLocale = require('../../../hooks/useLocale.js');
var is = require('../../utils/is.js');
const _hoisted_1 = { class: "plus-form__group__item__icon" };
var _sfc_main = /* @__PURE__ */ vue.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.useLocale();
const formInstance = vue.ref(null);
const values = vue.ref({});
const filterHide = (columns) => {
return columns.filter((item) => vue.unref(item.hideInForm) !== true);
};
const model = vue.computed(() => values.value);
const style = vue.computed(() => ({
justifyContent: props.footerAlign === "left" ? "flex-start" : props.footerAlign === "center" ? "center" : "flex-end"
}));
const subColumns = vue.computed(() => filterHide(props.columns));
const subGroup = vue.computed(
() => {
var _a;
return is.isArray(props.group) ? (_a = props.group) == null ? void 0 : _a.filter((item) => vue.unref(item.hideInGroup) !== true) : props.group;
}
);
const originAttrs = vue.useAttrs();
const attrs = vue.computed(() => ({
...originAttrs,
...props.prevent ? {
onSubmit: vue.withModifiers(
(...arg) => {
if ((originAttrs == null ? void 0 : originAttrs.onSubmit) && is.isFunction(originAttrs == null ? void 0 : originAttrs.onSubmit)) {
;
originAttrs.onSubmit(...arg);
}
},
["prevent"]
)
} : {}
}));
const slots = vue.useSlots();
const labelSlots = index.filterSlots(slots, index.getLabelSlotName());
const fieldSlots = index.filterSlots(slots, index.getFieldSlotName());
const extraSlots = index.filterSlots(slots, index.getExtraSlotName());
vue.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) {
elementPlus.ElMessage.closeAll();
const values2 = is.isPlainObject(errors) && Object.values(errors);
const message = values2 ? (_c = (_b = values2[0]) == null ? void 0 : _b[0]) == null ? void 0 : _c.message : void 0;
elementPlus.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 vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElForm), vue.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: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createCommentVNode(" \u5206\u7EC4\u8868\u5355 "),
subGroup.value ? (vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
vue.renderList(subGroup.value, (groupItem, index) => {
return vue.openBlock(), vue.createBlock(
vue.unref(elementPlus.ElCard),
vue.mergeProps({
key: vue.unref(groupItem.title)
}, groupItem.cardProps || _ctx.cardProps, { class: "plus-form__group__item" }),
{
header: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "group-header", {
title: vue.unref(groupItem.title),
columns: groupItem.columns,
icon: groupItem.icon,
index
}, () => [
vue.createElementVNode("div", _hoisted_1, [
groupItem.icon ? (vue.openBlock(), vue.createBlock(
vue.unref(elementPlus.ElIcon),
{ key: 0 },
{
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(groupItem.icon)))
]),
_: 2
/* DYNAMIC */
},
1024
/* DYNAMIC_SLOTS */
)) : vue.createCommentVNode("v-if", true),
vue.createTextVNode(
" " + vue.toDisplayString(vue.unref(groupItem.title)),
1
/* TEXT */
)
])
])
]),
default: vue.withCtx(() => [
vue.createVNode(formContent.default, {
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
}, vue.createSlots({
_: 2
/* DYNAMIC */
}, [
vue.renderList(vue.unref(labelSlots), (_, key) => {
return {
name: key,
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.guardReactiveProps(data)))
])
};
}),
vue.renderList(vue.unref(fieldSlots), (_, key) => {
return {
name: key,
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.guardReactiveProps(data)))
])
};
}),
vue.renderList(vue.unref(extraSlots), (_, key) => {
return {
name: key,
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.guardReactiveProps(data)))
])
};
}),
_ctx.$slots["tooltip-icon"] ? {
name: "tooltip-icon",
fn: vue.withCtx(() => [
vue.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 */
)) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createCommentVNode(" \u666E\u901A\u8868\u5355 "),
vue.createVNode(formContent.default, {
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
}, vue.createSlots({
_: 2
/* DYNAMIC */
}, [
vue.renderList(vue.unref(labelSlots), (_, key) => {
return {
name: key,
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.guardReactiveProps(data)))
])
};
}),
vue.renderList(vue.unref(fieldSlots), (_, key) => {
return {
name: key,
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.guardReactiveProps(data)))
])
};
}),
vue.renderList(vue.unref(extraSlots), (_, key) => {
return {
name: key,
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.guardReactiveProps(data)))
])
};
}),
_ctx.$slots["search-footer"] ? {
name: "search-footer",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "search-footer")
]),
key: "0"
} : void 0,
_ctx.$slots["tooltip-icon"] ? {
name: "tooltip-icon",
fn: vue.withCtx(() => [
vue.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 ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: "plus-form__footer",
style: vue.normalizeStyle(style.value)
},
[
vue.renderSlot(_ctx.$slots, "footer", vue.normalizeProps(vue.guardReactiveProps({ handleReset, handleSubmit })), () => [
_ctx.hasReset ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElButton), {
key: 0,
onClick: handleReset
}, {
default: vue.withCtx(() => [
vue.createCommentVNode(" \u91CD\u7F6E "),
vue.createTextVNode(
" " + vue.toDisplayString(_ctx.resetText || vue.unref(t)("plus.form.resetText")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
})) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(elementPlus.ElButton), {
type: "primary",
loading: _ctx.submitLoading,
onClick: handleSubmit
}, {
default: vue.withCtx(() => [
vue.createCommentVNode(" \u63D0\u4EA4 "),
vue.createTextVNode(
" " + vue.toDisplayString(_ctx.submitText || vue.unref(t)("plus.form.submitText")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["loading"])
])
],
4
/* STYLE */
)) : vue.createCommentVNode("v-if", true)
]),
_: 3
/* FORWARDED */
}, 16, ["rules", "label-width", "class", "label-position", "label-suffix", "model"]);
};
}
});
exports.default = _sfc_main;