flowbite-svelte 0.22.26 → 0.22.27

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 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)
 
 

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.26",
+  "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 {};