flowbite-svelte 0.19.2 → 0.19.3

package/CHANGELOG.md

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

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';
+const navDivClass = 'mx-auto flex flex-wrap justify-between items-center ';
+export let fluid = false;
+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,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         navClass?: 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.2",
+  "version": "0.19.3",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {