hys-ui 0.1.1 → 0.3.0

package/dist/composables/useHysModal.js

@@ -0,0 +1,185 @@
+import { createApp as q, defineComponent as E, getCurrentInstance as T, shallowReactive as y, h as C, Fragment as D, onDeactivated as F, onActivated as Q, onScopeDispose as j, nextTick as v, render as M } from "vue";
+import I from "../components/HysModal/HysModal.vue.js";
+import { provideHysConfig as N } from "../config.js";
+let P = 0;
+function R(l = {}) {
+  const a = T();
+  if (!a)
+    throw new Error("useHysModal must be called during component setup");
+  const i = y([]);
+  let t, d = !0, b = !1;
+  function O(e) {
+    try {
+      e == null || e();
+    } catch (o) {
+      try {
+        a.appContext.config.errorHandler ? a.appContext.config.errorHandler(
+          o,
+          a.proxy,
+          "HysModal callback"
+        ) : console.error(o);
+      } catch (c) {
+        console.error(c);
+      }
+    }
+  }
+  function u(e, o = e.result ?? { action: "cancel", reason: "api" }) {
+    if (e.finished) return;
+    e.finished = !0;
+    const c = i.indexOf(e);
+    c >= 0 && i.splice(c, 1), v(async () => {
+      await v(), e.resolve(o), O(() => {
+        var n, f;
+        return (f = (n = e.options).onAfterClose) == null ? void 0 : f.call(n, o);
+      }), t && !i.length && (M(null, t), t.remove(), t = void 0);
+    });
+  }
+  const x = E({
+    name: "HysModalQueue",
+    setup() {
+      return () => C(
+        D,
+        i.map((e) => {
+          const { content: o, onOk: c, onCancel: n, onAfterClose: f, ...r } = e.options;
+          return C(
+            I,
+            {
+              ...r,
+              key: e.id,
+              open: e.open,
+              appendTo: l.appendTo ?? "body",
+              ref: (s) => {
+                e.instance = s;
+              },
+              beforeConfirm: e.beforeConfirm,
+              beforeClose: e.beforeClose,
+              "onUpdate:open": (s) => {
+                e.open = s;
+              },
+              onOk: () => {
+                e.result = { action: "confirm", reason: "confirm" };
+              },
+              onCancel: (s) => {
+                e.result = { action: "cancel", reason: s.reason };
+              },
+              onClosed: () => u(e)
+            },
+            {
+              default: (s) => typeof o == "function" ? o(s) : o
+            }
+          );
+        })
+      );
+    }
+  });
+  function A() {
+    if (t) return;
+    t = document.createElement("div"), t.className = "hys-ui-modal-service", document.body.append(t);
+    const e = C(x);
+    e.appContext = {
+      ...a.appContext,
+      provides: a.provides
+    }, M(e, t);
+  }
+  function g(e) {
+    if (b || !d) throw new Error("HysModal owner is inactive");
+    if (typeof document > "u")
+      throw new Error("HysModal requires a browser document");
+    let o;
+    const c = new Promise((r) => o = r), n = y({
+      id: "hys-modal-" + ++P,
+      open: !0,
+      finished: !1,
+      options: y({
+        footer: !0,
+        closeOnMask: !1,
+        initialFocus: "confirm",
+        ...l.defaults,
+        ...e
+      }),
+      resolve: o,
+      async beforeConfirm(r) {
+        var s, m, w, h;
+        return await ((m = (s = n.options).beforeConfirm) == null ? void 0 : m.call(s, r)) === !1 || r.signal.aborted ? !1 : (h = (w = n.options).onOk) == null ? void 0 : h.call(w, r);
+      },
+      async beforeClose(r, s) {
+        var m, w, h, H;
+        if (await ((w = (m = n.options).beforeClose) == null ? void 0 : w.call(m, r, s)) === !1 || s.signal.aborted)
+          return !1;
+        if (r !== "confirm") return (H = (h = n.options).onCancel) == null ? void 0 : H.call(h, s);
+      }
+    });
+    i.push(n), A();
+    async function f(r) {
+      return await v(), !n.finished && n.instance ? n.instance[r]() : !1;
+    }
+    return {
+      id: n.id,
+      closed: c,
+      update(r) {
+        n.finished || Object.assign(n.options, r);
+      },
+      confirm: () => f("confirm"),
+      cancel: () => f("cancel"),
+      close: () => f("close"),
+      destroy: () => u(n, { action: "destroy", reason: "destroy" })
+    };
+  }
+  const p = (e, o) => g({
+    title: {
+      confirm: "操作确认",
+      info: "提示",
+      success: "操作成功",
+      warning: "注意",
+      error: "操作失败",
+      default: "提示"
+    }[e],
+    showCancel: e === "confirm",
+    ...typeof o == "string" ? { content: o } : o,
+    type: e
+  }), k = () => {
+    for (const e of [...i])
+      u(e, { action: "destroy", reason: "destroy" });
+  };
+  return F(() => {
+    d = !1;
+    for (const e of [...i])
+      u(e, { action: "owner-dispose", reason: "owner-dispose" });
+  }), Q(() => {
+    d = !0;
+  }), j(() => {
+    b = !0, d = !1;
+    for (const e of [...i])
+      u(e, { action: "owner-dispose", reason: "owner-dispose" });
+  }), {
+    show: g,
+    confirm: (e) => p("confirm", e),
+    info: (e) => p("info", e),
+    success: (e) => p("success", e),
+    warning: (e) => p("warning", e),
+    error: (e) => p("error", e),
+    destroyAll: k
+  };
+}
+function B(l = {}) {
+  if (typeof document > "u")
+    throw new Error("HysModal requires a browser document");
+  let a, i = !1;
+  const t = q(
+    E({
+      setup() {
+        return N(l), a = R(l), () => null;
+      }
+    })
+  ), d = document.createElement("div");
+  return t.mount(d), {
+    ...a,
+    dispose() {
+      i || (i = !0, t.unmount());
+    }
+  };
+}
+export {
+  B as createHysModal,
+  R as useHysModal
+};

package/dist/composables/useModal.js

@@ -0,0 +1,295 @@
+import { computed as O, ref as b, shallowRef as de, watch as L, onMounted as ve, onActivated as me, onDeactivated as ye, onBeforeUnmount as be, nextTick as P } from "vue";
+import { useChoiceModel as ae } from "./choiceModel.js";
+import { useDialog as he } from "./useDialog.js";
+import { useHysRootAttrs as ge } from "../config.js";
+import { useModalInteraction as Ce } from "./useModalInteraction.js";
+function Se(a, v, o, te = {}) {
+  const h = ae(
+    {
+      get modelValue() {
+        return a.open === void 0 ? a.modelValue : a.open;
+      }
+    },
+    () => !!a.defaultOpen
+  ), A = ae(
+    {
+      get modelValue() {
+        return a.fullscreen;
+      }
+    },
+    () => !!a.defaultFullscreen
+  ), $ = O(() => !!A.current.value), u = b(!0), w = b(!1), i = b(!1), g = b(!1), V = b(!1), m = b(!1), k = b(""), ne = ge(), z = b(!1), f = de(), B = O(
+    () => {
+      var e;
+      return ((e = f.value) == null ? void 0 : e.kind) === "confirm" || !!a.confirmLoading;
+    }
+  ), I = O(
+    () => {
+      var e;
+      return ((e = f.value) == null ? void 0 : e.kind) === "close" || m.value || i.value && !h.current.value;
+    }
+  ), G = O(() => B.value || I.value || !!a.loading), F = O(
+    () => ne.value["data-hys-motion"] !== "off" && !z.value && a.transition !== !1 && a.transition !== "none" && a.transitionDuration !== 0
+  );
+  let H, K = 0, M = 0, j = -1, S = -1, C, r;
+  const c = Ce(
+    a,
+    v,
+    i,
+    $,
+    o,
+    {
+      beforeStart: x,
+      motion: () => F.value,
+      enabled: te.interaction !== !1
+    }
+  ), le = (e) => Number.isFinite(e) ? Math.max(0, Math.min(1, e)) : 1;
+  function x() {
+    C == null || C.cancel(), C = void 0;
+  }
+  function oe() {
+    var t, n, l, s;
+    const e = a.initialFocus;
+    if (e === !1) return !1;
+    if (e instanceof HTMLElement)
+      return e.isConnected ? e : void 0;
+    if (e === "dialog") return v.value;
+    if (e === "confirm" || e === "cancel")
+      return ((t = v.value) == null ? void 0 : t.querySelector(
+        `[data-hys-modal-${e}]:not(:disabled)`
+      )) ?? void 0;
+    if (e && e !== "auto")
+      try {
+        return ((n = v.value) == null ? void 0 : n.querySelector(e)) ?? void 0;
+      } catch {
+        return;
+      }
+    return ((l = v.value) == null ? void 0 : l.querySelector(
+      '[autofocus],input:not([disabled]):not([type="hidden"]),textarea:not([disabled]),select:not([disabled]),[data-hys-modal-initial-focus]'
+    )) ?? ((s = v.value) == null ? void 0 : s.querySelector(
+      ".hys-ui-dialog-body button:not(:disabled),.hys-ui-dialog-body a[href],[data-hys-modal-cancel]:not(:disabled),[data-hys-modal-confirm]:not(:disabled)"
+    )) ?? v.value;
+  }
+  const y = he(
+    g,
+    v,
+    () => {
+      if (c.gesturing.value) {
+        c.stop(!0);
+        return;
+      }
+      a.closeOnEscape !== !1 && q("escape");
+    },
+    {
+      lockScroll: () => a.lockScroll ?? !(a.modal === !1 && a.modalPenetrable),
+      trapFocus: () => a.trapFocus ?? !(a.modal === !1 && a.modalPenetrable),
+      restoreFocus: () => a.restoreFocus !== !1,
+      initialFocus: oe,
+      zIndex: () => a.zIndex,
+      childVisible: () => i.value,
+      onOpenAutoFocus: (e) => o("openAutoFocus", e),
+      onCloseAutoFocus: (e) => o("closeAutoFocus", e)
+    }
+  );
+  function D() {
+    var e;
+    (e = f.value) == null || e.controller.abort(), f.value = void 0;
+  }
+  function J(e, t, n) {
+    const l = new AbortController(), s = {
+      kind: e,
+      context: { reason: t, event: n, signal: l.signal },
+      controller: l
+    };
+    return f.value = s, k.value = "", s;
+  }
+  const R = (e) => u.value && y.active.value && i.value && f.value === e && !e.context.signal.aborted;
+  function Q(e, t, n) {
+    const l = "操作未完成，请重试";
+    try {
+      k.value = typeof a.errorText == "function" ? String(a.errorText(e, t)) : a.errorText ?? l;
+    } catch {
+      k.value = l;
+    }
+    o(t === "confirm" ? "confirmError" : "closeError", e, n);
+  }
+  async function N(e) {
+    return !u.value || !y.active.value ? !1 : h.current.value === e ? !0 : h.commit(
+      e,
+      (t) => {
+        o("update:open", t), o("update:modelValue", t);
+      },
+      () => {
+      }
+    );
+  }
+  async function q(e = "button", t) {
+    const n = typeof e == "string" ? e : "button";
+    if (typeof e != "string" && (t = e), n === "confirm") return U(t);
+    if (!u.value || !y.active.value || !i.value || I.value || B.value && !a.closeWhileConfirming)
+      return !1;
+    f.value && D();
+    const l = J("close", n, t);
+    try {
+      return a.beforeClose && await a.beforeClose(n, l.context) === !1 || !R(l) ? !1 : (o("cancel", l.context), o("close"), await N(!1));
+    } catch (s) {
+      return R(l) && Q(s, "close", l.context), !1;
+    } finally {
+      f.value === l && (f.value = void 0);
+    }
+  }
+  async function U(e) {
+    var n;
+    if (!u.value || !y.active.value || !i.value || G.value || a.confirmDisabled || (n = a.okButtonProps) != null && n.disabled)
+      return !1;
+    const t = J("confirm", "confirm", e);
+    try {
+      return a.beforeConfirm && await a.beforeConfirm(t.context) === !1 || !R(t) || a.closeOnConfirm !== !1 && a.beforeClose && await a.beforeClose("confirm", t.context) === !1 || !R(t) ? !1 : (o("ok", t.context), a.closeOnConfirm === !1 ? !0 : (o("close"), await N(!1)));
+    } catch (l) {
+      return R(t) && Q(l, "confirm", t.context), !1;
+    } finally {
+      f.value === t && (f.value = void 0);
+    }
+  }
+  const ie = (e) => Number.isFinite(e) ? Math.max(0, Math.min(3e4, e)) : 0;
+  function W() {
+    clearTimeout(H);
+    const e = ++K;
+    if (!u.value || !y.active.value || w.value) {
+      x(), D(), c.stop(!0), i.value = !1, g.value = !1, m.value = !1;
+      return;
+    }
+    const t = !!h.current.value;
+    if (t || D(), t === i.value) return;
+    const n = () => {
+      e !== K || !u.value || !y.active.value || w.value || (t ? (M++, j = -1, S = -1, m.value = !1, V.value = !0, k.value = "", g.value = !0, i.value = !0, o("open"), o("visibleChange", !0)) : (x(), m.value = !0, S = M, c.stop(!0), i.value = !1, F.value || (g.value = !1), o("visibleChange", !1)));
+    }, l = ie(t ? a.openDelay : a.closeDelay);
+    l ? H = setTimeout(n, l) : n();
+  }
+  async function ue() {
+    const e = M;
+    await P(), await P(), u.value && i.value && e === M && j !== e && (j = e, o("opened"));
+  }
+  async function Z() {
+    const e = S;
+    !m.value || i.value || e < 0 || (g.value = !1, m.value = !1, a.destroyOnClose !== !1 && !a.forceRender && (V.value = !1), a.resetPositionOnClose !== !1 && c.resetPosition(), a.resetSizeOnClose !== !1 && c.resetSize(), await P(), await P(), u.value && !i.value && M === e && S === e && (S = -1, o("closed"), o("afterClose")));
+  }
+  async function re() {
+    if (!u.value || !y.active.value) return !1;
+    w.value = !1;
+    const e = await N(!0);
+    return e && W(), e;
+  }
+  async function _(e) {
+    if (!u.value || !i.value) return !1;
+    if (c.stop(!0), A.current.value === e) return !0;
+    const t = v.value, n = t == null ? void 0 : t.getBoundingClientRect(), l = t ? getComputedStyle(t).borderRadius : "0px";
+    x();
+    const s = await A.commit(
+      e,
+      (d) => o("update:fullscreen", d),
+      (d) => o("fullscreenChange", d)
+    );
+    if (s && !e && (c.clampViewport(), await P()), s && F.value && t && n && i.value && u.value && typeof t.animate == "function") {
+      const d = t.getBoundingClientRect(), Y = getComputedStyle(t);
+      if (d.width > 0 && d.height > 0) {
+        const ee = Y.transform === "none" ? "" : Y.transform, T = t.animate(
+          [
+            {
+              transformOrigin: "0 0",
+              transform: `translate(${n.left - d.left}px,${n.top - d.top}px) ${ee} scale(${n.width / d.width},${n.height / d.height})`,
+              borderRadius: l
+            },
+            {
+              transformOrigin: "0 0",
+              transform: ee || "none",
+              borderRadius: Y.borderRadius
+            }
+          ],
+          {
+            duration: Math.max(
+              0,
+              Math.min(1e3, a.transitionDuration ?? 220)
+            ),
+            easing: "cubic-bezier(.22,1,.36,1)"
+          }
+        );
+        C = T, T.onfinish = () => {
+          C === T && (C = void 0);
+        }, T.oncancel = T.onfinish;
+      }
+    }
+    return s;
+  }
+  function ce(e) {
+    if (a.draggable && e.altKey && e.key === "Home" && !e.defaultPrevented && !e.isComposing) {
+      e.preventDefault(), c.resetPosition();
+      return;
+    }
+    a.confirmOnCtrlEnter && (e.ctrlKey || e.metaKey) && e.key === "Enter" && !e.isComposing && e.keyCode !== 229 && (e.preventDefault(), U(e));
+  }
+  let E;
+  function fe(e) {
+    e.target === e.currentTarget && e.button === 0 ? E = { id: e.pointerId, x: e.clientX, y: e.clientY } : E = void 0;
+  }
+  function se(e) {
+    const t = E;
+    E = void 0, t && t.id === e.pointerId && e.target === e.currentTarget && Math.hypot(t.x - e.clientX, t.y - e.clientY) < 6 && a.closeOnMask !== !1 && q("mask", e);
+  }
+  function X(e) {
+    z.value = e.matches;
+  }
+  function p() {
+    x(), u.value = !1, w.value = !0, K++, clearTimeout(H), D(), c.stop(!0), i.value = !1, g.value = !1, m.value = !1, r == null || r.removeEventListener("change", X), a.destroyOnClose !== !1 && !a.forceRender && (V.value = !1), h.current.value && (o("update:open", !1), o("update:modelValue", !1));
+  }
+  return L(
+    h.current,
+    (e, t) => {
+      e && e !== t && (w.value = !1), W();
+    },
+    { immediate: !0, flush: "sync" }
+  ), L([y.active, u, w], W, { flush: "post" }), L(
+    () => [a.beforeClose, a.beforeConfirm],
+    () => D()
+  ), L(F, (e) => {
+    e || x(), !e && m.value && Z();
+  }), ve(() => {
+    var e;
+    r = (e = window.matchMedia) == null ? void 0 : e.call(window, "(prefers-reduced-motion: reduce)"), z.value = !!(r != null && r.matches), r == null || r.addEventListener("change", X);
+  }), me(() => {
+    u.value = !0, c.activate(), r == null || r.addEventListener("change", X);
+  }), ye(p), be(p), {
+    model: h,
+    alpha: le,
+    fullscreen: $,
+    live: u,
+    state: y,
+    shown: i,
+    engaged: g,
+    rendered: V,
+    leaving: m,
+    error: k,
+    confirming: B,
+    closing: I,
+    busy: G,
+    motion: F,
+    interaction: c,
+    show: re,
+    requestClose: q,
+    confirm: U,
+    cancel: (e) => {
+      var t;
+      return a.cancelDisabled || (t = a.cancelButtonProps) != null && t.disabled ? Promise.resolve(!1) : q("cancel", e);
+    },
+    setFullscreen: _,
+    toggleFullscreen: () => _(!$.value),
+    afterEnter: ue,
+    afterLeave: Z,
+    key: ce,
+    maskDown: fe,
+    maskUp: se
+  };
+}
+export {
+  Se as useModal
+};