hys-ui 0.2.0 → 0.4.0

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

package/dist/composables/useModalInteraction.js

@@ -0,0 +1,394 @@
+import { shallowRef as ue, ref as B, watch as W, nextTick as P, onMounted as se, onDeactivated as me, onBeforeUnmount as ve, computed as ce } from "vue";
+import { modalLength as de, modalWidth as ge } from "./modal.js";
+function xe(r, d, s, v, w, h = {}) {
+  const o = ue({ x: 0, y: 0 }), f = ue(), I = B(!1), S = B(!1), R = B(!1), C = B(!1), b = B();
+  let z = 0, c, m = !0, a;
+  const x = (e, t = 0) => Number.isFinite(e) ? e : t;
+  function G() {
+    if (!a && c && o.value.x === 0 && o.value.y === 0)
+      return;
+    l(!0);
+    const e = o.value;
+    o.value = { x: 0, y: 0 }, M(o.value, void 0, !1, !0), ie(e, o.value);
+  }
+  function T() {
+    if (!a && c && f.value === void 0) return;
+    l(!0);
+    const e = d.value, t = f.value !== void 0, i = t && m && s.value && !v.value ? e == null ? void 0 : e.getBoundingClientRect() : void 0;
+    if (f.value = void 0, !(!t || v.value) && (M(o.value, void 0, !0, !0), i && e && ee())) {
+      const n = e.getBoundingClientRect();
+      if (n.width > 0 && n.height > 0) {
+        const u = `translate3d(${o.value.x}px,${o.value.y}px,0)`;
+        te([
+          {
+            transformOrigin: "0 0",
+            transform: `translate(${i.left - n.left}px,${i.top - n.top}px) ${u} scale(${i.width / n.width},${i.height / n.height})`
+          },
+          { transformOrigin: "0 0", transform: u }
+        ]);
+      }
+    }
+  }
+  const X = () => {
+    var e, t, i, n;
+    return {
+      width: ((t = (e = d.value) == null ? void 0 : e.parentElement) == null ? void 0 : t.clientWidth) || document.documentElement.clientWidth || window.innerWidth,
+      height: ((n = (i = d.value) == null ? void 0 : i.parentElement) == null ? void 0 : n.clientHeight) || document.documentElement.clientHeight || window.innerHeight
+    };
+  };
+  function F(e, t, i = o.value, n = X(), u) {
+    if (r.overflow) {
+      if (r.keepHandleVisible === !1) return e;
+      const oe = u ?? O().map((D) => D.getBoundingClientRect());
+      if (oe.length) {
+        let D = -1 / 0, q = 1 / 0, N = 1 / 0, j = -1 / 0;
+        for (const $ of oe)
+          D = Math.max(D, $.left), q = Math.min(q, $.right), N = Math.min(N, $.top), j = Math.max(j, $.bottom);
+        return {
+          x: Math.max(
+            8 - D + i.x,
+            Math.min(n.width - 8 - q + i.x, e.x)
+          ),
+          y: Math.max(
+            8 - N + i.y,
+            Math.min(n.height - 8 - j + i.y, e.y)
+          )
+        };
+      }
+      return e;
+    }
+    const { width: g, height: y } = n, E = 8 - t.left + i.x, k = g - 8 - t.right + i.x, L = 8 - t.top + i.y, H = y - 8 - t.bottom + i.y;
+    return {
+      x: E > k ? (E + k) / 2 : Math.max(E, Math.min(k, e.x)),
+      y: L > H ? Math.max(
+        L,
+        Math.min(e.y, L + Math.max(0, t.height - 40))
+      ) : Math.max(L, Math.min(H, e.y))
+    };
+  }
+  function J(e) {
+    !m || !s.value || v.value || !d.value || (l(!0), o.value = F(
+      { x: x(e.x), y: x(e.y) },
+      d.value.getBoundingClientRect()
+    ), M(o.value, void 0, !1, !0));
+  }
+  function Q(e, t = X()) {
+    const i = r.overflow ? Math.max(240, r.maxWidth ?? 6e3) : Math.max(0, t.width - ((e == null ? void 0 : e.left) ?? 8) - 8), n = r.overflow ? 6e3 : Math.max(0, t.height - ((e == null ? void 0 : e.top) ?? 8) - 8), u = Math.min(
+      i,
+      Math.max(120, x(r.maxWidth ?? i, i))
+    ), g = typeof r.maxHeight == "number" ? r.maxHeight : typeof r.maxHeight == "string" && /^\d+(\.\d+)?px$/.test(r.maxHeight) ? parseFloat(r.maxHeight) : n, y = Math.min(
+      n,
+      Math.max(0, x(g, n))
+    );
+    return {
+      minWidth: Math.min(
+        u,
+        Math.max(120, x(r.minWidth ?? 280, 280))
+      ),
+      maxWidth: u,
+      minHeight: Math.min(
+        y,
+        Math.max(80, x(r.minHeight ?? 160, 160))
+      ),
+      maxHeight: y
+    };
+  }
+  function Z(e) {
+    if (!m || !s.value || v.value) return;
+    l(!0);
+    const t = Q();
+    f.value = {
+      width: Math.max(
+        t.minWidth,
+        Math.min(t.maxWidth, x(e.width, t.minWidth))
+      ),
+      height: Math.max(
+        t.minHeight,
+        Math.min(t.maxHeight, x(e.height, t.minHeight))
+      )
+    }, P(p);
+  }
+  function _() {
+    z = 0;
+    const e = a;
+    if (!e || !m || !s.value || !e.dirty) return;
+    e.dirty = !1;
+    const t = e.x - e.startX, i = e.y - e.startY;
+    if (e.kind === "drag")
+      e.previewPosition = F(
+        { x: e.position.x + t, y: e.position.y + i },
+        e.box,
+        e.position,
+        e.screen,
+        e.handleBoxes
+      ), M(e.previewPosition), w("drag", e.previewPosition);
+    else {
+      const n = e.bounds, u = {
+        width: Math.max(
+          n.minWidth,
+          Math.min(n.maxWidth, e.size.width + t)
+        ),
+        height: Math.max(
+          n.minHeight,
+          Math.min(n.maxHeight, e.size.height + i)
+        )
+      };
+      e.previewDimensions = u, e.previewPosition = {
+        x: e.position.x + (u.width - e.size.width) / 2,
+        y: e.position.y + (r.centered === !1 ? 0 : (u.height - e.size.height) / 2)
+      }, M(e.previewPosition, u, !0), w("resize", u);
+    }
+  }
+  function M(e, t, i = !1, n = !1) {
+    if (!n && !i && (a != null && a.preview)) {
+      b.value && (b.value.style.transform = `translate3d(${e.x - a.position.x}px,${e.y - a.position.y}px,0)`);
+      return;
+    }
+    const u = d.value;
+    u && (u.style.setProperty("--hys-ui-modal-x", e.x + "px"), u.style.setProperty("--hys-ui-modal-y", e.y + "px"), i && (u.style.width = de((t == null ? void 0 : t.width) ?? ge(r)) ?? "", u.style.height = de((t == null ? void 0 : t.height) ?? r.height) ?? ""));
+  }
+  function Y() {
+    c == null || c.cancel(), c = void 0;
+  }
+  function ee() {
+    var e, t;
+    return m && s.value && !v.value && ((e = h.motion) == null ? void 0 : e.call(h)) !== !1 && !!((t = d.value) != null && t.animate);
+  }
+  function te(e) {
+    Y();
+    const t = d.value;
+    if (!ee() || !t) return;
+    const i = t.animate(e, {
+      duration: Math.max(0, Math.min(1e3, r.transitionDuration ?? 200)),
+      easing: "cubic-bezier(.22,1,.36,1)"
+    });
+    c = i, i.onfinish = () => {
+      c === i && (c = void 0, P(p));
+    }, i.oncancel = () => {
+      c === i && (c = void 0);
+    };
+  }
+  function ie(e, t) {
+    var u;
+    Y();
+    const i = d.value;
+    if (!m || !s.value || v.value || ((u = h.motion) == null ? void 0 : u.call(h)) === !1 || !(i != null && i.animate) || e.x === t.x && e.y === t.y)
+      return;
+    const n = (g) => `translate3d(${g.x}px,${g.y}px,0)`;
+    te([
+      { transform: n(e) },
+      { transform: n(t) }
+    ]);
+  }
+  function ae(e) {
+    if (!(!a || e.pointerId !== a.pointerId)) {
+      if (e.pointerType !== "touch" && e.buttons === 0) {
+        l(!0);
+        return;
+      }
+      if (!a.activated) {
+        if (Math.hypot(
+          e.clientX - a.startX,
+          e.clientY - a.startY
+        ) < K())
+          return;
+        U(a);
+      }
+      e.preventDefault(), a.x = e.clientX, a.y = e.clientY, a.dirty = !0, z || (z = requestAnimationFrame(_));
+    }
+  }
+  function l(e = !1) {
+    var u, g, y;
+    if (!a) {
+      e && Y();
+      return;
+    }
+    cancelAnimationFrame(z), z = 0;
+    const t = a;
+    !e && t.activated && _();
+    const i = e ? t.position : t.previewPosition, n = e ? t.dimensions : t.previewDimensions;
+    t.activated && M(i, n, t.kind === "resize", !0), !e && t.preview && t.activated && ie(t.position, i), t.activated && (o.value = i), t.kind === "resize" && t.activated && (f.value = n), a = void 0, I.value = !1, S.value = !1, R.value = !1, C.value = !1, document.removeEventListener("pointermove", ae, !0), document.removeEventListener("pointerup", ne, !0), document.removeEventListener("pointercancel", A, !0), window.removeEventListener("blur", A), t.target.removeEventListener("lostpointercapture", A);
+    try {
+      (g = (u = t.target).releasePointerCapture) == null || g.call(u, t.pointerId);
+    } catch {
+    }
+    if (t.activated && !e && t.kind === "drag" && m && s.value) {
+      const E = X(), k = (L) => {
+        const H = L.getBoundingClientRect();
+        return H.left >= 0 && H.right <= E.width && H.top >= 0 && H.bottom <= E.height;
+      };
+      k(t.target) || (y = O().find(k)) == null || y.focus({ preventScroll: !0 });
+    }
+    t.activated && w(
+      t.kind === "drag" ? "dragEnd" : "resizeEnd",
+      t.kind === "drag" ? o.value : f.value ?? t.size,
+      { cancelled: e }
+    );
+  }
+  function ne(e) {
+    a && e.pointerId === a.pointerId && (!a.activated && Math.hypot(
+      e.clientX - a.startX,
+      e.clientY - a.startY
+    ) >= K() && U(a), a.x = e.clientX, a.y = e.clientY, a.dirty = !0, l());
+  }
+  function A() {
+    l(!0);
+  }
+  const K = () => Number.isFinite(r.dragThreshold) ? Math.max(0, r.dragThreshold) : 6;
+  function U(e) {
+    var t, i;
+    if (!e.activated) {
+      e.activated = !0, R.value = !1, I.value = e.kind === "drag", S.value = e.kind === "resize", C.value = e.preview, e.preview && P(() => {
+        a !== e || !b.value || (Object.assign(b.value.style, {
+          left: e.box.left + "px",
+          top: e.box.top + "px",
+          width: e.box.width + "px",
+          height: e.box.height + "px"
+        }), M(e.previewPosition));
+      }), e.target.focus({ preventScroll: !0 });
+      try {
+        (i = (t = e.target).setPointerCapture) == null || i.call(t, e.pointerId);
+      } catch {
+      }
+      e.target.addEventListener("lostpointercapture", A), w(
+        e.kind === "drag" ? "dragStart" : "resizeStart",
+        e.kind === "drag" ? o.value : e.size
+      );
+    }
+  }
+  function he(e, t) {
+    var g;
+    if (!m || !s.value || v.value || e.button !== 0 || !d.value || t === "drag" && !r.draggable || t === "resize" && !r.resizable || t === "drag" && e.target.closest(
+      'button,a,input,select,textarea,[contenteditable="true"],[data-hys-modal-no-drag]'
+    ) && !e.currentTarget.hasAttribute(
+      "data-hys-modal-drag-handle"
+    ))
+      return;
+    l(!0), (g = h.beforeStart) == null || g.call(h);
+    const i = d.value.getBoundingClientRect(), n = X(), u = e.currentTarget;
+    a = {
+      kind: t,
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startY: e.clientY,
+      x: e.clientX,
+      y: e.clientY,
+      position: { ...o.value },
+      size: { width: i.width, height: i.height },
+      dimensions: f.value ? { ...f.value } : void 0,
+      previewPosition: { ...o.value },
+      previewDimensions: f.value,
+      screen: n,
+      bounds: Q(i, n),
+      dirty: !1,
+      preview: t === "drag" && r.dragMode === "preview",
+      activated: !1,
+      box: i,
+      handleBoxes: r.overflow ? O().map((y) => y.getBoundingClientRect()) : void 0,
+      target: u
+    }, R.value = t === "drag" && K() > 0, R.value || (e.preventDefault(), U(a)), document.addEventListener("pointermove", ae, {
+      capture: !0,
+      passive: !1
+    }), document.addEventListener("pointerup", ne, !0), document.addEventListener("pointercancel", A, !0), window.addEventListener("blur", A);
+  }
+  function le(e) {
+    if (!m || !s.value || v.value || !r.draggable || !e.altKey || e.target !== e.currentTarget || !["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home"].includes(
+      e.key
+    ))
+      return;
+    e.preventDefault();
+    const t = e.shiftKey ? 50 : 10;
+    w("dragStart", o.value), e.key === "Home" ? G() : J({
+      x: o.value.x + (e.key === "ArrowRight" ? t : e.key === "ArrowLeft" ? -t : 0),
+      y: o.value.y + (e.key === "ArrowDown" ? t : e.key === "ArrowUp" ? -t : 0)
+    }), w("drag", o.value), w("dragEnd", o.value, { cancelled: !1 });
+  }
+  function fe(e) {
+    if (!m || !s.value || v.value || !r.resizable || !["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home"].includes(
+      e.key
+    ) || !d.value)
+      return;
+    e.preventDefault();
+    const t = d.value.getBoundingClientRect(), i = f.value ?? { width: t.width, height: t.height }, n = e.shiftKey ? 50 : 10;
+    w("resizeStart", i), e.key === "Home" ? T() : Z({
+      width: i.width + (e.key === "ArrowRight" ? n : e.key === "ArrowLeft" ? -n : 0),
+      height: i.height + (e.key === "ArrowDown" ? n : e.key === "ArrowUp" ? -n : 0)
+    }), w("resize", f.value ?? i), w("resizeEnd", f.value ?? i, { cancelled: !1 });
+  }
+  function p() {
+    if (h.enabled === !1 || !m || !s.value || v.value || !d.value || a || c)
+      return;
+    const e = F(o.value, d.value.getBoundingClientRect());
+    (e.x !== o.value.x || e.y !== o.value.y) && (o.value = e, M(e, void 0, !1, !0));
+  }
+  function re() {
+    m = !1, l(!0), window.removeEventListener("resize", V), cancelAnimationFrame(z);
+  }
+  W([s, v], () => {
+    !s.value || v.value ? l(!0) : P(p);
+  }), W(
+    () => r.dragMode,
+    () => l(!0)
+  ), W(
+    [
+      () => r.keepHandleVisible,
+      () => r.overflow,
+      () => r.headerSize,
+      () => r.headerHeight
+    ],
+    () => {
+      l(!0), P(p);
+    }
+  ), W(
+    () => {
+      var e;
+      return (e = h.motion) == null ? void 0 : e.call(h);
+    },
+    (e) => {
+      e === !1 && Y();
+    }
+  ), W([() => r.width, () => r.height, () => r.size], () => {
+    l(!0), T(), P(p);
+  });
+  function V() {
+    l(!0), p();
+  }
+  function O() {
+    var e;
+    return [
+      ...((e = d.value) == null ? void 0 : e.querySelectorAll(
+        ":scope > .hys-ui-dialog-head [data-hys-modal-drag-handle]"
+      )) ?? []
+    ];
+  }
+  return se(() => {
+    h.enabled !== !1 && window.addEventListener("resize", V);
+  }), me(re), ve(re), {
+    position: o,
+    dimensions: f,
+    previewing: C,
+    previewLayer: b,
+    getPosition: () => (a == null ? void 0 : a.previewPosition) ?? o.value,
+    getDimensions: () => (a == null ? void 0 : a.previewDimensions) ?? f.value,
+    dragging: I,
+    resizing: S,
+    gesturing: ce(
+      () => R.value || I.value || S.value
+    ),
+    start: he,
+    stop: l,
+    headerKey: le,
+    resizeKey: fe,
+    resetPosition: G,
+    resetSize: T,
+    setPosition: J,
+    setSize: Z,
+    clampViewport: p,
+    activate() {
+      m = !0, h.enabled !== !1 && window.addEventListener("resize", V);
+    }
+  };
+}
+export {
+  xe as useModalInteraction
+};