flowbite-svelte 0.24.13 → 0.24.16

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 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.16](https://github.com/themesberg/flowbite-svelte/compare/v0.24.15...v0.24.16) (2022-08-16)
+
+
+### Features
+
+* add disabled and classes to InteractiveTabHead component ([869fb1b](https://github.com/themesberg/flowbite-svelte/commit/869fb1b34f5a0e5a254cdc09b25195bf621a25d6))
+
+### [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)
 
 

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.24.13",
+  "version": "0.24.16",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {

package/tabs/InteractiveTabHead.svelte

@@ -3,6 +3,10 @@ import classNames from 'classnames';
 export let tabs;
 export let tabId = 'myTab';
 export let activeTabValue = 1;
+export let disabled = false;
+export let divClass = 'mb-4 border-b border-gray-200';
+export let ulClass = 'flex flex-wrap -mb-px text-sm font-medium text-center';
+export let liClass = 'mr-2';
 export let btnClass = 'inline-block py-4 px-4 text-sm font-medium text-center rounded-t-lg border-b-2 border-transparent';
 export let activeClass = 'text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-400 border-blue-600 dark:border-blue-500';
 export let inactiveClasses = 'text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300';
@@ -29,15 +33,10 @@ Header part of Interactive tab component. Use with TabContent.
   </InteractiveHead>
   ```
   -->
-<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"
-	>
+<div class={divClass}>
+	<ul class={ulClass} id={tabId} data-tabs-toggle="#myTabContent" role="tablist">
 		{#each tabs as { name, id }}
-			<li class="mr-2" role="presentation">
+			<li class={liClass} role="presentation">
 				<button
 					on:click={handleClick(id)}
 					class={classNames(btnClass, activeTabValue === id ? activeClass : inactiveClasses)}
@@ -55,7 +54,8 @@ Header part of Interactive tab component. Use with TabContent.
 					on:keyup
 					on:mouseenter
 					on:mouseleave
-					on:mouseover>{name}</button
+					on:mouseover
+					{disabled}>{name}</button
 				>
 			</li>
 		{/each}

package/tabs/InteractiveTabHead.svelte.d.ts

@@ -5,6 +5,10 @@ declare const __propDef: {
         tabs: TabHeadType[];
         tabId?: string;
         activeTabValue?: number;
+        disabled?: boolean;
+        divClass?: string;
+        ulClass?: string;
+        liClass?: string;
         btnClass?: string;
         activeClass?: string;
         inactiveClasses?: string;

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;