flowbite-svelte 0.24.11 → 0.24.12

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.12](https://github.com/themesberg/flowbite-svelte/compare/v0.24.11...v0.24.12) (2022-08-16)
+
+
+### Features
+
+* add active color to InteractiveTabs and InteractiveTabHead component ([7995e21](https://github.com/themesberg/flowbite-svelte/commit/7995e210f98325350b055a43199fa4d7750ea225))
+
 ### [0.24.11](https://github.com/themesberg/flowbite-svelte/compare/v0.24.10...v0.24.11) (2022-08-15)
 
 

package/package.json

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

package/skeleton/WidgetPlaceholder.svelte

@@ -1,6 +1,5 @@
 <script>import classNames from 'classnames';
 export let divClass = 'p-4 max-w-sm rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700';
-export let size = '48';
 </script>
 
 <div role="status" class={classNames(divClass, $$props.class)}>

package/skeleton/WidgetPlaceholder.svelte.d.ts

@@ -3,7 +3,6 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         divClass?: string;
-        size?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/tabs/InteractiveTabHead.svelte

@@ -1,7 +1,11 @@
 <script>import { tabStore } from './tabStores';
+import classNames from 'classnames';
 export let tabs;
 export let tabId = 'myTab';
 export let activeTabValue = 1;
+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';
 const handleClick = (tabValue) => () => {
     tabStore.update((n) => (n = tabValue));
     activeTabValue = tabValue;
@@ -36,12 +40,11 @@ Header part of Interactive tab component. Use with TabContent.
 			<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"
+					class={classNames(btnClass, activeTabValue === id ? activeClass : inactiveClasses)}
 					id="{name}-tab"
 					data-tabs-target="#{name}"
 					type="button"
 					role="tab"
-					class:active={activeTabValue === id}
 					aria-controls={name}
 					aria-selected="false"
 					on:blur

package/tabs/InteractiveTabHead.svelte.d.ts

@@ -5,6 +5,9 @@ declare const __propDef: {
         tabs: TabHeadType[];
         tabId?: string;
         activeTabValue?: number;
+        btnClass?: string;
+        activeClass?: string;
+        inactiveClasses?: string;
     };
     events: {
         blur: FocusEvent;

package/tabs/InteractiveTabs.svelte

@@ -1,6 +1,10 @@
-<script>export let tabId = 'myTab';
+<script>import classNames from 'classnames';
+export let tabId = 'myTab';
 export let activeTabValue = 1;
 export let tabs;
+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';
 const handleClick = (tabValue) => () => (activeTabValue = tabValue);
 </script>
 
@@ -19,11 +23,10 @@ const handleClick = (tabValue) => () => (activeTabValue = tabValue);
 					on:mouseenter
 					on:mouseleave
 					on:mouseover
-					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"
+					class={classNames(btnClass, activeTabValue === id ? activeClass : inactiveClasses)}
 					id="{name}-tab"
 					type="button"
 					role="tab"
-					class:active={activeTabValue === id}
 					aria-controls={name}>{name}</button
 				>
 			</li>

package/tabs/InteractiveTabs.svelte.d.ts

@@ -5,6 +5,9 @@ declare const __propDef: {
         tabId?: string;
         activeTabValue?: number;
         tabs: InteractiveTabType[];
+        btnClass?: string;
+        activeClass?: string;
+        inactiveClasses?: string;
     };
     events: {
         blur: FocusEvent;