flowbite-svelte 0.24.9 → 0.24.12

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 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)
+
+
+### Features
+
+* add sticky footer, add $$props.class to all skeleton components ([1fad8dc](https://github.com/themesberg/flowbite-svelte/commit/1fad8dc9d8c0bc1428daeada82f44accc5f7e9a0))
+
+### [0.24.10](https://github.com/themesberg/flowbite-svelte/compare/v0.24.9...v0.24.10) (2022-08-15)
+
+
+### Features
+
+* modal - crypto ([47cf678](https://github.com/themesberg/flowbite-svelte/commit/47cf678ef2a7bf10c842e367a37e2aedebe7a8fc))
+* modal - crypto + html ([26475ed](https://github.com/themesberg/flowbite-svelte/commit/26475edd98a2c73fbe02580fefb4c8455e25f1bb))
+
+
+### Bug Fixes
+
+* create Coinbase, Fortmatic, Metamask, OperaWallet, and WalletConnect component ([f8eabc5](https://github.com/themesberg/flowbite-svelte/commit/f8eabc5b23b8c0d9fab75deca393858952406660))
+
 ### [0.24.9](https://github.com/themesberg/flowbite-svelte/compare/v0.24.8...v0.24.9) (2022-08-15)
 
 

package/footer/FooterCopyright.svelte

@@ -1,5 +1,5 @@
 <script>import classNames from 'classnames';
-export let spanClass = 'text-sm text-gray-500 sm:text-center dark:text-gray-400';
+export let spanClass = 'block text-sm text-gray-500 sm:text-center dark:text-gray-400';
 export let aClass = 'hover:underline';
 export let year = new Date().getFullYear();
 export let href = '';

package/modals/Modal.svelte

@@ -119,7 +119,7 @@ const hide = () => {
 		>
 			<!-- Modal header -->
 			{#if $$slots.header || title}
-				<div class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
+				<div class="flex justify-between items-center p-4 rounded-t border-b dark:border-gray-600">
 					<slot name="header">
 						<h3 class="text-xl font-semibold text-gray-900 dark:text-white p-0">
 							{title}

package/package.json

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

package/skeleton/CardPlaceholder.svelte

@@ -1,10 +1,9 @@
-<script>export let size = '48';
+<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="p-4 max-w-sm rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700"
->
+<div role="status" class={classNames(divClass, $$props.class)}>
 	<div class="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded dark:bg-gray-700">
 		<svg
 			width={size}

package/skeleton/CardPlaceholder.svelte.d.ts

@@ -1,6 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
+        divClass?: string;
         size?: string;
     };
     events: {

package/skeleton/ImagePlaceholder.svelte

@@ -1,10 +1,9 @@
-<script>export let size = '48';
+<script>import classNames from 'classnames';
+export let divClass = 'space-y-8 animate-pulse md:space-y-0 md:space-x-8 md:flex md:items-center';
+export let size = '48';
 </script>
 
-<div
-	role="status"
-	class="space-y-8 animate-pulse md:space-y-0 md:space-x-8 md:flex md:items-center"
->
+<div role="status" class={classNames(divClass, $$props.class)}>
 	<div
 		class="flex justify-center items-center w-full h-48 bg-gray-300 rounded sm:w-96 dark:bg-gray-700"
 	>

package/skeleton/ImagePlaceholder.svelte.d.ts

@@ -1,6 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
+        divClass?: string;
         size?: string;
     };
     events: {

package/skeleton/ListPlaceholder.svelte

@@ -1,7 +1,8 @@
-<div
-	role="status"
-	class="p-4 space-y-4 max-w-md rounded border border-gray-200 divide-y divide-gray-200 shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700"
->
+<script>import classNames from 'classnames';
+export let divClass = 'p-4 space-y-4 max-w-md rounded border border-gray-200 divide-y divide-gray-200 shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700';
+</script>
+
+<div role="status" class={classNames(divClass, $$props.class)}>
 	<div class="flex justify-between items-center">
 		<div>
 			<div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5" />

package/skeleton/ListPlaceholder.svelte.d.ts

@@ -1,19 +1,17 @@
-/** @typedef {typeof __propDef.props}  ListPlaceholderProps */
-/** @typedef {typeof __propDef.events}  ListPlaceholderEvents */
-/** @typedef {typeof __propDef.slots}  ListPlaceholderSlots */
-export default class ListPlaceholder extends SvelteComponentTyped<{}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ListPlaceholderProps = typeof __propDef.props;
-export type ListPlaceholderEvents = typeof __propDef.events;
-export type ListPlaceholderSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: any;
+        divClass?: string;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type ListPlaceholderProps = typeof __propDef.props;
+export declare type ListPlaceholderEvents = typeof __propDef.events;
+export declare type ListPlaceholderSlots = typeof __propDef.slots;
+export default class ListPlaceholder extends SvelteComponentTyped<ListPlaceholderProps, ListPlaceholderEvents, ListPlaceholderSlots> {
+}
 export {};

package/skeleton/Skeleton.svelte

@@ -1,4 +1,8 @@
-<div role="status" class="max-w-sm animate-pulse">
+<script>import classNames from 'classnames';
+export let divClass = 'max-w-sm animate-pulse';
+</script>
+
+<div role="status" class={classNames(divClass, $$props.class)}>
 	<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4" />
 	<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5" />
 	<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />

package/skeleton/Skeleton.svelte.d.ts

@@ -1,19 +1,17 @@
-/** @typedef {typeof __propDef.props}  SkeletonProps */
-/** @typedef {typeof __propDef.events}  SkeletonEvents */
-/** @typedef {typeof __propDef.slots}  SkeletonSlots */
-export default class Skeleton extends SvelteComponentTyped<{}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SkeletonProps = typeof __propDef.props;
-export type SkeletonEvents = typeof __propDef.events;
-export type SkeletonSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: any;
+        divClass?: string;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type SkeletonProps = typeof __propDef.props;
+export declare type SkeletonEvents = typeof __propDef.events;
+export declare type SkeletonSlots = typeof __propDef.slots;
+export default class Skeleton extends SvelteComponentTyped<SkeletonProps, SkeletonEvents, SkeletonSlots> {
+}
 export {};

package/skeleton/TestimonialPlaceholder.svelte

@@ -1,4 +1,8 @@
-<div role="status" class="animate-pulse">
+<script>import classNames from 'classnames';
+export let divClass = 'animate-pulse';
+</script>
+
+<div role="status" class={classNames(divClass, $$props.class)}>
 	<div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 max-w-[640px] mb-2.5 mx-auto" />
 	<div class="h-2.5 mx-auto bg-gray-300 rounded-full dark:bg-gray-700 max-w-[540px]" />
 	<div class="flex justify-center items-center mt-4">

package/skeleton/TestimonialPlaceholder.svelte.d.ts

@@ -1,19 +1,17 @@
-/** @typedef {typeof __propDef.props}  TestimonialPlaceholderProps */
-/** @typedef {typeof __propDef.events}  TestimonialPlaceholderEvents */
-/** @typedef {typeof __propDef.slots}  TestimonialPlaceholderSlots */
-export default class TestimonialPlaceholder extends SvelteComponentTyped<{}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TestimonialPlaceholderProps = typeof __propDef.props;
-export type TestimonialPlaceholderEvents = typeof __propDef.events;
-export type TestimonialPlaceholderSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: any;
+        divClass?: string;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type TestimonialPlaceholderProps = typeof __propDef.props;
+export declare type TestimonialPlaceholderEvents = typeof __propDef.events;
+export declare type TestimonialPlaceholderSlots = typeof __propDef.slots;
+export default class TestimonialPlaceholder extends SvelteComponentTyped<TestimonialPlaceholderProps, TestimonialPlaceholderEvents, TestimonialPlaceholderSlots> {
+}
 export {};

package/skeleton/TextPlaceholder.svelte

@@ -1,4 +1,8 @@
-<div role="status" class="space-y-2.5 animate-pulse max-w-lg">
+<script>import classNames from 'classnames';
+export let divClass = 'space-y-2.5 animate-pulse max-w-lg';
+</script>
+
+<div role="status" class={classNames(divClass, $$props.class)}>
 	<div class="flex items-center space-x-2 w-full">
 		<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32" />
 		<div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24" />

package/skeleton/TextPlaceholder.svelte.d.ts

@@ -1,19 +1,17 @@
-/** @typedef {typeof __propDef.props}  TextPlaceholderProps */
-/** @typedef {typeof __propDef.events}  TextPlaceholderEvents */
-/** @typedef {typeof __propDef.slots}  TextPlaceholderSlots */
-export default class TextPlaceholder extends SvelteComponentTyped<{}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TextPlaceholderProps = typeof __propDef.props;
-export type TextPlaceholderEvents = typeof __propDef.events;
-export type TextPlaceholderSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: any;
+        divClass?: string;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type TextPlaceholderProps = typeof __propDef.props;
+export declare type TextPlaceholderEvents = typeof __propDef.events;
+export declare type TextPlaceholderSlots = typeof __propDef.slots;
+export default class TextPlaceholder extends SvelteComponentTyped<TextPlaceholderProps, TextPlaceholderEvents, TextPlaceholderSlots> {
+}
 export {};

package/skeleton/VideoPlaceholder.svelte

@@ -1,10 +1,9 @@
-<script>export let size = '48';
+<script>import classNames from 'classnames';
+export let divClass = 'flex justify-center items-center max-w-sm h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700';
+export let size = '48';
 </script>
 
-<div
-	role="status"
-	class="flex justify-center items-center max-w-sm h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700"
->
+<div role="status" class={classNames(divClass, $$props.class)}>
 	<svg
 		width={size}
 		height={size}

package/skeleton/VideoPlaceholder.svelte.d.ts

@@ -1,6 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
+        divClass?: string;
         size?: string;
     };
     events: {

package/skeleton/WidgetPlaceholder.svelte

@@ -1,7 +1,8 @@
-<div
-	role="status"
-	class="p-4 max-w-sm rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700"
->
+<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';
+</script>
+
+<div role="status" class={classNames(divClass, $$props.class)}>
 	<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2.5" />
 	<div class="mb-10 w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
 	<div class="flex items-baseline mt-4 space-x-6">

package/skeleton/WidgetPlaceholder.svelte.d.ts

@@ -1,19 +1,17 @@
-/** @typedef {typeof __propDef.props}  WidgetPlaceholderProps */
-/** @typedef {typeof __propDef.events}  WidgetPlaceholderEvents */
-/** @typedef {typeof __propDef.slots}  WidgetPlaceholderSlots */
-export default class WidgetPlaceholder extends SvelteComponentTyped<{}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type WidgetPlaceholderProps = typeof __propDef.props;
-export type WidgetPlaceholderEvents = typeof __propDef.events;
-export type WidgetPlaceholderSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: any;
+        divClass?: string;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type WidgetPlaceholderProps = typeof __propDef.props;
+export declare type WidgetPlaceholderEvents = typeof __propDef.events;
+export declare type WidgetPlaceholderSlots = typeof __propDef.slots;
+export default class WidgetPlaceholder extends SvelteComponentTyped<WidgetPlaceholderProps, WidgetPlaceholderEvents, WidgetPlaceholderSlots> {
+}
 export {};

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;