flowbite-svelte 0.22.23 → 0.22.26

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 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.22.26](https://github.com/themesberg/flowbite-svelte/compare/v0.22.25...v0.22.26) (2022-07-30)
+
+
+### Features
+
+* avatar w/tooltip / initials ([6b9a333](https://github.com/themesberg/flowbite-svelte/commit/6b9a333c96f3485b33a2fdeecc113138452acca0))
+
+### [0.22.25](https://github.com/themesberg/flowbite-svelte/compare/v0.22.24...v0.22.25) (2022-07-29)
+
+
+### Features
+
+* alerts with lists ([5ad5f3c](https://github.com/themesberg/flowbite-svelte/commit/5ad5f3cfb6b8f68464475b11086f85b0d60cc068))
+
+### [0.22.24](https://github.com/themesberg/flowbite-svelte/compare/v0.22.23...v0.22.24) (2022-07-29)
+
+
+### Features
+
+* badges new features ([775ecbc](https://github.com/themesberg/flowbite-svelte/commit/775ecbc04df58cd7c2517d103c963e7add92b5f6))
+
+
+### Bug Fixes
+
+* pink color ([e4551b5](https://github.com/themesberg/flowbite-svelte/commit/e4551b54e0b56c07bae45d2bddb1b2930a20fe72))
+
 ### [0.22.23](https://github.com/themesberg/flowbite-svelte/compare/v0.22.22...v0.22.23) (2022-07-29)
 
 

package/alerts/Alert.svelte

@@ -50,7 +50,7 @@ const textColors = {
     dark: 'text-gray-700  dark:text-gray-300'
 };
 let divClass;
-$: divClass = classNames('flex flex-col p-4 mb-4 gap-2 ', bgClasses[color] ?? bgClasses.blue, accent && (borderAccentClasses[color] ?? borderAccentClasses.blue), rounded && 'rounded-lg ', accent && 'border-t-4 ', textColors[color], $$props.class);
+$: 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);
 </script>
 
 <div id={$$props.id} class:hidden class={divClass} role="alert">
@@ -59,7 +59,7 @@ $: divClass = classNames('flex flex-col p-4 mb-4 gap-2 ', bgClasses[color] ?? bg
 			<svelte:component this={icon} class="flex-shrink-0 w-5 h-5 mr-3" />
 		{/if}
 
-		<div class="text-sm">
+		<div>
 			<slot />
 		</div>
 

package/avatar/Avatar.svelte

@@ -9,7 +9,6 @@ export let stacked = false;
 export let dot = { top: false, color: 'bg-gray-300 dark:bg-gray-500' };
 export let alt = '';
 export let size = 'md';
-// export let ring: string = 'ring-gray-300 dark:ring-gray-500';
 const sizes = {
     xs: 'w-6 h-6',
     sm: 'w-8 h-8',
@@ -18,21 +17,23 @@ const sizes = {
     xl: 'w-36 h-36'
 };
 let avatarClass;
-$: avatarClass = classNames(rounded ? 'rounded' : 'rounded-full', border && 'p-1 ring-2 ring-gray-300 dark:ring-gray-500', sizes[size], stacked && 'border-2 -ml-4 border-white dark:border-gray-800', $$props.class);
+$: avatarClass = classNames(rounded ? 'rounded' : 'rounded-full', border && 'p-1 ring-2 ring-gray-300 dark:ring-gray-500', sizes[size], stacked && 'border-2 -ml-4 border-white dark:border-gray-800', 'bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300', $$props.class);
 </script>
 
 <Dot show={$$props.dot} {rounded} {...dot} {size}>
 	{#if src}
 		<img class={avatarClass} {alt} {src} />
 	{:else if $$slots.default}
-		<a
-			class="flex justify-center items-center {avatarClass} text-xs font-medium text-white bg-gray-700 hover:bg-gray-600"
+		<svelte:element
+			this={href ? 'a' : 'div'}
+			class="flex justify-center items-center text-xs font-medium {avatarClass}"
 			{href}
-			><slot />
-		</a>
+		>
+			<slot />
+		</svelte:element>
 	{:else}
-		<div class={avatarClass}>
+		<svelte:element this={href ? 'a' : 'div'} class={avatarClass}>
 			<AvatarPlaceholder {rounded} />
-		</div>
+		</svelte:element>
 	{/if}
 </Dot>

package/avatar/Placeholder.svelte

@@ -2,7 +2,7 @@
 </script>
 
 <svg
-	class="text-gray-400 bg-gray-200 dark:bg-gray-600 {rounded ? 'rounded' : 'rounded-full'}"
+	class="text-gray-400 bg-gray-100 dark:bg-gray-600 {rounded ? 'rounded' : 'rounded-full'}"
 	fill="currentColor"
 	viewBox="0 0 16 16"
 	xmlns="http://www.w3.org/2000/svg"

package/badges/Badge.svelte

@@ -1,9 +1,12 @@
 <script>import classNames from 'classnames';
+import CloseButton from '../utils/CloseButton.svelte';
 export let color = 'blue';
 export let large = false;
 export let href = undefined;
 export let rounded = false;
-let badgeClass;
+export let index = false;
+export let dismissable = false;
+let hidden = false;
 const colors = {
     blue: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800',
     dark: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
@@ -12,7 +15,15 @@ const colors = {
     yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900',
     indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900',
     purple: 'bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-900',
-    pink: 'bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-900'
+    pink: 'bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-900',
+    ['!blue']: 'bg-blue-500 text-blue-100',
+    ['!dark']: 'bg-gray-500 text-gray-100',
+    ['!red']: 'bg-red-500 text-white',
+    ['!green']: 'bg-green-500 text-green-100',
+    ['!yellow']: 'bg-yellow-300 text-yellow-800',
+    ['!indigo']: 'bg-indigo-500 text-indigo-100',
+    ['!purple']: 'bg-purple-500 text-purple-100',
+    ['!pink']: 'bg-pink-500 text-pink-100'
 };
 const hovers = {
     blue: 'hover:bg-blue-200 dark:hover:bg-blue-300',
@@ -24,9 +35,16 @@ const hovers = {
     purple: 'hover:bg-purple-200 dark:hover:bg-purple-300',
     pink: 'hover:bg-pink-200 dark:hover:bg-pink-300'
 };
-$: badgeClass = classNames('inline-flex items-center justify-center mr-2', large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color] ?? colors.blue, href && (hovers[color] ?? hovers.blue), rounded ? 'rounded-full p-1' : 'rounded px-2.5 py-0.5', $$props.class);
+let badgeClass;
+$: badgeClass = classNames('inline-flex items-center justify-center -mb-0.5', large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color], href && (hovers[color] ?? hovers.blue), rounded ? 'rounded-full p-1' : 'rounded px-2.5 py-0.5', index && 'absolute font-bold border-2 border-white dark:border-gray-900', index && (large ? 'w-7 h-7 -top-3 -right-3' : 'w-6 h-6 -top-2 -right-2'), $$props.class);
+const handleHide = () => {
+    hidden = !hidden;
+};
 </script>
 
-<svelte:element this={href ? 'a' : 'span'} {href} {...$$restProps} class={badgeClass}>
+<svelte:element this={href ? 'a' : 'span'} {href} {...$$restProps} class={badgeClass} class:hidden>
 	<slot />
+	{#if dismissable}
+		<CloseButton {color} on:click={handleHide} size={large ? 'sm' : 'xs'} class="ml-1.5 -mr-1.5" />
+	{/if}
 </svelte:element>

package/badges/Badge.svelte.d.ts

@@ -7,6 +7,8 @@ declare const __propDef: {
         large?: boolean;
         href?: string;
         rounded?: boolean;
+        index?: boolean;
+        dismissable?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

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

package/utils/CloseButton.svelte

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 const background = getContext('background');
 export let color = 'default';
 export let name = 'Close';
+export let size = 'md';
 const colors = {
     gray: 'focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-300',
     red: 'focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-300',
@@ -14,17 +15,32 @@ const colors = {
     blue: 'focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-300',
     default: 'focus:ring-gray-300 '
 };
+const sizing = {
+    xs: 'm-0.5 rounded focus:ring-1 p-0.5',
+    sm: 'm-0.5 rounded focus:ring-1 p-0.5',
+    md: '-mx-1 -my-1.5 rounded-lg focus:ring-2 p-1.5'
+};
 let buttonClass = '';
-$: buttonClass = classNames('ml-auto -mx-1 -my-1.5 rounded-lg focus:ring-2 p-1.5 focus:outline-none', colors[color], color === 'default' &&
+$: buttonClass = classNames('ml-auto focus:outline-none', sizing[size], colors[color], color === 'default' &&
     (background
         ? 'hover:bg-gray-100 dark:hover:bg-gray-600'
         : 'hover:bg-gray-100 dark:hover:bg-gray-700'), $$props.class);
+const svgSizes = {
+    xs: 'w-3 h-3',
+    sm: 'w-3.5 h-3.5',
+    md: 'w-5 h-5'
+};
 </script>
 
 <button on:click type="button" class={buttonClass} aria-label="Close">
 	<slot>
 		<span class="sr-only">{name}</span>
-		<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+		<svg
+			class={svgSizes[size]}
+			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"

package/utils/CloseButton.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         color?: string;
         name?: string;
+        size?: 'xs' | 'sm' | 'md';
     };
     events: {
         click: MouseEvent;