flowbite-svelte 0.9.4 → 0.9.7

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 {};

package/navbar/DropdownNavbar.svelte

@@ -16,21 +16,26 @@ export let logo = '/images/mkdir-logo.png';
 export let alt;
 export let textsize = 'text-sm';
 export let menus;
+export let navClass = 'px-2 bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700';
+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 dropdownDiv = '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';
+export let dropdownLinkClassWithChild = `block py-2 px-4 ${textsize} text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white`;
+export let dropdownLinkClassWithoutChild = `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}`;
+export let liButtonClass = `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`;
 </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">
+<nav class={navClass}>
+	<div class={navDivClass}>
 		<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
-			>
+			<span class={spanClass}>{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"
+			class={buttonClass}
 			aria-controls="mobile-menu-2"
 			aria-expanded="false"
 		>
@@ -63,9 +68,7 @@ export let menus;
 				{#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"
+							<button on:click={() => handleDropdown(id)} class={liButtonClass}
 								>{name}
 								<svg
 									class="ml-1 w-4 h-4"
@@ -84,18 +87,13 @@ export let menus;
 								<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"
+									class={dropdownDiv}
 									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
-												>
+												<a href={item.href} {rel} class={dropdownLinkClassWithChild}>{item.name}</a>
 											</li>
 										{/each}
 									</ul>
@@ -108,8 +106,7 @@ export let menus;
 								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
+								class={dropdownLinkClassWithoutChild}>{name}</a
 							>
 						</li>
 					{/if}

package/navbar/DropdownNavbar.svelte.d.ts

@@ -7,6 +7,13 @@ declare const __propDef: {
         alt: string;
         textsize?: string;
         menus: NavbarType[];
+        navClass?: string;
+        spanClass?: string;
+        buttonClass?: string;
+        dropdownDiv?: string;
+        dropdownLinkClassWithChild?: string;
+        dropdownLinkClassWithoutChild?: string;
+        liButtonClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/navbar/Navbar.svelte

@@ -8,21 +8,23 @@ 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';
+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}`;
 </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">
+<nav class={navClass}>
+	<div class={navDivClass}>
 		<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
-			>
+			<span class={spanClass}>{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"
+			class={buttonClass}
 			aria-controls="mobile-menu-2"
 			aria-expanded="false"
 		>
@@ -54,12 +56,7 @@ export let menus;
 			<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
+						<a class:active={$page.url.pathname === href} {href} {rel} class={liLinkClass}>{name}</a
 						>
 					</li>
 				{/each}

package/navbar/Navbar.svelte.d.ts

@@ -7,6 +7,10 @@ declare const __propDef: {
         alt?: string;
         textsize?: string;
         menus: LinkType[];
+        navClass?: string;
+        spanClass?: string;
+        buttonClass?: string;
+        liLinkClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.9.4",
+  "version": "0.9.7",
   "description": "Flowbite components for Svelte",
   "author": {
     "name": "Shinichi Okada",
@@ -11,7 +11,7 @@
   "homepage": "https://github.com/shinokada/flowbite-svelte",
   "license": "MIT",
   "devDependencies": {
-    "@codewithshin/svelte-sidebar": "^0.2.3",
+    "@codewithshin/svelte-sidebar": "^0.4.2",
     "@codewithshin/svelte-simpleicons": "^0.2.2",
     "@codewithshin/svelte-utterances": "^0.1.2",
     "@playwright/test": "^1.19.1",
@@ -74,6 +74,11 @@
     "./alerts/Alert.svelte": "./alerts/Alert.svelte",
     "./alerts/BorderAlert.svelte": "./alerts/BorderAlert.svelte",
     "./alerts/InfoAlert.svelte": "./alerts/InfoAlert.svelte",
+    "./auth/Confirm.svelte": "./auth/Confirm.svelte",
+    "./auth/ForgotPassword.svelte": "./auth/ForgotPassword.svelte",
+    "./auth/Login.svelte": "./auth/Login.svelte",
+    "./auth/Register.svelte": "./auth/Register.svelte",
+    "./auth/Reset.svelte": "./auth/Reset.svelte",
     "./badges/Badge.svelte": "./badges/Badge.svelte",
     "./badges/BadgeIcon.svelte": "./badges/BadgeIcon.svelte",
     "./badges/BadgeLink.svelte": "./badges/BadgeLink.svelte",

package/spinners/Spinner.svelte

@@ -1,7 +1,7 @@
 <script >export let color = 'blue';
 export let bg = 'text-gray-200';
 export let size = 'w-8 h-8';
-export let align;
+export let align = 'text-center';
 let colorClass;
 if (color === 'blue') {
     colorClass = 'fill-blue-600';

package/spinners/Spinner.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         color?: Colors;
         bg?: string;
         size?: string;
-        align: AlignType;
+        align?: AlignType;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/spinners/SpinnerButton.svelte

@@ -1,4 +1,4 @@
-<script >export let color; // {null|blue}
+<script >export let color;
 let colorClass;
 let fillColor1;
 let fillColor2;

package/types.d.ts

@@ -60,12 +60,26 @@ export interface NavbarType {
     rel?: string;
     child?: NavbarType[];
 }
-export interface DropdownLinkType {
-    name: string;
-    href: string;
-    rel?: string;
-}
 export interface SocialMediaLinkType {
     parent: string;
     children?: LinkType[];
 }
+export interface DropdownType {
+    name: string;
+    href: string;
+    divider: boolean;
+}
+export interface ListCardType {
+    img: ImgType;
+    field1: string;
+    field2?: string;
+    field3?: string;
+}
+export declare type AuthFunctionType = () => Promise<string>;
+export declare type ButtonType = 'button' | 'submit' | 'reset';
+export interface AuthFieldType {
+    label: string;
+    fieldtype: string;
+    required?: boolean;
+    placeholder?: string;
+}