@epoch32/visage 1.1.3 → 1.1.5

package/dist/index-8czhpea8.js

@@ -0,0 +1,338 @@
+import {
+  computed2,
+  onCleanup2,
+  effect2,
+  signal2
+} from "./index-6kfe1nr4.js";
+import {
+  For2
+} from "./index-5s255b3w.js";
+import {
+  jsx2
+} from "./index-9fvarkrx.js";
+
+// src/virtual/virtualizer.ts
+function createVirtualizer2(options) {
+  const overscan = options.overscan ?? 3;
+  const isHorizontal = Boolean(options.horizontal);
+  const getCount = () => typeof options.count === "function" ? options.count() : options.count;
+  const getItemHeight = typeof options.itemHeight === "function" ? options.itemHeight : () => options.itemHeight;
+  const scrollOffset = signal2(0);
+  const containerSize = signal2(options.initialSize ?? 400);
+  const dynamicSizeCache = new Map;
+  const getItemSize = (index) => {
+    const cached = dynamicSizeCache.get(index);
+    if (cached !== undefined)
+      return cached;
+    return getItemHeight(index);
+  };
+  const totalSize = computed2(() => {
+    const count = getCount();
+    if (typeof options.itemHeight === "number" && dynamicSizeCache.size === 0) {
+      return count * options.itemHeight;
+    }
+    let total = 0;
+    for (let i = 0;i < count; i++) {
+      total += getItemSize(i);
+    }
+    return total;
+  });
+  const getOffsetForIndex = (targetIndex) => {
+    if (typeof options.itemHeight === "number" && dynamicSizeCache.size === 0) {
+      return targetIndex * options.itemHeight;
+    }
+    let offset = 0;
+    for (let i = 0;i < targetIndex; i++) {
+      offset += getItemSize(i);
+    }
+    return offset;
+  };
+  const findIndexAtOffset = (offset) => {
+    const count = getCount();
+    if (count === 0)
+      return 0;
+    if (typeof options.itemHeight === "number" && dynamicSizeCache.size === 0) {
+      const idx = Math.floor(offset / options.itemHeight);
+      return Math.max(0, Math.min(count - 1, idx));
+    }
+    let low = 0;
+    let high = count - 1;
+    while (low <= high) {
+      const mid = low + high >> 1;
+      const midStart = getOffsetForIndex(mid);
+      const midEnd = midStart + getItemSize(mid);
+      if (offset < midStart) {
+        high = mid - 1;
+      } else if (offset >= midEnd) {
+        low = mid + 1;
+      } else {
+        return mid;
+      }
+    }
+    return Math.max(0, Math.min(count - 1, low));
+  };
+  const startIndex = computed2(() => {
+    const offset = scrollOffset();
+    const rawStart = findIndexAtOffset(offset);
+    return Math.max(0, rawStart - overscan);
+  });
+  const endIndex = computed2(() => {
+    const count = getCount();
+    if (count === 0)
+      return 0;
+    const endOffset = scrollOffset() + (containerSize() || 500);
+    const rawEnd = findIndexAtOffset(endOffset);
+    return Math.min(count - 1, rawEnd + overscan);
+  });
+  const itemCache = new Map;
+  const virtualItems = computed2(() => {
+    const count = getCount();
+    if (count === 0)
+      return [];
+    const start = startIndex();
+    const end = endIndex();
+    const items = [];
+    let currentStart = getOffsetForIndex(start);
+    for (let i = start;i <= end; i++) {
+      const size = getItemSize(i);
+      let item = itemCache.get(i);
+      if (!item || item.start !== currentStart || item.size !== size) {
+        item = {
+          index: i,
+          start: currentStart,
+          size,
+          end: currentStart + size,
+          key: i
+        };
+        itemCache.set(i, item);
+      }
+      items.push(item);
+      currentStart += size;
+    }
+    return items;
+  });
+  effect2(() => {
+    const el = options.getScrollElement();
+    if (!el || typeof el.addEventListener !== "function")
+      return;
+    const handleScroll = () => {
+      const offset = isHorizontal ? el.scrollLeft : el.scrollTop;
+      scrollOffset.set(offset);
+    };
+    const handleResize = () => {
+      const size = isHorizontal ? el.clientWidth : el.clientHeight;
+      if (size > 0) {
+        containerSize.set(size);
+      }
+    };
+    handleResize();
+    handleScroll();
+    el.addEventListener("scroll", handleScroll, { passive: true });
+    let resizeObserver;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(() => {
+        handleResize();
+      });
+      resizeObserver.observe(el);
+    }
+    onCleanup2(() => {
+      el.removeEventListener("scroll", handleScroll);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    });
+  });
+  const scrollToIndex = (index, scrollOpts) => {
+    const el = options.getScrollElement();
+    if (!el)
+      return;
+    const align = scrollOpts?.align ?? "auto";
+    const itemStart = getOffsetForIndex(index);
+    const itemSize = getItemSize(index);
+    const itemEnd = itemStart + itemSize;
+    const currentScroll = scrollOffset();
+    const cSize = containerSize();
+    let targetOffset = itemStart;
+    if (align === "start") {
+      targetOffset = itemStart;
+    } else if (align === "end") {
+      targetOffset = itemEnd - cSize;
+    } else if (align === "center") {
+      targetOffset = itemStart - (cSize - itemSize) / 2;
+    } else {
+      if (itemStart < currentScroll) {
+        targetOffset = itemStart;
+      } else if (itemEnd > currentScroll + cSize) {
+        targetOffset = itemEnd - cSize;
+      } else {
+        return;
+      }
+    }
+    targetOffset = Math.max(0, targetOffset);
+    if (isHorizontal) {
+      el.scrollLeft = targetOffset;
+    } else {
+      el.scrollTop = targetOffset;
+    }
+    scrollOffset.set(targetOffset);
+  };
+  const scrollToOffset = (offset) => {
+    const el = options.getScrollElement();
+    if (el) {
+      if (isHorizontal) {
+        el.scrollLeft = offset;
+      } else {
+        el.scrollTop = offset;
+      }
+    }
+    scrollOffset.set(offset);
+  };
+  const measureElement = (element, index) => {
+    if (!element)
+      return;
+    const measuredSize = isHorizontal ? element.getBoundingClientRect().width : element.getBoundingClientRect().height;
+    if (measuredSize > 0 && dynamicSizeCache.get(index) !== measuredSize) {
+      dynamicSizeCache.set(index, measuredSize);
+      scrollOffset.update((o) => o);
+    }
+  };
+  return {
+    virtualItems,
+    totalSize,
+    scrollOffset,
+    containerSize,
+    startIndex,
+    endIndex,
+    scrollToIndex,
+    scrollToOffset,
+    measureElement
+  };
+}
+
+// src/virtual/virtual-list.tsx
+function VirtualList2(props) {
+  const scrollElement = signal2(null);
+  const getItems = () => typeof props.each === "function" ? props.each() : props.each;
+  const count = computed2(() => getItems().length);
+  const parsedHeight = typeof props.height === "number" ? props.height : Number.parseInt(String(props.height || 400), 10) || 400;
+  const virtualizer = createVirtualizer2({
+    count,
+    itemHeight: props.itemHeight,
+    overscan: props.overscan ?? 3,
+    initialSize: parsedHeight,
+    getScrollElement: () => scrollElement()
+  });
+  const containerHeight = typeof props.height === "number" ? `${props.height}px` : props.height ?? "400px";
+  const containerWidth = typeof props.width === "number" ? `${props.width}px` : props.width ?? "100%";
+  return /* @__PURE__ */ jsx2("div", {
+    ref: (el) => {
+      scrollElement.set(el);
+    },
+    class: props.class,
+    style: () => {
+      const customStyle = typeof props.style === "function" ? props.style() : props.style || {};
+      return {
+        overflowY: "auto",
+        overflowX: "hidden",
+        position: "relative",
+        height: containerHeight,
+        width: containerWidth,
+        WebkitOverflowScrolling: "touch",
+        ...customStyle
+      };
+    },
+    children: /* @__PURE__ */ jsx2("div", {
+      style: () => ({
+        height: `${virtualizer.totalSize()}px`,
+        width: "100%",
+        position: "relative",
+        pointerEvents: "none"
+      }),
+      children: /* @__PURE__ */ jsx2(For2, {
+        each: () => virtualizer.virtualItems(),
+        children: (vItem) => {
+          const itemData = computed2(() => getItems()[vItem.index]);
+          return /* @__PURE__ */ jsx2("div", {
+            style: () => ({
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: `${vItem.size}px`,
+              transform: `translateY(${vItem.start}px)`,
+              pointerEvents: "auto",
+              willChange: "transform"
+            }),
+            children: props.children(itemData(), () => vItem.index)
+          });
+        }
+      })
+    })
+  });
+}
+function VirtualGrid2(props) {
+  const scrollElement = signal2(null);
+  const getData = () => typeof props.data === "function" ? props.data() : props.data;
+  const rowCount = computed2(() => getData().length);
+  const colCount = computed2(() => {
+    const d = getData();
+    return d[0] ? d[0].length : 0;
+  });
+  const rowVirtualizer = createVirtualizer2({
+    count: rowCount,
+    itemHeight: props.rowHeight,
+    overscan: props.overscan ?? 3,
+    getScrollElement: () => scrollElement()
+  });
+  const colVirtualizer = createVirtualizer2({
+    count: colCount,
+    itemHeight: props.columnWidth,
+    overscan: props.overscan ?? 3,
+    horizontal: true,
+    getScrollElement: () => scrollElement()
+  });
+  const containerHeight = typeof props.height === "number" ? `${props.height}px` : props.height ?? "400px";
+  const containerWidth = typeof props.width === "number" ? `${props.width}px` : props.width ?? "100%";
+  return /* @__PURE__ */ jsx2("div", {
+    ref: (el) => {
+      scrollElement.set(el);
+    },
+    style: {
+      overflow: "auto",
+      position: "relative",
+      height: containerHeight,
+      width: containerWidth,
+      WebkitOverflowScrolling: "touch"
+    },
+    children: /* @__PURE__ */ jsx2("div", {
+      style: () => ({
+        height: `${rowVirtualizer.totalSize()}px`,
+        width: `${colVirtualizer.totalSize()}px`,
+        position: "relative"
+      }),
+      children: /* @__PURE__ */ jsx2(For2, {
+        each: () => rowVirtualizer.virtualItems(),
+        children: (r) => /* @__PURE__ */ jsx2(For2, {
+          each: () => colVirtualizer.virtualItems(),
+          children: (c) => {
+            const rowData = getData()[r.index];
+            const item = rowData ? rowData[c.index] : undefined;
+            return /* @__PURE__ */ jsx2("div", {
+              style: () => ({
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: `${c.size}px`,
+                height: `${r.size}px`,
+                transform: `translate(${c.start}px, ${r.start}px)`,
+                willChange: "transform"
+              }),
+              children: props.children(item, r.index, c.index)
+            });
+          }
+        })
+      })
+    })
+  });
+}
+export { createVirtualizer2, VirtualList2, VirtualGrid2 };