flowbite-svelte 0.29.2 → 0.29.4

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 (18) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/badges/Badge.svelte.d.ts +1 -2
  3. package/carousels/Carousel.svelte +79 -83
  4. package/datepicker/Datepicker.svelte +47 -49
  5. package/navbar/NavLi.svelte +17 -17
  6. package/package.json +1 -1
  7. package/paginations/Pagination.svelte +15 -2
  8. package/paginations/Pagination.svelte.d.ts +11 -0
  9. package/paginations/PaginationItem.svelte +5 -2
  10. package/paginations/PaginationItem.svelte.d.ts +3 -0
  11. package/progressbars/Progressbar.svelte.d.ts +1 -2
  12. package/spinners/Spinner.svelte +17 -20
  13. package/spinners/Spinner.svelte.d.ts +1 -2
  14. package/toolbar/Toolbar.svelte.d.ts +1 -1
  15. package/toolbar/ToolbarButton.svelte.d.ts +1 -1
  16. package/types.d.ts +3 -2
  17. package/utils/CloseButton.svelte +10 -18
  18. package/utils/CloseButton.svelte.d.ts +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,15 @@
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.29.4](https://github.com/themesberg/flowbite-svelte/compare/v0.29.3...v0.29.4) (2022-12-22)
6
+
7
+
8
+ ### Features
9
+
10
+ * add pagination examples ([#503](https://github.com/themesberg/flowbite-svelte/issues/503)) ([93e48e3](https://github.com/themesberg/flowbite-svelte/commit/93e48e354a731216213e4ba38bf12e462880d58a))
11
+
12
+ ### [0.29.3](https://github.com/themesberg/flowbite-svelte/compare/v0.29.2...v0.29.3) (2022-12-20)
13
+
5
14
  ### [0.29.2](https://github.com/themesberg/flowbite-svelte/compare/v0.29.1...v0.29.2) (2022-12-19)
6
15
 
7
16
  ### [0.29.1](https://github.com/themesberg/flowbite-svelte/compare/v0.29.0...v0.29.1) (2022-12-19)
package/badges/Badge.svelte.d.ts CHANGED
@@ -1,9 +1,8 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
- import type { Colors } from '../types';
3
2
  declare const __propDef: {
4
3
  props: {
5
4
  [x: string]: any;
6
- color?: Colors | undefined;
5
+ color?: "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "dark" | undefined;
7
6
  large?: boolean | undefined;
8
7
  href?: string | undefined;
9
8
  rounded?: boolean | undefined;
package/carousels/Carousel.svelte CHANGED
@@ -46,93 +46,89 @@ if (loop) {
46
46
  </script>
47
47
 
48
48
  <div id="default-carousel" class="relative">
49
- <div class={divClass}>
50
- <Slide image={image.imgurl} altTag={image.name} attr={image.attribution} {slideClass} />
51
- </div>
52
- {#if showIndicators}
53
- <!-- Slider indicators -->
54
- <div class={indicatorDivClass}>
55
- {#each images as { id, imgurl, name, attribution }}
56
- <Indicator
57
- {name}
58
- selected={imageShowingIndex === id}
59
- on:click={() => goToSlide(id)}
60
- {indicatorClass} />
61
- {/each}
62
- </div>
63
- {/if}
64
- {#if slideControls}
65
- <!-- Slider controls -->
66
- <button
67
- on:click={prevSlide}
68
- type="button"
69
- class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
70
- data-carousel-prev>
71
- <span
72
- class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
73
- {#if $$slots.previous}
74
- <slot name="previous" />
75
- {:else}
76
- <svg
77
- aria-hidden="true"
78
- class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
79
- fill="none"
80
- stroke="currentColor"
81
- viewBox="0 0 24 24"
82
- xmlns="http://www.w3.org/2000/svg"
83
- ><path
84
- stroke-linecap="round"
85
- stroke-linejoin="round"
86
- stroke-width="2"
87
- d="M15 19l-7-7 7-7" /></svg>
88
- {/if}
89
- <span class="hidden">Previous</span>
90
- </span>
91
- </button>
92
- <button
93
- on:click={nextSlide}
94
- type="button"
95
- class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
96
- data-carousel-next>
97
- <span
98
- class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
99
- {#if $$slots.next}
100
- <slot name="next" />
101
- {:else}
102
- <svg
103
- aria-hidden="true"
104
- class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
105
- fill="none"
106
- stroke="currentColor"
107
- viewBox="0 0 24 24"
108
- xmlns="http://www.w3.org/2000/svg"
109
- ><path
110
- stroke-linecap="round"
111
- stroke-linejoin="round"
112
- stroke-width="2"
113
- d="M9 5l7 7-7 7" /></svg>
114
- {/if}
115
- <span class="hidden">Next</span>
116
- </span>
117
- </button>
118
- {/if}
49
+ <div class={divClass}>
50
+ <Slide image={image.imgurl} altTag={image.name} attr={image.attribution} {slideClass} />
51
+ </div>
52
+ {#if showIndicators}
53
+ <!-- Slider indicators -->
54
+ <div class={indicatorDivClass}>
55
+ {#each images as { id, imgurl, name, attribution }}
56
+ <Indicator
57
+ {name}
58
+ selected={imageShowingIndex === id}
59
+ on:click={() => goToSlide(id)}
60
+ {indicatorClass} />
61
+ {/each}
62
+ </div>
63
+ {/if}
64
+ {#if slideControls}
65
+ <!-- Slider controls -->
66
+ <button
67
+ on:click={prevSlide}
68
+ type="button"
69
+ class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
70
+ data-carousel-prev>
71
+ <span
72
+ class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
73
+ {#if $$slots.previous}
74
+ <slot name="previous" />
75
+ {:else}
76
+ <svg
77
+ aria-hidden="true"
78
+ class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
79
+ fill="none"
80
+ stroke="currentColor"
81
+ viewBox="0 0 24 24"
82
+ xmlns="http://www.w3.org/2000/svg"
83
+ ><path
84
+ stroke-linecap="round"
85
+ stroke-linejoin="round"
86
+ stroke-width="2"
87
+ d="M15 19l-7-7 7-7" /></svg>
88
+ {/if}
89
+ <span class="hidden">Previous</span>
90
+ </span>
91
+ </button>
92
+ <button
93
+ on:click={nextSlide}
94
+ type="button"
95
+ class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
96
+ data-carousel-next>
97
+ <span
98
+ class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
99
+ {#if $$slots.next}
100
+ <slot name="next" />
101
+ {:else}
102
+ <svg
103
+ aria-hidden="true"
104
+ class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
105
+ fill="none"
106
+ stroke="currentColor"
107
+ viewBox="0 0 24 24"
108
+ xmlns="http://www.w3.org/2000/svg"
109
+ ><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
110
+ {/if}
111
+ <span class="hidden">Next</span>
112
+ </span>
113
+ </button>
114
+ {/if}
119
115
  </div>
120
116
 
121
117
  {#if showCaptions}
122
- <Caption caption={images[imageShowingIndex].name} {captionClass} />
118
+ <Caption caption={images[imageShowingIndex].name} {captionClass} />
123
119
  {/if}
124
120
 
125
121
  {#if showThumbs}
126
- <div class="flex flex-row justify-center bg-gray-100">
127
- {#each images as { id, imgurl, name, attribution }}
128
- <Thumbnail
129
- {thumbWidth}
130
- thumbImg={imgurl}
131
- altTag={name}
132
- titleLink={attribution}
133
- {id}
134
- selected={imageShowingIndex === id}
135
- on:click={() => goToSlide(id)} />
136
- {/each}
137
- </div>
122
+ <div class="flex flex-row justify-center bg-gray-100">
123
+ {#each images as { id, imgurl, name, attribution }}
124
+ <Thumbnail
125
+ {thumbWidth}
126
+ thumbImg={imgurl}
127
+ altTag={name}
128
+ titleLink={attribution}
129
+ {id}
130
+ selected={imageShowingIndex === id}
131
+ on:click={() => goToSlide(id)} />
132
+ {/each}
133
+ </div>
138
134
  {/if}
package/datepicker/Datepicker.svelte CHANGED
@@ -14,57 +14,55 @@ $: setAttribute = (node, params) => {
14
14
  </script>
15
15
 
16
16
  <svelte:head>
17
- <link rel="stylesheet" href="https://unpkg.com/flowbite@1.5.1/dist/flowbite.min.css" />
18
- <script src="https://unpkg.com/flowbite@1.5.1/dist/datepicker.js"></script>
17
+ <link rel="stylesheet" href="https://unpkg.com/flowbite@1.5.1/dist/flowbite.min.css" />
18
+ <script src="https://unpkg.com/flowbite@1.5.1/dist/datepicker.js"></script>
19
19
  </svelte:head>
20
20
 
21
21
  {#if range}
22
- <div date-rangepicker class="flex items-center">
23
- <div class="relative">
24
- <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
25
- <Calendar />
26
- </div>
27
- <input name="start" type="text" class={inputClass} placeholder="Select date start" />
28
- </div>
29
- <span class="mx-4 text-gray-500">to</span>
30
- <div class="relative">
31
- <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
32
- <Calendar />
33
- </div>
34
- <input name="end" type="text" class={inputClass} placeholder="Select date end" />
35
- </div>
36
- </div>
22
+ <div date-rangepicker class="flex items-center">
23
+ <div class="relative">
24
+ <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
25
+ <Calendar />
26
+ </div>
27
+ <input name="start" type="text" class={inputClass} placeholder="Select date start" />
28
+ </div>
29
+ <span class="mx-4 text-gray-500">to</span>
30
+ <div class="relative">
31
+ <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
32
+ <Calendar />
33
+ </div>
34
+ <input name="end" type="text" class={inputClass} placeholder="Select date end" />
35
+ </div>
36
+ </div>
37
37
  {:else}
38
- <div class="relative">
39
- <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
40
- <Calendar />
41
- </div>
42
- {#if datepickerButtons}
43
- <input
44
- {...$$restProps}
45
- datepicker
46
- datepicker-buttons
47
- datepicker-format={datepickerFormat}
48
- datepicker-orientation={datepickerOrientation}
49
- datepicker-title={datepickerTitle}
50
- use:setAttribute={attribute}
51
- type="text"
52
- class={inputClass}
53
- placeholder="Select date"
54
- />
55
- {:else}
56
- <input
57
- {...$$restProps}
58
- datepicker
59
- datepicker-format={datepickerFormat}
60
- datepicker-orientation={datepickerOrientation}
61
- datepicker-title={datepickerTitle}
62
- use:setAttribute={attribute}
63
- type="text"
64
- class={inputClass}
65
- placeholder="Select date"
66
- />
67
- {/if}
68
- <slot />
69
- </div>
38
+ <div class="relative">
39
+ <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
40
+ <Calendar />
41
+ </div>
42
+ {#if datepickerButtons}
43
+ <input
44
+ {...$$restProps}
45
+ datepicker
46
+ datepicker-buttons
47
+ datepicker-format={datepickerFormat}
48
+ datepicker-orientation={datepickerOrientation}
49
+ datepicker-title={datepickerTitle}
50
+ use:setAttribute={attribute}
51
+ type="text"
52
+ class={inputClass}
53
+ placeholder="Select date" />
54
+ {:else}
55
+ <input
56
+ {...$$restProps}
57
+ datepicker
58
+ datepicker-format={datepickerFormat}
59
+ datepicker-orientation={datepickerOrientation}
60
+ datepicker-title={datepickerTitle}
61
+ use:setAttribute={attribute}
62
+ type="text"
63
+ class={inputClass}
64
+ placeholder="Select date" />
65
+ {/if}
66
+ <slot />
67
+ </div>
70
68
  {/if}
package/navbar/NavLi.svelte CHANGED
@@ -8,21 +8,21 @@ $: liClass = classNames('block py-2 pr-4 pl-3 md:p-0 rounded md:border-0', activ
8
8
  </script>
9
9
 
10
10
  <li>
11
- <svelte:element
12
- this={href ? 'a' : 'div'}
13
- {href}
14
- {...$$restProps}
15
- on:blur
16
- on:change
17
- on:click
18
- on:focus
19
- on:keydown
20
- on:keypress
21
- on:keyup
22
- on:mouseenter
23
- on:mouseleave
24
- on:mouseover
25
- class={liClass}>
26
- <slot />
27
- </svelte:element>
11
+ <svelte:element
12
+ this={href ? 'a' : 'div'}
13
+ {href}
14
+ {...$$restProps}
15
+ on:blur
16
+ on:change
17
+ on:click
18
+ on:focus
19
+ on:keydown
20
+ on:keypress
21
+ on:keyup
22
+ on:mouseenter
23
+ on:mouseleave
24
+ on:mouseover
25
+ class={liClass}>
26
+ <slot />
27
+ </svelte:element>
28
28
  </li>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.29.2",
3
+ "version": "0.29.4",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "index.js",
6
6
  "author": {
package/paginations/Pagination.svelte CHANGED
@@ -4,6 +4,7 @@ import PaginationItem from './PaginationItem.svelte';
4
4
  export let pages = [];
5
5
  export let ulClass = 'inline-flex -space-x-px items-center';
6
6
  export let table = false;
7
+ export let active = false;
7
8
  const dispatch = createEventDispatcher();
8
9
  setContext('group', true);
9
10
  setContext('table', table);
@@ -22,9 +23,21 @@ const next = () => {
22
23
  <slot name="prev">Previous</slot>
23
24
  </PaginationItem>
24
25
  </li>
25
- {#each pages as { name, href }}
26
+ {#each pages as { name, href, active }}
26
27
  <li>
27
- <PaginationItem {href}>{name}</PaginationItem>
28
+ <PaginationItem
29
+ {active}
30
+ on:blur
31
+ on:change
32
+ on:click
33
+ on:focus
34
+ on:keydown
35
+ on:keypress
36
+ on:keyup
37
+ on:mouseenter
38
+ on:mouseleave
39
+ on:mouseover
40
+ {href}>{name}</PaginationItem>
28
41
  </li>
29
42
  {/each}
30
43
  <li>
package/paginations/Pagination.svelte.d.ts CHANGED
@@ -6,8 +6,19 @@ declare const __propDef: {
6
6
  pages?: LinkType[] | undefined;
7
7
  ulClass?: string | undefined;
8
8
  table?: boolean | undefined;
9
+ active?: boolean | undefined;
9
10
  };
10
11
  events: {
12
+ blur: FocusEvent;
13
+ change: Event;
14
+ click: MouseEvent;
15
+ focus: FocusEvent;
16
+ keydown: KeyboardEvent;
17
+ keypress: KeyboardEvent;
18
+ keyup: KeyboardEvent;
19
+ mouseenter: MouseEvent;
20
+ mouseleave: MouseEvent;
21
+ mouseover: MouseEvent;
11
22
  previous: CustomEvent<any>;
12
23
  next: CustomEvent<any>;
13
24
  } & {
package/paginations/PaginationItem.svelte CHANGED
@@ -1,10 +1,13 @@
1
1
  <script>import classNames from 'classnames';
2
- import { getContext } from 'svelte';
2
+ import { getContext, onMount } from 'svelte';
3
3
  export let href = undefined;
4
+ export let active = false;
5
+ export let activeClass = 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white';
6
+ export let normalClass = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
4
7
  const group = getContext('group');
5
8
  const table = getContext('table');
6
9
  let defaultClass;
7
- $: defaultClass = classNames('block py-2', group ? 'px-3' : 'px-4', 'text-sm font-medium', table || 'border border-gray-300', group || (table ? 'rounded' : 'rounded-lg'), 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white', $$props.class);
10
+ $: defaultClass = classNames('block py-2', group ? 'px-3' : 'px-4', 'text-sm font-medium', table || 'border border-gray-300', group || (table ? 'rounded' : 'rounded-lg'), active ? activeClass : normalClass, $$props.class);
8
11
  </script>
9
12
 
10
13
  <svelte:element
package/paginations/PaginationItem.svelte.d.ts CHANGED
@@ -3,6 +3,9 @@ declare const __propDef: {
3
3
  props: {
4
4
  [x: string]: any;
5
5
  href?: string | undefined;
6
+ active?: boolean | undefined;
7
+ activeClass?: string | undefined;
8
+ normalClass?: string | undefined;
6
9
  };
7
10
  events: {
8
11
  blur: FocusEvent;
package/progressbars/Progressbar.svelte.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
- import type { Colors } from '../types';
3
2
  declare const __propDef: {
4
3
  props: {
5
4
  [x: string]: any;
@@ -7,7 +6,7 @@ declare const __propDef: {
7
6
  size?: string | undefined;
8
7
  labelInside?: boolean | undefined;
9
8
  labelOutside?: string | undefined;
10
- color?: Colors | undefined;
9
+ color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "blue" | undefined;
11
10
  labelInsideClass?: string | undefined;
12
11
  };
13
12
  events: {
package/spinners/Spinner.svelte CHANGED
@@ -23,24 +23,21 @@ let fillColorClass = color === undefined ? '' : fillColorClasses[color] ?? fillC
23
23
  </script>
24
24
 
25
25
  <svg
26
- role="status"
27
- class={classNames(
28
- 'inline -mt-px animate-spin dark:text-gray-600',
29
- iconsize,
30
- bg,
31
- fillColorClass,
32
- $$props.class
33
- )}
34
- viewBox="0 0 100 101"
35
- fill="none"
36
- xmlns="http://www.w3.org/2000/svg"
37
- >
38
- <path
39
- d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
40
- fill={currentColor}
41
- />
42
- <path
43
- d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
44
- fill={currentFill}
45
- />
26
+ role="status"
27
+ class={classNames(
28
+ 'inline -mt-px animate-spin dark:text-gray-600',
29
+ iconsize,
30
+ bg,
31
+ fillColorClass,
32
+ $$props.class
33
+ )}
34
+ viewBox="0 0 100 101"
35
+ fill="none"
36
+ xmlns="http://www.w3.org/2000/svg">
37
+ <path
38
+ d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
39
+ fill={currentColor} />
40
+ <path
41
+ d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
42
+ fill={currentFill} />
46
43
  </svg>
package/spinners/Spinner.svelte.d.ts CHANGED
@@ -1,9 +1,8 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
- import type { Colors } from '../types';
3
2
  declare const __propDef: {
4
3
  props: {
5
4
  [x: string]: any;
6
- color?: Colors | undefined;
5
+ color?: 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white' | undefined;
7
6
  bg?: string | undefined;
8
7
  size?: string | undefined;
9
8
  currentFill?: string | undefined;
package/toolbar/Toolbar.svelte.d.ts CHANGED
@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
4
  [x: string]: any;
5
- color?: string | undefined;
5
+ color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "dark" | undefined;
6
6
  embedded?: boolean | undefined;
7
7
  };
8
8
  events: {
package/toolbar/ToolbarButton.svelte.d.ts CHANGED
@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
4
  [x: string]: any;
5
- color?: string | undefined;
5
+ color?: "gray" | "red" | "yellow" | "green" | "indigo" | "default" | "purple" | "pink" | "blue" | undefined;
6
6
  name?: string | undefined;
7
7
  ariaLabel?: string | undefined;
8
8
  size?: "xs" | "sm" | "md" | undefined;
package/types.d.ts CHANGED
@@ -93,9 +93,10 @@ export interface ListGroupItemType {
93
93
  [propName: string]: any;
94
94
  }
95
95
  export interface LinkType {
96
- name: string;
97
- href: string;
96
+ name: number;
97
+ href?: string;
98
98
  rel?: string;
99
+ active?: boolean;
99
100
  }
100
101
  export interface ListCardType {
101
102
  img: ImgType;
package/utils/CloseButton.svelte CHANGED
@@ -23,9 +23,7 @@ const sizing = {
23
23
  };
24
24
  let buttonClass = '';
25
25
  $: buttonClass = classNames('ml-auto focus:outline-none whitespace-normal', sizing[size], colors[color], color === 'default' &&
26
- (background
27
- ? 'hover:bg-gray-100 dark:hover:bg-gray-600'
28
- : 'hover:bg-gray-100 dark:hover:bg-gray-700'), $$props.class);
26
+ (background ? 'hover:bg-gray-100 dark:hover:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-700'), $$props.class);
29
27
  const svgSizes = {
30
28
  xs: 'w-3 h-3',
31
29
  sm: 'w-3.5 h-3.5',
@@ -34,19 +32,13 @@ const svgSizes = {
34
32
  </script>
35
33
 
36
34
  <button on:click type="button" class={buttonClass} aria-label="Close">
37
- <slot>
38
- <span class="sr-only">{name}</span>
39
- <svg
40
- class={svgSizes[size]}
41
- fill="currentColor"
42
- viewBox="0 0 20 20"
43
- xmlns="http://www.w3.org/2000/svg"
44
- >
45
- <path
46
- fill-rule="evenodd"
47
- d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
48
- clip-rule="evenodd"
49
- />
50
- </svg>
51
- </slot>
35
+ <slot>
36
+ <span class="sr-only">{name}</span>
37
+ <svg class={svgSizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
38
+ <path
39
+ fill-rule="evenodd"
40
+ d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
41
+ clip-rule="evenodd" />
42
+ </svg>
43
+ </slot>
52
44
  </button>
package/utils/CloseButton.svelte.d.ts CHANGED
@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
4
  [x: string]: any;
5
- color?: string | undefined;
5
+ color?: "gray" | "red" | "yellow" | "green" | "indigo" | "default" | "purple" | "pink" | "blue" | "dark" | undefined;
6
6
  name?: string | undefined;
7
7
  size?: "xs" | "sm" | "md" | undefined;
8
8
  };