flowbite-svelte 1.24.0 → 1.24.1

package/dist/command-palette/CommandPalette.svelte

@@ -194,7 +194,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2189)
+[CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2190)
 ## Props
 @prop open = $bindable(false)
 @prop items = []

package/dist/command-palette/CommandPalette.svelte.d.ts

@@ -2,7 +2,7 @@ import type { CommandPaletteProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2189)
+ * [CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2190)
  * ## Props
  * @prop open = $bindable(false)
  * @prop items = []

package/dist/scroll-spy/ScrollSpy.svelte

@@ -255,7 +255,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ScrollSpyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2204)
+[ScrollSpyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2205)
 ## Props
 @prop items
 @prop position = "top"

package/dist/scroll-spy/ScrollSpy.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ScrollSpyProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ScrollSpyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2204)
+ * [ScrollSpyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2205)
  * ## Props
  * @prop items
  * @prop position = "top"

package/dist/split-pane/Divider.svelte

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

package/dist/split-pane/Divider.svelte.d.ts

@@ -7,6 +7,7 @@ import type { DividerProps } from "../types";
  * @prop direction
  * @prop index
  * @prop onMouseDown
+ * @prop onTouchStart
  * @prop onKeyDown
  * @prop isDragging
  * @prop currentSize

package/dist/split-pane/Pane.svelte

@@ -32,7 +32,15 @@
 </div>
 
 {#if showDivider && context}
-  <Divider {direction} index={paneIndex} {isDragging} currentSize={context.getPaneSize(paneIndex)} onMouseDown={context.onMouseDown} onKeyDown={context.onKeyDown} />
+  <Divider
+    {direction}
+    index={paneIndex}
+    {isDragging}
+    currentSize={context.getPaneSize(paneIndex)}
+    onMouseDown={context.onMouseDown}
+    onTouchStart={context.onTouchStart}
+    onKeyDown={context.onKeyDown}
+  />
 {/if}
 
 <!--

package/dist/split-pane/SplitPane.svelte

@@ -11,6 +11,7 @@
     getDirection: () => "horizontal" | "vertical";
     getIsDragging: () => boolean;
     onMouseDown: (e: MouseEvent, index: number) => void;
+    onTouchStart: (e: TouchEvent, index: number) => void;
     onKeyDown: (e: KeyboardEvent, index: number) => void;
   }
 
@@ -106,6 +107,7 @@
     getDirection: () => currentDirection,
     getIsDragging: () => isDragging,
     onMouseDown: startResize,
+    onTouchStart: startTouchResize,
     onKeyDown: handleKeyResize
   });
 
@@ -281,6 +283,34 @@
     document.body.style.userSelect = "";
   }
 
+  function startTouchResize(e: TouchEvent, index: number) {
+    e.preventDefault();
+    isDragging = true;
+    transition = false;
+
+    const touch = e.touches[0];
+    startPos = currentDirection === "horizontal" ? touch.clientX : touch.clientY;
+
+    const moveHandler = (ev: TouchEvent) => resizeTouch(ev, index);
+    const endHandler = () => stopTouchResize(moveHandler, endHandler);
+
+    window.addEventListener("touchmove", moveHandler, { passive: false });
+    window.addEventListener("touchend", endHandler);
+    window.addEventListener("touchcancel", endHandler);
+
+    document.body.style.userSelect = "none";
+  }
+
+  function stopTouchResize(moveHandler: (e: TouchEvent) => void, endHandler: () => void) {
+    isDragging = false;
+    transition = transitionProp;
+    window.removeEventListener("touchmove", moveHandler);
+    window.removeEventListener("touchend", endHandler);
+    window.removeEventListener("touchcancel", endHandler);
+
+    document.body.style.userSelect = "";
+  }
+
   function resize(e: MouseEvent, index: number) {
     if (!isDragging || !container) return;
     if (index < 0 || index + 1 >= sizes.length) return;
@@ -327,6 +357,55 @@
     }
   }
 
+  function resizeTouch(e: TouchEvent, 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; // 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;
+
+    // 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;
+    }
+
+    // Only update if changed significantly
+    if (Math.abs(newSize1 - oldSize1) > MIN_CHANGE_THRESHOLD) {
+      sizes[index] = newSize1;
+      sizes[index + 1] = newSize2;
+      startPos = currentPos;
+    }
+  }
+
   function handleKeyResize(e: KeyboardEvent, index: number) {
     if (!container) return;
     if (index < 0 || index + 1 >= sizes.length) return;

package/dist/split-pane/SplitPane.svelte.d.ts

@@ -6,6 +6,7 @@ interface SplitPaneContext {
     getDirection: () => "horizontal" | "vertical";
     getIsDragging: () => boolean;
     onMouseDown: (e: MouseEvent, index: number) => void;
+    onTouchStart: (e: TouchEvent, index: number) => void;
     onKeyDown: (e: KeyboardEvent, index: number) => void;
 }
 export declare function setSplitPaneContext(ctx: SplitPaneContext): void;

package/dist/types.d.ts

@@ -1815,6 +1815,7 @@ export interface DividerProps {
     direction: "horizontal" | "vertical";
     index: number;
     onMouseDown: (e: MouseEvent, index: number) => void;
+    onTouchStart: (e: TouchEvent, index: number) => void;
     onKeyDown: (e: KeyboardEvent, index: number) => void;
     isDragging: boolean;
     class?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.24.0",
+  "version": "1.24.1",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {