flowbite-svelte 0.21.13 → 0.21.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dropdowns/DropdownDivider.svelte +1 -1
  3. package/forms/FloatingLabelInput.svelte +88 -8
  4. package/forms/FloatingLabelInput.svelte.d.ts +5 -4
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,18 @@
2
2
 
3
3
  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.
4
4
 
5
+ ### [0.21.14](https://github.com/themesberg/flowbite-svelte/compare/v0.21.13...v0.21.14) (2022-07-19)
6
+
7
+
8
+ ### Features
9
+
10
+ * update floating label component ([d04caf9](https://github.com/themesberg/flowbite-svelte/commit/d04caf981a0cbbed37a82df1899d4584908b9171))
11
+
12
+
13
+ ### Bug Fixes
14
+
15
+ * multi-dropdown detach ([3ad1abb](https://github.com/themesberg/flowbite-svelte/commit/3ad1abb66e0fcb4ea53db8e0180e28b568e98aa6))
16
+
5
17
  ### [0.21.13](https://github.com/themesberg/flowbite-svelte/compare/v0.21.12...v0.21.13) (2022-07-19)
6
18
 
7
19
  ### [0.21.12](https://github.com/themesberg/flowbite-svelte/compare/v0.21.11...v0.21.12) (2022-07-19)
package/dropdowns/DropdownDivider.svelte CHANGED
@@ -2,4 +2,4 @@
2
2
  export let divClass = 'my-1 h-px bg-gray-100 dark:bg-gray-600';
3
3
  </script>
4
4
 
5
- <div class={classNames(divClass, $$props.class)} {...$$restProps} />
5
+ <div {...$$restProps} class={classNames(divClass, $$props.class)} />
package/forms/FloatingLabelInput.svelte CHANGED
@@ -1,17 +1,97 @@
1
- <script>import generateId from '../utils/generateId.js';
1
+ <script>import classNames from 'classnames';
2
+ import generateId from '../utils/generateId.js';
2
3
  export let id = generateId();
3
- export let type;
4
+ export let style = 'standard';
5
+ export let type = 'text';
6
+ export let size = 'default';
7
+ export let color = 'base';
4
8
  export let value = '';
5
9
  export let label = '';
6
- export let divClass = 'relative z-0 mb-6 w-full group';
7
- 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';
8
- 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';
10
+ const divClasses = {
11
+ filled: 'relative',
12
+ outlined: 'relative',
13
+ standard: 'relative z-0'
14
+ };
15
+ const inputSizes = {
16
+ filled: {
17
+ small: 'px-2.5 pb-1.5 pt-4',
18
+ default: 'px-2.5 pb-2.5 pt-5'
19
+ },
20
+ outlined: {
21
+ small: 'px-2.5 pb-1.5 pt-3',
22
+ default: 'px-2.5 pb-2.5 pt-4'
23
+ },
24
+ standard: {
25
+ small: 'py-2 px-0',
26
+ default: 'py-2.5 px-0'
27
+ }
28
+ };
29
+ const labelSizes = {
30
+ filled: {
31
+ small: 'top-3',
32
+ default: 'top-4'
33
+ },
34
+ outlined: {
35
+ small: 'top-1',
36
+ default: 'top-2'
37
+ },
38
+ standard: {
39
+ small: 'top-3',
40
+ default: 'top-3'
41
+ }
42
+ };
43
+ const inputClasses = {
44
+ 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',
45
+ 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',
46
+ 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'
47
+ };
48
+ const labelClasses = {
49
+ 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',
50
+ 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',
51
+ 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'
52
+ };
53
+ const inputColorClasses = {
54
+ base: 'border-gray-300 dark:border-gray-600 dark:focus:border-blue-500 focus:border-blue-600',
55
+ green: 'border-green-600 dark:border-green-500 dark:focus:border-green-500 focus:border-green-600',
56
+ red: 'border-red-600 dark:border-red-500 dark:focus:border-red-500 focus:border-red-600'
57
+ };
58
+ const labelColorClasses = {
59
+ base: 'text-gray-500 dark:text-gray-400 peer-focus:text-blue-600 peer-focus:dark:text-blue-500',
60
+ green: 'text-green-600 dark:text-green-500',
61
+ red: 'text-red-600 dark:text-red-500'
62
+ };
63
+ export let ref = null;
64
+ // you need to this to avoid 2-way binding
9
65
  function setType(node) {
10
66
  node.type = type;
11
67
  }
12
68
  </script>
13
69
 
14
- <div class={divClass}>
15
- <input {...$$restProps} bind:value use:setType class={inputClass} placeholder=" " />
16
- <label for={id} class={labelClass}>{label}</label>
70
+ <div class={divClasses[style]}>
71
+ <input
72
+ {id}
73
+ {...$$restProps}
74
+ bind:value
75
+ bind:this={ref}
76
+ use:setType
77
+ placeholder=" "
78
+ class={classNames(
79
+ inputClasses[style],
80
+ inputColorClasses[color],
81
+ inputSizes[style][size],
82
+ $$props.class
83
+ )}
84
+ />
85
+
86
+ <label
87
+ for={id}
88
+ class={classNames(
89
+ labelClasses[style],
90
+ labelColorClasses[color],
91
+ labelSizes[style][size],
92
+ $$props.labelClass
93
+ )}
94
+ >
95
+ {label}
96
+ </label>
17
97
  </div>
package/forms/FloatingLabelInput.svelte.d.ts CHANGED
@@ -4,12 +4,13 @@ declare const __propDef: {
4
4
  props: {
5
5
  [x: string]: any;
6
6
  id?: string;
7
- type: InputType;
7
+ style?: 'filled' | 'outlined' | 'standard';
8
+ type?: InputType;
9
+ size?: 'small' | 'default';
10
+ color?: 'base' | 'green' | 'red';
8
11
  value?: string;
9
12
  label?: string;
10
- divClass?: string;
11
- inputClass?: string;
12
- labelClass?: string;
13
+ ref?: HTMLElement;
13
14
  };
14
15
  events: {
15
16
  [evt: string]: CustomEvent<any>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.21.13",
3
+ "version": "0.21.14",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "index.js",
6
6
  "author": {