flowbite-svelte 0.19.5 → 0.19.8

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 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.8](https://github.com/themesberg/flowbite-svelte/compare/v0.19.7...v0.19.8) (2022-06-27)
+
+### [0.19.7](https://github.com/themesberg/flowbite-svelte/compare/v0.19.6...v0.19.7) (2022-06-27)
+
+### [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/alerts/Alert.svelte

@@ -21,70 +21,51 @@ if (rounded)
     divClass += 'rounded-lg ';
 if (borderAccent)
     divClass += 'border-t-4 ';
-if (color === 'gray') {
-    divClass += 'bg-gray-100 dark:bg-gray-200 ';
-    if (borderAccent)
-        divClass += 'border-gray-500 dark:bg-gray-200 ';
-    contentClass = 'text-gray-700 dark:text-gray-800';
-    buttonClass +=
-        'bg-gray-100 text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300';
-}
-else if (color === 'red') {
-    divClass += 'bg-red-100 dark:bg-red-200';
-    if (borderAccent)
-        divClass += 'border-red-500 dark:bg-red-200 ';
-    contentClass = 'text-red-700 dark:text-red-800';
-    buttonClass +=
-        'bg-red-100 text-red-500 focus:ring-red-400 hover:bg-red-200 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300';
-}
-else if (color === 'yellow') {
-    divClass += 'bg-yellow-100 dark:bg-yellow-200 ';
-    if (borderAccent)
-        divClass += 'border-yellow-500 dark:bg-tellow-200 ';
-    contentClass = 'text-yellow-700 dark:text-yellow-800';
-    buttonClass +=
-        'bg-yellow-100 text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300';
-}
-else if (color === 'green') {
-    divClass += 'bg-green-100 dark:bg-green-200 ';
-    if (borderAccent)
-        divClass += 'border-green-500 dark:bg-green-200 ';
-    contentClass = 'text-green-700 dark:text-green-800';
-    buttonClass +=
-        'bg-green-100 text-green-500 focus:ring-green-400 hover:bg-green-200 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300';
-}
-else if (color === 'indigo') {
-    divClass += 'bg-indigo-100 dark:bg-indigo-200 ';
-    if (borderAccent)
-        divClass += 'border-indigo-500 dark:bg-indigo-200 ';
-    contentClass = 'text-indigo-700 dark:text-indigo-800';
-    buttonClass +=
-        'bg-indigo-100 text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:bg-indigo-200 dark:text-indigo-600 dark:hover:bg-indigo-300';
-}
-else if (color === 'purple') {
-    divClass += 'bg-purple-100 dark:bg-purple-200 ';
-    if (borderAccent)
-        divClass += 'border-purple-500 dark:bg-purple-200 ';
-    contentClass = 'text-purple-700 dark:text-purple-800';
-    buttonClass +=
-        'bg-purple-100 text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:bg-purple-200 dark:text-purple-600 dark:hover:bg-purple-300';
-}
-else if (color === 'pink') {
-    divClass += 'bg-pink-100 dark:bg-pink-200 ';
-    if (borderAccent)
-        divClass += 'border-pink-500 dark:bg-pink-200 ';
-    contentClass = 'text-pink-700 dark:text-pink-800';
-    buttonClass +=
-        'bg-pink-100 text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:bg-pink-200 dark:text-pink-600 dark:hover:bg-pink-300';
-}
-else {
-    divClass += 'bg-blue-100 dark:bg-blue-200 ';
-    if (borderAccent)
-        divClass += 'border-blue-500 dark:bg-blue-200 ';
-    contentClass = 'text-blue-700 dark:text-blue-800';
-    buttonClass +=
-        'bg-blue-100 text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300';
-}
+const bgClasses = {
+    gray: 'bg-gray-100 dark:bg-gray-200 ',
+    red: 'bg-red-100 dark:bg-red-200',
+    yellow: 'bg-yellow-100 dark:bg-yellow-200 ',
+    green: 'bg-green-100 dark:bg-green-200 ',
+    indigo: 'bg-indigo-100 dark:bg-indigo-200 ',
+    purple: 'bg-purple-100 dark:bg-purple-200 ',
+    pink: 'bg-pink-100 dark:bg-pink-200 ',
+    blue: 'bg-blue-100 dark:bg-blue-200 '
+};
+const borderAccentClasses = {
+    gray: 'border-gray-500 dark:bg-gray-200 ',
+    red: 'border-red-500 dark:bg-red-200 ',
+    yellow: 'border-yellow-500 dark:bg-tellow-200 ',
+    green: 'border-green-500 dark:bg-green-200 ',
+    indigo: 'border-indigo-500 dark:bg-indigo-200 ',
+    purple: 'border-purple-500 dark:bg-purple-200 ',
+    pink: 'border-pink-500 dark:bg-pink-200 ',
+    blue: 'border-blue-500 dark:bg-blue-200 '
+};
+const contentClasses = {
+    gray: 'text-gray-700 dark:text-gray-800',
+    red: 'text-red-700 dark:text-red-800',
+    yellow: 'text-yellow-700 dark:text-yellow-800',
+    green: 'text-green-700 dark:text-green-800',
+    indigo: 'text-indigo-700 dark:text-indigo-800',
+    purple: 'text-purple-700 dark:text-purple-800',
+    pink: 'text-pink-700 dark:text-pink-800',
+    blue: 'text-blue-700 dark:text-blue-800'
+};
+const buttonClasses = {
+    gray: 'bg-gray-100 text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300',
+    red: 'bg-red-100 text-red-500 focus:ring-red-400 hover:bg-red-200 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300',
+    yellow: 'bg-yellow-100 text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300',
+    green: 'bg-green-100 text-green-500 focus:ring-green-400 hover:bg-green-200 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300',
+    indigo: 'bg-indigo-100 text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:bg-indigo-200 dark:text-indigo-600 dark:hover:bg-indigo-300',
+    purple: 'bg-purple-100 text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:bg-purple-200 dark:text-purple-600 dark:hover:bg-purple-300',
+    pink: 'bg-pink-100 text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:bg-pink-200 dark:text-pink-600 dark:hover:bg-pink-300',
+    blue: 'bg-blue-100 text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300'
+};
+divClass += bgClasses[color] ?? bgClasses.blue;
+if (borderAccent)
+    divClass += borderAccentClasses[color] ?? borderAccentClasses.blue;
+contentClass = contentClasses[color] ?? contentClasses.blue;
+buttonClass += buttonClasses[color] ?? buttonClasses.blue;
 </script>
 
 <div id={$$props.id} class:hidden class={classNames(divClass, $$props.class)} role="alert">
@@ -120,6 +101,5 @@ else {
 			</button>
 		{/if}
 	</div>
-
 	<slot name="extra" />
 </div>

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.8",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {