plus-pro-components/lib/components/drawer-form/src/index.vue2.js

Page level components developed based on Element Plus.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var index$1 = require('../../form/index.js');
var elementPlus = require('element-plus');
require('../../../hooks/index.js');
var index = require('../../utils/index.js');
var useLocale = require('../../../hooks/useLocale.js');
var is = require('../../utils/is.js');

const _hoisted_1 = { class: "plus-drawer-form__footer" };
var _sfc_main = /* @__PURE__ */ vue.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.useLocale();
    const formInstance = vue.ref(null);
    const computedFormInstance = vue.computed(() => {
      var _a;
      return (_a = formInstance.value) == null ? void 0 : _a.formInstance;
    });
    const drawerInstance = vue.ref();
    const state = vue.ref({});
    const subVisible = vue.ref(false);
    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.visible,
      (val) => {
        subVisible.value = val;
      },
      {
        immediate: true
      }
    );
    vue.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) {
          elementPlus.ElMessage.closeAll();
          const values = is.isPlainObject(errors) && Object.values(errors);
          const message = values ? (_c = (_b = values[0]) == null ? void 0 : _b[0]) == null ? void 0 : _c.message : void 0;
          elementPlus.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 vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElDrawer), vue.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: vue.unref(t)("plus.drawerForm.title"),
        "close-on-click-modal": false,
        "close-on-press-escape": false
      }, _ctx.$attrs, { onClose: handleClose }), vue.createSlots({
        default: vue.withCtx(() => [
          vue.createVNode(vue.unref(index$1.PlusForm), vue.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 }), vue.createSlots({
            _: 2
            /* DYNAMIC */
          }, [
            _ctx.$slots["form-footer"] ? {
              name: "footer",
              fn: vue.withCtx(() => [
                vue.renderSlot(_ctx.$slots, "form-footer")
              ]),
              key: "0"
            } : void 0,
            _ctx.$slots["form-group-header"] ? {
              name: "group-header",
              fn: vue.withCtx((data) => [
                vue.renderSlot(_ctx.$slots, "form-group-header", vue.normalizeProps(vue.guardReactiveProps(data)))
              ]),
              key: "1"
            } : void 0,
            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: "2"
            } : void 0
          ]), 1040, ["modelValue"])
        ]),
        _: 2
        /* DYNAMIC */
      }, [
        _ctx.$slots["drawer-header"] ? {
          name: "header",
          fn: vue.withCtx(() => [
            vue.renderSlot(_ctx.$slots, "drawer-header")
          ]),
          key: "0"
        } : void 0,
        _ctx.hasFooter ? {
          name: "footer",
          fn: vue.withCtx(() => [
            vue.createElementVNode("div", _hoisted_1, [
              vue.renderSlot(_ctx.$slots, "drawer-footer", vue.normalizeProps(vue.guardReactiveProps({ handleConfirm, handleCancel })), () => [
                vue.createVNode(vue.unref(elementPlus.ElButton), { onClick: handleCancel }, {
                  default: vue.withCtx(() => [
                    vue.createTextVNode(
                      vue.toDisplayString(_ctx.cancelText || vue.unref(t)("plus.drawerForm.cancelText")),
                      1
                      /* TEXT */
                    )
                  ]),
                  _: 1
                  /* STABLE */
                }),
                vue.createVNode(vue.unref(elementPlus.ElButton), {
                  type: "primary",
                  loading: _ctx.confirmLoading,
                  onClick: handleConfirm
                }, {
                  default: vue.withCtx(() => [
                    vue.createTextVNode(
                      vue.toDisplayString(_ctx.confirmText || vue.unref(t)("plus.drawerForm.confirmText")),
                      1
                      /* TEXT */
                    )
                  ]),
                  _: 1
                  /* STABLE */
                }, 8, ["loading"])
              ])
            ])
          ]),
          key: "1"
        } : void 0
      ]), 1040, ["modelValue", "size", "title"]);
    };
  }
});

exports.default = _sfc_main;