flowbite-svelte 0.21.2 → 0.21.5

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 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.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,7 +2,6 @@
 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';
@@ -14,6 +13,6 @@ function setType(node) {
 </script>
 
 <div class={divClass}>
-	<input bind:value use:setType {name} class={inputClass} placeholder=" " {required} />
+	<input bind:value use:setType class={inputClass} placeholder=" " {...$$restProps} />
 	<label for={id} class={labelClass}>{label}</label>
 </div>

package/forms/FloatingLabelInput.svelte.d.ts

@@ -2,10 +2,10 @@ 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;

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/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,9 +16,6 @@ else {
 }
 </script>
 
-<label for={id} class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-	>{label}</label
->
 <input
 	{id}
 	name={id}

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/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 bind:value class={selectClass} {...$$restProps} 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.21.2",
+  "version": "0.21.5",
   "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/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;