flowbite-svelte 0.6.0

package/navbar/DropdownNavbar.svelte

@@ -0,0 +1,210 @@
+<script>
+  import { page } from "$app/stores";
+
+  let hidden = true;
+  let block = false;
+  let activeDropdown = undefined;
+  const handleDropdown = (dropdown) => {
+    console.log("dropdown.id", dropdown.id);
+    hidden = !hidden;
+    block = !block;
+    activeDropdown = dropdown.id;
+    console.log("activeDropdown: ", activeDropdown);
+  };
+
+  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,
+    },
+  ];
+</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>
+
+<style>
+  #mobile-menu .active {
+    color: #fab534;
+  }</style>

package/navbar/DropdownNavbar.svelte.d.ts

@@ -0,0 +1,65 @@
+/** @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";
+declare const __propDef: {
+    props: {
+        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;
+            }[];
+        })[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/navbar/Navbar.svelte

@@ -0,0 +1,96 @@
+<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";
+  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,
+    },
+  ];
+</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
+      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 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>
+
+<style>
+  #mobile-menu .active {
+    color: #fab534;
+  }</style>

package/navbar/Navbar.svelte.d.ts

@@ -0,0 +1,39 @@
+/** @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";
+declare const __propDef: {
+    props: {
+        alt?: string;
+        sitename?: string;
+        logo?: string;
+        textsize?: string;
+        menus?: {
+            name: string;
+            link: string;
+            rel: any;
+        }[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "flowbite-svelte",
+  "version": "0.6.0",
+  "description": "Flowbite components for Svelte",
+  "author": {
+    "name": "Shinichi Okada",
+    "email": "connect@codewithshin.com",
+    "url": "https://blog.codewithshin.com"
+  },
+  "bugs": "https://github.com/shinokada/flowbite-svelte/issues",
+  "homepage": "https://github.com/shinokada/flowbite-svelte",
+  "license": "MIT",
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "next",
+    "@sveltejs/kit": "next",
+    "autoprefixer": "^10.4.2",
+    "postcss": "^8.4.5",
+    "postcss-load-config": "^3.1.1",
+    "svelte": "^3.44.0",
+    "svelte-preprocess": "^4.10.2",
+    "svelte2tsx": "^0.4.14",
+    "tailwindcss": "^3.0.12"
+  },
+  "type": "module",
+  "keywords": [
+    "svelte",
+    "sveltekit",
+    "tailwindcss",
+    "flowbite",
+    "ui",
+    "alert",
+    "buttons",
+    "modals",
+    "cards",
+    "navbar",
+    "tabs"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/shinokada/flowbite-svelte"
+  },
+  "dependencies": {
+    "@codewithshin/svelte-heroicons": "^1.1.0",
+    "@codewithshin/svelte-sidebar": "^0.1.5",
+    "flowbite": "^1.3.2",
+    "svelte-collapse": "^0.0.4"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    "./.DS_Store": "./.DS_Store",
+    "./accordions/AccordionDefault.svelte": "./accordions/AccordionDefault.svelte",
+    "./accordions/AccordionItem.svelte": "./accordions/AccordionItem.svelte",
+    "./alerts/Alert.svelte": "./alerts/Alert.svelte",
+    "./alerts/BorderAlert.svelte": "./alerts/BorderAlert.svelte",
+    "./alerts/InfoAlert.svelte": "./alerts/InfoAlert.svelte",
+    "./badges/Badge.svelte": "./badges/Badge.svelte",
+    "./badges/BadgeIcon.svelte": "./badges/BadgeIcon.svelte",
+    "./badges/BadgeLink.svelte": "./badges/BadgeLink.svelte",
+    "./buttongroups/ButtonGroup.svelte": "./buttongroups/ButtonGroup.svelte",
+    "./buttongroups/ButtonGroupOutline.svelte": "./buttongroups/ButtonGroupOutline.svelte",
+    "./buttons/Button.svelte": "./buttons/Button.svelte",
+    "./buttons/ColorShadowButton.svelte": "./buttons/ColorShadowButton.svelte",
+    "./buttons/GradientDuotoneButton.svelte": "./buttons/GradientDuotoneButton.svelte",
+    "./buttons/GradientMonochromeButton.svelte": "./buttons/GradientMonochromeButton.svelte",
+    "./buttons/GradientOutlineButton.svelte": "./buttons/GradientOutlineButton.svelte",
+    "./cards/Card.svelte": "./cards/Card.svelte",
+    "./cards/CtaCard.svelte": "./cards/CtaCard.svelte",
+    "./cards/EcommerceCard.svelte": "./cards/EcommerceCard.svelte",
+    "./cards/HorizontalCard.svelte": "./cards/HorizontalCard.svelte",
+    "./cards/InteractiveCard.svelte": "./cards/InteractiveCard.svelte",
+    "./cards/ListCard.svelte": "./cards/ListCard.svelte",
+    "./cards/SignInCard.svelte": "./cards/SignInCard.svelte",
+    "./darkmode/DarkMode.svelte": "./darkmode/DarkMode.svelte",
+    "./dropdowns/DropdownDefault.svelte": "./dropdowns/DropdownDefault.svelte",
+    "./footer/SimpleFooter.svelte": "./footer/SimpleFooter.svelte",
+    ".": "./index.js",
+    "./list-group/List.svelte": "./list-group/List.svelte",
+    "./modals/ExtraLargeModal.svelte": "./modals/ExtraLargeModal.svelte",
+    "./modals/LargeModal.svelte": "./modals/LargeModal.svelte",
+    "./modals/MediumModal.svelte": "./modals/MediumModal.svelte",
+    "./modals/ModalButton.svelte": "./modals/ModalButton.svelte",
+    "./modals/SignInModal.svelte": "./modals/SignInModal.svelte",
+    "./modals/SmallModal.svelte": "./modals/SmallModal.svelte",
+    "./modals/modalStores": "./modals/modalStores.js",
+    "./navbar/DropdownNavbar.svelte": "./navbar/DropdownNavbar.svelte",
+    "./navbar/Navbar.svelte": "./navbar/Navbar.svelte",
+    "./tabs/DefaultTabs.svelte": "./tabs/DefaultTabs.svelte",
+    "./tabs/InteractiveTabs.svelte": "./tabs/InteractiveTabs.svelte",
+    "./tabs/PillTabs.svelte": "./tabs/PillTabs.svelte"
+  },
+  "svelte": "./index.js"
+}

package/tabs/DefaultTabs.svelte

@@ -0,0 +1,43 @@
+<script>
+  export let tabs = [
+    {
+      name: "Profile",
+      active: true,
+      link: "/#",
+      rel: undefined,
+    },
+    {
+      name: "Dashboard",
+      active: false,
+      link: "/#",
+      rel: undefined,
+    },
+    {
+      name: "Settings",
+      active: false,
+      link: "/#",
+      rel: undefined,
+    },
+    {
+      name: "Contacts",
+      active: false,
+      link: "/#",
+      rel: undefined,
+    },
+  ];
+</script>
+
+<ul class="flex flex-wrap border-b border-gray-200 dark:border-gray-700">
+  {#each tabs as { name, active, link, rel }}
+    <li class="mr-2">
+      <a
+        href={link}
+        {rel}
+        aria-current="page"
+        class={active
+          ? "inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500"
+          : "  inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300 "}
+        >{name}</a
+      >
+    </li>{/each}
+</ul>

package/tabs/DefaultTabs.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  DefaultTabsProps */
+/** @typedef {typeof __propDef.events}  DefaultTabsEvents */
+/** @typedef {typeof __propDef.slots}  DefaultTabsSlots */
+export default class DefaultTabs extends SvelteComponentTyped<{
+    tabs?: {
+        name: string;
+        active: boolean;
+        link: string;
+        rel: any;
+    }[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DefaultTabsProps = typeof __propDef.props;
+export type DefaultTabsEvents = typeof __propDef.events;
+export type DefaultTabsSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        tabs?: {
+            name: string;
+            active: boolean;
+            link: string;
+            rel: any;
+        }[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/tabs/InteractiveTabs.svelte

@@ -0,0 +1,68 @@
+<script>
+  // import { handleTabs } from "./handleTabs";
+  export let tabId = "myTab";
+
+  export let activeTabValue = 1;
+  const handleClick = (tabValue) => () => (activeTabValue = tabValue);
+
+  export let tabs = [
+    {
+      lavel: "Profile",
+      id: 1,
+      content:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ",
+    },
+    {
+      lavel: "Dashboard",
+      id: 2,
+      content:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ",
+    },
+    {
+      lavel: "Settings",
+      id: 3,
+      content:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ",
+    },
+    {
+      name: "Contacts",
+      id: 4,
+      content:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ",
+    },
+  ];
+</script>
+
+<div class="mb-4 border-b border-gray-200 dark:border-gray-700">
+  <ul class="flex flex-wrap -mb-px" id={tabId} role="tablist">
+    {#each tabs as { label, selected, id }}
+      <li class="mr-2" role="presentation" class:active={activeTabValue === id}>
+        <button
+          on:click={handleClick(id)}
+          class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
+          id="{label}-tab"
+          type="button"
+          role="tab"
+          aria-controls={label}
+          aria-selected={selected}>{label}</button
+        >
+      </li>
+    {/each}
+  </ul>
+</div>
+<div id="{tabId}Content">
+  {#each tabs as { label, content, id }}
+    {#if activeTabValue === id}
+      <div
+        class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
+        id={label}
+        role="tabpanel"
+        aria-labelledby="{label}-tab"
+      >
+        <p class="text-sm text-gray-500 dark:text-gray-400">
+          {content}
+        </p>
+      </div>
+    {/if}
+  {/each}
+</div>