flowbite-svelte 0.19.1 → 0.19.4

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 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.4](https://github.com/themesberg/flowbite-svelte/compare/v0.19.3...v0.19.4) (2022-06-25)
+
+
+### Bug Fixes
+
+* change from const to let navDivClass ([ffdcd9f](https://github.com/themesberg/flowbite-svelte/commit/ffdcd9fa2cde37a13103e493905d6076f61e5df6))
+* update navbar index page by adding flex items-center md:order-2 ([efc0209](https://github.com/themesberg/flowbite-svelte/commit/efc0209c87d063157f225476f0b8e5beb04ed36f))
+
+### [0.19.3](https://github.com/themesberg/flowbite-svelte/compare/v0.19.2...v0.19.3) (2022-06-24)
+
+
+### Bug Fixes
+
+* navbar page ([d0a704e](https://github.com/themesberg/flowbite-svelte/commit/d0a704e658d86090e38a3d0feadaf89cccb401a6))
+* update card page ([0fd6e0e](https://github.com/themesberg/flowbite-svelte/commit/0fd6e0eeb8a42e6f51f0ac8465803ea40100bd55))
+* update navbar ([7cdfa05](https://github.com/themesberg/flowbite-svelte/commit/7cdfa0525499faca856632278f5cb6b6c4213e75))
+
+### [0.19.2](https://github.com/themesberg/flowbite-svelte/compare/v0.19.1...v0.19.2) (2022-06-24)
+
+
+### Bug Fixes
+
+* update Button outline ([6f419c3](https://github.com/themesberg/flowbite-svelte/commit/6f419c38a365fbfb3a466ec81eedc6fcd5fa9a75))
+
 ### [0.19.1](https://github.com/themesberg/flowbite-svelte/compare/v0.19.0...v0.19.1) (2022-06-24)
 
 ## [0.19.0](https://github.com/themesberg/flowbite-svelte/compare/v0.18.6...v0.19.0) (2022-06-24)

package/buttons/Button.svelte

@@ -51,12 +51,12 @@ const coloredShadowClasses = {
     purple: 'text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 shadow-lg shadow-purple-500/50 dark:shadow-lg dark:shadow-purple-800/80'
 };
 const outlineClasses = {
-    default: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300',
-    dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:outline-none focus:ring-gray-300',
-    green: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 ',
-    red: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300',
-    yellow: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:outline-none focus:ring-yellow-300',
-    purple: 'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-purple-300',
+    default: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800',
+    dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800',
+    green: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800',
+    red: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300  dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900',
+    yellow: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:outline-none focus:ring-yellow-300 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900',
+    purple: 'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-purple-300 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900',
     white: 'text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700'
 };
 const sizeClasses = {

package/navbar/NavBrand.svelte

@@ -1,6 +1,7 @@
-<script>export let href = '';
+<script>import classNames from 'classnames';
+export let href = '';
 </script>
 
-<a {href} class="flex items-center {$$props.class || ''}">
+<a {href} {...$$restProps} class={classNames('flex items-center', $$props.class)}>
 	<slot />
 </a>

package/navbar/NavHamburger.svelte

@@ -1,8 +1,11 @@
-<script>import { Menu } from 'svelte-heros';
+<script>import classNames from 'classnames';
+import { Menu } from 'svelte-heros';
+export let btnClass = 'ml-3 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 md:hidden';
 </script>
 
 <button
-	class="ml-3 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 md:hidden"
+	{...$$restProps}
+	class={classNames(btnClass, $$props.class)}
 	data-testid="navbar-toggle"
 	on:click
 >

package/navbar/NavHamburger.svelte.d.ts

@@ -1,6 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: any;
+        btnClass?: string;
+    };
     events: {
         click: MouseEvent;
     } & {

package/navbar/NavLi.svelte

@@ -1,4 +1,5 @@
-<script>export let href = '';
+<script>import classNames from 'classnames';
+export let href = '';
 export let active = false;
 export let activeClass = 'block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white';
 export let nonActiveClass = 'block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700';
@@ -6,7 +7,7 @@ $: aClass = active ? activeClass : nonActiveClass;
 </script>
 
 <li>
-	<a {href} class="{aClass} {$$props.class || ''}">
+	<a {href} {...$$restProps} class={classNames(aClass, $$props.class)}>
 		<slot />
 	</a>
 </li>

package/navbar/NavUl.svelte

@@ -1,6 +1,7 @@
-<script>import { slide } from 'svelte/transition';
+<script>import classNames from 'classnames';
+import { slide } from 'svelte/transition';
 import { quintOut } from 'svelte/easing';
-export let divClass = ' justify-between items-center w-full md:flex md:w-auto md:order-1';
+export let divClass = 'w-full md:block md:w-auto';
 export let ulClass = 'flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
 export let hidden = true;
 // $: hidden;
@@ -8,17 +9,18 @@ export let hidden = true;
 
 {#if !hidden}
 	<div
-		class={divClass}
+		{...$$restProps}
+		class={classNames(divClass, $$props.class)}
 		id="mobile-menu"
 		transition:slide={{ delay: 250, duration: 500, easing: quintOut }}
 	>
-		<ul class="{ulClass} {$$props.class || ''}">
+		<ul class={classNames(ulClass, $$props.class)}>
 			<slot />
 		</ul>
 	</div>
 {:else}
-	<div class={divClass} {hidden} id="mobile-menu">
-		<ul class="{ulClass} {$$props.class || ''}">
+	<div {...$$restProps} class={classNames(divClass, $$props.class)} {hidden} id="mobile-menu">
+		<ul class={classNames(ulClass, $$props.class)}>
 			<slot />
 		</ul>
 	</div>

package/navbar/Navbar.svelte

@@ -1,13 +1,31 @@
-<script>export let navClass = 'bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-800';
-const navDivClass = 'container flex flex-wrap justify-between items-center mx-auto';
+<script>import classNames from 'classnames';
+export let navClass = 'bg-white border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-gray-800';
+export let navDivClass = 'mx-auto flex flex-wrap justify-between items-center ';
+export let fluid = true;
+export let rounded = false;
+export let border = false;
 let hidden = true;
 let toggle = () => {
     hidden = !hidden;
 };
 </script>
 
-<nav class="{navClass} {$$props.class || ''}">
-	<div class={navDivClass}>
+<nav
+	{...$$restProps}
+	class={classNames(
+		navClass,
+		{
+			rounded: rounded,
+			border: border
+		},
+		$$props.class
+	)}
+>
+	<div
+		class={classNames(navDivClass, {
+			container: fluid
+		})}
+	>
 		<slot {hidden} {toggle} />
 	</div>
 </nav>

package/navbar/Navbar.svelte.d.ts

@@ -3,6 +3,10 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         navClass?: string;
+        navDivClass?: string;
+        fluid?: boolean;
+        rounded?: boolean;
+        border?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

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