hys-ui 0.2.0 → 0.3.0

package/dist/composables/usePopupSurface.js

@@ -0,0 +1,458 @@
+import { ref as D, shallowRef as Pe, useId as qe, inject as Be, computed as f, watch as x, onMounted as Ve, onActivated as Ne, onDeactivated as $e, onBeforeUnmount as Ue, nextTick as Te } from "vue";
+import { useHysControlState as Ge } from "./formContext.js";
+import { useChoiceModel as Je } from "./choiceModel.js";
+import { overlayOwnerKey as Qe } from "./overlayManager.js";
+import { useFloating as Xe } from "./useFloating.js";
+const ee = (a) => typeof a == "number" ? Number.isFinite(a) ? Math.max(0, a) + "px" : void 0 : a, te = (a) => Number.isFinite(a) ? Math.max(0, Math.min(3e4, a)) : 0, P = 'button,a[href],input,select,textarea,[tabindex]:not([tabindex="-1"]),[contenteditable="true"]';
+function at(a, v, A) {
+  const E = D(), F = Pe(), s = D(), R = qe() + "-popup", Oe = R + "-title", { disabled: Q } = Ge(a), y = Be(Qe, void 0), d = D(!0), j = D(!1), X = D(!1), q = Je(
+    {
+      get modelValue() {
+        return a.open ?? a.modelValue;
+      }
+    },
+    () => a.defaultOpen ?? !1
+  ), p = f(
+    () => d.value && !Q.value && (y == null ? void 0 : y.value) !== !1
+  ), w = f(
+    () => typeof a.reference == "function" ? a.reference() : a.reference
+  ), h = f(() => {
+    const e = w.value;
+    return e instanceof HTMLElement ? e : (e == null ? void 0 : e.contextElement) ?? F.value ?? E.value;
+  }), H = f(
+    () => !!F.value && (F.value.matches(P) || !!F.value.querySelector(P))
+  );
+  function ae() {
+    var t;
+    const e = h.value;
+    (t = e != null && e.matches(P) ? e : (e == null ? void 0 : e.querySelector(P)) ?? E.value) == null || t.focus({ preventScroll: !0 });
+  }
+  function Y() {
+    n.restoringFocus.value = !0;
+    try {
+      ae();
+    } finally {
+      n.restoringFocus.value = !1;
+    }
+  }
+  const T = f(() => {
+    const e = w.value ?? F.value ?? E.value;
+    if (e)
+      return {
+        getBoundingClientRect: () => e.getBoundingClientRect(),
+        contains: (t) => {
+          var u, o;
+          return !!((u = h.value) != null && u.contains(t)) || !!((o = E.value) != null && o.contains(t));
+        },
+        focus: ae,
+        get isConnected() {
+          var t;
+          return ((t = h.value) == null ? void 0 : t.isConnected) ?? !!w.value;
+        }
+      };
+  }), ne = f(() => {
+    const e = a.appendTo;
+    if (e instanceof HTMLElement) return e;
+    if (typeof e == "string")
+      try {
+        return document.querySelector(e) ?? document.body;
+      } catch {
+        return document.body;
+      }
+    return document.body;
+  }), ue = D({});
+  function Ae(e) {
+    const t = e.placement.startsWith("left") || e.placement.startsWith("right"), u = t ? e.height : e.width, o = Number.isFinite(a.arrowOffset) ? Math.max(6, a.arrowOffset) : 10, r = t ? e.anchor.top + e.anchor.height / 2 - e.y : e.anchor.left + e.anchor.width / 2 - e.x;
+    ue.value = {
+      [t ? "top" : "left"]: Math.max(Math.min(o, u / 2), Math.min(r, u - o)) + "px"
+    };
+  }
+  const n = Xe(T, s, {
+    get placement() {
+      return a.placement;
+    },
+    get gap() {
+      return a.offset ?? (v === "tooltip" ? 7 : 8);
+    },
+    get autoAdjustOverflow() {
+      return a.autoAdjustOverflow;
+    },
+    get closeOnEscape() {
+      return a.closeOnEscape;
+    },
+    get closeOnOutside() {
+      return a.closeOnOutside;
+    },
+    closeOnTab: v === "tooltip",
+    get strategy() {
+      return a.appendTo === !1 || ne.value !== document.body ? "absolute" : "fixed";
+    },
+    width: () => a.width,
+    maxWidth: () => ee(a.maxWidth) ?? (v === "tooltip" ? "320px" : "360px"),
+    zIndex: () => a.zIndex,
+    onPosition: Ae,
+    requestOpen(e, t) {
+      return l(e, t), !1;
+    }
+  });
+  let S, m, B, C, i, I = 0, oe = -1, ie = -1, W = !1, V = !1, M = !1, z = !1, g = !1;
+  const c = f(() => {
+    const e = a.trigger ?? (v === "tooltip" ? ["hover", "focus"] : ["click"]), t = Array.isArray(e) ? e : [e];
+    return new Set(t.includes("manual") ? [] : t);
+  });
+  function k() {
+    clearTimeout(S), clearTimeout(m), S = m = void 0;
+  }
+  function N() {
+    clearTimeout(B), B = void 0;
+  }
+  function L() {
+    W = V = M = z = g = !1;
+  }
+  function $() {
+    var e;
+    p.value && !j.value && q.current.value && ((e = T.value) != null && e.isConnected) ? (X.value = !0, n.show(!0)) : n.close(!1, !0);
+  }
+  async function l(e, t = !1) {
+    var o, r;
+    if (k(), !d.value || e && (!p.value || n.restoringFocus.value || !((o = T.value) != null && o.isConnected)))
+      return !1;
+    e || L(), j.value = !1;
+    let u = Object.is(q.current.value, e);
+    return u || (u = await q.commit(
+      e,
+      (O) => {
+        A("update:open", O), A("update:modelValue", O);
+      },
+      () => {
+      }
+    )), d.value ? (u && (e ? $() : (n.close(!1, !0), t && ((r = T.value) != null && r.isConnected) && Y())), u) : !1;
+  }
+  function re() {
+    if (clearTimeout(m), m = void 0, !p.value || n.restoringFocus.value || n.open.value || S)
+      return;
+    const e = te(a.showDelay);
+    e ? S = setTimeout(() => {
+      S = void 0, l(!0);
+    }, e) : l(!0);
+  }
+  function le() {
+    return g || W || a.enterable !== !1 && V || c.value.has("focus") && M || a.enterable !== !1 && z;
+  }
+  function U() {
+    if (clearTimeout(S), S = void 0, clearTimeout(m), m = void 0, le() || !n.open.value) return;
+    const e = () => {
+      m = void 0, !le() && n.isTop() && l(!1);
+    }, t = te(a.hideDelay);
+    t ? m = setTimeout(e, t) : e();
+  }
+  function se() {
+    c.value.has("hover") && (W = !0, re());
+  }
+  function ce() {
+    c.value.has("hover") && (W = !1, U());
+  }
+  function Ee() {
+    a.enterable !== !1 && (V = !0, clearTimeout(m), m = void 0);
+  }
+  function Se() {
+    V = !1, c.value.has("hover") && U();
+  }
+  function fe(e) {
+    var t;
+    (t = s.value) != null && t.contains(e.target) || n.restoringFocus.value || (M = !0, c.value.has("focus") && re());
+  }
+  function ve(e) {
+    var u, o, r;
+    if ((u = s.value) != null && u.contains(e.target)) return;
+    const t = e.relatedTarget;
+    if (!((o = T.value) != null && o.contains(t))) {
+      if (M = !1, (r = s.value) != null && r.contains(t) && a.enterable !== !1) {
+        z = !0;
+        return;
+      }
+      (c.value.has("focus") || c.value.has("hover")) && U();
+    }
+  }
+  function Ce() {
+    a.enterable !== !1 && (z = !0);
+  }
+  function Fe(e) {
+    var u, o;
+    const t = e.relatedTarget;
+    if (!((u = s.value) != null && u.contains(t))) {
+      if (z = !1, (o = T.value) != null && o.contains(t)) {
+        M = !0;
+        return;
+      }
+      (c.value.has("focus") || c.value.has("hover")) && U();
+    }
+  }
+  function de(e) {
+    var t;
+    (t = s.value) != null && t.contains(e.target) || !c.value.has("click") || !p.value || (g = n.open.value ? !g && (W && c.value.has("hover") || M && c.value.has("focus")) : !0, l(g));
+  }
+  function he(e) {
+    var t;
+    (t = s.value) != null && t.contains(e.target) || !c.value.has("contextmenu") || !p.value || (e.preventDefault(), g = !0, l(!0));
+  }
+  function me(e) {
+    var u;
+    if ((u = s.value) != null && u.contains(e.target) || !c.value.size || !p.value || e.defaultPrevented)
+      return;
+    const t = e.target;
+    if (!t.closest('input,textarea,select,[contenteditable="true"]')) {
+      if (e.key === "F10" && e.shiftKey && c.value.has("contextmenu")) {
+        e.preventDefault(), g = !0, l(!0);
+        return;
+      }
+      (a.triggerKeys ?? ["Enter", " "]).some(
+        (o) => o === e.key || o === "Space" && e.key === " "
+      ) && (c.value.has("click") && t.closest("button,a[href],input") || (e.preventDefault(), g = !n.open.value, l(g)));
+    }
+  }
+  function ye(e) {
+    return [...e.querySelectorAll(P)].filter(
+      (t) => t.tabIndex >= 0 && !t.matches(":disabled") && !t.closest('[inert],[aria-hidden="true"]') && !!t.getClientRects().length && getComputedStyle(t).visibility !== "hidden"
+    );
+  }
+  function Re(e) {
+    const t = h.value, u = ye(document).filter((O) => {
+      var K;
+      return !((K = s.value) != null && K.contains(O));
+    }), o = u.findIndex((O) => O === t || (t == null ? void 0 : t.contains(O))), r = o < 0 ? void 0 : u[o + (e ? -1 : 1)];
+    return r == null || r.focus(), !!r;
+  }
+  async function Z(e) {
+    var K, we;
+    if (e.key !== "Tab" || v !== "popover" || !n.open.value || !n.isTop())
+      return;
+    const t = e.target, u = (K = s.value) == null ? void 0 : K.contains(t), o = (we = T.value) == null ? void 0 : we.contains(t);
+    if (!u && !o) return;
+    const r = s.value ? ye(s.value) : [];
+    if (o && !e.shiftKey && a.enterable !== !1 && r.length) {
+      e.preventDefault(), r[0].focus();
+      return;
+    }
+    if (u && t !== (e.shiftKey ? r[0] : r.at(-1)) && r.length)
+      return;
+    e.preventDefault(), await l(!1) && (u && e.shiftKey ? Y() : Re(e.shiftKey) || Y());
+  }
+  function ge() {
+    N();
+    const e = te(a.autoClose);
+    n.open.value && e && (B = setTimeout(() => {
+      B = void 0, l(!1);
+    }, e));
+  }
+  function _() {
+    C == null || C.disconnect(), C = void 0;
+  }
+  function je() {
+    _(), !(!n.open.value || !s.value || typeof ResizeObserver > "u") && (C = new ResizeObserver(n.schedule), C.observe(s.value), h.value && C.observe(h.value));
+  }
+  const be = {
+    pointerenter: se,
+    pointerleave: ce,
+    focusin: fe,
+    focusout: ve,
+    click: de,
+    contextmenu: he,
+    keydown: me
+  };
+  let b;
+  function xe() {
+    if (!(!i || !b))
+      if (v === "tooltip") {
+        const e = n.open.value ? [b["aria-describedby"], R].filter(Boolean).join(" ") : b["aria-describedby"];
+        e ? i.setAttribute("aria-describedby", e) : i.removeAttribute("aria-describedby");
+      } else {
+        i.setAttribute(
+          "aria-haspopup",
+          b["aria-haspopup"] ?? "dialog"
+        ), i.setAttribute("aria-expanded", String(n.open.value));
+        const e = n.open.value ? R : b["aria-controls"];
+        e ? i.setAttribute("aria-controls", e) : i.removeAttribute("aria-controls");
+      }
+  }
+  function pe() {
+    if (i)
+      for (const [e, t] of Object.entries(be))
+        i.removeEventListener(e, t);
+    if (i && b)
+      for (const [e, t] of Object.entries(b))
+        t === null ? i.removeAttribute(e) : i.setAttribute(e, t);
+    b = void 0, i = void 0;
+  }
+  function G() {
+    var e;
+    if (pe(), !(!d.value || !w.value)) {
+      if (i = h.value, i && ((e = E.value) != null && e.contains(i))) {
+        i = void 0;
+        return;
+      }
+      i && (b = Object.fromEntries(
+        [
+          "aria-describedby",
+          "aria-controls",
+          "aria-expanded",
+          "aria-haspopup"
+        ].map((t) => [t, i.getAttribute(t)])
+      ), xe());
+      for (const [t, u] of Object.entries(be))
+        i == null || i.addEventListener(t, u);
+    }
+  }
+  function J() {
+    k(), N(), L(), pe(), _(), document.removeEventListener("keydown", Z, !0), n.close(!1, !0);
+  }
+  x(
+    q.current,
+    () => {
+      j.value = !1, $();
+    },
+    { flush: "post" }
+  ), x(
+    [p, E, w],
+    () => {
+      p.value || (k(), N(), L()), $(), G();
+    },
+    { flush: "post", immediate: !0 }
+  ), x(
+    () => y == null ? void 0 : y.value,
+    (e) => {
+      e === !1 && (j.value = !0, J());
+    },
+    { flush: "sync" }
+  ), x(() => a.autoClose, ge), x(
+    [h, w],
+    () => {
+      k(), L(), n.schedule(), G();
+    },
+    { flush: "post" }
+  ), x(
+    () => a.trigger,
+    () => {
+      k(), L();
+    }
+  ), x(
+    () => [
+      a.placement,
+      a.offset,
+      a.autoAdjustOverflow,
+      a.width,
+      a.maxWidth,
+      a.maxHeight,
+      a.appendTo,
+      a.arrowOffset
+    ],
+    n.schedule,
+    { flush: "post" }
+  ), x([n.open, s, h], je, { flush: "post" }), x(
+    n.open,
+    (e) => {
+      I++, xe(), A("visibleChange", e), A("openChange", e), A(e ? "show" : "hide"), document.removeEventListener("keydown", Z, !0), e ? (X.value = !0, document.addEventListener("keydown", Z, !0), ge()) : (k(), N(), L(), _());
+    },
+    { flush: "sync" }
+  );
+  async function Me() {
+    const e = I;
+    await Te(), d.value && n.open.value && e === I && oe !== e && (oe = e, A("opened"));
+  }
+  async function ke() {
+    const e = I;
+    await Te(), d.value && !n.open.value && e === I && ie !== e && (ie = e, A("closed"));
+  }
+  function Le() {
+    j.value = !0, J();
+  }
+  Ve(() => {
+    $(), G();
+  }), Ne(() => {
+    d.value = !0, G();
+  }), $e(() => {
+    d.value = !1, j.value = !0, J();
+  }), Ue(() => {
+    d.value = !1, J();
+  });
+  const De = f(
+    () => n.open.value || a.forceRender || a.destroyOnHide === !1 && X.value
+  ), He = f(() => {
+    const e = (a.effect ?? (v === "tooltip" ? "dark" : "light")) === "dark";
+    return {
+      "--hys-ui-popup-surface": a.color || (e ? "#172744" : "var(--hys-ui-surface,var(--hys-ui-theme-surface))"),
+      "--hys-ui-popup-color": a.textColor || (e ? "#fff" : "var(--hys-ui-text,var(--hys-ui-theme-text))"),
+      "--hys-ui-popup-border": a.color || (e ? "#172744" : "var(--hys-ui-border,var(--hys-ui-theme-border))")
+    };
+  }), Ie = f(() => ({
+    ...a.overlayStyle,
+    ...n.style.value,
+    ...He.value,
+    overflow: "visible",
+    maxWidth: `min(${ee(a.maxWidth) ?? (v === "tooltip" ? "320px" : "360px")},calc(100vw - 20px))`,
+    minWidth: a.width !== void 0 ? "0" : void 0
+  })), We = f(() => ({
+    ...a.contentStyle,
+    maxHeight: a.maxHeight !== void 0 ? `min(${ee(a.maxHeight)},calc(100vh - 20px))` : "calc(100vh - 20px)"
+  })), ze = f(() => ({
+    open: n.open.value,
+    show: () => l(!0),
+    close: () => l(!1),
+    toggle: () => l(!n.open.value),
+    updatePosition: n.schedule
+  })), Ke = f(() => ({
+    tabindex: w.value ? -1 : H.value ? void 0 : Q.value ? -1 : a.triggerTabindex ?? 0,
+    role: v === "popover" && !H.value && !w.value ? "button" : void 0,
+    "aria-disabled": !H.value && Q.value || void 0,
+    ...H.value ? {} : v === "tooltip" ? { "aria-describedby": n.open.value ? R : void 0 } : {
+      "aria-controls": n.open.value ? R : void 0,
+      "aria-expanded": n.open.value,
+      "aria-haspopup": "dialog"
+    }
+  }));
+  return {
+    wrapper: E,
+    referenceElement: F,
+    panel: s,
+    actualReference: h,
+    nativeReference: H,
+    id: R,
+    titleId: Oe,
+    open: n.open,
+    placement: n.placement,
+    active: f(() => d.value && (y == null ? void 0 : y.value) !== !1),
+    mounted: De,
+    teleportTo: ne,
+    arrowStyle: ue,
+    style: Ie,
+    contentStyle: We,
+    scope: ze,
+    wrapperAttrs: Ke,
+    pointerEnter: se,
+    pointerLeave: ce,
+    panelEnter: Ee,
+    panelLeave: Se,
+    focusIn: fe,
+    focusOut: ve,
+    panelFocusIn: Ce,
+    panelFocusOut: Fe,
+    click: de,
+    contextmenu: he,
+    key: me,
+    afterEnter: Me,
+    afterLeave: ke,
+    inactive: Le,
+    request: l,
+    show: () => l(!0),
+    hide: () => l(!1),
+    toggle: () => l(!n.open.value),
+    updatePosition: n.schedule,
+    focus: () => {
+      var e;
+      return (e = T.value) == null ? void 0 : e.focus();
+    }
+  };
+}
+export {
+  at as usePopupSurface
+};