flowbite-svelte 0.16.10 → 0.16.11

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 (10) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/buttongroups/ButtonGroupItem.svelte +2 -2
  3. package/buttongroups/ButtonGroupItem.svelte.d.ts +2 -0
  4. package/forms/Checkbox.svelte +32 -10
  5. package/forms/Input.svelte +19 -8
  6. package/forms/Radio.svelte +9 -9
  7. package/forms/Radio.svelte.d.ts +5 -5
  8. package/forms/Range.svelte +14 -2
  9. package/forms/Toggle.svelte +1 -1
  10. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,20 @@
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.11](https://github.com/themesberg/flowbite-svelte/compare/v0.16.10...v0.16.11) (2022-06-06)
6
+
7
+
8
+ ### Features
9
+
10
+ * add on:click to ButtonGroupItem ([f3229de](https://github.com/themesberg/flowbite-svelte/commit/f3229dedfced6dcb4114a47370bb144bf4a07ae3))
11
+
12
+
13
+ ### Bug Fixes
14
+
15
+ * forms components moved all export variables before function ([13d518b](https://github.com/themesberg/flowbite-svelte/commit/13d518b58f5aa09a0dcb4de439860afb1d84e3d0))
16
+ * Input component move let padding before using it ([4fac17c](https://github.com/themesberg/flowbite-svelte/commit/4fac17cab3ebf67eb2ed4502356bbd5b5eb9aea1))
17
+ * props update ([2feb352](https://github.com/themesberg/flowbite-svelte/commit/2feb3520eb74eb5f7ef0c0688e288723a7d7ee40))
18
+
5
19
  ### [0.16.10](https://github.com/themesberg/flowbite-svelte/compare/v0.16.9...v0.16.10) (2022-06-05)
6
20
 
7
21
 
package/buttongroups/ButtonGroupItem.svelte CHANGED
@@ -8,9 +8,9 @@ if (outline) {
8
8
  </script>
9
9
 
10
10
  {#if href}
11
- <a {href} class="{btnClass} {$$props.class}"><slot /></a>
11
+ <a {href} class="{btnClass} {$$props.class}" on:click><slot /></a>
12
12
  {:else}
13
- <button type="button" class="{btnClass} {$$props.class}">
13
+ <button type="button" class="{btnClass} {$$props.class}" on:click>
14
14
  <slot />
15
15
  </button>
16
16
  {/if}
package/buttongroups/ButtonGroupItem.svelte.d.ts CHANGED
@@ -8,6 +8,8 @@ declare const __propDef: {
8
8
  href?: string;
9
9
  };
10
10
  events: {
11
+ click: MouseEvent;
12
+ } & {
11
13
  [evt: string]: CustomEvent<any>;
12
14
  };
13
15
  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 {id} type="checkbox" bind:checked {name} {value} class={inputClass} aria-labelledby={id} aria-describedby={id} {disabled} {...$$restProps} />
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 {id} type="checkbox" bind:checked {name} {value} class={inputClass} aria-labelledby={id} aria-describedby={id} {disabled} {...$$restProps} />
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 bind:value bind:this={ref} {name} use:setType {id} class={inputClass} {placeholder} {required} {disabled} {readonly} />
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 divClass = 'flex items-center mr-4';
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">{label}</label>
21
- <input {id} name={id} type="range" {min} {max} bind:value {step} class={inputClass} {...$$restProps} />
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,10 +10,10 @@ 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
18
  divClass =
19
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";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.16.10",
3
+ "version": "0.16.11",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "index.js",
6
6
  "author": {