@dazhicheng/ui 1.6.19 → 1.6.21

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

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

package/dist/components/tt-modal/src/index.js

@@ -1,17 +1,19 @@
-import { inject as s } from "vue";
+import { inject as e } from "vue";
 import { showTtModal as M } from "./hooks/useModalRender.js";
+import { setModalHostApp as d } from "./utils/modal-host-app.js";
 const t = Symbol("SHOW_MODAL");
-function a(o) {
-  const r = (n, e) => M(o, n, e);
+function f(o) {
+  d(o);
+  const r = (n, s) => M(o, n, s);
   o.provide(t, r);
 }
-function i() {
-  const o = s(t);
+function m() {
+  const o = e(t);
   if (!o)
     throw new Error("[TtModal]: useShowModal() 需要先调用 setupModal(app) 进行注册");
   return o;
 }
 export {
-  a as setupModal,
-  i as useShowModal
+  f as setupModal,
+  m as useShowModal
 };

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

@@ -14,6 +14,8 @@ export declare class ModalApi {
     private api;
     /** 弹窗的当前状态，使用Partial<ModalRenderState>类型 */
     state: ModalRenderState;
+    /** 可见状态的响应式镜像：store.state 是普通对象，computed 直接读它取不到变化 */
+    private visibleRef;
     /** 弹窗的实例方法，用于处理弹窗的各种操作 */
     private methods?;
     /** 构造函数，初始化弹窗的API接口和状态 */
@@ -55,8 +57,7 @@ export declare class ModalApi {
     openModal<T>(visible?: boolean, data?: T): void;
     /**
      * 设置弹窗的属性
-     * @param props - 属性对象
-     * @returns 当前实例
+     * @param props - 属性对象，传 visible 即按传入值开关弹窗
      */
     setModalProps(props: Partial<ModalRenderState>): Promise<void>;
     /**
@@ -81,11 +82,16 @@ export declare class ModalApi {
      * 关闭弹窗
      */
     closeModal(): void;
+    /**
+     * 关闭页面上所有已打开的弹窗，不限打开方式。
+     * 走 ESC / 取消按钮同一条路径，各弹窗的 closeFunc 拦截仍生效。
+     */
+    closeAll(): void;
     /**
      * 获取弹窗的可见状态
      * @returns 弹窗的可见状态
      */
-    getVisible: import('vue').ComputedRef<boolean | undefined>;
+    getVisible: import('vue').ComputedRef<boolean>;
     /**
      * 重置弹窗高度
      */

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

@@ -1,13 +1,13 @@
-var v = Object.defineProperty;
-var b = (o, t, e) => t in o ? v(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
-var s = (o, t, e) => b(o, typeof t != "symbol" ? t + "" : t, e);
+var b = Object.defineProperty;
+var S = (o, t, e) => t in o ? b(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var s = (o, t, e) => S(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 C } from "vue";
+import { isElement as C, isFunction as n } from "../../../../packages/utils/src/is.js";
+import { shallowRef as w, computed as k } from "vue";
 import "dayjs";
 import "numeral";
-import { bindMethods as w } from "../../../../packages/utils/src/tool.js";
+import { bindMethods as y } 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";
@@ -15,10 +15,11 @@ import "../../../../node_modules/.pnpm/crypto-js@4.2.0/node_modules/crypto-js/en
 import "../../../../node_modules/.pnpm/crypto-js@4.2.0/node_modules/crypto-js/mode-ecb.js";
 import "../../../../node_modules/.pnpm/crypto-js@4.2.0/node_modules/crypto-js/pad-pkcs7.js";
 import "lodash-es";
-import { Store as k } from "@tanstack/vue-store";
-import { useDebounceFn as y } from "@vueuse/core";
-import { GlobalConfig as D } from "../../../../hooks/useSetup.js";
-class _ {
+import { Store as M } from "@tanstack/vue-store";
+import { useDebounceFn as D } from "@vueuse/core";
+import { GlobalConfig as R } from "../../../../hooks/useSetup.js";
+import { closeAllModals as B } from "./modal-stack.js";
+class K {
   /** 构造函数，初始化弹窗的API接口和状态 */
   constructor(t = {}) {
     /** 共享数据对象，用于在组件间传递数据 */
@@ -31,17 +32,17 @@ class _ {
     s(this, "api");
     /** 弹窗的当前状态，使用Partial<ModalRenderState>类型 */
     s(this, "state");
+    /** 可见状态的响应式镜像：store.state 是普通对象，computed 直接读它取不到变化 */
+    s(this, "visibleRef", w(!1));
     /** 弹窗的实例方法，用于处理弹窗的各种操作 */
     s(this, "methods");
     /**
      * 确认操作
      */
-    s(this, "onOk", y(async () => {
+    s(this, "onOk", D(async () => {
       var t, e;
       try {
-        this.changeOkLoading(!0), this.api.onOk && await ((e = (t = this.api).onOk) == null ? void 0 : e.call(t));
-      } catch (i) {
-        throw new Error(i);
+        this.changeOkLoading(!0), await ((e = (t = this.api).onOk) == null ? void 0 : e.call(t));
       } finally {
         this.changeOkLoading(!1);
       }
@@ -50,16 +51,16 @@ class _ {
      * 获取弹窗的可见状态
      * @returns 弹窗的可见状态
      */
-    s(this, "getVisible", C(() => this.state.visible));
+    s(this, "getVisible", k(() => this.visibleRef.value));
     const {
       connectedComponent: e,
       onVisibleChange: i,
       onClose: a,
-      onClosed: r,
+      onClosed: l,
       onOk: p,
-      onReceiveSharedData: u,
-      ...f
-    } = t, g = {
+      onReceiveSharedData: f,
+      ...u
+    } = t, v = {
       visible: !1,
       title: "",
       cancelText: "取消",
@@ -87,17 +88,17 @@ class _ {
       cancelButtonProps: {},
       isBottom: !1,
       resizeChange: void 0,
-      modal: D.showMask,
+      modal: R.showMask,
       /** 点击遮罩是否关闭，默认 false */
       closeOnClickModal: !1
     };
-    this.store = new k(m(f, g), {
+    this.store = new M(m(u, v), {
       onUpdate: () => {
         var h, c, d;
-        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));
+        const r = this.store.state, g = (h = this.state) == null ? void 0 : h.visible;
+        this.state = r, r.visible !== g && (this.visibleRef.value = !!r.visible, (d = (c = this.api).onVisibleChange) == null || d.call(c, !!r.visible));
       }
-    }), this.state = this.store.state, this.api = { onVisibleChange: i, onClose: a, onClosed: r, onOk: p, onReceiveSharedData: u }, w(this);
+    }), this.state = this.store.state, this.visibleRef.value = !!this.state.visible, this.api = { onVisibleChange: i, onClose: a, onClosed: l, onOk: p, onReceiveSharedData: f }, y(this);
   }
   /**
    * 挂载弹窗实例和API接口
@@ -111,13 +112,13 @@ class _ {
    * 关闭弹窗
    */
   async close() {
-    var a, r;
+    var a, l;
     const t = document.querySelector('.viewer-container[aria-modal="true"]');
-    if (S(t))
+    if (C(t))
       return;
     const { closeFunc: e } = this.state;
     let i = !0;
-    e && n(e) && (i = await e()), this.setState({ visible: !i }), (r = (a = this.api).onClosed) == null || r.call(a);
+    e && n(e) && (i = await e()), this.setState({ visible: !i }), (l = (a = this.api).onClosed) == null || l.call(a);
   }
   /**
    * 取消操作
@@ -152,16 +153,14 @@ class _ {
   }
   /**
    * 设置弹窗的属性
-   * @param props - 属性对象
-   * @returns 当前实例
+   * @param props - 属性对象，传 visible 即按传入值开关弹窗
    */
   async setModalProps(t) {
-    if (this.setState(t), Reflect.has(t, "visible"))
-      if (!t.visible && this.state.closeFunc && n(this.state.closeFunc)) {
-        let e = !0;
-        e = await this.state.closeFunc(), this.setState({ visible: !e });
-      } else
-        this.setState({ visible: !t.visible });
+    if (this.setState(t), !Reflect.has(t, "visible") || t.visible) return;
+    const { closeFunc: e } = this.state;
+    if (!e || !n(e)) return;
+    const i = await e();
+    this.setState({ visible: !i });
   }
   /**
    * 设置弹窗的加载状态
@@ -194,6 +193,13 @@ class _ {
   closeModal() {
     this.setState({ visible: !1 });
   }
+  /**
+   * 关闭页面上所有已打开的弹窗，不限打开方式。
+   * 走 ESC / 取消按钮同一条路径，各弹窗的 closeFunc 拦截仍生效。
+   */
+  closeAll() {
+    B();
+  }
   /**
    * 重置弹窗高度
    */
@@ -210,5 +216,5 @@ class _ {
   }
 }
 export {
-  _ as ModalApi
+  K as ModalApi
 };

package/dist/components/tt-modal/src/utils/modal-close-transition.d.ts

@@ -0,0 +1,13 @@
+import { ModalApi } from './modal-api';
+/**
+ * 订阅弹窗关闭动画结束
+ * @param api 弹窗 api 实例
+ * @param listener 动画结束后的回调
+ * @returns 取消订阅
+ */
+export declare function onModalCloseTransitionEnd(api: ModalApi, listener: () => void): () => void;
+/**
+ * 通知弹窗关闭动画已结束，由 RenderModal 在 ElDialog 的 closed 事件里调用
+ * @param api 弹窗 api 实例
+ */
+export declare function emitModalCloseTransitionEnd(api: ModalApi): void;

package/dist/components/tt-modal/src/utils/modal-close-transition.js

@@ -0,0 +1,13 @@
+const o = /* @__PURE__ */ new WeakMap();
+function s(t, e) {
+  const n = o.get(t) ?? /* @__PURE__ */ new Set();
+  return o.set(t, n), n.add(e), () => n.delete(e);
+}
+function a(t) {
+  var e;
+  (e = o.get(t)) == null || e.forEach((n) => n());
+}
+export {
+  a as emitModalCloseTransitionEnd,
+  s as onModalCloseTransitionEnd
+};

package/dist/components/tt-modal/src/utils/modal-host-app.d.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue';
+/** 记录宿主应用实例，由 setupModal 调用 */
+export declare function setModalHostApp(app: App): void;
+/** 取当前作用域的宿主应用实例，未注册时返回 undefined */
+export declare function getModalHostApp(): App | undefined;

package/dist/components/tt-modal/src/utils/modal-host-app.js

@@ -0,0 +1,12 @@
+import { getModalScopeKey as t } from "./modal-scope.js";
+const o = /* @__PURE__ */ new Map();
+function n(p) {
+  o.set(t(), p);
+}
+function s() {
+  return o.get(t());
+}
+export {
+  s as getModalHostApp,
+  n as setModalHostApp
+};

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

@@ -0,0 +1,21 @@
+/**
+ * 微前端隔离工具。组件库被抽成共享依赖时多个子应用共用模块级状态，
+ * 因此模块级注册表都要按子应用分桶。
+ */
+/** 当前作用域标识：子应用用 micro-app name，宿主页面用 host */
+export declare function getModalScopeKey(): string;
+/**
+ * 取真实 document。沙箱里的 document 代理会把查询范围收窄到子应用内，
+ * 从真实节点回溯才能看到其它子应用的弹窗；shadowDOM 模式下退回传入值。
+ * @param doc 起点 document
+ */
+export declare function resolveScanDocument(doc: Document): Document;
+/** 当前可用的 document，SSR 下返回 undefined */
+export declare function getClientDocument(): Document | undefined;
+/**
+ * 两个节点是否属于同一个子应用（宿主页面节点视作同一作用域）。
+ * 跨子应用复用挂载容器会让弹窗随对方卸载一起消失。
+ * @param a 节点 a
+ * @param b 节点 b
+ */
+export declare function isSameMicroAppScope(a: HTMLElement, b: HTMLElement): boolean;

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

@@ -0,0 +1,20 @@
+function c() {
+  return typeof window > "u" ? "host" : window.__MICRO_APP_NAME__ || "host";
+}
+function u(t) {
+  var n;
+  const o = t.body ?? t.documentElement, e = (n = o == null ? void 0 : o.getRootNode) == null ? void 0 : n.call(o);
+  return e instanceof Document ? e : t;
+}
+function i() {
+  return typeof document > "u" ? void 0 : document;
+}
+function r(t, o) {
+  return t.closest("micro-app-body") === o.closest("micro-app-body");
+}
+export {
+  i as getClientDocument,
+  c as getModalScopeKey,
+  r as isSameMicroAppScope,
+  u as resolveScanDocument
+};

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

@@ -0,0 +1,23 @@
+import { ModalApiOptions, TtModalExtendedModalApi } from '../typing';
+/** 命令式打开弹窗的配置，与 useModalRender 入参一致：内容组件放 connectedComponent */
+export type OpenTtModalOptions = ModalApiOptions;
+/**
+ * 命令式打开弹窗
+ * useShowModal 内部是 inject 只能在 setup 用；这里从 setupModal 记录的实例取 appContext。
+ * @param options 弹窗配置，内容组件放 connectedComponent
+ * @returns 弹窗 api
+ */
+export declare function openTtModal(options?: OpenTtModalOptions): TtModalExtendedModalApi;
+/**
+ * 关闭命令式打开的弹窗
+ * @param target 指定要关闭的弹窗 api，缺省关闭最上层那个
+ */
+export declare function closeTtModal(target?: TtModalExtendedModalApi): void;
+/** 关闭当前作用域下所有已打开的弹窗，不限于 ttModal.open 开的 */
+export declare function closeAllTtModal(): void;
+/** 命令式弹窗入口，用法见文档 */
+export declare const ttModal: {
+    open: typeof openTtModal;
+    close: typeof closeTtModal;
+    closeAll: typeof closeAllTtModal;
+};

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

@@ -0,0 +1,51 @@
+import { defineComponent as r } from "vue";
+import { showTtModal as d } from "../hooks/useModalRender.js";
+import { getModalHostApp as i } from "./modal-host-app.js";
+import { getModalScopeKey as f } from "./modal-scope.js";
+import { closeAllModals as M } from "./modal-stack.js";
+const m = r({
+  name: "TtModalEmptyContent",
+  setup: () => () => null
+}), c = /* @__PURE__ */ new Map();
+function l() {
+  const n = f(), o = c.get(n);
+  if (o) return o;
+  const t = [];
+  return c.set(n, t), t;
+}
+function s(n) {
+  c.forEach((o) => {
+    const t = o.indexOf(n);
+    t !== -1 && o.splice(t, 1);
+  });
+}
+function u(n = {}) {
+  const o = i();
+  if (!o)
+    throw new Error("[TtModal]: 命令式打开弹窗需要先 app.use(TtUI) 或调用 setupModal(app) 完成注册");
+  const { connectedComponent: t, onClosed: e, ...a } = n, p = d(o, t ?? m, {
+    ...a,
+    onClosed() {
+      s(p), e == null || e();
+    }
+  });
+  return l().push(p), p;
+}
+function T(n) {
+  const o = l(), t = n ?? o[o.length - 1];
+  t && (s(t), t.close());
+}
+function g() {
+  l().splice(0), M();
+}
+const x = {
+  open: u,
+  close: T,
+  closeAll: g
+};
+export {
+  g as closeAllTtModal,
+  T as closeTtModal,
+  u as openTtModal,
+  x as ttModal
+};

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

@@ -1,25 +1,26 @@
-/**
- * 弹窗 ESC 栈管理器
- *
- * 解决 element-plus ElDialog 两个问题：
- * 1. 多个弹窗同时打开时，按 ESC 会一次性关闭所有弹窗。
- *    期望：按一次 ESC 只关闭最顶层（最后打开）的弹窗，逐个关闭。
- * 2. 弹窗内表单元素（input / select 等）聚焦时按 ESC 也会关闭弹窗。
- *    vue2 的 element-ui 不存在该问题。
- *    期望：焦点位于表单交互元素上时，ESC 交给该元素处理（如关闭下拉），不关闭弹窗。
- *
- * 实现方式：在 ElDialog 上禁用原生 close-on-press-escape，由本管理器统一处理。
- */
 export interface ModalStackItem {
     /** 弹窗实例 uid */
     uid: number;
     /** 关闭弹窗的回调 */
     close: () => void;
+    /** 所属子应用，微前端下共享组件库时用于隔离批量关闭 */
+    scope?: string;
 }
+/**
+ * 当前作用域下逻辑上还打开着的弹窗 uid。
+ * 关闭时立即出栈，所以不含正在播离场动画的弹窗——那些不该再被当成已打开。
+ */
+export declare function getOpenModalUids(): number[];
 /**
  * 弹窗打开时入栈，并确保全局监听已绑定。
  */
-export declare function pushModal(item: ModalStackItem): void;
+export declare function pushModal(item: Omit<ModalStackItem, "scope">): void;
+/**
+ * 关闭当前作用域下所有已打开的弹窗，从最上层往下逐个关。
+ * 栈里不区分打开方式，声明式、useShowModal、ttModal.open 开的都会关；
+ * 走 ESC / 取消按钮同一条路径，closeFunc 拦截仍生效。
+ */
+export declare function closeAllModals(): void;
 /**
  * 弹窗关闭时出栈，栈为空时解绑全局监听。
  */