hys-ui 0.2.0 → 0.3.0

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