plus-pro-components/es/components/dialog-form/src/index.vue2.mjs

Page level components developed based on Element Plus.

import { defineComponent, ref, computed, useSlots, watch, openBlock, createBlock, unref, mergeProps, createSlots, withCtx, createVNode, renderSlot, normalizeProps, guardReactiveProps, renderList } from 'vue';
import '../../../hooks/index.mjs';
import { PlusForm } from '../../form/index.mjs';
import { PlusDialog } from '../../dialog/index.mjs';
import { ElMessage } from 'element-plus';
import { filterSlots, getLabelSlotName, getFieldSlotName, getExtraSlotName } from '../../utils/index.mjs';
import { useLocale } from '../../../hooks/useLocale.mjs';
import { isPlainObject } from '../../utils/is.mjs';

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

export { _sfc_main as default };