flowbite-svelte 0.22.24 → 0.22.27

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 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.27](https://github.com/themesberg/flowbite-svelte/compare/v0.22.26...v0.22.27) (2022-08-01)
+
+
+### Bug Fixes
+
+* update skeleton components ([6c49370](https://github.com/themesberg/flowbite-svelte/commit/6c49370ef244234373d4b87cb1a60e4aebdbf86f))
+* update Svelte-Heros icon for Rating component ([d1c03fa](https://github.com/themesberg/flowbite-svelte/commit/d1c03fa4a0cb4b2cd4ccfe956d7d36ebd4161ed4))
+
+### [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)
 
 

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/cards/EcommerceCard.svelte

@@ -37,7 +37,7 @@ const linkColors = {
 	</a>
 	{#if stars}
 		<Rating rating={stars} divClass={spanClass}>
-			<Badge slot="text" color={btnColor}>5</Badge>
+			<Badge slot="text" color={btnColor}>{stars}</Badge>
 		</Rating>
 	{/if}
 	<slot />

package/carousels/CarouselTransition.svelte

@@ -13,19 +13,6 @@ export let transitionType;
 export let transitionParams = {};
 export let loop = false;
 export let duration = 2000;
-// 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);
-    }
-}
 // Carousel
 export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
 export let indicatorDivClass = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
@@ -40,6 +27,19 @@ export let iconClass = 'text-white sm:w-6 sm:h-6 dark:text-gray-300';
 export let captionClass = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
 // Indicator
 export let indicatorClass = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
+// 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);
+    }
+}
 // Slide
 // export let slideClass: string = 'hidden';
 let imageShowingIndex = 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.22.24",
+  "version": "0.22.27",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -30,6 +30,7 @@
     "prism-themes": "^1.9.0",
     "svelte": "^3.47.0",
     "svelte-check": "^2.8.0",
+    "svelte-heros": "^2.3.3",
     "svelte-preprocess": "^4.10.7",
     "svelte-sidebar-menu": "^0.8.4",
     "svelte2tsx": "^0.5.11",
@@ -81,8 +82,7 @@
   "dependencies": {
     "@floating-ui/dom": "^0.5.3",
     "classnames": "^2.3.1",
-    "flowbite": "^1.4.2",
-    "svelte-heros": "^2.2.2"
+    "flowbite": "^1.4.2"
   },
   "engines": {
     "npm": ">=7.0.0",

package/ratings/Rating.svelte

@@ -11,12 +11,12 @@ let grayStars = total - roundedRating;
 <div class={divClass}>
 	{#each Array(roundedRating) as _, star}
 		<slot name="ratingUp">
-			<Star variation="solid" class="text-yellow-300 dark:text-yellow-200" />
+			<Star variation="solid" size="24" class="text-yellow-300 dark:text-yellow-200" />
 		</slot>
 	{/each}
 	{#each Array(grayStars) as _, star}
 		<slot name="ratingDown">
-			<Star class="text-gray-300 dark:text-gray-500" />
+			<Star size="26" class="px-0.5 text-gray-300 dark:text-gray-500" />
 		</slot>
 	{/each}
 	{#if $$slots.text}

package/skeleton/CardPlaceholder.svelte

@@ -1,10 +1,15 @@
+<script>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 class="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded dark:bg-gray-700">
 		<svg
-			class="w-12 h-12 text-gray-200 dark:text-gray-600"
+			width={size}
+			height={size}
+			class="text-gray-200 dark:text-gray-600"
 			xmlns="http://www.w3.org/2000/svg"
 			aria-hidden="true"
 			fill="currentColor"

package/skeleton/CardPlaceholder.svelte.d.ts

@@ -1,19 +1,16 @@
-/** @typedef {typeof __propDef.props}  CardPlaceholderProps */
-/** @typedef {typeof __propDef.events}  CardPlaceholderEvents */
-/** @typedef {typeof __propDef.slots}  CardPlaceholderSlots */
-export default class CardPlaceholder extends SvelteComponentTyped<{}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type CardPlaceholderProps = typeof __propDef.props;
-export type CardPlaceholderEvents = typeof __propDef.events;
-export type CardPlaceholderSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        size?: string;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type CardPlaceholderProps = typeof __propDef.props;
+export declare type CardPlaceholderEvents = typeof __propDef.events;
+export declare type CardPlaceholderSlots = typeof __propDef.slots;
+export default class CardPlaceholder extends SvelteComponentTyped<CardPlaceholderProps, CardPlaceholderEvents, CardPlaceholderSlots> {
+}
 export {};

package/skeleton/ImagePlaceholder.svelte

@@ -1,3 +1,6 @@
+<script>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"
@@ -6,7 +9,9 @@
 		class="flex justify-center items-center w-full h-48 bg-gray-300 rounded sm:w-96 dark:bg-gray-700"
 	>
 		<svg
-			class="w-12 h-12 text-gray-200"
+			width={size}
+			height={size}
+			class="text-gray-200"
 			xmlns="http://www.w3.org/2000/svg"
 			aria-hidden="true"
 			fill="currentColor"

package/skeleton/ImagePlaceholder.svelte.d.ts

@@ -1,19 +1,16 @@
-/** @typedef {typeof __propDef.props}  ImagePlaceholderProps */
-/** @typedef {typeof __propDef.events}  ImagePlaceholderEvents */
-/** @typedef {typeof __propDef.slots}  ImagePlaceholderSlots */
-export default class ImagePlaceholder extends SvelteComponentTyped<{}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ImagePlaceholderProps = typeof __propDef.props;
-export type ImagePlaceholderEvents = typeof __propDef.events;
-export type ImagePlaceholderSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        size?: string;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type ImagePlaceholderProps = typeof __propDef.props;
+export declare type ImagePlaceholderEvents = typeof __propDef.events;
+export declare type ImagePlaceholderSlots = typeof __propDef.slots;
+export default class ImagePlaceholder extends SvelteComponentTyped<ImagePlaceholderProps, ImagePlaceholderEvents, ImagePlaceholderSlots> {
+}
 export {};

package/skeleton/VideoPlaceholder.svelte

@@ -1,9 +1,14 @@
+<script>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"
 >
 	<svg
-		class="w-12 h-12 text-gray-200 dark:text-gray-600"
+		width={size}
+		height={size}
+		class="text-gray-200 dark:text-gray-600"
 		xmlns="http://www.w3.org/2000/svg"
 		aria-hidden="true"
 		fill="currentColor"

package/skeleton/VideoPlaceholder.svelte.d.ts

@@ -1,19 +1,16 @@
-/** @typedef {typeof __propDef.props}  VideoPlaceholderProps */
-/** @typedef {typeof __propDef.events}  VideoPlaceholderEvents */
-/** @typedef {typeof __propDef.slots}  VideoPlaceholderSlots */
-export default class VideoPlaceholder extends SvelteComponentTyped<{}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type VideoPlaceholderProps = typeof __propDef.props;
-export type VideoPlaceholderEvents = typeof __propDef.events;
-export type VideoPlaceholderSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        size?: string;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type VideoPlaceholderProps = typeof __propDef.props;
+export declare type VideoPlaceholderEvents = typeof __propDef.events;
+export declare type VideoPlaceholderSlots = typeof __propDef.slots;
+export default class VideoPlaceholder extends SvelteComponentTyped<VideoPlaceholderProps, VideoPlaceholderEvents, VideoPlaceholderSlots> {
+}
 export {};