@dazhicheng/ui 1.6.4 → 1.6.6

package/dist/components/tt-modal/src/components/ModalWrapper.vue.js

@@ -1,8 +1,8 @@
-import { defineComponent as d, ref as i, computed as g, watch as x, unref as r, onMounted as w, nextTick as v, withDirectives as S, createElementBlock as _, openBlock as k, normalizeClass as y, normalizeStyle as B, renderSlot as C } from "vue";
+import { defineComponent as _, ref as c, computed as b, watch as p, unref as r, nextTick as m, onMounted as B, onBeforeUnmount as C, withDirectives as L, createElementBlock as O, openBlock as k, normalizeClass as A, normalizeStyle as D, renderSlot as E } from "vue";
 import "../../../../node_modules/.pnpm/vue-types@5.1.3_vue@3.5.21_typescript@5.9.3_/node_modules/vue-types/shim/index.modern.js";
-import { useDesign as H } from "../../../../packages/hooks/src/useDesign.js";
+import { useDesign as T } from "../../../../packages/hooks/src/useDesign.js";
 import "axios";
-import { vLoading as T } from "element-plus";
+import { vLoading as z } from "element-plus";
 import "dayjs";
 import "numeral";
 import "xe-utils";
@@ -16,48 +16,79 @@ import "../../../../node_modules/.pnpm/crypto-js@4.2.0/node_modules/crypto-js/pa
 import "lodash-es";
 import { useIsScroll as $ } from "../../../../packages/hooks/src/useIsScroll.js";
 import "vue-router";
-import { basicProps as b } from "../props.js";
-const V = /* @__PURE__ */ d({
+import { basicProps as I } from "../props.js";
+import { MODAL_OVERLAY_CONTAINED_CLASS as N } from "../utils/resolve-modal-target.js";
+const se = /* @__PURE__ */ _({
   name: "TtWrapper",
   __name: "ModalWrapper",
-  props: b,
+  props: {
+    ...I,
+    /** 区域遮罩：高度相对挂载容器，不再按整屏 vh */
+    contained: { type: Boolean, default: !1 }
+  },
   emits: ["is-scroll"],
-  setup(p, { expose: m, emit: s }) {
-    const t = p, n = s, l = i(window.innerHeight * 0.7), { prefixCls: a } = H("modal-wrapper"), o = i(), c = g(() => ({
-      // minHeight: `${props.minHeight}px`,
-      maxHeight: t.isBottom ? "calc(100vh - 60px - 44px - 33px)" : `${t.height || l.value}px`,
-      height: t.height > 0 ? `${t.height}px !important` : "auto"
-      // overflow: 'auto',
-      // padding: '12px 16px',
-    }));
-    function f() {
+  setup(h, { expose: f, emit: d }) {
+    const t = h, u = d, s = c(Math.floor(window.innerHeight * 0.7)), { prefixCls: g } = T("modal-wrapper"), o = c();
+    let n;
+    function l() {
+      var i;
+      const e = r(o);
+      return ((i = e == null ? void 0 : e.closest) == null ? void 0 : i.call(e, ".el-overlay")) || null;
+    }
+    function a() {
+      const e = l(), i = t.contained || !!(e != null && e.classList.contains(N)), y = e && e.clientHeight > 0 ? e.clientHeight : window.innerHeight, M = i ? 40 : Math.floor(window.innerHeight * 0.15), R = i ? 24 : 0, S = Math.max(160, y - M - R - 116);
+      s.value = S;
+    }
+    const v = b(() => {
+      if (t.contained && !(t.height > 0))
+        return {
+          maxHeight: "none",
+          height: "auto"
+        };
+      const e = t.height > 0 ? Math.min(t.height, s.value) : s.value;
+      return {
+        maxHeight: t.isBottom ? t.contained ? "calc(100% - 137px)" : "calc(100vh - 60px - 44px - 33px)" : `${e}px`,
+        height: t.height > 0 ? `${t.height}px !important` : "auto"
+      };
+    });
+    function x() {
       r(o) && r(o).scrollTo(0, 1e6);
     }
-    const { hasScrollbar: h, update: u } = $();
-    return x(
-      () => r(h),
+    const { hasScrollbar: w, update: H } = $();
+    return p(
+      () => r(w),
       (e) => {
-        n("is-scroll", e);
+        u("is-scroll", e);
+      }
+    ), p(
+      () => t.contained,
+      () => {
+        m(() => a());
       }
-    ), w(() => {
-      v(() => {
-        u(o);
+    ), B(() => {
+      m(() => {
+        H(o), a();
+        const e = l();
+        e && typeof ResizeObserver < "u" && (n = new ResizeObserver(() => a()), n.observe(e));
       });
-    }), m({
-      onScrollBottom: f,
+    }), C(() => {
+      n == null || n.disconnect(), n = void 0;
+    }), f({
+      onScrollBottom: x,
+      setModalHeight: a,
       elm: o
-    }), (e, z) => S((k(), _("div", {
+    }), (e, i) => L((k(), O("div", {
       ref_key: "wrapperRef",
       ref: o,
-      style: B(c.value),
-      class: y([r(a)])
+      style: D(v.value),
+      class: A([r(g)])
     }, [
-      C(e.$slots, "default")
+      E(e.$slots, "default")
     ], 6)), [
-      [r(T), e.loading]
+      [r(z), e.loading]
     ]);
   }
 });
 export {
-  V as default
+  se as default
 };

package/dist/components/tt-modal/src/hooks/useModalRender.js

@@ -1,30 +1,31 @@
 import { useStore as y } from "@tanstack/vue-store";
-import { reactive as x, ref as T, defineComponent as p, provide as _, nextTick as v, h as u, inject as S, onMounted as g, watch as k, render as h } from "vue";
-import { RouterView as E } from "vue-router";
-import O from "../RenderModal.vue.js";
+import { reactive as w, ref as x, defineComponent as M, provide as _, nextTick as v, h as i, inject as g, onMounted as E, watch as S, render as h } from "vue";
+import { RouterView as k } from "vue-router";
+import T from "../RenderModal.vue.js";
 /* empty css                  */
 import { ModalApi as b } from "../utils/modal-api.js";
-const P = Symbol("Tt_MODAL_INJECT"), R = {};
-function D(r = {}, a = P) {
-  var l;
-  const { connectedComponent: d } = r;
+import { resolveModalTarget as P } from "../utils/resolve-modal-target.js";
+const R = Symbol("Tt_MODAL_INJECT"), V = {};
+function F(n = {}, c = R) {
+  var u;
+  const { connectedComponent: d } = n;
   if (d) {
-    const t = x({}), o = T(!0);
-    return [p(
-      (m, { attrs: A, slots: C }) => (_(a, {
-        extendApi(w) {
-          Object.setPrototypeOf(t, w);
+    const e = w({}), a = x(!0);
+    return [M(
+      (m, { attrs: A, slots: C }) => (_(c, {
+        extendApi(O) {
+          Object.setPrototypeOf(e, O);
         },
-        options: r,
+        options: n,
         async reCreateModal() {
-          o.value = !1, await v(), o.value = !0;
+          a.value = !1, await v(), a.value = !0;
         }
-      }), V(t, {
+      }), L(e, {
         ...m,
         ...A,
         ...C
-      }), () => u(
-        o.value ? d : "div",
+      }), () => i(
+        a.value ? d : "div",
         {
           ...m,
           ...A
@@ -35,97 +36,97 @@ function D(r = {}, a = P) {
         name: "TtModal",
         inheritAttrs: !1
       }
-    ), t];
+    ), e];
   }
-  const n = S(a, {}), e = {
-    ...R,
-    ...n.options,
-    ...r
+  const o = g(c, {}), t = {
+    ...V,
+    ...o.options,
+    ...n
   };
-  e.onVisibleChange = (t) => {
-    var o, c, m;
-    (o = r.onVisibleChange) == null || o.call(r, t), (m = (c = n.options) == null ? void 0 : c.onVisibleChange) == null || m.call(c, t);
+  t.onVisibleChange = (e) => {
+    var a, r, m;
+    (a = n.onVisibleChange) == null || a.call(n, e), (m = (r = o.options) == null ? void 0 : r.onVisibleChange) == null || m.call(r, e);
   };
-  const s = e.onClosed;
-  e.onClosed = () => {
-    var t;
-    s == null || s(), e.destroyOnClose && ((t = n.reCreateDrawer) == null || t.call(n));
+  const s = t.onClosed;
+  t.onClosed = () => {
+    var e;
+    s == null || s(), t.destroyOnClose && ((e = o.reCreateDrawer) == null || e.call(o));
   };
-  const f = new b(e), i = f;
-  i.useStore = (t) => y(f.store, t);
-  const M = p(
-    (t, { attrs: o, slots: c }) => () => u(
-      O,
+  const f = new b(t), l = f;
+  l.useStore = (e) => y(f.store, e);
+  const p = M(
+    (e, { attrs: a, slots: r }) => () => i(
+      T,
       {
-        ...t,
-        ...o,
-        modalApi: i
+        ...e,
+        ...a,
+        modalApi: l
       },
-      c
+      r
     ),
     {
       name: "TtModal",
       inheritAttrs: !1
     }
   );
-  return (l = n.extendApi) == null || l.call(n, i), [M, i];
+  return (u = o.extendApi) == null || u.call(o, l), [p, l];
 }
-function F(r, a, d) {
-  const n = new b(d), e = n;
-  e.useStore = (l) => y(n.store, l);
+function K(n, c, d) {
+  const o = new b(d), t = o;
+  t.useStore = (e) => y(o.store, e);
   const s = document.createElement("div");
-  document.body.appendChild(s);
-  const f = p(
-    (l, { slots: t }) => (g(() => {
-      d && e.setModalProps(d), e.openModal();
-    }), k(
+  (d.appendToBody ? document.body : P() ?? document.body).appendChild(s);
+  const l = M(
+    (e, { slots: a }) => (E(() => {
+      d && t.setModalProps(d), t.openModal();
+    }), S(
       () => {
-        var o;
-        return (o = e.getVisible) == null ? void 0 : o.value;
+        var r;
+        return (r = t.getVisible) == null ? void 0 : r.value;
       },
-      (o) => {
-        o || (h(null, s), s.remove());
+      (r) => {
+        r || (h(null, s), s.remove());
       }
-    ), () => u(
-      O,
+    ), () => i(
+      T,
       {
-        ...l,
-        modalApi: e
+        ...e,
+        modalApi: t
       },
-      t
+      a
     )),
     {
       name: "TtModal",
       inheritAttrs: !1
     }
-  ), i = u(a, {}), M = u(
-    E,
+  ), p = i(c, {}), u = i(
+    k,
     {},
-    () => u(
-      f,
+    () => i(
+      l,
       {
         ...d
       },
       {
-        default: () => i
+        default: () => p
       }
     )
   );
-  return M.appContext = r._context, h(M, s), e;
+  return u.appContext = n._context, h(u, s), t;
 }
-async function V(r, a) {
-  var e;
-  if (!a || Object.keys(a).length === 0)
+async function L(n, c) {
+  var t;
+  if (!c || Object.keys(c).length === 0)
     return;
   await v();
-  const d = (e = r == null ? void 0 : r.store) == null ? void 0 : e.state;
+  const d = (t = n == null ? void 0 : n.store) == null ? void 0 : t.state;
   if (!d)
     return;
-  const n = new Set(Object.keys(d));
-  for (const s of Object.keys(a))
-    n.has(s) && ["class"].includes(s);
+  const o = new Set(Object.keys(d));
+  for (const s of Object.keys(c))
+    o.has(s) && ["class"].includes(s);
 }
 export {
-  F as showTtModal,
-  D as useModalRender
+  K as showTtModal,
+  F as useModalRender
 };

package/dist/components/tt-modal/src/typing.d.ts

@@ -152,6 +152,11 @@ export type ModalRenderState = {
      * @default false
      */
     isBottom?: boolean;
+    /**
+     * 点击遮罩是否关闭弹窗
+     * @default false
+     */
+    closeOnClickModal?: boolean;
 } & Partial<DialogProps>;
 export type ModalApiOptions = ModalRenderState & Partial<DialogProps> & {
     /**

package/dist/components/tt-modal/src/utils/modal-api.js

@@ -4,10 +4,10 @@ var s = (o, t, e) => b(o, typeof t != "symbol" ? t + "" : t, e);
 import "axios";
 import "element-plus";
 import { isElement as S, isFunction as n } from "../../../../packages/utils/src/is.js";
-import { computed as w } from "vue";
+import { computed as C } from "vue";
 import "dayjs";
 import "numeral";
-import { bindMethods as C } from "../../../../packages/utils/src/tool.js";
+import { bindMethods as w } from "../../../../packages/utils/src/tool.js";
 import { mergeWithArrayOverride as m } from "../../../../packages/utils/src/merge.js";
 import "../../../../node_modules/.pnpm/decimal.js@10.6.0/node_modules/decimal.js/decimal.js";
 import "../../../../node_modules/.pnpm/crypto-js@4.2.0/node_modules/crypto-js/aes.js";
@@ -50,7 +50,7 @@ class _ {
      * 获取弹窗的可见状态
      * @returns 弹窗的可见状态
      */
-    s(this, "getVisible", w(() => this.state.visible));
+    s(this, "getVisible", C(() => this.state.visible));
     const {
       connectedComponent: e,
       onVisibleChange: i,
@@ -87,7 +87,9 @@ class _ {
       cancelButtonProps: {},
       isBottom: !1,
       resizeChange: void 0,
-      modal: D.showMask
+      modal: D.showMask,
+      /** 点击遮罩是否关闭，默认 false */
+      closeOnClickModal: !1
     };
     this.store = new k(m(f, g), {
       onUpdate: () => {
@@ -95,7 +97,7 @@ class _ {
         const l = this.store.state;
         this.state = l, l.visible !== ((h = this.state) == null ? void 0 : h.visible) && ((d = (c = this.api).onVisibleChange) == null || d.call(c, !!l.visible));
       }
-    }), this.state = this.store.state, this.api = { onVisibleChange: i, onClose: a, onClosed: r, onOk: p, onReceiveSharedData: u }, C(this);
+    }), this.state = this.store.state, this.api = { onVisibleChange: i, onClose: a, onClosed: r, onOk: p, onReceiveSharedData: u }, w(this);
   }
   /**
    * 挂载弹窗实例和API接口

package/dist/components/tt-modal/src/utils/resolve-modal-target.d.ts

@@ -0,0 +1,19 @@
+export declare const MODAL_OVERLAY_CONTAINED_CLASS = "tt-modal-overlay--contained";
+/** 注入全局样式，避免仅依赖 Vue SFC / scopecss 导致 absolute 未生效 */
+export declare function ensureContainedOverlayStyle(doc?: Document): void;
+/** 用内联样式强制区域遮罩，压过 EP 的 position:fixed（含内部 overlay-dialog） */
+export declare function applyContainedOverlayInline(uid: string | number, doc?: Document): void;
+/** KeepAlive / 切页：隐藏已 Teleport 出去的遮罩，避免挡其它页。找到并隐藏则 true */
+export declare function suspendOverlayByUid(uid: string | number, doc?: Document): boolean;
+/**
+ * 打开后立刻切页时，遮罩可能晚一帧才挂上。监听 DOM，出现后立刻隐藏。
+ * 返回取消函数。
+ */
+export declare function watchOverlayThenSuspend(uid: string | number, doc?: Document, timeoutMs?: number): () => void;
+/** KeepAlive / 切回：恢复未关闭的弹窗遮罩 */
+export declare function resumeOverlayByUid(uid: string | number, doc?: Document): void;
+/**
+ * 解析弹窗 Teleport 目标。无可用节点时返回 null，由调用方回退 body。
+ * 子应用只要处在 micro 环境，尽量返回内容区节点（含 micro-app-body），以便加 contained class。
+ */
+export declare function resolveModalTarget(): HTMLElement | null;

package/dist/components/tt-modal/src/utils/resolve-modal-target.js

@@ -0,0 +1,153 @@
+const a = "tt-modal-overlay--contained", u = "tt-modal-overlay-contained-style-v2";
+function y(t = document) {
+  var r;
+  if (typeof t > "u") return;
+  const o = `
+.el-overlay.${a},
+.el-overlay.${a} .el-overlay-dialog {
+  position: absolute !important;
+  inset: 0 !important;
+  height: 100% !important;
+}
+.el-overlay.${a} .el-overlay-dialog {
+  overflow: auto !important;
+}
+.el-overlay.${a} .tt-ui-modal.el-dialog {
+  --tt-modal-contained-top: 40px;
+  --tt-modal-contained-bottom: 24px;
+  margin-top: var(--tt-modal-contained-top) !important;
+  margin-bottom: var(--tt-modal-contained-bottom) !important;
+  max-height: calc(100% - var(--tt-modal-contained-top) - var(--tt-modal-contained-bottom)) !important;
+  display: flex !important;
+  flex-direction: column !important;
+  overflow: hidden !important;
+}
+.el-overlay.${a} .tt-ui-modal.el-dialog .el-dialog__header,
+.el-overlay.${a} .tt-ui-modal.el-dialog .el-dialog__footer {
+  flex-shrink: 0;
+}
+.el-overlay.${a} .tt-ui-modal.el-dialog .el-dialog__body {
+  display: flex !important;
+  flex: 1 1 auto !important;
+  flex-direction: column !important;
+  min-height: 0 !important;
+  overflow: hidden !important;
+}
+.el-overlay.${a} .tt-ui-modal.el-dialog .tt-modal-wrapper {
+  flex: 1 1 auto !important;
+  min-height: 0 !important;
+  max-height: none !important;
+  overflow: auto !important;
+}
+`.trim();
+  let e = t.getElementById(u);
+  if (e) {
+    e.textContent = o;
+    return;
+  }
+  (r = t.getElementById("tt-modal-overlay-contained-style")) == null || r.remove(), e = t.createElement("style"), e.id = u, e.textContent = o;
+  const n = t.head || t.documentElement;
+  n == null || n.appendChild(e);
+}
+function p(t) {
+  t.style.setProperty("position", "absolute", "important"), t.style.setProperty("top", "0", "important"), t.style.setProperty("right", "0", "important"), t.style.setProperty("bottom", "0", "important"), t.style.setProperty("left", "0", "important"), t.style.setProperty("height", "100%", "important");
+}
+function f(t, o = document) {
+  const e = o.querySelector(`.el-overlay.tt-id-${t}`);
+  if (!e) return;
+  const n = !!e.closest("micro-app-body");
+  if (!e.classList.contains(a) && !n) return;
+  p(e);
+  const r = e.querySelector(".el-overlay-dialog");
+  r && p(r);
+}
+function m(t, o = document) {
+  const e = o.querySelector(`.el-overlay.tt-id-${t}`);
+  return e ? (e.dataset.ttModalSuspended = "1", e.style.setProperty("display", "none", "important"), !0) : !1;
+}
+function b(t, o = document, e = 3e3) {
+  if (m(t, o)) return () => {
+  };
+  const n = o.body || o.documentElement;
+  if (!n) return () => {
+  };
+  let r = !1;
+  const i = () => {
+    r || (r = !0, s.disconnect(), clearTimeout(d));
+  }, s = new MutationObserver(() => {
+    m(t, o) && i();
+  });
+  s.observe(n, { childList: !0, subtree: !0 });
+  const d = window.setTimeout(i, e);
+  return i;
+}
+function C(t, o = document) {
+  const e = o.querySelector(`.el-overlay.tt-id-${t}`);
+  !e || e.dataset.ttModalSuspended !== "1" || (delete e.dataset.ttModalSuspended, e.style.removeProperty("display"), f(t, o));
+}
+function v(t) {
+  return t.isConnected ? t.getClientRects().length > 0 : !1;
+}
+function g(t) {
+  return t.isConnected ? (t.clientHeight || t.getBoundingClientRect().height) >= 48 : !1;
+}
+function c(t) {
+  return !!t.closest("micro-app-body");
+}
+function l(t, o = !0) {
+  return !t || !t.isConnected || o && !g(t) || o && !v(t) ? null : t;
+}
+function h(t) {
+  getComputedStyle(t).position === "static" && (t.style.position = "relative");
+}
+function _() {
+  const t = window.__MICRO_APP_NAME__;
+  if (t) {
+    const i = typeof CSS < "u" && CSS.escape ? CSS.escape(t) : t, s = document.querySelector(
+      `micro-app[name="${i}"] micro-app-body #app`
+    ), d = l(s, !1);
+    if (d) return d;
+  }
+  const o = document.querySelector("#app");
+  if (o) {
+    const i = l(o, !1);
+    return i || o;
+  }
+  const e = document.querySelector("micro-app-body #app");
+  if (e) {
+    const i = l(e, !1);
+    if (i) return i;
+  }
+  const n = document.body;
+  return n && (n.tagName === "MICRO-APP-BODY" || c(n)) ? n : document.querySelector("micro-app-body");
+}
+function S() {
+  const t = document.querySelector("#app-content");
+  if (t && !c(t)) {
+    const e = l(t, !0);
+    if (e) return e;
+  }
+  const o = document.querySelectorAll("#app");
+  for (const e of Array.from(o)) {
+    const n = e;
+    if (c(n)) continue;
+    const r = l(n, !0);
+    if (r) return r;
+  }
+  return null;
+}
+function A() {
+  if (typeof document > "u") return null;
+  y();
+  const t = window.__MICRO_APP_ENVIRONMENT__ ? _() : S();
+  return t && h(t), t;
+}
+export {
+  a as MODAL_OVERLAY_CONTAINED_CLASS,
+  f as applyContainedOverlayInline,
+  y as ensureContainedOverlayStyle,
+  A as resolveModalTarget,
+  C as resumeOverlayByUid,
+  m as suspendOverlayByUid,
+  b as watchOverlayThenSuspend
+};