flowbite-svelte 0.9.2 → 0.9.5

package/footer/SocialMediaFooter.svelte

@@ -1,110 +1,63 @@
-<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";
-  export let copyrightYear = "© 2022";
-  export let allRightsReserved = "All Rights Reserved.";
+<script >export let site;
+export let links;
+export let socialMedia;
+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';
+export let copyrightYear = '© 2022';
+export let allRightsReserved = 'All Rights Reserved.';
 </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}
-      >{copyrightYear}
-      <a href={site.link} class="hover:underline">{site.name}</a>. {allRightsReserved}
-    </span>
-    <div class={socialMediaDivClass}>
-      {#each socialMedia as { link, icon }}
-        <a href={link} class={socialMediaLinkClass}>
-          <svelte:component this={icon} className={iconClass} />
-        </a>
-      {/each}
-    </div>
-  </div>
+	<div class={divClass}>
+		<div class={divClass2}>
+			<a href={site.href} 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, href }}
+							<li class="mb-4">
+								<a {href} class={linkClass}>{name}</a>
+							</li>
+						{/each}
+					</ul>
+				</div>
+			{/each}
+		</div>
+	</div>
+	<hr class={hrClass} />
+	<div class={copyrightDivClass}>
+		<span class={copyrightClass}
+			>{copyrightYear}
+			<a href={site.href} class="hover:underline">{site.name}</a>. {allRightsReserved}
+		</span>
+		<div class={socialMediaDivClass}>
+			{#each socialMedia as { href, icon }}
+				<a {href} class={socialMediaLinkClass}>
+					<svelte:component this={icon} className={iconClass} />
+				</a>
+			{/each}
+		</div>
+	</div>
 </footer>

package/footer/SocialMediaFooter.svelte.d.ts

@@ -1,67 +1,10 @@
-/** @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;
-        }[];
-    }[];
-    socialMedia?: {
-        link: string;
-        icon: string;
-    }[];
-    footerClass?: string;
-    divClass?: string;
-    divClass2?: string;
-    siteLinkClass?: string;
-    siteNameSpanClass?: string;
-    imgClass?: string;
-    linksDivClass?: string;
-    parentClass?: string;
-    ulClass?: string;
-    linkClass?: string;
-    hrClass?: string;
-    copyrightDivClass?: string;
-    copyrightClass?: string;
-    socialMediaDivClass?: string;
-    socialMediaLinkClass?: string;
-    iconClass?: string;
-    copyrightYear?: string;
-    allRightsReserved?: 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";
+import type { SocialMediaLinkType, SocialMediaType, SiteType } from '../types';
 declare const __propDef: {
     props: {
-        site?: {
-            link: string;
-            name: string;
-            img: string;
-        };
-        links?: {
-            parent: string;
-            children: {
-                name: string;
-                link: string;
-            }[];
-        }[];
-        socialMedia?: {
-            link: string;
-            icon: string;
-        }[];
+        site: SiteType;
+        links: SocialMediaLinkType[];
+        socialMedia: SocialMediaType[];
         footerClass?: string;
         divClass?: string;
         divClass2?: string;
@@ -86,4 +29,9 @@ declare const __propDef: {
     };
     slots: {};
 };
+export declare type SocialMediaFooterProps = typeof __propDef.props;
+export declare type SocialMediaFooterEvents = typeof __propDef.events;
+export declare type SocialMediaFooterSlots = typeof __propDef.slots;
+export default class SocialMediaFooter extends SvelteComponentTyped<SocialMediaFooterProps, SocialMediaFooterEvents, SocialMediaFooterSlots> {
+}
 export {};

package/index.d.ts

@@ -3,6 +3,11 @@ import AccordionItem from "./accordions/AccordionItem.svelte";
 import Alert from "./alerts/Alert.svelte";
 import BorderAlert from "./alerts/BorderAlert.svelte";
 import InfoAlert from "./alerts/InfoAlert.svelte";
+import Confirm from "./auth/Confirm.svelte";
+import ForgotPassword from "./auth/ForgotPassword.svelte";
+import Login from "./auth/Login.svelte";
+import Register from "./auth/Register.svelte";
+import Reset from "./auth/Reset.svelte";
 import Badge from "./badges/Badge.svelte";
 import BadgeIcon from "./badges/BadgeIcon.svelte";
 import BadgeLink from "./badges/BadgeLink.svelte";
@@ -43,4 +48,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, LogoFooter, SocialMediaFooter, SitemapFooter, List, modalIdStore, ExtraLargeModal, LargeModal, MediumModal, ModalButton, SignInModal, SmallModal, Navbar, DropdownNavbar, Spinner, SpinnerButton, InteractiveTabs, DefaultTabs, PillTabs, Tooltip, LightTooltip };
+export { Accordion, AccordionItem, Alert, BorderAlert, InfoAlert, Confirm, ForgotPassword, Login, Register, Reset, 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

@@ -1,3 +1,4 @@
+// Accordion
 import Accordion from './accordions/AccordionDefault.svelte'
 import AccordionItem from './accordions/AccordionItem.svelte'
 
@@ -6,6 +7,13 @@ import Alert from './alerts/Alert.svelte'
 import BorderAlert from './alerts/BorderAlert.svelte'
 import InfoAlert from './alerts/InfoAlert.svelte'
 
+// Auth
+import Confirm from './auth/Confirm.svelte'
+import ForgotPassword from './auth/ForgotPassword.svelte'
+import Login from './auth/Login.svelte'
+import Register from './auth/Register.svelte'
+import Reset from './auth/Reset.svelte'
+
 // Badges
 import Badge from './badges/Badge.svelte'
 import BadgeIcon from './badges/BadgeIcon.svelte'
@@ -80,6 +88,12 @@ export {
   Alert,
   BorderAlert,
   InfoAlert,
+  // auth
+  Confirm,
+  ForgotPassword,
+  Login,
+  Register,
+  Reset,
   // Badges
   Badge,
   BadgeIcon,

package/list-group/List.svelte

@@ -1,79 +1,47 @@
-<script>
-  export let lists = [
-    {
-      title: "Profile",
-      icon: "",
-      link: "/profile",
-      rel: "",
-    },
-    {
-      title: "Settings",
-      icon: "",
-      link: "/settings",
-      rel: "",
-    },
-    {
-      title: "Messages",
-      icon: "",
-      link: "/message",
-      rel: "",
-    },
-    {
-      title: "Download",
-      icon: "",
-      link: "/download",
-      rel: "",
-    },
-  ];
-  // let len = count($lists);
-  // top rounded-t-lg border-b border-gray-200
-  // middle border-b border-gray-200
-  // bottom rounded-b-lg
-  const common =
-    "inline-flex relative items-center py-2 px-4 w-full text-sm font-medium hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white";
-  const topClass = `${common} rounded-t-lg border-b border-gray-200`;
-  const bottomClass = `${common} rounded-b-lg`;
-  const middleClass = `${common} border-b border-gray-200`;
-  let listClass;
+<script >export let lists;
+const common = 'inline-flex relative items-center py-2 px-4 w-full text-sm font-medium hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white';
+const topClass = `${common} rounded-t-lg border-b border-gray-200`;
+const bottomClass = `${common} rounded-b-lg`;
+const middleClass = `${common} border-b border-gray-200`;
 </script>
 
 <div
-  class="w-48 text-gray-900 bg-white rounded-lg border border-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+	class="w-48 text-gray-900 bg-white rounded-lg border border-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
 >
-  {#each lists as { title, icon, link, rel }, i}
-    {#if i === 0}
-      <button type="button" class={topClass}>
-        {#if icon}
-          <svelte:component this={icon} className="h-4 w-4 mr-2" />
-        {/if}
-        {#if link}
-          <a href={link} {rel}>{title}</a>
-        {:else}
-          {title} here
-        {/if}
-      </button>
-    {:else if i === lists.length - 1}
-      <button type="button" class={bottomClass}>
-        {#if icon}
-          <svelte:component this={icon} className="h-4 w-4 mr-2" />
-        {/if}
-        {#if link}
-          <a href={link} {rel}>{title}</a>
-        {:else}
-          {title}
-        {/if}
-      </button>
-    {:else}
-      <button type="button" class={middleClass}>
-        {#if icon}
-          <svelte:component this={icon} className="h-4 w-4 mr-2" />
-        {/if}
-        {#if link}
-          <a href={link} {rel}>{title}</a>
-        {:else}
-          {title}
-        {/if}
-      </button>
-    {/if}
-  {/each}
+	{#each lists as { name, icon, href, rel }, i}
+		{#if i === 0}
+			<button type="button" class={topClass}>
+				{#if icon}
+					<svelte:component this={icon} className="h-4 w-4 mr-2" />
+				{/if}
+				{#if href}
+					<a {href} {rel}>{name}</a>
+				{:else}
+					{name} here
+				{/if}
+			</button>
+		{:else if i === lists.length - 1}
+			<button type="button" class={bottomClass}>
+				{#if icon}
+					<svelte:component this={icon} className="h-4 w-4 mr-2" />
+				{/if}
+				{#if href}
+					<a {href} {rel}>{name}</a>
+				{:else}
+					{name}
+				{/if}
+			</button>
+		{:else}
+			<button type="button" class={middleClass}>
+				{#if icon}
+					<svelte:component this={icon} className="h-4 w-4 mr-2" />
+				{/if}
+				{#if href}
+					<a {href} {rel}>{name}</a>
+				{:else}
+					{name}
+				{/if}
+			</button>
+		{/if}
+	{/each}
 </div>

package/list-group/List.svelte.d.ts

@@ -1,33 +1,17 @@
-/** @typedef {typeof __propDef.props}  ListProps */
-/** @typedef {typeof __propDef.events}  ListEvents */
-/** @typedef {typeof __propDef.slots}  ListSlots */
-export default class List extends SvelteComponentTyped<{
-    lists?: {
-        title: string;
-        icon: string;
-        link: string;
-        rel: string;
-    }[];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ListProps = typeof __propDef.props;
-export type ListEvents = typeof __propDef.events;
-export type ListSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { ButtonGroupType } from '../types';
 declare const __propDef: {
     props: {
-        lists?: {
-            title: string;
-            icon: string;
-            link: string;
-            rel: string;
-        }[];
+        lists: ButtonGroupType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type ListProps = typeof __propDef.props;
+export declare type ListEvents = typeof __propDef.events;
+export declare type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+}
 export {};