flowbite-svelte 0.22.14 → 0.22.15

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.22.15](https://github.com/themesberg/flowbite-svelte/compare/v0.22.14...v0.22.15) (2022-07-26)
+
+
+### Features
+
+* cards - re-written ([1084f38](https://github.com/themesberg/flowbite-svelte/commit/1084f38514e4cac5662ae6b969dde27e829ea24e))
+* cards - re-written ([52716e0](https://github.com/themesberg/flowbite-svelte/commit/52716e08ac0f4446e3c7160fc3dc83e515201d7d))
+* cards - wip ([0948c89](https://github.com/themesberg/flowbite-svelte/commit/0948c89a124662b7c5c238350df341e0956dac8a))
+
+
+### Bug Fixes
+
+* cards layout on index.md pages ([2080f8e](https://github.com/themesberg/flowbite-svelte/commit/2080f8ee29163a8ad5208f37c95ebf498be92c39))
+
 ### [0.22.14](https://github.com/themesberg/flowbite-svelte/compare/v0.22.13...v0.22.14) (2022-07-25)
 
 

package/buttons/Button.svelte

@@ -3,6 +3,7 @@ export let pill = false;
 export let outline = false;
 export let gradient = false;
 export let size = 'md';
+export let href = undefined;
 export let color = 'blue';
 export let shadow = null;
 const colorClasses = {
@@ -64,13 +65,26 @@ $: gradientOutlineClass = classNames('inline-flex items-center justify-center',
 'transition-all duration-75 ease-in group-hover:bg-opacity-0 group-hover:text-inherit');
 </script>
 
-<button type="button" {...$$restProps} class={buttonClass} on:click>
-	{#if outline && gradient}
-		<!-- Trick to prentend outline without using border
+{#if href}
+	<a {href} {...$$restProps} class={buttonClass}>
+		{#if outline && gradient}
+			<!-- Trick to prentend outline without using border
 		This has a limitation of no supporting transparency as
 		background is set to bg-white dark:bg-gray-900 -->
-		<span class={gradientOutlineClass}><slot /></span>
-	{:else}
-		<slot />
-	{/if}
-</button>
+			<span class={gradientOutlineClass}><slot /></span>
+		{:else}
+			<slot />
+		{/if}
+	</a>
+{:else}
+	<button type="button" {...$$restProps} class={buttonClass} on:click>
+		{#if outline && gradient}
+			<!-- Trick to prentend outline without using border
+		This has a limitation of no supporting transparency as
+		background is set to bg-white dark:bg-gray-900 -->
+			<span class={gradientOutlineClass}><slot /></span>
+		{:else}
+			<slot />
+		{/if}
+	</button>
+{/if}

package/buttons/Button.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         outline?: boolean;
         gradient?: boolean;
         size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+        href?: string;
         color?: 'blue' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple';
         shadow?: 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple' | null;
     };

package/cards/Card.svelte

@@ -1,90 +1,32 @@
-<script>export let link = '';
-export let rel = '';
-export let alt = '';
-export let img = '';
-export let btnLabel = '';
-export let btnColor = 'blue';
-export let textdivClass = 'p-5';
-export let headerClass = 'mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white';
-export let header = '';
-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 = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white focus:ring-4 ';
-if (btnColor === 'gray') {
-    buttonClass +=
-        'bg-gray-700 rounded-lg hover:bg-gray-800 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
-}
-else if (btnColor === 'red') {
-    buttonClass +=
-        'bg-red-700 rounded-lg hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
-}
-else if (btnColor === 'yellow') {
-    buttonClass +=
-        'bg-yellow-700 rounded-lg hover:bg-yellow-800 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
-}
-else if (btnColor === 'green') {
-    buttonClass +=
-        'bg-green-700 rounded-lg hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
-}
-else if (btnColor === 'indigo') {
-    buttonClass +=
-        'bg-indigo-700 rounded-lg hover:bg-indigo-800 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
-}
-else if (btnColor === 'purple') {
-    buttonClass +=
-        'bg-purple-700 rounded-lg hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
-}
-else if (btnColor === 'pink') {
-    buttonClass +=
-        'bg-pink-700 rounded-lg hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
-}
-else {
-    buttonClass +=
-        'bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
-}
+<script>import classNames from 'classnames';
+import { setContext } from 'svelte';
+export let href = undefined;
+export let horizontal = false;
+export let reverse = false;
+export let img = undefined;
+export let padding = 'lg';
+setContext('background', true);
+const paddings = {
+    sm: 'p-4',
+    md: 'p-5',
+    lg: 'p-6',
+    xl: 'p-8'
+};
+let innerPdding;
+$: innerPdding = paddings[padding];
+let cardClass;
+$: cardClass = classNames('block max-w-sm', 'flex', reverse ? 'flex-col-reverse' : 'flex-col', horizontal && (reverse ? 'md:flex-row-reverse md:max-w-xl' : 'md:flex-row md:max-w-xl'), 'bg-white dark:bg-gray-800 shadow-md', 'text-gray-500 dark:text-gray-400', 'rounded-lg border border-gray-200 dark:border-gray-700', href && 'hover:bg-gray-100 dark:hover:bg-gray-700', !img && innerPdding, $$props.class);
+let imgClass;
+$: imgClass = classNames(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal && 'object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none', horizontal && (reverse ? 'md:rounded-r-lg' : 'md:rounded-l-lg'));
 </script>
 
-<div class={divClass} class:has-paragraph={$$slots.paragraph}>
+<svelte:element this={href ? 'a' : 'div'} {href} class={cardClass}>
 	{#if img}
-		{#if link}
-			<a href={link} {rel}>
-				<img class="rounded-t-lg" src={img} {alt} />
-			</a>
-		{:else}
-			<img class="rounded-t-lg" src={img} {alt} />
-		{/if}
+		<img class={imgClass} src={img} alt="" />
+		<div class={innerPdding}>
+			<slot />
+		</div>
+	{:else}
+		<div><slot /></div>
 	{/if}
-	<div class={textdivClass}>
-		{#if header}
-			{#if link}
-				<a href={link} {rel}>
-					<h3 class={headerClass}>
-						{header}
-					</h3>
-				</a>
-			{:else}
-				<h3 class={headerClass}>
-					{header}
-				</h3>
-			{/if}
-		{/if}
-		{#if $$slots.paragraph}
-			<slot name="paragraph" />
-		{/if}
-		{#if link && btnLabel}
-			<a href={link} {rel} class={buttonClass}>
-				{btnLabel}
-				<svg
-					class="ml-2 -mr-1 w-4 h-4"
-					fill="currentColor"
-					viewBox="0 0 20 20"
-					xmlns="http://www.w3.org/2000/svg"
-					><path
-						fill-rule="evenodd"
-						d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-						clip-rule="evenodd"
-					/></svg
-				>
-			</a>
-		{/if}
-	</div>
-</div>
+</svelte:element>

package/cards/Card.svelte.d.ts

@@ -1,23 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Colors } from '../types';
 declare const __propDef: {
     props: {
-        link?: string;
-        rel?: string;
-        alt?: string;
+        [x: string]: any;
+        href?: string;
+        horizontal?: boolean;
+        reverse?: boolean;
         img?: string;
-        btnLabel?: string;
-        btnColor?: Colors;
-        textdivClass?: string;
-        headerClass?: string;
-        header?: string;
-        divClass?: string;
+        padding?: 'sm' | 'md' | 'lg';
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        paragraph: {};
+        default: {};
     };
 };
 export declare type CardProps = typeof __propDef.props;

package/cards/EcommerceCard.svelte

@@ -1,4 +1,7 @@
-<script>export let img;
+<script>import Badge from '../badges/Badge.svelte';
+import Rating from '../ratings/Rating.svelte';
+import Card from './Card.svelte';
+export let img;
 export let href = '/';
 export let btnColor = 'blue';
 export let rel = '';
@@ -7,86 +10,43 @@ export let stars = 0;
 export let price = '';
 export let btnText = '';
 export let headerClass = 'text-xl font-semibold tracking-tight text-gray-900 dark:text-white';
-export let divClass = 'max-w-sm bg-white rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700';
 export let priceClass = 'text-3xl font-bold text-gray-900 dark:text-white';
-let spanClass = 'text-xs font-semibold mr-2 px-2.5 py-0.5 rounded ml-3 ';
+let spanClass = 'flex items-center text-xs font-semibold mr-2 py-0.5 rounded';
 let linkClass = 'text-white focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center ';
-if (btnColor === 'gray') {
-    spanClass += 'bg-gray-100 text-gray-800 dark:bg-gray-200 dark:text-gray-800';
-    linkClass +=
-        'bg-gray-700 hover:bg-gray-800 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
-}
-else if (btnColor === 'red') {
-    spanClass += 'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-800';
-    linkClass +=
-        'bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
-}
-else if (btnColor === 'yellow') {
-    spanClass += 'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-800';
-    linkClass +=
-        'bg-yellow-700 hover:bg-yellow-800 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
-}
-else if (btnColor === 'green') {
-    spanClass += 'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-800';
-    linkClass +=
-        'bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
-}
-else if (btnColor === 'indigo') {
-    spanClass += 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-800';
-    linkClass +=
-        'bg-indigo-700 hover:bg-indigo-800 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
-}
-else if (btnColor === 'purple') {
-    spanClass += 'bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-800';
-    linkClass +=
-        'bg-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
-}
-else if (btnColor === 'pink') {
-    spanClass += 'bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-800';
-    linkClass +=
-        'bg-pink-700 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
-}
-else {
-    spanClass += 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800';
-    linkClass +=
-        'bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
-}
+const linkColors = {
+    gray: 'bg-gray-700 hover:bg-gray-800 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800',
+    red: 'bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800',
+    yellow: 'bg-yellow-700 hover:bg-yellow-800 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800',
+    green: 'bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800',
+    indigo: 'bg-indigo-700 hover:bg-indigo-800 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800',
+    purple: 'bg-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800',
+    pink: 'bg-pink-700 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800',
+    blue: 'bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800'
+};
 </script>
 
-<div class={divClass}>
+<Card padding="sm">
 	<a {href} {rel}>
-		<img class="p-8 rounded-t-lg" src={img.src} alt={img.alt} />
+		<img class="p-3 rounded-t-lg" src={img.src} alt={img.alt} />
 	</a>
-	<div class="px-5 pb-5">
-		<a {href} {rel}>
-			<h3 class={headerClass}>
-				{title}
-			</h3>
-		</a>
-		<div class="flex items-center mt-2.5 mb-5">
-			{#if stars}
-				{#each { length: stars } as _, i}
-					<svg
-						class="w-5 h-5 text-yellow-300"
-						fill="currentColor"
-						viewBox="0 0 20 20"
-						xmlns="http://www.w3.org/2000/svg"
-						><path
-							d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-						/></svg
-					>
-				{/each}
-				<span class={spanClass}>{stars}</span>
-			{/if}
-		</div>
-		<slot />
-		<div class="flex justify-between items-center">
-			{#if price}
-				<span class={priceClass}>{price}</span>
-			{/if}
-			{#if btnText}
-				<a {href} {rel} class={linkClass}>{btnText}</a>
-			{/if}
-		</div>
+
+	<a {href} {rel}>
+		<h3 class={headerClass}>
+			{title}
+		</h3>
+	</a>
+	{#if stars}
+		<Rating rating={stars} divClass={spanClass}>
+			<Badge slot="text" color={btnColor}>5</Badge>
+		</Rating>
+	{/if}
+	<slot />
+	<div class="flex justify-between items-center">
+		{#if price}
+			<span class={priceClass}>{price}</span>
+		{/if}
+		{#if btnText}
+			<a {href} {rel} class="{linkClass} {linkColors[btnColor]}">{btnText}</a>
+		{/if}
 	</div>
-</div>
+</Card>

package/cards/EcommerceCard.svelte.d.ts

@@ -11,7 +11,6 @@ declare const __propDef: {
         price?: string;
         btnText?: string;
         headerClass?: string;
-        divClass?: string;
         priceClass?: string;
     };
     events: {

package/cards/SignInCard.svelte

@@ -1,4 +1,9 @@
 <script>import Alert from '../alerts/Alert.svelte';
+import Button from '../buttons/Button.svelte';
+import Input from '../forms/Input.svelte';
+import Card from './Card.svelte';
+import Label from '../forms/Label.svelte';
+import Checkbox from '../forms/Checkbox.svelte';
 export let login;
 export let title = 'Sign in';
 export let btnSignInColor = 'blue';
@@ -8,60 +13,33 @@ export let lostPassword;
 let email;
 let password;
 let error;
-let submitClass = 'w-full text-white focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center ';
-if (btnSignInColor === 'blue') {
-    submitClass += 'bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
-}
-else if (btnSignInColor === 'gray') {
-    submitClass += 'bg-gray-700 hover:bg-gray-800 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
-}
-else if (btnSignInColor === 'red') {
-    submitClass += 'bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
-}
-else if (btnSignInColor === 'yellow') {
-    submitClass += 'bg-yellow-700 hover:bg-yellow-800 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
-}
-else if (btnSignInColor === 'green') {
-    submitClass += 'bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
-}
-else if (btnSignInColor === 'indigo') {
-    submitClass += 'bg-indigo-700 hover:bg-indigo-800 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
-}
-else if (btnSignInColor === 'purple') {
-    submitClass += 'bg-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
-}
-else if (btnSignInColor === 'pink') {
-    submitClass += 'bg-pink-700 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
-}
-else {
-    submitClass += 'bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
-}
 </script>
 
-<div class="p-4 max-w-sm w-full bg-white rounded-lg border border-gray-200 shadow-md sm:p-6 lg:p-8 dark:bg-gray-800 dark:border-gray-700">
-	<form class="space-y-6" on:submit|preventDefault={login}>
+<Card>
+	<form class="flex flex-col space-y-6" on:submit|preventDefault={login}>
 		<h3 class="text-xl font-medium text-gray-900 dark:text-white">{title}</h3>
-		<div>
-			<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Email</label>
-			<input type="email" name="email" id="email" bind:value={email} class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="name@company.com" required />
-		</div>
-		<div>
-			<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your password</label>
-			<input type="password" name="password" id="password" placeholder="••••••••" bind:value={password} class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required />
-		</div>
+
+		<Label class="space-y-2">
+			<span>Email</span>
+			<Input type="email" name="email" bind:value={email} placeholder="name@company.com" required />
+		</Label>
+
+		<Label class="space-y-2">
+			<span>Your password</span>
+			<Input type="password" name="password" placeholder="•••••" bind:value={password} required />
+		</Label>
+
 		<div class="flex items-start">
 			{#if rememberMe}
-				<div class="flex items-start">
-					<div class="flex items-center h-5">
-						<input id="remember" aria-describedby="remember" type="checkbox" class="w-4 h-4 bg-gray-50 rounded border border-gray-300 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" />
-					</div>
-					<div class="ml-3 text-sm">
-						<label for="remember" class="font-medium text-gray-900 dark:text-gray-300">Remember me</label>
-					</div>
-				</div>
+				<Checkbox>Remember me</Checkbox>
 			{/if}
 			{#if lostPassword}
-				<a href={lostPassword.href} rel={lostPassword.rel} class="ml-auto text-sm text-blue-700 hover:underline dark:text-blue-500">{lostPassword.name}</a>
+				<a
+					href={lostPassword.href}
+					rel={lostPassword.rel}
+					class="ml-auto text-sm text-blue-700 hover:underline dark:text-blue-500"
+					>{lostPassword.name}</a
+				>
 			{/if}
 		</div>
 		{#if error}
@@ -71,11 +49,15 @@ else {
 				</Alert>
 			</div>
 		{/if}
-		<button type="submit" class={submitClass}>Login to your account</button>
+		<Button type="submit" color={btnSignInColor} class="w-full1">Login to your account</Button>
 		{#if signup}
 			<div class="text-sm font-medium text-gray-500 dark:text-gray-300">
-				Not registered? <a href={signup.href} rel={signup.rel} class="text-blue-700 hover:underline dark:text-blue-500">{signup.name}</a>
+				Not registered? <a
+					href={signup.href}
+					rel={signup.rel}
+					class="text-blue-700 hover:underline dark:text-blue-500">{signup.name}</a
+				>
 			</div>
 		{/if}
 	</form>
-</div>
+</Card>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.22.14",
+  "version": "0.22.15",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {