flowbite-svelte 0.21.13 → 0.21.16

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 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.16](https://github.com/themesberg/flowbite-svelte/compare/v0.21.14...v0.21.16) (2022-07-20)
+
+
+### Bug Fixes
+
+* dropdown search ([4416a31](https://github.com/themesberg/flowbite-svelte/commit/4416a312756331f6dd04b1d5fe5dd61b764fd38d))
+* padding issues with dropdown ([6a48d4d](https://github.com/themesberg/flowbite-svelte/commit/6a48d4dc6a262fc62aa2d9b4c6233bf1cee4b741))
+* padding issues with dropdown ([8e8c2d4](https://github.com/themesberg/flowbite-svelte/commit/8e8c2d4bed3e85e95c28e936c513489e6d975e8f))
+
+### [0.21.15](https://github.com/themesberg/flowbite-svelte/compare/v0.21.14...v0.21.15) (2022-07-20)
+
+
+### Bug Fixes
+
+* dropdown search ([4416a31](https://github.com/themesberg/flowbite-svelte/commit/4416a312756331f6dd04b1d5fe5dd61b764fd38d))
+* padding issues with dropdown ([6a48d4d](https://github.com/themesberg/flowbite-svelte/commit/6a48d4dc6a262fc62aa2d9b4c6233bf1cee4b741))
+* padding issues with dropdown ([8e8c2d4](https://github.com/themesberg/flowbite-svelte/commit/8e8c2d4bed3e85e95c28e936c513489e6d975e8f))
+
+### [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)

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

@@ -27,9 +27,10 @@ let inputClass; // get the value from the underlying Radio
 export let custom = false;
 export let color = 'blue';
 export let inline = false;
+export let tinted = false;
 </script>
 
-<Radio class={$$restProps.class} bind:inputClass {color} {custom} {inline}>
+<Radio class={$$restProps.class} bind:inputClass {color} {custom} {inline} {tinted}>
 	<input
 		slot="input"
 		type="checkbox"

package/forms/Checkbox.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         custom?: boolean;
         color?: FormColorType;
         inline?: boolean;
+        tinted?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -15,10 +15,11 @@ import classNames from 'classnames';
 export let color = 'blue';
 export let custom = false;
 export let inline = false;
+export let tinted = false;
 export let group = '';
 export let value = '';
 export let inputClass;
-$: inputClass = classNames('w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 mr-2', custom && 'sr-only peer', colorClasses[color]);
+$: inputClass = classNames('w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 mr-2', tinted ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', custom && 'sr-only peer', colorClasses[color]);
 let colorLabel = 'gray';
 $: colorLabel = $$restProps.disabled ? 'disabled' : colorLabel;
 let labelClass;

package/forms/Radio.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         color?: FormColorType;
         custom?: boolean;
         inline?: boolean;
+        tinted?: boolean;
         group?: number | string;
         value?: string;
         inputClass: string;

package/package.json

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