flowbite-svelte 0.16.10 → 0.16.13

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 (14) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/buttongroups/ButtonGroupItem.svelte +4 -3
  3. package/buttongroups/ButtonGroupItem.svelte.d.ts +4 -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
  11. package/sidebars/Sidebar.svelte +10 -4
  12. package/sidebars/Sidebar.svelte.d.ts +1 -0
  13. package/sidebars/SidebarItem.svelte +8 -2
  14. package/sidebars/SidebarItem.svelte.d.ts +1 -0
package/CHANGELOG.md CHANGED
@@ -2,6 +2,29 @@
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.13](https://github.com/themesberg/flowbite-svelte/compare/v0.16.12...v0.16.13) (2022-06-07)
6
+
7
+ ### [0.16.12](https://github.com/themesberg/flowbite-svelte/compare/v0.16.11...v0.16.12) (2022-06-07)
8
+
9
+
10
+ ### Features
11
+
12
+ * add type to ButtonGroupItem ([1aefa6b](https://github.com/themesberg/flowbite-svelte/commit/1aefa6bd85acabc05b9ba8016b8e1f46bd55baef))
13
+
14
+ ### [0.16.11](https://github.com/themesberg/flowbite-svelte/compare/v0.16.10...v0.16.11) (2022-06-06)
15
+
16
+
17
+ ### Features
18
+
19
+ * add on:click to ButtonGroupItem ([f3229de](https://github.com/themesberg/flowbite-svelte/commit/f3229dedfced6dcb4114a47370bb144bf4a07ae3))
20
+
21
+
22
+ ### Bug Fixes
23
+
24
+ * forms components moved all export variables before function ([13d518b](https://github.com/themesberg/flowbite-svelte/commit/13d518b58f5aa09a0dcb4de439860afb1d84e3d0))
25
+ * Input component move let padding before using it ([4fac17c](https://github.com/themesberg/flowbite-svelte/commit/4fac17cab3ebf67eb2ed4502356bbd5b5eb9aea1))
26
+ * props update ([2feb352](https://github.com/themesberg/flowbite-svelte/commit/2feb3520eb74eb5f7ef0c0688e288723a7d7ee40))
27
+
5
28
  ### [0.16.10](https://github.com/themesberg/flowbite-svelte/compare/v0.16.9...v0.16.10) (2022-06-05)
6
29
 
7
30
 
package/buttongroups/ButtonGroupItem.svelte CHANGED
@@ -1,4 +1,5 @@
1
- <script>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';
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="button" class="{btnClass} {$$props.class}">
14
+ <button {type} class="{btnClass} {$$props.class}" on:click>
14
15
  <slot />
15
16
  </button>
16
17
  {/if}
package/buttongroups/ButtonGroupItem.svelte.d.ts CHANGED
@@ -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 {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.13",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "index.js",
6
6
  "author": {
package/sidebars/Sidebar.svelte CHANGED
@@ -1,20 +1,26 @@
1
- <script>export let site;
1
+ <script>export let divClass = 'overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800';
2
+ export let site;
2
3
  export let cta;
3
4
  </script>
4
5
 
5
6
  <aside class="w-64" aria-label="Sidebar">
6
- <div class="overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800">
7
+ <div class={divClass}>
7
8
  {#if site}
8
9
  <a href={site.href} class="flex items-center pl-2.5 mb-5">
9
10
  <img src={site.img} class="h-6 mr-3 sm:h-7" alt={site.name} />
10
- <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">{site.name}</span>
11
+ <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white"
12
+ >{site.name}</span
13
+ >
11
14
  </a>
12
15
  {/if}
13
16
  <slot />
14
17
  {#if cta}
15
18
  <div id="dropdown-cta" class="p-4 mt-6 bg-blue-50 rounded-lg dark:bg-blue-900" role="alert">
16
19
  <div class="flex items-center mb-3">
17
- <span class="bg-orange-100 text-orange-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-orange-200 dark:text-orange-900">{cta.label}</span>
20
+ <span
21
+ class="bg-orange-100 text-orange-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-orange-200 dark:text-orange-900"
22
+ >{cta.label}</span
23
+ >
18
24
  </div>
19
25
  <p class="mb-3 text-sm text-blue-900 dark:text-blue-400">
20
26
  {cta.text}
package/sidebars/Sidebar.svelte.d.ts CHANGED
@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
2
2
  import type { SiteType, SidebarCtaType } from '../types';
3
3
  declare const __propDef: {
4
4
  props: {
5
+ divClass?: string;
5
6
  site: SiteType;
6
7
  cta: SidebarCtaType;
7
8
  };
package/sidebars/SidebarItem.svelte CHANGED
@@ -1,5 +1,6 @@
1
1
  <script>import SidebarDropdown from './SidebarDropdown.svelte';
2
2
  export let links;
3
+ export let aClass = 'flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
3
4
  export let childClass = 'flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
4
5
  export let dropDownulClass = 'py-2 space-y-2';
5
6
  let ulClass = 'space-y-2';
@@ -15,9 +16,14 @@ if (border) {
15
16
  <SidebarDropdown {link} ulClass={dropDownulClass} {childClass} />
16
17
  {:else}
17
18
  <li>
18
- <a href={link.href} rel={link.rel} class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
19
+ <a href={link.href} rel={link.rel} class={aClass}>
19
20
  {#if link.icon}
20
- <svelte:component this={link.icon} size={link.iconSize} color={link.iconColor} class="mr-2 {link.iconClass}" />
21
+ <svelte:component
22
+ this={link.icon}
23
+ size={link.iconSize}
24
+ color={link.iconColor}
25
+ class="mr-2 {link.iconClass}"
26
+ />
21
27
  {/if}
22
28
  <span class="ml-3">{link.name}</span>
23
29
  {#if link.subtext}
package/sidebars/SidebarItem.svelte.d.ts CHANGED
@@ -3,6 +3,7 @@ import type { SidebarType } from '../types';
3
3
  declare const __propDef: {
4
4
  props: {
5
5
  links: SidebarType[];
6
+ aClass?: string;
6
7
  childClass?: string;
7
8
  dropDownulClass?: string;
8
9
  border?: boolean;