flowbite-svelte 0.9.1 → 0.9.4

package/navbar/DropdownNavbar.svelte

@@ -1,210 +1,125 @@
-<script>
-  import { page } from "$app/stores";
-
-  let hidden = true;
-  let block = false;
-  let activeDropdown = undefined;
-  const handleDropdown = (dropdown) => {
-    console.log("dropdown.id", dropdown.id);
+<script >import { page } from '$app/stores';
+let hidden = true;
+let block = false;
+let activeDropdown = undefined;
+const handleDropdown = (id) => {
     hidden = !hidden;
     block = !block;
-    activeDropdown = dropdown.id;
-    console.log("activeDropdown: ", activeDropdown);
-  };
-
-  let barHidden = true;
-  const handleClickbtn = () => {
+    activeDropdown = id;
+};
+let barHidden = true;
+const handleClickbtn = () => {
     barHidden = !barHidden;
-  };
-
-  export let sitename = "Svelte Flow";
-  export let logo = "/images/mkdir-logo.png";
-  export let alt;
-  export let textsize = "text-sm";
-  export let menus = [
-    {
-      id: 1,
-      name: "Home",
-      link: "/",
-      rel: undefined,
-    },
-    {
-      id: 2,
-      name: "Alerts compoenents",
-      link: "/alerts",
-      rel: undefined,
-    },
-    {
-      id: 3,
-      name: "Component 1",
-      link: "/",
-      rel: undefined,
-      child: [
-        {
-          id: 4,
-          name: "Modals compoenents",
-          link: "/modals",
-          rel: undefined,
-        },
-        {
-          id: 5,
-          name: "Navbar compoenents",
-          link: "/navbar",
-          rel: undefined,
-        },
-        {
-          id: 6,
-          name: "Tabs",
-          link: "/tabs",
-          rel: undefined,
-        },
-      ],
-    },
-    {
-      id: 7,
-      name: "Component 2",
-      link: "/",
-      rel: undefined,
-      child: [
-        {
-          id: 8,
-          name: "Modals",
-          link: "/modals",
-          rel: undefined,
-        },
-        {
-          id: 9,
-          name: "Navbar",
-          link: "/navbar",
-          rel: undefined,
-        },
-        {
-          id: 10,
-          name: "Tabs",
-          link: "/tabs",
-          rel: undefined,
-        },
-      ],
-    },
-    {
-      id: 11,
-      name: "List Group",
-      link: "/list-group",
-      rel: undefined,
-    },
-  ];
+};
+export let sitename = 'Svelte Flow';
+export let logo = '/images/mkdir-logo.png';
+export let alt;
+export let textsize = 'text-sm';
+export let menus;
 </script>
 
-<nav
-  class="px-2 bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700"
->
-  <div class="container flex flex-wrap justify-between items-center mx-auto">
-    <a href="/" class="flex">
-      <img src={logo} {alt} />
-      <span
-        class="self-center text-lg font-semibold text-gray-900 whitespace-nowrap dark:text-white"
-        >{sitename}</span
-      >
-    </a>
-    <button
-      on:click={handleClickbtn}
-      type="button"
-      class="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"
-      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 { id, name, link, rel, child }}
-          {#if child}
-            <li>
-              <button
-                on:click={handleDropdown({ id })}
-                class="flex justify-between items-center py-2 pr-4 pl-3 w-full {textsize} font-medium 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 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent"
-                >{name}
-                <svg
-                  class="ml-1 w-4 h-4"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg"
-                  ><path
-                    fill-rule="evenodd"
-                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                    clip-rule="evenodd"
-                  /></svg
-                ></button
-              >
-              {#if activeDropdown === id}
-                <!-- Dropdown menu -->
-                <div
-                  class:hidden
-                  class:block
-                  class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600"
-                  style="position: absolute; margin: 0px;"
-                >
-                  <ul class="py-1" aria-labelledby="dropdownLargeButton">
-                    {#each child as item}
-                      <li>
-                        <a
-                          href={item.link}
-                          {rel}
-                          class="block py-2 px-4 text-{textsize} text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white"
-                          >{item.name}</a
-                        >
-                      </li>
-                    {/each}
-                  </ul>
-                </div>
-              {/if}
-            </li>
-          {:else}
-            <li>
-              <a
-                class:active={$page.url.pathname === link}
-                href={link}
-                {rel}
-                class="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}"
-                >{name}</a
-              >
-            </li>
-          {/if}
-        {/each}
-      </ul>
-    </div>
-  </div>
+<nav class="px-2 bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+	<div class="container flex flex-wrap justify-between items-center mx-auto">
+		<a href="/" class="flex">
+			<img src={logo} {alt} />
+			<span
+				class="self-center text-lg font-semibold text-gray-900 whitespace-nowrap dark:text-white"
+				>{sitename}</span
+			>
+		</a>
+		<button
+			on:click={handleClickbtn}
+			type="button"
+			class="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"
+			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 { id, name, href, rel, child }}
+					{#if child}
+						<li>
+							<button
+								on:click={() => handleDropdown(id)}
+								class="flex justify-between items-center py-2 pr-4 pl-3 w-full {textsize} font-medium 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 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent"
+								>{name}
+								<svg
+									class="ml-1 w-4 h-4"
+									fill="currentColor"
+									viewBox="0 0 20 20"
+									xmlns="http://www.w3.org/2000/svg"
+									><path
+										fill-rule="evenodd"
+										d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+										clip-rule="evenodd"
+									/></svg
+								></button
+							>
+							{#if activeDropdown === id}
+								<!-- Dropdown menu -->
+								<div
+									class:hidden
+									class:block
+									class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600"
+									style="position: absolute; margin: 0px;"
+								>
+									<ul class="py-1" aria-labelledby="dropdownLargeButton">
+										{#each child as item}
+											<li>
+												<a
+													href={item.href}
+													{rel}
+													class="block py-2 px-4 text-{textsize} text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white"
+													>{item.name}</a
+												>
+											</li>
+										{/each}
+									</ul>
+								</div>
+							{/if}
+						</li>
+					{:else}
+						<li>
+							<a
+								class:active={$page.url.pathname === href}
+								{href}
+								{rel}
+								class="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}"
+								>{name}</a
+							>
+						</li>
+					{/if}
+				{/each}
+			</ul>
+		</div>
+	</div>
 </nav>
 
 <style>
-  #mobile-menu .active {
-    color: #fab534;
-  }</style>
+	#mobile-menu .active {
+		color: #fab534;
+	}</style>

package/navbar/DropdownNavbar.svelte.d.ts

@@ -1,65 +1,21 @@
-/** @typedef {typeof __propDef.props}  DropdownNavbarProps */
-/** @typedef {typeof __propDef.events}  DropdownNavbarEvents */
-/** @typedef {typeof __propDef.slots}  DropdownNavbarSlots */
-export default class DropdownNavbar extends SvelteComponentTyped<{
-    alt: any;
-    sitename?: string;
-    logo?: string;
-    textsize?: string;
-    menus?: ({
-        id: number;
-        name: string;
-        link: string;
-        rel: any;
-        child?: undefined;
-    } | {
-        id: number;
-        name: string;
-        link: string;
-        rel: any;
-        child: {
-            id: number;
-            name: string;
-            link: string;
-            rel: any;
-        }[];
-    })[];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type DropdownNavbarProps = typeof __propDef.props;
-export type DropdownNavbarEvents = typeof __propDef.events;
-export type DropdownNavbarSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { NavbarType } from '../types';
 declare const __propDef: {
     props: {
-        alt: any;
         sitename?: string;
         logo?: string;
+        alt: string;
         textsize?: string;
-        menus?: ({
-            id: number;
-            name: string;
-            link: string;
-            rel: any;
-            child?: undefined;
-        } | {
-            id: number;
-            name: string;
-            link: string;
-            rel: any;
-            child: {
-                id: number;
-                name: string;
-                link: string;
-                rel: any;
-            }[];
-        })[];
+        menus: NavbarType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type DropdownNavbarProps = typeof __propDef.props;
+export declare type DropdownNavbarEvents = typeof __propDef.events;
+export declare type DropdownNavbarSlots = typeof __propDef.slots;
+export default class DropdownNavbar extends SvelteComponentTyped<DropdownNavbarProps, DropdownNavbarEvents, DropdownNavbarSlots> {
+}
 export {};

package/navbar/Navbar.svelte

@@ -1,105 +1,74 @@
-<script>
-  import { page } from "$app/stores";
-
-  export let sitename = "Svelte Flow";
-  export let logo = "/images/mkdir-logo.png";
-  export let alt = "Svelte Flow";
-  export let textsize = "text-sm";
-  let barHidden = true;
-  const handleClickbtn = () => {
+<script >import { page } from '$app/stores';
+export let sitename = 'Svelte Flow';
+export let logo = '/images/mkdir-logo.png';
+export let alt = 'Svelte Flow';
+export let textsize = 'text-sm';
+let barHidden = true;
+const handleClickbtn = () => {
     barHidden = !barHidden;
-  };
-  export let menus = [
-    {
-      name: "Home",
-      link: "/",
-      rel: undefined,
-    },
-    {
-      name: "About",
-      link: "/about",
-      rel: undefined,
-    },
-    {
-      name: "Profile",
-      link: "/profile",
-      rel: undefined,
-    },
-    {
-      name: "GitHub",
-      link: "/#",
-      rel: undefined,
-    },
-  ];
+};
+export let menus;
 </script>
 
-<nav
-  class="px-2 bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700"
->
-  <div class="container flex flex-wrap justify-between items-center mx-auto">
-    <a href="/" class="flex">
-      <img src={logo} {alt} />
-      <span
-        class="self-center text-lg font-semibold text-gray-900 whitespace-nowrap dark:text-white"
-        >{sitename}</span
-      >
-    </a>
-    <button
-      on:click={handleClickbtn}
-      type="button"
-      class="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"
-      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, link, rel }}
-          <li>
-            <a
-              class:active={$page.url.pathname === link}
-              href={link}
-              {rel}
-              class="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}"
-              >{name}</a
-            >
-          </li>
-        {/each}
-      </ul>
-    </div>
-  </div>
+<nav class="px-2 bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+	<div class="container flex flex-wrap justify-between items-center mx-auto">
+		<a href="/" class="flex">
+			<img src={logo} {alt} />
+			<span
+				class="self-center text-lg font-semibold text-gray-900 whitespace-nowrap dark:text-white"
+				>{sitename}</span
+			>
+		</a>
+		<button
+			on:click={handleClickbtn}
+			type="button"
+			class="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"
+			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={$page.url.pathname === href}
+							{href}
+							{rel}
+							class="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}"
+							>{name}</a
+						>
+					</li>
+				{/each}
+			</ul>
+		</div>
+	</div>
 </nav>
 
 <style>
-  #mobile-menu .active {
-    color: #fab534;
-  }</style>
+	#mobile-menu .active {
+		color: #fab534;
+	}</style>

package/navbar/Navbar.svelte.d.ts

@@ -1,39 +1,21 @@
-/** @typedef {typeof __propDef.props}  NavbarProps */
-/** @typedef {typeof __propDef.events}  NavbarEvents */
-/** @typedef {typeof __propDef.slots}  NavbarSlots */
-export default class Navbar extends SvelteComponentTyped<{
-    alt?: string;
-    sitename?: string;
-    logo?: string;
-    textsize?: string;
-    menus?: {
-        name: string;
-        link: string;
-        rel: any;
-    }[];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type NavbarProps = typeof __propDef.props;
-export type NavbarEvents = typeof __propDef.events;
-export type NavbarSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { LinkType } from '../types';
 declare const __propDef: {
     props: {
-        alt?: string;
         sitename?: string;
         logo?: string;
+        alt?: string;
         textsize?: string;
-        menus?: {
-            name: string;
-            link: string;
-            rel: any;
-        }[];
+        menus: LinkType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type NavbarProps = typeof __propDef.props;
+export declare type NavbarEvents = typeof __propDef.events;
+export declare type NavbarSlots = typeof __propDef.slots;
+export default class Navbar extends SvelteComponentTyped<NavbarProps, NavbarEvents, NavbarSlots> {
+}
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.9.1",
+  "version": "0.9.4",
   "description": "Flowbite components for Svelte",
   "author": {
     "name": "Shinichi Okada",
@@ -23,7 +23,6 @@
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^3.2.1",
-    "flowbite-svelte": "^0.9.0",
     "mdsvex": "^0.10.5",
     "postcss": "^8.4.5",
     "postcss-load-config": "^3.1.1",