flowbite-svelte 0.16.9 → 0.16.12
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.
- package/CHANGELOG.md +28 -0
- package/buttongroups/ButtonGroupItem.svelte +4 -3
- package/buttongroups/ButtonGroupItem.svelte.d.ts +4 -0
- package/forms/Checkbox.svelte +32 -10
- package/forms/Input.svelte +19 -8
- package/forms/Radio.svelte +9 -9
- package/forms/Radio.svelte.d.ts +5 -5
- package/forms/Range.svelte +14 -2
- package/forms/Toggle.svelte +18 -10
- package/forms/Toggle.svelte.d.ts +2 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,34 @@
|
|
|
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.16.12](https://github.com/themesberg/flowbite-svelte/compare/v0.16.11...v0.16.12) (2022-06-07)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* add type to ButtonGroupItem ([1aefa6b](https://github.com/themesberg/flowbite-svelte/commit/1aefa6bd85acabc05b9ba8016b8e1f46bd55baef))
|
|
11
|
+
|
|
12
|
+
### [0.16.11](https://github.com/themesberg/flowbite-svelte/compare/v0.16.10...v0.16.11) (2022-06-06)
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
* add on:click to ButtonGroupItem ([f3229de](https://github.com/themesberg/flowbite-svelte/commit/f3229dedfced6dcb4114a47370bb144bf4a07ae3))
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Bug Fixes
|
|
21
|
+
|
|
22
|
+
* forms components moved all export variables before function ([13d518b](https://github.com/themesberg/flowbite-svelte/commit/13d518b58f5aa09a0dcb4de439860afb1d84e3d0))
|
|
23
|
+
* Input component move let padding before using it ([4fac17c](https://github.com/themesberg/flowbite-svelte/commit/4fac17cab3ebf67eb2ed4502356bbd5b5eb9aea1))
|
|
24
|
+
* props update ([2feb352](https://github.com/themesberg/flowbite-svelte/commit/2feb3520eb74eb5f7ef0c0688e288723a7d7ee40))
|
|
25
|
+
|
|
26
|
+
### [0.16.10](https://github.com/themesberg/flowbite-svelte/compare/v0.16.9...v0.16.10) (2022-06-05)
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
### Features
|
|
30
|
+
|
|
31
|
+
* add on:click to forms/Toggle component ([3b9ba37](https://github.com/themesberg/flowbite-svelte/commit/3b9ba3730421fa7096efee80225c60038ad903b9))
|
|
32
|
+
|
|
5
33
|
### [0.16.9](https://github.com/themesberg/flowbite-svelte/compare/v0.16.8...v0.16.9) (2022-06-05)
|
|
6
34
|
|
|
7
35
|
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
<script>export let
|
|
1
|
+
<script>export let type = 'button';
|
|
2
|
+
export let btnClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white first:rounded-l-lg border-t border-b first:border last:rounded-r-md last:border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white';
|
|
2
3
|
export let outlineClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-transparent first:rounded-l-lg border-t border-b first:border last:rounded-r-md last:border border-gray-900 hover:bg-gray-900 hover:text-white focus:z-10 focus:ring-2 focus:ring-gray-500 focus:bg-gray-900 focus:text-white dark:border-white dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:bg-gray-700';
|
|
3
4
|
export let outline = false;
|
|
4
5
|
export let href = '';
|
|
@@ -8,9 +9,9 @@ if (outline) {
|
|
|
8
9
|
</script>
|
|
9
10
|
|
|
10
11
|
{#if href}
|
|
11
|
-
<a {href} class="{btnClass} {$$props.class}"><slot /></a>
|
|
12
|
+
<a {href} class="{btnClass} {$$props.class}" on:click><slot /></a>
|
|
12
13
|
{:else}
|
|
13
|
-
<button type
|
|
14
|
+
<button {type} class="{btnClass} {$$props.class}" on:click>
|
|
14
15
|
<slot />
|
|
15
16
|
</button>
|
|
16
17
|
{/if}
|
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
import type { ButtonType } from '../types';
|
|
2
3
|
declare const __propDef: {
|
|
3
4
|
props: {
|
|
4
5
|
[x: string]: any;
|
|
6
|
+
type?: ButtonType;
|
|
5
7
|
btnClass?: string;
|
|
6
8
|
outlineClass?: string;
|
|
7
9
|
outline?: boolean;
|
|
8
10
|
href?: string;
|
|
9
11
|
};
|
|
10
12
|
events: {
|
|
13
|
+
click: MouseEvent;
|
|
14
|
+
} & {
|
|
11
15
|
[evt: string]: CustomEvent<any>;
|
|
12
16
|
};
|
|
13
17
|
slots: {
|
package/forms/Checkbox.svelte
CHANGED
|
@@ -2,14 +2,19 @@
|
|
|
2
2
|
export let inputClass = 'w-4 h-4 bg-gray-100 rounded border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 ';
|
|
3
3
|
export let labelClass = 'ml-2 text-sm font-medium text-gray-900 dark:text-gray-300';
|
|
4
4
|
export let disabled = false;
|
|
5
|
-
if (disabled) {
|
|
6
|
-
labelClass = 'ml-2 text-sm font-medium text-gray-400 dark:text-gray-500';
|
|
7
|
-
}
|
|
8
5
|
export let name = '';
|
|
9
6
|
export let divHelperClass = 'flex items-center h-5';
|
|
10
7
|
export let labelHelperClass = 'font-medium text-gray-900 dark:text-gray-300';
|
|
11
8
|
export let helperClass = 'text-xs font-normal text-gray-500 dark:text-gray-300';
|
|
12
9
|
export let color = 'blue';
|
|
10
|
+
export let helper = '';
|
|
11
|
+
export let id = '';
|
|
12
|
+
export let value = '';
|
|
13
|
+
export let label = '';
|
|
14
|
+
export let checked = false;
|
|
15
|
+
if (disabled) {
|
|
16
|
+
labelClass = 'ml-2 text-sm font-medium text-gray-400 dark:text-gray-500';
|
|
17
|
+
}
|
|
13
18
|
if (color === 'red') {
|
|
14
19
|
inputClass += 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600';
|
|
15
20
|
}
|
|
@@ -31,17 +36,23 @@ else if (color === 'orange') {
|
|
|
31
36
|
else {
|
|
32
37
|
inputClass += 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600';
|
|
33
38
|
}
|
|
34
|
-
export let helper = '';
|
|
35
|
-
export let id = '';
|
|
36
|
-
export let value = '';
|
|
37
|
-
export let label = '';
|
|
38
|
-
export let checked = false;
|
|
39
39
|
</script>
|
|
40
40
|
|
|
41
41
|
{#if helper}
|
|
42
42
|
<div class="flex">
|
|
43
43
|
<div class={divHelperClass}>
|
|
44
|
-
<input
|
|
44
|
+
<input
|
|
45
|
+
{id}
|
|
46
|
+
type="checkbox"
|
|
47
|
+
bind:checked
|
|
48
|
+
{name}
|
|
49
|
+
{value}
|
|
50
|
+
class={inputClass}
|
|
51
|
+
aria-labelledby={id}
|
|
52
|
+
aria-describedby={id}
|
|
53
|
+
{disabled}
|
|
54
|
+
{...$$restProps}
|
|
55
|
+
/>
|
|
45
56
|
</div>
|
|
46
57
|
<div class="ml-2 text-sm">
|
|
47
58
|
<label for={id} class={labelHelperClass}>
|
|
@@ -52,7 +63,18 @@ export let checked = false;
|
|
|
52
63
|
</div>
|
|
53
64
|
{:else}
|
|
54
65
|
<div class={divClass}>
|
|
55
|
-
<input
|
|
66
|
+
<input
|
|
67
|
+
{id}
|
|
68
|
+
type="checkbox"
|
|
69
|
+
bind:checked
|
|
70
|
+
{name}
|
|
71
|
+
{value}
|
|
72
|
+
class={inputClass}
|
|
73
|
+
aria-labelledby={id}
|
|
74
|
+
aria-describedby={id}
|
|
75
|
+
{disabled}
|
|
76
|
+
{...$$restProps}
|
|
77
|
+
/>
|
|
56
78
|
<label for={id} class={labelClass}>
|
|
57
79
|
{@html label}
|
|
58
80
|
</label>
|
package/forms/Input.svelte
CHANGED
|
@@ -8,6 +8,13 @@ export let required = false;
|
|
|
8
8
|
export let placeholder = '';
|
|
9
9
|
export let size = 'text-sm';
|
|
10
10
|
let padding = '';
|
|
11
|
+
export let inputClass = `bg-gray-50 border border-gray-300 text-gray-900 ${size} rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ${padding} 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`;
|
|
12
|
+
export let labelClass = 'block mb-4 text-sm font-medium text-gray-900 dark:text-gray-300';
|
|
13
|
+
export let disabled = false;
|
|
14
|
+
export let readonly = false;
|
|
15
|
+
export let helper = '';
|
|
16
|
+
export let helperClass = 'text-sm text-gray-500 dark:text-gray-400';
|
|
17
|
+
export let ref = null;
|
|
11
18
|
if (size === 'sm:text-md') {
|
|
12
19
|
padding = 'p-4';
|
|
13
20
|
}
|
|
@@ -17,13 +24,6 @@ else if (size === 'text-sm') {
|
|
|
17
24
|
else {
|
|
18
25
|
padding = 'p-2';
|
|
19
26
|
}
|
|
20
|
-
export let inputClass = `bg-gray-50 border border-gray-300 text-gray-900 ${size} rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ${padding} 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`;
|
|
21
|
-
export let labelClass = 'block mb-4 text-sm font-medium text-gray-900 dark:text-gray-300';
|
|
22
|
-
export let disabled = false;
|
|
23
|
-
export let readonly = false;
|
|
24
|
-
export let helper = '';
|
|
25
|
-
export let helperClass = 'text-sm text-gray-500 dark:text-gray-400';
|
|
26
|
-
export let ref = null;
|
|
27
27
|
// you need to this to avoid 2-way binding
|
|
28
28
|
function setType(node) {
|
|
29
29
|
node.type = type;
|
|
@@ -34,7 +34,18 @@ function setType(node) {
|
|
|
34
34
|
{#if label}
|
|
35
35
|
<label for={id} class={labelClass}>{label}</label>
|
|
36
36
|
{/if}
|
|
37
|
-
<input
|
|
37
|
+
<input
|
|
38
|
+
bind:value
|
|
39
|
+
bind:this={ref}
|
|
40
|
+
{name}
|
|
41
|
+
use:setType
|
|
42
|
+
{id}
|
|
43
|
+
class={inputClass}
|
|
44
|
+
{placeholder}
|
|
45
|
+
{required}
|
|
46
|
+
{disabled}
|
|
47
|
+
{readonly}
|
|
48
|
+
/>
|
|
38
49
|
{#if helper}
|
|
39
50
|
<p class={helperClass}>{@html helper}</p>
|
|
40
51
|
{/if}
|
package/forms/Radio.svelte
CHANGED
|
@@ -1,15 +1,20 @@
|
|
|
1
|
-
<script>export let
|
|
1
|
+
<script>export let helper;
|
|
2
|
+
export let id;
|
|
3
|
+
export let value;
|
|
4
|
+
export let label;
|
|
5
|
+
export let group;
|
|
6
|
+
export let divClass = 'flex items-center mr-4';
|
|
2
7
|
export let inputClass = 'w-4 h-4 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 bg-gray-100 border-gray-300 ';
|
|
3
8
|
export let labelClass = 'block ml-2 text-sm font-medium text-gray-900 dark:text-gray-300';
|
|
4
9
|
export let disabled = false;
|
|
5
|
-
if (disabled) {
|
|
6
|
-
labelClass = 'ml-2 text-sm font-medium text-gray-400 dark:text-gray-500';
|
|
7
|
-
}
|
|
8
10
|
export let name = '';
|
|
9
11
|
export let divHelperClass = 'flex items-center h-5';
|
|
10
12
|
export let labelHelperClass = 'font-medium text-gray-900 dark:text-gray-300';
|
|
11
13
|
export let helperClass = 'text-xs font-normal text-gray-500 dark:text-gray-300';
|
|
12
14
|
export let color = 'blue';
|
|
15
|
+
if (disabled) {
|
|
16
|
+
labelClass = 'ml-2 text-sm font-medium text-gray-400 dark:text-gray-500';
|
|
17
|
+
}
|
|
13
18
|
if (color === 'red') {
|
|
14
19
|
inputClass = 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600';
|
|
15
20
|
}
|
|
@@ -31,11 +36,6 @@ else if (color === 'orange') {
|
|
|
31
36
|
else {
|
|
32
37
|
inputClass = 'text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-600';
|
|
33
38
|
}
|
|
34
|
-
export let helper;
|
|
35
|
-
export let id;
|
|
36
|
-
export let value;
|
|
37
|
-
export let label;
|
|
38
|
-
export let group;
|
|
39
39
|
</script>
|
|
40
40
|
|
|
41
41
|
{#if helper}
|
package/forms/Radio.svelte.d.ts
CHANGED
|
@@ -3,6 +3,11 @@ import type { FormColorType } from '../types';
|
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
5
|
[x: string]: any;
|
|
6
|
+
helper: string;
|
|
7
|
+
id: string;
|
|
8
|
+
value: string;
|
|
9
|
+
label: string;
|
|
10
|
+
group: number | string;
|
|
6
11
|
divClass?: string;
|
|
7
12
|
inputClass?: string;
|
|
8
13
|
labelClass?: string;
|
|
@@ -12,11 +17,6 @@ declare const __propDef: {
|
|
|
12
17
|
labelHelperClass?: string;
|
|
13
18
|
helperClass?: string;
|
|
14
19
|
color?: FormColorType;
|
|
15
|
-
helper: string;
|
|
16
|
-
id: string;
|
|
17
|
-
value: string;
|
|
18
|
-
label: string;
|
|
19
|
-
group: number | string;
|
|
20
20
|
};
|
|
21
21
|
events: {
|
|
22
22
|
[evt: string]: CustomEvent<any>;
|
package/forms/Range.svelte
CHANGED
|
@@ -17,5 +17,17 @@ else {
|
|
|
17
17
|
}
|
|
18
18
|
</script>
|
|
19
19
|
|
|
20
|
-
<label for={id} class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
|
21
|
-
|
|
20
|
+
<label for={id} class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
|
21
|
+
>{label}</label
|
|
22
|
+
>
|
|
23
|
+
<input
|
|
24
|
+
{id}
|
|
25
|
+
name={id}
|
|
26
|
+
type="range"
|
|
27
|
+
{min}
|
|
28
|
+
{max}
|
|
29
|
+
bind:value
|
|
30
|
+
{step}
|
|
31
|
+
class={inputClass}
|
|
32
|
+
{...$$restProps}
|
|
33
|
+
/>
|
package/forms/Toggle.svelte
CHANGED
|
@@ -10,38 +10,46 @@ export let disabled = false;
|
|
|
10
10
|
export let labelClass = 'relative inline-flex items-center cursor-pointer';
|
|
11
11
|
export let divClass = "w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600";
|
|
12
12
|
export let inputClass = 'sr-only';
|
|
13
|
+
export let spanClass = 'ml-3 text-sm font-medium text-gray-900 dark:text-gray-300';
|
|
13
14
|
if (color || size) {
|
|
14
15
|
inputClass += ' peer';
|
|
15
16
|
}
|
|
16
|
-
export let spanClass = 'ml-3 text-sm font-medium text-gray-900 dark:text-gray-300';
|
|
17
17
|
if (color === 'red') {
|
|
18
|
-
divClass =
|
|
18
|
+
divClass =
|
|
19
|
+
"w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-red-300 dark:peer-focus:ring-red-800 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-red-600";
|
|
19
20
|
}
|
|
20
21
|
else if (color === 'green') {
|
|
21
|
-
divClass =
|
|
22
|
+
divClass =
|
|
23
|
+
"w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600";
|
|
22
24
|
}
|
|
23
25
|
else if (color === 'purple') {
|
|
24
|
-
divClass =
|
|
26
|
+
divClass =
|
|
27
|
+
"w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600";
|
|
25
28
|
}
|
|
26
29
|
else if (color === 'yellow') {
|
|
27
|
-
divClass =
|
|
30
|
+
divClass =
|
|
31
|
+
"w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-yellow-400";
|
|
28
32
|
}
|
|
29
33
|
else if (color === 'teal') {
|
|
30
|
-
divClass =
|
|
34
|
+
divClass =
|
|
35
|
+
"w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-teal-600";
|
|
31
36
|
}
|
|
32
37
|
else if (color === 'orange') {
|
|
33
|
-
divClass =
|
|
38
|
+
divClass =
|
|
39
|
+
"w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-orange-500";
|
|
34
40
|
}
|
|
35
41
|
else if (size === 'small') {
|
|
36
|
-
divClass =
|
|
42
|
+
divClass =
|
|
43
|
+
"w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600";
|
|
37
44
|
}
|
|
38
45
|
else if (size === 'large') {
|
|
39
|
-
divClass =
|
|
46
|
+
divClass =
|
|
47
|
+
"w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600";
|
|
40
48
|
}
|
|
41
49
|
</script>
|
|
42
50
|
|
|
43
51
|
<label for={id} class={labelClass}>
|
|
44
|
-
<input type="checkbox" {id} class={inputClass} {value} bind:checked {name} {disabled} />
|
|
52
|
+
<input type="checkbox" {id} class={inputClass} {value} bind:checked {name} {disabled} on:click />
|
|
45
53
|
<div class="{divClass} {$$props.class ? $$props.class : ''}" />
|
|
46
54
|
<span class={spanClass}>{label}</span>
|
|
47
55
|
</label>
|
package/forms/Toggle.svelte.d.ts
CHANGED