tdesign-pro-component/dist/es/DrawerForm-DWHlq59v.js

ProComponents tdesign-vue-next + Vue3 + TS

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