tdesign-pro-component/dist/es/ModalForm-D6JCnA34.js

ProComponents tdesign-vue-next + Vue3 + TS

import { g as v, w as Q } from "./utils-DU1amZow.js";
import { defineComponent as W, useSlots as X, ref as x, onMounted as Z, resolveComponent as s, openBlock as d, createElementBlock as h, createVNode as V, mergeProps as r, unref as f, isRef as U, createSlots as T, withCtx as F, renderList as oo, Fragment as eo, createBlock as u, createCommentVNode as m, renderSlot as lo } from "vue";
import { P as no } from "./ProForm-CApdDyRX.js";
import { u as C } from "./hooks-9GWkbKry.js";
import { M as ao } from "./vendor-B4aI3wuy.js";
const to = /* @__PURE__ */ W({
  name: "ModalForm",
  __name: "ModalForm",
  props: {
    options: {},
    visible: {
      type: Boolean
    },
    request: {},
    proFormProps: {},
    loading: {
      type: Boolean
    },
    loadingText: {},
    loadingProps: {},
    width: {},
    theme: {},
    header: {},
    footer: {},
    dialogProps: {},
    autoClose: {
      type: Boolean,
      default: !1
    },
    enableTip: {
      type: Boolean,
      default: !1
    },
    tipTheme: {
      default: "error"
    },
    labelAlign: {
      default: "top"
    }
  },
  emits: ["submit", "close", "opened", "update:visible", "update:loading", "error"],
  setup(S, {
    expose: A,
    emit: R
  }) {
    const B = {
      text: {
        propsName: "textProps",
        componentName: "ProFormText"
      },
      select: {
        propsName: "selectProps",
        componentName: "ProFormSelect"
      },
      radio: {
        propsName: "radioProps",
        componentName: "ProFormRadio"
      },
      textarea: {
        propsName: "textareaProps",
        componentName: "ProFormTextarea"
      },
      datepicker: {
        propsName: "datepickerProps",
        componentName: "ProFormDatepicker"
      },
      checkbox: {
        propsName: "checkboxProps",
        componentName: "ProFormCheckbox"
      },
      number: {
        propsName: "numberProps",
        componentName: "ProFormInputNumber"
      },
      treeSelect: {
        propsName: "treeSelectProps",
        componentName: "ProFormTreeSelect"
      },
      upload: {
        propsName: "uploadProps",
        componentName: "upload"
      }
    }, l = S, P = R, y = X(), w = () => Promise.resolve(null), g = x(), _ = x([]), i = C(l, "visible", P, !1), c = C(l, "loading", P, !1);
    Z(() => {
      _.value = l.options.map((n) => `form-${n.name}`);
    });
    function M() {
      var n;
      P("opened"), (n = g.value) == null || n.resetRequest(), i.value = !0;
    }
    function N() {
      var n;
      P("close"), (n = g.value) == null || n.reset(), i.value = !1;
    }
    function k() {
      var n;
      (n = g.value) == null || n.validate().then(async (p) => {
        var b;
        c.value = !0;
        try {
          await P("submit", p), l.autoClose ? setTimeout(() => {
            N(), c.value = !1;
          }, 200) : (c.value = !1, (b = g.value) == null || b.resetRequest());
        } catch {
          c.value = !1;
        }
      }).catch((p) => {
        if (P("error", p), l.enableTip) {
          const b = Object.keys(p)[0];
          ao[l.tipTheme](p[b][0].message);
        }
      });
    }
    const q = v(y, l, "header"), I = v(y, l, "footer"), O = () => q, L = () => I;
    function e(n) {
      n = n.replace("form-", "").trim();
      const p = l.options.find((b) => b.name === n);
      return {
        option: p,
        component: B[p.type || "text"]
      };
    }
    return A({
      submit: k,
      reset: () => {
        var n;
        return (n = g.value) == null ? void 0 : n.reset();
      },
      open: () => i.value = !0,
      close: () => i.value = !1,
      getFormRef: () => g.value
    }), (n, p) => {
      const b = s("ProFormText"), D = s("ProFormSelect"), E = s("ProFormRadio"), H = s("ProFormCheckbox"), $ = s("ProFormInputNumber"), j = s("ProFormDatepicker"), Y = s("ProFormTreeSelect"), z = s("ProFormTextarea"), G = s("t-upload"), J = s("t-form-item"), K = s("t-dialog");
      return d(), h("div", null, [V(K, r({
        confirmLoading: f(c),
        onConfirm: k,
        onOpened: M,
        onCancel: N,
        onClose: N,
        visible: f(i),
        "onUpdate:visible": p[1] || (p[1] = (o) => U(i) ? i.value = o : null),
        width: l.width
      }, l.dialogProps), T({
        header: F(() => [V(O)]),
        default: F(() => [V(f(no), r({
          "label-align": l.labelAlign,
          loading: f(c),
          "onUpdate:loading": p[0] || (p[0] = (o) => U(c) ? c.value = o : null),
          "loading-text": l.loadingText,
          "loading-props": l.loadingProps,
          "hide-footer": "",
          ref_key: "proFormRef",
          ref: g,
          options: l.options,
          request: f(i) ? l.request : w
        }, l.proFormProps), T({
          _: 2
        }, [oo(_.value, (o) => ({
          name: o,
          fn: F(({
            form: a
          }) => [y[o] ? lo(n.$slots, o, {
            key: 1,
            form: a
          }) : (d(), h(eo, {
            key: 0
          }, [!e(o).option.type || e(o).option.type === "text" ? (d(), u(b, r({
            key: 0,
            "label-align": l.labelAlign,
            name: e(o).option.name,
            label: e(o).option.label,
            modelValue: a[e(o).option.name],
            "onUpdate:modelValue": (t) => a[e(o).option.name] = t
          }, {
            ...e(o).option,
            //@ts-ignore
            ...e(o).option[e(o).component.propsName]
          }), null, 16, ["label-align", "name", "label", "modelValue", "onUpdate:modelValue"])) : m("", !0), e(o).option.type === "select" ? (d(), u(D, r({
            key: 1,
            "label-align": l.labelAlign,
            name: e(o).option.name,
            label: e(o).option.label,
            modelValue: a[e(o).option.name],
            "onUpdate:modelValue": (t) => a[e(o).option.name] = t
          }, {
            ...e(o).option,
            //@ts-ignore
            ...e(o).option[e(o).component.propsName]
          }), null, 16, ["label-align", "name", "label", "modelValue", "onUpdate:modelValue"])) : m("", !0), e(o).option.type === "radio" ? (d(), u(E, r({
            key: 2,
            "label-align": l.labelAlign,
            name: e(o).option.name,
            label: e(o).option.label,
            modelValue: a[e(o).option.name],
            "onUpdate:modelValue": (t) => a[e(o).option.name] = t
          }, {
            ...e(o).option,
            //@ts-ignore
            ...e(o).option[e(o).component.propsName]
          }), null, 16, ["label-align", "name", "label", "modelValue", "onUpdate:modelValue"])) : m("", !0), e(o).option.type === "checkbox" ? (d(), u(H, r({
            key: 3,
            "label-align": l.labelAlign,
            name: e(o).option.name,
            label: e(o).option.label,
            modelValue: a[e(o).option.name],
            "onUpdate:modelValue": (t) => a[e(o).option.name] = t
          }, {
            ...e(o).option,
            //@ts-ignore
            ...e(o).option[e(o).component.propsName]
          }), null, 16, ["label-align", "name", "label", "modelValue", "onUpdate:modelValue"])) : m("", !0), e(o).option.type === "number" ? (d(), u($, r({
            key: 4,
            "label-align": l.labelAlign,
            name: e(o).option.name,
            label: e(o).option.label,
            modelValue: a[e(o).option.name],
            "onUpdate:modelValue": (t) => a[e(o).option.name] = t
          }, {
            ...e(o).option,
            //@ts-ignore
            ...e(o).option[e(o).component.propsName]
          }), null, 16, ["label-align", "name", "label", "modelValue", "onUpdate:modelValue"])) : m("", !0), e(o).option.type === "datepicker" ? (d(), u(j, r({
            key: 5,
            "label-align": l.labelAlign,
            name: e(o).option.name,
            label: e(o).option.label,
            modelValue: a[e(o).option.name],
            "onUpdate:modelValue": (t) => a[e(o).option.name] = t
          }, {
            ...e(o).option,
            //@ts-ignore
            ...e(o).option[e(o).component.propsName]
          }), null, 16, ["label-align", "name", "label", "modelValue", "onUpdate:modelValue"])) : m("", !0), e(o).option.type === "treeSelect" ? (d(), u(Y, r({
            key: 6,
            "label-align": l.labelAlign,
            name: e(o).option.name,
            label: e(o).option.label,
            modelValue: a[e(o).option.name],
            "onUpdate:modelValue": (t) => a[e(o).option.name] = t
          }, {
            ...e(o).option,
            //@ts-ignore
            ...e(o).option[e(o).component.propsName]
          }), null, 16, ["label-align", "name", "label", "modelValue", "onUpdate:modelValue"])) : m("", !0), e(o).option.type === "textarea" ? (d(), u(z, r({
            key: 7,
            "label-align": l.labelAlign,
            name: e(o).option.name,
            label: e(o).option.label,
            modelValue: a[e(o).option.name],
            "onUpdate:modelValue": (t) => a[e(o).option.name] = t
          }, {
            ...e(o).option,
            //@ts-ignore
            ...e(o).option[e(o).component.propsName]
          }), null, 16, ["label-align", "name", "label", "modelValue", "onUpdate:modelValue"])) : m("", !0), e(o).option.type === "upload" ? (d(), u(J, r({
            "label-align": l.labelAlign,
            key: e(o).option.name,
            label: e(o).option.label,
            rules: e(o).option.rules,
            name: e(o).option.name
          }, e(o).option.formItemProps), {
            default: F(() => [V(G, r({
              modelValue: a[e(o).option.name],
              "onUpdate:modelValue": (t) => a[e(o).option.name] = t,
              multiple: e(o).option.multiple,
              readonly: e(o).option.readonly,
              disabled: e(o).option.disabled
            }, e(o).option.uploadProps), null, 16, ["modelValue", "onUpdate:modelValue", "multiple", "readonly", "disabled"])]),
            _: 2
          }, 1040, ["label-align", "label", "rules", "name"])) : m("", !0)], 64))])
        }))]), 1040, ["label-align", "loading", "loading-text", "loading-props", "options", "request"])]),
        _: 2
      }, [y.footer || l.footer ? {
        name: "footer",
        fn: F(() => [V(L)]),
        key: "0"
      } : void 0]), 1040, ["confirmLoading", "visible", "width"])]);
    };
  }
}), io = Q(to);
export {
  io as M
};