@nmorph/nmorph-ui-kit 2.2.36 → 2.2.37

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

@@ -1,17 +1,17 @@
-import { nmorphCombined as p, nmorphInset as r, nmorphOutset as n, title1 as s, title2 as l, title3 as d, title4 as m, body1 as e, body2 as c, body3 as a, body4 as b } from "../utils/theme-style.js";
-const u = {
-  "nmorph-body-4": b,
-  "nmorph-body-3": a,
-  "nmorph-body-2": c,
+import { nmorphCombined as i, nmorphInset as s, nmorphOutset as h, title1 as d, title2 as l, title3 as p, title4 as c, body1 as e, body2 as b, body3 as r, body4 as m } from "../utils/theme-style.js";
+const v = {
+  "nmorph-body-4": m,
+  "nmorph-body-3": r,
+  "nmorph-body-2": b,
   "nmorph-body-1": e,
-  "nmorph-title-4": m,
-  "nmorph-title-3": d,
+  "nmorph-title-4": c,
+  "nmorph-title-3": p,
   "nmorph-title-2": l,
-  "nmorph-title-1": s,
-  "nmorph--shadow-outset": n,
-  "nmorph--shadow-inset": r,
-  "nmorph--shadow-combined": p
-}, v = () => {
+  "nmorph-title-1": d,
+  "nmorph--shadow-outset": h,
+  "nmorph--shadow-inset": s,
+  "nmorph--shadow-combined": i
+}, u = () => {
   let t = `
     :root {
       --font-size-tiny: 10px;
@@ -284,7 +284,7 @@ const u = {
     }
 
     .nmorph--thin-component.nmorph-native-input {
-      ${a()}
+      ${r()}
     }
 
     .nmorph-native-input:focus {
@@ -316,212 +316,6 @@ const u = {
       }
     }
 
-    .nmorph-avatar {
-      position: relative;
-      overflow: hidden;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .nmorph-avatar--circle {
-      border-radius: var(--border-radius-circular);
-    }
-
-    .nmorph-avatar--square {
-      border-radius: var(--default-border-radius);
-    }
-
-    .nmorph-avatar > .nmorph-image {
-      position: absolute;
-      --width: var(--nmorph-avatar-size);
-      --height: var(--nmorph-avatar-size);
-      padding: var(--nmorph-avatar-image-padding);
-      border-radius: var(--nmorph-avatar-radius);
-    }
-
-    .nmorph-avatar.nmorph--shadow-combined {
-      border: var(--nmorph-avatar-frame-border) solid var(--nmorph-main-color);
-      background: var(--nmorph-main-color);
-      box-shadow: var(--nmorph-shadow-combined-dark);
-    }
-
-    .nmorph-avatar > .nmorph-image > img {
-      border-radius: var(--nmorph-avatar-image-radius);
-    }
-
-    .nmorph-avatar__initials {
-      color: var(--nmorph-text-color);
-      font-weight: 600;
-      line-height: 1;
-    }
-
-    .nmorph-avatar--preview {
-      cursor: pointer;
-    }
-
-    .nmorph-avatar--preview:hover > .nmorph-image {
-      filter: brightness(0.8);
-    }
-
-    .nmorph-image {
-      --width: auto;
-      --height: 100%;
-      width: var(--width);
-      height: var(--height);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .nmorph-image.nmorph--shadow-combined {
-      border: var(--nmorph-image-frame-border) solid var(--nmorph-main-color);
-    }
-
-    .nmorph-image img {
-      width: 100%;
-      height: 100%;
-      object-fit: var(--nmorph-image-fit);
-    }
-
-    .nmorph-image__loading,
-    .nmorph-image__load-failed {
-      padding: 1rem;
-    }
-
-    .nmorph-image--hide img {
-      width: 0;
-      height: 0;
-      opacity: 0;
-    }
-
-    .nmorph-text-input {
-      display: flex;
-      flex: 1 1 auto;
-      flex-direction: column;
-      align-items: flex-start;
-      min-width: 0;
-      --prepend-icon-indent: 8px;
-      --prepend-icon-size: 14px;
-    }
-
-    .nmorph-text-input__input-side {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      width: 100%;
-    }
-
-    .nmorph-text-input__prepend-icon {
-      position: absolute;
-      left: 0;
-      z-index: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--prepend-icon-size);
-      min-width: var(--prepend-icon-size);
-      height: var(--prepend-icon-size);
-      min-height: var(--prepend-icon-size);
-      margin-left: var(--prepend-icon-indent);
-      pointer-events: none;
-    }
-
-    .nmorph-text-input__prepend-icon svg,
-    .nmorph-text-input__prepend-icon .nmorph-icon,
-    .nmorph-text-input__prepend-icon .nmorph-icon__content {
-      width: 100%;
-      min-width: 100%;
-      height: 100%;
-      min-height: 100%;
-    }
-
-    .nmorph-text-input__prepend-icon svg {
-      fill: var(--nmorph-text-color);
-      stroke-width: 0;
-    }
-
-    .nmorph-text-input__prepend-icon path {
-      stroke: var(--nmorph-text-color);
-    }
-
-    .nmorph-text-input input {
-      width: 100%;
-      height: var(--height);
-      text-indent: var(--nmorph-text-input-indentation);
-      border: none;
-      border-radius: var(--default-border-radius);
-      ${r()}
-    }
-
-    .nmorph-text-input--with-action input {
-      padding-right: calc(var(--height) + var(--indentation-03));
-    }
-
-    .nmorph-text-input input:focus {
-      ${n()}
-      background: var(--nmorph-accent-color);
-      outline: none;
-    }
-
-    .nmorph-text-input.nmorph--focused .nmorph-text-input__prepend-icon svg {
-      fill: var(--nmorph-focus-text-color);
-    }
-
-    .nmorph-text-input.nmorph--focused .nmorph-text-input__prepend-icon path {
-      stroke: var(--nmorph-focus-text-color);
-    }
-
-    .nmorph-text-input input:-webkit-autofill,
-    .nmorph-text-input input:-webkit-autofill:hover,
-    .nmorph-text-input input:-webkit-autofill:active {
-      -webkit-text-fill-color: var(--nmorph-text-color);
-      caret-color: var(--nmorph-text-color);
-      box-shadow: var(--nmorph-shadow-inset), inset 0 0 0 1000px var(--nmorph-main-color);
-    }
-
-    .nmorph-text-input input:-webkit-autofill:focus {
-      -webkit-text-fill-color: var(--nmorph-focus-text-color);
-      caret-color: var(--nmorph-focus-text-color);
-      box-shadow: var(--nmorph-shadow-outset), inset 0 0 0 1000px var(--nmorph-accent-color);
-      outline: none;
-    }
-
-    .nmorph-text-input input:disabled {
-      cursor: not-allowed;
-      opacity: 0.6;
-    }
-
-    .nmorph-text-input__password-btn {
-      position: absolute;
-      right: 0;
-      height: 100%;
-    }
-
-    .nmorph-text-input__password-btn .nmorph-button__content {
-      padding: var(--indentation-03);
-    }
-
-    .nmorph-text-input.nmorph-button.nmorph--thin-component .nmorph-text-input__password-btn {
-      margin-top: var(--indentation-00);
-    }
-
-    .nmorph-text-input.nmorph-button.nmorph--thin-component .nmorph-text-input__password-btn .nmorph-button {
-      --height: var(--thin-component);
-    }
-
-    .nmorph-text-input.nmorph-button.nmorph--focused .nmorph-text-input__password-btn .nmorph-icon {
-      --color: var(--nmorph-white-color);
-    }
-
-    .nmorph-text-input.nmorph-button.nmorph--focused
-      .nmorph-text-input__password-btn
-      .nmorph-button:not(:disabled, [loading='true']):hover
-      .nmorph-icon {
-      --color: var(--nmorph-white-color);
-    }
-
     .list-enter-active,
     .list-leave-active {
       transition: all var(--transition-02) ease;
@@ -563,74 +357,20 @@ const u = {
       }
     }
 
-    .nmorph-scroll {
-      --thumb-color: var(--nmorph-scroll-thumb-color, var(--nmorph-text-color));
-      color-scheme: var(--nmorph-scroll-color-scheme, light);
-    }
-
-    @-moz-document url-prefix() {
-      .nmorph-scroll {
-        scrollbar-color: var(--thumb-color) transparent;
-        scrollbar-width: thin;
-      }
-    }
-
-    .nmorph-scroll::-webkit-scrollbar {
-      width: var(--bar-width);
-      height: var(--bar-height);
-      background-color: transparent;
-      cursor: pointer;
-      transition: width ease-in-out 0.2s;
-    }
-
-    .nmorph-scroll::-webkit-scrollbar-button,
-    .nmorph-scroll::-webkit-scrollbar-button:single-button,
-    .nmorph-scroll::-webkit-scrollbar-button:double-button,
-    .nmorph-scroll::-webkit-scrollbar-button:vertical:start:decrement,
-    .nmorph-scroll::-webkit-scrollbar-button:vertical:end:increment,
-    .nmorph-scroll::-webkit-scrollbar-button:horizontal:start:decrement,
-    .nmorph-scroll::-webkit-scrollbar-button:horizontal:end:increment {
-      display: none !important;
-      width: 0 !important;
-      min-width: 0 !important;
-      max-width: 0 !important;
-      height: 0 !important;
-      min-height: 0 !important;
-      max-height: 0 !important;
-      border: 0 !important;
-      background: transparent !important;
-      background-image: none !important;
-      -webkit-appearance: none;
-      appearance: none;
-    }
-
-    .nmorph-scroll::-webkit-scrollbar-track {
-      border-radius: var(--border-radius-40);
-      ${r()}
-    }
-
-    .nmorph-scroll::-webkit-scrollbar-thumb {
-      background-color: var(--thumb-color);
-      border-radius: var(--border-radius-40);
-    }
-
-    .nmorph-scroll::-webkit-scrollbar-corner {
-      background-color: transparent;
-    }
   `;
-  for (const [i, h] of Object.entries(u))
+  for (const [a, n] of Object.entries(v))
     t += `
-.${i} {
-  ${h()}
+.${a} {
+  ${n()}
 }
 `;
   return t;
 }, g = () => {
   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);
+  o.id = "nmorph-common-styles", o.innerHTML = u(), document.head.appendChild(o);
 };
 export {
-  v as getCommonStyles,
+  u as getCommonStyles,
   g as useCommonStyles
 };

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

@@ -1,72 +1,78 @@
-import { ref as m, computed as n, onMounted as R, nextTick as M, onUnmounted as V, watch as k } from "vue";
-const C = (a, h) => {
-  const x = m(null), c = m(0), d = m(0), s = n(() => h.enabled?.value ?? !0), i = n(() => Math.max(h.overscan?.value ?? 0, 0)), u = n(() => h.dynamic?.value ?? !1), o = n(() => Math.max(h.itemHeight.value, 1)), g = m({}), p = (e) => u.value && g.value[e] || o.value, f = n(() => {
+import { ref as m, computed as a, onMounted as V, nextTick as M, onUnmounted as $, watch as k } from "vue";
+const C = (n, h) => {
+  const x = m(null), c = m(0), d = m(0), s = a(() => h.enabled?.value ?? !0), i = a(() => Math.max(h.overscan?.value ?? 0, 0)), u = a(() => h.dynamic?.value ?? !1), o = a(() => Math.max(h.itemHeight.value, 1)), g = m({}), w = (e) => u.value && g.value[e] || o.value, f = a(() => {
     const e = [];
     let t = 0;
-    for (let l = 0; l < a.value.length; l++)
-      e[l] = t, t += p(l);
+    for (let l = 0; l < n.value.length; l++)
+      e[l] = t, t += w(l);
     return { offsets: e, total: t };
-  }), w = n(() => s.value ? u.value ? f.value.total : a.value.length * o.value : 0), r = () => {
+  }), p = a(() => s.value ? u.value ? f.value.total : n.value.length * o.value : 0), r = () => {
     const e = x.value;
     if (!e) return;
-    const t = Math.max(w.value - e.clientHeight, 0);
+    const t = Math.max(p.value - e.clientHeight, 0);
     e.scrollTop > t && (e.scrollTop = t), c.value = e.scrollTop, d.value = e.clientHeight;
-  }, I = () => {
+  }, y = () => {
     r();
-  }, v = n(() => {
+  }, v = a(() => {
     if (!s.value) return 0;
     if (u.value) {
-      const e = f.value.offsets.findIndex((t, l) => t + p(l) >= c.value);
+      const e = f.value.offsets.findIndex((t, l) => t + w(l) >= c.value);
       return Math.max(e === -1 ? 0 : e - i.value, 0);
     }
     return Math.max(Math.floor(c.value / o.value) - i.value, 0);
-  }), H = n(() => {
-    if (!s.value) return a.value.length;
+  }), H = a(() => {
+    if (!s.value) return n.value.length;
     if (u.value) {
       const t = c.value + d.value;
       let l = v.value;
-      for (; l < a.value.length && f.value.offsets[l] <= t; )
+      for (; l < n.value.length && f.value.offsets[l] <= t; )
         l++;
-      return Math.min(l + i.value, a.value.length);
+      return Math.min(l + i.value, n.value.length);
     }
     const e = Math.ceil((c.value + d.value) / o.value) + i.value;
-    return Math.min(Math.max(e, v.value + i.value), a.value.length);
-  }), y = n(
+    return Math.min(Math.max(e, v.value + i.value), n.value.length);
+  }), T = a(
     () => u.value ? f.value.offsets[v.value] || 0 : v.value * o.value
-  ), z = n(() => s.value ? a.value.slice(v.value, H.value).map((e, t) => ({
+  ), z = a(() => s.value ? n.value.slice(v.value, H.value).map((e, t) => ({
     item: e,
     index: v.value + t
-  })) : a.value.map((e, t) => ({ item: e, index: t }))), E = (e) => {
+  })) : n.value.map((e, t) => ({ item: e, index: t }))), E = a(() => ({
+    height: `${p.value}px`
+  })), L = a(() => ({
+    transform: `translateY(${T.value}px)`
+  })), S = (e) => {
     const t = x.value;
     if (!t || !s.value) return;
-    const l = Math.min(Math.max(e, 0), Math.max(a.value.length - 1, 0)), b = u.value ? f.value.offsets[l] || 0 : l * o.value;
-    t.scrollTop = b, r();
-  }, L = (e, t) => {
+    const l = Math.min(Math.max(e, 0), Math.max(n.value.length - 1, 0)), R = u.value ? f.value.offsets[l] || 0 : l * o.value;
+    t.scrollTop = R, r();
+  }, b = (e, t) => {
     if (!u.value || !t) return;
     const l = Math.ceil(t.getBoundingClientRect().height || t.offsetHeight);
     !l || g.value[e] === l || (g.value = { ...g.value, [e]: l }, M(r));
-  }, T = () => {
+  }, I = () => {
     r();
   };
-  return R(() => {
-    M(r), typeof window < "u" && window.addEventListener("resize", T);
-  }), V(() => {
-    typeof window < "u" && window.removeEventListener("resize", T);
+  return V(() => {
+    M(r), typeof window < "u" && window.addEventListener("resize", I);
+  }), $(() => {
+    typeof window < "u" && window.removeEventListener("resize", I);
   }), k(
-    () => [a.value.length, s.value, o.value, u.value],
+    () => [n.value.length, s.value, o.value, u.value],
     () => {
       M(r);
     }
   ), {
     containerRef: x,
+    contentStyle: L,
     endIndex: H,
-    offsetTop: y,
+    offsetTop: T,
     refresh: r,
-    measureElement: L,
-    scrollHandler: I,
-    scrollToIndex: E,
+    measureElement: b,
+    scrollHandler: y,
+    scrollToIndex: S,
+    spacerStyle: E,
     startIndex: v,
-    totalHeight: w,
+    totalHeight: p,
     viewportHeight: d,
     virtualItems: z
   };