@qynpm/ui 1.0.39 → 1.0.40

package/dist/shared/index-CvfLEIFE.mjs

@@ -0,0 +1,526 @@
+import { ElDialog as xe, ElIcon as we } from "element-plus/es";
+import { defineComponent as qe, useSlots as _e, ref as c, computed as M, createVNode as I, watchEffect as be, watch as re, h as ae, onMounted as Ce, nextTick as se, onUnmounted as ze, openBlock as d, createElementBlock as u, normalizeClass as Z, createSlots as Se, withCtx as B, createElementVNode as i, normalizeStyle as P, createCommentVNode as y, renderSlot as D, toDisplayString as de, withModifiers as f, createBlock as ce, withDirectives as ke, vShow as Me } from "vue";
+import Be from "clsx";
+import { ElButton as ue } from "element-plus";
+import { Close as De } from "@element-plus/icons-vue";
+import { useBreakpoints as Ie, useDraggable as Ee } from "@vueuse/core";
+import { _ as Le } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const Y = 5, A = 2e3, Oe = /* @__PURE__ */ qe({
+  inheritAttrs: !1,
+  __name: "index",
+  props: {
+    open: { type: Boolean, required: !0, default: !1 },
+    title: { type: String, required: !1, default: "" },
+    width: { type: [String, Number], required: !1, default: "50%" },
+    showFooter: { type: Boolean, required: !1, default: !0 },
+    showConfirm: { type: Boolean, required: !1, default: !0 },
+    showCancel: { type: Boolean, required: !1, default: !0 },
+    confirmText: { type: String, required: !1, default: "确 认" },
+    cancelText: { type: String, required: !1, default: "取 消" },
+    confirmLoading: { type: Boolean, required: !1, default: !1 },
+    confirmDisabled: { type: Boolean, required: !1, default: !1 },
+    closeOnConfirm: { type: Boolean, required: !1, default: !1 },
+    closeOnEscape: { type: Boolean, required: !1, default: !0 },
+    closeOnOverlay: { type: Boolean, required: !1, default: !1 },
+    minimizable: { type: Boolean, required: !1, default: !0 },
+    destroyOnClose: { type: Boolean, required: !1, default: !1 },
+    draggable: { type: Boolean, required: !1, default: !0 },
+    lockScroll: { type: Boolean, required: !1, default: !0 },
+    top: { type: String, required: !1, default: "15vh" },
+    fullscreen: { type: Boolean, required: !1, default: !1 },
+    showFullscreen: { type: Boolean, required: !1, default: !1 },
+    size: { type: String, required: !1, default: "default" },
+    zIndex: { type: Number, required: !1, default: 2e3 }
+  },
+  emits: ["update:open", "open-change", "confirm", "cancel", "close", "opened", "closed"],
+  setup(m, { expose: t, emit: G }) {
+    let e = 0;
+    const l = m, F = _e(), E = c(!0), L = c(!1), b = c(A), N = c(null), J = Ie({
+      mobile: 0,
+      tablet: 640,
+      laptop: 1024,
+      desktop: 1280
+    }), Q = J.isSmaller("tablet"), fe = M(() => {
+      const o = [];
+      return l.showCancel && o.push("cancel"), l.showConfirm && o.push("confirm"), o;
+    }), me = M(() => ({
+      CancelButton: I(te),
+      ConfirmButton: I(oe)
+    })), ge = M(() => !!(F.footer || l.showFooter)), p = c(!1), q = c(!1);
+    let C = !1, g = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const j = c(
+      l.showFullscreen && Q ? !0 : l.fullscreen
+    ), a = G, $ = M(() => l.open);
+    be(() => {
+      $.value && (p.value = !1);
+    }), re(
+      () => l.open,
+      (o, n) => {
+        if (o) {
+          p.value = !1, q.value = !1, g = document.activeElement instanceof HTMLElement ? document.activeElement : g, n === !1 && a("open-change", !0);
+          return;
+        }
+        n && !p.value && (p.value = !0, a("open-change", !1), a("close", "external"));
+      }
+    ), re(
+      () => l.confirmLoading,
+      (o) => {
+        o ? C = !0 : C && (C = !1, q.value = !1);
+      }
+    ), t({
+      handleMinimize: ne
+    });
+    const v = `qy-dialog-${Math.random().toString(36).slice(2, 11)}`, _ = c(!1);
+    let h = !1;
+    const O = c(null), { x: R, y: T } = Ee(O, {
+      initialValue: {
+        x: 5,
+        y: window.innerHeight - 100 - e * 60
+      },
+      onMove(o) {
+        var n;
+        (n = O.value) == null || n.classList.add("dragging"), document.body.classList.add("qy-dialog--dragging"), R.value = Math.max(
+          0,
+          Math.min(window.innerWidth - 300, o.x)
+        ), T.value = Math.max(
+          0,
+          Math.min(window.innerHeight - 50, o.y)
+        );
+      },
+      onEnd() {
+        var o;
+        (o = O.value) == null || o.classList.remove("dragging"), document.body.classList.remove("qy-dialog--dragging");
+      }
+    }), ye = M(() => ({
+      transform: `translate(${R.value}px, ${T.value}px)`,
+      willChange: "transform"
+    }));
+    function V(o) {
+      const n = o.target, { scrollTop: s, scrollHeight: x, clientHeight: k } = n;
+      E.value = s <= Y, L.value = x - (s + k) <= Y;
+    }
+    function pe() {
+      const o = document.querySelector(`.${v}.el-dialog`);
+      o && (N.value = o, o.addEventListener("scroll", V)), S(), a("opened");
+    }
+    function ee() {
+      j.value = !j.value, S();
+    }
+    function z(o) {
+      l.confirmLoading && o !== "external" || p.value || (p.value = !0, K(), a("update:open", !1), a("open-change", !1), (o === "cancel" || o === "header") && a("cancel"), a("close", o));
+    }
+    function ve() {
+      a("closed"), se(() => {
+        g != null && g.isConnected && g.focus();
+      });
+    }
+    function he(o) {
+      l.showFullscreen && o.detail >= 2 && ee();
+    }
+    function oe() {
+      return ae(
+        ue,
+        {
+          type: "primary",
+          class: "dialog__footerBtn",
+          loading: l.confirmLoading,
+          disabled: l.confirmDisabled || l.confirmLoading || q.value,
+          onClick: le
+        },
+        () => l.confirmText
+      );
+    }
+    function le() {
+      q.value || l.confirmLoading || l.confirmDisabled || (q.value = !0, a("confirm"), l.closeOnConfirm && z("confirm"));
+    }
+    function te() {
+      return ae(
+        ue,
+        { class: "dialog__footerBtn", onClick: () => z("cancel") },
+        () => l.cancelText
+      );
+    }
+    Ce(() => {
+      typeof window.qyDialogMaxZIndex > "u" && (window.qyDialogMaxZIndex = A), S(), document.addEventListener("keydown", U), document.addEventListener("mousedown", X);
+    });
+    function W() {
+      var x, k;
+      const o = (x = document.querySelector(`.${v}`)) == null ? void 0 : x.closest(".el-overlay");
+      if (!o) return !1;
+      const s = Array.from(
+        document.querySelectorAll(".el-overlay")
+      ).filter((r) => window.getComputedStyle(r).display !== "none").map((r, w) => ({
+        overlay: r,
+        order: w,
+        zIndex: Number.parseInt(
+          window.getComputedStyle(r).zIndex || "0",
+          10
+        )
+      }));
+      return s.sort(
+        (r, w) => r.zIndex - w.zIndex || r.order - w.order
+      ), ((k = s.at(-1)) == null ? void 0 : k.overlay) === o;
+    }
+    function U(o) {
+      o.key !== "Escape" || !l.open || !l.closeOnEscape || l.confirmLoading || !W() || (o.preventDefault(), z("escape"));
+    }
+    function X(o) {
+      if (!l.open || !l.closeOnOverlay || l.confirmLoading || !W() || !(o.target instanceof Node))
+        return;
+      const n = document.querySelector(`.${v}.el-dialog`), s = n == null ? void 0 : n.closest(".el-overlay");
+      !n || !s || !s.contains(o.target) || n.contains(o.target) || z("overlay");
+    }
+    function S() {
+      var w;
+      const o = Array.from(
+        document.querySelectorAll(".el-overlay")
+      ).filter((H) => window.getComputedStyle(H).display !== "none" && !H.classList.contains("is-message")), n = (w = document.querySelector(`.${v}`)) == null ? void 0 : w.closest(".el-overlay"), s = document.querySelector(
+        `.${v}.el-dialog`
+      );
+      if (!n || !s) return;
+      const x = A;
+      window.qyDialogMaxZIndex = window.qyDialogMaxZIndex || x;
+      const r = Math.max(
+        window.qyDialogMaxZIndex,
+        ...o.map(
+          (H) => parseInt(window.getComputedStyle(H).zIndex || x.toString())
+        )
+      ) + 2;
+      window.qyDialogMaxZIndex = r, se(() => {
+        n.style.zIndex = r.toString(), s.style.zIndex = (r + 1).toString(), b.value = r + 1;
+      });
+    }
+    ze(() => {
+      var o;
+      document.removeEventListener("keydown", U), document.removeEventListener("mousedown", X), (o = N.value) == null || o.removeEventListener("scroll", V), K();
+    });
+    function K() {
+      if (!h) {
+        _.value = !1;
+        return;
+      }
+      h = !1, e = Math.max(0, e - 1), _.value = !1;
+    }
+    function ne() {
+      var n;
+      const o = (n = document.querySelector(`.${v}`)) == null ? void 0 : n.closest(".el-overlay");
+      !o || !l.open || (_.value ? (_.value = !1, o.style.display = "block", h && (h = !1, e = Math.max(0, e - 1)), S()) : (_.value = !0, o.style.display = "none", h = !0, e += 1, T.value = window.innerHeight - 50 - e * 60));
+    }
+    const ie = { OUTLINE_THRESHOLD: Y, BASE_ZINDEX: A, get minimizedDialogCount() {
+      return e;
+    }, set minimizedDialogCount(o) {
+      e = o;
+    }, props: l, slots: F, isScrollTop: E, isScrollBottom: L, zIndex: b, scrollTarget: N, breakpoints: J, isMobile: Q, layout: fe, layouts: me, hasFooter: ge, closeCommitted: p, confirmLocked: q, get loadingWasActive() {
+      return C;
+    }, set loadingWasActive(o) {
+      C = o;
+    }, get openingFocus() {
+      return g;
+    }, set openingFocus(o) {
+      g = o;
+    }, fullscreen: j, emit: a, open: $, dialogId: v, isMinimized: _, get minimizedRegistered() {
+      return h;
+    }, set minimizedRegistered(o) {
+      h = o;
+    }, minimizedRef: O, minimizedX: R, minimizedY: T, minimizedStyle: ye, handleScroll: V, handleOpened: pe, scale: ee, requestClose: z, handleClosed: ve, handleHeaderClick: he, ConfirmButton: oe, handleConfirm: le, CancelButton: te, isTopmostOverlay: W, handleDocumentKeydown: U, handleDocumentMousedown: X, updateDialogZIndex: S, releaseMinimizedState: K, handleMinimize: ne, get clsx() {
+      return Be;
+    }, get Close() {
+      return De;
+    } };
+    return Object.defineProperty(ie, "__isScriptSetup", { enumerable: !1, value: !0 }), ie;
+  }
+}), Te = { class: "text-lg flex items-center pt-2 pl-[var(--content-padding)]" }, He = { key: 0 }, Ze = { key: 1 }, Ae = {
+  key: 0,
+  class: "icon-[material-symbols--square-outline-rounded]",
+  role: "img",
+  "aria-hidden": "true"
+}, Fe = {
+  key: 1,
+  class: "icon-[tdesign--fullscreen-exit-1]",
+  role: "img",
+  "aria-hidden": "true"
+}, Ne = {
+  key: 0,
+  class: "fixed -right-12 top-2 h-9 w-9 hover:bg-gray-600/80 transition-all"
+}, je = { class: "flex justify-between h-[var(--footer-height)] px-[var(--content-padding)] items-center" }, Re = { class: "flex items-center justify-between w-full pl-1 pr-4 h-full ml-2" }, Ve = { class: "flex items-center gap-2" }, We = { class: "text-sm text-gray-700 truncate max-w-[200px]" }, Ue = { class: "flex items-center gap-2" };
+function Xe(m, t, G, e, l, F) {
+  const E = we, L = xe;
+  return d(), u("div", null, [
+    I(L, {
+      ref: "dialogRef",
+      class: Z(["qy-dialog", [
+        e.props.size === "small" && "[&_.el-dialog__header]:!hidden",
+        e.dialogId
+      ]]),
+      "model-value": e.open,
+      title: e.props.title,
+      width: e.props.width,
+      top: e.props.top,
+      "align-center": "",
+      "append-to-body": "",
+      "destroy-on-close": e.props.destroyOnClose,
+      "lock-scroll": e.props.lockScroll,
+      style: {
+        "--el-dialog-padding-primary": 0
+      },
+      "show-close": !1,
+      "close-on-press-escape": !1,
+      "close-on-click-modal": !1,
+      fullscreen: e.fullscreen,
+      "z-index": e.zIndex,
+      onClosed: e.handleClosed,
+      onOpened: e.handleOpened,
+      draggable: e.props.draggable
+    }, Se({
+      header: B(() => [
+        e.props.size === "default" ? (d(), u(
+          "div",
+          {
+            key: 0,
+            style: P({
+              borderBottom: "1px solid",
+              borderColor: e.isScrollTop ? "transparent" : "var(--block-outline-color)",
+              transition: "border-color .2s linear"
+            }),
+            class: "flex justify-between h-[var(--header-height)]",
+            onDblclick: e.handleHeaderClick
+          },
+          [
+            i("div", Te, [
+              e.slots.header ? e.slots.header ? (d(), u("div", Ze, [
+                D(m.$slots, "header")
+              ])) : y("v-if", !0) : (d(), u(
+                "span",
+                He,
+                de(e.props.title),
+                1
+                /* TEXT */
+              ))
+            ]),
+            i(
+              "div",
+              {
+                class: "flex",
+                onMousedown: t[4] || (t[4] = f(() => {
+                }, ["stop"]))
+              },
+              [
+                e.props.size === "default" && e.props.minimizable ? (d(), u(
+                  "div",
+                  {
+                    key: 0,
+                    class: "qy-dialog__btn qy-dialog__btn--default",
+                    onClick: f(e.handleMinimize, ["stop"]),
+                    onMousedown: t[0] || (t[0] = f(() => {
+                    }, ["stop"]))
+                  },
+                  [...t[7] || (t[7] = [
+                    i(
+                      "span",
+                      {
+                        class: "icon-[material-symbols--minimize] text-xl mb-3",
+                        role: "img",
+                        "aria-hidden": "true"
+                      },
+                      null,
+                      -1
+                      /* CACHED */
+                    )
+                  ])],
+                  32
+                  /* NEED_HYDRATION */
+                )) : y("v-if", !0),
+                e.props.showFullscreen ? (d(), u(
+                  "div",
+                  {
+                    key: 1,
+                    class: "qy-dialog__btn qy-dialog__btn--default",
+                    onClick: f(e.scale, ["stop"]),
+                    onMousedown: t[1] || (t[1] = f(() => {
+                    }, ["stop"]))
+                  },
+                  [
+                    e.fullscreen ? (d(), u("span", Fe)) : (d(), u("span", Ae))
+                  ],
+                  32
+                  /* NEED_HYDRATION */
+                )) : y("v-if", !0),
+                i(
+                  "div",
+                  {
+                    class: "qy-dialog__btn qy-dialog__btn--danger",
+                    onClick: t[2] || (t[2] = f((b) => e.requestClose("header"), ["stop"])),
+                    onMousedown: t[3] || (t[3] = f(() => {
+                    }, ["stop"]))
+                  },
+                  [...t[8] || (t[8] = [
+                    i(
+                      "span",
+                      {
+                        class: "icon-[ri--close-line] text-xl",
+                        role: "img",
+                        "aria-hidden": "true"
+                      },
+                      null,
+                      -1
+                      /* CACHED */
+                    )
+                  ])],
+                  32
+                  /* NEED_HYDRATION */
+                )
+              ],
+              32
+              /* NEED_HYDRATION */
+            )
+          ],
+          36
+          /* STYLE, NEED_HYDRATION */
+        )) : y("v-if", !0)
+      ]),
+      default: B(() => [
+        i(
+          "div",
+          {
+            class: Z(["qy-dialog__wrapper", e.clsx(e.fullscreen && "qy-dialog__wrapper--fullscreen")]),
+            style: P({
+              maxHeight: e.hasFooter ? "calc(100vh - var(--header-height) - var(--footer-height) - var(--sides-gap))" : "calc(100vh - var(--header-height) - var(--sides-gap))",
+              padding: e.props.size === "small" ? "var(--small-content-padding)" : "var(--content-padding)"
+            })
+          },
+          [
+            e.props.size === "small" ? (d(), u("div", Ne, [
+              I(E, {
+                size: 36,
+                class: "cursor-pointer text-gray-100 active:scale-75 rounded-sm transition-all",
+                onClick: t[5] || (t[5] = (b) => e.requestClose("header"))
+              }, {
+                default: B(() => [
+                  I(e.Close)
+                ]),
+                _: 1
+                /* STABLE */
+              })
+            ])) : y("v-if", !0),
+            D(m.$slots, "default")
+          ],
+          6
+          /* CLASS, STYLE */
+        )
+      ]),
+      _: 2
+      /* DYNAMIC */
+    }, [
+      e.props.showFooter && !m.$slots.footer && Array.isArray(e.layout) ? {
+        name: "footer",
+        fn: B(() => [
+          i("div", je, [
+            i("div", null, [
+              D(m.$slots, "footer-left")
+            ]),
+            i(
+              "div",
+              {
+                class: Z([{
+                  "qy-dialog__footer--outline": e.isScrollBottom
+                }, "qy-dialog__footer flex items-center justify-end"])
+              },
+              [
+                e.layout.includes("cancel") ? (d(), ce(e.CancelButton, { key: 0 })) : y("v-if", !0),
+                e.layout.includes("confirm") ? (d(), ce(e.ConfirmButton, { key: 1 })) : y("v-if", !0),
+                D(m.$slots, "footer-append")
+              ],
+              2
+              /* CLASS */
+            )
+          ])
+        ]),
+        key: "0"
+      } : e.hasFooter ? {
+        name: "footer",
+        fn: B(() => [
+          i(
+            "div",
+            {
+              class: Z([{
+                "qy-dialog__footer--outline": e.isScrollBottom
+              }, "qy-dialog__footer px-[var(--content-padding)] min-h-[var(--footer-height)] flex items-center justify-end"])
+            },
+            [
+              D(m.$slots, "footer", {
+                layouts: e.layouts,
+                layoutsNode: Object.values(e.layouts)
+              })
+            ],
+            2
+            /* CLASS */
+          )
+        ]),
+        key: "1"
+      } : void 0
+    ]), 1032, ["class", "model-value", "title", "width", "top", "destroy-on-close", "lock-scroll", "fullscreen", "z-index", "draggable"]),
+    y(" 最小化视图 "),
+    ke(i(
+      "div",
+      {
+        ref: "minimizedRef",
+        class: "fixed left-0 top-0 bg-white rounded shadow-lg cursor-pointer z-[9999] hover:bg-gray-50",
+        style: P([e.minimizedStyle, { width: "300px", height: "50px", "will-change": "transform" }])
+      },
+      [
+        i("div", Re, [
+          i("div", Ve, [
+            t[9] || (t[9] = i(
+              "div",
+              { class: "icon-[mdi--window-restore] text-gray-600" },
+              null,
+              -1
+              /* CACHED */
+            )),
+            i(
+              "span",
+              We,
+              de(e.props.title),
+              1
+              /* TEXT */
+            )
+          ]),
+          i("div", Ue, [
+            i("div", {
+              class: "p-1 hover:bg-gray-200 rounded",
+              onClick: f(e.handleMinimize, ["stop"])
+            }, [...t[10] || (t[10] = [
+              i(
+                "div",
+                { class: "icon-[mdi--window-maximize] text-gray-600" },
+                null,
+                -1
+                /* CACHED */
+              )
+            ])]),
+            i("div", {
+              class: "p-1 hover:bg-red-100 rounded",
+              onClick: t[6] || (t[6] = f((b) => e.requestClose("header"), ["stop"]))
+            }, [...t[11] || (t[11] = [
+              i(
+                "div",
+                { class: "icon-[mdi--close] text-red-600" },
+                null,
+                -1
+                /* CACHED */
+              )
+            ])])
+          ])
+        ])
+      ],
+      4
+      /* STYLE */
+    ), [
+      [Me, e.isMinimized]
+    ])
+  ]);
+}
+const oo = /* @__PURE__ */ Le(Oe, [["render", Xe], ["__file", "D:/xushenz/qy-components/packages/ui/lib/dialog/index.vue"]]);
+export {
+  oo as D
+};