@gopowerteam/modal-render 0.0.3 → 0.0.5

package/dist/es/index.mjs

@@ -0,0 +1,401 @@
+import { unref as J, isRef as Q, toRefs as Z, customRef as j, getCurrentScope as ee, onScopeDispose as te, ref as B, computed as x, watch as oe, defineComponent as I, inject as N, shallowRef as P, onMounted as X, onUnmounted as ne, openBlock as g, createElementBlock as w, normalizeStyle as A, withModifiers as re, createElementVNode as b, normalizeClass as ie, toDisplayString as le, createCommentVNode as $, createBlock as W, resolveDynamicComponent as se, normalizeProps as ae, guardReactiveProps as ue, triggerRef as M, provide as ce, Fragment as F, renderSlot as de, Teleport as fe, createVNode as pe, TransitionGroup as me, withCtx as ve, renderList as ye, mergeProps as he, defineAsyncComponent as ge, getCurrentInstance as Y } from "vue";
+const z = Symbol("__MODAL__");
+function _e(o) {
+  return ee() ? (te(o), !0) : !1;
+}
+function h(o) {
+  return typeof o == "function" ? o() : J(o);
+}
+const K = typeof window < "u" && typeof document < "u", we = Object.prototype.toString, be = (o) => we.call(o) === "[object Object]", xe = () => {
+};
+function Ce(o, i = {}) {
+  if (!Q(o))
+    return Z(o);
+  const e = Array.isArray(o.value) ? Array.from({ length: o.value.length }) : {};
+  for (const r in o.value)
+    e[r] = j(() => ({
+      get() {
+        return o.value[r];
+      },
+      set(n) {
+        var u;
+        if ((u = h(i.replaceRef)) != null ? u : !0)
+          if (Array.isArray(o.value)) {
+            const p = [...o.value];
+            p[r] = n, o.value = p;
+          } else {
+            const p = { ...o.value, [r]: n };
+            Object.setPrototypeOf(p, Object.getPrototypeOf(o.value)), o.value = p;
+          }
+        else
+          o.value[r] = n;
+      }
+    }));
+  return e;
+}
+function Se(o) {
+  var i;
+  const e = h(o);
+  return (i = e == null ? void 0 : e.$el) != null ? i : e;
+}
+const q = K ? window : void 0;
+function H(...o) {
+  let i, e, r, n;
+  if (typeof o[0] == "string" || Array.isArray(o[0]) ? ([e, r, n] = o, i = q) : [i, e, r, n] = o, !i)
+    return xe;
+  Array.isArray(e) || (e = [e]), Array.isArray(r) || (r = [r]);
+  const u = [], v = () => {
+    u.forEach((a) => a()), u.length = 0;
+  }, p = (a, s, c, f) => (a.addEventListener(s, c, f), () => a.removeEventListener(s, c, f)), m = oe(
+    () => [Se(i), h(n)],
+    ([a, s]) => {
+      if (v(), !a)
+        return;
+      const c = be(s) ? { ...s } : s;
+      u.push(
+        ...e.flatMap((f) => r.map((C) => p(a, f, C, c)))
+      );
+    },
+    { immediate: !0, flush: "post" }
+  ), l = () => {
+    m(), v();
+  };
+  return _e(l), l;
+}
+function Ee(o, i = {}) {
+  var e, r;
+  const {
+    pointerTypes: n,
+    preventDefault: u,
+    stopPropagation: v,
+    exact: p,
+    onMove: m,
+    onEnd: l,
+    onStart: a,
+    initialValue: s,
+    axis: c = "both",
+    draggingElement: f = q,
+    containerElement: C,
+    handle: L = o
+  } = i, y = B(
+    (e = h(s)) != null ? e : { x: 0, y: 0 }
+  ), _ = B(), S = (t) => n ? n.includes(t.pointerType) : !0, E = (t) => {
+    h(u) && t.preventDefault(), h(v) && t.stopPropagation();
+  }, D = (t) => {
+    var d;
+    if (!S(t) || h(p) && t.target !== h(o))
+      return;
+    const R = ((d = h(C)) != null ? d : h(o)).getBoundingClientRect(), V = {
+      x: t.clientX - R.left,
+      y: t.clientY - R.top
+    };
+    (a == null ? void 0 : a(V, t)) !== !1 && (_.value = V, E(t));
+  }, O = (t) => {
+    if (!S(t) || !_.value)
+      return;
+    let { x: d, y: k } = y.value;
+    (c === "x" || c === "both") && (d = t.clientX - _.value.x), (c === "y" || c === "both") && (k = t.clientY - _.value.y), y.value = {
+      x: d,
+      y: k
+    }, m == null || m(y.value, t), E(t);
+  }, T = (t) => {
+    S(t) && _.value && (_.value = void 0, l == null || l(y.value, t), E(t));
+  };
+  if (K) {
+    const t = { capture: (r = i.capture) != null ? r : !0 };
+    H(L, "pointerdown", D, t), H(f, "pointermove", O, t), H(f, "pointerup", T, t);
+  }
+  return {
+    ...Ce(y),
+    position: y,
+    isDragging: x(() => !!_.value),
+    style: x(
+      () => `left:${y.value.x}px;top:${y.value.y}px;`
+    )
+  };
+}
+const Me = { class: "title font-bold" }, ke = { class: "action" }, Ae = {
+  key: 1,
+  class: "modal-footer space-x-2"
+}, Pe = ["form"], $e = {
+  name: "ModalContainer",
+  inheritAttrs: !0
+}, Be = /* @__PURE__ */ I({
+  ...$e,
+  props: {
+    id: {},
+    form: {},
+    component: {},
+    componentProps: {},
+    width: {},
+    maxWidth: {},
+    maxHeight: {},
+    sizes: {},
+    size: { default: "middle" },
+    fullscreen: { type: Boolean },
+    title: {},
+    header: { type: Boolean, default: !0 },
+    footer: { type: Boolean, default: !1 },
+    closeable: { type: Boolean, default: !0 },
+    esc: { type: Boolean, default: !1 },
+    maskClosable: { type: Boolean, default: !1 },
+    draggable: { type: Boolean, default: !1 },
+    mode: { default: "dialog" }
+  },
+  emits: ["submit"],
+  setup(o, { emit: i }) {
+    const e = o, r = i, n = N(z);
+    let u = 0, v = 0;
+    const p = P(), m = P(), l = P(), { x: a, y: s } = Ee(l, {
+      initialValue: { x: 0, y: 0 }
+    });
+    function c() {
+      n == null || n.close(e.id);
+    }
+    function f(t) {
+      if (typeof t == "number")
+        return `${t}px`;
+      if (typeof t == "string")
+        return t;
+    }
+    const C = x(() => {
+      const t = {};
+      return e.mode === "dialog" && (t.justifyContent = "center"), e.mode === "drawer" && (t.justifyContent = "flex-end"), t;
+    }), L = x(() => {
+      const t = {};
+      return e.size && (t.width = f(e.sizes[e.size])), e.width && (t.width = f(e.width)), e.maxWidth && (t.maxWidth = f(e.maxWidth)), e.fullscreen && (t.maxWidth = "unset", t.width = "100%", t.position = "fixed", t.top = 0, t.left = 0, t.bottom = 0, t.right = 0), e.draggable && !e.fullscreen && e.mode === "dialog" && (t.transform = `translate3d(${a.value - u}px, ${s.value - v}px, 0px)`), t;
+    }), y = x(() => {
+      const t = {};
+      return e.draggable && !e.fullscreen && e.mode === "dialog" && (t.cursor = "move"), t;
+    }), _ = x(() => {
+      var d;
+      const t = {};
+      return e.maxHeight && (t.maxHeight = `calc(${(d = f(e.maxHeight)) == null ? void 0 : d.replace("%", "vh")} - 50px)`), e.mode === "drawer" && (t.maxHeight = `calc(100vh - ${(e.header ? 50 : 0) + (e.footer ? 50 : 0)}px)`), e.fullscreen && (t.maxHeight = `calc(100vh - ${(e.header ? 50 : 0) + (e.footer ? 50 : 0)}px)`), t;
+    });
+    function S() {
+      const t = m.value;
+      if (e.form && t) {
+        const d = t.querySelector(`form[name="${e.form}"]`);
+        d && d.dispatchEvent(new Event("submit"));
+      }
+      r("submit", {
+        open: n == null ? void 0 : n.open,
+        close: (d) => n == null ? void 0 : n.close(e.id, d)
+      });
+    }
+    function E() {
+      n == null || n.close(e.id);
+    }
+    function D() {
+      window && window.addEventListener("resize", () => {
+        M(p), M(m), u = m.value.offsetLeft, v = m.value.offsetTop;
+      });
+    }
+    function O() {
+      if (e.closeable && e.esc) {
+        const t = ({ key: d }) => {
+          d === "Escape" && (n == null || n.close(e.id), window.removeEventListener("keydown", t));
+        };
+        window.addEventListener("keydown", t);
+      }
+    }
+    function T() {
+      u = m.value.offsetLeft, v = m.value.offsetTop;
+    }
+    return X(() => {
+      O(), D();
+    }), ne(() => {
+    }), (t, d) => (g(), w("div", {
+      ref_key: "wrapperRef",
+      ref: p,
+      class: "modal-wrapper",
+      style: A(C.value),
+      onClick: d[0] || (d[0] = re((k) => t.maskClosable && c(), ["self"]))
+    }, [
+      b("div", {
+        ref_key: "contentRef",
+        ref: m,
+        class: ie(["modal-content", { [`${t.mode}-mode`]: !0 }]),
+        style: A(L.value)
+      }, [
+        t.header ? (g(), w("div", {
+          key: 0,
+          ref_key: "headerRef",
+          ref: l,
+          class: "modal-header",
+          style: A(y.value),
+          onMousedown: T
+        }, [
+          b("div", Me, le(t.title), 1),
+          b("div", ke, [
+            t.closeable ? (g(), w("div", {
+              key: 0,
+              class: "i-icon-park-outline:close block cursor-pointer",
+              onClick: c
+            })) : $("", !0)
+          ])
+        ], 36)) : $("", !0),
+        b("div", {
+          class: "modal-body",
+          style: A(_.value)
+        }, [
+          (g(), W(se(t.component), ae(ue(t.componentProps)), null, 16))
+        ], 4),
+        t.footer ? (g(), w("div", Ae, [
+          b("button", {
+            class: "submit-button",
+            form: t.form,
+            type: "submit",
+            onClick: S
+          }, " 确定 ", 8, Pe),
+          b("button", {
+            class: "cancel-button",
+            type: "button",
+            onClick: E
+          }, " 取消 ")
+        ])) : $("", !0)
+      ], 6)
+    ], 4));
+  }
+});
+const G = (o, i) => {
+  const e = o.__vccOpts || o;
+  for (const [r, n] of i)
+    e[r] = n;
+  return e;
+}, ze = /* @__PURE__ */ G(Be, [["__scopeId", "data-v-33b22316"]]), Le = {
+  key: 0,
+  class: "modal-teleport"
+}, De = {
+  name: "ModalProvider",
+  inheritAttrs: !0
+}, Oe = /* @__PURE__ */ I({
+  ...De,
+  props: {
+    appendToBody: { type: [Boolean, String], default: !1 },
+    sizes: { default: () => ({
+      small: 520,
+      middle: 860,
+      large: 1190
+    }) },
+    maxWidth: { default: "80%" },
+    maxHeight: { default: "80%" }
+  },
+  setup(o, { expose: i }) {
+    const e = P([]), r = B(!1);
+    async function n(l, a, s) {
+      const c = ge(
+        () => Promise.resolve(l)
+      );
+      return new Promise((f) => {
+        e.value.push({
+          id: Math.random().toString(32).slice(2),
+          component: c,
+          props: a,
+          options: s,
+          resolve: f,
+          onSubmit: B(null)
+        }), M(e);
+      });
+    }
+    function u(l, a) {
+      const s = e.value.findIndex((f) => f.id === l);
+      if (s < 0)
+        return;
+      const c = e.value[s];
+      c == null || c.resolve(a), e.value.splice(s, 1), M(e);
+    }
+    function v() {
+      e.value.forEach((l) => {
+        l.resolve();
+      }), e.value = [], M(e);
+    }
+    function p(l) {
+      return e.value.find((a) => a.id === l);
+    }
+    function m(l, a) {
+      const s = e.value.find((c) => c.id === l);
+      console.log(a, 111), s && (s.onSubmit.value = a);
+    }
+    return ce(z, {
+      open: n,
+      close: u,
+      closeAll: v,
+      getElement: p,
+      addSubmitListener: m
+    }), i({
+      elements: e
+    }), X(() => {
+      r.value = !0;
+    }), (l, a) => (g(), w(F, null, [
+      de(l.$slots, "default", {}, void 0, !0),
+      r.value ? (g(), w("div", Le, [
+        (g(), W(fe, {
+          disabled: !l.appendToBody,
+          to: typeof l.appendToBody == "string" ? l.appendToBody : "body"
+        }, [
+          pe(me, { name: "modal-fade" }, {
+            default: ve(() => [
+              (g(!0), w(F, null, ye(e.value, (s) => (g(), W(ze, he({
+                id: s.id,
+                key: s.id,
+                component: s.component,
+                "component-props": s.props,
+                "max-height": l.maxHeight,
+                "max-width": l.maxWidth,
+                sizes: l.sizes
+              }, s.options, {
+                onSubmit: s.onSubmit.value
+              }), null, 16, ["id", "component", "component-props", "max-height", "max-width", "sizes", "onSubmit"]))), 128))
+            ]),
+            _: 1
+          })
+        ], 8, ["disabled", "to"]))
+      ])) : $("", !0)
+    ], 64));
+  }
+});
+const He = /* @__PURE__ */ G(Oe, [["__scopeId", "data-v-cec9e05a"]]);
+function U(o, i) {
+  var r, n;
+  let e = o == null ? void 0 : o.parent;
+  for (; e && ((r = e == null ? void 0 : e.type) == null ? void 0 : r.name) !== i; )
+    e = e.parent;
+  return ((n = e == null ? void 0 : e.type) == null ? void 0 : n.name) === i ? e : null;
+}
+function We() {
+  const o = N(z), i = Y();
+  return {
+    open(e, r, n) {
+      if (!o)
+        throw new Error("Not Found Modal Provider Component");
+      return o.open(e, r || {}, n || {});
+    },
+    close(e) {
+      var u;
+      if (!o)
+        throw new Error("Not Found Modal Provider Component");
+      const r = U(i, "ModalContainer"), n = (u = r == null ? void 0 : r.props) == null ? void 0 : u.id;
+      if (!n)
+        throw new Error("Not Found Current Modal Container");
+      o.close(n, e);
+    },
+    closeAll() {
+      if (!o)
+        throw new Error("Not Found Modal Provider Component");
+      o.closeAll();
+    }
+  };
+}
+function Ne(o) {
+  var u;
+  const i = N(z), e = Y(), r = U(e, "ModalContainer"), n = (u = r == null ? void 0 : r.props) == null ? void 0 : u.id;
+  i && n && i.addSubmitListener(n, o);
+}
+export {
+  ze as ModalContainer,
+  z as ModalKey,
+  He as ModalProvider,
+  Ne as onSubmit,
+  We as useModal
+};

package/dist/es/interfaces.d.ts

@@ -0,0 +1,37 @@
+import type { Component, Ref } from 'vue';
+import type { useModal } from './hooks/use-modal';
+export interface SizeOptions {
+    small: number;
+    middle: number;
+    large: number;
+}
+export interface OpenModalOptions {
+    closeable?: boolean;
+    esc?: boolean;
+    mask?: boolean;
+    maskClosable?: boolean;
+    title?: string;
+    header?: boolean;
+    footer?: boolean;
+    width?: number | string;
+    size?: 'large' | 'middle' | 'small';
+    fullscreen?: boolean;
+    draggable?: boolean;
+    form?: string;
+    mode?: 'dialog' | 'drawer';
+}
+export interface ModalElement extends OpenModalOptions {
+    id: string;
+    resolve: (data?: any) => void;
+    component: Component;
+    props: Record<string, any>;
+    options: OpenModalOptions;
+    onSubmit: Ref<((actions: ReturnType<typeof useModal>) => void) | null>;
+}
+export interface ModalActions {
+    open: (component: Component, props: Record<string, any>, options: OpenModalOptions) => Promise<any | void>;
+    close: (id: string, data?: any) => void;
+    closeAll: () => void;
+    getElement: (id: string) => ModalElement | undefined;
+    addSubmitListener: (id: string, fun: (modal: ReturnType<typeof useModal>) => void) => void;
+}

package/dist/es/utils/find-container.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInternalInstance } from 'vue';
+export declare function findContainer(ctx: ComponentInternalInstance | null, name: 'ModalContainer' | 'ModalProvider'): ComponentInternalInstance | null;

package/dist/style.css

@@ -1 +1 @@
-*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.i-icon-park-outline\:close{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 48 48' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='m8 8l32 32M8 40L40 8'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em}.fixed{position:fixed}.block{display:block}.flex{display:flex}.cursor-pointer{cursor:pointer}.resize{resize:both}.space-x-2>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(.5rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(.5rem * var(--un-space-x-reverse))}.px{padding-left:1rem;padding-right:1rem}.font-bold{font-weight:700}.outline{outline-style:solid}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease{transition-timing-function:cubic-bezier(.4,0,.2,1)}.modal-wrapper[data-v-05b670ad]{z-index:1000;position:fixed;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;background:rgba(0,0,0,.3)}.modal-content[data-v-05b670ad]{background:#ffffff;border-radius:5px}.modal-header[data-v-05b670ad]{box-sizing:border-box;padding:10px;height:50px;display:flex;justify-content:space-between;align-items:center;border-bottom:solid 1px var(--color-border-1, #e8e8e8)}.modal-body[data-v-05b670ad]{padding:20px 10px;box-sizing:border-box;max-height:10vw;overflow:auto}.modal-footer[data-v-05b670ad]{box-sizing:border-box;height:50px;border-top:solid 1px var(--color-border-1, #e8e8e8);display:flex;justify-content:end;padding:10px}.modal-footer button[data-v-05b670ad]{height:28px;line-height:28px;width:80px;outline:none;border-color:transparent;font-size:14px;border-radius:4px;padding:0;box-sizing:content-box}.modal-footer button.submit-button[data-v-05b670ad]{color:#fff;background-color:rgb(var(--primary-6, 45, 106, 251))}.modal-footer button.submit-button[data-v-05b670ad]:hover{background-color:rgb(var(--primary-5, 28, 76, 207))}.modal-footer button.cancel-button[data-v-05b670ad]{color:rgb(var(--color-text-2, 78, 89, 105));background-color:var(--color-fill-1, #f5f5f5)}.modal-footer button.cancel-button[data-v-05b670ad]:hover{background-color:var(--color-fill-4, #c9cdd4)}.modal-fade-enter-active[data-v-171d9bdd],.modal-fade-leave-active[data-v-171d9bdd]{transition:all .5s ease}.modal-fade-enter-from[data-v-171d9bdd],.modal-fade-leave-to[data-v-171d9bdd]{opacity:0}
+*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.i-icon-park-outline\:close{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 48 48' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='m8 8l32 32M8 40L40 8'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em}.fixed{position:fixed}.block{display:block}.flex{display:flex}.transform{transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.cursor-pointer{cursor:pointer}.resize{resize:both}.space-x-2>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(.5rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(.5rem * var(--un-space-x-reverse))}.px{padding-left:1rem;padding-right:1rem}.font-bold{font-weight:700}.outline{outline-style:solid}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease{transition-timing-function:cubic-bezier(.4,0,.2,1)}.modal-wrapper[data-v-33b22316]{z-index:1000;position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;background:rgba(0,0,0,.3)}.modal-content[data-v-33b22316]{background:#ffffff;border-radius:5px}.modal-header[data-v-33b22316]{box-sizing:border-box;padding:10px;height:50px;display:flex;justify-content:space-between;align-items:center;border-bottom:solid 1px var(--color-border-1, #e8e8e8)}.modal-body[data-v-33b22316]{padding:20px 10px;box-sizing:border-box;max-height:10vw;overflow:auto}.modal-footer[data-v-33b22316]{box-sizing:border-box;height:50px;border-top:solid 1px var(--color-border-1, #e8e8e8);display:flex;justify-content:end;padding:10px}.modal-footer button[data-v-33b22316]{height:28px;line-height:28px;width:80px;outline:none;border-color:transparent;font-size:14px;border-radius:4px;padding:0;box-sizing:content-box}.modal-footer button.submit-button[data-v-33b22316]{color:#fff;background-color:rgb(var(--primary-6, 45, 106, 251))}.modal-footer button.submit-button[data-v-33b22316]:hover{background-color:rgb(var(--primary-5, 28, 76, 207))}.modal-footer button.cancel-button[data-v-33b22316]{color:rgb(var(--color-text-2, 78, 89, 105));background-color:var(--color-fill-1, #f5f5f5)}.modal-footer button.cancel-button[data-v-33b22316]:hover{background-color:var(--color-fill-4, #c9cdd4)}.modal-fade-enter-active[data-v-cec9e05a],.modal-fade-leave-active[data-v-cec9e05a]{transition:opacity .5s ease}.modal-fade-enter-active[data-v-cec9e05a] .modal-content.drawer-mode,.modal-fade-leave-active[data-v-cec9e05a] .modal-content.drawer-mode{transition:transform .5s ease}.modal-fade-enter-from[data-v-cec9e05a],.modal-fade-leave-to[data-v-cec9e05a]{opacity:0}.modal-fade-enter-from[data-v-cec9e05a] .modal-content.drawer-mode,.modal-fade-leave-to[data-v-cec9e05a] .modal-content.drawer-mode{transform:translate3d(100%,0,0)}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gopowerteam/modal-render",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "author": {
     "name": "zhuchentong",
     "email": "2037630@gmail.com"
@@ -15,19 +15,29 @@
   "bugs": {
     "url": "https://github.com/gopowerteam/x-render/issues"
   },
+  "main": "./dist/cjs/index.cjs",
+  "module": "./dist/es/index.mjs",
+  "types": "./dist/es/index.d.ts",
   "exports": {
     ".": {
-      "require": "./dist/index.cjs",
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      }
+      "types": "./dist/es/index.d.ts",
+      "import": "./dist/es/index.mjs",
+      "require": "./dist/cjs/index.cjs"
     },
-    "./dist/": "./dist/"
+    "./es": {
+      "types": "./dist/es/index.d.ts",
+      "import": "./dist/es/index.mjs"
+    },
+    "./cjs": {
+      "types": "./dist/cjs/index.d.ts",
+      "require": "./dist/cjs/index.cjs"
+    },
+    "./dist/style.css": {
+      "require": "./dist/style.css",
+      "import": "./dist/style.css"
+    },
+    "./*": "./*"
   },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
   "files": [
     "dist",
     "README.md"

package/dist/hooks/on-submit.d.ts

@@ -1 +0,0 @@
-export declare function onSubmit(callback: () => void): void;

package/dist/index.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue");const C=Symbol("__MODAL__");function O(o){return e.getCurrentScope()?(e.onScopeDispose(o),!0):!1}function g(o){return typeof o=="function"?o():e.unref(o)}const V=typeof window<"u"&&typeof document<"u",D=Object.prototype.toString,W=o=>D.call(o)==="[object Object]",T=()=>{};function F(o,s={}){if(!e.isRef(o))return e.toRefs(o);const t=Array.isArray(o.value)?Array.from({length:o.value.length}):{};for(const r in o.value)t[r]=e.customRef(()=>({get(){return o.value[r]},set(l){var d;if((d=g(s.replaceRef))!=null?d:!0)if(Array.isArray(o.value)){const m=[...o.value];m[r]=l,o.value=m}else{const m={...o.value,[r]:l};Object.setPrototypeOf(m,Object.getPrototypeOf(o.value)),o.value=m}else o.value[r]=l}}));return t}function H(o){var s;const t=g(o);return(s=t==null?void 0:t.$el)!=null?s:t}const R=V?window:void 0;function z(...o){let s,t,r,l;if(typeof o[0]=="string"||Array.isArray(o[0])?([t,r,l]=o,s=R):[s,t,r,l]=o,!s)return T;Array.isArray(t)||(t=[t]),Array.isArray(r)||(r=[r]);const d=[],y=()=>{d.forEach(u=>u()),d.length=0},m=(u,a,f,p)=>(u.addEventListener(a,f,p),()=>u.removeEventListener(a,f,p)),v=e.watch(()=>[H(s),g(l)],([u,a])=>{if(y(),!u)return;const f=W(a)?{...a}:a;d.push(...t.flatMap(p=>r.map(b=>m(u,p,b,f))))},{immediate:!0,flush:"post"}),c=()=>{v(),y()};return O(c),c}function I(o,s={}){var t,r;const{pointerTypes:l,preventDefault:d,stopPropagation:y,exact:m,onMove:v,onEnd:c,onStart:u,initialValue:a,axis:f="both",draggingElement:p=R,containerElement:b,handle:x=o}=s,h=e.ref((t=g(a))!=null?t:{x:0,y:0}),_=e.ref(),k=i=>l?l.includes(i.pointerType):!0,E=i=>{g(d)&&i.preventDefault(),g(y)&&i.stopPropagation()},M=i=>{var w;if(!k(i)||g(m)&&i.target!==g(o))return;const P=((w=g(b))!=null?w:g(o)).getBoundingClientRect(),N={x:i.clientX-P.left,y:i.clientY-P.top};(u==null?void 0:u(N,i))!==!1&&(_.value=N,E(i))},S=i=>{if(!k(i)||!_.value)return;let{x:w,y:B}=h.value;(f==="x"||f==="both")&&(w=i.clientX-_.value.x),(f==="y"||f==="both")&&(B=i.clientY-_.value.y),h.value={x:w,y:B},v==null||v(h.value,i),E(i)},n=i=>{k(i)&&_.value&&(_.value=void 0,c==null||c(h.value,i),E(i))};if(V){const i={capture:(r=s.capture)!=null?r:!0};z(x,"pointerdown",M,i),z(p,"pointermove",S,i),z(p,"pointerup",n,i)}return{...F(h),position:h,isDragging:e.computed(()=>!!_.value),style:e.computed(()=>`left:${h.value.x}px;top:${h.value.y}px;`)}}const X={class:"modal-container"},Y={class:"title font-bold"},q={class:"action"},K={key:1,class:"modal-footer space-x-2"},G=["form"],U={name:"ModalContainer",inheritAttrs:!0},J=e.defineComponent({...U,props:{id:{},form:{},component:{},componentProps:{},width:{},maxWidth:{},maxHeight:{},sizes:{},size:{default:"middle"},title:{},header:{type:Boolean,default:!0},footer:{type:Boolean,default:!1},closeable:{type:Boolean,default:!0},esc:{type:Boolean,default:!1},maskClosable:{type:Boolean,default:!1},draggable:{type:Boolean,default:!1}},emits:["submit"],setup(o,{emit:s}){const t=o,r=s,l=e.inject(C);let d=0,y=0;const m=e.shallowRef(),v=e.shallowRef(),c=e.shallowRef(),{x:u,y:a}=I(c,{initialValue:{x:0,y:0}});function f(){l==null||l.close(t.id)}function p(n){if(typeof n=="number")return`${n}px`;if(typeof n=="string")return n}const b=e.computed(()=>{const n={};return t.size&&(n.width=p(t.sizes[t.size])),t.width&&(n.width=p(t.width)),t.maxWidth&&(n.maxWidth=p(t.maxWidth)),t.size==="fullscreen"&&(n.maxWidth="unset",n.position="fixed",n.top=0,n.left=0,n.bottom=0,n.right=0),t.draggable&&t.size!=="fullscreen"&&(n.transform=`translate(${u.value-d}px, ${a.value-y}px)`),n}),x=e.computed(()=>{const n={};return t.draggable&&t.size!=="fullscreen"&&(n.cursor="move"),n}),h=e.computed(()=>{var i;const n={};return t.maxHeight&&(n.maxHeight=`calc(${(i=p(t.maxWidth))==null?void 0:i.replace("%","vh")} - 50px)`),t.size==="fullscreen"&&(n.maxHeight="calc(100% - 50px)"),n});function _(){const n=v.value;if(t.form&&n){const i=n.querySelector(`form[name="${t.form}"]`);i&&i.dispatchEvent(new Event("submit"))}r("submit")}function k(){l==null||l.close(t.id)}function E(){window&&window.addEventListener("resize",()=>{e.triggerRef(m),e.triggerRef(v),d=v.value.offsetLeft,y=v.value.offsetTop})}function M(){if(t.closeable&&t.esc){const n=({key:i})=>{i==="Escape"&&(l==null||l.close(t.id),window.removeEventListener("keydown",n))};window.addEventListener("keydown",n)}}function S(){d=v.value.offsetLeft,y=v.value.offsetTop}return e.onMounted(()=>{M(),E()}),e.onUnmounted(()=>{}),(n,i)=>(e.openBlock(),e.createElementBlock("div",X,[e.createElementVNode("div",{ref_key:"wrapperRef",ref:m,class:"modal-wrapper",onClick:i[0]||(i[0]=e.withModifiers(w=>n.maskClosable&&f(),["self"]))},[e.createElementVNode("div",{ref_key:"contentRef",ref:v,class:"modal-content",style:e.normalizeStyle(b.value)},[n.header?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"headerRef",ref:c,class:"modal-header",style:e.normalizeStyle(x.value),onMousedown:S},[e.createElementVNode("div",Y,e.toDisplayString(n.title),1),e.createElementVNode("div",q,[n.closeable?(e.openBlock(),e.createElementBlock("div",{key:0,class:"i-icon-park-outline:close block cursor-pointer",onClick:f})):e.createCommentVNode("",!0)])],36)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"modal-body",style:e.normalizeStyle(h.value)},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.component),e.normalizeProps(e.guardReactiveProps(n.componentProps)),null,16))],4),n.footer?(e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("button",{class:"submit-button",form:n.form,type:"submit",onClick:_}," 确定 ",8,G),e.createElementVNode("button",{class:"cancel-button",type:"button",onClick:k}," 取消 ")])):e.createCommentVNode("",!0)],4)],512)]))}});const $=(o,s)=>{const t=o.__vccOpts||o;for(const[r,l]of s)t[r]=l;return t},L=$(J,[["__scopeId","data-v-05b670ad"]]),Q={key:0,class:"modal-teleport"},Z={name:"ModalProvider",inheritAttrs:!0},j=e.defineComponent({...Z,props:{appendToBody:{type:Boolean,default:!1},sizes:{default:()=>({small:520,middle:860,large:1190})},maxWidth:{default:"80%"},maxHeight:{default:"80%"}},setup(o,{expose:s}){const t=e.shallowRef([]),r=e.ref(!1);async function l(c,u,a){const f=e.defineAsyncComponent(()=>Promise.resolve(c));return new Promise(p=>{t.value.push({id:Math.random().toString(32).slice(2),component:f,props:u,options:a,resolve:p,onSubmit:e.ref(()=>{})}),e.triggerRef(t)})}function d(c,u){const a=t.value.findIndex(p=>p.id===c);if(a<0)return;const f=t.value[a];f==null||f.resolve(u),t.value.splice(a,1),e.triggerRef(t)}function y(){t.value.forEach(c=>{c.resolve()}),t.value=[],e.triggerRef(t)}function m(c){return t.value.find(u=>u.id===c)}function v(c,u){const a=t.value.find(f=>f.id===c);a&&(a.onSubmit.value=u)}return e.provide(C,{open:l,close:d,closeAll:y,getElement:m,addSubmitListener:v}),s({elements:t}),e.onMounted(()=>{r.value=!0}),(c,u)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.renderSlot(c.$slots,"default",{},void 0,!0),r.value?(e.openBlock(),e.createElementBlock("div",Q,[(e.openBlock(),e.createBlock(e.Teleport,{disabled:!c.appendToBody,to:"body"},[e.createVNode(e.TransitionGroup,{name:"modal-fade"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,a=>(e.openBlock(),e.createBlock(L,e.mergeProps({id:a.id,key:a.id,component:a.component,"component-props":a.props,"max-height":c.maxHeight,"max-width":c.maxWidth,sizes:c.sizes},a.options,{onSubmit:a.onSubmit.value}),null,16,["id","component","component-props","max-height","max-width","sizes","onSubmit"]))),128))]),_:1})],8,["disabled"]))])):e.createCommentVNode("",!0)],64))}});const ee=$(j,[["__scopeId","data-v-171d9bdd"]]);function A(o,s){var r,l;let t=o==null?void 0:o.parent;for(;t&&((r=t==null?void 0:t.type)==null?void 0:r.name)!==s;)t=t.parent;return((l=t==null?void 0:t.type)==null?void 0:l.name)===s?t:null}function te(){const o=e.inject(C),s=e.getCurrentInstance();return{open(t,r,l){if(!o)throw new Error("Not Found Modal Provider Component");return o.open(t,r||{},l||{})},close(t){var d;if(!o)throw new Error("Not Found Modal Provider Component");const r=A(s,"ModalContainer"),l=(d=r==null?void 0:r.props)==null?void 0:d.id;if(!l)throw new Error("Not Found Current Modal Container");o.close(l,t)},closeAll(){if(!o)throw new Error("Not Found Modal Provider Component");o.closeAll()},onSubmit(t){const r=A(s,"ModalContainer");if(!(r==null?void 0:r.props.id))throw new Error("Not Found Current Modal Container")}}}function oe(o){var d;const s=e.inject(C),t=e.getCurrentInstance(),r=A(t,"ModalContainer"),l=(d=r==null?void 0:r.props)==null?void 0:d.id;s&&l&&s.addSubmitListener(l,o)}exports.ModalContainer=L;exports.ModalProvider=ee;exports.onSubmit=oe;exports.useModal=te;