flowbite-svelte 0.12.4 → 0.13.2

package/tables/Table.svelte

@@ -1,4 +1,22 @@
-<script>
-  export let header = ["Name", "Color", "Category", "Price", "Edit"];
-  export let body = ["Apple MacBook Pro 17", "Silver", "Laptop", "$2222", "/"];
+<script >export let header;
+export let divClass = 'relative overflow-x-auto shadow-md sm:rounded-lg';
+export let tableClass = 'w-full text-sm text-left text-gray-500 dark:text-gray-400';
+export let theadClass = 'text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400';
 </script>
+
+<div class={divClass}>
+	<table class={tableClass}>
+		<thead class={theadClass}>
+			<tr>
+				{#each header as column}
+					<th scope="col" class="px-6 py-3">
+						{column}
+					</th>
+				{/each}
+			</tr>
+		</thead>
+		<tbody>
+			<slot />
+		</tbody>
+	</table>
+</div>

package/tables/Table.svelte.d.ts

@@ -1,25 +1,21 @@
-/** @typedef {typeof __propDef.props}  TableProps */
-/** @typedef {typeof __propDef.events}  TableEvents */
-/** @typedef {typeof __propDef.slots}  TableSlots */
-export default class Table extends SvelteComponentTyped<{
-    header?: string[];
-    body?: string[];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TableProps = typeof __propDef.props;
-export type TableEvents = typeof __propDef.events;
-export type TableSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        header?: string[];
-        body?: string[];
+        header: Array<string>;
+        divClass?: string;
+        tableClass?: string;
+        theadClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
+export declare type TableProps = typeof __propDef.props;
+export declare type TableEvents = typeof __propDef.events;
+export declare type TableSlots = typeof __propDef.slots;
+export default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
+}
 export {};

package/tables/TableDefaultRow.svelte

@@ -0,0 +1,66 @@
+<script >export let items;
+export let html = false;
+export let rowState = undefined;
+let trClass;
+let trLastClass;
+if (rowState === 'striped') {
+    trClass = 'border-b dark:bg-gray-800 dark:border-gray-700 odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700';
+    trLastClass = 'odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700';
+}
+else if (rowState === 'hover') {
+    trClass = 'bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600';
+    trLastClass = 'bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600';
+}
+else {
+    trClass = 'bg-white border-b dark:bg-gray-800 dark:border-gray-700';
+    trLastClass = 'bg-white dark:bg-gray-800';
+}
+</script>
+
+{#each items as item, i}
+	{#if i === items.length - 1}
+		<tr class={trLastClass}>
+			{#each item as cell, j}
+				{#if j === 0}
+					<th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
+						{#if html}
+							{@html cell}
+						{:else}
+							{cell}
+						{/if}
+					</th>
+				{:else}
+					<td class="px-6 py-4">
+						{#if html}
+							{@html cell}
+						{:else}
+							{cell}
+						{/if}
+					</td>
+				{/if}
+			{/each}
+		</tr>
+	{:else}
+		<tr class={trClass}>
+			{#each item as cell, j}
+				{#if j === 0}
+					<th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
+						{#if html}
+							{@html cell}
+						{:else}
+							{cell}
+						{/if}
+					</th>
+				{:else}
+					<td class="px-6 py-4">
+						{#if html}
+							{@html cell}
+						{:else}
+							{cell}
+						{/if}
+					</td>
+				{/if}
+			{/each}
+		</tr>
+	{/if}
+{/each}

package/tables/TableDefaultRow.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        items: Array<Array<string>>;
+        html?: boolean;
+        rowState?: 'striped' | 'hover' | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TableDefaultRowProps = typeof __propDef.props;
+export declare type TableDefaultRowEvents = typeof __propDef.events;
+export declare type TableDefaultRowSlots = typeof __propDef.slots;
+export default class TableDefaultRow extends SvelteComponentTyped<TableDefaultRowProps, TableDefaultRowEvents, TableDefaultRowSlots> {
+}
+export {};

package/tabs/IconTabs.svelte

@@ -3,18 +3,10 @@ export let iconClass = 'mr-2 w-5 h-5 text-gray-400 group-hover:text-gray-500 dar
 </script>
 
 <div class="border-b border-gray-200 dark:border-gray-700">
-	<ul
-		class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400"
-	>
+	<ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
 		{#each tabs as { name, active, href, rel, icon }}
 			<li class="mr-2">
-				<a
-					{href}
-					{rel}
-					class={active
-						? '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'
-						: '  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 '}
-				>
+				<a {href} {rel} class={active ? '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' : '  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 '}>
 					<svelte:component this={icon} className={iconClass} />
 					{name}
 				</a>

package/tabs/InteractiveTabHead.svelte

@@ -26,25 +26,10 @@ Header part of Interactive tab component. Use with TabContent.
   ```
   -->
 <div class="mb-4 border-b border-gray-200">
-	<ul
-		class="flex flex-wrap -mb-px text-sm font-medium text-center"
-		id={tabId}
-		data-tabs-toggle="#myTabContent"
-		role="tablist"
-	>
+	<ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id={tabId} data-tabs-toggle="#myTabContent" role="tablist">
 		{#each tabs as { name, id }}
 			<li class="mr-2" role="presentation">
-				<button
-					on:click={handleClick(id)}
-					class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
-					id="{name}-tab"
-					data-tabs-target="#{name}"
-					type="button"
-					role="tab"
-					class:active={activeTabValue === id}
-					aria-controls={name}
-					aria-selected="false">{name}</button
-				>
+				<button on:click={handleClick(id)} class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300" id="{name}-tab" data-tabs-target="#{name}" type="button" role="tab" class:active={activeTabValue === id} aria-controls={name} aria-selected="false">{name}</button>
 			</li>
 		{/each}
 	</ul>

package/tabs/InteractiveTabs.svelte

@@ -8,15 +8,7 @@ export let tabs;
 	<ul class="flex flex-wrap -mb-px" id={tabId} role="tablist">
 		{#each tabs as { name, id }}
 			<li class="mr-2" role="presentation">
-				<button
-					on:click={handleClick(id)}
-					class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
-					id="{name}-tab"
-					type="button"
-					role="tab"
-					class:active={activeTabValue === id}
-					aria-controls={name}>{name}</button
-				>
+				<button on:click={handleClick(id)} class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300" id="{name}-tab" type="button" role="tab" class:active={activeTabValue === id} aria-controls={name}>{name}</button>
 			</li>
 		{/each}
 	</ul>
@@ -24,12 +16,7 @@ export let tabs;
 <div id="{tabId}Content">
 	{#each tabs as { name, content, id }}
 		{#if activeTabValue === id}
-			<div
-				class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
-				id={name}
-				role="tabpanel"
-				aria-labelledby="{name}-tab"
-			>
+			<div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800" id={name} role="tabpanel" aria-labelledby="{name}-tab">
 				{#if typeof content === 'string'}
 					<p class="text-sm text-gray-500 dark:text-gray-400">
 						{@html content}

package/tabs/UnderlineTabs.svelte

@@ -6,14 +6,7 @@ export let tabs;
 	<ul class="flex flex-wrap -mb-px">
 		{#each tabs as { name, active, href, rel }}
 			<li class="mr-2">
-				<a
-					{href}
-					{rel}
-					class={active
-						? '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'
-						: '  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 '}
-					>{name}</a
-				>
+				<a {href} {rel} class={active ? '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' : '  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 '}>{name}</a>
 			</li>
 		{/each}
 	</ul>

package/toasts/Toast.svelte

@@ -13,36 +13,28 @@ export let divClass = 'flex items-center w-full max-w-xs p-4 text-gray-500 bg-wh
 export let textClass = 'ml-3 text-sm font-normal';
 export let btnClass = 'ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700';
 if (iconColor === 'blue') {
-    iconDivClass =
-        'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200';
+    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200';
 }
 else if (iconColor === 'green') {
-    iconDivClass =
-        'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200';
+    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200';
 }
 else if (iconColor === 'red') {
-    iconDivClass =
-        'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200';
+    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200';
 }
 else if (iconColor === 'gray') {
-    iconDivClass =
-        'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-gray-500 bg-gray-100 rounded-lg dark:bg-gray-800 dark:text-gray-200';
+    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-gray-500 bg-gray-100 rounded-lg dark:bg-gray-800 dark:text-gray-200';
 }
 else if (iconColor === 'purple') {
-    iconDivClass =
-        'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-purple-500 bg-purple-100 rounded-lg dark:bg-purple-800 dark:text-purple-200';
+    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-purple-500 bg-purple-100 rounded-lg dark:bg-purple-800 dark:text-purple-200';
 }
 else if (iconColor === 'indigo') {
-    iconDivClass =
-        'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-indigo-500 bg-indigo-100 rounded-lg dark:bg-indigo-800 dark:text-indigo-200';
+    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-indigo-500 bg-indigo-100 rounded-lg dark:bg-indigo-800 dark:text-indigo-200';
 }
 else if (iconColor === 'yellow') {
-    iconDivClass =
-        'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-yellow-500 bg-yellow-100 rounded-lg dark:bg-yellow-800 dark:text-yellow-200';
+    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-yellow-500 bg-yellow-100 rounded-lg dark:bg-yellow-800 dark:text-yellow-200';
 }
 else {
-    iconDivClass =
-        'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200';
+    iconDivClass = 'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200';
 }
 // have a custom transition function that returns the desired transition
 function multiple(node, params) {
@@ -67,17 +59,7 @@ function multiple(node, params) {
 		<div class={textClass}><slot name="text" /></div>
 		<button type="button" class={btnClass} on:click={handleHide} aria-label="Close">
 			<span class="sr-only">Close</span>
-			<svg
-				class="w-5 h-5"
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-					clip-rule="evenodd"
-				/></svg
-			>
+			<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
 		</button>
 	</div>
 {/if}

package/toasts/Toast.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Colors, TransitionTypes } from '../types';
+import type { Colors, TransitionTypes, TransitionParamTypes } from '../types';
 declare const __propDef: {
     props: {
         iconColor?: Colors;
         transitionType?: TransitionTypes;
-        transitionParams?: {};
+        transitionParams?: TransitionParamTypes;
         divClass?: string;
         textClass?: string;
         btnClass?: string;

package/tooltips/Tooltip.svelte

@@ -4,21 +4,13 @@ export let right = false;
 export let bottom = false;
 export let left = false;
 export let active = false;
-// export let bgColor = "";
 </script>
 
 <div class="tooltip-wrapper">
 	<span class="tooltip-slot">
 		<slot />
 	</span>
-	<div
-		class="inline-block absolute invisible z-10 py-2 px-3 bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700"
-		class:active
-		class:left
-		class:right
-		class:bottom
-		class:top
-	>
+	<div class="inline-block absolute invisible z-10 py-2 px-3 bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700" class:active class:left class:right class:bottom class:top>
 		{#if tip}
 			<div class="text-sm font-medium text-white ">{tip}</div>
 		{:else}

package/types.d.ts

@@ -1,9 +1,11 @@
 import type { SvelteComponent } from 'svelte';
 export declare type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink';
+export declare type DropdownColorType = 'blue' | 'blue-outline' | 'dark' | 'dark-outline' | 'light' | 'green' | 'green-outline' | 'red' | 'red-outline' | 'yellow' | 'yellow-outline' | 'purple' | 'purple-outline';
 export declare type Buttontypes = 'blue' | 'blue-outline' | 'dark' | 'dark-outline' | 'light' | 'green' | 'green-outline' | 'red' | 'red-outline' | 'yellow' | 'yellow-outline' | 'purple' | 'purple-outline';
 export declare type Buttonshadows = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple';
 export declare type Gradientduotones = 'purple2blue' | 'cyan2blue' | 'green2blue' | 'purple2pink' | 'pink2orange' | 'teal2lime' | 'red2yellow';
 export declare type Textsize = 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'text-2xl' | 'text-3xl' | 'text-4xl';
+export declare type InputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
 export interface ButtonGroupType {
     name: string;
     href?: string;
@@ -161,3 +163,24 @@ export interface PageType {
     pageNum: number;
     href: string;
 }
+export interface TransitionParamTypes {
+    delay?: number;
+    duration?: number;
+    easing?: (t: number) => number;
+    css?: (t: number, u: number) => string;
+    tick?: (t: number, u: number) => void;
+}
+export interface CheckboxType {
+    id: string;
+    label: string;
+    checked?: boolean;
+    disabled?: boolean;
+    helper?: string;
+}
+export interface RadioType {
+    id: string;
+    label: string;
+    value: string;
+    checked?: boolean;
+    disabled?: boolean;
+}

package/utils/generateId.d.ts

@@ -0,0 +1 @@
+export default function _default(): string;

package/utils/generateId.js

@@ -0,0 +1,5 @@
+let n = Date.now();
+
+export default function() {
+	return (++n).toString(36);
+}