flowbite-svelte 0.15.38 → 0.15.39

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 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.15.39](https://github.com/themesberg/flowbite-svelte/compare/v0.15.38...v0.15.39) (2022-05-22)
+
+
+### Features
+
+* add new Navbar with dropdown demo ([d48b42f](https://github.com/themesberg/flowbite-svelte/commit/d48b42f15da7155e396702011fe70e7cb5898eb5))
+* change Navbar component structure ([81b83fb](https://github.com/themesberg/flowbite-svelte/commit/81b83fb6805412b85ecf23186ccf50b4c737bdd4))
+* favicon and logo update ([6c317a9](https://github.com/themesberg/flowbite-svelte/commit/6c317a967d5a0b8acdf19e7d8a74fe059407c34f))
+* update Navbar components ([66170da](https://github.com/themesberg/flowbite-svelte/commit/66170dab34128dbe510131f2cd75a9123e06bdfe))
+
+
+### Bug Fixes
+
+* add engines node version >=16.0.0 to package.json ([5f859be](https://github.com/themesberg/flowbite-svelte/commit/5f859be127ee5d541a9a49535f71eedbc5ea5137))
+* restucturing Navbar components ([3f4fa07](https://github.com/themesberg/flowbite-svelte/commit/3f4fa076fe3cb5c0ca2a0a3e3b88e47aba7078af))
+* update Navbar components ([57a7205](https://github.com/themesberg/flowbite-svelte/commit/57a7205e3c5db1dcec4f677878b2001fde749c67))
+
 ### [0.15.38](https://github.com/themesberg/flowbite-svelte/compare/v0.15.37...v0.15.38) (2022-05-19)
 
 

package/README.md

@@ -141,7 +141,7 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
   </tr>
   <tr>
     <td width="33.3333%">Modals</td>
-    <td width="33.3333%">Navbars</td>
+    <td width="33.3333%">Navbar</td>
      <td width="33.3333%">Pagination</td>
   </tr>
   <tr>
@@ -151,7 +151,7 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
         </a>
     </td>
      <td width="33.3333%">
-        <a href="https://flowbite-svelte.com/navbars/">
+        <a href="https://flowbite-svelte.com/navbar/">
             <img alt="Tailwind CSS Navbar" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg">
         </a>
     </td>

package/index.d.ts

@@ -52,6 +52,10 @@ export { default as ModalButton } from './modals/ModalButton.svelte';
 export { default as SignInModal } from './modals/SignInModal.svelte';
 export { default as SmallModal } from './modals/SmallModal.svelte';
 export { default as Navbar } from './navbar/Navbar.svelte';
+export { default as NavBrand } from './navbar/NavBrand.svelte';
+export { default as NavHamburger } from './navbar/NavHamburger.svelte';
+export { default as NavLi } from './navbar/NavLi.svelte';
+export { default as NavUl } from './navbar/NavUl.svelte';
 export { default as DropdownNavbar } from './navbar/DropdownNavbar.svelte';
 export { default as Pagination } from './paginations/Pagination.svelte';
 export { default as Previous } from './paginations/Previous.svelte';

package/index.js

@@ -68,6 +68,10 @@ export { default as SignInModal } from './modals/SignInModal.svelte';
 export { default as SmallModal } from './modals/SmallModal.svelte';
 // Navbar
 export { default as Navbar } from './navbar/Navbar.svelte';
+export { default as NavBrand } from './navbar/NavBrand.svelte';
+export { default as NavHamburger } from './navbar/NavHamburger.svelte';
+export { default as NavLi } from './navbar/NavLi.svelte';
+export { default as NavUl } from './navbar/NavUl.svelte';
 export { default as DropdownNavbar } from './navbar/DropdownNavbar.svelte';
 // Pagination
 export { default as Pagination } from './paginations/Pagination.svelte';

package/navbar/DropdownNavbar.svelte

@@ -26,36 +26,71 @@ export let liButtonClass = `flex justify-between items-center py-2 pr-4 pl-3 w-f
 </script>
 
 <nav class={navClass}>
-  <div class={navDivClass}>
-    <a href="/" class="flex">
-      <img src={logo} {alt} />
-      <span class={spanClass}>{sitename}</span>
-    </a>
-    <button on:click={handleClickbtn} type="button" class={buttonClass} aria-controls="mobile-menu-2" aria-expanded="false">
-      <span class="sr-only">Open main menu</span>
-      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /></svg>
-      <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
-    </button>
-    <div class="w-full md:block md:w-auto" class:hidden={barHidden} id="mobile-menu">
-      <ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
-        {#each menus as { name, href, rel, child }}
-          {#if child}
-            <NavDropdown {liButtonClass} {dropdownDiv} {name} {child} {rel} {dropdownLinkClassWithChild} />
-          {:else}
-            <li>
-              <a class:active={pathname === href} {href} {rel} class={dropdownLinkClassWithoutChild}>{name}</a>
-            </li>
-          {/if}
-        {/each}
-      </ul>
-      {#if user}
-        <slot name="user" />
-      {/if}
-    </div>
-  </div>
+	<div class={navDivClass}>
+		<a href="/" class="flex">
+			<img src={logo} {alt} />
+			<span class={spanClass}>{sitename}</span>
+		</a>
+		<button
+			on:click={handleClickbtn}
+			type="button"
+			class={buttonClass}
+			aria-controls="mobile-menu-2"
+			aria-expanded="false"
+		>
+			<span class="sr-only">Open main menu</span>
+			<svg
+				class="w-6 h-6"
+				fill="currentColor"
+				viewBox="0 0 20 20"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					fill-rule="evenodd"
+					d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+					clip-rule="evenodd"
+				/></svg
+			>
+			<svg
+				class="hidden w-6 h-6"
+				fill="currentColor"
+				viewBox="0 0 20 20"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					fill-rule="evenodd"
+					d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+					clip-rule="evenodd"
+				/></svg
+			>
+		</button>
+		<div class="w-full md:block md:w-auto" class:hidden={barHidden} id="mobile-menu">
+			<ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
+				{#each menus as { name, href, rel, child }}
+					{#if child}
+						<NavDropdown
+							{liButtonClass}
+							{dropdownDiv}
+							{name}
+							{child}
+							{rel}
+							{dropdownLinkClassWithChild}
+						/>
+					{:else}
+						<li>
+							<a class:active={pathname === href} {href} {rel} class={dropdownLinkClassWithoutChild}
+								>{name}</a
+							>
+						</li>
+					{/if}
+				{/each}
+			</ul>
+			{#if user}
+				<slot name="user" />
+			{/if}
+		</div>
+	</div>
 </nav>
 
 <style>
-  #mobile-menu .active {
-    color: #fab534;
-  }</style>
+	#mobile-menu .active {
+		color: #fab534;
+	}</style>

package/navbar/NavBrand.svelte

@@ -0,0 +1,6 @@
+<script>export let href = '';
+</script>
+
+<a {href} class="flex items-center {$$props.class || ''}">
+	<slot />
+</a>

package/navbar/NavBrand.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        href?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type NavBrandProps = typeof __propDef.props;
+export declare type NavBrandEvents = typeof __propDef.events;
+export declare type NavBrandSlots = typeof __propDef.slots;
+export default class NavBrand extends SvelteComponentTyped<NavBrandProps, NavBrandEvents, NavBrandSlots> {
+}
+export {};

package/navbar/NavHamburger.svelte

@@ -0,0 +1,11 @@
+<script>import { MenuOutline } from 'svelte-heros';
+</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"
+	data-testid="navbar-toggle"
+	on:click
+>
+	<span class="sr-only">Open main menu</span>
+	<MenuOutline class="h-6 w-6 shrink-0" />
+</button>

package/navbar/NavHamburger.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type NavHamburgerProps = typeof __propDef.props;
+export declare type NavHamburgerEvents = typeof __propDef.events;
+export declare type NavHamburgerSlots = typeof __propDef.slots;
+export default class NavHamburger extends SvelteComponentTyped<NavHamburgerProps, NavHamburgerEvents, NavHamburgerSlots> {
+}
+export {};

package/navbar/NavLi.svelte

@@ -0,0 +1,12 @@
+<script>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';
+let aClass = active ? activeClass : nonActiveClass;
+</script>
+
+<li>
+	<a {href} class="{aClass} {$$props.class || ''}">
+		<slot />
+	</a>
+</li>

package/navbar/NavLi.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        href?: string;
+        active?: boolean;
+        activeClass?: string;
+        nonActiveClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type NavLiProps = typeof __propDef.props;
+export declare type NavLiEvents = typeof __propDef.events;
+export declare type NavLiSlots = typeof __propDef.slots;
+export default class NavLi extends SvelteComponentTyped<NavLiProps, NavLiEvents, NavLiSlots> {
+}
+export {};

package/navbar/NavUl.svelte

@@ -0,0 +1,14 @@
+<script>import { slide } from 'svelte/transition';
+import { quintOut } from 'svelte/easing';
+export let divClass = 'hidden justify-between items-center w-full md:flex md:w-auto md:order-1';
+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;
+// $: console.log('hidden: ', hidden);
+</script>
+
+<div class={divClass} class:hidden id="mobile-menu">
+	<ul class="{ulClass} {$$props.class || ''}">
+		<slot />
+	</ul>
+</div>

package/navbar/NavUl.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        divClass?: string;
+        ulClass?: string;
+        hidden?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type NavUlProps = typeof __propDef.props;
+export declare type NavUlEvents = typeof __propDef.events;
+export declare type NavUlSlots = typeof __propDef.slots;
+export default class NavUl extends SvelteComponentTyped<NavUlProps, NavUlEvents, NavUlSlots> {
+}
+export {};

package/navbar/Navbar.svelte

@@ -1,79 +1,14 @@
-<script>import { onMount } from 'svelte';
-export let user = '';
-let pathname = '';
-onMount(() => {
-    pathname = window.location.pathname;
-    // console.log('pathname', pathname);
-});
-export let siteName = 'Svelte Flow';
-export let logo = '/images/flowbite-svelte-logo-30.png';
-export let alt = 'Svelte Flow';
-export let textsize = 'text-sm';
-let barHidden = true;
-const handleClickbtn = () => {
-    barHidden = !barHidden;
-};
-export let menus;
-export let navClass = 'px-2 bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700';
+<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';
-export let spanClass = 'self-center text-lg font-semibold text-gray-900 whitespace-nowrap dark:text-white';
-export let buttonClass = 'inline-flex justify-center items-center ml-3 text-gray-400 rounded-lg md:hidden hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-500';
-export let liLinkClass = `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 dark:hover:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent ${textsize}`;
+let hidden = true;
+let toggle = () => {
+    console.log('Toggled');
+    hidden = !hidden;
+};
 </script>
 
 <nav class={navClass}>
 	<div class={navDivClass}>
-		<a href="/" class="flex">
-			<img src={logo} {alt} />
-			<span class={spanClass}>{siteName}</span>
-		</a>
-		<button
-			on:click={handleClickbtn}
-			type="button"
-			class={buttonClass}
-			aria-controls="mobile-menu-2"
-			aria-expanded="false"
-		>
-			<span class="sr-only">Open main menu</span>
-			<svg
-				class="w-6 h-6"
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-					clip-rule="evenodd"
-				/></svg
-			>
-			<svg
-				class="hidden w-6 h-6"
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-					clip-rule="evenodd"
-				/></svg
-			>
-		</button>
-		<div class:hidden={barHidden} class="hidden w-full md:block md:w-auto" id="mobile-menu">
-			<ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
-				{#each menus as { name, href, rel }}
-					<li>
-						<a class:active={pathname === href} {href} {rel} class={liLinkClass}>{name}</a>
-					</li>
-				{/each}
-			</ul>
-			{#if user}
-				<slot name="user" />
-			{/if}
-		</div>
+		<slot {hidden} {toggle} />
 	</div>
 </nav>
-
-<style>
-	#mobile-menu .active {
-		color: #fab534;
-	}</style>

package/navbar/Navbar.svelte.d.ts

@@ -1,23 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
-import type { LinkType } from '../types';
 declare const __propDef: {
     props: {
-        user?: string;
-        siteName?: string;
-        logo?: string;
-        alt?: string;
-        textsize?: string;
-        menus: LinkType[];
         navClass?: string;
-        spanClass?: string;
-        buttonClass?: string;
-        liLinkClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        user: {};
+        default: {
+            hidden: boolean;
+            toggle: () => void;
+        };
     };
 };
 export declare type NavbarProps = typeof __propDef.props;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.15.38",
+  "version": "0.15.39",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -79,6 +79,10 @@
     "flowbite": "^1.4.2",
     "svelte-heros": "^2.0.0"
   },
+  "engines": {
+    "npm": ">=7.0.0",
+    "node": ">=16.0.0"
+  },
   "exports": {
     "./package.json": "./package.json",
     "./.DS_Store": "./.DS_Store",
@@ -142,7 +146,11 @@
     "./modals/SmallModal.svelte": "./modals/SmallModal.svelte",
     "./modals/modalStores": "./modals/modalStores.js",
     "./navbar/DropdownNavbar.svelte": "./navbar/DropdownNavbar.svelte",
+    "./navbar/NavBrand.svelte": "./navbar/NavBrand.svelte",
     "./navbar/NavDropdown.svelte": "./navbar/NavDropdown.svelte",
+    "./navbar/NavHamburger.svelte": "./navbar/NavHamburger.svelte",
+    "./navbar/NavLi.svelte": "./navbar/NavLi.svelte",
+    "./navbar/NavUl.svelte": "./navbar/NavUl.svelte",
     "./navbar/Navbar.svelte": "./navbar/Navbar.svelte",
     "./paginations/Next.svelte": "./paginations/Next.svelte",
     "./paginations/Pagination.svelte": "./paginations/Pagination.svelte",