vue-amazing-ui/es/dialog/Dialog.vue2.js

An Amazing Vue3 UI Components Library, Using TypeScript.

import { defineComponent as J, ref as L, computed as z, watch as Q, nextTick as R, watchEffect as Z, onMounted as x, onUnmounted as _, createElementBlock as a, openBlock as n, createVNode as i, withDirectives as p, Transition as D, withCtx as u, createElementVNode as o, normalizeStyle as c, vShow as y, withKeys as ee, withModifiers as le, normalizeClass as g, createCommentVNode as w, renderSlot as k, createTextVNode as d, toDisplayString as f, unref as b, normalizeProps as N, guardReactiveProps as V, mergeProps as C } from "vue";
import H from "../scrollbar/index.js";
import S from "../button/index.js";
import { useOptionsSupported as te } from "../utils/index.js";
const oe = { class: "dialog-root" }, ae = {
  focusable: "false",
  "data-icon": "fullscreen",
  width: "1em",
  height: "1em",
  fill: "currentColor",
  "aria-hidden": "true",
  viewBox: "64 64 896 896"
}, ne = {
  focusable: "false",
  "data-icon": "fullscreen-exit",
  width: "1em",
  height: "1em",
  fill: "currentColor",
  "aria-hidden": "true",
  viewBox: "64 64 896 896"
}, re = {
  key: 1,
  class: "dialog-footer"
}, se = {
  focusable: "false",
  "data-icon": "fullscreen",
  width: "1em",
  height: "1em",
  fill: "currentColor",
  "aria-hidden": "true",
  viewBox: "64 64 896 896"
}, ie = {
  focusable: "false",
  "data-icon": "fullscreen-exit",
  width: "1em",
  height: "1em",
  fill: "currentColor",
  "aria-hidden": "true",
  viewBox: "64 64 896 896"
}, ue = {
  key: 1,
  class: "dialog-footer"
}, me = /* @__PURE__ */ J({
  __name: "Dialog",
  props: {
    width: { default: 520 },
    height: { default: "auto" },
    title: { default: void 0 },
    titleStyle: { default: () => ({}) },
    content: { default: void 0 },
    contentStyle: { default: () => ({}) },
    bodyClass: { default: void 0 },
    bodyStyle: { default: () => ({}) },
    scrollbarProps: { default: () => ({}) },
    cancelText: { default: "取消" },
    cancelProps: { default: () => ({}) },
    okText: { default: "确定" },
    okType: { default: "primary" },
    okProps: { default: () => ({}) },
    footer: { type: Boolean, default: !0 },
    destroyOnClose: { type: Boolean, default: !1 },
    switchFullscreen: { type: Boolean, default: !1 },
    centered: { type: Boolean, default: !1 },
    top: { default: 100 },
    transformOrigin: { default: "mouse" },
    confirmLoading: { type: Boolean, default: !1 },
    blockScroll: { type: Boolean, default: !0 },
    keyboard: { type: Boolean, default: !0 },
    maskClosable: { type: Boolean, default: !0 },
    maskStyle: { default: () => ({}) },
    open: { type: Boolean, default: !1 }
  },
  emits: ["update:open", "cancel", "ok"],
  setup(Y, { emit: K }) {
    const l = Y, P = L(), s = L(null), v = L(), B = L(), m = L("50% 50%"), r = L(!1), { isSupported: O } = te("capture"), $ = K, T = z(() => typeof l.width == "number" ? `${l.width}px` : l.width), W = z(() => typeof l.height == "number" ? `${l.height}px` : l.height), U = z(() => typeof l.top == "number" ? `${l.top}px` : l.top), X = z(() => r.value ? l.transformOrigin === "mouse" ? {
      width: "100%",
      transformOrigin: `${s.value?.x}px ${s.value?.y}px`
    } : {
      width: "100%",
      transformOrigin: m.value
    } : l.centered ? {
      width: T.value,
      transformOrigin: m.value
    } : {
      width: T.value,
      transformOrigin: m.value,
      top: U.value
    }), M = z(() => r.value ? {
      height: "100vh",
      ...l.bodyStyle
    } : {
      height: W.value,
      ...l.bodyStyle
    });
    Q(
      v,
      async (e) => {
        e ? (await R(), P.value.focus(), l.blockScroll && (document.documentElement.style.overflowY = "hidden", document.body.style.overflowY = "hidden")) : l.blockScroll && (document.documentElement.style.removeProperty("overflow-y"), document.body.style.removeProperty("overflow-y"));
      },
      {
        immediate: !0
      }
    ), Z(() => {
      v.value = l.open;
    }), x(() => {
      document.addEventListener("click", E, O.value ? { capture: !0 } : !0);
    }), _(() => {
      document.removeEventListener("click", E, O.value ? { capture: !0 } : !0);
    });
    function E(e) {
      v.value || (s.value = {
        x: e.clientX,
        // 相对于浏览器视口左上角的 X 坐标，不页面滚动而改变
        y: e.clientY
        // 相对于浏览器视口左上角的 Y 坐标，不页面滚动而改变
      });
    }
    async function j(e) {
      if (B.value = !0, await R(), l.transformOrigin === "mouse" && s.value) {
        const t = e.getBoundingClientRect();
        m.value = `${s.value.x - t.left}px ${s.value.y - t.top}px`;
      } else
        m.value = "50% 50%";
    }
    function q(e) {
      if (l.transformOrigin === "mouse" && s.value) {
        const t = e.getBoundingClientRect();
        m.value = `${s.value.x - t.left}px ${s.value.y - t.top}px`;
      } else
        m.value = "50% 50%";
    }
    function G() {
      B.value = !1, r.value = !1;
    }
    function F() {
      r.value = !r.value;
    }
    function h() {
      v.value = !1, $("update:open", !1), $("cancel");
    }
    function A() {
      $("ok");
    }
    return (e, t) => (n(), a("div", oe, [
      i(D, { name: "fade" }, {
        default: u(() => [
          p(o("div", {
            class: "dialog-mask",
            style: c(e.maskStyle)
          }, null, 4), [
            [y, v.value]
          ])
        ]),
        _: 1
      }),
      p(o("div", {
        tabindex: "-1",
        ref_key: "dialogRef",
        ref: P,
        class: g(["dialog-wrap", { "flex-centered": e.centered }]),
        onClick: t[0] || (t[0] = le((I) => l.maskClosable ? h() : () => !1, ["self"])),
        onKeydown: t[1] || (t[1] = ee((I) => l.keyboard ? h() : () => !1, ["esc"]))
      }, [
        i(D, {
          name: "zoom",
          "enter-from-class": "zoom-enter",
          "enter-active-class": "zoom-enter",
          "enter-to-class": "zoom-enter zoom-enter-active",
          "leave-from-class": "zoom-leave",
          "leave-active-class": "zoom-leave zoom-leave-active",
          "leave-to-class": "zoom-leave zoom-leave-active",
          onBeforeEnter: j,
          onBeforeLeave: q,
          onAfterLeave: G
        }, {
          default: u(() => [
            p(o("div", {
              class: g(["dialog-container", { "dialog-with-fullscreen": r.value }]),
              style: c(X.value)
            }, [
              e.destroyOnClose ? w("", !0) : (n(), a("div", {
                key: 0,
                class: g(["dialog-body-wrap", e.bodyClass]),
                style: c(M.value)
              }, [
                o("div", {
                  class: g(["dialog-header", { "header-with-switch": e.switchFullscreen }]),
                  style: c(e.titleStyle)
                }, [
                  k(e.$slots, "title", {}, () => [
                    d(f(e.title), 1)
                  ], !0)
                ], 6),
                e.switchFullscreen ? (n(), a("span", {
                  key: 0,
                  class: "fullscreen-action",
                  onClick: F
                }, [
                  p((n(), a("svg", ae, [...t[2] || (t[2] = [
                    o("path", { d: "M290 236.4l43.9-43.9a8.01 8.01 0 00-4.7-13.6L169 160c-5.1-.6-9.5 3.7-8.9 8.9L179 329.1c.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L370 423.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L290 236.4zm352.7 187.3c3.1 3.1 8.2 3.1 11.3 0l133.7-133.6 43.7 43.7a8.01 8.01 0 0013.6-4.7L863.9 169c.6-5.1-3.7-9.5-8.9-8.9L694.8 179c-6.6.8-9.4 8.9-4.7 13.6l43.9 43.9L600.3 370a8.03 8.03 0 000 11.3l42.4 42.4zM845 694.9c-.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L654 600.3a8.03 8.03 0 00-11.3 0l-42.4 42.3a8.03 8.03 0 000 11.3L734 787.6l-43.9 43.9a8.01 8.01 0 004.7 13.6L855 864c5.1.6 9.5-3.7 8.9-8.9L845 694.9zm-463.7-94.6a8.03 8.03 0 00-11.3 0L236.3 733.9l-43.7-43.7a8.01 8.01 0 00-13.6 4.7L160.1 855c-.6 5.1 3.7 9.5 8.9 8.9L329.2 845c6.6-.8 9.4-8.9 4.7-13.6L290 787.6 423.7 654c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.4z" }, null, -1)
                  ])], 512)), [
                    [y, !r.value]
                  ]),
                  p((n(), a("svg", ne, [...t[3] || (t[3] = [
                    o("path", { d: "M391 240.9c-.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L200 146.3a8.03 8.03 0 00-11.3 0l-42.4 42.3a8.03 8.03 0 000 11.3L280 333.6l-43.9 43.9a8.01 8.01 0 004.7 13.6L401 410c5.1.6 9.5-3.7 8.9-8.9L391 240.9zm10.1 373.2L240.8 633c-6.6.8-9.4 8.9-4.7 13.6l43.9 43.9L146.3 824a8.03 8.03 0 000 11.3l42.4 42.3c3.1 3.1 8.2 3.1 11.3 0L333.7 744l43.7 43.7A8.01 8.01 0 00391 783l18.9-160.1c.6-5.1-3.7-9.4-8.8-8.8zm221.8-204.2L783.2 391c6.6-.8 9.4-8.9 4.7-13.6L744 333.6 877.7 200c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.3a8.03 8.03 0 00-11.3 0L690.3 279.9l-43.7-43.7a8.01 8.01 0 00-13.6 4.7L614.1 401c-.6 5.2 3.7 9.5 8.8 8.9zM744 690.4l43.9-43.9a8.01 8.01 0 00-4.7-13.6L623 614c-5.1-.6-9.5 3.7-8.9 8.9L633 783.1c.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L824 877.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L744 690.4z" }, null, -1)
                  ])], 512)), [
                    [y, r.value]
                  ])
                ])) : w("", !0),
                o("span", {
                  class: "close-action",
                  onClick: h
                }, [...t[4] || (t[4] = [
                  o("svg", {
                    width: "1em",
                    height: "1em",
                    fill: "currentColor",
                    viewBox: "64 64 896 896",
                    "data-icon": "close",
                    "aria-hidden": "true",
                    focusable: "false"
                  }, [
                    o("path", { d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" })
                  ], -1)
                ])]),
                i(b(H), N(V(e.scrollbarProps)), {
                  default: u(() => [
                    o("div", {
                      class: "dialog-content",
                      style: c(e.contentStyle)
                    }, [
                      k(e.$slots, "default", {}, () => [
                        d(f(e.content), 1)
                      ], !0)
                    ], 4)
                  ]),
                  _: 3
                }, 16),
                e.footer ? (n(), a("div", re, [
                  k(e.$slots, "footer", {}, () => [
                    i(b(S), C({
                      class: "mr8",
                      onClick: h
                    }, e.cancelProps), {
                      default: u(() => [
                        d(f(e.cancelText), 1)
                      ]),
                      _: 1
                    }, 16),
                    i(b(S), C({
                      type: e.okType,
                      loading: l.confirmLoading,
                      onClick: A
                    }, e.okProps), {
                      default: u(() => [
                        d(f(e.okText), 1)
                      ]),
                      _: 1
                    }, 16, ["type", "loading"])
                  ], !0)
                ])) : w("", !0)
              ], 6)),
              e.destroyOnClose && v.value ? (n(), a("div", {
                key: 1,
                class: g(["dialog-body-wrap", e.bodyClass]),
                style: c(M.value)
              }, [
                o("div", {
                  class: g(["dialog-header", { "header-with-switch": e.switchFullscreen }]),
                  style: c(e.titleStyle)
                }, [
                  k(e.$slots, "title", {}, () => [
                    d(f(e.title), 1)
                  ], !0)
                ], 6),
                e.switchFullscreen ? (n(), a("span", {
                  key: 0,
                  class: "fullscreen-action",
                  onClick: F
                }, [
                  p((n(), a("svg", se, [...t[5] || (t[5] = [
                    o("path", { d: "M290 236.4l43.9-43.9a8.01 8.01 0 00-4.7-13.6L169 160c-5.1-.6-9.5 3.7-8.9 8.9L179 329.1c.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L370 423.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L290 236.4zm352.7 187.3c3.1 3.1 8.2 3.1 11.3 0l133.7-133.6 43.7 43.7a8.01 8.01 0 0013.6-4.7L863.9 169c.6-5.1-3.7-9.5-8.9-8.9L694.8 179c-6.6.8-9.4 8.9-4.7 13.6l43.9 43.9L600.3 370a8.03 8.03 0 000 11.3l42.4 42.4zM845 694.9c-.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L654 600.3a8.03 8.03 0 00-11.3 0l-42.4 42.3a8.03 8.03 0 000 11.3L734 787.6l-43.9 43.9a8.01 8.01 0 004.7 13.6L855 864c5.1.6 9.5-3.7 8.9-8.9L845 694.9zm-463.7-94.6a8.03 8.03 0 00-11.3 0L236.3 733.9l-43.7-43.7a8.01 8.01 0 00-13.6 4.7L160.1 855c-.6 5.1 3.7 9.5 8.9 8.9L329.2 845c6.6-.8 9.4-8.9 4.7-13.6L290 787.6 423.7 654c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.4z" }, null, -1)
                  ])], 512)), [
                    [y, !r.value]
                  ]),
                  p((n(), a("svg", ie, [...t[6] || (t[6] = [
                    o("path", { d: "M391 240.9c-.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L200 146.3a8.03 8.03 0 00-11.3 0l-42.4 42.3a8.03 8.03 0 000 11.3L280 333.6l-43.9 43.9a8.01 8.01 0 004.7 13.6L401 410c5.1.6 9.5-3.7 8.9-8.9L391 240.9zm10.1 373.2L240.8 633c-6.6.8-9.4 8.9-4.7 13.6l43.9 43.9L146.3 824a8.03 8.03 0 000 11.3l42.4 42.3c3.1 3.1 8.2 3.1 11.3 0L333.7 744l43.7 43.7A8.01 8.01 0 00391 783l18.9-160.1c.6-5.1-3.7-9.4-8.8-8.8zm221.8-204.2L783.2 391c6.6-.8 9.4-8.9 4.7-13.6L744 333.6 877.7 200c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.3a8.03 8.03 0 00-11.3 0L690.3 279.9l-43.7-43.7a8.01 8.01 0 00-13.6 4.7L614.1 401c-.6 5.2 3.7 9.5 8.8 8.9zM744 690.4l43.9-43.9a8.01 8.01 0 00-4.7-13.6L623 614c-5.1-.6-9.5 3.7-8.9 8.9L633 783.1c.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L824 877.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L744 690.4z" }, null, -1)
                  ])], 512)), [
                    [y, r.value]
                  ])
                ])) : w("", !0),
                o("span", {
                  class: "close-action",
                  onClick: h
                }, [...t[7] || (t[7] = [
                  o("svg", {
                    width: "1em",
                    height: "1em",
                    fill: "currentColor",
                    viewBox: "64 64 896 896",
                    "data-icon": "close",
                    "aria-hidden": "true",
                    focusable: "false"
                  }, [
                    o("path", { d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" })
                  ], -1)
                ])]),
                i(b(H), N(V(e.scrollbarProps)), {
                  default: u(() => [
                    o("div", {
                      class: "dialog-content",
                      style: c(e.contentStyle)
                    }, [
                      k(e.$slots, "default", {}, () => [
                        d(f(e.content), 1)
                      ], !0)
                    ], 4)
                  ]),
                  _: 3
                }, 16),
                e.footer ? (n(), a("div", ue, [
                  k(e.$slots, "footer", {}, () => [
                    i(b(S), C({
                      class: "mr8",
                      onClick: h
                    }, e.cancelProps), {
                      default: u(() => [
                        d(f(e.cancelText), 1)
                      ]),
                      _: 1
                    }, 16),
                    i(b(S), C({
                      type: e.okType,
                      loading: l.confirmLoading,
                      onClick: A
                    }, e.okProps), {
                      default: u(() => [
                        d(f(e.okText), 1)
                      ]),
                      _: 1
                    }, 16, ["type", "loading"])
                  ], !0)
                ])) : w("", !0)
              ], 6)) : w("", !0)
            ], 6), [
              [y, v.value]
            ])
          ]),
          _: 3
        })
      ], 34), [
        [y, B.value]
      ])
    ]));
  }
});
export {
  me as default
};