flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/carousel/Carousel.svelte

@@ -1,123 +1,165 @@
-<script context="module"></script>
-
-<script>import { createEventDispatcher, onMount, setContext } from "svelte";
-import { writable } from "svelte/store";
-import { twMerge } from "tailwind-merge";
-import Controls from "./Controls.svelte";
-import Indicators from "./Indicators.svelte";
-import Slide from "./Slide.svelte";
-import { canChangeSlide } from "./CarouselSlide";
-const SLIDE_DURATION_RATIO = 0.25;
-export let images;
-export let index = 0;
-export let slideDuration = 1e3;
-export let transition = null;
-export let duration = 0;
-export let ariaLabel = "Draggable Carousel";
-export let disableSwipe = false;
-let divClass = "grid overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96";
-export let imgClass = "";
-const dispatch = createEventDispatcher();
-const { set, subscribe, update } = writable({ images, index, forward: true, slideDuration, lastSlideChange: /* @__PURE__ */ new Date() });
-const state = { set: (_state) => set({ index: _state.index, images: _state.images, lastSlideChange: /* @__PURE__ */ new Date(), slideDuration, forward }), subscribe, update };
-let forward = true;
-setContext("state", state);
-subscribe((_state) => {
-  index = _state.index;
-  forward = _state.forward;
-  dispatch("change", images[index]);
-});
-onMount(() => {
-  dispatch("change", images[index]);
-});
-const nextSlide = () => {
-  update((_state) => {
-    if (!canChangeSlide({ lastSlideChange: _state.lastSlideChange, slideDuration, slideDurationRatio: SLIDE_DURATION_RATIO })) return _state;
-    _state.index = _state.index >= images.length - 1 ? 0 : _state.index + 1;
-    _state.lastSlideChange = /* @__PURE__ */ new Date();
-    return { ..._state };
+<script lang="ts">
+  import clsx from "clsx";
+  import { onMount, setContext } from "svelte";
+  import { writable } from "svelte/store";
+  import type { TransitionConfig } from "svelte/transition";
+  import type { ParamsType } from "../types";
+  import { canChangeSlide } from "./CarouselSlide";
+  import Slide from "./Slide.svelte";
+  import { carousel } from "./theme";
+  import type { CarouselProps as Props, State } from "./type";
+
+  type TransitionFunc = (node: HTMLElement, params: ParamsType) => TransitionConfig;
+  const SLIDE_DURATION_RATIO = 0.25; // TODO: Expose one day?
+
+  let { children, slide, images, index = $bindable(), slideDuration = 1000, transition, duration = 0, "aria-label": ariaLabel = "Draggable Carousel", disableSwipe = false, imgClass = "", class: className, onchange, ...restProps }: Props = $props();
+
+  const { set, subscribe, update } = writable<State>({ images, index: index ?? 0, forward: true, slideDuration, lastSlideChange: new Date() });
+
+  setContext("state", {
+    set: (_state: State) => set({ index: _state.index, images: _state.images, lastSlideChange: new Date(), slideDuration, forward }),
+    subscribe,
+    update
   });
-};
-const prevSlide = () => {
-  update((_state) => {
-    if (!canChangeSlide({ lastSlideChange: _state.lastSlideChange, slideDuration, slideDurationRatio: SLIDE_DURATION_RATIO })) return _state;
-    _state.index = _state.index <= 0 ? images.length - 1 : _state.index - 1;
-    _state.lastSlideChange = /* @__PURE__ */ new Date();
-    return { ..._state };
+
+  let forward = $state(true);
+
+  subscribe((_state) => {
+    index = _state.index;
+    forward = _state.forward;
+    onchange?.(images[index]);
+  });
+
+  onMount(() => {
+    onchange?.(images[index]);
   });
-};
-const loop = (node, duration2) => {
-  carouselDiv = node;
-  let intervalId;
-  if (duration2 > 0) intervalId = setInterval(nextSlide, duration2);
-  return {
-    update: (duration3) => {
-      clearInterval(intervalId);
-      if (duration3 > 0) intervalId = setInterval(nextSlide, duration3);
-    },
-    destroy: () => clearInterval(intervalId)
+
+  const nextSlide = () => {
+    update((_state) => {
+      if (!canChangeSlide({ lastSlideChange: _state.lastSlideChange, slideDuration, slideDurationRatio: SLIDE_DURATION_RATIO })) return _state;
+
+      _state.index = _state.index >= images.length - 1 ? 0 : _state.index + 1;
+      _state.lastSlideChange = new Date();
+      return { ..._state };
+    });
   };
-};
-let activeDragGesture;
-let carouselDiv;
-let percentOffset = 0;
-let touchEvent = null;
-const getPositionFromEvent = (evt) => {
-  const mousePos = evt?.clientX;
-  if (mousePos) return mousePos;
-  let touchEvt = evt;
-  if (/^touch/.test(touchEvt?.type)) {
-    return touchEvt.touches[0].clientX;
-  }
-};
-const onDragStart = (evt) => {
-  if (disableSwipe) return;
-  touchEvent = evt;
-  evt.cancelable && evt.preventDefault();
-  const start = getPositionFromEvent(evt);
-  const width = carouselDiv.getBoundingClientRect().width;
-  if (start === void 0 || width === void 0) return;
-  activeDragGesture = {
-    start,
-    position: start,
-    width,
-    timestamp: Date.now()
+
+  const prevSlide = () => {
+    update((_state) => {
+      if (!canChangeSlide({ lastSlideChange: _state.lastSlideChange, slideDuration, slideDurationRatio: SLIDE_DURATION_RATIO })) return _state;
+
+      _state.index = _state.index <= 0 ? images.length - 1 : _state.index - 1;
+      _state.lastSlideChange = new Date();
+      return { ..._state };
+    });
   };
-};
-$: onDragMove = activeDragGesture === void 0 ? void 0 : (evt) => {
-  const position = getPositionFromEvent(evt);
-  if (!activeDragGesture || position === void 0) return;
-  const { start, width } = activeDragGesture;
-  percentOffset = Math.min(100, Math.max(-100, (position - start) / width * 100));
-  activeDragGesture.position = position;
-};
-$: onDragStop = activeDragGesture === void 0 ? void 0 : (evt) => {
-  const SWIPE_MAX_DURATION = 250;
-  const SWIPE_MIN_DISTANCE = 30;
-  const DRAG_MIN_PERCENT = 50;
-  if (activeDragGesture) {
-    const { timestamp, position, start } = activeDragGesture;
-    const duration2 = Date.now() - timestamp;
-    const distance = position - start;
-    if (Math.abs(distance) >= SWIPE_MIN_DISTANCE && duration2 <= SWIPE_MAX_DURATION && duration2 > 0) {
-      if (distance > 0) prevSlide();
-      else nextSlide();
-    } else if (percentOffset > DRAG_MIN_PERCENT) prevSlide();
-    else if (percentOffset < -DRAG_MIN_PERCENT) nextSlide();
-    else {
-      if (touchEvent?.constructor.name === "TouchEvent") {
-        touchEvent?.target?.dispatchEvent(
-          new Event("click", {
-            bubbles: true
-          })
-        );
-      }
+
+  const loop = (node: HTMLElement, duration: number) => {
+    // carouselDiv = node; // used by DragStart
+
+    // loop timer
+    /* eslint-disable  @typescript-eslint/no-explicit-any */
+    let intervalId: any;
+
+    if (duration > 0) intervalId = setInterval(nextSlide, duration);
+
+    return {
+      update: (duration: number) => {
+        clearInterval(intervalId);
+        if (duration > 0) intervalId = setInterval(nextSlide, duration);
+      },
+      destroy: () => clearInterval(intervalId)
+    };
+  };
+
+  type ActiveDragGesture = {
+    start: number;
+    position: number;
+    width: number;
+    timestamp: number;
+  };
+
+  let activeDragGesture: ActiveDragGesture | undefined = $state();
+
+  let carouselDiv: HTMLElement | undefined = $state();
+  let percentOffset: number = $state(0);
+  let touchEvent: MouseEvent | TouchEvent | null = null;
+
+  const getPositionFromEvent = (evt: MouseEvent | TouchEvent) => {
+    const mousePos = (evt as MouseEvent)?.clientX;
+    if (mousePos) return mousePos;
+
+    let touchEvt = evt as TouchEvent;
+    if (/^touch/.test(touchEvt?.type)) {
+      return touchEvt.touches[0].clientX;
     }
-  }
-  percentOffset = 0;
-  activeDragGesture = void 0;
-  touchEvent = null;
-};
+  };
+
+  const onDragStart = (evt: MouseEvent | TouchEvent) => {
+    if (disableSwipe) return;
+    /* eslint-disable  @typescript-eslint/no-unused-expressions */
+    touchEvent = evt;
+    evt.cancelable && evt.preventDefault();
+    const start = getPositionFromEvent(evt);
+    const width = carouselDiv?.getBoundingClientRect().width;
+    if (start === undefined || width === undefined) return;
+    activeDragGesture = {
+      start,
+      position: start,
+      width,
+      timestamp: Date.now()
+    };
+  };
+
+  let onDragMove = $derived(
+    activeDragGesture === undefined
+      ? undefined
+      : (evt: MouseEvent | TouchEvent) => {
+          const position = getPositionFromEvent(evt);
+          if (!activeDragGesture || position === undefined) return;
+          const { start, width } = activeDragGesture;
+          percentOffset = Math.min(100, Math.max(-100, ((position - start) / width) * 100));
+          activeDragGesture.position = position;
+        }
+  );
+
+  let onDragStop = $derived(
+    activeDragGesture === undefined
+      ? undefined
+      : (evt: MouseEvent | TouchEvent) => {
+          // These might be exposed one day, keep them safely tucked away as constants.
+          const SWIPE_MAX_DURATION = 250;
+          const SWIPE_MIN_DISTANCE = 30;
+          const DRAG_MIN_PERCENT = 50;
+
+          if (activeDragGesture) {
+            const { timestamp, position, start } = activeDragGesture;
+            const duration = Date.now() - timestamp;
+            const distance = position - start;
+
+            if (Math.abs(distance) >= SWIPE_MIN_DISTANCE && duration <= SWIPE_MAX_DURATION && duration > 0) {
+              if (distance > 0) prevSlide();
+              else nextSlide();
+            } else if (percentOffset > DRAG_MIN_PERCENT) prevSlide();
+            else if (percentOffset < -DRAG_MIN_PERCENT) nextSlide();
+            else {
+              // Only issue click event for touches
+              if (touchEvent?.constructor.name === "TouchEvent") {
+                // The gesture is a tap not drag, so manually issue a click event to trigger tap click gestures lost via preventDefault
+                touchEvent?.target?.dispatchEvent(
+                  new Event("click", {
+                    bubbles: true
+                  })
+                );
+              }
+            }
+          }
+
+          percentOffset = 0;
+          activeDragGesture = undefined;
+          touchEvent = null;
+        }
+  );
 </script>
 
 <!-- Preload all Carousel images for improved responsivity -->
@@ -130,26 +172,32 @@ $: onDragStop = activeDragGesture === void 0 ? void 0 : (evt) => {
 </svelte:head>
 
 <!-- The move listeners go here, so things keep working if the touch strays out of the element. -->
-<svelte:document on:mousemove={onDragMove} on:mouseup={onDragStop} on:touchmove={onDragMove} on:touchend={onDragStop} />
-<div bind:this={carouselDiv} class="relative" on:mousedown|nonpassive={onDragStart} on:touchstart|nonpassive={onDragStart} on:mousemove={onDragMove} on:mouseup={onDragStop} on:touchmove={onDragMove} on:touchend={onDragStop} role="button" aria-label={ariaLabel} tabindex="0">
-  <div {...$$restProps} class={twMerge(divClass, activeDragGesture === undefined ? 'transition-transform' : '', $$props.class)} use:loop={duration}>
-    <slot name="slide" {Slide} {index}>
+<svelte:document onmousemove={onDragMove} onmouseup={onDragStop} ontouchmove={onDragMove} ontouchend={onDragStop} />
+<div bind:this={carouselDiv} class="relative" onmousedown={onDragStart} ontouchstart={onDragStart} onmousemove={onDragMove} onmouseup={onDragStop} ontouchmove={onDragMove} ontouchend={onDragStop} role="button" aria-label={ariaLabel} tabindex="0">
+  <div {...restProps} class={carousel({ class: clsx(activeDragGesture === undefined ? "transition-transform" : "", className) })} use:loop={duration}>
+    {#if slide}
+      {@render slide({ index, Slide })}
+    {:else}
       <Slide image={images[index]} class={imgClass} {transition} />
-    </slot>
+    {/if}
   </div>
-  <slot {index} {Controls} {Indicators} />
+  {@render children?.(index)}
 </div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let images: HTMLImgAttributes[];
-@prop export let index: number = 0;
-@prop export let slideDuration: number = 1000;
-@prop export let transition: TransitionFunc | null = null;
-@prop export let duration: number = 0;
-@prop export let ariaLabel: string = 'Draggable Carousel';
-@prop export let disableSwipe: boolean = false;
-@prop export let imgClass: string = '';
+@props: children: any;
+@props:slide: any;
+@props:images: any;
+@props:index: any = $bindable();
+@props:slideDuration: any = 1000;
+@props:transition: any;
+@props:duration: any = 0;
+@props:"aria-label": any = "Draggable Carousel";
+@props:disableSwipe: any = false;
+@props:imgClass: any = "";
+@props:class: string;
+@props:onchange: any;
 -->

package/dist/carousel/Carousel.svelte.d.ts

@@ -1,61 +1,30 @@
 import { SvelteComponentTyped } from "svelte";
-export type State = {
-    images: HTMLImgAttributes[];
-    index: number;
-    lastSlideChange: Date;
-    slideDuration: number;
-    forward: boolean;
-};
-import type { HTMLImgAttributes } from 'svelte/elements';
-import type { TransitionConfig } from 'svelte/transition';
-import Controls from './Controls.svelte';
-import Indicators from './Indicators.svelte';
-import Slide from './Slide.svelte';
-import type { ParamsType } from '../types';
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        images: HTMLImgAttributes[];
-        index?: number | undefined;
-        slideDuration?: number | undefined;
-        transition?: (((node: HTMLElement, params: ParamsType) => TransitionConfig) | null) | undefined;
-        duration?: number | undefined;
-        ariaLabel?: string | undefined;
-        disableSwipe?: boolean | undefined;
-        imgClass?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
-        change: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        slide: {
-            Slide: typeof Slide;
-            index: number;
-        };
-        default: {
-            index: number;
-            Controls: typeof Controls;
-            Indicators: typeof Indicators;
-        };
-    };
+    slots: {};
 };
-export type CarouselProps = typeof __propDef.props;
+type CarouselProps_ = typeof __propDef.props;
+export { CarouselProps_ as CarouselProps };
 export type CarouselEvents = typeof __propDef.events;
 export type CarouselSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let images: HTMLImgAttributes[];
- * @prop export let index: number = 0;
- * @prop export let slideDuration: number = 1000;
- * @prop export let transition: TransitionFunc | null = null;
- * @prop export let duration: number = 0;
- * @prop export let ariaLabel: string = 'Draggable Carousel';
- * @prop export let disableSwipe: boolean = false;
- * @prop export let imgClass: string = '';
+ * @props: children: any;
+ * @props:slide: any;
+ * @props:images: any;
+ * @props:index: any = $bindable();
+ * @props:slideDuration: any = 1000;
+ * @props:transition: any;
+ * @props:duration: any = 0;
+ * @props:"aria-label": any = "Draggable Carousel";
+ * @props:disableSwipe: any = false;
+ * @props:imgClass: any = "";
+ * @props:class: string;
+ * @props:onchange: any;
  */
-export default class Carousel extends SvelteComponentTyped<CarouselProps, CarouselEvents, CarouselSlots> {
+export default class Carousel extends SvelteComponentTyped<CarouselProps_, CarouselEvents, CarouselSlots> {
 }
-export {};

package/dist/carousel/ControlButton.svelte

@@ -1,31 +1,36 @@
-<script>import { twMerge } from "tailwind-merge";
-export let forward;
-export let name;
-let buttonCls;
-$: buttonCls = twMerge("flex absolute top-0 z-30 justify-center items-center px-4 h-full group focus:outline-hidden text-white dark:text-gray-300", forward ? "end-0" : "start-0", $$props.class);
+<script lang="ts">
+  import clsx from "clsx";
+  import { controlButton } from "./theme";
+  import type { ControlButtonProps } from "./type";
+
+  let { children, forward, name, class: className, ...restProps }: ControlButtonProps = $props();
 </script>
 
-<button on:click type="button" class={buttonCls}>
-  <slot>
-    <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-hidden">
+<button type="button" class={controlButton({ forward, class: clsx(className) })} {...restProps}>
+  {#if children}
+    {@render children()}
+  {:else}
+    <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/30 group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-hidden sm:h-10 sm:w-10 dark:bg-gray-800/30 dark:group-hover:bg-gray-800/60 dark:group-focus:ring-gray-800/70">
       {#if forward}
-        <svg aria-hidden="true" class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <svg aria-hidden="true" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
         </svg>
       {:else}
-        <svg aria-hidden="true" class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <svg aria-hidden="true" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
         </svg>
       {/if}
       <span class="sr-only">{name}</span>
     </span>
-  </slot>
+  {/if}
 </button>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let forward: boolean;
-@prop export let name: string;
+@props: children: any;
+@props:forward: any;
+@props:name: any;
+@props:class: string;
 -->

package/dist/carousel/ControlButton.svelte.d.ts

@@ -1,28 +1,22 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        forward: boolean;
-        name: string;
-    };
+    props: Record<string, never>;
     events: {
-        click: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type ControlButtonProps = typeof __propDef.props;
+type ControlButtonProps_ = typeof __propDef.props;
+export { ControlButtonProps_ as ControlButtonProps };
 export type ControlButtonEvents = typeof __propDef.events;
 export type ControlButtonSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let forward: boolean;
- * @prop export let name: string;
+ * @props: children: any;
+ * @props:forward: any;
+ * @props:name: any;
+ * @props:class: string;
  */
-export default class ControlButton extends SvelteComponentTyped<ControlButtonProps, ControlButtonEvents, ControlButtonSlots> {
+export default class ControlButton extends SvelteComponentTyped<ControlButtonProps_, ControlButtonEvents, ControlButtonSlots> {
 }
-export {};

package/dist/carousel/Controls.svelte

@@ -1,37 +1,55 @@
-<script>import { getContext } from "svelte";
-import ControlButton from "./ControlButton.svelte";
-import { twMerge } from "tailwind-merge";
-import { canChangeSlide } from "./CarouselSlide";
-const state = getContext("state");
-const { update } = state;
-function changeSlide(forward) {
-  if (!canChangeSlide({
-    lastSlideChange: $state.lastSlideChange,
-    slideDuration: $state.slideDuration,
-    slideDurationRatio: 0.75
-  })) {
-    return;
-  }
-  if (forward) {
-    update((_state) => {
-      _state.forward = true;
-      _state.index = _state.index >= _state.images.length - 1 ? 0 : _state.index + 1;
-      _state.lastSlideChange = /* @__PURE__ */ new Date();
-      return { ..._state };
-    });
-  } else {
-    update((_state) => {
-      _state.forward = false;
-      _state.index = _state.index <= 0 ? _state.images.length - 1 : _state.index - 1;
-      _state.lastSlideChange = /* @__PURE__ */ new Date();
-      return { ..._state };
-    });
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+  import { canChangeSlide } from "./CarouselSlide";
+  import ControlButton from "./ControlButton.svelte";
+  import type { State } from "./type";
+
+  let { children, class: className } = $props();
+
+  const state = getContext<Writable<State>>("state");
+  const { update } = state;
+
+  function changeSlide(forward: boolean) {
+    if (
+      !canChangeSlide({
+        lastSlideChange: $state.lastSlideChange,
+        slideDuration: $state.slideDuration,
+        slideDurationRatio: 0.75
+      })
+    ) {
+      return;
+    }
+
+    if (forward) {
+      update((_state) => {
+        _state.forward = true;
+        _state.index = _state.index >= _state.images.length - 1 ? 0 : _state.index + 1;
+        _state.lastSlideChange = new Date();
+        return { ..._state };
+      });
+    } else {
+      update((_state) => {
+        _state.forward = false;
+        _state.index = _state.index <= 0 ? _state.images.length - 1 : _state.index - 1;
+        _state.lastSlideChange = new Date();
+        return { ..._state };
+      });
+    }
   }
-}
 </script>
 
 <!-- Slider controls -->
-<slot {ControlButton} {changeSlide}>
-  <ControlButton name="Previous" forward={false} on:click={() => changeSlide(false)} class={twMerge($$props.class)} />
-  <ControlButton name="Next" forward={true} on:click={() => changeSlide(true)} class={twMerge($$props.class)} />
-</slot>
+{#if children}
+  {@render children(changeSlide)}
+{:else}
+  <ControlButton name="Previous" forward={false} onclick={() => changeSlide(false)} class={className} />
+  <ControlButton name="Next" forward={true} onclick={() => changeSlide(true)} class={className} />
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: 
+-->

package/dist/carousel/Controls.svelte.d.ts

@@ -1,22 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
-import ControlButton from './ControlButton.svelte';
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {
-            ControlButton: typeof ControlButton;
-            changeSlide: (forward: boolean) => void;
-        };
-    };
+    slots: {};
 };
 export type ControlsProps = typeof __propDef.props;
 export type ControlsEvents = typeof __propDef.events;
 export type ControlsSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props:
+ */
 export default class Controls extends SvelteComponentTyped<ControlsProps, ControlsEvents, ControlsSlots> {
 }
 export {};