@nmorph/nmorph-ui-kit 2.2.10 → 2.2.13

package/dist/hooks/use-common-styles.js

@@ -1,18 +1,18 @@
-import { nmorphCombined as p, nmorphInset as o, nmorphOutset as e, title1 as s, title2 as d, title3 as l, title4 as m, body1 as n, body2 as c, body3 as i, body4 as u } from "../utils/theme-style.js";
+import { nmorphCombined as p, nmorphInset as t, nmorphOutset as e, title1 as s, title2 as d, title3 as m, title4 as l, body1 as n, body2 as c, body3 as i, body4 as u } from "../utils/theme-style.js";
 const b = {
   "nmorph-body-4": u,
   "nmorph-body-3": i,
   "nmorph-body-2": c,
   "nmorph-body-1": n,
-  "nmorph-title-4": m,
-  "nmorph-title-3": l,
+  "nmorph-title-4": l,
+  "nmorph-title-3": m,
   "nmorph-title-2": d,
   "nmorph-title-1": s,
   "nmorph--shadow-outset": e,
-  "nmorph--shadow-inset": o,
+  "nmorph--shadow-inset": t,
   "nmorph--shadow-combined": p
-}, x = () => {
-  let t = `
+}, v = () => {
+  let r = `
     :root {
       --font-size-tiny: 10px;
       --font-size-extra-small: 12px;
@@ -198,6 +198,12 @@ const b = {
       height: var(--height);
     }
 
+    .nmorph--extra-thin-component {
+      --height: var(--extra-thin-component);
+
+      height: var(--height);
+    }
+
     .nmorph--thick-component {
       --height: var(--thick-component);
 
@@ -281,15 +287,8 @@ const b = {
       cursor: pointer;
     }
 
-    .nmorph-avatar__preview {
-      position: absolute;
-      width: 0;
-      height: 0;
-      overflow: visible;
-    }
-
-    .nmorph-avatar__preview .nmorph-image-preview__trigger {
-      display: none;
+    .nmorph-avatar--preview:hover > .nmorph-image {
+      filter: brightness(0.8);
     }
 
     .nmorph-image {
@@ -380,7 +379,7 @@ const b = {
       text-indent: var(--nmorph-text-input-indentation);
       border: none;
       border-radius: var(--default-border-radius);
-      ${o()}
+      ${t()}
     }
 
     .nmorph-text-input--with-action input {
@@ -513,7 +512,7 @@ const b = {
 
     .nmorph-scroll::-webkit-scrollbar-track {
       border-radius: var(--border-radius-40);
-      ${o()}
+      ${t()}
     }
 
     .nmorph-scroll::-webkit-scrollbar-thumb {
@@ -526,14 +525,18 @@ const b = {
     }
   `;
   for (const [a, h] of Object.entries(b))
-    t += `
+    r += `
 .${a} {
   ${h()}
 }
 `;
-  const r = document.createElement("style");
-  r.innerHTML = t, document.head.appendChild(r);
+  return r;
+}, x = () => {
+  if (typeof document > "u" || document.getElementById("nmorph-common-styles")) return;
+  const o = document.createElement("style");
+  o.id = "nmorph-common-styles", o.innerHTML = v(), document.head.appendChild(o);
 };
 export {
+  v as getCommonStyles,
   x as useCommonStyles
 };

package/dist/hooks/use-placement.js

@@ -1,57 +1,89 @@
-import { ref as p, inject as R, watch as S, onMounted as W, onUnmounted as k, nextTick as E } from "vue";
-const T = (b) => {
-  const { initialPlacement: y, relativeElement: s, contentDOMElement: c, yOffset: u = 0, xOffset: v = 0 } = b, e = p(y), r = p({ x: "0px", y: "0px" }), C = R("nmorph"), a = p(null);
-  S(
-    () => C.browser,
+import { ref as b, unref as n, inject as T, watch as F, onMounted as U, onUnmounted as X, nextTick as S } from "vue";
+const G = (j) => {
+  const { initialPlacement: g, relativeElement: y, contentDOMElement: u, yOffset: L = 0, xOffset: O = 0, enabled: h } = j, R = b(n(g)), C = b({ x: "0px", y: "0px" }), v = b(!1), k = T("nmorph"), P = { passive: !0, capture: !0 };
+  let w = null;
+  F(
+    () => k?.browser,
     () => {
-      n();
+      o();
     },
     { deep: !0 }
-  ), W(() => {
-    n(), L(), $(), h.observe(document.body, {
-      childList: !0,
-      subtree: !0
-    }), f();
-  }), k(() => {
-    O(), h.disconnect();
-  });
-  const f = () => {
-    E(() => {
-      c.value && n();
+  ), U(() => {
+    o(), V(), window.addEventListener("resize", o, { passive: !0 }), w = new MutationObserver(() => {
+      M();
+    }), w.observe(document.body, { childList: !0, subtree: !0 }), M();
+  }), X(() => {
+    W(), window.removeEventListener("resize", o), w?.disconnect();
+  }), F(
+    () => [n(g), n(y), n(O), n(L), n(h)],
+    () => {
+      o();
+    },
+    { flush: "post" }
+  );
+  const M = () => {
+    S(() => {
+      u.value && o();
     });
-  }, h = new MutationObserver(() => {
-    f();
-  }), L = () => {
-    let t = c.value;
-    for (; t; ) {
-      const o = window.getComputedStyle(t);
-      if (o.overflowY === "auto" || o.overflowY === "scroll") {
-        a.value = t;
-        break;
-      }
-      t = t.parentElement;
-    }
-  }, $ = () => {
-    a.value ? a.value.addEventListener("scroll", n, { passive: !0 }) : window.addEventListener("scroll", n, { passive: !0 });
-  }, O = () => {
-    a.value ? a.value.removeEventListener("scroll", n) : window.removeEventListener("scroll", n);
-  }, n = () => {
-    E(() => {
-      if (!c.value || !s) {
-        console.warn("There is no relative element or content DOM element");
+  }, A = () => h === void 0 || n(h) !== !1, q = (e) => {
+    const [s, t] = e.split("-");
+    return {
+      side: s,
+      align: t || "start",
+      hasAlign: !!t
+    };
+  }, z = (e, s, t) => t ? `${e}-${s}` : e, B = () => n(y), H = (e, s, t, l, d, r, i) => e === "top" && t - i < 0 ? "bottom" : e === "bottom" && t + d + i > window.innerHeight ? "top" : e === "left" && s - r < 0 ? "right" : e === "right" && s + l + r > window.innerWidth ? "left" : e, V = () => {
+    window.addEventListener("scroll", o, P);
+  }, W = () => {
+    window.removeEventListener("scroll", o, P);
+  }, o = () => {
+    S(() => {
+      if (typeof window > "u") return;
+      if (!A()) {
+        v.value = !1;
         return;
       }
-      const t = c.value.getBoundingClientRect(), o = t.width, d = t.height, w = "value" in s ? s.value : s;
-      if (!w) {
-        console.warn("Relative element is not an HTMLElement");
+      const e = B();
+      if (!u.value || !e) {
+        v.value = !1;
         return;
       }
-      const m = w.getBoundingClientRect(), { x: l, y: i } = m, x = m.width, g = m.height, H = window.innerWidth, M = window.innerHeight;
-      e.value === "top" && i - d < 0 && (e.value = "bottom"), e.value === "bottom" && i + g + d > M && (e.value = "top"), e.value === "left" && l - o < 0 && (e.value = "right"), e.value === "right" && l + x + o > H && (e.value = "left"), e.value === "top" && (r.value = { x: `${l + v}px`, y: `${i - d + u}px` }), e.value === "bottom" && (r.value = { x: `${l + v}px`, y: `${i + g + u}px` }), e.value === "right" && (r.value = { x: `${l + x + v}px`, y: `${i + u}px` }), e.value === "left" && (r.value = { x: `${l - o + v}px`, y: `${i + u}px` });
+      const s = u.value.getBoundingClientRect(), t = s.width, l = s.height, d = e.getBoundingClientRect(), { x: r, y: i } = d, m = d.width, p = d.height, D = n(O) || 0, N = n(L) || 0, f = q(n(g)), a = H(
+        f.side,
+        r,
+        i,
+        m,
+        p,
+        t,
+        l
+      );
+      let E = r, x = i;
+      if (a === "top" || a === "bottom") {
+        const c = {
+          start: r,
+          center: r + m / 2 - t / 2,
+          end: r + m - t
+        };
+        E = c[f.align] ?? c.start, x = a === "top" ? i - l : i + p;
+      }
+      if (a === "left" || a === "right") {
+        const c = {
+          start: i,
+          center: i + p / 2 - l / 2,
+          end: i + p - l
+        };
+        E = a === "left" ? r - t : r + m, x = c[f.align] ?? c.start;
+      }
+      R.value = z(a, f.align, f.hasAlign), C.value = { x: `${E + D}px`, y: `${x + N}px` }, v.value = !0, typeof requestAnimationFrame == "function" && requestAnimationFrame(() => {
+        const c = B();
+        if (!u.value || !c || !A()) return;
+        const $ = u.value.getBoundingClientRect();
+        ($.width !== t || $.height !== l) && o();
+      });
     });
   };
-  return { placement: e, placementCoords: r };
+  return { placement: R, placementCoords: C, placementReady: v, adjustPlacement: o };
 };
 export {
-  T as usePlacement
+  G as usePlacement
 };

package/dist/hooks/use-virtual-list.js

@@ -0,0 +1,46 @@
+import { ref as d, computed as t, onMounted as I, nextTick as p, onUnmounted as z, watch as L } from "vue";
+const y = (l, v) => {
+  const c = d(null), s = d(0), h = d(0), n = t(() => v.enabled?.value ?? !0), i = t(() => Math.max(v.overscan?.value ?? 0, 0)), a = t(() => Math.max(v.itemHeight.value, 1)), f = t(() => n.value ? l.value.length * a.value : 0), u = () => {
+    const e = c.value;
+    e && (s.value = e.scrollTop, h.value = e.clientHeight);
+  }, w = () => {
+    u();
+  }, r = t(() => n.value ? Math.max(Math.floor(s.value / a.value) - i.value, 0) : 0), m = t(() => {
+    if (!n.value) return l.value.length;
+    const e = Math.ceil((s.value + h.value) / a.value) + i.value;
+    return Math.min(Math.max(e, r.value + i.value), l.value.length);
+  }), M = t(() => r.value * a.value), g = t(() => n.value ? l.value.slice(r.value, m.value).map((e, o) => ({
+    item: e,
+    index: r.value + o
+  })) : l.value.map((e, o) => ({ item: e, index: o }))), H = (e) => {
+    const o = c.value;
+    if (!o || !n.value) return;
+    const T = Math.min(Math.max(e, 0) * a.value, f.value);
+    o.scrollTop = T, u();
+  }, x = () => {
+    u();
+  };
+  return I(() => {
+    p(u), typeof window < "u" && window.addEventListener("resize", x);
+  }), z(() => {
+    typeof window < "u" && window.removeEventListener("resize", x);
+  }), L(
+    () => [l.value.length, n.value, a.value],
+    () => {
+      p(u);
+    }
+  ), {
+    containerRef: c,
+    endIndex: m,
+    offsetTop: M,
+    refresh: u,
+    scrollHandler: w,
+    scrollToIndex: H,
+    startIndex: r,
+    totalHeight: f,
+    virtualItems: g
+  };
+};
+export {
+  y as useVirtualList
+};