lc-vue-biz-cu-dialog/dist/index.js

新增/创建弹窗

import { ref as c, defineComponent as g, renderSlot as p, resolveComponent as E, resolveDirective as P, openBlock as h, createBlock as C, unref as v, isRef as T, createSlots as x, withCtx as m, withDirectives as M, createElementBlock as L, createCommentVNode as R, createElementVNode as j, computed as $, createVNode as k, mergeProps as U, createTextVNode as B, toDisplayString as D } from "vue";
import { createInjectionState as q } from "@vueuse/core";
import { cloneDeep as b, get as O } from "lodash";
import { v4 as _ } from "uuid";
import { useLocale as A } from "element-plus";
const [G, I] = q(({ initFunc: e, submitFunc: s }) => {
  const t = c(!1), o = c(!1), a = c(!1), i = c(), u = c(), d = c(), l = c(), f = c();
  return {
    visible: t,
    ready: o,
    submitLoading: a,
    defaultData: d,
    show: async (y, N) => {
      const S = _();
      l.value = S, i.value = y, u.value = N, a.value = !1, t.value = !0, o.value = !1, d.value = await e(b(i.value), b(u.value)), S === l.value && (o.value = !0);
    },
    submit: async () => {
      const y = _();
      f.value = y;
      try {
        if (a.value = !0, await s(b(i.value), b(u.value)), y !== f.value)
          return;
        t.value = !1;
      } finally {
        y === f.value && (a.value = !1);
      }
    },
    cancel: async () => {
      t.value = !1;
    }
  };
}), H = /* @__PURE__ */ g({
  __name: "dialog-root",
  props: {
    initFunc: {
      type: Function,
      default: () => ({})
    },
    submitFunc: {
      type: Function,
      default: () => ({})
    }
  },
  setup(e) {
    const s = e;
    return G({
      initFunc: s.initFunc,
      submitFunc: s.submitFunc
    }), (t, o) => p(t.$slots, "default");
  }
}), J = {
  key: 1,
  style: { height: "50px" }
}, K = { class: "dialog-footer" }, Q = /* @__PURE__ */ g({
  __name: "dialog",
  props: {
    title: {
      type: String,
      default: ""
    },
    width: {
      type: [String, Number],
      default: "600"
    },
    showFooter: {
      type: Boolean,
      default: !0
    },
    closeOnClickModal: {
      type: Boolean,
      default: !1
    },
    closeOnPressEscape: {
      type: Boolean,
      default: !1
    }
  },
  setup(e, { expose: s }) {
    const t = c(!0), { visible: o, ready: a, defaultData: i, show: u } = I();
    return s({ show: u }), (d, l) => {
      const f = E("el-dialog"), n = P("loading");
      return h(), C(f, {
        modelValue: v(o),
        "onUpdate:modelValue": l[0] || (l[0] = (r) => T(o) ? o.value = r : null),
        title: e.title,
        width: e.width,
        "append-to-body": "",
        "close-on-click-modal": e.closeOnClickModal,
        "close-on-press-escape": e.closeOnPressEscape,
        onOpen: l[1] || (l[1] = (r) => t.value = !1),
        onClosed: l[2] || (l[2] = (r) => t.value = !0)
      }, x({
        default: m(() => [
          t.value === !1 && v(a) === !0 ? p(d.$slots, "default", {
            key: 0,
            defaultData: v(i)
          }) : v(a) === !1 ? M((h(), L("div", J, null, 512)), [
            [n, !0]
          ]) : R("", !0)
        ]),
        _: 2
      }, [
        e.showFooter ? {
          name: "footer",
          fn: m(() => [
            j("div", K, [
              p(d.$slots, "footer")
            ])
          ]),
          key: "0"
        } : void 0
      ]), 1032, ["modelValue", "title", "width", "close-on-click-modal", "close-on-press-escape"]);
    };
  }
}), V = /* @__PURE__ */ g({
  __name: "footer-button",
  props: {
    type: {
      type: String,
      default: ""
    },
    btnType: {
      type: String,
      default: "cancel"
    }
  },
  emits: ["completed", "success"],
  setup(e, { emit: s }) {
    const t = e, o = s, { cancel: a, submit: i, submitLoading: u, ready: d } = I(), l = $(() => u.value && t.btnType === "submit"), f = $(() => !d.value && t.btnType === "submit"), n = async () => {
      try {
        t.btnType === "cancel" ? await a() : t.btnType === "submit" && await i(), o("success");
      } finally {
        o("completed");
      }
    };
    return (r, w) => {
      const y = E("el-button");
      return h(), C(y, {
        type: e.type,
        loading: l.value,
        disabled: f.value,
        onClick: n
      }, {
        default: m(() => [
          p(r.$slots, "default")
        ]),
        _: 3
      }, 8, ["type", "loading", "disabled"]);
    };
  }
}), W = {
  ok: "确认",
  cancel: "取消"
}, X = {
  ok: "confirm",
  cancel: "cancel"
}, Y = {
  ok: "確認",
  cancel: "キャンセル"
}, F = {
  "zh-cn": W,
  en: X,
  ja: Y
}, z = (e) => {
  const { lang: s } = A(), t = F[s.value] || F["zh-cn"];
  return O(t, e, void 0) || O(F["zh-cn"], e, void 0) || e;
}, se = /* @__PURE__ */ g({
  __name: "biz-dialog",
  props: {
    initFunc: {
      type: Function,
      default: () => ({})
    },
    submitFunc: {
      type: Function,
      default: () => ({})
    },
    title: {
      type: String,
      default: ""
    },
    width: {
      type: [String, Number],
      default: "600"
    },
    showFooter: {
      type: Boolean,
      default: !0
    },
    closeOnClickModal: {
      type: Boolean,
      default: !1
    },
    closeOnPressEscape: {
      type: Boolean,
      default: !1
    }
  },
  emits: [
    "cancel-completed",
    "cancel-success",
    "submit-completed",
    "submit-success"
  ],
  setup(e, { expose: s, emit: t }) {
    const o = t, a = () => {
      o("cancel-completed");
    }, i = () => {
      o("cancel-success");
    }, u = () => {
      o("submit-completed");
    }, d = () => {
      o("submit-success");
    }, l = c();
    return s({ show: (n, r) => {
      l.value.show(n, r);
    } }), (n, r) => (h(), C(H, {
      "init-func": e.initFunc,
      "submit-func": e.submitFunc
    }, {
      default: m(() => [
        k(Q, U(n.$attrs, {
          ref_key: "dialogRef",
          ref: l,
          title: e.title,
          width: e.width,
          "show-footer": e.showFooter,
          "close-on-click-modal": e.closeOnClickModal,
          "close-on-press-escape": e.closeOnPressEscape
        }), {
          default: m(({ defaultData: w }) => [
            p(n.$slots, "default", { defaultData: w })
          ]),
          footer: m(() => [
            p(n.$slots, "prefix-footer"),
            p(n.$slots, "footer", {}, () => [
              k(V, {
                "btn-type": "cancel",
                onCompleted: a,
                onSuccess: i
              }, {
                default: m(() => [
                  B(D(v(z)("cancel")), 1)
                ]),
                _: 1
              }),
              k(V, {
                "btn-type": "submit",
                type: "primary",
                onCompleted: u,
                onSuccess: d
              }, {
                default: m(() => [
                  B(D(v(z)("ok")), 1)
                ]),
                _: 1
              })
            ]),
            p(n.$slots, "suffix-footer")
          ]),
          _: 3
        }, 16, ["title", "width", "show-footer", "close-on-click-modal", "close-on-press-escape"])
      ]),
      _: 3
    }, 8, ["init-func", "submit-func"]));
  }
});
export {
  se as BizCuDialog,
  V as FooterButton,
  I as useDialogState
};