flowbite-svelte 0.10.11 → 0.11.0

package/avatar/Avatar.svelte

@@ -0,0 +1,40 @@
+<script >export let avatar = {
+    src: '/',
+    alt: '',
+    size: 8,
+    border: false,
+    round: false,
+    header: '',
+    text: ''
+};
+let isCircle = avatar.round ? 'rounded-full' : 'rounded';
+let isBorder = avatar.border ? 'p-1 ring-2 ring-gray-300 dark:ring-gray-500' : '';
+export let avatarClass = `w-${avatar.size} h-${avatar.size} ${isCircle} ${isBorder}`;
+export let placehoder = false;
+</script>
+
+{#if placehoder}
+	<div class="relative w-10 h-10 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-600">
+		<svg
+			class="absolute w-12 h-12 text-gray-400 -left-1"
+			fill="currentColor"
+			viewBox="0 0 20 20"
+			xmlns="http://www.w3.org/2000/svg"
+			><path
+				fill-rule="evenodd"
+				d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+				clip-rule="evenodd"
+			/></svg
+		>
+	</div>
+{:else if avatar.header && avatar.text}
+	<div class="flex items-center space-x-4">
+		<img class="class={avatarClass}" alt={avatar.alt} src={avatar.src} />
+		<div class="space-y-1 font-medium dark:text-white">
+			<div>{avatar.header}</div>
+			<div class="text-sm text-gray-500 dark:text-gray-400">{avatar.text}</div>
+		</div>
+	</div>
+{:else}
+	<img class={avatarClass} alt={avatar.alt} src={avatar.src} />
+{/if}

package/avatar/Avatar.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AvatarType } from '../types';
+declare const __propDef: {
+    props: {
+        avatar?: AvatarType;
+        avatarClass?: string;
+        placehoder?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type AvatarProps = typeof __propDef.props;
+export declare type AvatarEvents = typeof __propDef.events;
+export declare type AvatarSlots = typeof __propDef.slots;
+export default class Avatar extends SvelteComponentTyped<AvatarProps, AvatarEvents, AvatarSlots> {
+}
+export {};

package/buttons/GradientOutlineButton.svelte

@@ -10,7 +10,7 @@ if (color === 'purple2blue') {
         'relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0';
 }
 else if (color === 'cyan2blue') {
-    btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:ring-cyan-200 dark:focus:ring-cyan-800`;
+    btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-cyan-200 dark:focus:ring-cyan-800`;
     spanClass =
         'relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0';
 }

package/index.d.ts

@@ -8,6 +8,7 @@ export { default as ForgotPassword } from "./auth/ForgotPassword.svelte";
 export { default as Login } from "./auth/Login.svelte";
 export { default as Register } from "./auth/Register.svelte";
 export { default as Reset } from "./auth/Reset.svelte";
+export { default as Avatar } from "./avatar/Avatar.svelte";
 export { default as Badge } from "./badges/Badge.svelte";
 export { default as BadgeIcon } from "./badges/BadgeIcon.svelte";
 export { default as BadgeLink } from "./badges/BadgeLink.svelte";
@@ -56,5 +57,6 @@ export { default as SpinnerButton } from "./spinners/SpinnerButton.svelte";
 export { default as InteractiveTabs } from "./tabs/InteractiveTabs.svelte";
 export { default as DefaultTabs } from "./tabs/DefaultTabs.svelte";
 export { default as PillTabs } from "./tabs/PillTabs.svelte";
+export { default as Toast } from "./toasts/Toast.svelte";
 export { default as Tooltip } from "./tooltips/Tooltip.svelte";
 export { default as LightTooltip } from "./tooltips/LightTooltip.svelte";

package/index.js

@@ -12,7 +12,10 @@ export { default as Confirm } from'./auth/Confirm.svelte'
 export { default as ForgotPassword } from'./auth/ForgotPassword.svelte'
 export { default as Login } from'./auth/Login.svelte'
 export { default as Register } from'./auth/Register.svelte'
-export { default as Reset } from'./auth/Reset.svelte'
+export { default as Reset } from './auth/Reset.svelte'
+
+// Avatar
+export { default as Avatar } from './avatar/Avatar.svelte'
 
 // Badges
 export { default as Badge } from'./badges/Badge.svelte'
@@ -88,6 +91,9 @@ export { default as InteractiveTabs } from'./tabs/InteractiveTabs.svelte'
 export { default as DefaultTabs } from'./tabs/DefaultTabs.svelte'
 export { default as PillTabs } from'./tabs/PillTabs.svelte'
 
+// Toast
+export { default as Toast } from './toasts/Toast.svelte'
+
 // Tooltips
 export { default as Tooltip } from'./tooltips/Tooltip.svelte'
 export { default as LightTooltip } from'./tooltips/LightTooltip.svelte'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.10.11",
+  "version": "0.11.0",
   "description": "Flowbite components for Svelte",
   "author": {
     "name": "Shinichi Okada",
@@ -80,6 +80,7 @@
     "./auth/Login.svelte": "./auth/Login.svelte",
     "./auth/Register.svelte": "./auth/Register.svelte",
     "./auth/Reset.svelte": "./auth/Reset.svelte",
+    "./avatar/Avatar.svelte": "./avatar/Avatar.svelte",
     "./badges/Badge.svelte": "./badges/Badge.svelte",
     "./badges/BadgeIcon.svelte": "./badges/BadgeIcon.svelte",
     "./badges/BadgeLink.svelte": "./badges/BadgeLink.svelte",
@@ -130,6 +131,7 @@
     "./tabs/DefaultTabs.svelte": "./tabs/DefaultTabs.svelte",
     "./tabs/InteractiveTabs.svelte": "./tabs/InteractiveTabs.svelte",
     "./tabs/PillTabs.svelte": "./tabs/PillTabs.svelte",
+    "./toasts/Toast.svelte": "./toasts/Toast.svelte",
     "./tooltips/LightTooltip.svelte": "./tooltips/LightTooltip.svelte",
     "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte",
     "./types": "./types.js"

package/toasts/Toast.svelte

@@ -0,0 +1,84 @@
+<script >import { fade, blur, fly, slide } from 'svelte/transition';
+import { quintOut } from 'svelte/easing';
+let visible = true;
+const handleHide = () => {
+    visible = !visible;
+};
+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);
+    }
+}
+</script>
+
+{#if visible}
+	<div transition:multiple={transitionParams} class={divClass} role="alert">
+		<div class={iconDivClass}>
+			<slot name="icon" />
+		</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>
+	</div>
+{/if}

package/toasts/Toast.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Colors, TransitionTypes } from '../types';
+declare const __propDef: {
+    props: {
+        iconColor?: Colors;
+        transitionType?: TransitionTypes;
+        transitionParams?: {};
+        divClass?: string;
+        textClass?: string;
+        btnClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+        text: {};
+    };
+};
+export declare type ToastProps = typeof __propDef.props;
+export declare type ToastEvents = typeof __propDef.events;
+export declare type ToastSlots = typeof __propDef.slots;
+export default class Toast extends SvelteComponentTyped<ToastProps, ToastEvents, ToastSlots> {
+}
+export {};

package/types.d.ts

@@ -87,3 +87,13 @@ export declare type SelectOptionType = {
     name: string;
     value: string;
 };
+export interface AvatarType {
+    src?: string;
+    alt?: string;
+    size?: 6 | 8 | 12 | 16 | 24 | 48;
+    border?: boolean;
+    round?: boolean;
+    header?: string;
+    text?: string;
+}
+export declare type TransitionTypes = 'fade' | 'fly' | 'slide' | 'blur';

package/types.js

@@ -1,8 +1 @@
 export {};
-// export type ToggleType = {
-//     name: string;
-//     id: string;
-//     label: string;
-//     checked?: boolean;
-//     disabled?: boolean;
-// }