flowbite-svelte 0.19.5 → 0.19.6

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.6](https://github.com/themesberg/flowbite-svelte/compare/v0.19.5...v0.19.6) (2022-06-27)
+
 ### [0.19.5](https://github.com/themesberg/flowbite-svelte/compare/v0.19.4...v0.19.5) (2022-06-27)
 
 ### [0.19.4](https://github.com/themesberg/flowbite-svelte/compare/v0.19.3...v0.19.4) (2022-06-25)

package/badges/Badge.svelte

@@ -3,30 +3,17 @@ export let textSize = 'text-xs';
 export let name = 'Read more';
 export let color = 'blue';
 let badgeClass = 'font-semibold mr-2 px-2.5 py-0.5 rounded ';
-if (color === 'gray') {
-    badgeClass += `bg-gray-100 text-gray-800 ${textSize} dark:bg-gray-700 dark:text-gray-300`;
-}
-else if (color === 'red') {
-    badgeClass += `bg-red-100 text-red-800 ${textSize} dark:bg-red-200 dark:text-red-900`;
-}
-else if (color === 'green') {
-    badgeClass += `bg-green-100 text-green-800 ${textSize} dark:bg-green-200 dark:text-green-900`;
-}
-else if (color === 'yellow') {
-    badgeClass += `bg-yellow-100 text-yellow-800 ${textSize} dark:bg-yellow-200 dark:text-yellow-900`;
-}
-else if (color === 'indigo') {
-    badgeClass += `bg-indigo-100 text-indigo-800 ${textSize} dark:bg-indigo-200 dark:text-indigo-900`;
-}
-else if (color === 'purple') {
-    badgeClass += `bg-purple-100 text-purple-800 ${textSize} dark:bg-purple-200 dark:text-purple-900`;
-}
-else if (color === 'pink') {
-    badgeClass += `bg-pink-100 text-pink-800 ${textSize} dark:bg-pink-200 dark:text-pink-900`;
-}
-else {
-    badgeClass += `bg-blue-100 text-blue-800 ${textSize} dark:bg-blue-200 dark:text-blue-800`;
-}
+const colors = {
+    gray: `bg-gray-100 text-gray-800 ${textSize} dark:bg-gray-700 dark:text-gray-300`,
+    red: `bg-red-100 text-red-800 ${textSize} dark:bg-red-200 dark:text-red-900`,
+    green: `bg-green-100 text-green-800 ${textSize} dark:bg-green-200 dark:text-green-900`,
+    yellow: `bg-yellow-100 text-yellow-800 ${textSize} dark:bg-yellow-200 dark:text-yellow-900`,
+    indigo: `bg-indigo-100 text-indigo-800 ${textSize} dark:bg-indigo-200 dark:text-indigo-900`,
+    purple: `bg-purple-100 text-purple-800 ${textSize} dark:bg-purple-200 dark:text-purple-900`,
+    pink: `bg-pink-100 text-pink-800 ${textSize} dark:bg-pink-200 dark:text-pink-900`,
+    blue: `bg-blue-100 text-blue-800 ${textSize} dark:bg-blue-200 dark:text-blue-800`
+};
+badgeClass += colors[color] ?? colors.blue;
 </script>
 
 <span class={classNames(badgeClass, $$props.class)} {...$$restProps}>{name}</span>

package/badges/BadgeIcon.svelte

@@ -1,32 +1,19 @@
 <script>import classNames from 'classnames';
 export let textSize = 'text-xs';
-export let name = '';
+export let name = 'Read more';
 export let color = 'blue';
 let badgeClass = 'font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 ';
-if (color === 'gray') {
-    badgeClass += `bg-gray-100 text-gray-800 ${textSize} dark:bg-gray-700 dark:text-gray-300`;
-}
-else if (color === 'red') {
-    badgeClass += `bg-red-100 text-red-800 ${textSize} dark:bg-red-700 dark:text-red-300`;
-}
-else if (color === 'green') {
-    badgeClass += `bg-green-100 text-green-800 ${textSize} dark:bg-green-700 dark:text-green-300`;
-}
-else if (color === 'yellow') {
-    badgeClass += `bg-yellow-100 text-yellow-800 ${textSize} dark:bg-yellow-700 dark:text-yellow-300`;
-}
-else if (color === 'indigo') {
-    badgeClass += `bg-indigo-100 text-indigo-800 ${textSize} dark:bg-indigo-700 dark:text-indigo-300`;
-}
-else if (color === 'purple') {
-    badgeClass += `bg-purple-100 text-purple-800 ${textSize} dark:bg-purple-700 dark:text-purple-300`;
-}
-else if (color === 'pink') {
-    badgeClass += `bg-pink-100 text-pink-800 ${textSize} dark:bg-pink-700 dark:text-pink-300`;
-}
-else {
-    badgeClass += `bg-blue-100 text-blue-800 ${textSize} dark:bg-blue-700 dark:text-blue-300`;
-}
+const colors = {
+    gray: `bg-gray-100 text-gray-800 ${textSize} dark:bg-gray-700 dark:text-gray-300`,
+    red: `bg-red-100 text-red-800 ${textSize} dark:bg-red-700 dark:text-red-300`,
+    green: `bg-green-100 text-green-800 ${textSize} dark:bg-green-700 dark:text-green-300`,
+    yellow: `bg-yellow-100 text-yellow-800 ${textSize} dark:bg-yellow-700 dark:text-yellow-300`,
+    indigo: `bg-indigo-100 text-indigo-800 ${textSize} dark:bg-indigo-700 dark:text-indigo-300`,
+    purple: `bg-purple-100 text-purple-800 ${textSize} dark:bg-purple-700 dark:text-purple-300`,
+    pink: `bg-pink-100 text-pink-800 ${textSize} dark:bg-pink-700 dark:text-pink-300`,
+    blue: `bg-blue-100 text-blue-800 ${textSize} dark:bg-blue-700 dark:text-blue-300`
+};
+badgeClass += colors[color] ?? colors.blue;
 </script>
 
 <span class={classNames(badgeClass, $$props.class)} {...$$restProps}>

package/badges/BadgeLink.svelte

@@ -4,30 +4,17 @@ export let name = 'Read more';
 export let color = 'blue';
 export let href = '/';
 let badgeClass = 'font-semibold mr-2 px-2.5 py-0.5 rounded ';
-if (color === 'gray') {
-    badgeClass += `bg-gray-100 hover:bg-gray-200 text-gray-800 ${textSize} dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-300`;
-}
-else if (color === 'red') {
-    badgeClass += `bg-red-100 hover:bg-red-200 text-red-800 ${textSize} dark:bg-red-200 dark:text-red-800 dark:hover:bg-red-300`;
-}
-else if (color === 'green') {
-    badgeClass += `bg-green-100 hover:bg-green-200 text-green-800 ${textSize} dark:bg-green-200 dark:text-green-800 dark:hover:bg-green-300`;
-}
-else if (color === 'yellow') {
-    badgeClass += `bg-yellow-100 hover:bg-yellow-200 text-yellow-800 ${textSize} dark:bg-yellow-200 dark:text-yellow-800 dark:hover:bg-yellow-300`;
-}
-else if (color === 'indigo') {
-    badgeClass += `bg-indigo-100 hover:bg-indigo-200 text-indigo-800 ${textSize} dark:bg-indigo-200 dark:text-indigo-800 dark:hover:bg-indigo-300`;
-}
-else if (color === 'purple') {
-    badgeClass += `bg-purple-100 hover:bg-purple-200 text-purple-800 ${textSize} dark:bg-purple-200 dark:text-purple-800 dark:hover:bg-purple-300`;
-}
-else if (color === 'pink') {
-    badgeClass += `bg-pink-100 hover:bg-pink-200 text-pink-800 ${textSize} dark:bg-pink-200 dark:text-pink-800 dark:hover:bg-pink-300`;
-}
-else {
-    badgeClass += `bg-blue-100 hover:bg-blue-200 text-blue-800 ${textSize} dark:bg-blue-200 dark:text-blue-800 dark:hover:bg-blue-300`;
-}
+const colors = {
+    gray: `bg-gray-100 hover:bg-gray-200 text-gray-800 ${textSize} dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-300`,
+    red: `bg-red-100 hover:bg-red-200 text-red-800 ${textSize} dark:bg-red-200 dark:text-red-800 dark:hover:bg-red-300`,
+    green: `bg-green-100 hover:bg-green-200 text-green-800 ${textSize} dark:bg-green-200 dark:text-green-800 dark:hover:bg-green-300`,
+    yellow: `bg-yellow-100 hover:bg-yellow-200 text-yellow-800 ${textSize} dark:bg-yellow-200 dark:text-yellow-800 dark:hover:bg-yellow-300`,
+    indigo: `bg-indigo-100 hover:bg-indigo-200 text-indigo-800 ${textSize} dark:bg-indigo-200 dark:text-indigo-800 dark:hover:bg-indigo-300`,
+    purple: `bg-purple-100 hover:bg-purple-200 text-purple-800 ${textSize} dark:bg-purple-200 dark:text-purple-800 dark:hover:bg-purple-300`,
+    pink: `bg-pink-100 hover:bg-pink-200 text-pink-800 ${textSize} dark:bg-pink-200 dark:text-pink-800 dark:hover:bg-pink-300`,
+    blue: `bg-blue-100 hover:bg-blue-200 text-blue-800 ${textSize} dark:bg-blue-200 dark:text-blue-800 dark:hover:bg-blue-300`
+};
+badgeClass += colors[color] ?? colors.blue;
 </script>
 
 <a {href} class={classNames(badgeClass, $$props.class)} {...$$restProps}>{name}</a>

package/package.json

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