hys-ui 0.1.1 → 0.3.0

package/dist/composables/useDrawerResize.js

@@ -0,0 +1,221 @@
+import { ref as C, computed as S, watch as x, nextTick as K, onMounted as te, onActivated as ie, onDeactivated as ne, onBeforeUnmount as ae } from "vue";
+import { useChoiceModel as re } from "./choiceModel.js";
+import { drawerVertical as ue } from "./drawer.js";
+function ce(i, V, c, M, $, G, d) {
+  const w = re(
+    {
+      get modelValue() {
+        return i.resizeValue;
+      }
+    },
+    () => Number.isFinite(i.defaultResizeValue) ? Math.max(0, i.defaultResizeValue) : null
+  ), D = C(!1), P = C(0), F = C(0), N = C(), f = S(() => ue(i.placement)), T = S(() => {
+    const e = w.current.value;
+    if (typeof e != "number" || !Number.isFinite(e)) return;
+    const t = A();
+    return Math.max(t.min, Math.min(t.max, e));
+  }), h = S(() => T.value ?? P.value), z = S(
+    () => typeof i.resizable == "object" ? i.resizable : {}
+  ), v = S(
+    () => M.value && !$.value && !G.value
+  );
+  let r = !0, y = 0, g = 0, l, s;
+  function I(e, t) {
+    if (typeof e == "number")
+      return Number.isFinite(e) ? e : void 0;
+    if (typeof e != "string" || !/^\s*\d+(?:\.\d+)?(?:px|%)?\s*$/.test(e))
+      return;
+    const n = parseFloat(e);
+    return e.trim().endsWith("%") ? t * n / 100 : n;
+  }
+  function R() {
+    var n;
+    const e = (n = V.value) == null ? void 0 : n.getBoundingClientRect(), t = f.value ? e == null ? void 0 : e.height : e == null ? void 0 : e.width;
+    return Math.max(
+      1,
+      (t && t > 0 ? t : void 0) ?? (f.value ? document.documentElement.clientHeight || window.innerHeight : document.documentElement.clientWidth || window.innerWidth)
+    );
+  }
+  function A(e = F.value || R()) {
+    const t = Math.max(
+      1,
+      Math.min(
+        e,
+        I(z.value.maxSize, e) ?? e
+      )
+    );
+    return { min: Math.min(
+      t,
+      Math.max(1, I(z.value.minSize, e) ?? 160)
+    ), max: t };
+  }
+  function L() {
+    if (!r || !M.value || s || !c.value) return;
+    F.value = R();
+    const e = c.value.getBoundingClientRect();
+    P.value = f.value ? e.height : e.width;
+  }
+  function p() {
+    g && cancelAnimationFrame(g), g = requestAnimationFrame(() => {
+      g = 0, L();
+    });
+  }
+  function J() {
+    var t;
+    y = 0;
+    const e = s;
+    !e || !e.activated || !c.value || e.last !== e.value && (e.last = e.value, c.value.style[e.axis] = e.value + "px", (t = N.value) == null || t.setAttribute("aria-valuenow", String(Math.round(e.value))), d("resize", e.value));
+  }
+  function Q() {
+    window.removeEventListener("pointermove", U), window.removeEventListener("pointerup", W), window.removeEventListener("pointercancel", a), window.removeEventListener("blur", a), window.removeEventListener("keydown", O, !0);
+  }
+  async function B(e) {
+    return !r || !v.value ? !1 : e === w.current.value ? !0 : await w.commit(
+      e,
+      (n) => d("update:resizeValue", n),
+      () => {
+      }
+    ) && r && v.value;
+  }
+  async function b(e = !1) {
+    var o, m;
+    const t = s;
+    if (!t) return !1;
+    y && cancelAnimationFrame(y), y = 0;
+    const n = !e && t.activated && t.last !== t.value;
+    s = void 0, D.value = !1, Q(), document.documentElement.style.cursor = t.cursor, document.documentElement.style.userSelect = t.selection;
+    try {
+      (m = (o = t.target).hasPointerCapture) != null && m.call(o, t.id) && t.target.releasePointerCapture(t.id);
+    } catch {
+    }
+    c.value && (c.value.style[t.axis] = t.style), n && d("resize", t.value);
+    const u = !e && t.activated ? await B(t.value) : !1;
+    return t.activated && (await K(), r && (L(), d("resizeEnd", e || !u ? h.value : t.value, {
+      placement: i.placement ?? "right",
+      cancelled: e,
+      accepted: u
+    }))), u;
+  }
+  function a() {
+    b(!0);
+  }
+  function O(e) {
+    e.key === "Escape" ? (e.preventDefault(), e.stopImmediatePropagation(), a()) : e.key === "Tab" && a();
+  }
+  function U(e) {
+    const t = s;
+    if (!t || e.pointerId !== t.id) return;
+    const n = ((t.axis === "width" ? e.clientX : e.clientY) - t.start) * t.sign;
+    !t.activated && (Math.abs(n) < 4 || (t.activated = !0, D.value = !0, d("resizeStart", t.size), s !== t)) || (t.value = Math.max(t.min, Math.min(t.max, t.size + n)), y || (y = requestAnimationFrame(J)));
+  }
+  function W(e) {
+    s && e.pointerId === s.id && b(!1);
+  }
+  function Z(e) {
+    if (!i.resizable || !v.value || !r || e.button !== 0 || e.isPrimary === !1 || !c.value)
+      return;
+    e.preventDefault(), e.stopPropagation(), b(!0);
+    const t = R(), n = A(t), u = c.value.getBoundingClientRect(), o = f.value ? "height" : "width", m = e.currentTarget, E = o === "width" ? u.width : u.height;
+    F.value = t, P.value = E, s = {
+      id: e.pointerId,
+      start: o === "width" ? e.clientX : e.clientY,
+      size: E,
+      value: E,
+      last: E,
+      ...n,
+      axis: o,
+      sign: i.placement === "right" || i.placement === "bottom" ? -1 : 1,
+      target: m,
+      style: c.value.style[o],
+      cursor: document.documentElement.style.cursor,
+      selection: document.documentElement.style.userSelect,
+      activated: !1
+    }, m.focus({ preventScroll: !0 });
+    try {
+      m.setPointerCapture(e.pointerId);
+    } catch {
+    }
+    document.documentElement.style.cursor = f.value ? "ns-resize" : "ew-resize", document.documentElement.style.userSelect = "none", window.addEventListener("pointermove", U), window.addEventListener("pointerup", W), window.addEventListener("pointercancel", a), window.addEventListener("blur", a), window.addEventListener("keydown", O, !0);
+  }
+  async function q(e) {
+    if (!r || !v.value) return !1;
+    const t = R(), n = I(e, t);
+    if (n === void 0) return !1;
+    const u = A(t), o = Math.max(u.min, Math.min(u.max, n));
+    return F.value = t, B(o);
+  }
+  async function _() {
+    return s && await b(!0), B(null);
+  }
+  async function ee(e) {
+    if (!i.resizable || !v.value || e.isComposing || e.ctrlKey || e.metaKey || e.altKey || ![...f.value ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"], "Home", "End"].includes(e.key)) return;
+    e.preventDefault(), e.stopPropagation(), L();
+    const n = A(), u = Number.isFinite(z.value.step) ? Math.max(1, z.value.step) : 10, o = i.placement === "left" ? "ArrowRight" : i.placement === "right" ? "ArrowLeft" : i.placement === "top" ? "ArrowDown" : "ArrowUp", m = e.key === "Home" ? n.min : e.key === "End" ? n.max : h.value + (e.key === o ? 1 : -1) * u * (e.shiftKey ? 10 : 1);
+    d("resizeStart", h.value);
+    const E = await q(m);
+    r && (L(), d("resize", h.value), d("resizeEnd", h.value, {
+      placement: i.placement ?? "right",
+      cancelled: !1,
+      accepted: E
+    }));
+  }
+  function k() {
+    a(), p();
+  }
+  function X() {
+    l == null || l.disconnect(), l = void 0, r && M.value && typeof ResizeObserver < "u" && V.value && i.contained && (l = new ResizeObserver(k), l.observe(V.value));
+  }
+  function H() {
+    var e;
+    !r || !M.value || (window.addEventListener("resize", k), (e = window.visualViewport) == null || e.addEventListener("resize", k), X(), p());
+  }
+  function Y() {
+    var e;
+    l == null || l.disconnect(), l = void 0, window.removeEventListener("resize", k), (e = window.visualViewport) == null || e.removeEventListener("resize", k), cancelAnimationFrame(g), g = 0;
+  }
+  function j() {
+    r = !1, b(!0), Y();
+  }
+  return x(
+    () => [i.placement, i.width, i.height, i.size],
+    () => {
+      a(), i.resizeValue === void 0 && w.reset(), K(p);
+    }
+  ), x(
+    () => i.resizeValue,
+    () => {
+      a(), p();
+    }
+  ), x([v, () => i.resizable], () => {
+    (!v.value || !i.resizable) && a();
+  }), x(
+    () => [z.value.minSize, z.value.maxSize],
+    () => {
+      a(), p();
+    }
+  ), x(M, (e) => {
+    e ? K(H) : (a(), Y());
+  }), x([V, () => i.contained], X, { flush: "post" }), te(H), ie(() => {
+    r = !0, H();
+  }), ne(j), ae(j), {
+    handle: N,
+    resizing: D,
+    size: h,
+    vertical: f,
+    limits: A,
+    model: w,
+    resolvedSize: T,
+    start: Z,
+    stop: b,
+    keyboard: ee,
+    resizeTo: q,
+    reset: _,
+    measure: L,
+    resetAfterClose: () => {
+      i.resetSizeOnClose !== !1 && i.resizeValue === void 0 && w.reset();
+    }
+  };
+}
+export {
+  ce as useDrawerResize
+};

package/dist/composables/useFloating.js

@@ -1,82 +1,162 @@
-import { ref as E, onDeactivated as q, onBeforeUnmount as D, nextTick as H } from "vue";
-import { registerOverlay as I } from "./overlayManager.js";
-function P(f, a, m = {}) {
-  const l = E(!1), W = E(!1), M = E({ position: "fixed", top: "0px", left: "0px", visibility: "hidden" }), A = E(m.placement ?? "bottom-start"), d = m.gap ?? 8, r = m.padding ?? 10;
-  let L = 0, h, c, g = 0;
-  function $() {
-    if (!l.value || !f.value || !a.value) return;
-    const t = f.value.getBoundingClientRect();
-    if (!t.width && !t.height) {
+import { inject as G, ref as z, shallowRef as J, watch as V, onDeactivated as Q, onBeforeUnmount as Z, computed as _, nextTick as ee } from "vue";
+import { useHysControlState as te } from "./formContext.js";
+import { popupSize as ie } from "../motion/popup.js";
+import { overlayOwnerKey as ae, registerOverlay as ne } from "./overlayManager.js";
+function de(g, r, t = {}) {
+  const { disabled: B } = te({}), y = G(ae, void 0), o = z(!1), F = J(), O = z(!1), k = z({
+    position: "fixed",
+    top: "0px",
+    left: "0px",
+    visibility: "hidden"
+  }), N = z(t.placement ?? "bottom-start");
+  let A = 0, W, u, E = 0;
+  function C() {
+    var K, T, Y;
+    if (!o.value || !g.value || !r.value) return;
+    const e = g.value.getBoundingClientRect();
+    if (!e.width && !e.height) {
       s();
       return;
     }
-    const e = document.documentElement.clientWidth, n = document.documentElement.clientHeight, o = Math.min(t.width, Math.max(0, e - 2 * r)), v = typeof m.matchWidth == "function" ? m.matchWidth() : m.matchWidth;
-    v === !0 && (a.value.style.width = `${o}px`, a.value.style.minWidth = "0", a.value.style.maxWidth = `${o}px`), v === "min" && (a.value.style.width = "max-content", a.value.style.minWidth = `${o}px`, a.value.style.maxWidth = `calc(100vw - ${r * 2}px)`);
-    const w = a.value.getBoundingClientRect(), p = Math.min(w.width, Math.max(0, e - 2 * r)), x = Math.min(w.height, Math.max(0, n - 2 * r));
-    let i = m.placement ?? "bottom-start";
-    const k = n - t.bottom - d, z = t.top - d;
-    i.startsWith("bottom") && k < x && z > k ? i = i.replace("bottom", "top") : i.startsWith("top") && z < x && k > z ? i = i.replace("top", "bottom") : i === "right" && e - t.right - d < p && t.left > e - t.right ? i = "left" : i === "left" && t.left - d < p && e - t.right > t.left && (i = "right");
-    let y = i.endsWith("end") ? t.right - p : t.left, b = i.startsWith("top") ? t.top - x - d : t.bottom + d;
-    (i === "right" || i === "left") && (y = i === "right" ? t.right + d : t.left - p - d, b = t.top + (t.height - x) / 2), y = Math.max(r, Math.min(y, e - p - r)), b = Math.max(r, Math.min(b, n - x - r)), A.value = i, M.value = { ...v === !0 ? { width: `${o}px`, minWidth: "0" } : v === "min" ? { width: "max-content", minWidth: `${o}px` } : {}, position: "fixed", left: `${Math.round(y)}px`, top: `${Math.round(b)}px`, visibility: "visible", zIndex: "1200", maxWidth: `calc(100vw - ${r * 2}px)`, maxHeight: `calc(100vh - ${r * 2}px)`, overflowY: "auto", overscrollBehavior: "contain" };
+    const n = Number.isFinite(t.gap) ? t.gap : 8, i = Number.isFinite(t.padding) ? Math.max(0, t.padding) : 10, l = document.documentElement.clientWidth, f = document.documentElement.clientHeight, d = Math.min(e.width, Math.max(0, l - 2 * i)), M = typeof t.matchWidth == "function" ? t.matchWidth() : t.matchWidth, b = (K = t.maxWidth) == null ? void 0 : K.call(t), P = b !== void 0 && (typeof b != "number" || Number.isFinite(b)) ? `min(${typeof b == "number" ? Math.max(0, b) + "px" : b},calc(100vw - ${i * 2}px))` : `calc(100vw - ${i * 2}px)`, L = (T = t.width) == null ? void 0 : T.call(t), p = typeof L == "number" ? Number.isFinite(L) ? Math.max(0, L) + "px" : void 0 : L;
+    p !== void 0 ? (r.value.style.width = p, r.value.style.minWidth = "0", r.value.style.maxWidth = P) : M === !0 && (r.value.style.width = `${d}px`, r.value.style.minWidth = "0", r.value.style.maxWidth = `${d}px`), p === void 0 && M === "min" && (r.value.style.width = "max-content", r.value.style.minWidth = `${d}px`, r.value.style.maxWidth = `calc(100vw - ${i * 2}px)`);
+    const D = ie(r.value), h = Math.min(D.width, Math.max(0, l - 2 * i)), v = Math.min(D.height, Math.max(0, f - 2 * i));
+    let a = t.placement ?? "bottom-start";
+    const I = f - e.bottom - n, q = e.top - n, $ = t.autoAdjustOverflow !== !1;
+    $ && a.startsWith("bottom") && I < v && q > I ? a = a.replace("bottom", "top") : $ && a.startsWith("top") && q < v && I > q ? a = a.replace("top", "bottom") : $ && a.startsWith("right") && l - e.right - n < h && e.left > l - e.right ? a = a.replace("right", "left") : $ && a.startsWith("left") && e.left - n < h && l - e.right > e.left && (a = a.replace("left", "right"));
+    let w = a.endsWith("end") ? e.right - h : a.endsWith("start") ? e.left : e.left + (e.width - h) / 2, x = a.startsWith("top") ? e.top - v - n : e.bottom + n;
+    if ((a.startsWith("right") || a.startsWith("left")) && (w = a.startsWith("right") ? e.right + n : e.left - h - n, x = a.endsWith("start") ? e.top : a.endsWith("end") ? e.bottom - v : e.top + (e.height - v) / 2), w = Math.max(i, Math.min(w, l - h - i)), x = Math.max(i, Math.min(x, f - v - i)), N.value = a, (Y = t.onPosition) == null || Y.call(t, {
+      anchor: e,
+      width: h,
+      height: v,
+      x: w,
+      y: x,
+      placement: a
+    }), t.strategy === "absolute") {
+      const m = r.value.offsetParent;
+      if (m && m !== document.body && m !== document.documentElement) {
+        const U = m.getBoundingClientRect();
+        w += m.scrollLeft - U.left - m.clientLeft, x += m.scrollTop - U.top - m.clientTop;
+      } else
+        w += window.scrollX, x += window.scrollY;
+    }
+    k.value = {
+      ...p !== void 0 ? { width: p, minWidth: "0" } : M === !0 ? { width: `${d}px`, minWidth: "0" } : M === "min" ? { width: "max-content", minWidth: `${d}px` } : {},
+      position: t.strategy ?? "fixed",
+      left: `${Math.round(w)}px`,
+      top: `${Math.round(x)}px`,
+      visibility: "visible",
+      zIndex: "1200",
+      maxWidth: P,
+      maxHeight: `calc(100vh - ${i * 2}px)`,
+      overflowY: "auto",
+      overscrollBehavior: "contain"
+    };
   }
-  function u() {
-    cancelAnimationFrame(L), L = requestAnimationFrame($);
+  function c() {
+    cancelAnimationFrame(A), A = requestAnimationFrame(C);
   }
-  function F(t) {
-    var e, n;
-    c != null && c() && !((e = f.value) != null && e.contains(t.target)) && !((n = a.value) != null && n.contains(t.target)) && s();
+  function R(e) {
+    var n, i;
+    !(u != null && u()) || t.closeOnOutside === !1 || !((n = g.value) != null && n.contains(e.target)) && !((i = r.value) != null && i.contains(e.target)) && s();
   }
-  function B(t) {
-    var e, n;
-    if (!(!l.value || !(c != null && c()))) {
-      if (t.key === "Escape")
-        t.preventDefault(), t.stopImmediatePropagation(), s(!0);
-      else if (t.key === "Tab") {
-        const o = document.activeElement;
-        if ((e = f.value) != null && e.contains(o)) {
+  function S(e) {
+    var n, i;
+    if (!(!o.value || !(u != null && u()))) {
+      if (e.key === "Escape" && t.closeOnEscape !== !1)
+        e.preventDefault(), e.stopImmediatePropagation(), s(!0);
+      else if (e.key === "Tab" && t.closeOnTab !== !1) {
+        const l = document.activeElement;
+        if ((n = g.value) != null && n.contains(l)) {
           s();
           return;
         }
-        if ((n = a.value) != null && n.contains(o)) {
-          const v = Array.from(a.value.querySelectorAll('a[href],button:not(:disabled),input:not(:disabled),textarea:not(:disabled),select:not(:disabled),[tabindex]:not([tabindex="-1"])')).filter((w) => w.getClientRects().length && !w.closest("[inert]"));
-          (!v.length || o === (t.shiftKey ? v[0] : v.at(-1))) && s(!0);
+        if ((i = r.value) != null && i.contains(l)) {
+          const f = Array.from(
+            r.value.querySelectorAll(
+              'a[href],button:not(:disabled),input:not(:disabled),textarea:not(:disabled),select:not(:disabled),[tabindex]:not([tabindex="-1"])'
+            )
+          ).filter(
+            (d) => d.getClientRects().length && !d.closest("[inert]")
+          );
+          (!f.length || l === (e.shiftKey ? f[0] : f.at(-1))) && s(!0);
         }
       }
     }
   }
-  function C() {
-    var t, e;
-    document.removeEventListener("pointerdown", F, !0), document.removeEventListener("keydown", B, !0), window.removeEventListener("resize", u), window.removeEventListener("scroll", u, !0), (t = window.visualViewport) == null || t.removeEventListener("resize", u), (e = window.visualViewport) == null || e.removeEventListener("scroll", u), cancelAnimationFrame(L), h == null || h(), h = void 0, c = void 0;
+  function j() {
+    var e, n;
+    document.removeEventListener("pointerdown", R, !0), document.removeEventListener("keydown", S, !0), window.removeEventListener("resize", c), window.removeEventListener("scroll", c, !0), (e = window.visualViewport) == null || e.removeEventListener("resize", c), (n = window.visualViewport) == null || n.removeEventListener("scroll", c), cancelAnimationFrame(A), W == null || W(), W = void 0, F.value = void 0, u = void 0;
   }
-  function s(t = !1) {
-    var e;
-    if (g++, !!l.value && (l.value = !1, C(), t && ((e = f.value) != null && e.isConnected))) {
-      W.value = !0;
+  function s(e = !1, n = !1) {
+    var i, l;
+    if (!(!n && o.value && ((i = t.requestOpen) == null ? void 0 : i.call(t, !1, e)) === !1) && (E++, !!o.value && (o.value = !1, j(), e && ((l = g.value) != null && l.isConnected)))) {
+      O.value = !0;
       try {
-        f.value.focus();
+        g.value.focus();
       } finally {
-        W.value = !1;
+        O.value = !1;
       }
     }
   }
-  async function V() {
-    var n, o;
-    if (l.value) {
-      u();
+  async function H(e = !1) {
+    var l, f, d;
+    if (B.value || (y == null ? void 0 : y.value) === !1) return;
+    if (o.value) {
+      c();
       return;
     }
-    const t = ++g;
-    if (l.value = !0, M.value = { position: "fixed", top: "0px", left: "0px", visibility: "hidden" }, await H(), t !== g || !l.value) return;
-    const e = I("floating", () => s(!0));
-    h = e.unregister, c = e.isTop, $(), document.addEventListener("pointerdown", F, !0), document.addEventListener("keydown", B, !0), window.addEventListener("resize", u), window.addEventListener("scroll", u, !0), (n = window.visualViewport) == null || n.addEventListener("resize", u), (o = window.visualViewport) == null || o.addEventListener("scroll", u);
+    if (!e && ((l = t.requestOpen) == null ? void 0 : l.call(t, !0)) === !1) return;
+    const n = ++E;
+    if (o.value = !0, k.value = {
+      position: "fixed",
+      top: "0px",
+      left: "0px",
+      visibility: "hidden"
+    }, await ee(), n !== E || !o.value) return;
+    const i = ne(
+      "floating",
+      () => s(!0),
+      t.zIndex
+    );
+    F.value = i, W = i.unregister, u = i.isTop, C(), document.addEventListener("pointerdown", R, !0), document.addEventListener("keydown", S, !0), window.addEventListener("resize", c), window.addEventListener("scroll", c, !0), (f = window.visualViewport) == null || f.addEventListener("resize", c), (d = window.visualViewport) == null || d.addEventListener("scroll", c);
   }
-  function R() {
-    return l.value ? s() : V();
+  function X() {
+    return o.value ? s() : H();
   }
-  return q(() => s()), D(() => {
-    g++, C();
-  }), { open: l, style: M, placement: A, update: $, show: V, close: s, toggle: R, restoringFocus: W };
+  return V(
+    B,
+    (e) => {
+      e && s(!1, !0);
+    },
+    { flush: "sync" }
+  ), Q(() => s(!1, !0)), V(
+    () => y == null ? void 0 : y.value,
+    (e) => {
+      e === !1 && s(!1, !0);
+    },
+    { flush: "sync" }
+  ), Z(() => {
+    E++, j();
+  }), {
+    open: o,
+    style: _(() => {
+      var e;
+      return {
+        ...k.value,
+        zIndex: String(((e = F.value) == null ? void 0 : e.zIndex.value) ?? 1200)
+      };
+    }),
+    placement: N,
+    update: C,
+    show: H,
+    close: s,
+    toggle: X,
+    restoringFocus: O,
+    schedule: c,
+    isTop: () => (u == null ? void 0 : u()) ?? !1
+  };
 }
 export {
-  P as useFloating
+  de as useFloating
 };