flowbite-svelte 0.19.11 → 0.19.12

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 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.19.12](https://github.com/themesberg/flowbite-svelte/compare/v0.19.11...v0.19.12) (2022-06-30)
+
 ### [0.19.11](https://github.com/themesberg/flowbite-svelte/compare/v0.19.10...v0.19.11) (2022-06-30)
 
 

package/breadcrumbs/BreadcrumbItem.svelte

@@ -1,6 +1,6 @@
 <script>import { ChevronRight } from 'svelte-heros';
 export let icon = null;
-export let variation;
+export let variation = null;
 export let iconSize = 20;
 export let iconClass = 'mr-2';
 </script>

package/breadcrumbs/BreadcrumbItem.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         icon?: typeof SvelteComponent | null;
-        variation: 'solid' | null;
+        variation?: 'solid' | null;
         iconSize?: number;
         iconClass?: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.19.11",
+  "version": "0.19.12",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -208,6 +208,7 @@
     "./toasts/Toast.svelte": "./toasts/Toast.svelte",
     "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte",
     "./types": "./types.js",
+    "./utils/CloseButton.svelte": "./utils/CloseButton.svelte",
     "./utils/clickOutside": "./utils/clickOutside.js",
     "./utils/generateId": "./utils/generateId.js"
   },

package/toasts/Toast.svelte

@@ -1,65 +1,46 @@
-<script>import { fade, blur, fly, slide } from 'svelte/transition';
+<script>import classNames from 'classnames';
+import * as transitions from 'svelte/transition';
+import CloseButton from '../utils/CloseButton.svelte';
+export let color = 'blue';
+export let simple = false;
+// Export a prop through which you can set a desired transition
+export let transition = 'fade';
+// Pass in extra transition params
+export let params = {};
 let visible = true;
-const handleHide = () => {
-    visible = !visible;
+const colors = {
+    blue: 'text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200',
+    green: 'text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200',
+    red: 'text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200',
+    gray: 'text-gray-500 bg-gray-100 dark:bg-gray-800 dark:text-gray-200',
+    purple: 'text-purple-500 bg-purple-100 dark:bg-purple-800 dark:text-purple-200',
+    indigo: 'text-indigo-500 bg-indigo-100 dark:bg-indigo-800 dark:text-indigo-200',
+    yellow: 'text-yellow-500 bg-yellow-100 dark:bg-yellow-800 dark:text-yellow-200'
 };
-export let iconColor = 'blue';
-// Export a prop through which you can set a desired transition
-export let transitionType = 'fade';
-// Pass in params
-export let transitionParams = {};
-let iconDivClass;
-export let divClass = 'flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800';
-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';
-}
-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';
-}
-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';
-}
-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';
-}
-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';
-}
-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';
-}
-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';
-}
-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';
-}
 // have a custom transition function that returns the desired transition
-function multiple(node, params) {
-    switch (transitionType) {
-        case 'slide':
-            return slide(node, params);
-        case 'blur':
-            return blur(node, params);
-        case 'fly':
-            return fly(node, params);
-        case 'fade':
-            return fade(node, params);
-    }
-}
+let transitionFunc;
+$: transitionFunc = transitions[transition] ?? transitions.fade;
+let divClass;
+$: divClass = classNames('w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800', $$props.class);
+let iconClass;
+$: iconClass = classNames('inline-flex items-center justify-center flex-shrink-0 rounded-lg w-8 h-8 mr-3', colors[color]);
 </script>
 
 {#if visible}
-	<div transition:multiple={transitionParams} class={divClass} role="alert">
-		<div class={iconDivClass}>
-			<slot name="icon" />
+	<div transition:transitionFunc={params} class={divClass} role="alert">
+		<div class="flex items-center w-full">
+			{#if $$slots.icon}
+				<div class={iconClass}>
+					<slot name="icon" />
+				</div>
+			{/if}
+
+			<div class="text-sm font-normal"><slot /></div>
+
+			{#if !simple}
+				<CloseButton on:click={() => (visible = false)} />
+			{/if}
 		</div>
-		<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>
-		</button>
+		<slot name="extra" />
 	</div>
 {/if}

package/toasts/Toast.svelte.d.ts

@@ -2,19 +2,19 @@ import { SvelteComponentTyped } from "svelte";
 import type { Colors, TransitionTypes, TransitionParamTypes } from '../types';
 declare const __propDef: {
     props: {
-        iconColor?: Colors;
-        transitionType?: TransitionTypes;
-        transitionParams?: TransitionParamTypes;
-        divClass?: string;
-        textClass?: string;
-        btnClass?: string;
+        [x: string]: any;
+        color?: Colors;
+        simple?: boolean;
+        transition?: TransitionTypes;
+        params?: TransitionParamTypes;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         icon: {};
-        text: {};
+        default: {};
+        extra: {};
     };
 };
 export declare type ToastProps = typeof __propDef.props;

package/utils/CloseButton.svelte

@@ -0,0 +1,27 @@
+<script>import classNames from 'classnames';
+export let color = 'default';
+const colors = {
+    gray: 'bg-gray-100 text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300',
+    red: 'bg-red-100 text-red-500 focus:ring-red-400 hover:bg-red-200 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300',
+    yellow: 'bg-yellow-100 text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300',
+    green: 'bg-green-100 text-green-500 focus:ring-green-400 hover:bg-green-200 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300',
+    indigo: 'bg-indigo-100 text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:bg-indigo-200 dark:text-indigo-600 dark:hover:bg-indigo-300',
+    purple: 'bg-purple-100 text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:bg-purple-200 dark:text-purple-600 dark:hover:bg-purple-300',
+    pink: 'bg-pink-100 text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:bg-pink-200 dark:text-pink-600 dark:hover:bg-pink-300',
+    blue: 'bg-blue-100 text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300',
+    default: 'bg-white text-gray-400 hover:text-gray-900 focus:ring-gray-300 hover:bg-gray-100 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700'
+};
+let buttonClass = '';
+$: buttonClass = classNames('ml-auto -mx-1 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex h-8 w-8', colors[color] ?? colors.blue, $$props.class);
+</script>
+
+<button on:click type="button" class={buttonClass} 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
+	>
+</button>

package/utils/CloseButton.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CloseButtonProps = typeof __propDef.props;
+export declare type CloseButtonEvents = typeof __propDef.events;
+export declare type CloseButtonSlots = typeof __propDef.slots;
+export default class CloseButton extends SvelteComponentTyped<CloseButtonProps, CloseButtonEvents, CloseButtonSlots> {
+}
+export {};