flowbite-svelte 0.24.12 → 0.24.15

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.24.15](https://github.com/themesberg/flowbite-svelte/compare/v0.24.14...v0.24.15) (2022-08-16)
+
+
+### Bug Fixes
+
+* update prop names for Alert ([3775700](https://github.com/themesberg/flowbite-svelte/commit/377570061f48de43af44c5f87f46b049f4d87341))
+
+### [0.24.14](https://github.com/themesberg/flowbite-svelte/compare/v0.24.13...v0.24.14) (2022-08-16)
+
+
+### Features
+
+* add custom color to Alert component and update props ([2e2a71b](https://github.com/themesberg/flowbite-svelte/commit/2e2a71b4fb83bca28a1bf6b107f4163acbb6b011))
+
+### [0.24.13](https://github.com/themesberg/flowbite-svelte/compare/v0.24.12...v0.24.13) (2022-08-16)
+
+
+### Features
+
+* add disabled to InteractiveTabs ([f5ca0fe](https://github.com/themesberg/flowbite-svelte/commit/f5ca0fe858a50ef2c017ed6ec266c0012166b5f9))
+* add Tabs component for all tab ([758e2e7](https://github.com/themesberg/flowbite-svelte/commit/758e2e743eb845c7190a7c6c2a9888c67c46db73))
+
 ### [0.24.12](https://github.com/themesberg/flowbite-svelte/compare/v0.24.11...v0.24.12) (2022-08-16)
 
 

package/alerts/Alert.svelte

@@ -9,6 +9,9 @@ export let icon = null;
 export let dismissable = false;
 export let rounded = true;
 export let accent = false;
+export let customBgClass = '';
+export let customBorderAccentClass = '';
+export let customTextColor = '';
 let hidden = false;
 const handleAlert = () => {
     dispatch('handleAlert');
@@ -25,7 +28,8 @@ const bgClasses = {
     purple: 'bg-purple-100 dark:bg-purple-200 ',
     pink: 'bg-pink-100 dark:bg-pink-200 ',
     blue: 'bg-blue-100 dark:bg-blue-200 ',
-    dark: 'bg-gray-100 dark:bg-gray-700'
+    dark: 'bg-gray-100 dark:bg-gray-700',
+    custom: customBgClass
 };
 const borderAccentClasses = {
     gray: 'border-gray-500 dark:bg-gray-200 ',
@@ -36,7 +40,8 @@ const borderAccentClasses = {
     purple: 'border-purple-500 dark:bg-purple-200 ',
     pink: 'border-pink-500 dark:bg-pink-200 ',
     blue: 'border-blue-500 dark:bg-blue-200 ',
-    dark: 'border-gray-500'
+    dark: 'border-gray-500',
+    custom: customBorderAccentClass
 };
 const textColors = {
     gray: 'text-gray-700 dark:text-gray-800',
@@ -47,7 +52,8 @@ const textColors = {
     purple: 'text-purple-700 dark:text-purple-800',
     pink: 'text-pink-700 dark:text-pink-800',
     blue: 'text-blue-700 dark:text-blue-800',
-    dark: 'text-gray-700  dark:text-gray-300'
+    dark: 'text-gray-700  dark:text-gray-300',
+    custom: customTextColor
 };
 let divClass;
 $: divClass = classNames('flex flex-col p-4 mb-4 gap-2 text-sm', bgClasses[color] ?? bgClasses.blue, accent && (borderAccentClasses[color] ?? borderAccentClasses.blue), rounded && 'rounded-lg ', accent && 'border-t-4 ', textColors[color], $$props.class);

package/alerts/Alert.svelte.d.ts

@@ -9,6 +9,9 @@ declare const __propDef: {
         dismissable?: boolean;
         rounded?: boolean;
         accent?: boolean;
+        customBgClass?: string;
+        customBorderAccentClass?: string;
+        customTextColor?: string;
     };
     events: {
         click: MouseEvent;

package/index.d.ts

@@ -89,6 +89,7 @@ export { default as TableBodyRow } from './tables/TableBodyRow.svelte';
 export { default as TableHead } from './tables/TableHead.svelte';
 export { default as TableHeadCell } from './tables/TableHeadCell.svelte';
 export { default as TableSearch } from './tables/TableSearch.svelte';
+export { default as Tabs } from './tabs/Tabs.svelte';
 export { tabStore } from './tabs/tabStores.js';
 export { default as InteractiveTabHead } from './tabs/InteractiveTabHead.svelte';
 export { default as InteractiveTabs } from './tabs/InteractiveTabs.svelte';

package/index.js

@@ -117,6 +117,7 @@ export { default as TableHead } from './tables/TableHead.svelte';
 export { default as TableHeadCell } from './tables/TableHeadCell.svelte';
 export { default as TableSearch } from './tables/TableSearch.svelte';
 // Tabs
+export { default as Tabs } from './tabs/Tabs.svelte';
 export { tabStore } from './tabs/tabStores.js';
 export { default as InteractiveTabHead } from './tabs/InteractiveTabHead.svelte';
 export { default as InteractiveTabs } from './tabs/InteractiveTabs.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.24.12",
+  "version": "0.24.15",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -204,6 +204,7 @@
     "./tabs/InteractiveTabs.svelte": "./tabs/InteractiveTabs.svelte",
     "./tabs/PillTabs.svelte": "./tabs/PillTabs.svelte",
     "./tabs/TabContent.svelte": "./tabs/TabContent.svelte",
+    "./tabs/Tabs.svelte": "./tabs/Tabs.svelte",
     "./tabs/UnderlineTabs.svelte": "./tabs/UnderlineTabs.svelte",
     "./tabs/tabStores": "./tabs/tabStores.js",
     "./timelines/Activity.svelte": "./timelines/Activity.svelte",

package/tabs/InteractiveTabs.svelte

@@ -10,7 +10,7 @@ const handleClick = (tabValue) => () => (activeTabValue = tabValue);
 
 <div class="mb-4 border-b border-gray-200 dark:border-gray-700">
 	<ul class="flex flex-wrap -mb-px" id={tabId} role="tablist">
-		{#each tabs as { name, id }}
+		{#each tabs as { name, id, disabled }}
 			<li class="mr-2" role="presentation">
 				<button
 					on:click={handleClick(id)}
@@ -27,7 +27,8 @@ const handleClick = (tabValue) => () => (activeTabValue = tabValue);
 					id="{name}-tab"
 					type="button"
 					role="tab"
-					aria-controls={name}>{name}</button
+					aria-controls={name}
+					{disabled}>{name}</button
 				>
 			</li>
 		{/each}

package/tabs/Tabs.svelte

@@ -0,0 +1,115 @@
+<script>import classNames from 'classnames';
+export let tabStyle = 'default';
+export let tabId = 'myTab';
+export let tabLabel = 'Full-width tabs';
+export let activeTabValue = 1;
+export let tabs;
+export let customDivClass = '';
+export let customUlClass = '';
+export let customLiClass = '';
+export let customActiveClass = '';
+export let customInActiveClass = '';
+export let iconClass = 'mr-2 w-5 h-5 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300';
+export let contentDivClass = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800';
+export let fullSelectClass = 'bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+const divClasses = {
+    default: 'mb-4 border-b border-gray-200 dark:border-gray-700',
+    full: 'mb-4',
+    icon: 'mb-4 border-b border-gray-200 dark:border-gray-700',
+    pill: 'mb-4 ',
+    underline: 'mb-4 text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700',
+    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
+};
+const liClasses = {
+    default: 'mr-2',
+    full: 'w-full',
+    icon: 'mr-2',
+    pill: 'mr-2',
+    underline: 'mr-2',
+    custom: customLiClass
+};
+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 handleClick = (tabValue) => () => (activeTabValue = tabValue);
+</script>
+
+{#if tabStyle === 'full'}
+	<div class="sm:hidden">
+		<label for="tabs" class="sr-only">{tabLabel}</label>
+		<select id="tabs" class={fullSelectClass}>
+			{#each tabs as { name }}
+				<option>{name}</option>
+			{/each}
+		</select>
+	</div>
+{/if}
+<div class={divClasses[tabStyle]}>
+	<ul class={ulClasses[tabStyle]} id={tabId} role="tablist">
+		{#each tabs as { name, id, disabled, icon, iconSize }}
+			<li class={liClasses[tabStyle]} role="presentation">
+				<button
+					on:click={handleClick(id)}
+					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="{name}-tab"
+					type="button"
+					role="tab"
+					aria-controls={name}
+					{disabled}
+				>
+					{#if icon}
+						<svelte:component this={icon} size={iconSize} class={iconClass} />
+					{/if}
+					{name}</button
+				>
+			</li>
+		{/each}
+	</ul>
+</div>
+<div id="{tabId}Content">
+	{#each tabs as { name, content, id }}
+		{#if activeTabValue === id}
+			<div class={contentDivClass} 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}
+					</p>
+				{:else}
+					<svelte:component this={content} />
+				{/if}
+			</div>
+		{/if}
+	{/each}
+</div>

package/tabs/Tabs.svelte.d.ts

@@ -0,0 +1,39 @@
+import { SvelteComponentTyped } from "svelte";
+import type { InteractiveTabType } from '../types';
+declare const __propDef: {
+    props: {
+        tabStyle?: 'default' | 'full' | 'icon' | 'pill' | 'underline' | 'custom';
+        tabId?: string;
+        tabLabel?: string;
+        activeTabValue?: number;
+        tabs: InteractiveTabType[];
+        customDivClass?: string;
+        customUlClass?: string;
+        customLiClass?: string;
+        customActiveClass?: string;
+        customInActiveClass?: string;
+        iconClass?: string;
+        contentDivClass?: string;
+        fullSelectClass?: string;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        focus: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mouseover: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TabsProps = typeof __propDef.props;
+export declare type TabsEvents = typeof __propDef.events;
+export declare type TabsSlots = typeof __propDef.slots;
+export default class Tabs extends SvelteComponentTyped<TabsProps, TabsEvents, TabsSlots> {
+}
+export {};

package/types.d.ts

@@ -57,7 +57,7 @@ export interface CheckboxType {
     disabled?: boolean;
     helper?: string;
 }
-export declare type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink' | 'white';
+export declare type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink' | 'white' | 'custom';
 export declare type CrumbType = {
     label: string;
     href: string;
@@ -114,6 +114,10 @@ export declare type InputType = 'color' | 'date' | 'datetime-local' | 'email' |
 export interface InteractiveTabType {
     name: string;
     id: number;
+    active?: boolean;
+    disabled?: boolean;
+    icon?: typeof SvelteComponent;
+    iconSize?: number;
     content: string | typeof SvelteComponent;
 }
 export interface ListGroupItemType {