hys-ui 0.3.0 → 0.5.0

package/dist/composables/useTableSticky.js

@@ -0,0 +1,79 @@
+import { ref as U, shallowRef as G, onMounted as I, onActivated as J, onDeactivated as K, onBeforeUnmount as P, onUpdated as Q, watch as j } from "vue";
+const x = 16, H = (o) => o !== void 0 && Number.isFinite(o) ? Math.max(0, o) : 0;
+function Z(o, k, v) {
+  const L = U(0), p = U(), a = G();
+  let f = 0, w = !1, i = !1, m, s;
+  function b() {
+    const t = p.value, c = o.value;
+    !t || !c || t.scrollLeft === c.scrollLeft || (t.scrollLeft = c.scrollLeft, m = t.scrollLeft);
+  }
+  function q(t) {
+    if (!i || !o.value) return;
+    const c = t.currentTarget.scrollLeft, e = c === m;
+    m = void 0, !e && c !== o.value.scrollLeft && (o.value.scrollLeft = c);
+  }
+  function D() {
+    var F, O;
+    f = 0;
+    const t = o.value;
+    if (!i || !(t != null && t.isConnected)) return;
+    const c = v(), e = typeof c == "object" ? c : void 0, y = (F = e == null ? void 0 : e.getContainer) == null ? void 0 : F.call(e), S = document.documentElement.clientWidth, T = document.documentElement.clientHeight, n = y instanceof HTMLElement ? y.getBoundingClientRect() : void 0, z = Math.max(0, (n == null ? void 0 : n.top) ?? 0), N = Math.min(T, (n == null ? void 0 : n.bottom) ?? T), d = t.getBoundingClientRect(), B = ((O = k.value) == null ? void 0 : O.getBoundingClientRect().height) ?? 0, V = Math.max(0, t.clientHeight - B);
+    L.value = Math.min(
+      V,
+      Math.max(0, z + H(e == null ? void 0 : e.offsetHeader) - d.top)
+    );
+    const g = t.scrollWidth - t.clientWidth, u = N - H(e == null ? void 0 : e.offsetScroll) - x, M = Math.max(
+      0,
+      (n == null ? void 0 : n.left) ?? 0,
+      d.left + t.clientLeft
+    ), h = Math.min(
+      S,
+      (n == null ? void 0 : n.right) ?? S,
+      d.left + t.clientLeft + t.clientWidth
+    ) - M;
+    if (g <= 1 || h <= 0 || d.bottom <= u + x || u <= d.top || u <= z + H(e == null ? void 0 : e.offsetHeader) + B) {
+      a.value = void 0;
+      return;
+    }
+    const A = getComputedStyle(t).direction === "rtl" ? "rtl" : "ltr", r = a.value;
+    ((r == null ? void 0 : r.top) !== u || r.left !== M || r.width !== h || r.contentWidth !== g + h || r.direction !== A) && (a.value = {
+      top: u,
+      left: M,
+      width: h,
+      contentWidth: g + h,
+      direction: A
+    });
+  }
+  function l() {
+    i && !f && (f = requestAnimationFrame(D));
+  }
+  function E() {
+    i && (i = !1, cancelAnimationFrame(f), f = 0, window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l), s == null || s.disconnect(), L.value = 0, a.value = void 0);
+  }
+  function R() {
+    !w || !v() || i || !o.value || (i = !0, window.addEventListener("scroll", l, !0), window.addEventListener("resize", l), typeof ResizeObserver < "u" && (s = new ResizeObserver(l), s.observe(o.value)), l());
+  }
+  function W() {
+    w = !0, R();
+  }
+  function C() {
+    w = !1, E();
+  }
+  return I(W), J(W), K(C), P(C), Q(l), j(v, (t) => t ? R() : E(), { flush: "post" }), j(
+    p,
+    () => {
+      m = void 0, b();
+    },
+    { flush: "post" }
+  ), {
+    headerTop: L,
+    bar: a,
+    scrollbar: p,
+    syncScrollbar: b,
+    scrollViewport: q,
+    scrollbarHeight: x
+  };
+}
+export {
+  Z as useTableSticky
+};

package/dist/composables/useTextareaSize.js

@@ -1,72 +1,88 @@
-import { watch as x, nextTick as u, onMounted as T, onActivated as E, onDeactivated as Y, onBeforeUnmount as B } from "vue";
-function L(v, n, F, M) {
-  let s = !0, a, i, f = -1, r;
-  const h = () => {
+import { shallowRef as H, watch as z, nextTick as l, onMounted as L, onActivated as N, onDeactivated as O, onBeforeUnmount as C } from "vue";
+function j(v, i, T, E) {
+  let d = !0, o, t, f = -1;
+  const n = H({}), h = () => {
     var e;
     return ((e = v.value) == null ? void 0 : e.tagName) === "TEXTAREA" ? v.value : void 0;
   };
-  function p() {
-    a = void 0;
+  function R() {
     const e = h();
-    if (!s || !e) return;
-    if (!n.autosize) {
-      r && (e.style.height = r.height, e.style.overflowY = r.overflowY, r = void 0);
+    if (!d || !e) return;
+    if (!i.autosize) {
+      n.value.height && (n.value = {});
       return;
     }
     if (!e.getBoundingClientRect().width) return;
-    r ?? (r = { height: e.style.height, overflowY: e.style.overflowY });
-    const d = typeof n.autosize == "object" ? n.autosize : {}, t = getComputedStyle(e), c = parseFloat(t.lineHeight) || parseFloat(t.fontSize) * 1.5 || 21, w = (parseFloat(t.paddingTop) || 0) + (parseFloat(t.paddingBottom) || 0), l = (parseFloat(t.borderTopWidth) || 0) + (parseFloat(t.borderBottomWidth) || 0), R = Math.max(
-      1,
-      Math.min(1e4, Math.floor(d.minRows || 1))
-    ), A = d.maxRows && Number.isFinite(d.maxRows) ? Math.max(R, d.maxRows) : 1 / 0;
-    e.style.height = "0px";
-    const b = e.scrollHeight + l, g = Math.min(
-      A * c + w + l,
-      Math.max(R * c + w + l, b)
+    const w = e.style.height, c = e.style.overflowY, s = typeof i.autosize == "object" ? i.autosize : {}, r = getComputedStyle(e), g = parseFloat(r.lineHeight) || parseFloat(r.fontSize) * 1.5 || 21, x = (parseFloat(r.paddingTop) || 0) + (parseFloat(r.paddingBottom) || 0), u = (parseFloat(r.borderTopWidth) || 0) + (parseFloat(r.borderBottomWidth) || 0), M = Number.isFinite(s.minRows) ? Math.max(1, Math.min(1e4, Math.floor(s.minRows))) : 1, B = Number.isFinite(s.maxRows) ? Math.max(M, Math.min(1e4, Math.floor(s.maxRows))) : 1 / 0;
+    e.style.height = "0px", e.style.overflowY = "hidden";
+    const p = e.scrollHeight + u, y = Math.min(
+      B * g + x + u,
+      Math.max(M * g + x + u, p)
     );
-    e.style.height = (t.boxSizing === "border-box" ? g : Math.max(c, g - w - l)) + "px", e.style.overflowY = b > g + 1 ? "auto" : "hidden";
+    e.style.height = w, e.style.overflowY = c;
+    const A = (r.boxSizing === "border-box" ? y : Math.max(g, y - x - u)) + "px", S = p > y + 1 ? "auto" : "hidden";
+    (n.value.height !== A || n.value.overflowY !== S) && (n.value = { height: A, overflowY: S });
   }
-  async function o() {
-    await u(), !(!s || !h() || !n.autosize && !r) && (a !== void 0 && cancelAnimationFrame(a), a = requestAnimationFrame(p));
+  async function Y() {
+    await l(), o !== void 0 && cancelAnimationFrame(o), o = void 0, R(), await l();
+  }
+  async function a() {
+    await l(), !(!d || !h() || o !== void 0) && (o = requestAnimationFrame(() => {
+      o = void 0, R();
+    }));
   }
   function m() {
-    i == null || i.disconnect(), i = void 0, f = -1, window.removeEventListener("resize", o);
+    t == null || t.disconnect(), t = void 0, f = -1, window.removeEventListener("resize", a);
     const e = h();
-    if (!(!s || !e)) {
-      if (!n.autosize) {
-        o();
+    if (!(!d || !e)) {
+      if (!i.autosize) {
+        n.value = {};
         return;
       }
-      window.addEventListener("resize", o), typeof ResizeObserver < "u" && (i = new ResizeObserver((d) => {
-        var c;
-        const t = (c = d[0]) == null ? void 0 : c.contentRect.width;
-        t !== void 0 && Math.abs(t - f) > 0.5 && (f = t, o());
-      }), i.observe(e)), o();
+      window.addEventListener("resize", a), typeof ResizeObserver < "u" && (t = new ResizeObserver((w) => {
+        var s;
+        const c = (s = w[0]) == null ? void 0 : s.contentRect.width;
+        c !== void 0 && Math.abs(c - f) > 0.5 && (f = c, a());
+      }), t.observe(e)), a();
     }
   }
-  function z() {
-    s = !0, u(m);
+  function b() {
+    d = !0, l(m);
   }
-  function y() {
-    s = !1, i == null || i.disconnect(), i = void 0, a !== void 0 && cancelAnimationFrame(a), a = void 0, window.removeEventListener("resize", o);
+  function F() {
+    d = !1, t == null || t.disconnect(), t = void 0, o !== void 0 && cancelAnimationFrame(o), o = void 0, window.removeEventListener("resize", a);
   }
-  return x([M, F, () => n.rows, () => n.autosize], o, {
-    deep: !0
-  }), x(v, () => {
-    r = void 0, u(m);
-  }), x(
-    () => n.autosize,
+  return z(
+    [
+      E,
+      T,
+      () => i.rows,
+      () => i.autosize,
+      () => i.inputStyle,
+      () => {
+        var e;
+        return (e = i.inputProps) == null ? void 0 : e.style;
+      }
+    ],
+    a,
+    {
+      deep: !0
+    }
+  ), z(v, () => {
+    n.value = {}, l(m);
+  }), z(
+    () => i.autosize,
     () => {
-      u(m);
+      l(m);
     },
     { deep: !0 }
-  ), T(() => {
+  ), L(() => {
     var e;
-    z(), (e = document.fonts) == null || e.ready.then(() => {
-      s && o();
+    b(), (e = document.fonts) == null || e.ready.then(() => {
+      d && a();
     });
-  }), E(z), Y(y), B(y), o;
+  }), N(b), O(F), C(F), { resize: Y, textareaStyle: n };
 }
 export {
-  L as useTextareaSize
+  j as useTextareaSize
 };

package/dist/composables/useTourLayout.js

@@ -0,0 +1,129 @@
+import { ref as S, shallowRef as E, computed as O, watch as H, onMounted as j, onActivated as k, onDeactivated as D, onBeforeUnmount as q } from "vue";
+import { popupSize as X } from "../motion/popup.js";
+import { positionFloating as Y } from "./floatingPosition.js";
+function R(t) {
+  try {
+    const s = typeof t == "function" ? t() : typeof t == "string" ? document.querySelector(t) : t;
+    return s instanceof HTMLElement && s.isConnected ? s : void 0;
+  } catch {
+    return;
+  }
+}
+function F() {
+  return {
+    width: document.documentElement.clientWidth || window.innerWidth,
+    height: document.documentElement.clientHeight || window.innerHeight
+  };
+}
+function B(t, s) {
+  const n = t.getBoundingClientRect();
+  let l = Math.max(0, n.left), i = Math.max(0, n.top), e = Math.min(s.width, n.right), o = Math.min(s.height, n.bottom);
+  if (!(!t.getClientRects().length || getComputedStyle(t).visibility !== "visible")) {
+    for (let c = t.parentElement; c && c !== document.body; c = c.parentElement) {
+      const { overflowX: w, overflowY: M } = getComputedStyle(c), f = /^(auto|scroll|hidden|clip|overlay)$/.test(w), r = /^(auto|scroll|hidden|clip|overlay)$/.test(M);
+      if (!f && !r) continue;
+      const $ = c.getBoundingClientRect();
+      f && (l = Math.max(l, $.left + c.clientLeft), e = Math.min(e, $.left + c.clientLeft + c.clientWidth)), r && (i = Math.max(i, $.top + c.clientTop), o = Math.min(o, $.top + c.clientTop + c.clientHeight));
+    }
+    return e > l && o > i ? new window.DOMRect(l, i, e - l, o - i) : void 0;
+  }
+}
+const V = (t, s) => Number.isFinite(t) ? Math.max(0, t) : s;
+function Z(t, s, n) {
+  const [l, i] = Array.isArray(n) ? n : [n, n], e = V(l, 6), o = V(i, 6), c = Math.max(0, t.left - e), w = Math.max(0, t.top - o);
+  return new window.DOMRect(
+    c,
+    w,
+    Math.min(s.width, t.right + e) - c,
+    Math.min(s.height, t.bottom + o) - w
+  );
+}
+function N(t, s) {
+  const { left: n, top: l, right: i, bottom: e } = t, o = Math.min(s, t.width / 2, t.height / 2);
+  return [
+    `M ${n + o} ${l} H ${i - o} Q ${i} ${l} ${i} ${l + o}`,
+    `V ${e - o} Q ${i} ${e} ${i - o} ${e}`,
+    `H ${n + o} Q ${n} ${e} ${n} ${e - o}`,
+    `V ${l + o} Q ${n} ${l} ${n + o} ${l} Z`
+  ].join(" ");
+}
+function G(t, s, n, l) {
+  const i = S(!1), e = E(), o = E(), c = E({ width: 0, height: 0 }), w = E(), M = E();
+  let f, r;
+  const $ = O(() => i.value && t.value ? R(l.value) : void 0), T = O(() => {
+    var p;
+    const { width: a, height: u } = c.value;
+    if (!a || !u) return "";
+    const d = `M 0 0 H ${a} V ${u} H 0 Z`;
+    return o.value ? d + " " + N(o.value, V((p = n.value.gap) == null ? void 0 : p.radius, 4)) : d;
+  });
+  function A() {
+    var L;
+    const a = F();
+    c.value = a;
+    const u = e.value && B(e.value, a), d = s.value;
+    if (!u || !d) {
+      o.value = void 0, w.value = void 0, M.value = void 0;
+      return;
+    }
+    const p = n.value, b = Z(u, a, (L = p.gap) == null ? void 0 : L.offset);
+    o.value = b;
+    const v = Y(
+      p.mask === !1 ? u : b,
+      X(d),
+      a,
+      p.placement ?? "bottom",
+      9,
+      12,
+      !0
+    );
+    w.value = v;
+    const y = p.arrow, x = typeof y == "object" && y.pointAtCenter === !1, g = x && v.placement.endsWith("start") ? 0 : x && v.placement.endsWith("end") ? 1 : 0.5, m = (W, Q) => Math.max(12, Math.min(W, Q - 12));
+    M.value = {
+      x: m(u.left + u.width * g - v.x, v.width),
+      y: m(u.top + u.height * g - v.y, v.height)
+    };
+  }
+  function h() {
+    f === void 0 && (f = requestAnimationFrame(() => {
+      f = void 0, A();
+    }));
+  }
+  function C(a) {
+    var u;
+    if (e.value !== a) {
+      if (e.value && (r == null || r.unobserve(e.value)), e.value = a, a) {
+        r == null || r.observe(a);
+        const d = n.value.scrollIntoViewOptions, p = a.getBoundingClientRect(), b = F(), v = B(a, b);
+        d !== !1 && (!v || v.width < p.width || v.height < p.height) && ((u = a.scrollIntoView) == null || u.call(a, typeof d == "object" ? { block: "center", inline: "nearest", ...d } : { block: "center", inline: "nearest" }));
+      }
+      h();
+    }
+  }
+  return H($, C, { flush: "post" }), H(n, () => {
+    i.value && t.value && h();
+  }, { flush: "post" }), H([i, t, s], ([a, u, d], p, b) => {
+    var y, x;
+    if (!a || !u || !d) return;
+    r = typeof ResizeObserver == "function" ? new ResizeObserver(h) : void 0, r == null || r.observe(d), e.value && (r == null || r.observe(e.value)), C(R(l.value)), A();
+    const v = new MutationObserver((g) => {
+      var m;
+      l.value && ((m = e.value) != null && m.isConnected ? g.some((L) => !d.contains(L.target)) && h() : C(R(l.value)));
+    });
+    v.observe(document.body, { childList: !0, subtree: !0 }), window.addEventListener("resize", h), window.addEventListener("scroll", h, !0), (y = window.visualViewport) == null || y.addEventListener("resize", h), (x = window.visualViewport) == null || x.addEventListener("scroll", h), b(() => {
+      var g, m;
+      f !== void 0 && cancelAnimationFrame(f), f = void 0, r == null || r.disconnect(), r = void 0, v.disconnect(), window.removeEventListener("resize", h), window.removeEventListener("scroll", h, !0), (g = window.visualViewport) == null || g.removeEventListener("resize", h), (m = window.visualViewport) == null || m.removeEventListener("scroll", h), e.value = void 0, w.value = void 0, o.value = void 0;
+    });
+  }, { flush: "post" }), j(() => {
+    i.value = !0;
+  }), k(() => {
+    i.value = !0;
+  }), D(() => {
+    i.value = !1;
+  }), q(() => {
+    f !== void 0 && cancelAnimationFrame(f);
+  }), { view: c, bounds: o, card: w, arrow: M, path: T };
+}
+export {
+  G as useTourLayout
+};

package/dist/config.js

@@ -1,16 +1,16 @@
-import { computed as a, toValue as s, provide as m, getCurrentInstance as i, inject as f } from "vue";
-const u = Symbol("hys-ui-config"), r = /* @__PURE__ */ new WeakMap();
-function h(t) {
-  const e = c(), n = { theme: t.theme ?? e.theme, motion: t.motion ?? e.motion };
-  m(u, n);
-  const o = i();
+import { computed as a, toValue as s, getCurrentInstance as u, inject as m, provide as l } from "vue";
+const i = Symbol("hys-ui-config"), r = /* @__PURE__ */ new WeakMap();
+function p(t) {
+  const e = c(), n = { theme: t.theme ?? e.theme, motion: t.motion ?? e.motion, buttonAutoInsertSpace: t.buttonAutoInsertSpace ?? e.buttonAutoInsertSpace };
+  l(i, n);
+  const o = u();
   o && r.set(o, n);
 }
 function c() {
-  const t = i();
-  return t && r.get(t) || f(u, {});
+  const t = u();
+  return t && r.get(t) || m(i, {});
 }
-function d() {
+function h() {
   const t = c();
   return a(() => {
     const e = s(t.theme), n = s(t.motion);
@@ -18,7 +18,7 @@ function d() {
   });
 }
 export {
-  h as provideHysConfig,
+  p as provideHysConfig,
   c as useHysConfig,
-  d as useHysRootAttrs
+  h as useHysRootAttrs
 };