flowbite-svelte 0.27.14 → 0.27.16

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 (16) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/README.md +2 -0
  3. package/accordions/AccordionItem.svelte +17 -2
  4. package/accordions/AccordionItem.svelte.d.ts +3 -0
  5. package/carousels/CarouselTransition.svelte +87 -91
  6. package/carousels/CarouselTransition.svelte.d.ts +1 -1
  7. package/drawer/Drawer.svelte +2 -2
  8. package/forms/Label.svelte +4 -5
  9. package/forms/Radio.svelte.d.ts +1 -1
  10. package/forms/Search.svelte +1 -0
  11. package/forms/Search.svelte.d.ts +1 -0
  12. package/modals/Modal.svelte +1 -1
  13. package/package.json +1 -1
  14. package/tabs/TabHead.svelte.d.ts +1 -1
  15. package/tabs/TabHeadItem.svelte.d.ts +1 -1
  16. package/toasts/Toast.svelte +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,24 @@
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.27.16](https://github.com/themesberg/flowbite-svelte/compare/v0.27.15...v0.27.16) (2022-11-14)
6
+
7
+ ### [0.27.15](https://github.com/themesberg/flowbite-svelte/compare/v0.27.14...v0.27.15) (2022-11-13)
8
+
9
+
10
+ ### Features
11
+
12
+ * make AccordionItem transitions customizable ([0b49c35](https://github.com/themesberg/flowbite-svelte/commit/0b49c35a803b4ba3523c4d11845460c1958f9167))
13
+
14
+
15
+ ### Bug Fixes
16
+
17
+ * autoclose=false (default) ([#417](https://github.com/themesberg/flowbite-svelte/issues/417)) ([32c1782](https://github.com/themesberg/flowbite-svelte/commit/32c1782ee8c8aae7b2b9c4e1d7bafe3adf1e467a))
18
+ * change from fly to fade and a longer duration for Accordion custom transitions ([3d105f4](https://github.com/themesberg/flowbite-svelte/commit/3d105f4783dec6f3c42677a6aa151aac4e334f72))
19
+ * radio.md - dropdown ([#425](https://github.com/themesberg/flowbite-svelte/issues/425)) ([12d2d03](https://github.com/themesberg/flowbite-svelte/commit/12d2d03098a3647040280b20474d657e8f8dca2b))
20
+ * search on:input ([#408](https://github.com/themesberg/flowbite-svelte/issues/408)) ([4c1e514](https://github.com/themesberg/flowbite-svelte/commit/4c1e514297aaf786535d6411ba4a53e8037e0f90))
21
+ * transition func must return TransitionConfig ([18bffdb](https://github.com/themesberg/flowbite-svelte/commit/18bffdb6829267bb78b33e2f247d707575504ee9))
22
+
5
23
  ### [0.27.14](https://github.com/themesberg/flowbite-svelte/compare/v0.27.13...v0.27.14) (2022-11-01)
6
24
 
7
25
 
package/README.md CHANGED
@@ -17,6 +17,8 @@
17
17
 
18
18
  [Flowbite-Svelte](https://flowbite-svelte.com/) is an official Flowbite component library for Svelte. All interactivities are handled by Svelte.
19
19
 
20
+ [Visualize this repo's codebase](https://mango-dune-07a8b7110.1.azurestaticapps.net/?repo=themesberg%2Fflowbite-svelte)
21
+
20
22
  ## Flowbite-Svelte-Starter
21
23
 
22
24
  You can use [Flowbite-Svelte Starter](https://github.com/shinokada/flowbite-svelte-starter) for a quick start.
package/accordions/AccordionItem.svelte CHANGED
@@ -3,11 +3,26 @@ import ChevronUp from '../utils/ChevronUp.svelte';
3
3
  import classNames from 'classnames';
4
4
  import { getContext, onMount } from 'svelte';
5
5
  import { writable } from 'svelte/store';
6
- import { slide } from 'svelte/transition';
6
+ import { fade, blur, fly, slide } from 'svelte/transition';
7
7
  export let open = false;
8
8
  export let activeClasses = undefined;
9
9
  export let inactiveClasses = undefined;
10
10
  export let defaultClass = 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl';
11
+ export let transitionType = 'slide';
12
+ export let transitionParams = {};
13
+ // make a custom transition function that returns the desired transition
14
+ const multiple = (node, params) => {
15
+ switch (transitionType) {
16
+ case 'blur':
17
+ return blur(node, params);
18
+ case 'fly':
19
+ return fly(node, params);
20
+ case 'fade':
21
+ return fade(node, params);
22
+ default:
23
+ return slide(node, params);
24
+ }
25
+ };
11
26
  const ctx = getContext('ctx') ?? {};
12
27
  // single selection
13
28
  const self = {};
@@ -36,7 +51,7 @@ $: buttonClass = classNames(defaultClass, ctx.flush ? 'py-5' : 'p-5', open && (c
36
51
  </button>
37
52
  </h2>
38
53
  {#if open}
39
- <div transition:slide={{ duration: 500 }}>
54
+ <div transition:multiple={transitionParams}>
40
55
  <div class={ctx.flush ? 'py-5' : 'p-5'}>
41
56
  <slot />
42
57
  </div>
package/accordions/AccordionItem.svelte.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
+ import type { TransitionTypes, TransitionParamTypes } from '../types';
2
3
  declare const __propDef: {
3
4
  props: {
4
5
  [x: string]: any;
@@ -6,6 +7,8 @@ declare const __propDef: {
6
7
  activeClasses?: string | undefined;
7
8
  inactiveClasses?: string | undefined;
8
9
  defaultClass?: string | undefined;
10
+ transitionType?: TransitionTypes | undefined;
11
+ transitionParams?: TransitionParamTypes | undefined;
9
12
  };
10
13
  events: {
11
14
  [evt: string]: CustomEvent<any>;
package/carousels/CarouselTransition.svelte CHANGED
@@ -8,7 +8,7 @@ export let showCaptions = true;
8
8
  export let showThumbs = true;
9
9
  export let images;
10
10
  export let slideControls = true;
11
- export let transitionType;
11
+ export let transitionType = 'fade';
12
12
  export let transitionParams = {};
13
13
  export let loop = false;
14
14
  export let duration = 2000;
@@ -28,7 +28,7 @@ const multiple = (node, params) => {
28
28
  return blur(node, params);
29
29
  case 'fly':
30
30
  return fly(node, params);
31
- case 'fade':
31
+ default:
32
32
  return fade(node, params);
33
33
  }
34
34
  };
@@ -62,100 +62,96 @@ if (loop) {
62
62
  </script>
63
63
 
64
64
  <div id="default-carousel" class="relative">
65
- <div class={divClass}>
66
- {#each images as { id, imgurl, name, attribution }}
67
- {#if imageShowingIndex === id}
68
- <div transition:multiple={transitionParams}>
69
- <Slide image={imgurl} altTag={name} attr={attribution} />
70
- </div>
71
- {/if}
72
- {/each}
73
- </div>
65
+ <div class={divClass}>
66
+ {#each images as { id, imgurl, name, attribution }}
67
+ {#if imageShowingIndex === id}
68
+ <div transition:multiple={transitionParams}>
69
+ <Slide image={imgurl} altTag={name} attr={attribution} />
70
+ </div>
71
+ {/if}
72
+ {/each}
73
+ </div>
74
74
 
75
- {#if showIndicators}
76
- <!-- Slider indicators -->
77
- <div class={indicatorDivClass}>
78
- {#each images as { id, imgurl, name, attribution }}
79
- <Indicator
80
- {name}
81
- selected={imageShowingIndex === id}
82
- on:click={() => goToSlide(id)}
83
- {indicatorClass} />
84
- {/each}
85
- </div>
86
- {/if}
87
- {#if slideControls}
88
- <!-- Slider controls -->
89
- <button
90
- on:click={prevSlide}
91
- type="button"
92
- class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
93
- data-carousel-prev>
94
- <span
95
- 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">
96
- {#if $$slots.previous}
97
- <slot name="previous" />
98
- {:else}
99
- <svg
100
- aria-hidden="true"
101
- class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
102
- fill="none"
103
- stroke="currentColor"
104
- viewBox="0 0 24 24"
105
- xmlns="http://www.w3.org/2000/svg"
106
- ><path
107
- stroke-linecap="round"
108
- stroke-linejoin="round"
109
- stroke-width="2"
110
- d="M15 19l-7-7 7-7" /></svg>
111
- {/if}
112
- <span class="hidden">Previous</span>
113
- </span>
114
- </button>
115
- <button
116
- on:click={nextSlide}
117
- type="button"
118
- class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
119
- data-carousel-next>
120
- <span
121
- 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">
122
- {#if $$slots.next}
123
- <slot name="next" />
124
- {:else}
125
- <svg
126
- aria-hidden="true"
127
- class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
128
- fill="none"
129
- stroke="currentColor"
130
- viewBox="0 0 24 24"
131
- xmlns="http://www.w3.org/2000/svg"
132
- ><path
133
- stroke-linecap="round"
134
- stroke-linejoin="round"
135
- stroke-width="2"
136
- d="M9 5l7 7-7 7" /></svg>
137
- {/if}
138
- <span class="hidden">Next</span>
139
- </span>
140
- </button>
141
- {/if}
75
+ {#if showIndicators}
76
+ <!-- Slider indicators -->
77
+ <div class={indicatorDivClass}>
78
+ {#each images as { id, imgurl, name, attribution }}
79
+ <Indicator
80
+ {name}
81
+ selected={imageShowingIndex === id}
82
+ on:click={() => goToSlide(id)}
83
+ {indicatorClass} />
84
+ {/each}
85
+ </div>
86
+ {/if}
87
+ {#if slideControls}
88
+ <!-- Slider controls -->
89
+ <button
90
+ on:click={prevSlide}
91
+ type="button"
92
+ class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
93
+ data-carousel-prev>
94
+ <span
95
+ 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">
96
+ {#if $$slots.previous}
97
+ <slot name="previous" />
98
+ {:else}
99
+ <svg
100
+ aria-hidden="true"
101
+ class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
102
+ fill="none"
103
+ stroke="currentColor"
104
+ viewBox="0 0 24 24"
105
+ xmlns="http://www.w3.org/2000/svg"
106
+ ><path
107
+ stroke-linecap="round"
108
+ stroke-linejoin="round"
109
+ stroke-width="2"
110
+ d="M15 19l-7-7 7-7" /></svg>
111
+ {/if}
112
+ <span class="hidden">Previous</span>
113
+ </span>
114
+ </button>
115
+ <button
116
+ on:click={nextSlide}
117
+ type="button"
118
+ class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
119
+ data-carousel-next>
120
+ <span
121
+ 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">
122
+ {#if $$slots.next}
123
+ <slot name="next" />
124
+ {:else}
125
+ <svg
126
+ aria-hidden="true"
127
+ class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
128
+ fill="none"
129
+ stroke="currentColor"
130
+ viewBox="0 0 24 24"
131
+ xmlns="http://www.w3.org/2000/svg"
132
+ ><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
133
+ {/if}
134
+ <span class="hidden">Next</span>
135
+ </span>
136
+ </button>
137
+ {/if}
142
138
  </div>
143
139
 
144
140
  {#if showCaptions}
145
- <Caption caption={images[imageShowingIndex].name} {captionClass} />
141
+ <Caption caption={images[imageShowingIndex].name} {captionClass} />
146
142
  {/if}
147
143
 
148
144
  {#if showThumbs}
149
- <div class="flex flex-row justify-center bg-gray-100">
150
- {#each images as { id, imgurl, name, attribution }}
151
- <Thumbnail
152
- {thumbWidth}
153
- thumbImg={imgurl}
154
- altTag={name}
155
- titleLink={attribution}
156
- {id}
157
- selected={imageShowingIndex === id}
158
- on:click={() => goToSlide(id)} />
159
- {/each}
160
- </div>
145
+ <div class="flex flex-row justify-center bg-gray-100">
146
+ {#each images as { id, imgurl, name, attribution }}
147
+ <Thumbnail
148
+ {thumbWidth}
149
+ thumbImg={imgurl}
150
+ altTag={name}
151
+ titleLink={attribution}
152
+ {id}
153
+ selected={imageShowingIndex === id}
154
+ on:click={() => goToSlide(id)} />
155
+ {/each}
156
+ </div>
161
157
  {/if}
package/carousels/CarouselTransition.svelte.d.ts CHANGED
@@ -7,7 +7,7 @@ declare const __propDef: {
7
7
  showThumbs?: boolean | undefined;
8
8
  images: any[];
9
9
  slideControls?: boolean | undefined;
10
- transitionType: TransitionTypes;
10
+ transitionType?: TransitionTypes | undefined;
11
11
  transitionParams?: TransitionParamTypes | undefined;
12
12
  loop?: boolean | undefined;
13
13
  duration?: number | undefined;
package/drawer/Drawer.svelte CHANGED
@@ -23,10 +23,10 @@ function multiple(node, params) {
23
23
  return slide(node, params);
24
24
  case 'blur':
25
25
  return blur(node, params);
26
- case 'fly':
27
- return fly(node, params);
28
26
  case 'fade':
29
27
  return fade(node, params);
28
+ default:
29
+ return fly(node, params);
30
30
  }
31
31
  }
32
32
  const placements = {
package/forms/Label.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script>import classNames from 'classnames';
2
2
  export let color = 'gray';
3
3
  export let defaultClass = 'text-sm font-medium block';
4
- export let show = true; // helper for inheritance
4
+ export let show = true;
5
5
  let node;
6
6
  const colorClasses = {
7
7
  gray: 'text-gray-900 dark:text-gray-300',
@@ -14,13 +14,12 @@ $: {
14
14
  const control = node?.control;
15
15
  color = control?.disabled ? 'disabled' : color;
16
16
  }
17
- let labelClass;
18
17
  $: labelClass = classNames(defaultClass, colorClasses[color], $$props.class);
19
18
  </script>
20
19
 
21
20
  {#if show}
22
- <!-- svelte-ignore a11y-label-has-associated-control -->
23
- <label bind:this={node} {...$$restProps} class={labelClass}><slot /></label>
21
+ <!-- svelte-ignore a11y-label-has-associated-control -->
22
+ <label bind:this={node} {...$$restProps} class={labelClass}><slot /></label>
24
23
  {:else}
25
- <slot />
24
+ <slot />
26
25
  {/if}
package/forms/Radio.svelte.d.ts CHANGED
@@ -9,7 +9,7 @@ declare const __propDef: {
9
9
  custom?: boolean | undefined;
10
10
  inline?: boolean | undefined;
11
11
  group?: string | number | undefined;
12
- value?: string | undefined;
12
+ value?: string | number | undefined;
13
13
  };
14
14
  events: {
15
15
  blur: FocusEvent;
package/forms/Search.svelte CHANGED
@@ -13,6 +13,7 @@ const sizes = {
13
13
  <Input
14
14
  on:blur
15
15
  on:change
16
+ on:input
16
17
  on:click
17
18
  on:focus
18
19
  on:keydown
package/forms/Search.svelte.d.ts CHANGED
@@ -9,6 +9,7 @@ declare const __propDef: {
9
9
  events: {
10
10
  blur: FocusEvent;
11
11
  change: Event;
12
+ input: Event;
12
13
  click: MouseEvent;
13
14
  focus: FocusEvent;
14
15
  keydown: KeyboardEvent;
package/modals/Modal.svelte CHANGED
@@ -7,7 +7,7 @@ export let open = false;
7
7
  export let title = '';
8
8
  export let size = 'md';
9
9
  export let placement = 'center';
10
- export let autoclose = true;
10
+ export let autoclose = false;
11
11
  export let permanent = false;
12
12
  export let backdropClasses = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
13
13
  const dispatch = createEventDispatcher();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.27.14",
3
+ "version": "0.27.16",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "index.js",
6
6
  "author": {
package/tabs/TabHead.svelte.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
- tabStyle?: "default" | "icon" | "custom" | "pill" | "underline" | "full" | undefined;
4
+ tabStyle?: "default" | "custom" | "icon" | "pill" | "underline" | "full" | undefined;
5
5
  customDivClass?: string | undefined;
6
6
  customUlClass?: string | undefined;
7
7
  };
package/tabs/TabHeadItem.svelte.d.ts CHANGED
@@ -3,7 +3,7 @@ declare const __propDef: {
3
3
  props: {
4
4
  [x: string]: any;
5
5
  id: number;
6
- tabStyle?: "default" | "icon" | "custom" | "pill" | "underline" | "full" | undefined;
6
+ tabStyle?: "default" | "custom" | "icon" | "pill" | "underline" | "full" | undefined;
7
7
  activeTabValue: number;
8
8
  customActiveClass?: string | undefined;
9
9
  customInActiveClass?: string | undefined;
package/toasts/Toast.svelte CHANGED
@@ -4,7 +4,7 @@ import CloseButton from '../utils/CloseButton.svelte';
4
4
  import { fade } from 'svelte/transition';
5
5
  export let color = 'blue';
6
6
  export let simple = false;
7
- export let position = 'none'; // default not set
7
+ export let position = 'none';
8
8
  export let open = true;
9
9
  export let divClass = 'w-full max-w-xs p-4';
10
10
  const positions = {