flowbite-svelte 0.34.4 → 0.34.6

package/dist/forms/FloatingLabelInput.svelte

@@ -81,6 +81,7 @@ function setType(node, _type) {
 		on:change
 		on:click
 		on:focus
+		on:input
 		on:keydown
 		on:keypress
 		on:keyup

package/dist/forms/FloatingLabelInput.svelte.d.ts

@@ -16,6 +16,7 @@ declare const __propDef: {
         change: Event;
         click: MouseEvent;
         focus: FocusEvent;
+        input: Event;
         keydown: KeyboardEvent;
         keypress: KeyboardEvent;
         keyup: KeyboardEvent;

package/dist/gallery/Gallery.svelte

@@ -1,9 +1,17 @@
 <script>import classNames from 'classnames';
-export let outerDivClass = 'grid gap-4';
-export let colClass = 'grid-cols-2 md:grid-cols-3';
-const divClass = classNames(outerDivClass, colClass);
+import GalleryItem from './GalleryItem.svelte';
+export let items = [];
+$: divClass = classNames('grid', $$props.class);
+function init(node) {
+    if (getComputedStyle(node).gap === 'normal')
+        node.style.gap = 'inherit';
+}
 </script>
 
-<div class="{divClass}">
-  <slot />
-</div>
+<div {...$$restProps} class={divClass} use:init>
+  {#each items as { src, alt }}
+    <GalleryItem {src} {alt} />
+  {:else}
+    <slot />
+  {/each}
+</div>

package/dist/gallery/Gallery.svelte.d.ts

@@ -1,8 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+import type { ImgType } from '../types';
 declare const __propDef: {
     props: {
-        outerDivClass?: string | undefined;
-        colClass?: string | undefined;
+        [x: string]: any;
+        items?: ImgType[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/gallery/GalleryItem.svelte

@@ -1,8 +1,8 @@
-<script>export let src = '';
-export let alt = '';
-export let imgClass = 'h-auto max-w-full rounded-lg';
+<script>export let src;
+export let alt = undefined;
+export let defaultClass = 'h-auto max-w-full rounded-lg';
 </script>
 
 <div>
-  <img class="{imgClass}" {src} {alt}>
-</div>
+  <img class={defaultClass} {src} {alt} />
+</div>

package/dist/gallery/GalleryItem.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        src?: string | undefined;
+        src: string;
         alt?: string | undefined;
-        imgClass?: string | undefined;
+        defaultClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.34.4",
+  "version": "0.34.6",
   "description": "Flowbite components for Svelte",
   "author": {
     "name": "Shinichi Okada",
@@ -550,14 +550,6 @@
       "types": "./dist/tables/TableSearch.svelte.d.ts",
       "svelte": "./dist/tables/TableSearch.svelte"
     },
-    "./TabHead.svelte": {
-      "types": "./dist/tabs/TabHead.svelte.d.ts",
-      "svelte": "./dist/tabs/TabHead.svelte"
-    },
-    "./TabHeadItem.svelte": {
-      "types": "./dist/tabs/TabHeadItem.svelte.d.ts",
-      "svelte": "./dist/tabs/TabHeadItem.svelte"
-    },
     "./TabItem.svelte": {
       "types": "./dist/tabs/TabItem.svelte.d.ts",
       "svelte": "./dist/tabs/TabItem.svelte"

package/dist/tabs/TabHead.svelte

@@ -1,27 +0,0 @@
-<script>export let tabStyle = 'default';
-export let customDivClass = '';
-export let customUlClass = '';
-const border = 'border-b border-gray-200 dark:border-gray-700';
-const divClasses = {
-    default: 'mb-4 ' + border,
-    full: 'mb-4',
-    icon: 'mb-4 ' + border,
-    pill: 'mb-4 ',
-    underline: 'mb-4 text-sm font-medium text-center text-gray-500 dark:text-gray-400 ' + border,
-    custom: customDivClass
-};
-const ulClasses = {
-    default: 'flex flex-wrap -mb-px',
-    full: 'hidden text-sm font-medium text-center text-gray-500 rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700 dark:text-gray-400 mb-1',
-    icon: 'flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400',
-    pill: 'flex flex-wrap',
-    underline: 'flex flex-wrap -mb-px',
-    custom: customUlClass
-};
-</script>
-
-<div class={divClasses[tabStyle]}>
-  <ul class={ulClasses[tabStyle]} role="tablist">
-    <slot />
-  </ul>
-</div>

package/dist/tabs/TabHead.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        tabStyle?: "default" | "custom" | "icon" | "pill" | "underline" | "full" | undefined;
-        customDivClass?: string | undefined;
-        customUlClass?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type TabHeadProps = typeof __propDef.props;
-export type TabHeadEvents = typeof __propDef.events;
-export type TabHeadSlots = typeof __propDef.slots;
-export default class TabHead extends SvelteComponentTyped<TabHeadProps, TabHeadEvents, TabHeadSlots> {
-}
-export {};

package/dist/tabs/TabHeadItem.svelte

@@ -1,56 +0,0 @@
-<script>import classNames from 'classnames';
-export let id;
-export let tabStyle = 'default';
-export let activeTabValue;
-export let customActiveClass = '';
-export let customInActiveClass = '';
-export let customLiClass = '';
-import { getContext } from 'svelte';
-const ctx = getContext('ctx') ?? {};
-tabStyle = ctx.style;
-const activeClasses = {
-    default: 'inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500',
-    full: 'inline-block p-4 w-full text-gray-900 bg-gray-100 focus:ring-4 focus:ring-blue-300 active focus:outline-none dark:bg-gray-700 dark:text-white',
-    icon: 'inline-flex p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500 group',
-    pill: 'active inline-block py-3 px-4 text-sm font-medium text-center text-white bg-blue-600 rounded-lg',
-    underline: 'inline-block p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500',
-    custom: customActiveClass
-};
-const inactiveClasses = {
-    default: 'inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300',
-    full: 'inline-block p-4 w-full bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700',
-    icon: 'inline-flex p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group ',
-    pill: 'inline-block py-3 px-4 text-sm font-medium text-center text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white',
-    underline: 'inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300',
-    custom: customInActiveClass
-};
-const liClasses = {
-    default: 'mr-2',
-    full: 'w-full',
-    icon: 'mr-2',
-    pill: 'mr-2',
-    underline: 'mr-2',
-    custom: customLiClass
-};
-</script>
-
-<li class={liClasses[tabStyle]} role="presentation">
-  <button
-    {...$$restProps}
-    on:click
-    on:blur
-    on:click
-    on:focus
-    on:keydown
-    on:keypress
-    on:keyup
-    on:mouseenter
-    on:mouseleave
-    on:mouseover
-    class={classNames(activeTabValue === id ? activeClasses[tabStyle] : inactiveClasses[tabStyle])}
-    id="{id}-tabhead"
-    type="button"
-    role="tab">
-    <slot />
-  </button>
-</li>

package/dist/tabs/TabHeadItem.svelte.d.ts

@@ -1,34 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        id: number;
-        tabStyle?: "default" | "custom" | "icon" | "pill" | "underline" | "full" | undefined;
-        activeTabValue: number;
-        customActiveClass?: string | undefined;
-        customInActiveClass?: string | undefined;
-        customLiClass?: string | undefined;
-    };
-    events: {
-        click: MouseEvent;
-        blur: FocusEvent;
-        focus: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mouseover: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type TabHeadItemProps = typeof __propDef.props;
-export type TabHeadItemEvents = typeof __propDef.events;
-export type TabHeadItemSlots = typeof __propDef.slots;
-export default class TabHeadItem extends SvelteComponentTyped<TabHeadItemProps, TabHeadItemEvents, TabHeadItemSlots> {
-}
-export {};