@aplus-frontend/ui 0.0.1-beta.2 → 0.0.1-beta.21

package/es/src/modal/basic.vue2.mjs

@@ -1,4 +1,201 @@
-import f from "./basic.vue.mjs";
+import { defineComponent as q, useAttrs as G, ref as m, nextTick as S, unref as o, getCurrentInstance as J, computed as d, toRef as K, watchEffect as Q, watch as U, openBlock as X, createBlock as Y, mergeProps as H, createSlots as O, withCtx as s, createVNode as h, renderSlot as $, renderList as R, normalizeProps as N, guardReactiveProps as y } from "vue";
+import Z from "./components/modal.mjs";
+import "./components/modal-wrapper.vue.mjs";
+import "./components/modal-close.vue.mjs";
+import "./components/modal-footer.vue.mjs";
+import "./components/modal-header.vue.mjs";
+import { basicProps as x } from "./props.mjs";
+import { useFullScreen as ee } from "./hooks/use-moda-full-screen.mjs";
+import { omit as g } from "lodash-unified";
+import { deepMerge as oe } from "@aplus-frontend/utils";
+import { isFunction as te } from "@fruits-chain/utils";
+import "../config-provider/index.mjs";
+import "./style/index.css";
+import { useNamespace as ne } from "../config-provider/hooks/use-namespace.mjs";
+import le from "./components/modal-wrapper.vue2.mjs";
+import ae from "./components/modal-close.vue2.mjs";
+import re from "./components/modal-header.vue2.mjs";
+import se from "./components/modal-footer.vue2.mjs";
+const Me = /* @__PURE__ */ q({
+  name: "BasicModal",
+  inheritAttrs: !1,
+  __name: "basic",
+  props: x,
+  emits: [
+    "open-change",
+    "height-change",
+    "cancel",
+    "ok",
+    "register",
+    "update:open",
+    "fullscreen"
+  ],
+  setup(W, { emit: _ }) {
+    const t = W, r = _, B = G(), n = m(!1), v = m(null), i = m(null), { b: T, bm: I } = ne("basic-modal"), w = m(0), F = {
+      setModalProps: A,
+      emitOpen: void 0,
+      redoModalHeight: () => {
+        S(() => {
+          o(i) && o(i).setModalHeight();
+        });
+      }
+    }, p = J();
+    p && r("register", F, p.uid);
+    const f = d(() => ({
+      ...t,
+      ...o(v)
+    })), {
+      handleFullScreen: E,
+      getWrapClassName: P,
+      fullScreenRef: c
+    } = ee({
+      modalWrapperRef: i,
+      extHeightRef: w,
+      wrapClassName: K(f.value, "wrapClassName")
+    }), l = d(() => ({
+      ...{
+        ...o(f),
+        open: o(n),
+        okButtonProps: void 0,
+        cancelButtonProps: void 0,
+        title: void 0
+      },
+      wrapClassName: o(P)
+    })), b = d(() => {
+      const e = {
+        ...B,
+        ...o(f),
+        open: o(n)
+      };
+      return e.wrapClassName = `${(e == null ? void 0 : e.wrapClassName) || ""} ${o(P)}vben-basic-modal-wrap`, o(c) ? g(e, ["height", "title"]) : g(e, "title");
+    }), j = d(() => {
+      if (!o(c))
+        return o(l).height;
+    });
+    Q(() => {
+      n.value = !!t.open, c.value = !!t.defaultFullscreen;
+    }), U(
+      () => o(n),
+      (e) => {
+        r("open-change", e), r("update:open", e), p && F.emitOpen && F.emitOpen(e, p.uid), S(() => {
+          t.scrollTop && e && o(i) && o(i).scrollTop();
+        });
+      },
+      {
+        immediate: !1
+      }
+    );
+    async function C(e) {
+      var k, a;
+      if (e == null || e.stopPropagation(), !((a = (k = e.target) == null ? void 0 : k.classList) != null && a.contains(I("close", "custom")))) {
+        if (t.closeFunc && te(t.closeFunc)) {
+          const u = await t.closeFunc();
+          n.value = !u;
+          return;
+        }
+        n.value = !1, r("cancel", e);
+      }
+    }
+    function A(e) {
+      v.value = oe(o(v) || {}, e), Reflect.has(e, "open") && (n.value = !!e.open), Reflect.has(e, "defaultFullscreen") && (c.value = !!e.defaultFullscreen);
+    }
+    function D(e) {
+      r("ok", e);
+    }
+    function L(e) {
+      r("height-change", e);
+    }
+    function V(e) {
+      w.value = e;
+    }
+    function z(e) {
+      t.canFullscreen && (e.stopPropagation(), M(e));
+    }
+    function M(e) {
+      E(e), r("fullscreen");
+    }
+    return (e, k) => (X(), Y(o(Z), H(b.value, {
+      onCancel: C,
+      class: o(T)()
+    }), O({
+      default: s(() => [
+        h(le, H(
+          {
+            useWrapper: l.value.useWrapper,
+            footerOffset: e.wrapperFooterOffset,
+            fullScreen: o(c),
+            ref_key: "modalWrapperRef",
+            ref: i,
+            loading: l.value.loading,
+            "loading-tip": l.value.loadingTip,
+            minHeight: l.value.minHeight,
+            height: j.value,
+            open: n.value,
+            modalFooterHeight: e.footer !== void 0 && !e.footer ? 0 : void 0
+          },
+          o(g)(l.value.wrapperProps, "open", "height", "modalFooterHeight"),
+          {
+            onExtHeight: V,
+            onHeightChange: L
+          }
+        ), {
+          default: s(() => [
+            $(e.$slots, "default")
+          ]),
+          _: 3
+        }, 16, ["useWrapper", "footerOffset", "fullScreen", "loading", "loading-tip", "minHeight", "height", "open", "modalFooterHeight"])
+      ]),
+      _: 2
+    }, [
+      e.$slots.closeIcon ? void 0 : {
+        name: "closeIcon",
+        fn: s(() => [
+          h(ae, {
+            canFullscreen: l.value.canFullscreen,
+            fullScreen: o(c),
+            onCancel: C,
+            onFullscreen: M
+          }, null, 8, ["canFullscreen", "fullScreen"])
+        ]),
+        key: "0"
+      },
+      e.$slots.title ? void 0 : {
+        name: "title",
+        fn: s(() => [
+          h(re, {
+            helpMessage: l.value.helpMessage,
+            title: f.value.title,
+            onDblclick: z
+          }, null, 8, ["helpMessage", "title"])
+        ]),
+        key: "1"
+      },
+      e.$slots.footer ? void 0 : {
+        name: "footer",
+        fn: s(() => [
+          h(se, H(b.value, {
+            onOk: D,
+            onCancel: C
+          }), O({ _: 2 }, [
+            R(Object.keys(e.$slots), (a) => ({
+              name: a,
+              fn: s((u) => [
+                $(e.$slots, a, N(y(u || {})))
+              ])
+            }))
+          ]), 1040)
+        ]),
+        key: "2"
+      },
+      R(Object.keys(o(g)(e.$slots, "default")), (a) => ({
+        name: a,
+        fn: s((u) => [
+          $(e.$slots, a, N(y(u || {})))
+        ])
+      }))
+    ]), 1040, ["class"]));
+  }
+});
 export {
-  f as default
+  Me as default
 };

package/es/src/modal/components/modal-close.vue.mjs

@@ -1,74 +1,4 @@
-import { defineComponent as _, computed as b, openBlock as t, createElementBlock as i, normalizeClass as y, Fragment as B, createBlock as u, unref as l, withCtx as c, createVNode as o, createCommentVNode as h } from "vue";
-import { FullscreenExitOutlined as g, FullscreenOutlined as v, CloseOutlined as x } from "@ant-design/icons-vue";
-import { Tooltip as a } from "ant-design-vue";
-import "../../config-provider/index.mjs";
-import "../style/close.css";
-import { useNamespace as N } from "../../config-provider/hooks/use-namespace.mjs";
-import { useLocale as O } from "../../config-provider/hooks/use-locale.mjs";
-const P = /* @__PURE__ */ _({
-  name: "ModalClose",
-  __name: "modal-close",
-  props: {
-    canFullscreen: { type: Boolean, default: !0 },
-    fullScreen: { type: Boolean }
-  },
-  emits: ["cancel", "fullscreen"],
-  setup(p, { emit: f }) {
-    const d = p, r = f, { b: C, m } = N("basic-modal-close"), { t: n } = O(), k = b(() => [
-      C(),
-      m("custom"),
-      {
-        [m("can-full")]: d.canFullscreen
-      }
-    ]);
-    function F(e) {
-      r("cancel", e);
-    }
-    function s(e) {
-      e == null || e.stopPropagation(), e == null || e.preventDefault(), r("fullscreen");
-    }
-    return (e, S) => (t(), i("div", {
-      class: y(k.value)
-    }, [
-      e.canFullscreen ? (t(), i(B, { key: 0 }, [
-        e.fullScreen ? (t(), u(l(a), {
-          key: 0,
-          title: l(n)("ap.modal.restore"),
-          placement: "bottom"
-        }, {
-          default: c(() => [
-            o(l(g), {
-              role: "full",
-              onClick: s
-            })
-          ]),
-          _: 1
-        }, 8, ["title"])) : (t(), u(l(a), {
-          key: 1,
-          title: l(n)("ap.modal.maximize"),
-          placement: "bottom"
-        }, {
-          default: c(() => [
-            o(l(v), {
-              role: "close",
-              onClick: s
-            })
-          ]),
-          _: 1
-        }, 8, ["title"]))
-      ], 64)) : h("", !0),
-      o(l(a), {
-        title: l(n)("ap.modal.close"),
-        placement: "bottom"
-      }, {
-        default: c(() => [
-          o(l(x), { onClick: F })
-        ]),
-        _: 1
-      }, 8, ["title"])
-    ], 2));
-  }
-});
+import f from "./modal-close.vue2.mjs";
 export {
-  P as default
+  f as default
 };

package/es/src/modal/components/modal-close.vue2.mjs

@@ -1,4 +1,74 @@
-import f from "./modal-close.vue.mjs";
+import { defineComponent as _, computed as b, openBlock as t, createElementBlock as i, normalizeClass as y, Fragment as B, createBlock as u, unref as l, withCtx as c, createVNode as o, createCommentVNode as h } from "vue";
+import { FullscreenExitOutlined as g, FullscreenOutlined as v, CloseOutlined as x } from "@ant-design/icons-vue";
+import { Tooltip as a } from "ant-design-vue";
+import "../../config-provider/index.mjs";
+import "../style/close.css";
+import { useNamespace as N } from "../../config-provider/hooks/use-namespace.mjs";
+import { useLocale as O } from "../../config-provider/hooks/use-locale.mjs";
+const P = /* @__PURE__ */ _({
+  name: "ModalClose",
+  __name: "modal-close",
+  props: {
+    canFullscreen: { type: Boolean, default: !0 },
+    fullScreen: { type: Boolean }
+  },
+  emits: ["cancel", "fullscreen"],
+  setup(p, { emit: f }) {
+    const d = p, r = f, { b: C, m } = N("basic-modal-close"), { t: n } = O(), k = b(() => [
+      C(),
+      m("custom"),
+      {
+        [m("can-full")]: d.canFullscreen
+      }
+    ]);
+    function F(e) {
+      r("cancel", e);
+    }
+    function s(e) {
+      e == null || e.stopPropagation(), e == null || e.preventDefault(), r("fullscreen");
+    }
+    return (e, S) => (t(), i("div", {
+      class: y(k.value)
+    }, [
+      e.canFullscreen ? (t(), i(B, { key: 0 }, [
+        e.fullScreen ? (t(), u(l(a), {
+          key: 0,
+          title: l(n)("ap.modal.restore"),
+          placement: "bottom"
+        }, {
+          default: c(() => [
+            o(l(g), {
+              role: "full",
+              onClick: s
+            })
+          ]),
+          _: 1
+        }, 8, ["title"])) : (t(), u(l(a), {
+          key: 1,
+          title: l(n)("ap.modal.maximize"),
+          placement: "bottom"
+        }, {
+          default: c(() => [
+            o(l(v), {
+              role: "close",
+              onClick: s
+            })
+          ]),
+          _: 1
+        }, 8, ["title"]))
+      ], 64)) : h("", !0),
+      o(l(a), {
+        title: l(n)("ap.modal.close"),
+        placement: "bottom"
+      }, {
+        default: c(() => [
+          o(l(x), { onClick: F })
+        ]),
+        _: 1
+      }, 8, ["title"])
+    ], 2));
+  }
+});
 export {
-  f as default
+  P as default
 };

package/es/src/modal/components/modal-footer.vue.d.ts

@@ -426,6 +426,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<{
     onOk?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
 }, {
+    loading: boolean;
     open: boolean;
     closable: boolean;
     centered: boolean;
@@ -433,7 +434,6 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<{
     mask: boolean;
     maskClosable: boolean;
     keyboard: boolean;
-    loading: boolean;
     confirmLoading: boolean;
     destroyOnClose: boolean;
     draggable: boolean;

package/es/src/modal/components/modal-footer.vue.mjs

@@ -1,45 +1,4 @@
-import { defineComponent as B, openBlock as t, createElementBlock as C, renderSlot as n, createBlock as l, unref as e, mergeProps as c, withCtx as m, createTextVNode as s, toDisplayString as i, createCommentVNode as p } from "vue";
-import { Button as d } from "ant-design-vue";
-import { basicProps as h } from "../props.mjs";
-import "../../config-provider/index.mjs";
-import { useLocale as y } from "../../config-provider/hooks/use-locale.mjs";
-const N = /* @__PURE__ */ B({
-  name: "BasicModalFooter",
-  __name: "modal-footer",
-  props: h,
-  emits: ["ok", "cancel"],
-  setup(T, { emit: u }) {
-    const { t: r } = y(), a = u;
-    function k(o) {
-      a("ok", o);
-    }
-    function f(o) {
-      a("cancel", o);
-    }
-    return (o, g) => (t(), C("div", null, [
-      n(o.$slots, "insertFooter"),
-      o.showCancelBtn ? (t(), l(e(d), c({ key: 0 }, o.cancelButtonProps, { onClick: f }), {
-        default: m(() => [
-          s(i(o.cancelText || e(r)("ap.common.cancelText")), 1)
-        ]),
-        _: 1
-      }, 16)) : p("", !0),
-      n(o.$slots, "centerFooter"),
-      o.showOkBtn ? (t(), l(e(d), c({
-        key: 1,
-        type: o.okType,
-        onClick: k,
-        loading: o.confirmLoading
-      }, o.okButtonProps), {
-        default: m(() => [
-          s(i(o.okText || e(r)("ap.common.okText")), 1)
-        ]),
-        _: 1
-      }, 16, ["type", "loading"])) : p("", !0),
-      n(o.$slots, "appendFooter")
-    ]));
-  }
-});
+import f from "./modal-footer.vue2.mjs";
 export {
-  N as default
+  f as default
 };

package/es/src/modal/components/modal-footer.vue2.mjs

@@ -1,4 +1,45 @@
-import f from "./modal-footer.vue.mjs";
+import { defineComponent as B, openBlock as t, createElementBlock as C, renderSlot as n, createBlock as l, unref as e, mergeProps as c, withCtx as m, createTextVNode as s, toDisplayString as i, createCommentVNode as p } from "vue";
+import { Button as d } from "ant-design-vue";
+import { basicProps as h } from "../props.mjs";
+import "../../config-provider/index.mjs";
+import { useLocale as y } from "../../config-provider/hooks/use-locale.mjs";
+const N = /* @__PURE__ */ B({
+  name: "BasicModalFooter",
+  __name: "modal-footer",
+  props: h,
+  emits: ["ok", "cancel"],
+  setup(T, { emit: u }) {
+    const { t: r } = y(), a = u;
+    function k(o) {
+      a("ok", o);
+    }
+    function f(o) {
+      a("cancel", o);
+    }
+    return (o, g) => (t(), C("div", null, [
+      n(o.$slots, "insertFooter"),
+      o.showCancelBtn ? (t(), l(e(d), c({ key: 0 }, o.cancelButtonProps, { onClick: f }), {
+        default: m(() => [
+          s(i(o.cancelText || e(r)("ap.common.cancelText")), 1)
+        ]),
+        _: 1
+      }, 16)) : p("", !0),
+      n(o.$slots, "centerFooter"),
+      o.showOkBtn ? (t(), l(e(d), c({
+        key: 1,
+        type: o.okType,
+        onClick: k,
+        loading: o.confirmLoading
+      }, o.okButtonProps), {
+        default: m(() => [
+          s(i(o.okText || e(r)("ap.common.okText")), 1)
+        ]),
+        _: 1
+      }, 16, ["type", "loading"])) : p("", !0),
+      n(o.$slots, "appendFooter")
+    ]));
+  }
+});
 export {
-  f as default
+  N as default
 };

package/es/src/modal/components/modal-header.vue.mjs

@@ -1,21 +1,4 @@
-import { defineComponent as t, openBlock as a, createBlock as o, unref as r, withCtx as s, createTextVNode as p, toDisplayString as l } from "vue";
-import { BasicTitle as i } from "../../basic/index.mjs";
-const f = /* @__PURE__ */ t({
-  name: "BasicModalHeader",
-  __name: "modal-header",
-  props: {
-    helpMessage: {},
-    title: {}
-  },
-  setup(n) {
-    return (e, c) => (a(), o(r(i), { helpMessage: e.helpMessage }, {
-      default: s(() => [
-        p(l(e.title), 1)
-      ]),
-      _: 1
-    }, 8, ["helpMessage"]));
-  }
-});
+import f from "./modal-header.vue2.mjs";
 export {
   f as default
 };

package/es/src/modal/components/modal-header.vue2.mjs

@@ -1,4 +1,21 @@
-import f from "./modal-header.vue.mjs";
+import { defineComponent as t, openBlock as a, createBlock as o, unref as r, withCtx as s, createTextVNode as p, toDisplayString as l } from "vue";
+import { BasicTitle as i } from "../../basic/index.mjs";
+const f = /* @__PURE__ */ t({
+  name: "BasicModalHeader",
+  __name: "modal-header",
+  props: {
+    helpMessage: {},
+    title: {}
+  },
+  setup(n) {
+    return (e, c) => (a(), o(r(i), { helpMessage: e.helpMessage }, {
+      default: s(() => [
+        p(l(e.title), 1)
+      ]),
+      _: 1
+    }, 8, ["helpMessage"]));
+  }
+});
 export {
   f as default
 };

package/es/src/modal/components/modal-wrapper.vue.d.ts

@@ -83,8 +83,8 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<{
     "onHeight-change"?: ((...args: any[]) => any) | undefined;
     "onExt-height"?: ((...args: any[]) => any) | undefined;
 }, {
-    open: boolean;
     loading: boolean;
+    open: boolean;
     minHeight: number;
     footerOffset: number;
     modalHeaderHeight: number;

package/es/src/modal/components/modal-wrapper.vue.mjs

@@ -1,101 +1,4 @@
-import { defineComponent as E, ref as a, computed as b, unref as l, watchEffect as k, watch as M, onMounted as R, onUnmounted as C, nextTick as c, resolveDirective as T, openBlock as H, createBlock as F, withCtx as W, withDirectives as $, createElementBlock as B, normalizeStyle as z, renderSlot as D } from "vue";
-import { useWindowSizeFn as O } from "@aplus-frontend/hooks";
-import { ScrollContainer as A } from "../../container/index.mjs";
-import { createModalContext as I } from "../hooks/use-modal-context.mjs";
-import { useMutationObserver as N } from "@vueuse/core";
-import { modalWrapperProps as P } from "../props.mjs";
-const U = ["loading-tip"], Q = /* @__PURE__ */ E({
-  name: "ModalWrapper",
-  inheritAttrs: !1,
-  __name: "modal-wrapper",
-  props: P,
-  emits: ["height-change", "ext-height"],
-  setup(v, { expose: w, emit: y }) {
-    const t = v, d = y, u = a(null), m = a(null), n = a(0), h = a(0), s = a(0);
-    O(r.bind(null)), N(
-      m,
-      () => {
-        r();
-      },
-      {
-        attributes: !0,
-        subtree: !0
-      }
-    ), I({
-      redoModalHeight: r
-    });
-    const _ = b(() => ({
-      minHeight: `${t.minHeight}px`,
-      [t.fullScreen ? "height" : "maxHeight"]: `${l(n)}px`
-    }));
-    k(() => {
-      t.useWrapper && r();
-    }), M(
-      () => t.fullScreen,
-      (e) => {
-        r(), e ? h.value = n.value : n.value = h.value;
-      }
-    ), R(() => {
-      const { modalHeaderHeight: e, modalFooterHeight: o } = t;
-      d("ext-height", e + o);
-    }), C(() => {
-    });
-    async function x() {
-      c(() => {
-        var o;
-        const e = l(u);
-        e && ((o = e == null ? void 0 : e.scrollTo) == null || o.call(e, 0));
-      });
-    }
-    async function r() {
-      if (!t.open)
-        return;
-      const e = l(u);
-      if (!e)
-        return;
-      const o = e.$el.parentElement;
-      if (o) {
-        o.style.padding = "0", await c();
-        try {
-          const i = o.parentElement && o.parentElement.parentElement;
-          if (!i)
-            return;
-          const S = getComputedStyle(i).top, f = Number.parseInt(S);
-          let p = window.innerHeight - f * 2 + (t.footerOffset || 0) - t.modalFooterHeight - t.modalHeaderHeight;
-          f < 40 && (p -= 26), await c();
-          const g = l(m);
-          if (!g)
-            return;
-          await c(), s.value = g.scrollHeight, t.fullScreen ? n.value = window.innerHeight - t.modalFooterHeight - t.modalHeaderHeight - 28 : n.value = t.height ? t.height : s.value > p ? p : s.value, d("height-change", l(n));
-        } catch (i) {
-          console.log(i);
-        }
-      }
-    }
-    return w({ scrollTop: x, setModalHeight: r }), (e, o) => {
-      const i = T("loading");
-      return H(), F(l(A), {
-        ref_key: "wrapperRef",
-        ref: u,
-        scrollHeight: s.value
-      }, {
-        default: W(() => [
-          $((H(), B("div", {
-            ref_key: "spinRef",
-            ref: m,
-            style: z(_.value),
-            "loading-tip": e.loadingTip
-          }, [
-            D(e.$slots, "default")
-          ], 12, U)), [
-            [i, e.loading]
-          ])
-        ]),
-        _: 3
-      }, 8, ["scrollHeight"]);
-    };
-  }
-});
+import f from "./modal-wrapper.vue2.mjs";
 export {
-  Q as default
+  f as default
 };