flowbite-svelte 0.21.8 → 0.21.11

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 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.11](https://github.com/themesberg/flowbite-svelte/compare/v0.21.10...v0.21.11) (2022-07-18)
+
+
+### Bug Fixes
+
+* add on:change to Input component requested by https://github.com/themesberg/flowbite-svelte/pull/127 ([af5e64d](https://github.com/themesberg/flowbite-svelte/commit/af5e64d84b45f424b6166ff4fa1b5634a6f387d0))
+
+### [0.21.10](https://github.com/themesberg/flowbite-svelte/compare/v0.21.9...v0.21.10) (2022-07-17)
+
+
+### Features
+
+* add Dropzone ([bb69872](https://github.com/themesberg/flowbite-svelte/commit/bb698721e07c489f1d1900012e60204e0af12e5a))
+
+### [0.21.9](https://github.com/themesberg/flowbite-svelte/compare/v0.21.8...v0.21.9) (2022-07-17)
+
+
+### Features
+
+* add fileupload multiple files and sizes ([81ab128](https://github.com/themesberg/flowbite-svelte/commit/81ab1284902e9e89bf08725a74b22394aae57244))
+
 ### [0.21.8](https://github.com/themesberg/flowbite-svelte/compare/v0.21.7...v0.21.8) (2022-07-17)
 
 

package/forms/Dropzone.svelte

@@ -0,0 +1,14 @@
+<script>export let value = '';
+export let divClass = 'flex justify-center items-center w-full';
+export let labelClass = 'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600';
+export let innerDivClass = 'flex flex-col justify-center items-center pt-5 pb-6';
+</script>
+
+<div class={divClass}>
+	<label for="dropzone-file" class={labelClass}>
+		<div class={innerDivClass}>
+			<slot />
+		</div>
+		<input {...$$restProps} bind:value type="file" class="hidden" />
+	</label>
+</div>

package/forms/Dropzone.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: string;
+        divClass?: string;
+        labelClass?: string;
+        innerDivClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type DropzoneProps = typeof __propDef.props;
+export declare type DropzoneEvents = typeof __propDef.events;
+export declare type DropzoneSlots = typeof __propDef.slots;
+export default class Dropzone extends SvelteComponentTyped<DropzoneProps, DropzoneEvents, DropzoneSlots> {
+}
+export {};

package/forms/Fileupload.svelte

@@ -1,13 +1,16 @@
-<script>export let value = '';
-export let id = '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';
+<script>import classNames from 'classnames';
+export let value = '';
+export let size = 'sm';
+export let inputClass = 'block w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400';
 </script>
 
 <input
 	{...$$restProps}
 	bind:value
-	class={inputClass}
-	aria-describedby="{id}_help"
-	{id}
+	class={classNames(inputClass, {
+		'mb-5 text-xs': size === 'xs',
+		'mb-5 text-sm': size === 'sm',
+		'text-lg': size === 'lg'
+	})}
 	type="file"
 />

package/forms/Fileupload.svelte.d.ts

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         value?: string;
-        id?: string;
+        size?: 'xs' | 'sm' | 'lg';
         inputClass?: string;
     };
     events: {

package/forms/Input.svelte

@@ -20,6 +20,7 @@ function setType(node) {
 	{...$$restProps}
 	bind:value
 	bind:this={ref}
+	on:change
 	use:setType
 	class={classNames(
 		inputClass,

package/forms/Input.svelte.d.ts

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

package/index.d.ts

@@ -29,6 +29,7 @@ export { default as FooterIcon } from './footer/FooterIcon.svelte';
 export { default as FooterLink } from './footer/FooterLink.svelte';
 export { default as FooterLinkGroup } from './footer/FooterLinkGroup.svelte';
 export { default as Checkbox } from './forms/Checkbox.svelte';
+export { default as Dropzone } from './forms/Dropzone.svelte';
 export { default as Fileupload } from './forms/Fileupload.svelte';
 export { default as FloatingLabelInput } from './forms/FloatingLabelInput.svelte';
 export { default as Helper } from './forms/Helper.svelte';

package/index.js

@@ -42,6 +42,7 @@ export { default as FooterLink } from './footer/FooterLink.svelte';
 export { default as FooterLinkGroup } from './footer/FooterLinkGroup.svelte';
 // Forms
 export { default as Checkbox } from './forms/Checkbox.svelte';
+export { default as Dropzone } from './forms/Dropzone.svelte';
 export { default as Fileupload } from './forms/Fileupload.svelte';
 export { default as FloatingLabelInput } from './forms/FloatingLabelInput.svelte';
 export { default as Helper } from './forms/Helper.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.21.8",
+  "version": "0.21.11",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -134,6 +134,7 @@
     "./footer/SitemapFooter.svelte": "./footer/SitemapFooter.svelte",
     "./footer/SocialMediaFooter.svelte": "./footer/SocialMediaFooter.svelte",
     "./forms/Checkbox.svelte": "./forms/Checkbox.svelte",
+    "./forms/Dropzone.svelte": "./forms/Dropzone.svelte",
     "./forms/Fileupload.svelte": "./forms/Fileupload.svelte",
     "./forms/FloatingLabelInput.svelte": "./forms/FloatingLabelInput.svelte",
     "./forms/Helper.svelte": "./forms/Helper.svelte",