@nmorph/nmorph-ui-kit 2.2.15 → 2.2.17

package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue.js

@@ -1,36 +1,36 @@
 import './NmorphDropdown.css';
 import n from "./NmorphDropdown.vue2.js";
-import { openBlock as r, createBlock as t, withCtx as d, createElementBlock as i, normalizeStyle as p, normalizeClass as l, renderSlot as a, createCommentVNode as m } from "vue";
+import { openBlock as r, createBlock as a, withCtx as l, createElementBlock as p, normalizeStyle as s, normalizeClass as i, renderSlot as c, createCommentVNode as d } from "vue";
 /* empty css                    */
-import s from "../../../_virtual/_plugin-vue_export-helper.js";
-function c(e, f, _, o, h, w) {
-  return r(), t(o.NmorphOverlay, {
+import t from "../../../_virtual/_plugin-vue_export-helper.js";
+const m = ["role", "aria-label"];
+function f(e, _, h, o, w, k) {
+  return r(), a(o.NmorphOverlay, {
     show: o.props.open,
     transparent: "",
     "z-index": o.props.zIndex,
-    onOnOutsideClick: o.outsideClickHandler
+    "close-on-escape": o.props.closeOnEscape,
+    "trap-focus": o.props.trapFocus,
+    onOnOutsideClick: o.outsideClickHandler,
+    onOnEscapeKeydown: o.escapeHandler
   }, {
-    default: d(() => [
-      o.props.open ? (r(), i(
-        "div",
-        {
-          key: 0,
-          ref: "dropdownDOMRef",
-          class: l(o.modifiers),
-          style: p(o.dropdownStyle)
-        },
-        [
-          a(e.$slots, "default")
-        ],
-        6
-        /* CLASS, STYLE */
-      )) : m("v-if", !0)
+    default: l(() => [
+      o.props.open ? (r(), p("div", {
+        key: 0,
+        ref: "dropdownDOMRef",
+        class: i(o.modifiers),
+        style: s(o.dropdownStyle),
+        role: o.props.role || void 0,
+        "aria-label": o.props.ariaLabel || void 0
+      }, [
+        c(e.$slots, "default")
+      ], 14, m)) : d("v-if", !0)
     ]),
     _: 3
     /* FORWARDED */
-  }, 8, ["show", "z-index"]);
+  }, 8, ["show", "z-index", "close-on-escape", "trap-focus"]);
 }
-const z = /* @__PURE__ */ s(n, [["render", c], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue"]]);
+const b = /* @__PURE__ */ t(n, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue"]]);
 export {
-  z as default
+  b as default
 };

package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue2.js

@@ -1,9 +1,9 @@
 import './NmorphDropdown.css';
-import { defineComponent as v, ref as w, toRef as r, computed as n, watch as b } from "vue";
-import { useModifiers as x } from "../../../utils/create-modifiers.js";
-import { usePlacement as O } from "../../../hooks/use-placement.js";
-import q from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-const g = /* @__PURE__ */ v({
+import { defineComponent as w, ref as b, toRef as r, computed as i, watch as v } from "vue";
+import { useModifiers as q } from "../../../utils/create-modifiers.js";
+import { usePlacement as x } from "../../../hooks/use-placement.js";
+import O from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+const k = /* @__PURE__ */ w({
   __name: "NmorphDropdown",
   props: {
     open: { type: Boolean, required: !0 },
@@ -15,47 +15,53 @@ const g = /* @__PURE__ */ v({
     xOffset: { type: Number, required: !1, default: 0 },
     yOffset: { type: Number, required: !1, default: 0 },
     fillWidth: { type: Boolean, required: !1, default: !0 },
-    zIndex: { type: Number, required: !1, default: void 0 }
+    zIndex: { type: Number, required: !1, default: void 0 },
+    closeOnEscape: { type: Boolean, required: !1, default: !0 },
+    trapFocus: { type: Boolean, required: !1, default: !1 },
+    role: { type: String, required: !1, default: "listbox" },
+    ariaLabel: { type: String, required: !1, default: "" }
   },
-  emits: ["on-outside-click"],
-  setup(s, { expose: f, emit: c }) {
-    f();
-    const e = s, l = c, d = w(null), { placementCoords: i, placementReady: p, adjustPlacement: a } = O({
+  emits: ["on-outside-click", "on-escape-keydown"],
+  setup(f, { expose: m, emit: c }) {
+    m();
+    const e = f, n = c, d = b(null), { placementCoords: l, placementReady: a, adjustPlacement: s } = x({
       initialPlacement: r(e, "placement"),
       contentDOMElement: d,
       relativeElement: r(e, "relativeElement"),
       yOffset: r(e, "yOffset"),
       xOffset: r(e, "xOffset"),
       enabled: r(e, "open")
-    }), h = n(
-      () => x({
+    }), y = i(
+      () => q({
         "nmorph-dropdown": [`${!e.open && "closed"}`]
       })
-    ), o = (t) => typeof t == "number" ? `${t}px` : t, u = n(
+    ), o = (t) => typeof t == "number" ? `${t}px` : t, p = i(
       () => e.fillWidth && e.relativeElement ? `${e.relativeElement.clientWidth}px` : o(e.width)
-    ), y = n(() => ({
-      "--nmorph-dropdown-width": u.value,
+    ), h = i(() => ({
+      "--nmorph-dropdown-width": p.value,
       "--nmorph-dropdown-min-width": o(e.minWidth) || "auto",
       "--nmorph-dropdown-max-width": o(e.maxWidth) || "none",
-      left: i.value.x,
-      top: i.value.y,
-      visibility: e.open && p.value ? "visible" : "hidden"
+      left: l.value.x,
+      top: l.value.y,
+      visibility: e.open && a.value ? "visible" : "hidden"
     }));
-    b(
+    v(
       () => e.open,
       (t) => {
-        t && a();
+        t && s();
       },
       { flush: "post" }
     );
-    const m = { props: e, emit: l, dropdownDOMRef: d, placementCoords: i, placementReady: p, adjustPlacement: a, modifiers: h, getCssSize: o, width: u, dropdownStyle: y, outsideClickHandler: () => {
-      l("on-outside-click");
+    const u = { props: e, emit: n, dropdownDOMRef: d, placementCoords: l, placementReady: a, adjustPlacement: s, modifiers: y, getCssSize: o, width: p, dropdownStyle: h, outsideClickHandler: () => {
+      n("on-outside-click");
+    }, escapeHandler: () => {
+      n("on-escape-keydown");
     }, get NmorphOverlay() {
-      return q;
+      return O;
     } };
-    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
   }
 });
 export {
-  g as default
+  k as default
 };

package/dist/components/others/nmorph-overlay/NmorphOverlay.vue.js

@@ -1,35 +1,59 @@
 import './NmorphOverlay.css';
-import s from "./NmorphOverlay.vue2.js";
-import { openBlock as i, createBlock as n, Teleport as p, createElementVNode as e, withModifiers as l, normalizeStyle as a, normalizeClass as d, renderSlot as m } from "vue";
+import a from "./NmorphOverlay.vue2.js";
+import { openBlock as t, createElementBlock as c, withModifiers as r, normalizeStyle as i, normalizeClass as s, createElementVNode as n, renderSlot as d, createBlock as p, Teleport as m } from "vue";
 /* empty css                   */
-import c from "../../../_virtual/_plugin-vue_export-helper.js";
-function f(t, r, _, o, h, v) {
-  return i(), n(p, {
-    to: o.props.teleportTo,
-    disabled: o.props.disabledTeleport || !o.props.show
+import f from "../../../_virtual/_plugin-vue_export-helper.js";
+const v = ["tabindex"], y = ["tabindex"];
+function k(l, e, _, o, h, x) {
+  return o.renderInline ? (t(), c(
+    "div",
+    {
+      key: 0,
+      class: s(o.modifiers),
+      style: i({ "--nmorph-overlay-z-index": o.zIndex }),
+      onClick: r(o.clickHandler, ["stop"])
+    },
+    [
+      n("div", {
+        ref: "contentRef",
+        class: "nmorph-overlay__slot",
+        tabindex: o.props.trapFocus ? -1 : void 0,
+        onClick: e[0] || (e[0] = r(() => {
+        }, ["stop"]))
+      }, [
+        d(l.$slots, "default")
+      ], 8, v)
+    ],
+    6
+    /* CLASS, STYLE */
+  )) : (t(), p(m, {
+    key: 1,
+    to: o.props.teleportTo
   }, [
-    e(
+    n(
       "div",
       {
-        class: d(o.modifiers),
-        style: a({ "--nmorph-overlay-z-index": o.zIndex }),
-        onClick: l(o.clickHandler, ["stop"])
+        class: s(o.modifiers),
+        style: i({ "--nmorph-overlay-z-index": o.zIndex }),
+        onClick: r(o.clickHandler, ["stop"])
       },
       [
-        e("div", {
+        n("div", {
+          ref: "contentRef",
           class: "nmorph-overlay__slot",
-          onClick: r[0] || (r[0] = l(() => {
+          tabindex: o.props.trapFocus ? -1 : void 0,
+          onClick: e[1] || (e[1] = r(() => {
           }, ["stop"]))
         }, [
-          m(t.$slots, "default")
-        ])
+          d(l.$slots, "default")
+        ], 8, y)
       ],
       6
       /* CLASS, STYLE */
     )
-  ], 8, ["to", "disabled"]);
+  ], 8, ["to"]));
 }
-const z = /* @__PURE__ */ c(s, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/others/nmorph-overlay/NmorphOverlay.vue"]]);
+const I = /* @__PURE__ */ f(a, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/others/nmorph-overlay/NmorphOverlay.vue"]]);
 export {
-  z as default
+  I as default
 };

package/dist/components/others/nmorph-overlay/NmorphOverlay.vue2.js

@@ -1,32 +1,79 @@
 import './NmorphOverlay.css';
-import { defineComponent as p, computed as r } from "vue";
-import { useModifiers as u } from "../../../utils/create-modifiers.js";
-import { useZIndex as f } from "../../../hooks/use-z-index.js";
-const y = /* @__PURE__ */ p({
+import { defineComponent as _, computed as i, ref as q, watch as g, onBeforeUnmount as B, nextTick as A } from "vue";
+import { useModifiers as F } from "../../../utils/create-modifiers.js";
+import { useZIndex as I } from "../../../hooks/use-z-index.js";
+const L = /* @__PURE__ */ _({
   __name: "NmorphOverlay",
   props: {
     show: { type: Boolean, required: !0 },
     transparent: { type: Boolean, required: !1, default: !1 },
     zIndex: { type: Number, required: !1, default: void 0 },
     teleportTo: { type: null, required: !1, default: "body" },
-    disabledTeleport: { type: Boolean, required: !1, default: !1 }
+    disabledTeleport: { type: Boolean, required: !1, default: !1 },
+    closeOnEscape: { type: Boolean, required: !1, default: !0 },
+    trapFocus: { type: Boolean, required: !1, default: !1 },
+    restoreFocus: { type: Boolean, required: !1, default: !0 }
   },
-  emits: ["on-outside-click"],
-  setup(s, { expose: n, emit: a }) {
-    n();
-    const e = s, l = f(
-      r(() => e.show),
-      () => e.zIndex
-    ), d = r(
-      () => u({
-        "nmorph-overlay": [`${e.show && "show"}`, `${e.transparent && "transparent"}`]
+  emits: ["on-outside-click", "on-escape-keydown"],
+  setup(b, { expose: v, emit: h }) {
+    v();
+    const t = b, E = I(
+      i(() => t.show),
+      () => t.zIndex
+    ), w = i(
+      () => F({
+        "nmorph-overlay": [`${t.show && "show"}`, `${t.transparent && "transparent"}`]
       })
-    ), i = () => {
-      t("on-outside-click");
-    }, t = a, o = { props: e, zIndex: l, modifiers: d, clickHandler: i, emit: t };
-    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
+    ), k = i(() => t.disabledTeleport || !t.show || typeof document > "u"), x = () => {
+      s("on-outside-click");
+    }, s = h, n = q(null);
+    let o = null;
+    const d = [
+      "a[href]",
+      "button:not([disabled])",
+      "textarea:not([disabled])",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])'
+    ].join(","), u = () => n.value ? Array.from(n.value.querySelectorAll(d)).filter(
+      (e) => e.getAttribute("aria-hidden") !== "true"
+    ) : [], c = async () => {
+      if (!t.trapFocus) return;
+      await A(), (u()[0] || n.value)?.focus();
+    }, l = (e) => {
+      if (!t.show) return;
+      if (e.key === "Escape" && t.closeOnEscape) {
+        e.preventDefault(), s("on-escape-keydown");
+        return;
+      }
+      if (e.key !== "Tab" || !t.trapFocus) return;
+      const r = u();
+      if (!r.length) {
+        e.preventDefault(), n.value?.focus();
+        return;
+      }
+      const m = r[0], y = r[r.length - 1];
+      e.shiftKey && document.activeElement === m ? (e.preventDefault(), y.focus()) : !e.shiftKey && document.activeElement === y && (e.preventDefault(), m.focus());
+    }, f = () => {
+      typeof document > "u" || document.addEventListener("keydown", l);
+    }, a = () => {
+      typeof document > "u" || document.removeEventListener("keydown", l);
+    };
+    g(
+      () => t.show,
+      (e) => {
+        typeof document > "u" || (e ? (o = document.activeElement, f(), c()) : (a(), t.restoreFocus && o?.focus?.(), o = null));
+      },
+      { immediate: !0, flush: "post" }
+    ), B(a);
+    const p = { props: t, zIndex: E, modifiers: w, renderInline: k, clickHandler: x, emit: s, contentRef: n, get previousActiveElement() {
+      return o;
+    }, set previousActiveElement(e) {
+      o = e;
+    }, focusableSelector: d, getFocusableElements: u, focusContent: c, keydownHandler: l, addKeydownListener: f, removeKeydownListener: a };
+    return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
   }
 });
 export {
-  y as default
+  L as default
 };

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

@@ -1,7 +1,7 @@
-import { nmorphCombined as p, nmorphInset as t, 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";
-const b = {
-  "nmorph-body-4": u,
-  "nmorph-body-3": i,
+import { nmorphCombined as p, nmorphInset as r, nmorphOutset as e, title1 as s, title2 as d, title3 as l, title4 as m, body1 as n, 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,
   "nmorph-body-1": n,
   "nmorph-title-4": m,
@@ -9,10 +9,10 @@ const b = {
   "nmorph-title-2": d,
   "nmorph-title-1": s,
   "nmorph--shadow-outset": e,
-  "nmorph--shadow-inset": t,
+  "nmorph--shadow-inset": r,
   "nmorph--shadow-combined": p
 }, v = () => {
-  let r = `
+  let t = `
     :root {
       --font-size-tiny: 10px;
       --font-size-extra-small: 12px;
@@ -54,6 +54,30 @@ const b = {
       --indentation-04: 16px;
 
       --base-shadow-blur: calc(var(--base-shadow-width) * var(--base-shadow-blur-coefficient));
+      --nmorph-shadow-outset:
+        var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),
+        calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur)
+          var(--nmorph-light-shade-color);
+      --nmorph-shadow-inset:
+        inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),
+        inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur)
+          var(--nmorph-light-shade-color);
+      --nmorph-shadow-combined:
+        var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),
+        calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur)
+          var(--nmorph-light-shade-color),
+        inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur)
+          var(--nmorph-dark-shade-color),
+        inset calc(-1 * var(--base-shadow-width)) calc(-0.5 * var(--base-shadow-width)) var(--base-shadow-blur)
+          var(--nmorph-light-shade-color);
+      --nmorph-shadow-combined-dark:
+        var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),
+        calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur)
+          var(--nmorph-light-shade-color),
+        inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur)
+          var(--nmorph-dark-shade-color),
+        inset calc(-1 * var(--base-shadow-width)) calc(-0.5 * var(--base-shadow-width)) var(--base-shadow-blur)
+          var(--nmorph-dark-shade-color);
       --nmorph-wrapper-padding: calc(var(--base-shadow-width) * 1.5);
 
       --transition-04: 0.4s;
@@ -219,7 +243,7 @@ const b = {
     }
 
     .nmorph--thin-component.nmorph-native-input {
-      ${i()}
+      ${a()}
     }
 
     .nmorph-native-input:focus {
@@ -278,14 +302,7 @@ const b = {
     .nmorph-avatar.nmorph--shadow-combined {
       border: var(--nmorph-avatar-frame-border) solid var(--nmorph-main-color);
       background: var(--nmorph-main-color);
-      box-shadow:
-        var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),
-        calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur)
-          var(--nmorph-light-shade-color),
-        inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur)
-          var(--nmorph-dark-shade-color),
-        inset calc(-1 * var(--base-shadow-width)) calc(-0.5 * var(--base-shadow-width)) var(--base-shadow-blur)
-          var(--nmorph-dark-shade-color);
+      box-shadow: var(--nmorph-shadow-combined-dark);
     }
 
     .nmorph-avatar > .nmorph-image > img {
@@ -394,7 +411,7 @@ const b = {
       text-indent: var(--nmorph-text-input-indentation);
       border: none;
       border-radius: var(--default-border-radius);
-      ${t()}
+      ${r()}
     }
 
     .nmorph-text-input--with-action input {
@@ -420,21 +437,13 @@ const b = {
     .nmorph-text-input input:-webkit-autofill:active {
       -webkit-text-fill-color: var(--nmorph-text-color);
       caret-color: var(--nmorph-text-color);
-      box-shadow:
-        inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),
-        inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur)
-          var(--nmorph-light-shade-color),
-        inset 0 0 0 1000px var(--nmorph-main-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(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),
-        calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur)
-          var(--nmorph-light-shade-color),
-        inset 0 0 0 1000px var(--nmorph-accent-color);
+      box-shadow: var(--nmorph-shadow-outset), inset 0 0 0 1000px var(--nmorph-accent-color);
       outline: none;
     }
 
@@ -530,7 +539,7 @@ const b = {
 
     .nmorph-scroll::-webkit-scrollbar-track {
       border-radius: var(--border-radius-40);
-      ${t()}
+      ${r()}
     }
 
     .nmorph-scroll::-webkit-scrollbar-thumb {
@@ -542,19 +551,19 @@ const b = {
       background-color: transparent;
     }
   `;
-  for (const [a, h] of Object.entries(b))
-    r += `
-.${a} {
+  for (const [i, h] of Object.entries(u))
+    t += `
+.${i} {
   ${h()}
 }
 `;
-  return r;
-}, x = () => {
+  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);
 };
 export {
   v as getCommonStyles,
-  x as useCommonStyles
+  g as useCommonStyles
 };

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

@@ -1,46 +1,74 @@
-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) => ({
+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(() => {
+    const e = [];
+    let t = 0;
+    for (let l = 0; l < a.value.length; l++)
+      e[l] = t, t += p(l);
+    return { offsets: e, total: t };
+  }), w = n(() => s.value ? u.value ? f.value.total : a.value.length * o.value : 0), r = () => {
+    const e = x.value;
+    if (!e) return;
+    const t = Math.max(w.value - e.clientHeight, 0);
+    e.scrollTop > t && (e.scrollTop = t), c.value = e.scrollTop, d.value = e.clientHeight;
+  }, I = () => {
+    r();
+  }, v = n(() => {
+    if (!s.value) return 0;
+    if (u.value) {
+      const e = f.value.offsets.findIndex((t, l) => t + p(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;
+    if (u.value) {
+      const t = c.value + d.value;
+      let l = v.value;
+      for (; l < a.value.length && f.value.offsets[l] <= t; )
+        l++;
+      return Math.min(l + i.value, a.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(() => 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) => ({
     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();
+    index: v.value + t
+  })) : a.value.map((e, t) => ({ item: e, index: t }))), E = (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) => {
+    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 = () => {
+    r();
   };
-  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],
+  return R(() => {
+    M(r), typeof window < "u" && window.addEventListener("resize", T);
+  }), V(() => {
+    typeof window < "u" && window.removeEventListener("resize", T);
+  }), k(
+    () => [a.value.length, s.value, o.value, u.value],
     () => {
-      p(u);
+      M(r);
     }
   ), {
-    containerRef: c,
-    endIndex: m,
-    offsetTop: M,
-    refresh: u,
-    scrollHandler: w,
-    scrollToIndex: H,
-    startIndex: r,
-    totalHeight: f,
-    virtualItems: g
+    containerRef: x,
+    endIndex: H,
+    offsetTop: y,
+    refresh: r,
+    measureElement: L,
+    scrollHandler: I,
+    scrollToIndex: E,
+    startIndex: v,
+    totalHeight: w,
+    viewportHeight: d,
+    virtualItems: z
   };
 };
 export {
-  y as useVirtualList
+  C as useVirtualList
 };

package/dist/icons.d.ts

@@ -0,0 +1,2 @@
+export * from './src/icons'
+export {}