flowbite-svelte 0.8.4 → 0.8.7

package/footer/LogoFooter.svelte

@@ -0,0 +1,50 @@
+<script>
+  export let site = {
+    link: "/",
+    name: "Flowbite Svelte",
+    img: "/images/mkdir-logo.png",
+  };
+
+  export let links = [
+    { name: "About", link: "/about", rel: undefined },
+    { name: "Privacy Policy", link: "/", rel: undefined },
+    { name: "Licensing", link: "/", rel: undefined },
+    { name: "Contact", link: "/", rel: undefined },
+  ];
+  export let footerClass =
+    "p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800";
+  export let divClass = "sm:flex sm:items-center sm:justify-between";
+  export let siteNameClass =
+    "self-center text-2xl font-semibold whitespace-nowrap dark:text-white";
+  export let ulClass =
+    "flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400";
+  export let aClass = "mr-4 hover:underline md:mr-6";
+  export let siteNameLinkClass = "flex items-center mb-4 sm:mb-0";
+  export let imgClass = "mr-3 h-8";
+  export let hrClass =
+    "my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8";
+  export let copyRightSpanClass =
+    "block text-sm text-gray-500 sm:text-center dark:text-gray-400";
+  export let copyRightLinkClass = "hover:underline";
+</script>
+
+<footer class={footerClass}>
+  <div class={divClass}>
+    <a href={site.link} class={siteNameLinkClass}>
+      <img src={site.img} class={imgClass} alt={site.name} />
+      <span class={siteNameClass}>{site.name}</span>
+    </a>
+    <ul class={ulClass}>
+      {#each links as { name, link, rel }}
+        <li>
+          <a href={link} {rel} class={aClass}>{name}</a>
+        </li>
+      {/each}
+    </ul>
+  </div>
+  <hr class={hrClass} />
+  <span class={copyRightSpanClass}
+    >© 2022 <a href={site.link} class={copyRightLinkClass}>{site.name}</a>. All
+    Rights Reserved.
+  </span>
+</footer>

package/footer/LogoFooter.svelte.d.ts

@@ -0,0 +1,61 @@
+/** @typedef {typeof __propDef.props}  LogoFooterProps */
+/** @typedef {typeof __propDef.events}  LogoFooterEvents */
+/** @typedef {typeof __propDef.slots}  LogoFooterSlots */
+export default class LogoFooter extends SvelteComponentTyped<{
+    site?: {
+        link: string;
+        name: string;
+        img: string;
+    };
+    links?: {
+        name: string;
+        link: string;
+        rel: any;
+    }[];
+    footerClass?: string;
+    siteNameClass?: string;
+    ulClass?: string;
+    aClass?: string;
+    siteNameLinkClass?: string;
+    divClass?: string;
+    imgClass?: string;
+    hrClass?: string;
+    copyRightSpanClass?: string;
+    copyRightLinkClass?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type LogoFooterProps = typeof __propDef.props;
+export type LogoFooterEvents = typeof __propDef.events;
+export type LogoFooterSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        site?: {
+            link: string;
+            name: string;
+            img: string;
+        };
+        links?: {
+            name: string;
+            link: string;
+            rel: any;
+        }[];
+        footerClass?: string;
+        siteNameClass?: string;
+        ulClass?: string;
+        aClass?: string;
+        siteNameLinkClass?: string;
+        divClass?: string;
+        imgClass?: string;
+        hrClass?: string;
+        copyRightSpanClass?: string;
+        copyRightLinkClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/footer/SimpleFooter.svelte

@@ -1,26 +1,29 @@
 <script>
-  export let link = undefined;
-  export let siteName = "Svelte flow";
+  export let site = {
+    link: "/",
+    name: "Flowbite Svelte",
+  };
   export let links = [
-    { name: "About", link: "about", rel: undefined },
-    { name: "Privacy Policy", link: "policy", rel: undefined },
-    { name: "Licensing", link: "licensing", rel: undefined },
-    { name: "Contact", link: "contact", rel: undefined },
+    { name: "About", link: "/about", rel: undefined },
+    { name: "Privacy Policy", link: "/", rel: undefined },
+    { name: "Licensing", link: "/", rel: undefined },
+    { name: "Contact", link: "/", rel: undefined },
   ];
   export let footerClass =
     "p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800";
-  export let spanClass =
+  export let siteNameClass =
     "text-sm text-gray-500 sm:text-center dark:text-gray-400";
   export let ulClass = "flex flex-wrap items-center mt-3 sm:mt-0";
   export let aClass =
     "mr-4 text-sm text-gray-500 hover:underline md:mr-6 dark:text-gray-400";
-  export let spanLinkClass = "hover:underline";
+  export let siteNameLinkClass = "hover:underline";
 </script>
 
 <footer class={footerClass}>
-  <span class={spanClass}
-    >© 2022 <a href={link} class={spanLinkClass} target="_blank">{siteName}</a>.
-    All Rights Reserved.
+  <span class={siteNameClass}
+    >© 2022 <a href={site.link} class={siteNameLinkClass} target="_blank"
+      >{site.name}</a
+    >. All Rights Reserved.
   </span>
   <ul class={ulClass}>
     {#each links as { name, link, rel }}

package/footer/SimpleFooter.svelte.d.ts

@@ -2,18 +2,20 @@
 /** @typedef {typeof __propDef.events}  SimpleFooterEvents */
 /** @typedef {typeof __propDef.slots}  SimpleFooterSlots */
 export default class SimpleFooter extends SvelteComponentTyped<{
-    link?: any;
-    siteName?: string;
+    site?: {
+        link: string;
+        name: string;
+    };
     links?: {
         name: string;
         link: string;
         rel: any;
     }[];
     footerClass?: string;
-    spanClass?: string;
+    siteNameClass?: string;
     ulClass?: string;
     aClass?: string;
-    spanLinkClass?: string;
+    siteNameLinkClass?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -24,18 +26,20 @@ export type SimpleFooterSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        link?: any;
-        siteName?: string;
+        site?: {
+            link: string;
+            name: string;
+        };
         links?: {
             name: string;
             link: string;
             rel: any;
         }[];
         footerClass?: string;
-        spanClass?: string;
+        siteNameClass?: string;
         ulClass?: string;
         aClass?: string;
-        spanLinkClass?: string;
+        siteNameLinkClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/footer/SitemapFooter.svelte

@@ -0,0 +1,114 @@
+<script>
+  export let site = {
+    link: "/",
+    name: "Flowbite Svelte",
+    img: "/images/mkdir-logo.png",
+  };
+  export let links = [
+    {
+      parent: "Company",
+      children: [
+        { name: "About", link: "/" },
+        {
+          name: "Careers",
+          link: "/",
+        },
+        { name: "Brand Center", link: "/" },
+        {
+          name: "Blog",
+          link: "/",
+        },
+      ],
+    },
+    {
+      parent: "Help center",
+      children: [
+        { name: "Discord Server", link: "/" },
+        {
+          name: "Twitter",
+          link: "/",
+        },
+        { name: "Facebook", link: "/" },
+        {
+          name: "Contact Us",
+          link: "/",
+        },
+      ],
+    },
+    {
+      parent: "LEGAL",
+      children: [
+        { name: "Privacy Policy", link: "/" },
+        { name: "Licensing", link: "/" },
+        {
+          name: "Terms & Conditions",
+          link: "/",
+        },
+      ],
+    },
+    {
+      parent: "Download",
+      children: [
+        { name: "iOS", link: "/" },
+        { name: "Android", link: "/" },
+        {
+          name: "Windows",
+          link: "/",
+        },
+        {
+          name: "MacOS",
+          link: "/",
+        },
+      ],
+    },
+  ];
+  export let socialMedia = [
+    {
+      link: "/",
+      icon: "",
+    },
+  ];
+  export let footerClass = "bg-gray-800";
+  export let linksClass = "grid grid-cols-2 gap-8 py-8 px-6 md:grid-cols-4";
+  export let parentClass = "mb-6 text-sm font-semibold text-gray-400 uppercase";
+  export let ulClass = "text-gray-300";
+  export let linkClass = "hover:underline";
+  export let copyrightDivClass =
+    "py-6 px-4 bg-gray-700 md:flex md:items-center md:justify-between";
+  export let copyrightClass = "text-sm text-gray-300 sm:text-center";
+  export let socialMediaDivClass =
+    "flex mt-4 space-x-6 sm:justify-center md:mt-0";
+  export let socialMediaLinkClass = "text-gray-400 hover:text-white";
+  export let iconClass = "h-5 w-5 mr-2";
+</script>
+
+<footer class={footerClass}>
+  <div class={linksClass}>
+    {#each links as { parent, children }}
+      <div>
+        <h2 class={parentClass}>
+          {parent}
+        </h2>
+        <ul class={ulClass}>
+          {#each children as { name, link }}
+            <li class="mb-4">
+              <a href={link} class={linkClass}>{name}</a>
+            </li>
+          {/each}
+        </ul>
+      </div>
+    {/each}
+  </div>
+  <div class={copyrightDivClass}>
+    <span class={copyrightClass}
+      >© 2022 <a href={site.link}>{site.name}</a>. All Rights Reserved.
+    </span>
+    <div class={socialMediaDivClass}>
+      {#each socialMedia as { link, icon }}
+        <a href={link} class={socialMediaLinkClass}>
+          <svelte:component this={icon} className={iconClass} />
+        </a>
+      {/each}
+    </div>
+  </div>
+</footer>

package/footer/SitemapFooter.svelte.d.ts

@@ -0,0 +1,73 @@
+/** @typedef {typeof __propDef.props}  SitemapFooterProps */
+/** @typedef {typeof __propDef.events}  SitemapFooterEvents */
+/** @typedef {typeof __propDef.slots}  SitemapFooterSlots */
+export default class SitemapFooter extends SvelteComponentTyped<{
+    site?: {
+        link: string;
+        name: string;
+        img: string;
+    };
+    links?: {
+        parent: string;
+        children: {
+            name: string;
+            link: string;
+        }[];
+    }[];
+    footerClass?: string;
+    ulClass?: string;
+    socialMedia?: {
+        link: string;
+        icon: string;
+    }[];
+    parentClass?: string;
+    linkClass?: string;
+    copyrightDivClass?: string;
+    copyrightClass?: string;
+    socialMediaDivClass?: string;
+    socialMediaLinkClass?: string;
+    iconClass?: string;
+    linksClass?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SitemapFooterProps = typeof __propDef.props;
+export type SitemapFooterEvents = typeof __propDef.events;
+export type SitemapFooterSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        site?: {
+            link: string;
+            name: string;
+            img: string;
+        };
+        links?: {
+            parent: string;
+            children: {
+                name: string;
+                link: string;
+            }[];
+        }[];
+        footerClass?: string;
+        ulClass?: string;
+        socialMedia?: {
+            link: string;
+            icon: string;
+        }[];
+        parentClass?: string;
+        linkClass?: string;
+        copyrightDivClass?: string;
+        copyrightClass?: string;
+        socialMediaDivClass?: string;
+        socialMediaLinkClass?: string;
+        iconClass?: string;
+        linksClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/footer/SocialMediaFooter.svelte

@@ -0,0 +1,108 @@
+<script>
+  export let site = {
+    link: "/",
+    name: "Flowbite Svelte",
+    img: "/images/mkdir-logo.png",
+  };
+  export let links = [
+    {
+      parent: "RESOURCES",
+      children: [
+        { name: "Flowbite-Svelte", link: "/" },
+        {
+          name: "Flowbite",
+          link: "/",
+        },
+      ],
+    },
+    {
+      parent: "FOLLOW US",
+      children: [
+        { name: "Github", link: "/" },
+        {
+          name: "Flowbite",
+          link: "/",
+        },
+      ],
+    },
+    {
+      parent: "LEGAL",
+      children: [
+        { name: "Privacy Policy", link: "/" },
+        {
+          name: "Terms & Conditions",
+          link: "/",
+        },
+      ],
+    },
+  ];
+  export let socialMedia = [
+    {
+      link: "/",
+      icon: "",
+    },
+  ];
+  export let footerClass = "p-4 bg-white sm:p-6 dark:bg-gray-800";
+  export let divClass = "md:flex md:justify-between";
+  export let divClass2 = "mb-6 md:mb-0";
+  export let siteLinkClass = "flex items-center";
+  export let siteNameSpanClass =
+    "self-center text-2xl font-semibold whitespace-nowrap dark:text-white";
+  export let imgClass = "mr-3 h-8";
+  export let linksDivClass = "grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3";
+  export let parentClass =
+    "mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white";
+  export let ulClass = "text-gray-600 dark:text-gray-400";
+  export let linkClass = "hover:underline";
+  export let hrClass =
+    "my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8";
+  export let copyrightDivClass = "sm:flex sm:items-center sm:justify-between";
+  export let copyrightClass =
+    "text-sm text-gray-500 sm:text-center dark:text-gray-400";
+  export let socialMediaDivClass =
+    "flex mt-4 space-x-6 sm:justify-center sm:mt-0";
+  export let socialMediaLinkClass =
+    "text-gray-500 hover:text-gray-900 dark:hover:text-white";
+  export let iconClass = "h-5 w-5 mr-2";
+</script>
+
+<footer class={footerClass}>
+  <div class={divClass}>
+    <div class={divClass2}>
+      <a href={site.link} class={siteLinkClass}>
+        <img src={site.img} class={imgClass} alt={site.name} />
+        <span class={siteNameSpanClass}>{site.name}</span>
+      </a>
+    </div>
+    <div class={linksDivClass}>
+      {#each links as { parent, children }}
+        <div>
+          <h2 class={parentClass}>
+            {parent}
+          </h2>
+          <ul class={ulClass}>
+            {#each children as { name, link }}
+              <li class="mb-4">
+                <a href={link} class={linkClass}>{name}</a>
+              </li>
+            {/each}
+          </ul>
+        </div>
+      {/each}
+    </div>
+  </div>
+  <hr class={hrClass} />
+  <div class={copyrightDivClass}>
+    <span class={copyrightClass}
+      >© 2022 <a href={site.link} class="hover:underline">{site.name}</a>. All
+      Rights Reserved.
+    </span>
+    <div class={socialMediaDivClass}>
+      {#each socialMedia as { link, icon }}
+        <a href={link} class={socialMediaLinkClass}>
+          <svelte:component this={icon} className={iconClass} />
+        </a>
+      {/each}
+    </div>
+  </div>
+</footer>

package/footer/SocialMediaFooter.svelte.d.ts

@@ -0,0 +1,85 @@
+/** @typedef {typeof __propDef.props}  SocialMediaFooterProps */
+/** @typedef {typeof __propDef.events}  SocialMediaFooterEvents */
+/** @typedef {typeof __propDef.slots}  SocialMediaFooterSlots */
+export default class SocialMediaFooter extends SvelteComponentTyped<{
+    site?: {
+        link: string;
+        name: string;
+        img: string;
+    };
+    links?: {
+        parent: string;
+        children: {
+            name: string;
+            link: string;
+        }[];
+    }[];
+    footerClass?: string;
+    ulClass?: string;
+    divClass?: string;
+    imgClass?: string;
+    hrClass?: string;
+    socialMedia?: {
+        link: string;
+        icon: string;
+    }[];
+    divClass2?: string;
+    siteLinkClass?: string;
+    siteNameSpanClass?: string;
+    linksDivClass?: string;
+    parentClass?: string;
+    linkClass?: string;
+    copyrightDivClass?: string;
+    copyrightClass?: string;
+    socialMediaDivClass?: string;
+    socialMediaLinkClass?: string;
+    iconClass?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SocialMediaFooterProps = typeof __propDef.props;
+export type SocialMediaFooterEvents = typeof __propDef.events;
+export type SocialMediaFooterSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        site?: {
+            link: string;
+            name: string;
+            img: string;
+        };
+        links?: {
+            parent: string;
+            children: {
+                name: string;
+                link: string;
+            }[];
+        }[];
+        footerClass?: string;
+        ulClass?: string;
+        divClass?: string;
+        imgClass?: string;
+        hrClass?: string;
+        socialMedia?: {
+            link: string;
+            icon: string;
+        }[];
+        divClass2?: string;
+        siteLinkClass?: string;
+        siteNameSpanClass?: string;
+        linksDivClass?: string;
+        parentClass?: string;
+        linkClass?: string;
+        copyrightDivClass?: string;
+        copyrightClass?: string;
+        socialMediaDivClass?: string;
+        socialMediaLinkClass?: string;
+        iconClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/index.d.ts

@@ -23,6 +23,9 @@ import SignInCard from "./cards/SignInCard.svelte";
 import DarkMode from "./darkmode/DarkMode.svelte";
 import Dropdown from "./dropdowns/DropdownDefault.svelte";
 import SimpleFooter from "./footer/SimpleFooter.svelte";
+import LogoFooter from "./footer/LogoFooter.svelte";
+import SocialMediaFooter from "./footer/SocialMediaFooter.svelte";
+import SitemapFooter from "./footer/SitemapFooter.svelte";
 import List from "./list-group/List.svelte";
 import { modalIdStore } from "./modals/modalStores";
 import ExtraLargeModal from "./modals/ExtraLargeModal.svelte";
@@ -40,4 +43,4 @@ import DefaultTabs from "./tabs/DefaultTabs.svelte";
 import PillTabs from "./tabs/PillTabs.svelte";
 import Tooltip from "./tooltips/Tooltip.svelte";
 import LightTooltip from "./tooltips/LightTooltip.svelte";
-export { Accordion, AccordionItem, Alert, BorderAlert, InfoAlert, Badge, BadgeIcon, BadgeLink, Button, ColorShadowButton, GradientDuotoneButton, GradientMonochromeButton, GradientOutlineButton, ButtonGroup, ButtonGroupOutline, Card, HorizontalCard, InteractiveCard, ListCard, CtaCard, EcommerceCard, SignInCard, DarkMode, Dropdown, SimpleFooter, List, modalIdStore, ExtraLargeModal, LargeModal, MediumModal, ModalButton, SignInModal, SmallModal, Navbar, DropdownNavbar, Spinner, SpinnerButton, InteractiveTabs, DefaultTabs, PillTabs, Tooltip, LightTooltip };
+export { Accordion, AccordionItem, Alert, BorderAlert, InfoAlert, Badge, BadgeIcon, BadgeLink, Button, ColorShadowButton, GradientDuotoneButton, GradientMonochromeButton, GradientOutlineButton, ButtonGroup, ButtonGroupOutline, Card, HorizontalCard, InteractiveCard, ListCard, CtaCard, EcommerceCard, SignInCard, DarkMode, Dropdown, SimpleFooter, LogoFooter, SocialMediaFooter, SitemapFooter, List, modalIdStore, ExtraLargeModal, LargeModal, MediumModal, ModalButton, SignInModal, SmallModal, Navbar, DropdownNavbar, Spinner, SpinnerButton, InteractiveTabs, DefaultTabs, PillTabs, Tooltip, LightTooltip };

package/index.js

@@ -39,6 +39,9 @@ import Dropdown from './dropdowns/DropdownDefault.svelte'
 
 // Footers
 import SimpleFooter from './footer/SimpleFooter.svelte'
+import LogoFooter from './footer/LogoFooter.svelte'
+import SocialMediaFooter from './footer/SocialMediaFooter.svelte'
+import SitemapFooter from './footer/SitemapFooter.svelte'
 
 // List
 import List from './list-group/List.svelte'
@@ -104,6 +107,9 @@ export {
   Dropdown,
   // footers
   SimpleFooter,
+  LogoFooter,
+  SocialMediaFooter,
+  SitemapFooter,
   // list
   List,
   // Modals

package/modals/modalStores.d.ts

@@ -1 +1 @@
-export const modalIdStore: import("svelte/store").Writable<number>;
+export const modalIdStore: import("svelte/store").Writable<string>;

package/modals/modalStores.js

@@ -1,3 +1,3 @@
 import { writable } from 'svelte/store';
 
-export const modalIdStore = writable(0);
+export const modalIdStore = writable("");

package/navbar/Navbar.svelte

@@ -5,6 +5,10 @@
   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",
@@ -41,6 +45,7 @@
       >
     </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"
@@ -70,7 +75,11 @@
         /></svg
       >
     </button>
-    <div class="hidden w-full md:block md:w-auto" id="mobile-menu">
+    <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"
       >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.8.4",
+  "version": "0.8.7",
   "description": "Flowbite components for Svelte",
   "author": {
     "name": "Shinichi Okada",
@@ -14,6 +14,7 @@
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
     "autoprefixer": "^10.4.2",
+    "flowbite-svelte": "^0.8.4",
     "postcss": "^8.4.5",
     "postcss-load-config": "^3.1.1",
     "svelte": "^3.44.0",
@@ -41,7 +42,6 @@
   },
   "dependencies": {
     "@codewithshin/svelte-heroicons": "^1.1.0",
-    "@codewithshin/svelte-sidebar": "^0.1.5",
     "flowbite": "^1.3.2",
     "svelte-collapse": "^0.0.4"
   },
@@ -71,7 +71,10 @@
     "./cards/SignInCard.svelte": "./cards/SignInCard.svelte",
     "./darkmode/DarkMode.svelte": "./darkmode/DarkMode.svelte",
     "./dropdowns/DropdownDefault.svelte": "./dropdowns/DropdownDefault.svelte",
+    "./footer/LogoFooter.svelte": "./footer/LogoFooter.svelte",
     "./footer/SimpleFooter.svelte": "./footer/SimpleFooter.svelte",
+    "./footer/SitemapFooter.svelte": "./footer/SitemapFooter.svelte",
+    "./footer/SocialMediaFooter.svelte": "./footer/SocialMediaFooter.svelte",
     ".": "./index.js",
     "./list-group/List.svelte": "./list-group/List.svelte",
     "./modals/ExtraLargeModal.svelte": "./modals/ExtraLargeModal.svelte",