flowbite-svelte 0.19.9 → 0.19.10

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 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.19.10](https://github.com/themesberg/flowbite-svelte/compare/v0.19.9...v0.19.10) (2022-06-30)
+
+
+### Features
+
+* add on change event dispatch to select ([bda74a6](https://github.com/themesberg/flowbite-svelte/commit/bda74a619530567d06d1badc600a3f663711b179))
+* update Breadcrumb components ([b35a970](https://github.com/themesberg/flowbite-svelte/commit/b35a9701ae08f795e37c55b92d24805d02a19b96))
+
 ### [0.19.9](https://github.com/themesberg/flowbite-svelte/compare/v0.19.8...v0.19.9) (2022-06-27)
 
 ### [0.19.8](https://github.com/themesberg/flowbite-svelte/compare/v0.19.7...v0.19.8) (2022-06-27)

package/badges/Badge.svelte

@@ -1,19 +1,31 @@
 <script>import classNames from 'classnames';
-export let textSize = 'text-xs';
-export let name = 'Read more';
 export let color = 'blue';
-let badgeClass = 'font-semibold mr-2 px-2.5 py-0.5 rounded ';
+export let large = false;
+export let href;
+let badgeClass;
 const colors = {
-    gray: `bg-gray-100 text-gray-800 ${textSize} dark:bg-gray-700 dark:text-gray-300`,
-    red: `bg-red-100 text-red-800 ${textSize} dark:bg-red-200 dark:text-red-900`,
-    green: `bg-green-100 text-green-800 ${textSize} dark:bg-green-200 dark:text-green-900`,
-    yellow: `bg-yellow-100 text-yellow-800 ${textSize} dark:bg-yellow-200 dark:text-yellow-900`,
-    indigo: `bg-indigo-100 text-indigo-800 ${textSize} dark:bg-indigo-200 dark:text-indigo-900`,
-    purple: `bg-purple-100 text-purple-800 ${textSize} dark:bg-purple-200 dark:text-purple-900`,
-    pink: `bg-pink-100 text-pink-800 ${textSize} dark:bg-pink-200 dark:text-pink-900`,
-    blue: `bg-blue-100 text-blue-800 ${textSize} dark:bg-blue-200 dark:text-blue-800`
+    blue: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800',
+    dark: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
+    red: 'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900',
+    green: 'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900',
+    yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900',
+    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900',
+    purple: 'bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-900',
+    pink: 'bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-900'
 };
-badgeClass += colors[color] ?? colors.blue;
+const hovers = {
+    blue: 'hover:bg-blue-200 dark:hover:bg-blue-300',
+    dark: 'hover:bg-gray-200 dark:hover:bg-gray-300',
+    red: 'hover:bg-red-200 dark:hover:bg-red-300',
+    green: 'hover:bg-green-200 dark:hover:bg-green-300',
+    yellow: 'hover:bg-yellow-200 dark:hover:bg-yellow-300',
+    indigo: 'hover:bg-indigo-200 dark:hover:bg-indigo-300',
+    purple: 'hover:bg-purple-200 dark:hover:bg-purple-300',
+    pink: 'hover:bg-pink-200 dark:hover:bg-pink-300'
+};
+$: badgeClass = classNames('inline-flex items-center mr-2 px-2.5 py-0.5 rounded', large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color] ?? colors.blue, href && (hovers[color] ?? hovers.blue), $$props.class);
 </script>
 
-<span class={classNames(badgeClass, $$props.class)} {...$$restProps}>{name}</span>
+<svelte:element this={href ? 'a' : 'span'} {href} class={badgeClass} {...$$restProps}>
+	<slot />
+</svelte:element>

package/badges/Badge.svelte.d.ts

@@ -1,16 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Colors, Textsize } from '../types';
+import type { Colors } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        textSize?: Textsize;
-        name?: string;
         color?: Colors;
+        large?: boolean;
+        href: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type BadgeProps = typeof __propDef.props;
 export declare type BadgeEvents = typeof __propDef.events;

package/breadcrumbs/Breadcrumb.svelte

@@ -1,49 +1,10 @@
-<script>export let crumbs = [];
-export let homeClass = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
-export let crumbClass = 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
-export let solid = false;
-let navClass = 'flex';
-if (solid) {
-    navClass =
-        'flex py-3 px-5 text-gray-700 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-800 dark:border-gray-700';
-}
+<script>import classNames from 'classnames';
+export let navClass = 'flex';
+export let olClass = 'inline-flex items-center space-x-1 md:space-x-3';
 </script>
 
-<nav class={navClass} aria-label="Breadcrumb">
-	<ol class="inline-flex items-center space-x-1 md:space-x-3">
-		{#each crumbs as crumb}
-			{#if crumb.href === '/'}
-				<li class="inline-flex items-center">
-					<a href={crumb.href} class={homeClass}>
-						<svg
-							class="mr-2 w-4 h-4"
-							fill="currentColor"
-							viewBox="0 0 20 20"
-							xmlns="http://www.w3.org/2000/svg"
-							><path
-								d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
-							/></svg
-						>
-						{crumb.label}</a
-					>
-				</li>
-			{:else}
-				<li>
-					<div class="flex items-center">
-						<svg
-							class="w-6 h-6 text-gray-400"
-							fill="currentColor"
-							viewBox="0 0 20 20"
-							xmlns="http://www.w3.org/2000/svg"
-							><path
-								fill-rule="evenodd"
-								d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-								clip-rule="evenodd"
-							/></svg
-						><a href={crumb.href} class={crumbClass}>{crumb.label}</a>
-					</div>
-				</li>
-			{/if}
-		{/each}
+<nav aria-label="Breadcrumb" class={classNames(navClass, $$props.classNav)} {...$$restProps}>
+	<ol class={classNames(olClass, $$props.classOl)}>
+		<slot />
 	</ol>
 </nav>

package/breadcrumbs/Breadcrumb.svelte.d.ts

@@ -1,16 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
-import type { CrumbType } from '../types';
 declare const __propDef: {
     props: {
-        crumbs?: CrumbType[];
-        homeClass?: string;
-        crumbClass?: string;
-        solid?: boolean;
+        [x: string]: any;
+        navClass?: string;
+        olClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type BreadcrumbProps = typeof __propDef.props;
 export declare type BreadcrumbEvents = typeof __propDef.events;

package/breadcrumbs/BreadcrumbItem.svelte

@@ -0,0 +1,43 @@
+<script>import { ChevronRight } from 'svelte-heros';
+export let icon = null;
+export let variation;
+export let iconSize = 20;
+export let iconClass = 'mr-2';
+</script>
+
+<li class="group flex items-center" {...$$props}>
+	<ChevronRight aria-hidden="true" class="mx-1 h-6 w-6 text-gray-400 group-first:hidden md:mx-2" />
+	{#if $$props.href}
+		<a
+			class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+			href={$$props.href}
+		>
+			{#if icon}
+				<svelte:component
+					this={icon}
+					{variation}
+					size={iconSize}
+					aria-hidden="true"
+					class={iconClass}
+				/>
+			{/if}
+			<slot />
+		</a>
+	{:else}
+		<span
+			class="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400"
+			data-testid="breadcrumb-item"
+		>
+			{#if icon}
+				<svelte:component
+					this={icon}
+					{variation}
+					size={iconSize}
+					aria-hidden="true"
+					class={iconClass}
+				/>
+			{/if}
+			<slot />
+		</span>
+	{/if}
+</li>

package/breadcrumbs/BreadcrumbItem.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SvelteComponent } from 'svelte';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        icon?: typeof SvelteComponent | null;
+        variation: 'solid' | null;
+        iconSize?: number;
+        iconClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type BreadcrumbItemProps = typeof __propDef.props;
+export declare type BreadcrumbItemEvents = typeof __propDef.events;
+export declare type BreadcrumbItemSlots = typeof __propDef.slots;
+export default class BreadcrumbItem extends SvelteComponentTyped<BreadcrumbItemProps, BreadcrumbItemEvents, BreadcrumbItemSlots> {
+}
+export {};

package/forms/Select.svelte

@@ -8,6 +8,6 @@ export let selectClass = 'bg-gray-50 border border-gray-300 text-gray-900 text-s
 </script>
 
 <label for={id} class={labelClass}>{label}</label>
-<select bind:value {id} {name} class={selectClass}>
+<select bind:value {id} {name} class={selectClass} on:change>
 	<slot />
 </select>

package/forms/Select.svelte.d.ts

@@ -9,6 +9,8 @@ declare const __propDef: {
         selectClass?: string;
     };
     events: {
+        change: Event;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/index.d.ts

@@ -3,9 +3,8 @@ export { default as AccordionFlush } from './accordions/AccordionFlush.svelte';
 export { default as Alert } from './alerts/Alert.svelte';
 export { default as Avatar } from './avatar/Avatar.svelte';
 export { default as Badge } from './badges/Badge.svelte';
-export { default as BadgeIcon } from './badges/BadgeIcon.svelte';
-export { default as BadgeLink } from './badges/BadgeLink.svelte';
 export { default as Breadcrumb } from './breadcrumbs/Breadcrumb.svelte';
+export { default as BreadcrumbItem } from './breadcrumbs/BreadcrumbItem.svelte';
 export { default as Button } from './buttons/Button.svelte';
 export { default as ColorShadowButton } from './buttons/ColorShadowButton.svelte';
 export { default as GradientDuotoneButton } from './buttons/GradientDuotoneButton.svelte';

package/index.js

@@ -7,10 +7,9 @@ export { default as Alert } from './alerts/Alert.svelte';
 export { default as Avatar } from './avatar/Avatar.svelte';
 // Badges
 export { default as Badge } from './badges/Badge.svelte';
-export { default as BadgeIcon } from './badges/BadgeIcon.svelte';
-export { default as BadgeLink } from './badges/BadgeLink.svelte';
 // Breadcrumbs
 export { default as Breadcrumb } from './breadcrumbs/Breadcrumb.svelte';
+export { default as BreadcrumbItem } from './breadcrumbs/BreadcrumbItem.svelte';
 // Buttons
 export { default as Button } from './buttons/Button.svelte';
 export { default as ColorShadowButton } from './buttons/ColorShadowButton.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.19.9",
+  "version": "0.19.10",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -98,9 +98,8 @@
     "./alerts/Alert.svelte": "./alerts/Alert.svelte",
     "./avatar/Avatar.svelte": "./avatar/Avatar.svelte",
     "./badges/Badge.svelte": "./badges/Badge.svelte",
-    "./badges/BadgeIcon.svelte": "./badges/BadgeIcon.svelte",
-    "./badges/BadgeLink.svelte": "./badges/BadgeLink.svelte",
     "./breadcrumbs/Breadcrumb.svelte": "./breadcrumbs/Breadcrumb.svelte",
+    "./breadcrumbs/BreadcrumbItem.svelte": "./breadcrumbs/BreadcrumbItem.svelte",
     "./buttongroups/ButtonGroup.svelte": "./buttongroups/ButtonGroup.svelte",
     "./buttongroups/ButtonGroupItem.svelte": "./buttongroups/ButtonGroupItem.svelte",
     "./buttons/Button.svelte": "./buttons/Button.svelte",

package/badges/BadgeIcon.svelte

@@ -1,22 +0,0 @@
-<script>import classNames from 'classnames';
-export let textSize = 'text-xs';
-export let name = 'Read more';
-export let color = 'blue';
-let badgeClass = 'font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 ';
-const colors = {
-    gray: `bg-gray-100 text-gray-800 ${textSize} dark:bg-gray-700 dark:text-gray-300`,
-    red: `bg-red-100 text-red-800 ${textSize} dark:bg-red-700 dark:text-red-300`,
-    green: `bg-green-100 text-green-800 ${textSize} dark:bg-green-700 dark:text-green-300`,
-    yellow: `bg-yellow-100 text-yellow-800 ${textSize} dark:bg-yellow-700 dark:text-yellow-300`,
-    indigo: `bg-indigo-100 text-indigo-800 ${textSize} dark:bg-indigo-700 dark:text-indigo-300`,
-    purple: `bg-purple-100 text-purple-800 ${textSize} dark:bg-purple-700 dark:text-purple-300`,
-    pink: `bg-pink-100 text-pink-800 ${textSize} dark:bg-pink-700 dark:text-pink-300`,
-    blue: `bg-blue-100 text-blue-800 ${textSize} dark:bg-blue-700 dark:text-blue-300`
-};
-badgeClass += colors[color] ?? colors.blue;
-</script>
-
-<span class={classNames(badgeClass, $$props.class)} {...$$restProps}>
-	<slot />
-	{name}
-</span>

package/badges/BadgeIcon.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { Colors, Textsize } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        textSize?: Textsize;
-        name?: string;
-        color?: Colors;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type BadgeIconProps = typeof __propDef.props;
-export declare type BadgeIconEvents = typeof __propDef.events;
-export declare type BadgeIconSlots = typeof __propDef.slots;
-export default class BadgeIcon extends SvelteComponentTyped<BadgeIconProps, BadgeIconEvents, BadgeIconSlots> {
-}
-export {};

package/badges/BadgeLink.svelte

@@ -1,20 +0,0 @@
-<script>import classNames from 'classnames';
-export let textSize = 'text-xs';
-export let name = 'Read more';
-export let color = 'blue';
-export let href = '/';
-let badgeClass = 'font-semibold mr-2 px-2.5 py-0.5 rounded ';
-const colors = {
-    gray: `bg-gray-100 hover:bg-gray-200 text-gray-800 ${textSize} dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-300`,
-    red: `bg-red-100 hover:bg-red-200 text-red-800 ${textSize} dark:bg-red-200 dark:text-red-800 dark:hover:bg-red-300`,
-    green: `bg-green-100 hover:bg-green-200 text-green-800 ${textSize} dark:bg-green-200 dark:text-green-800 dark:hover:bg-green-300`,
-    yellow: `bg-yellow-100 hover:bg-yellow-200 text-yellow-800 ${textSize} dark:bg-yellow-200 dark:text-yellow-800 dark:hover:bg-yellow-300`,
-    indigo: `bg-indigo-100 hover:bg-indigo-200 text-indigo-800 ${textSize} dark:bg-indigo-200 dark:text-indigo-800 dark:hover:bg-indigo-300`,
-    purple: `bg-purple-100 hover:bg-purple-200 text-purple-800 ${textSize} dark:bg-purple-200 dark:text-purple-800 dark:hover:bg-purple-300`,
-    pink: `bg-pink-100 hover:bg-pink-200 text-pink-800 ${textSize} dark:bg-pink-200 dark:text-pink-800 dark:hover:bg-pink-300`,
-    blue: `bg-blue-100 hover:bg-blue-200 text-blue-800 ${textSize} dark:bg-blue-200 dark:text-blue-800 dark:hover:bg-blue-300`
-};
-badgeClass += colors[color] ?? colors.blue;
-</script>
-
-<a {href} class={classNames(badgeClass, $$props.class)} {...$$restProps}>{name}</a>

package/badges/BadgeLink.svelte.d.ts

@@ -1,21 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { Colors, Textsize } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        textSize?: Textsize;
-        name?: string;
-        color?: Colors;
-        href?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type BadgeLinkProps = typeof __propDef.props;
-export declare type BadgeLinkEvents = typeof __propDef.events;
-export declare type BadgeLinkSlots = typeof __propDef.slots;
-export default class BadgeLink extends SvelteComponentTyped<BadgeLinkProps, BadgeLinkEvents, BadgeLinkSlots> {
-}
-export {};