plus-pro-components/lib/components/dialog-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');
require('../../../hooks/index.js');
var index$2 = require('../../form/index.js');
var index$1 = require('../../dialog/index.js');
var elementPlus = require('element-plus');
var index = require('../../utils/index.js');
var useLocale = require('../../../hooks/useLocale.js');
var is = require('../../utils/is.js');

var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "PlusDialogForm"
  },
  __name: "index",
  props: {
    modelValue: { default: () => ({}) },
    visible: { type: Boolean, default: false },
    dialog: { default: () => ({}) },
    form: { default: () => ({}) },
    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();
    const computedFormInstance = vue.computed(() => {
      var _a;
      return (_a = formInstance.value) == null ? void 0 : _a.formInstance;
    });
    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 handleCancel = () => {
      subVisible.value = false;
      emit("update:visible", subVisible.value);
      emit("cancel");
    };
    __expose({
      handleConfirm,
      handleCancel,
      formInstance: computedFormInstance
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.unref(index$1.PlusDialog), vue.mergeProps({
        modelValue: subVisible.value,
        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => subVisible.value = $event),
        width: "800px",
        top: "10vh",
        title: vue.unref(t)("plus.dialogForm.title")
      }, _ctx.dialog, {
        onCancel: handleCancel,
        onConfirm: handleConfirm
      }), vue.createSlots({
        default: vue.withCtx(() => [
          vue.createVNode(vue.unref(index$2.PlusForm), vue.mergeProps({
            ref_key: "formInstance",
            ref: formInstance,
            modelValue: state.value,
            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.value = $event),
            "has-footer": false,
            "footer-align": "right"
          }, _ctx.form, { onChange: handleChange }), vue.createSlots({
            _: 2
            /* DYNAMIC */
          }, [
            _ctx.$slots["form-footer"] ? {
              name: "footer",
              fn: vue.withCtx((data) => [
                vue.renderSlot(_ctx.$slots, "form-footer", vue.normalizeProps(vue.guardReactiveProps(data)))
              ]),
              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["dialog-header"] ? {
          name: "header",
          fn: vue.withCtx(() => [
            vue.renderSlot(_ctx.$slots, "dialog-header")
          ]),
          key: "0"
        } : void 0,
        _ctx.$slots["dialog-footer"] ? {
          name: "footer",
          fn: vue.withCtx(() => [
            vue.renderSlot(_ctx.$slots, "dialog-footer", vue.normalizeProps(vue.guardReactiveProps({ handleConfirm, handleCancel })))
          ]),
          key: "1"
        } : void 0
      ]), 1040, ["modelValue", "title"]);
    };
  }
});

exports.default = _sfc_main;