flowbite-svelte 0.21.3 → 0.21.6

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 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.21.6](https://github.com/themesberg/flowbite-svelte/compare/v0.21.5...v0.21.6) (2022-07-16)
+
+
+### Bug Fixes
+
+* links in form index ([1149aa2](https://github.com/themesberg/flowbite-svelte/commit/1149aa2f7411ceb9a3e29ce3c6c3d446634f09a9))
+* sidebars and forms {...$$restProps} position updates ([d983225](https://github.com/themesberg/flowbite-svelte/commit/d983225a4e4c7526bf7bee3a7cd51ecc6035bba8))
+
+### [0.21.5](https://github.com/themesberg/flowbite-svelte/compare/v0.21.4...v0.21.5) (2022-07-16)
+
+
+### Features
+
+* alerts more functions, changed API ([a2306fb](https://github.com/themesberg/flowbite-svelte/commit/a2306fb2a980a140da51f4f36ac299a5ce33c1c8))
+
+
+### Bug Fixes
+
+* add href prop to jjagielka avatars and fix doc ([ea97577](https://github.com/themesberg/flowbite-svelte/commit/ea975779365d8a9d8b6fd2fe22e36d94636957f2))
+* buttons - update sizes and force round ([22284ad](https://github.com/themesberg/flowbite-svelte/commit/22284ada79396136f8dce288de87112e74e6f82a))
+
+### [0.21.4](https://github.com/themesberg/flowbite-svelte/compare/v0.21.3...v0.21.4) (2022-07-14)
+
+
+### Bug Fixes
+
+* alerts dismissable button color ([779e863](https://github.com/themesberg/flowbite-svelte/commit/779e863a6b321ea84ae65484b05ed6cd7d73ccd9))
+
 ### [0.21.3](https://github.com/themesberg/flowbite-svelte/compare/v0.21.2...v0.21.3) (2022-07-14)
 
 ### [0.21.2](https://github.com/themesberg/flowbite-svelte/compare/v0.21.1...v0.21.2) (2022-07-13)

package/alerts/Alert.svelte

@@ -54,12 +54,12 @@ $: textColor = textColors[color] ?? textColors.blue;
 </script>
 
 <div id={$$props.id} class:hidden class={divClass} role="alert">
-	<div class="flex items-center">
+	<div class="flex items-center {textColor}">
 		{#if icon}
-			<svelte:component this={icon} class="flex-shrink-0 w-5 h-5 {textColor} mr-3" />
+			<svelte:component this={icon} class="flex-shrink-0 w-5 h-5 mr-3" />
 		{/if}
 
-		<div class="text-sm {textColor}">
+		<div class="text-sm">
 			<slot />
 		</div>
 

package/avatar/Avatar.svelte

@@ -1,22 +1,38 @@
-<script>export let avatar = {};
-let isCircle = avatar.round ? 'rounded-full' : 'rounded';
-let isBorder = avatar.border ? 'p-1 ring-2 ring-gray-300 dark:ring-gray-500' : '';
-export let avatarClass = `w-${avatar.size} h-${avatar.size} ${isCircle} ${isBorder}`;
-export let placehoder = false;
+<script>import classNames from 'classnames';
+import AvatarPlaceholder from './Placeholder.svelte';
+import Dot from './Dot.svelte';
+export let src = '';
+export let href = '#';
+export let rounded = false;
+export let border = false;
+export let stacked = false;
+export let dot = { top: false, color: 'bg-gray-300 dark:bg-gray-500' };
+export let alt = '';
+export let size = 'md';
+// export let ring: string = 'ring-gray-300 dark:ring-gray-500';
+const sizes = {
+    xs: 'w-6 h-6',
+    sm: 'w-8 h-8',
+    md: 'w-10 h-10',
+    lg: 'w-20 h-20',
+    xl: 'w-36 h-36'
+};
+let avatarClass;
+$: avatarClass = classNames(rounded ? 'rounded' : 'rounded-full', border && 'p-1 ring-2 ring-gray-300 dark:ring-gray-500', sizes[size], stacked && 'border-2 -ml-4 border-white dark:border-gray-800', $$props.class);
 </script>
 
-{#if placehoder}
-	<div class="relative w-10 h-10 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-600">
-		<svg class="absolute w-12 h-12 text-gray-400 -left-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /></svg>
-	</div>
-{:else if avatar.header && avatar.text}
-	<div class="flex items-center space-x-4">
-		<img class={avatarClass} alt={avatar.alt} src={avatar.src} />
-		<div class="space-y-1 font-medium dark:text-white">
-			<div>{avatar.header}</div>
-			<div class="text-sm text-gray-500 dark:text-gray-400">{avatar.text}</div>
+<Dot show={$$props.dot} {rounded} {...dot} {size}>
+	{#if src}
+		<img class={avatarClass} {alt} {src} />
+	{:else if $$slots.default}
+		<a
+			class="flex justify-center items-center {avatarClass} text-xs font-medium text-white bg-gray-700 hover:bg-gray-600"
+			{href}
+			><slot />
+		</a>
+	{:else}
+		<div class={avatarClass}>
+			<AvatarPlaceholder {rounded} />
 		</div>
-	</div>
-{:else}
-	<img class={avatarClass} alt={avatar.alt} src={avatar.src} />
-{/if}
+	{/if}
+</Dot>

package/avatar/Avatar.svelte.d.ts

@@ -1,15 +1,23 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AvatarType } from '../types';
+import type { DotType } from '../types';
 declare const __propDef: {
     props: {
-        avatar?: AvatarType;
-        avatarClass?: string;
-        placehoder?: boolean;
+        [x: string]: any;
+        src?: string;
+        href?: string;
+        rounded?: boolean;
+        border?: boolean;
+        stacked?: boolean;
+        dot?: DotType;
+        alt?: string;
+        size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type AvatarProps = typeof __propDef.props;
 export declare type AvatarEvents = typeof __propDef.events;

package/avatar/Dot.svelte

@@ -0,0 +1,32 @@
+<script>import classNames from 'classnames';
+export let show = false;
+export let top = false;
+export let color = 'bg-gray-300 dark:bg-gray-500';
+export let rounded = false;
+export let size = 'md';
+const sizes = {
+    xs: 'w-2.5 h-2.5',
+    sm: 'w-3 h-3',
+    md: 'w-3.5 h-3.5',
+    lg: 'w-6 h-6',
+    xl: 'w-10 h-10'
+};
+const offsets = {
+    xs: ['left-4', 'left-5'],
+    sm: ['left-6', 'left-6'],
+    md: ['left-7', 'left-8'],
+    lg: ['left-14', 'left-16'],
+    xl: ['left-24', 'left-32']
+};
+let dotClass;
+$: dotClass = classNames('absolute rounded-full border-white dark:border-gray-800 border-2', sizes[size], offsets[size][+rounded], top ? 'top-0' : 'bottom-0', rounded && top && 'transform -translate-y-1/2', rounded && !top && 'transform translate-y-1/4', color);
+</script>
+
+{#if show}
+	<div class="relative">
+		<slot />
+		<span class={dotClass} />
+	</div>
+{:else}
+	<slot />
+{/if}

package/avatar/Dot.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        show?: boolean;
+        top?: boolean;
+        color?: string;
+        rounded?: boolean;
+        size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type DotProps = typeof __propDef.props;
+export declare type DotEvents = typeof __propDef.events;
+export declare type DotSlots = typeof __propDef.slots;
+export default class Dot extends SvelteComponentTyped<DotProps, DotEvents, DotSlots> {
+}
+export {};

package/avatar/Placeholder.svelte

@@ -0,0 +1,15 @@
+<script>export let rounded = false;
+</script>
+
+<svg
+	class="text-gray-400 bg-gray-200 dark:bg-gray-600 {rounded ? 'rounded' : 'rounded-full'}"
+	fill="currentColor"
+	viewBox="0 0 16 16"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		fill-rule="evenodd"
+		d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+		clip-rule="evenodd"
+	/>
+</svg>

package/avatar/Placeholder.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        rounded?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PlaceholderProps = typeof __propDef.props;
+export declare type PlaceholderEvents = typeof __propDef.events;
+export declare type PlaceholderSlots = typeof __propDef.slots;
+export default class Placeholder extends SvelteComponentTyped<PlaceholderProps, PlaceholderEvents, PlaceholderSlots> {
+}
+export {};

package/buttons/Button.svelte

@@ -51,11 +51,11 @@ const outlineClasses = {
     purple: 'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900'
 };
 const sizeClasses = {
-    xs: 'text-xs px-2 py-1',
-    sm: 'text-sm px-3 py-1.5',
-    md: 'text-sm px-4 py-2',
-    lg: 'text-base px-5 py-2.5',
-    xl: 'text-base px-6 py-3'
+    xs: 'px-3 py-2 text-xs',
+    sm: 'px-3 py-2 text-sm',
+    md: 'px-5 py-2.5 text-sm',
+    lg: 'px-5 py-3 text-base',
+    xl: 'px-6 py-3.5 text-base'
 };
 let buttonClass;
 $: buttonClass = classNames('group text-center font-medium focus:ring-4 focus:outline-none', outline && gradient ? 'p-0.5' : 'inline-flex items-center justify-center ' + sizeClasses[size], gradient ? gradientClasses[color] : outline ? outlineClasses[color] : colorClasses[color], pill ? 'rounded-full' : 'rounded-lg', shadow && coloredShadowClasses[shadow], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);

package/forms/Fileupload.svelte

@@ -1,14 +1,13 @@
 <script>export let value = '';
 export let id = 'user_avatar';
-export let label = 'Upload file';
-export let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" for="user_avatar';
 export let inputClass = 'block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400';
-export let divClass = 'mt-1 text-sm text-gray-500 dark:text-gray-300';
-export let helper = '';
 </script>
 
-<label class={labelClass} for={id}>{label}</label>
-<input bind:value class={inputClass} aria-describedby="{id}_help" {id} type="file" />
-{#if helper}
-	<div class={divClass} id="{id}_help">{helper}</div>
-{/if}
+<input
+	{...$$restProps}
+	bind:value
+	class={inputClass}
+	aria-describedby="{id}_help"
+	{id}
+	type="file"
+/>

package/forms/Fileupload.svelte.d.ts

@@ -1,13 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         value?: string;
         id?: string;
-        label?: string;
-        labelClass?: string;
         inputClass?: string;
-        divClass?: string;
-        helper?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/forms/FloatingLabelInput.svelte

@@ -2,9 +2,7 @@
 export let id = generateId();
 export let type;
 export let value = '';
-export let name = '';
 export let label = '';
-export let required = false;
 export let divClass = 'relative z-0 mb-6 w-full group';
 export let inputClass = 'block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer';
 export let labelClass = 'absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6';
@@ -14,6 +12,6 @@ function setType(node) {
 </script>
 
 <div class={divClass}>
-	<input bind:value use:setType {name} class={inputClass} placeholder=" " {required} />
+	<input {...$$restProps} bind:value use:setType class={inputClass} placeholder=" " />
 	<label for={id} class={labelClass}>{label}</label>
 </div>

package/forms/FloatingLabelInput.svelte.d.ts

@@ -2,12 +2,11 @@ import { SvelteComponentTyped } from "svelte";
 import type { InputType } from '../types';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         id?: string;
         type: InputType;
         value?: string;
-        name?: string;
         label?: string;
-        required?: boolean;
         divClass?: string;
         inputClass?: string;
         labelClass?: string;

package/forms/Input.svelte

@@ -25,10 +25,6 @@ function setType(node) {
 		inputClass,
 		colorClasses[color],
 		{
-			// 'pl-10': icon !== null,
-			// 'rounded-lg': !($$slots.addon || addon),
-			// 'rounded-r-lg': $$slots.addon || addon,
-			// 'shadow-sm dark:shadow-sm-light': shadow,
 			'p-2 sm:text-xs': size === 'sm',
 			'p-2.5 text-sm': size === 'md',
 			'sm:text-md p-4': size === 'lg'

package/forms/Radio.svelte

@@ -42,6 +42,7 @@ else {
 	<div class="flex">
 		<div class={divHelperClass}>
 			<input
+				{...$$restProps}
 				bind:group
 				{id}
 				type="radio"
@@ -51,7 +52,6 @@ else {
 				aria-labelledby={id}
 				aria-describedby={id}
 				{disabled}
-				{...$$restProps}
 			/>
 		</div>
 		<div class="ml-2 text-sm">

package/forms/Range.svelte

@@ -1,5 +1,4 @@
 <script>export let id = 'range';
-export let label = 'Range';
 export let min;
 export let max;
 export let value;
@@ -17,10 +16,8 @@ else {
 }
 </script>
 
-<label for={id} class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-	>{label}</label
->
 <input
+	{...$$restProps}
 	{id}
 	name={id}
 	type="range"
@@ -29,5 +26,4 @@ else {
 	bind:value
 	{step}
 	class={inputClass}
-	{...$$restProps}
 />

package/forms/Range.svelte.d.ts

@@ -3,7 +3,6 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         id?: string;
-        label?: string;
         min: number;
         max: number;
         value: number;

package/forms/Search.svelte

@@ -9,9 +9,21 @@ export let placeholder = 'Search';
 	<label for={id} class={labelClass}>Search</label>
 	<div class="relative">
 		<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-			<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+			<svg
+				class="w-5 h-5 text-gray-500 dark:text-gray-400"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+				/></svg
+			>
 		</div>
-		<input type="search" {id} class={inputClass} {placeholder} {...$$restProps} />
+		<input {...$$restProps} type="search" {id} class={inputClass} {placeholder} />
 		<button type="submit" class={btnClass}>Search</button>
 	</div>
 </form>

package/forms/Select.svelte

@@ -1,13 +1,7 @@
-<script>import generateId from '../utils/generateId.js';
-export let value;
-export let id = generateId();
-export let name = '';
-export let label = '';
-export let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400';
+<script>export let value;
 export let selectClass = '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-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
 </script>
 
-<label for={id} class={labelClass}>{label}</label>
-<select bind:value {id} {name} class={selectClass} on:change>
+<select {...$$restProps} bind:value class={selectClass} on:change>
 	<slot />
 </select>

package/forms/Select.svelte.d.ts

@@ -1,11 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         value: string | number;
-        id?: string;
-        name?: string;
-        label?: string;
-        labelClass?: string;
         selectClass?: string;
     };
     events: {

package/forms/SimpleSearch.svelte

@@ -23,7 +23,7 @@ export let placeholder = 'Search';
 				/></svg
 			>
 		</div>
-		<input type="text" {id} class={inputClass} {placeholder} {...$$restProps} />
+		<input {...$$restProps} type="text" {id} class={inputClass} {placeholder} />
 	</div>
 	<button type="submit" class={btnClass}
 		><svg

package/forms/VoiceSearch.svelte

@@ -30,7 +30,7 @@ const handleVoiceBtn = () => {
 				/></svg
 			>
 		</div>
-		<input type="text" {id} class={inputClass} {placeholder} {...$$restProps} />
+		<input {...$$restProps} type="text" {id} class={inputClass} {placeholder} />
 		<button type="button" class={voiceBtnClass} on:click={handleVoiceBtn}>
 			<svg
 				class={voiceIconClass}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.21.3",
+  "version": "0.21.6",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -97,6 +97,8 @@
     "./accordions/AccordionItem.svelte": "./accordions/AccordionItem.svelte",
     "./alerts/Alert.svelte": "./alerts/Alert.svelte",
     "./avatar/Avatar.svelte": "./avatar/Avatar.svelte",
+    "./avatar/Dot.svelte": "./avatar/Dot.svelte",
+    "./avatar/Placeholder.svelte": "./avatar/Placeholder.svelte",
     "./badges/Badge.svelte": "./badges/Badge.svelte",
     "./breadcrumbs/Breadcrumb.svelte": "./breadcrumbs/Breadcrumb.svelte",
     "./breadcrumbs/BreadcrumbItem.svelte": "./breadcrumbs/BreadcrumbItem.svelte",

package/sidebars/Sidebar.svelte

@@ -2,6 +2,6 @@
 export let asideClass = 'w-64';
 </script>
 
-<aside class={classNames(asideClass, $$props.class)} {...$$restProps} aria-label="Sidebar">
+<aside {...$$restProps} class={classNames(asideClass, $$props.class)} aria-label="Sidebar">
 	<slot />
 </aside>

package/sidebars/SidebarBrand.svelte

@@ -5,7 +5,7 @@ export let imgClass = 'h-6 mr-3 sm:h-7';
 export let spanClass = 'self-center text-xl font-semibold whitespace-nowrap dark:text-white';
 </script>
 
-<a href={site.href} class={classNames(aClass, $$props.class)} {...$$restProps}>
+<a {...$$restProps} href={site.href} class={classNames(aClass, $$props.class)}>
 	<img src={site.img} class={imgClass} alt={site.name} />
 	<span class={spanClass}>{site.name}</span>
 </a>

package/sidebars/SidebarCta.svelte

@@ -6,9 +6,9 @@ export let label = '';
 </script>
 
 <div
+	{...$$restProps}
 	id="dropdown-cta"
 	class={classNames(divWrapperClass, $$props.class)}
-	{...$$restProps}
 	role="alert"
 >
 	<div class={divClass}>

package/sidebars/SidebarDropdownItem.svelte

@@ -5,5 +5,5 @@ export let label = '';
 </script>
 
 <li>
-	<a {href} class={classNames(aClass, $$props.class)} {...$$restProps}>{label}</a>
+	<a {...$$restProps} {href} class={classNames(aClass, $$props.class)}>{label}</a>
 </li>

package/sidebars/SidebarDropdownWrapper.svelte

@@ -15,10 +15,10 @@ const handleDropdown = () => {
 
 <li>
 	<button
+		{...$$restProps}
 		on:click={() => handleDropdown()}
 		type="button"
 		class={classNames(btnClass, $$props.class)}
-		{...$$restProps}
 		aria-controls="sidebar-dropdown"
 	>
 		<svelte:component

package/sidebars/SidebarGroup.svelte

@@ -7,6 +7,6 @@ if (border) {
 }
 </script>
 
-<ul class={classNames(ulClass, $$props.class)} {...$$restProps}>
+<ul {...$$restProps} class={classNames(ulClass, $$props.class)}>
 	<slot />
 </ul>

package/sidebars/SidebarItem.svelte

@@ -1,14 +1,13 @@
 <script>import classNames from 'classnames';
 export let aClass = 'flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
 export let href = '';
-export let rel = '';
 export let label = '';
 export let spanClass = 'ml-3';
 export let icon;
 </script>
 
 <li>
-	<a {href} {rel} class={classNames(aClass, $$props.class)} {...$$restProps}>
+	<a {...$$restProps} {href} class={classNames(aClass, $$props.class)}>
 		<svelte:component
 			this={icon.name}
 			size={icon.size}

package/sidebars/SidebarItem.svelte.d.ts

@@ -5,7 +5,6 @@ declare const __propDef: {
         [x: string]: any;
         aClass?: string;
         href?: string;
-        rel?: string;
         label?: string;
         spanClass?: string;
         icon: IconType;

package/sidebars/SidebarWrapper.svelte

@@ -2,6 +2,6 @@
 export let divClass = 'overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800';
 </script>
 
-<div class={classNames(divClass, $$props.class)} {...$$restProps}>
+<div {...$$restProps} class={classNames(divClass, $$props.class)}>
 	<slot />
 </div>

package/types.d.ts

@@ -62,6 +62,10 @@ export declare type CrumbType = {
     label: string;
     href: string;
 };
+export interface DotType {
+    top?: boolean;
+    color?: string;
+}
 export declare type DropdownColorType = 'blue' | 'blue-outline' | 'dark' | 'dark-outline' | 'light' | 'green' | 'green-outline' | 'red' | 'red-outline' | 'yellow' | 'yellow-outline' | 'purple' | 'purple-outline';
 export interface DropdownType {
     name: string;