flowbite-svelte 0.42.0 → 0.43.1

package/dist/carousels/Carousel.svelte

@@ -11,7 +11,6 @@ export let images;
 export let slideControls = true;
 export let loop = false;
 export let duration = 2000;
-export let thumbClass = 'opacity-40';
 // Carousel
 export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
 let divCls = twMerge(divClass, $$props.classDiv);
@@ -24,7 +23,21 @@ let captionCls = twMerge(captionClass, $$props.classCaption);
 export let indicatorClass = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
 let indicatorCls = twMerge(indicatorClass, $$props.classIndicator);
 // Slide
-export let slideClass = '';
+export let slideClass = 'flex items-center justify-center h-full w-full';
+let slideCls = twMerge(slideClass, $$props.classSlide);
+// Img
+export let imgFit = 'cover';
+export let imgClass = `object-${imgFit} ${imgFit === 'cover' && 'w-full'} h-full`;
+let imgCls = twMerge(imgClass, $$props.classImg);
+// Thumbnail
+export let thumbClass = 'opacity-40';
+let thumbCls = twMerge(thumbClass, $$props.classThumb);
+// Thumbnail Container
+export let thumbDivClass = 'flex flex-row justify-center bg-gray-100 w-full';
+let thumbDivCls = twMerge(thumbDivClass, $$props.classThumbDiv);
+// Thumbnail Img Btn Div
+export let thumbBtnClass = '';
+let thumbBtnCls = twMerge(thumbBtnClass, $$props.classBtnThumb);
 let imageShowingIndex = 0;
 $: image = images[imageShowingIndex];
 const nextSlide = () => {
@@ -53,7 +66,12 @@ if (loop) {
 
 <div {id} class="relative">
   <div class={divCls}>
-    <Slide image={image.imgurl} altTag={image.name} attr={image.attribution} {slideClass} />
+    <Slide
+      image={image.imgurl}
+      altTag={image.name}
+      attr={image.attribution}
+      slideClass={slideCls}
+      imgClass={imgCls} />
   </div>
   {#if showIndicators}
     <!-- Slider indicators -->
@@ -97,9 +115,17 @@ if (loop) {
 {/if}
 
 {#if showThumbs}
-  <div class="flex flex-row justify-center bg-gray-100">
+  <div class={thumbDivCls}>
     {#each images as { id, imgurl, name, attribution }}
-      <Thumbnail {thumbClass} thumbImg={imgurl} altTag={name} titleLink={attribution} {id} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} />
+      <Thumbnail
+        thumbClass={thumbCls}
+        thumbBtnClass={thumbBtnCls}
+        thumbImg={imgurl}
+        altTag={name}
+        titleLink={attribution}
+        {id}
+        selected={imageShowingIndex === id}
+        on:click={() => goToSlide(id)} />
     {/each}
   </div>
 {/if}

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

@@ -10,12 +10,16 @@ declare const __propDef: {
         slideControls?: boolean | undefined;
         loop?: boolean | undefined;
         duration?: number | undefined;
-        thumbClass?: string | undefined;
         divClass?: string | undefined;
         indicatorDivClass?: string | undefined;
         captionClass?: string | undefined;
         indicatorClass?: string | undefined;
         slideClass?: string | undefined;
+        imgFit?: "none" | "cover" | "contain" | "fill" | "scale-down" | undefined;
+        imgClass?: string | undefined;
+        thumbClass?: string | undefined;
+        thumbDivClass?: string | undefined;
+        thumbBtnClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/carousels/Carousel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Carousel.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2HD,QAAA,MAAM,SAAS;;;;;;;gBADgc,GAAG,EAAE;;;;;;;;;;;;;;;;;;CACtY,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Carousel.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+ID,QAAA,MAAM,SAAS;;;;;;;gBADoiB,GAAG,EAAE;;;;;;;;;;;;;;;;;;;;;;CAC1e,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/carousels/CarouselTransition.svelte

@@ -4,6 +4,7 @@ import Slide from './Slide.svelte';
 import Thumbnail from './Thumbnail.svelte';
 import Caption from './Caption.svelte';
 import Indicator from './Indicator.svelte';
+export let id = 'default-transition-carousel';
 export let showIndicators = true;
 export let showCaptions = true;
 export let showThumbs = true;
@@ -13,7 +14,6 @@ export let transitionType = 'fade';
 export let transitionParams = {};
 export let loop = false;
 export let duration = 2000;
-export let thumbClass = 'opacity-40';
 // Carousel
 export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
 let divCls = twMerge(divClass, $$props.classDiv);
@@ -25,6 +25,25 @@ let captionCls = twMerge(captionClass, $$props.classCaption);
 // Indicator
 export let indicatorClass = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
 let indicatorCls = twMerge(indicatorClass, $$props.classIndicator);
+// Slide
+export let slideClass = '';
+let slideCls = twMerge(slideClass, $$props.classSlide);
+// Transition Div
+export let transitionDivClass = 'h-full w-full';
+let transitionDivCls = twMerge(transitionDivClass, $$props.classTransitionDiv);
+// Img
+export let imgFit = 'cover';
+export let imgClass = `object-${imgFit} ${imgFit === 'cover' && 'w-full'} h-full`;
+let imgCls = twMerge(imgClass, $$props.classImg);
+// Thumbnail
+export let thumbClass = 'opacity-40';
+let thumbCls = twMerge(thumbClass, $$props.classThumb);
+// Thumbnail Container
+export let thumbDivClass = 'flex flex-row justify-center bg-gray-100 w-full';
+let thumbDivCls = twMerge(thumbDivClass, $$props.classThumbDiv);
+// Thumbnail Img Btn Div
+export let thumbBtnClass = '';
+let thumbBtnCls = twMerge(thumbBtnClass, $$props.classBtnThumb);
 // have a custom transition function that returns the desired transition
 const multiple = (node, params) => {
     switch (transitionType) {
@@ -66,12 +85,12 @@ if (loop) {
 }
 </script>
 
-<div id="default-carousel" class="relative">
+<div {id} class="relative">
   <div class={divCls}>
     {#each images as { id, imgurl, name, attribution }}
       {#if imageShowingIndex === id}
-        <div transition:multiple={transitionParams}>
-          <Slide image={imgurl} altTag={name} attr={attribution} />
+        <div transition:multiple={transitionParams} class={transitionDivCls}>
+          <Slide image={imgurl} altTag={name} attr={attribution} slideClass={slideCls} imgClass={imgCls} />
         </div>
       {/if}
     {/each}
@@ -119,9 +138,17 @@ if (loop) {
 {/if}
 
 {#if showThumbs}
-  <div class="flex flex-row justify-center bg-gray-100">
+  <div class={thumbDivCls}>
     {#each images as { id, imgurl, name, attribution }}
-      <Thumbnail {thumbClass} thumbImg={imgurl} altTag={name} titleLink={attribution} {id} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} />
+      <Thumbnail
+        thumbClass={thumbCls}
+        thumbBtnClass={thumbBtnCls}
+        thumbImg={imgurl}
+        altTag={name}
+        titleLink={attribution}
+        {id}
+        selected={imageShowingIndex === id}
+        on:click={() => goToSlide(id)} />
     {/each}
   </div>
 {/if}

package/dist/carousels/CarouselTransition.svelte.d.ts

@@ -3,6 +3,7 @@ import type { TransitionTypes, TransitionParamTypes } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
+        id?: string | undefined;
         showIndicators?: boolean | undefined;
         showCaptions?: boolean | undefined;
         showThumbs?: boolean | undefined;
@@ -12,11 +13,17 @@ declare const __propDef: {
         transitionParams?: TransitionParamTypes | undefined;
         loop?: boolean | undefined;
         duration?: number | undefined;
-        thumbClass?: string | undefined;
         divClass?: string | undefined;
         indicatorDivClass?: string | undefined;
         captionClass?: string | undefined;
         indicatorClass?: string | undefined;
+        slideClass?: string | undefined;
+        transitionDivClass?: string | undefined;
+        imgFit?: "none" | "cover" | "contain" | "fill" | "scale-down" | undefined;
+        imgClass?: string | undefined;
+        thumbClass?: string | undefined;
+        thumbDivClass?: string | undefined;
+        thumbBtnClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/carousels/CarouselTransition.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselTransition.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/CarouselTransition.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAiJtE,QAAA,MAAM,SAAS;;;;;;gBADud,GAAG,EAAE;;;;;;;;;;;;;;;;;;;CAC7Z,CAAC;AAC/E,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,oBAAoB,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC/I"}
+{"version":3,"file":"CarouselTransition.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/CarouselTransition.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AA6KtE,QAAA,MAAM,SAAS;;;;;;;gBADmpB,GAAG,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;CACzlB,CAAC;AAC/E,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,oBAAoB,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC/I"}

package/dist/carousels/Slide.svelte

@@ -2,10 +2,13 @@
 export let altTag = '';
 export let attr = '';
 export let slideClass = '';
+export let imgClass = '';
 </script>
 
 <div class={slideClass}>
-  <img src={image} alt={altTag} title={attr} />
+  {#key image}
+    <img src={image} alt={altTag} title={attr} class={imgClass} />
+  {/key}
 </div>
 
 <!--

package/dist/carousels/Slide.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         altTag?: string | undefined;
         attr?: string | undefined;
         slideClass?: string | undefined;
+        imgClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/carousels/Slide.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slide.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Slide.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Slide.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Slide.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/carousels/Thumbnail.svelte

@@ -5,11 +5,19 @@ export let id;
 export let thumbWidth = 100;
 export let selected = false;
 export let thumbClass = '';
+export let thumbBtnClass = '';
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<button on:click aria-label="Click to view image">
-  <img class={thumbClass} class:active={selected} id={id.toString()} src={thumbImg} alt={altTag} title="Image from {titleLink}" width="{thumbWidth}%" />
+<button on:click aria-label="Click to view image" class={thumbBtnClass}>
+  <img
+    class={thumbClass}
+    class:active={selected}
+    id={id.toString()}
+    src={thumbImg}
+    alt={altTag}
+    title="Image from {titleLink}"
+    width="{thumbWidth}%" />
 </button>
 
 <!--

package/dist/carousels/Thumbnail.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         thumbWidth?: number | undefined;
         selected?: boolean | undefined;
         thumbClass?: string | undefined;
+        thumbBtnClass?: string | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/carousels/Thumbnail.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Thumbnail.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAsBD,QAAA,MAAM,SAAS;;;;;YAD8M,MAAM;;;;;;;;;;;CAC5K,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"Thumbnail.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Thumbnail.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAuBD,QAAA,MAAM,SAAS;;;;;YAD6O,MAAM;;;;;;;;;;;;CAC3M,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}

package/dist/forms/Dropzone.svelte

@@ -22,7 +22,8 @@ function keydown(ev) {
   on:dragenter
   on:dragleave
   on:dragover
-  on:drop>
+  on:drop
+  type="button">
   <label class="flex flex-col items-center" tabIndex="0">
     <slot />
     <input {...$$restProps} bind:value bind:files bind:this={input} on:change on:click type="file" class="hidden" />

package/dist/forms/Search.svelte

@@ -24,7 +24,7 @@ const sizes = {
     Due to that we need the below slot and Wrapper around
   -->
   {#if $$slots.default}
-    <div class="flex absolute inset-y-0 right-0 items-center pr-3 text-gray-500 dark:text-gray-400">
+    <div class="flex absolute inset-y-0 right-0 items-center text-gray-500 dark:text-gray-400">
       <slot />
     </div>
   {/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.42.0",
+  "version": "0.43.1",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -708,10 +708,6 @@
       "types": "./dist/typography/Span.svelte.d.ts",
       "svelte": "./dist/typography/Span.svelte"
     },
-    "./Chevron.svelte": {
-      "types": "./dist/utils/Chevron.svelte.d.ts",
-      "svelte": "./dist/utils/Chevron.svelte"
-    },
     "./CloseButton.svelte": {
       "types": "./dist/utils/CloseButton.svelte.d.ts",
       "svelte": "./dist/utils/CloseButton.svelte"

package/dist/utils/Chevron.svelte

@@ -1,33 +0,0 @@
-<script>import ChevronDown from './ChevronDown.svelte';
-import ChevronLeft from './ChevronLeft.svelte';
-import ChevronUp from './ChevronUp.svelte';
-import ChevronRight from './ChevronRight.svelte';
-import Wrapper from './Wrapper.svelte';
-export let placement = 'bottom';
-export let aligned = false;
-const icons = {
-    top: ChevronUp,
-    right: ChevronRight,
-    bottom: ChevronDown,
-    left: ChevronLeft
-};
-let icon;
-$: icon = icons[placement.split('-')[0]] ?? ChevronDown;
-</script>
-
-<Wrapper class="flex items-center justify-between" show={aligned}>
-  {#if placement.split('-')[0] === 'left'}
-    <ChevronLeft class="h-4 w-4 mr-2" />
-    <slot />
-  {:else}
-    <slot />
-    <svelte:component this={icon} class="h-4 w-4 ml-2" />
-  {/if}
-</Wrapper>
-
-<!--
-  @component
-  ## Props  
-  @prop placement: Placement = 'bottom';
-  @prop aligned: boolean = false;
--->

package/dist/utils/Chevron.svelte.d.ts

@@ -1,26 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { Placement } from '@floating-ui/dom';
-declare const __propDef: {
-    props: {
-        placement?: Placement | undefined;
-        aligned?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ChevronProps = typeof __propDef.props;
-export type ChevronEvents = typeof __propDef.events;
-export type ChevronSlots = typeof __propDef.slots;
-/**
- * ## Props
- * @prop placement: Placement = 'bottom';
- * @prop aligned: boolean = false;
- */
-export default class Chevron extends SvelteComponentTyped<ChevronProps, ChevronEvents, ChevronSlots> {
-}
-export {};
-//# sourceMappingURL=Chevron.svelte.d.ts.map

package/dist/utils/Chevron.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Chevron.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/Chevron.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,SAAS,EAAQ,MAAM,kBAAkB,CAAC;AA4CxD,QAAA,MAAM,SAAS;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}