flowbite-svelte 0.9.4 → 0.9.7

package/buttons/GradientMonochromeButton.svelte

@@ -2,6 +2,7 @@
 export let color = 'blue';
 export let name = 'Read more';
 let btnClass;
+export let type = 'button';
 if (color === 'blue') {
     btnClass = `text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
 }
@@ -31,4 +32,4 @@ else {
 }
 </script>
 
-<button type="button" class={btnClass} on:click>{name}</button>
+<button {type} class={btnClass} on:click>{name}</button>

package/buttons/GradientMonochromeButton.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Buttonshadows, Textsize } from '../types';
+import type { Buttonshadows, Textsize, ButtonType } from '../types';
 declare const __propDef: {
     props: {
         textSize?: Textsize;
         color?: Buttonshadows;
         name?: string;
+        type?: ButtonType;
     };
     events: {
         click: MouseEvent;

package/buttons/GradientOutlineButton.svelte

@@ -1,6 +1,7 @@
 <script >export let textSize = 'text-sm';
 export let color = 'purple2blue';
 export let name = 'Read more';
+export let type = 'button';
 let btnClass;
 let spanClass;
 if (color === 'purple2blue') {
@@ -45,6 +46,6 @@ else {
 }
 </script>
 
-<button class={btnClass}>
+<button class={btnClass} {type}>
 	<span class={spanClass} on:click>{name}</span>
 </button>

package/buttons/GradientOutlineButton.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Gradientduotones, Textsize } from '../types';
+import type { Gradientduotones, Textsize, ButtonType } from '../types';
 declare const __propDef: {
     props: {
         textSize?: Textsize;
         color?: Gradientduotones;
         name?: string;
+        type?: ButtonType;
     };
     events: {
         click: MouseEvent;

package/cards/Card.svelte

@@ -1,10 +1,11 @@
-<script >export let link;
-export let rel;
-export let alt;
-export let img;
+<script >export let link = '';
+export let rel = '';
+export let alt = '';
+export let img = '';
 export let btnLabel = 'Read more';
 export let btnColor = 'blue';
 export let header = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+export let divClass = 'max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700';
 let buttonClass;
 if (btnColor === 'blue') {
     buttonClass =
@@ -44,9 +45,7 @@ else {
 }
 </script>
 
-<div
-	class="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
->
+<div class={divClass}>
 	{#if img}
 		<a href={link} {rel}>
 			<img class="rounded-t-lg" src={img} {alt} />

package/cards/Card.svelte.d.ts

@@ -2,13 +2,14 @@ import { SvelteComponentTyped } from "svelte";
 import type { Colors } from '../types';
 declare const __propDef: {
     props: {
-        link: string;
-        rel: string;
-        alt: string;
-        img: string;
+        link?: string;
+        rel?: string;
+        alt?: string;
+        img?: string;
         btnLabel?: string;
         btnColor?: Colors;
         header?: string;
+        divClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/cards/CtaCard.svelte

@@ -2,6 +2,7 @@
 export let title = 'Work fast from anywhere';
 export let headColor = 'gray';
 export let btns;
+export let divClass = 'p-4 w-full text-center bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700';
 let headClass;
 if (headColor === 'blue') {
     headClass = 'mb-2 text-3xl font-bold text-blue-900 dark:text-white';
@@ -32,9 +33,7 @@ else {
 }
 </script>
 
-<div
-	class="p-4 w-full text-center bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700"
->
+<div class={divClass}>
 	<h3 class={headClass}>
 		{title}
 	</h3>

package/cards/CtaCard.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         title?: string;
         headColor?: Colors;
         btns: CardButtonType[];
+        divClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/cards/EcommerceCard.svelte

@@ -4,10 +4,11 @@
 };
 export let link = '/';
 export let btnColor = 'blue';
-export let rel;
+export let rel = '';
 export let title = 'Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport';
 export let stars = 5;
 export let price = '$555';
+export let divClass = 'max-w-sm bg-white rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700';
 let spanClass;
 let linkClass;
 if (btnColor === 'blue') {
@@ -66,7 +67,7 @@ else {
 }
 </script>
 
-<div class="max-w-sm bg-white rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+<div class={divClass}>
 	<a href={link} {rel}>
 		<img class="p-8 rounded-t-lg" src={img.src} alt={img.alt} />
 	</a>

package/cards/EcommerceCard.svelte.d.ts

@@ -5,10 +5,11 @@ declare const __propDef: {
         img?: ImgType;
         link?: string;
         btnColor?: Colors;
-        rel: string;
+        rel?: string;
         title?: string;
         stars?: number;
         price?: string;
+        divClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/cards/HorizontalCard.svelte

@@ -1,25 +1,22 @@
-<script >export let link;
-export let rel;
+<script >export let link = '';
+export let rel = '';
 export let img = '/images/image-4.jpeg';
-export let alt;
+export let alt = '';
 export let header = 'Lorem ipsum dolor sit ametit.';
+export let linkClass = 'flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700';
+export let imgClass = 'object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg';
+export let textClass = 'flex flex-col justify-between p-4 leading-normal';
+export let h3Class = 'mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white';
+export let pClass = 'mb-3 font-normal text-gray-700 dark:text-gray-400';
 </script>
 
-<a
-	href={link}
-	{rel}
-	class="flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
->
-	<img
-		class="object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
-		src={img}
-		{alt}
-	/>
-	<div class="flex flex-col justify-between p-4 leading-normal">
-		<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+<a href={link} {rel} class={linkClass}>
+	<img class={imgClass} src={img} {alt} />
+	<div class={textClass}>
+		<h3 class={h3Class}>
 			{header}
-		</h5>
-		<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+		</h3>
+		<p class={pClass}>
 			<slot />
 		</p>
 	</div>

package/cards/HorizontalCard.svelte.d.ts

@@ -1,11 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        link: string;
-        rel: string;
+        link?: string;
+        rel?: string;
         img?: string;
-        alt: string;
+        alt?: string;
         header?: string;
+        linkClass?: string;
+        imgClass?: string;
+        textClass?: string;
+        h3Class?: string;
+        pClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/cards/InteractiveCard.svelte

@@ -9,6 +9,7 @@ export let content = 'Proin efficitur purus felis.';
 export let buttonColor = 'blue';
 export let link1;
 export let link2;
+export let divClass = 'max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700';
 let linkClass;
 if (buttonColor === 'blue') {
     linkClass =
@@ -48,9 +49,7 @@ else {
 }
 </script>
 
-<div
-	class="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
->
+<div class={divClass}>
 	<div class="flex justify-end px-4 pt-4">
 		<button
 			id="dropdownButton"

package/cards/InteractiveCard.svelte.d.ts

@@ -1,14 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
-import type { DropdownLinkType, ImgType, LinkType } from '../types';
+import type { LinkType, ImgType } from '../types';
 declare const __propDef: {
     props: {
-        dropdownLinks: DropdownLinkType[];
+        dropdownLinks: LinkType[];
         img: ImgType;
         header?: string;
         content?: string;
         buttonColor?: string;
         link1: LinkType;
         link2: LinkType;
+        divClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/cards/ListCard.svelte

@@ -1,82 +1,46 @@
-<script>
-  export let lists = [
-    {
-      img: {
-        src: "/images/profile-picture-1.jpeg",
-        alt: "Neil Sims",
-      },
-      field1: "Neil Sims",
-      field2: "email@windster.com",
-      field3: "Advisor",
-    },
-    {
-      img: {
-        src: "/images/profile-picture-2.jpeg",
-        alt: "Bonnie Green",
-      },
-      field1: "Bonnie Green",
-      field2: "email@windster.com",
-      field3: "Developer",
-    },
-    {
-      img: {
-        src: "/images/profile-picture-3.jpeg",
-        alt: "Michael Gough",
-      },
-      field1: "Michael Gough",
-      field2: "email@windster.com",
-      field3: "Marketing",
-    },
-  ];
-  export let title = "Latest Customers";
-  export let action = {
-    link: "/#",
-    title: "View all",
-    rel: "",
-  };
+<script >export let lists;
+export let title = 'Latest Customers';
+export let action;
+export let divClass = 'p-4 max-w-md bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700';
 </script>
 
-<div
-  class="p-4 max-w-md bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700"
->
-  <div class="flex justify-between items-center mb-4">
-    <h3 class="text-xl font-bold leading-none text-gray-900 dark:text-white">
-      {title}
-    </h3>
-    <a
-      href={action.link}
-      rel={action.rel}
-      class="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
-    >
-      {action.title}
-    </a>
-  </div>
-  <div class="flow-root">
-    <ul class="divide-y divide-gray-200 dark:divide-gray-700">
-      {#each lists as { img, field1, field2, field3 }}
-        <li class="py-3 sm:py-4">
-          <div class="flex items-center space-x-4">
-            <div class="flex-shrink-0">
-              <img class="w-8 h-8 rounded-full" src={img.src} alt={img.alt} />
-            </div>
-            <div class="flex-1 min-w-0">
-              <p
-                class="text-sm font-medium text-gray-900 truncate dark:text-white"
-              >
-                {field1}
-              </p>
-              <p class="text-sm text-gray-500 truncate dark:text-gray-400">
-                {field2}
-              </p>
-            </div>
-            <div
-              class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white"
-            >
-              {field3}
-            </div>
-          </div>
-        </li>
-      {/each}
-    </ul>
-  </div>
+<div class={divClass}>
+	<div class="flex justify-between items-center mb-4">
+		<h3 class="text-xl font-bold leading-none text-gray-900 dark:text-white">
+			{title}
+		</h3>
+		<a
+			href={action.href}
+			rel={action.rel}
+			class="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+		>
+			{action.name}
+		</a>
+	</div>
+	<div class="flow-root">
+		<ul class="divide-y divide-gray-200 dark:divide-gray-700">
+			{#each lists as { img, field1, field2, field3 }}
+				<li class="py-3 sm:py-4">
+					<div class="flex items-center space-x-4">
+						<div class="flex-shrink-0">
+							<img class="w-8 h-8 rounded-full" src={img.src} alt={img.alt} />
+						</div>
+						<div class="flex-1 min-w-0">
+							<p class="text-sm font-medium text-gray-900 truncate dark:text-white">
+								{field1}
+							</p>
+							<p class="text-sm text-gray-500 truncate dark:text-gray-400">
+								{field2}
+							</p>
+						</div>
+						<div
+							class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white"
+						>
+							{field3}
+						</div>
+					</div>
+				</li>
+			{/each}
+		</ul>
+	</div>
 </div>

package/cards/ListCard.svelte.d.ts

@@ -1,51 +1,20 @@
-/** @typedef {typeof __propDef.props}  ListCardProps */
-/** @typedef {typeof __propDef.events}  ListCardEvents */
-/** @typedef {typeof __propDef.slots}  ListCardSlots */
-export default class ListCard extends SvelteComponentTyped<{
-    lists?: {
-        img: {
-            src: string;
-            alt: string;
-        };
-        field1: string;
-        field2: string;
-        field3: string;
-    }[];
-    title?: string;
-    action?: {
-        link: string;
-        title: string;
-        rel: string;
-    };
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ListCardProps = typeof __propDef.props;
-export type ListCardEvents = typeof __propDef.events;
-export type ListCardSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { LinkType, ListCardType } from '../types';
 declare const __propDef: {
     props: {
-        lists?: {
-            img: {
-                src: string;
-                alt: string;
-            };
-            field1: string;
-            field2: string;
-            field3: string;
-        }[];
+        lists: ListCardType[];
         title?: string;
-        action?: {
-            link: string;
-            title: string;
-            rel: string;
-        };
+        action: LinkType;
+        divClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type ListCardProps = typeof __propDef.props;
+export declare type ListCardEvents = typeof __propDef.events;
+export declare type ListCardSlots = typeof __propDef.slots;
+export default class ListCard extends SvelteComponentTyped<ListCardProps, ListCardEvents, ListCardSlots> {
+}
 export {};