@aplus-frontend/ui 0.0.1-beta.6 → 0.0.1-beta.8

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.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
 };

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

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

package/es/src/modal/components/modal.d.ts

@@ -423,12 +423,12 @@ declare const _default: DefineComponent<{
 }, {
     loading: boolean;
     open: boolean;
-    keyboard: boolean;
-    mask: boolean;
     closable: boolean;
     centered: boolean;
     okType: "danger" | ButtonType;
+    mask: boolean;
     maskClosable: boolean;
+    keyboard: boolean;
     confirmLoading: boolean;
     destroyOnClose: boolean;
     draggable: boolean;

package/es/src/modal/components/modal.mjs

@@ -1,12 +1,12 @@
-import { defineComponent as p, toRefs as f, unref as d, createVNode as m, isVNode as u } from "vue";
+import { isVNode as p, defineComponent as f, toRefs as d, unref as m, createVNode as u } from "vue";
 import { Modal as M } from "ant-design-vue";
 import { basicProps as b } from "../props.mjs";
 import { useModalDragMove as g } from "../hooks/use-modal-drag.mjs";
 import { extendSlots as j } from "../../utils/slot.mjs";
 function y(o) {
-  return typeof o == "function" || Object.prototype.toString.call(o) === "[object Object]" && !u(o);
+  return typeof o == "function" || Object.prototype.toString.call(o) === "[object Object]" && !p(o);
 }
-const N = /* @__PURE__ */ p({
+const N = /* @__PURE__ */ f({
   name: "Modal",
   inheritAttrs: !1,
   props: b,
@@ -20,7 +20,7 @@ const N = /* @__PURE__ */ p({
       open: a,
       draggable: l,
       destroyOnClose: s
-    } = f(o);
+    } = d(o);
     g({
       open: a,
       destroyOnClose: s,
@@ -32,11 +32,11 @@ const N = /* @__PURE__ */ p({
     return () => {
       let t;
       const i = {
-        ...d(n),
+        ...m(n),
         ...o,
         onCancel: c
       };
-      return m(M, i, y(t = j(e)) ? t : {
+      return u(M, i, y(t = j(e)) ? t : {
         default: () => [t]
       });
     };

package/es/src/modal/hooks/use-modal-drag.mjs

@@ -1,4 +1,4 @@
-import { watchEffect as x, unref as c } from "vue";
+import { unref as c, watchEffect as x } from "vue";
 import { useTimeoutFn as A } from "@vueuse/core";
 function X(n) {
   const a = (o, t) => getComputedStyle(o)[t], D = (o) => {

package/es/src/modal/hooks/use-modal.mjs

@@ -1,4 +1,4 @@
-import { reactive as P, ref as d, computed as h, unref as t, toRaw as c, getCurrentInstance as v, watchEffect as w, nextTick as E, onUnmounted as O } from "vue";
+import { reactive as P, ref as d, getCurrentInstance as h, onUnmounted as w, unref as t, computed as v, toRaw as c, watchEffect as E, nextTick as O } from "vue";
 import { isProdMode as M } from "@aplus-frontend/utils";
 import { isEqual as H } from "lodash-unified";
 import { tryOnUnmounted as I } from "@vueuse/core";
@@ -7,11 +7,11 @@ const u = P({}), g = P({});
 function C() {
   const r = d(null), a = d(!1), s = d(0);
   function i(e, o) {
-    if (!v())
+    if (!h())
       throw new Error(
         "useModal() can only be used inside setup() or functional components!"
       );
-    s.value = o, M() && O(() => {
+    s.value = o, M() && w(() => {
       r.value = null, a.value = !1, u[String(t(s))] = null;
     }), !(t(a) && M() && e === t(r)) && (r.value = e, a.value = !0, e.emitOpen = (p, l) => {
       g[l] = p;
@@ -27,7 +27,7 @@ function C() {
       var o;
       (o = n()) == null || o.setModalProps(e);
     },
-    getOpen: h(() => g[~~t(s)]),
+    getOpen: v(() => g[~~t(s)]),
     redoModalHeight: () => {
       var e, o;
       (o = (e = n()) == null ? void 0 : e.redoModalHeight) == null || o.call(e);
@@ -53,7 +53,7 @@ function C() {
   return [i, f];
 }
 const D = (r) => {
-  const a = d(null), s = v(), i = d(0), n = () => {
+  const a = d(null), s = h(), i = d(0), n = () => {
     const e = t(a);
     if (!e)
       throw new Error("useModalInner instance is undefined!");
@@ -63,9 +63,9 @@ const D = (r) => {
       a.value = null;
     }), i.value = o, a.value = e, s == null || s.emit("register", e, o);
   };
-  return w(() => {
+  return E(() => {
     const e = u[t(i)];
-    e && (!r || !R(r) || E(() => {
+    e && (!r || !R(r) || O(() => {
       r(e);
     }));
   }), [
@@ -75,7 +75,7 @@ const D = (r) => {
         var o;
         (o = n()) == null || o.setModalProps({ loading: e });
       },
-      getOpen: h(() => g[~~t(i)]),
+      getOpen: v(() => g[~~t(i)]),
       changeOkLoading: (e = !0) => {
         var o;
         (o = n()) == null || o.setModalProps({ confirmLoading: e });

package/es/src/modal/index.d.ts

@@ -4,7 +4,6 @@ import { ButtonType, ButtonShape, ButtonSize } from 'ant-design-vue/es/button';
 import { ButtonHTMLType } from 'ant-design-vue/es/button/buttonTypes';
 import { VueTypeValidableDef } from '../../node_modules/vue-types';
 import { MouseEventHandler } from 'ant-design-vue/es/_util/EventInterface';
-
 export declare const BaseModal: {
     new (...args: any[]): CreateComponentPublicInstance<Readonly< ExtractPropTypes<{
         open: {
@@ -214,9 +213,9 @@ export declare const BaseModal: {
             type: NumberConstructor;
         };
     }>> & {
+        "onUpdate:open"?: ((...args: any[]) => any) | undefined;
         onOk?: ((...args: any[]) => any) | undefined;
         onCancel?: ((...args: any[]) => any) | undefined;
-        "onUpdate:open"?: ((...args: any[]) => any) | undefined;
         "onHeight-change"?: ((...args: any[]) => any) | undefined;
         onFullscreen?: ((...args: any[]) => any) | undefined;
         "onOpen-change"?: ((...args: any[]) => any) | undefined;
@@ -437,9 +436,9 @@ export declare const BaseModal: {
             type: NumberConstructor;
         };
     }>> & {
+        "onUpdate:open"?: ((...args: any[]) => any) | undefined;
         onOk?: ((...args: any[]) => any) | undefined;
         onCancel?: ((...args: any[]) => any) | undefined;
-        "onUpdate:open"?: ((...args: any[]) => any) | undefined;
         "onHeight-change"?: ((...args: any[]) => any) | undefined;
         onFullscreen?: ((...args: any[]) => any) | undefined;
         "onOpen-change"?: ((...args: any[]) => any) | undefined;
@@ -447,12 +446,12 @@ export declare const BaseModal: {
     }, {
         loading: boolean;
         open: boolean;
-        keyboard: boolean;
-        mask: boolean;
         closable: boolean;
         centered: boolean;
         okType: "danger" | ButtonType;
+        mask: boolean;
         maskClosable: boolean;
+        keyboard: boolean;
         confirmLoading: boolean;
         destroyOnClose: boolean;
         draggable: boolean;
@@ -678,9 +677,9 @@ export declare const BaseModal: {
             type: NumberConstructor;
         };
     }>> & {
+        "onUpdate:open"?: ((...args: any[]) => any) | undefined;
         onOk?: ((...args: any[]) => any) | undefined;
         onCancel?: ((...args: any[]) => any) | undefined;
-        "onUpdate:open"?: ((...args: any[]) => any) | undefined;
         "onHeight-change"?: ((...args: any[]) => any) | undefined;
         onFullscreen?: ((...args: any[]) => any) | undefined;
         "onOpen-change"?: ((...args: any[]) => any) | undefined;
@@ -688,12 +687,12 @@ export declare const BaseModal: {
     }, {}, {}, {}, {}, {
         loading: boolean;
         open: boolean;
-        keyboard: boolean;
-        mask: boolean;
         closable: boolean;
         centered: boolean;
         okType: "danger" | ButtonType;
+        mask: boolean;
         maskClosable: boolean;
+        keyboard: boolean;
         confirmLoading: boolean;
         destroyOnClose: boolean;
         draggable: boolean;
@@ -916,9 +915,9 @@ export declare const BaseModal: {
         type: NumberConstructor;
     };
 }>> & {
+    "onUpdate:open"?: ((...args: any[]) => any) | undefined;
     onOk?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
-    "onUpdate:open"?: ((...args: any[]) => any) | undefined;
     "onHeight-change"?: ((...args: any[]) => any) | undefined;
     onFullscreen?: ((...args: any[]) => any) | undefined;
     "onOpen-change"?: ((...args: any[]) => any) | undefined;
@@ -934,12 +933,12 @@ export declare const BaseModal: {
 }, string, {
     loading: boolean;
     open: boolean;
-    keyboard: boolean;
-    mask: boolean;
     closable: boolean;
     centered: boolean;
     okType: "danger" | ButtonType;
+    mask: boolean;
     maskClosable: boolean;
+    keyboard: boolean;
     confirmLoading: boolean;
     destroyOnClose: boolean;
     draggable: boolean;

package/es/src/modal/index.mjs

@@ -1,11 +1,13 @@
 import { withInstall as o } from "@aplus-frontend/utils";
-import "./style/index.css";
-import r from "./basic.vue.mjs";
-import "@aplus-frontend/hooks";
-import { useModal as l, useModalInner as n } from "./hooks/use-modal.mjs";
-const i = o(r);
+import "./basic.vue.mjs";
+import { useModalContext as l } from "./hooks/use-modal-context.mjs";
+import { useModal as f, useModalInner as d } from "./hooks/use-modal.mjs";
+import "./interface.mjs";
+import r from "./basic.vue2.mjs";
+const p = o(r);
 export {
-  i as BaseModal,
-  l as useModal,
-  n as useModalInner
+  p as BaseModal,
+  f as useModal,
+  l as useModalContext,
+  d as useModalInner
 };

package/es/src/modal/interface.mjs

@@ -0,0 +1 @@
+

package/es/src/modal/props.mjs

@@ -12,7 +12,7 @@ const e = {
 }, t = Object.assign({}, e, {
   defaultFullscreen: { type: Boolean },
   // Can it be full screen
-  canFullscreen: { type: Boolean, default: !0 },
+  canFullscreen: { type: Boolean, default: !1 },
   // After enabling the wrapper, the bottom can be increased in height
   wrapperFooterOffset: { type: Number, default: 0 },
   // Warm reminder message

package/es/src/modal/style/index.css

@@ -14,48 +14,50 @@
 .fullscreen-modal .ant-modal-footer {
   margin-top: 0;
 }
-.ant-modal {
+.aplus-basic-modal {
   width: 520px;
   padding-bottom: 0;
 }
-.ant-modal .ant-modal-body > .aplus-scrollbar {
-  padding: 14px;
+.aplus-basic-modal .ant-modal-body > .aplus-scrollbar {
+  padding: 20px;
+  padding-bottom: 0;
 }
-.ant-modal-title {
+.aplus-basic-modal .ant-modal-title {
   font-size: 16px;
   font-weight: bold;
 }
-.ant-modal-title .base-title {
+.aplus-basic-modal .ant-modal-title .aplus-basic-title {
   cursor: move !important;
+  padding-left: 0;
 }
-.ant-modal .ant-modal-body {
+.aplus-basic-modal .ant-modal-body {
   padding: 0;
 }
-.ant-modal .ant-modal-body > .aplus-scrollbar > .aplus-scrollbar__bar.is-horizontal {
+.aplus-basic-modal .ant-modal-body > .aplus-scrollbar > .aplus-scrollbar__bar.is-horizontal {
   display: none;
 }
-.ant-modal-large {
+.aplus-basic-modal .ant-modal-large {
   top: 60px;
 }
-.ant-modal-large--mini {
+.aplus-basic-modal .ant-modal-large .ant-modal--mini {
   top: 16px;
 }
-.ant-modal-header {
-  padding: 16px;
+.aplus-basic-modal .ant-modal-header {
+  padding: 15px 20px;
+  margin-bottom: 0;
   border-bottom: 1px solid #eee;
 }
-.ant-modal-content {
+.aplus-basic-modal .ant-modal-content {
   padding: 0 !important;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 #000000;
 }
-.ant-modal-footer {
-  padding: 10px 16px;
-  border-top: 1px solid #eee;
+.aplus-basic-modal .ant-modal-footer {
+  padding: 20px;
+  margin-top: 0;
 }
-.ant-modal-footer button + button {
+.aplus-basic-modal .ant-modal-footer button + button {
   margin-left: 10px;
 }
-.ant-modal-close {
+.aplus-basic-modal .ant-modal-close {
   top: 0 !important;
   right: 0 !important;
   width: auto !important;
@@ -63,41 +65,38 @@
   background: transparent !important;
   font-weight: normal;
 }
-.ant-modal-close-x {
+.aplus-basic-modal .ant-modal-close-x {
   display: inline-block;
   width: 96px;
   height: 56px;
   line-height: 56px !important;
 }
-.ant-modal-confirm-body .ant-modal-confirm-content > * {
+.aplus-basic-modal .ant-modal-confirm-body .ant-modal-confirm-content > * {
   color: #909399;
 }
-.ant-modal-confirm-confirm.error .ant-modal-confirm-body > .anticon {
+.aplus-basic-modal .ant-modal-confirm-confirm.error .ant-modal-confirm-body > .anticon {
   color: #ed6f6f;
 }
-.ant-modal-confirm-btns .ant-btn:last-child {
+.aplus-basic-modal .ant-modal-confirm-btns .ant-btn:last-child {
   margin-right: 0;
 }
-.ant-modal-confirm-info .ant-modal-confirm-body > .anticon {
+.aplus-basic-modal .ant-modal-confirm-info .ant-modal-confirm-body > .anticon {
   color: #efbd47;
 }
-.ant-modal-confirm-confirm.success .ant-modal-confirm-body > .anticon {
+.aplus-basic-modal .ant-modal-confirm-confirm.success .ant-modal-confirm-body > .anticon {
   color: #34b77c;
 }
-.ant-modal-confirm .ant-modal-body {
-  padding: 24px !important;
-}
-@media screen and (max-height: 600px) {
+@media screen and (height <= 600px) {
   .ant-modal {
     top: 60px;
   }
 }
-@media screen and (max-height: 540px) {
+@media screen and (height <= 540px) {
   .ant-modal {
     top: 30px;
   }
 }
-@media screen and (max-height: 480px) {
+@media screen and (height <= 480px) {
   .ant-modal {
     top: 10px;
   }