flowbite-svelte 1.24.1 → 1.25.0

package/dist/index.d.ts

@@ -84,3 +84,4 @@ export * from "./kanban";
 export * from "./split-pane";
 export * from "./tour";
 export * from "./scroll-spy";
+export * from "./virtual-masonry";

package/dist/index.js

@@ -90,3 +90,4 @@ export * from "./kanban";
 export * from "./split-pane";
 export * from "./tour";
 export * from "./scroll-spy";
+export * from "./virtual-masonry";

package/dist/split-pane/Divider.svelte

@@ -3,6 +3,7 @@
   import { divider, dividerHitArea } from "./theme";
   import { getTheme } from "../theme/themeUtils";
   import clsx from "clsx";
+  import { nonPassiveTouch } from "../utils/nonPassiveTouch";
 
   let { direction, index, onMouseDown, onTouchStart, onKeyDown, isDragging, currentSize, class: className = "" }: DividerProps = $props();
 
@@ -26,7 +27,7 @@
   aria-valuetext={`${roundedSize} percent`}
   class={divider({ direction, isDragging, class: clsx(themePane, className) })}
   onmousedown={(e) => onMouseDown(e, index)}
-  ontouchstart={(e) => onTouchStart(e, index)}
+  use:nonPassiveTouch={(e) => onTouchStart(e, index)}
   onkeydown={(e) => onKeyDown(e, index)}
 >
   <div class={dividerHitArea({ direction, class: clsx(themeDividerHitArea, className) })}></div>

package/dist/split-pane/SplitPane.svelte

@@ -311,97 +311,46 @@
     document.body.style.userSelect = "";
   }
 
-  function resize(e: MouseEvent, index: number) {
-    if (!isDragging || !container) return;
-    if (index < 0 || index + 1 >= sizes.length) return;
-
-    const currentPos = currentDirection === "horizontal" ? e.clientX : e.clientY;
-    const delta = currentPos - startPos;
-
-    if (Math.abs(delta) < MIN_DELTA) return; // Ignore very small movements
-
-    const containerSize = currentDirection === "horizontal" ? container.offsetWidth : container.offsetHeight;
-
-    // Bail out if container has zero or near-zero dimensions
-    if (containerSize < 1) return;
-
-    const deltaPercent = (delta / containerSize) * 100;
-
-    // Calculate min as percentage based on current container size
-    const minPercent = (minSize / containerSize) * 100;
-
-    // Store original sizes
-    const oldSize1 = sizes[index];
-    const oldSize2 = sizes[index + 1];
-    const totalSize = oldSize1 + oldSize2;
-
-    // Calculate desired new sizes
-    let newSize1 = oldSize1 + deltaPercent;
-    let newSize2 = oldSize2 - deltaPercent;
+  function clampPaneSizes(index: number, targetSize: number, minPercent: number, total: number): boolean {
+    if (index < 0 || index + 1 >= sizes.length) return false;
 
-    // Apply minimum constraints - clamp to valid range
-    newSize1 = Math.max(minPercent, newSize1);
-    newSize2 = totalSize - newSize1;
+    let newSize1 = Math.min(total - minPercent, Math.max(minPercent, targetSize));
+    let newSize2 = total - newSize1;
 
-    // Check if second pane violates minimum constraint after first pane clamping
     if (newSize2 < minPercent) {
       newSize2 = minPercent;
-      newSize1 = totalSize - newSize2;
+      newSize1 = total - newSize2;
     }
 
-    // Only update if changed significantly
-    if (Math.abs(newSize1 - oldSize1) > MIN_CHANGE_THRESHOLD) {
+    if (Math.abs(newSize1 - sizes[index]) > MIN_CHANGE_THRESHOLD) {
       sizes[index] = newSize1;
       sizes[index + 1] = newSize2;
-      startPos = currentPos;
+      return true;
     }
+
+    return false;
   }
 
-  function resizeTouch(e: TouchEvent, index: number) {
+  function applyResize(currentPos: number, index: number) {
     if (!isDragging || !container) return;
     if (index < 0 || index + 1 >= sizes.length) return;
 
-    e.preventDefault(); // Prevent scrolling while dragging
-
-    const touch = e.touches[0];
-    const currentPos = currentDirection === "horizontal" ? touch.clientX : touch.clientY;
     const delta = currentPos - startPos;
+    if (Math.abs(delta) < MIN_DELTA) return;
 
-    if (Math.abs(delta) < MIN_DELTA) return; // Ignore very small movements
-
-    const containerSize = currentDirection === "horizontal" ? container.offsetWidth : container.offsetHeight;
-
-    // Bail out if container has zero or near-zero dimensions
-    if (containerSize < 1) return;
-
-    const deltaPercent = (delta / containerSize) * 100;
+    const currentContainerSize = currentDirection === "horizontal" ? container.offsetWidth : container.offsetHeight;
+    if (currentContainerSize < 1) return;
 
-    // Calculate min as percentage based on current container size
-    const minPercent = (minSize / containerSize) * 100;
+    const deltaPercent = (delta / currentContainerSize) * 100;
+    const minPercent = (minSize / currentContainerSize) * 100;
 
-    // Store original sizes
     const oldSize1 = sizes[index];
     const oldSize2 = sizes[index + 1];
     const totalSize = oldSize1 + oldSize2;
 
-    // Calculate desired new sizes
-    let newSize1 = oldSize1 + deltaPercent;
-    let newSize2 = oldSize2 - deltaPercent;
-
-    // Apply minimum constraints - clamp to valid range
-    newSize1 = Math.max(minPercent, newSize1);
-    newSize2 = totalSize - newSize1;
-
-    // Check if second pane violates minimum constraint after first pane clamping
-    if (newSize2 < minPercent) {
-      newSize2 = minPercent;
-      newSize1 = totalSize - newSize2;
-    }
+    const targetSize = oldSize1 + deltaPercent;
 
-    // Only update if changed significantly
-    if (Math.abs(newSize1 - oldSize1) > MIN_CHANGE_THRESHOLD) {
-      sizes[index] = newSize1;
-      sizes[index + 1] = newSize2;
+    if (clampPaneSizes(index, targetSize, minPercent, totalSize)) {
       startPos = currentPos;
     }
   }
@@ -410,41 +359,24 @@
     if (!container) return;
     if (index < 0 || index + 1 >= sizes.length) return;
 
-    const step = keyboardStep;
-    let handled = false;
-
     const isHorizontal = currentDirection === "horizontal";
     const increaseKeys = isHorizontal ? ["ArrowRight"] : ["ArrowDown"];
     const decreaseKeys = isHorizontal ? ["ArrowLeft"] : ["ArrowUp"];
 
     const containerSize = isHorizontal ? container.offsetWidth : container.offsetHeight;
-    // Bail out if container has zero or near-zero dimensions
     if (containerSize < 1) return;
 
     const minPercent = (minSize / containerSize) * 100;
-
     const total = sizes[index] + sizes[index + 1];
 
-    const applyClamp = (target: number) => {
-      let newSize1 = Math.min(total - minPercent, Math.max(minPercent, target));
-      let newSize2 = total - newSize1;
-
-      if (newSize2 < minPercent) {
-        newSize2 = minPercent;
-        newSize1 = total - newSize2;
-      }
-
-      if (Math.abs(newSize1 - sizes[index]) > MIN_CHANGE_THRESHOLD) {
-        sizes[index] = newSize1;
-        sizes[index + 1] = newSize2;
-        handled = true;
-      }
-    };
+    let handled = false;
 
     if (increaseKeys.includes(e.key)) {
-      applyClamp(sizes[index] + step);
+      const targetSize = sizes[index] + keyboardStep;
+      handled = clampPaneSizes(index, targetSize, minPercent, total);
     } else if (decreaseKeys.includes(e.key)) {
-      applyClamp(sizes[index] - step);
+      const targetSize = sizes[index] - keyboardStep;
+      handled = clampPaneSizes(index, targetSize, minPercent, total);
     } else if (e.key === "Enter" || e.key === " ") {
       // Reset to equal sizes
       const equal = 100 / registeredPanes;
@@ -456,6 +388,18 @@
       e.preventDefault();
     }
   }
+
+  function resize(e: MouseEvent, index: number) {
+    const currentPos = currentDirection === "horizontal" ? e.clientX : e.clientY;
+    applyResize(currentPos, index);
+  }
+
+  function resizeTouch(e: TouchEvent, index: number) {
+    e.preventDefault(); // Prevent scrolling while dragging
+    const touch = e.touches[0];
+    const currentPos = currentDirection === "horizontal" ? touch.clientX : touch.clientY;
+    applyResize(currentPos, index);
+  }
 </script>
 
 <div bind:this={container} class={splitpane({ direction: currentDirection, class: clsx(theme, className) })}>

package/dist/theme/themes.d.ts

@@ -74,3 +74,4 @@ export { kanbanBoard, kanbanCard } from "../kanban/theme";
 export { splitpane, pane, divider, dividerHitArea } from "../split-pane/theme";
 export { tour } from "../tour/theme";
 export { scrollspy } from "../scroll-spy/theme";
+export { virtualMasonry } from "../virtual-masonry/theme";

package/dist/theme/themes.js

@@ -81,3 +81,4 @@ export { kanbanBoard, kanbanCard } from "../kanban/theme";
 export { splitpane, pane, divider, dividerHitArea } from "../split-pane/theme";
 export { tour } from "../tour/theme";
 export { scrollspy } from "../scroll-spy/theme";
+export { virtualMasonry } from "../virtual-masonry/theme";

package/dist/types.d.ts

@@ -1883,3 +1883,17 @@ export interface ScrollSpyProps extends ScrollSpyVariants, HTMLAttributes<HTMLEl
     /** Callback when navigation item is clicked */
     onNavigate?: (itemId: string) => void;
 }
+import type { VirtualMasonryVariants } from "./virtual-masonry/theme";
+export interface VirtualMasonryProps<T = unknown> extends VirtualMasonryVariants, Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    children: Snippet<[item: T, index: number]>;
+    items?: T[];
+    columns?: number;
+    gap?: number;
+    height?: number;
+    overscan?: number;
+    getItemHeight?: (item: T, index: number) => number;
+    scrollToIndex?: (fn: (index: number) => void) => void;
+    contained?: boolean;
+    ariaLabel?: string;
+    class?: ClassValue | null;
+}

package/dist/utils/nonPassiveTouch.d.ts

@@ -0,0 +1,3 @@
+export declare function nonPassiveTouch(node: HTMLElement, handler: (event: TouchEvent) => void): {
+    destroy(): void;
+};

package/dist/utils/nonPassiveTouch.js

@@ -0,0 +1,8 @@
+export function nonPassiveTouch(node, handler) {
+    node.addEventListener("touchstart", handler, { passive: false });
+    return {
+        destroy() {
+            node.removeEventListener("touchstart", handler);
+        }
+    };
+}

package/dist/virtual-masonry/VirtualMasonry.svelte

@@ -0,0 +1,185 @@
+<script lang="ts" generics="T">
+  import type { VirtualMasonryProps } from "../types";
+  import { virtualMasonry } from "./theme";
+  import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
+
+  let {
+    items = [],
+    columns = 3,
+    gap = 16,
+    height = 600,
+    overscan = 200,
+    getItemHeight,
+    scrollToIndex,
+    children,
+    ariaLabel = "Virtual masonry grid",
+    class: className,
+    classes,
+    contained = false
+  }: VirtualMasonryProps<T> = $props();
+
+  const theme = getTheme("virtualMasonry");
+
+  let container: HTMLDivElement | undefined;
+  let containerWidth = $state(0);
+  let scrollTop = $state(0);
+  let rafId: number | undefined;
+
+  const styles = virtualMasonry({ contained });
+
+  const containStyle = $derived.by(() => {
+    if (!contained) return "";
+    const itemClasses = clsx(classes?.item);
+    const hasCustomContain = /\[contain:[^\]]+\]/.test(itemClasses);
+    return hasCustomContain ? "" : "contain: layout style paint;";
+  });
+
+  // Calculate column width based on container width
+  const columnWidth = $derived.by(() => {
+    if (containerWidth === 0) return 0;
+    return (containerWidth - gap * (columns - 1)) / columns;
+  });
+
+  // Position items in columns
+  interface PositionedItem {
+    item: T;
+    index: number;
+    x: number;
+    y: number;
+    height: number;
+    column: number;
+  }
+
+  const positionedItems = $derived.by((): PositionedItem[] => {
+    if (columnWidth === 0) return [];
+
+    const columnHeights = new Array(columns).fill(0);
+    const positioned: PositionedItem[] = [];
+
+    for (let i = 0; i < items.length; i++) {
+      // Find shortest column
+      const shortestColumn = columnHeights.indexOf(Math.min(...columnHeights));
+      const itemHeight = getItemHeight ? getItemHeight(items[i], i) : 200;
+
+      positioned.push({
+        item: items[i],
+        index: i,
+        x: shortestColumn * (columnWidth + gap),
+        y: columnHeights[shortestColumn],
+        height: itemHeight,
+        column: shortestColumn
+      });
+
+      columnHeights[shortestColumn] += itemHeight + gap;
+    }
+
+    return positioned;
+  });
+
+  // Total height is the tallest column
+  const totalHeight = $derived.by(() => {
+    if (positionedItems.length === 0) return 0;
+    return Math.max(...positionedItems.map((item) => item.y + item.height));
+  });
+
+  // Visible items based on scroll position with overscan
+  const visibleItems = $derived.by(() => {
+    const viewportTop = scrollTop - overscan;
+    const viewportBottom = scrollTop + height + overscan;
+
+    return positionedItems.filter((item) => {
+      const itemTop = item.y;
+      const itemBottom = item.y + item.height;
+      return itemBottom >= viewportTop && itemTop <= viewportBottom;
+    });
+  });
+
+  // Performance optimized scroll handler using RAF
+  function handleScroll() {
+    if (rafId) cancelAnimationFrame(rafId);
+    rafId = requestAnimationFrame(() => {
+      if (container) scrollTop = container.scrollTop;
+    });
+  }
+
+  // Scroll to specific index
+  function scrollToIndexImpl(index: number) {
+    if (!container || index < 0 || index >= items.length) return;
+    const item = positionedItems[index];
+    if (item) {
+      container.scrollTop = item.y;
+    }
+  }
+
+  // Bind scrollToIndex function to parent component
+  $effect(() => {
+    if (scrollToIndex) {
+      scrollToIndex(scrollToIndexImpl);
+    }
+  });
+
+  // Measure container width on mount and resize
+  $effect(() => {
+    if (!container) return;
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        containerWidth = entry.contentRect.width;
+      }
+    });
+
+    resizeObserver.observe(container);
+
+    return () => {
+      resizeObserver.disconnect();
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  });
+</script>
+
+<div
+  bind:this={container}
+  onscroll={handleScroll}
+  role="list"
+  aria-label={ariaLabel}
+  class={styles.container({ class: clsx(theme?.container, className) })}
+  style={`height:${height}px; position:relative;`}
+>
+  <div class={styles.spacer({ class: clsx(theme?.spacer, classes?.spacer) })} style={`height:${totalHeight}px;`}>
+    <div class={styles.content({ class: clsx(theme?.content, classes?.content) })}>
+      {#each visibleItems as { item, index, x, y, height: itemHeight } (index)}
+        <div
+          role="listitem"
+          aria-setsize={items.length}
+          aria-posinset={index + 1}
+          class={styles.item({ class: clsx(theme?.item, classes?.item) })}
+          style={`position:absolute; left:${x}px; top:${y}px; width:${columnWidth}px; height:${itemHeight}px; ${containStyle}`}
+        >
+          {@render children?.(item, index)}
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<!--
+@component
+VirtualMasonry - Virtualized masonry/pinterest layout for efficient rendering of large image grids
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[VirtualMasonryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts)
+## Props
+@prop items = []
+@prop columns = 3
+@prop gap = 16
+@prop height = 600
+@prop overscan = 200
+@prop getItemHeight
+@prop scrollToIndex
+@prop children
+@prop ariaLabel = "Virtual masonry grid"
+@prop contained = false
+@prop class: className
+@prop classes
+-->

package/dist/virtual-masonry/VirtualMasonry.svelte.d.ts

@@ -0,0 +1,44 @@
+import type { VirtualMasonryProps } from "../types";
+declare function $$render<T>(): {
+    props: VirtualMasonryProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * VirtualMasonry - Virtualized masonry/pinterest layout for efficient rendering of large image grids
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [VirtualMasonryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts)
+ * ## Props
+ * @prop items = []
+ * @prop columns = 3
+ * @prop gap = 16
+ * @prop height = 600
+ * @prop overscan = 200
+ * @prop getItemHeight
+ * @prop scrollToIndex
+ * @prop children
+ * @prop ariaLabel = "Virtual masonry grid"
+ * @prop contained = false
+ * @prop class: className
+ * @prop classes
+ */
+declare const VirtualMasonry: $$IsomorphicComponent;
+type VirtualMasonry<T> = InstanceType<typeof VirtualMasonry<T>>;
+export default VirtualMasonry;

package/dist/virtual-masonry/index.d.ts

@@ -0,0 +1,3 @@
+export { default as VirtualMasonry } from "./VirtualMasonry.svelte";
+export type { VirtualMasonryVariants } from "./theme";
+export { virtualMasonry } from "./theme";

package/dist/virtual-masonry/index.js

@@ -0,0 +1,2 @@
+export { default as VirtualMasonry } from "./VirtualMasonry.svelte";
+export { virtualMasonry } from "./theme";

package/dist/virtual-masonry/theme.d.ts

@@ -0,0 +1,40 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export declare const virtualMasonry: import("tailwind-variants").TVReturnType<{
+    contained: {
+        true: {
+            item: string;
+        };
+        false: {};
+    };
+}, {
+    container: string;
+    spacer: string;
+    content: string;
+    item: string;
+}, undefined, {
+    contained: {
+        true: {
+            item: string;
+        };
+        false: {};
+    };
+}, {
+    container: string;
+    spacer: string;
+    content: string;
+    item: string;
+}, import("tailwind-variants").TVReturnType<{
+    contained: {
+        true: {
+            item: string;
+        };
+        false: {};
+    };
+}, {
+    container: string;
+    spacer: string;
+    content: string;
+    item: string;
+}, undefined, unknown, unknown, undefined>>;
+export type VirtualMasonryVariants = VariantProps<typeof virtualMasonry> & Classes<typeof virtualMasonry>;

package/dist/virtual-masonry/theme.js

@@ -0,0 +1,18 @@
+import { tv } from "tailwind-variants";
+export const virtualMasonry = tv({
+    slots: {
+        container: "overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent",
+        spacer: "relative",
+        content: "relative w-full",
+        item: ""
+    },
+    variants: {
+        contained: {
+            true: { item: "[contain:layout_style_paint]" },
+            false: {}
+        }
+    },
+    defaultVariants: {
+        contained: false
+    }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.24.1",
+  "version": "1.25.0",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -861,6 +861,10 @@
       "types": "./dist/video/Video.svelte.d.ts",
       "svelte": "./dist/video/Video.svelte"
     },
+    "./VirtualMasonry.svelte": {
+      "types": "./dist/virtual-masonry/VirtualMasonry.svelte.d.ts",
+      "svelte": "./dist/virtual-masonry/VirtualMasonry.svelte"
+    },
     "./VirtualList.svelte": {
       "types": "./dist/virtuallist/VirtualList.svelte.d.ts",
       "svelte": "./dist/virtuallist/VirtualList.svelte"