plus-pro-components
Version:
Page level components developed based on Element Plus.
217 lines (214 loc) • 7.67 kB
JavaScript
import { defineComponent, ref, computed, useSlots, watch, openBlock, createBlock, unref, mergeProps, createSlots, withCtx, createVNode, renderSlot, normalizeProps, guardReactiveProps, renderList, createElementVNode, createTextVNode, toDisplayString } from 'vue';
import { PlusForm } from '../../form/index.mjs';
import { ElMessage, ElDrawer, ElButton } from 'element-plus';
import '../../../hooks/index.mjs';
import { filterSlots, getLabelSlotName, getFieldSlotName, getExtraSlotName } from '../../utils/index.mjs';
import { useLocale } from '../../../hooks/useLocale.mjs';
import { isPlainObject } from '../../utils/is.mjs';
const _hoisted_1 = { class: "plus-drawer-form__footer" };
var _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "PlusDrawerForm"
},
__name: "index",
props: {
modelValue: { default: () => ({}) },
visible: { type: Boolean, default: false },
drawer: { default: () => ({}) },
size: { default: "540px" },
form: { default: () => ({}) },
hasFooter: { type: Boolean, default: true },
cancelText: { default: "" },
confirmText: { default: "" },
confirmLoading: { type: Boolean, default: false },
hasErrorTip: { type: Boolean, default: true }
},
emits: ["update:modelValue", "update:visible", "confirm", "change", "cancel", "confirmError"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const { t } = useLocale();
const formInstance = ref(null);
const computedFormInstance = computed(() => {
var _a;
return (_a = formInstance.value) == null ? void 0 : _a.formInstance;
});
const drawerInstance = ref();
const state = ref({});
const subVisible = ref(false);
const slots = useSlots();
const labelSlots = filterSlots(slots, getLabelSlotName());
const fieldSlots = filterSlots(slots, getFieldSlotName());
const extraSlots = filterSlots(slots, getExtraSlotName());
watch(
() => props.visible,
(val) => {
subVisible.value = val;
},
{
immediate: true
}
);
watch(
() => props.modelValue,
(val) => {
state.value = val;
},
{
immediate: true
}
);
const handleChange = (values, column) => {
emit("update:modelValue", values);
emit("change", values, column);
};
const handleConfirm = async () => {
var _a, _b, _c;
try {
const valid = await ((_a = computedFormInstance.value) == null ? void 0 : _a.validate());
if (valid) {
emit("confirm", state.value);
}
} catch (errors) {
if (props.hasErrorTip) {
ElMessage.closeAll();
const values = isPlainObject(errors) && Object.values(errors);
const message = values ? (_c = (_b = values[0]) == null ? void 0 : _b[0]) == null ? void 0 : _c.message : void 0;
ElMessage.warning(message || t("plus.form.errorTip"));
}
emit("confirmError", errors);
}
};
const handleClose = () => {
handleCancel();
emit("update:visible", subVisible.value);
emit("cancel");
};
const handleCancel = () => {
subVisible.value = false;
};
__expose({
drawerInstance,
formInstance: computedFormInstance
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(ElDrawer), mergeProps({
ref_key: "drawerInstance",
ref: drawerInstance,
modelValue: subVisible.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => subVisible.value = $event),
class: "plus-drawer-form",
size: _ctx.size || "540px",
title: unref(t)("plus.drawerForm.title"),
"close-on-click-modal": false,
"close-on-press-escape": false
}, _ctx.$attrs, { onClose: handleClose }), createSlots({
default: withCtx(() => [
createVNode(unref(PlusForm), mergeProps({
ref_key: "formInstance",
ref: formInstance,
modelValue: state.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.value = $event),
"has-footer": false
}, _ctx.form, { onChange: handleChange }), createSlots({
_: 2
/* DYNAMIC */
}, [
_ctx.$slots["form-footer"] ? {
name: "footer",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "form-footer")
]),
key: "0"
} : void 0,
_ctx.$slots["form-group-header"] ? {
name: "group-header",
fn: withCtx((data) => [
renderSlot(_ctx.$slots, "form-group-header", normalizeProps(guardReactiveProps(data)))
]),
key: "1"
} : void 0,
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: "2"
} : void 0
]), 1040, ["modelValue"])
]),
_: 2
/* DYNAMIC */
}, [
_ctx.$slots["drawer-header"] ? {
name: "header",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "drawer-header")
]),
key: "0"
} : void 0,
_ctx.hasFooter ? {
name: "footer",
fn: withCtx(() => [
createElementVNode("div", _hoisted_1, [
renderSlot(_ctx.$slots, "drawer-footer", normalizeProps(guardReactiveProps({ handleConfirm, handleCancel })), () => [
createVNode(unref(ElButton), { onClick: handleCancel }, {
default: withCtx(() => [
createTextVNode(
toDisplayString(_ctx.cancelText || unref(t)("plus.drawerForm.cancelText")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}),
createVNode(unref(ElButton), {
type: "primary",
loading: _ctx.confirmLoading,
onClick: handleConfirm
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(_ctx.confirmText || unref(t)("plus.drawerForm.confirmText")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["loading"])
])
])
]),
key: "1"
} : void 0
]), 1040, ["modelValue", "size", "title"]);
};
}
});
export { _sfc_main as default };