flowbite-svelte 0.21.12 → 0.21.15

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.15](https://github.com/themesberg/flowbite-svelte/compare/v0.21.14...v0.21.15) (2022-07-20)
+
+
+### Bug Fixes
+
+* add on:click to Toggle, Radio, and Checkbox component ([82cb3f0](https://github.com/themesberg/flowbite-svelte/commit/82cb3f032e85ba91015a545ee1ff325c08962855))
+
+### [0.21.14](https://github.com/themesberg/flowbite-svelte/compare/v0.21.13...v0.21.14) (2022-07-19)
+
+
+### Features
+
+* update floating label component ([d04caf9](https://github.com/themesberg/flowbite-svelte/commit/d04caf981a0cbbed37a82df1899d4584908b9171))
+
+
+### Bug Fixes
+
+* multi-dropdown detach ([3ad1abb](https://github.com/themesberg/flowbite-svelte/commit/3ad1abb66e0fcb4ea53db8e0180e28b568e98aa6))
+
+### [0.21.13](https://github.com/themesberg/flowbite-svelte/compare/v0.21.12...v0.21.13) (2022-07-19)
+
 ### [0.21.12](https://github.com/themesberg/flowbite-svelte/compare/v0.21.11...v0.21.12) (2022-07-19)
 
 ### [0.21.11](https://github.com/themesberg/flowbite-svelte/compare/v0.21.10...v0.21.11) (2022-07-18)

package/dropdowns/DropdownDivider.svelte

@@ -2,4 +2,4 @@
 export let divClass = 'my-1 h-px bg-gray-100 dark:bg-gray-600';
 </script>
 
-<div class={classNames(divClass, $$props.class)} {...$$restProps} />
+<div {...$$restProps} class={classNames(divClass, $$props.class)} />

package/forms/Checkbox.svelte

@@ -31,6 +31,7 @@ export let inline = false;
 
 <Radio class={$$restProps.class} bind:inputClass {color} {custom} {inline}>
 	<input
+		on:click
 		slot="input"
 		type="checkbox"
 		bind:checked

package/forms/Checkbox.svelte.d.ts

@@ -11,6 +11,8 @@ declare const __propDef: {
         inline?: boolean;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/forms/FloatingLabelInput.svelte

@@ -1,17 +1,97 @@
-<script>import generateId from '../utils/generateId.js';
+<script>import classNames from 'classnames';
+import generateId from '../utils/generateId.js';
 export let id = generateId();
-export let type;
+export let style = 'standard';
+export let type = 'text';
+export let size = 'default';
+export let color = 'base';
 export let value = '';
 export let label = '';
-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';
+const divClasses = {
+    filled: 'relative',
+    outlined: 'relative',
+    standard: 'relative z-0'
+};
+const inputSizes = {
+    filled: {
+        small: 'px-2.5 pb-1.5 pt-4',
+        default: 'px-2.5 pb-2.5 pt-5'
+    },
+    outlined: {
+        small: 'px-2.5 pb-1.5 pt-3',
+        default: 'px-2.5 pb-2.5 pt-4'
+    },
+    standard: {
+        small: 'py-2 px-0',
+        default: 'py-2.5 px-0'
+    }
+};
+const labelSizes = {
+    filled: {
+        small: 'top-3',
+        default: 'top-4'
+    },
+    outlined: {
+        small: 'top-1',
+        default: 'top-2'
+    },
+    standard: {
+        small: 'top-3',
+        default: 'top-3'
+    }
+};
+const inputClasses = {
+    filled: 'block rounded-t-lg w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 appearance-none dark:text-white focus:outline-none focus:ring-0 peer',
+    outlined: 'block w-full text-sm text-gray-900 bg-transparent rounded-lg border-1 appearance-none dark:text-white  focus:outline-none focus:ring-0 peer',
+    standard: 'block w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 appearance-none dark:text-white  focus:outline-none focus:ring-0 peer'
+};
+const labelClasses = {
+    filled: 'absolute text-sm duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4',
+    outlined: 'absolute text-sm duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white dark:bg-gray-900 px-2 peer-focus:px-2  peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-1',
+    standard: 'absolute text-sm duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6'
+};
+const inputColorClasses = {
+    base: 'border-gray-300 dark:border-gray-600 dark:focus:border-blue-500 focus:border-blue-600',
+    green: 'border-green-600 dark:border-green-500 dark:focus:border-green-500 focus:border-green-600',
+    red: 'border-red-600 dark:border-red-500 dark:focus:border-red-500  focus:border-red-600'
+};
+const labelColorClasses = {
+    base: 'text-gray-500 dark:text-gray-400 peer-focus:text-blue-600 peer-focus:dark:text-blue-500',
+    green: 'text-green-600 dark:text-green-500',
+    red: 'text-red-600 dark:text-red-500'
+};
+export let ref = null;
+// you need to this to avoid 2-way binding
 function setType(node) {
     node.type = type;
 }
 </script>
 
-<div class={divClass}>
-	<input {...$$restProps} bind:value use:setType class={inputClass} placeholder=" " />
-	<label for={id} class={labelClass}>{label}</label>
+<div class={divClasses[style]}>
+	<input
+		{id}
+		{...$$restProps}
+		bind:value
+		bind:this={ref}
+		use:setType
+		placeholder=" "
+		class={classNames(
+			inputClasses[style],
+			inputColorClasses[color],
+			inputSizes[style][size],
+			$$props.class
+		)}
+	/>
+
+	<label
+		for={id}
+		class={classNames(
+			labelClasses[style],
+			labelColorClasses[color],
+			labelSizes[style][size],
+			$$props.labelClass
+		)}
+	>
+		{label}
+	</label>
 </div>

package/forms/FloatingLabelInput.svelte.d.ts

@@ -4,12 +4,13 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         id?: string;
-        type: InputType;
+        style?: 'filled' | 'outlined' | 'standard';
+        type?: InputType;
+        size?: 'small' | 'default';
+        color?: 'base' | 'green' | 'red';
         value?: string;
         label?: string;
-        divClass?: string;
-        inputClass?: string;
-        labelClass?: string;
+        ref?: HTMLElement;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/forms/Radio.svelte

@@ -43,7 +43,7 @@ const colorClasses = {
 <!-- svelte-ignore a11y-label-has-associated-control -->
 <label class={labelClass}>
 	<slot name="input">
-		<input type="radio" bind:group {value} {...$$restProps} class={inputClass} />
+		<input type="radio" bind:group {value} {...$$restProps} class={inputClass} on:click />
 	</slot>
 	<slot />
 </label>

package/forms/Radio.svelte.d.ts

@@ -11,6 +11,8 @@ declare const __propDef: {
         inputClass: string;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/forms/Toggle.svelte

@@ -18,7 +18,7 @@ const sizes = {
 };
 </script>
 
-<Checkbox custom class="relative {$$restProps.class}" {...$$restProps}>
+<Checkbox on:click custom class="relative {$$restProps.class}" {...$$restProps}>
 	<div class={classNames(common, colors[$$restProps.color ?? 'blue'], sizes[size])} />
 	<slot />
 </Checkbox>

package/forms/Toggle.svelte.d.ts

@@ -5,6 +5,8 @@ declare const __propDef: {
         size?: 'small' | 'default' | 'large';
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/package.json

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