flowbite-svelte 0.40.1 → 0.40.2

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 (15) hide show
  1. package/dist/bottom-nav/BottomNavHeaderItem.svelte +20 -2
  2. package/dist/bottom-nav/BottomNavHeaderItem.svelte.d.ts +18 -0
  3. package/dist/bottom-nav/BottomNavHeaderItem.svelte.d.ts.map +1 -1
  4. package/dist/dropdowns/Dropdown.svelte +5 -2
  5. package/dist/dropdowns/Dropdown.svelte.d.ts +2 -0
  6. package/dist/dropdowns/Dropdown.svelte.d.ts.map +1 -1
  7. package/dist/forms/Dropzone.svelte +1 -1
  8. package/dist/forms/Textarea.svelte +2 -1
  9. package/dist/forms/Textarea.svelte.d.ts +1 -0
  10. package/dist/forms/Textarea.svelte.d.ts.map +1 -1
  11. package/dist/list-group/Listgroup.svelte +6 -3
  12. package/dist/list-group/Listgroup.svelte.d.ts +1 -1
  13. package/dist/list-group/Listgroup.svelte.d.ts.map +1 -1
  14. package/dist/modals/Modal.svelte +1 -1
  15. package/package.json +1 -1
package/dist/bottom-nav/BottomNavHeaderItem.svelte CHANGED
@@ -6,7 +6,17 @@ export let activeClass = 'px-5 py-1.5 text-xs font-medium text-white bg-gray-900
6
6
  $: btnClass = active ? activeClass : defaultClass;
7
7
  </script>
8
8
 
9
- <button class={twMerge(btnClass, $$props.class)} {...$$restProps}>
9
+ <button
10
+ class={twMerge(btnClass, $$props.class)}
11
+ {...$$restProps}
12
+ on:click
13
+ on:change
14
+ on:keydown
15
+ on:keyup
16
+ on:focus
17
+ on:blur
18
+ on:mouseenter
19
+ on:mouseleave>
10
20
  {itemName}
11
21
  </button>
12
22
 
@@ -19,5 +29,13 @@ $: btnClass = active ? activeClass : defaultClass;
19
29
  @prop active: boolean = false;
20
30
  @prop defaultClass: string = 'px-5 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 rounded-lg';
21
31
  @prop activeClass: string = 'px-5 py-1.5 text-xs font-medium text-white bg-gray-900 dark:bg-gray-300 dark:text-gray-900 rounded-lg';
22
-
32
+ ## event
33
+ - on:click
34
+ - on:change
35
+ - on:keydown
36
+ - on:keyup
37
+ - on:focus
38
+ - on:blur
39
+ - on:mouseenter
40
+ - on:mouseleave
23
41
  -->
package/dist/bottom-nav/BottomNavHeaderItem.svelte.d.ts CHANGED
@@ -8,6 +8,15 @@ declare const __propDef: {
8
8
  activeClass?: string | undefined;
9
9
  };
10
10
  events: {
11
+ click: MouseEvent;
12
+ change: Event;
13
+ keydown: KeyboardEvent;
14
+ keyup: KeyboardEvent;
15
+ focus: FocusEvent;
16
+ blur: FocusEvent;
17
+ mouseenter: MouseEvent;
18
+ mouseleave: MouseEvent;
19
+ } & {
11
20
  [evt: string]: CustomEvent<any>;
12
21
  };
13
22
  slots: {};
@@ -23,6 +32,15 @@ export type BottomNavHeaderItemSlots = typeof __propDef.slots;
23
32
  * @prop active: boolean = false;
24
33
  * @prop defaultClass: string = 'px-5 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 rounded-lg';
25
34
  * @prop activeClass: string = 'px-5 py-1.5 text-xs font-medium text-white bg-gray-900 dark:bg-gray-300 dark:text-gray-900 rounded-lg';
35
+ * ## event
36
+ * - on:click
37
+ * - on:change
38
+ * - on:keydown
39
+ * - on:keyup
40
+ * - on:focus
41
+ * - on:blur
42
+ * - on:mouseenter
43
+ * - on:mouseleave
26
44
  */
27
45
  export default class BottomNavHeaderItem extends SvelteComponentTyped<BottomNavHeaderItemProps, BottomNavHeaderItemEvents, BottomNavHeaderItemSlots> {
28
46
  }
package/dist/bottom-nav/BottomNavHeaderItem.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BottomNavHeaderItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavHeaderItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAuBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9D,MAAM,MAAM,yBAAyB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChE,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9D;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,oBAAoB,CAAC,wBAAwB,EAAE,yBAAyB,EAAE,wBAAwB,CAAC;CACnJ"}
1
+ {"version":3,"file":"BottomNavHeaderItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavHeaderItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAuBD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9D,MAAM,MAAM,yBAAyB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChE,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9D;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,oBAAoB,CAAC,wBAAwB,EAAE,yBAAyB,EAAE,wBAAwB,CAAC;CACnJ"}
package/dist/dropdowns/Dropdown.svelte CHANGED
@@ -1,8 +1,10 @@
1
1
  <script>import { twMerge } from 'tailwind-merge';
2
2
  import Popper from '../utils/Popper.svelte';
3
3
  export let open = false;
4
+ export let containerClass = 'divide-y z-50';
4
5
  export let headerClass = 'py-1 overflow-hidden rounded-t-lg';
5
6
  export let footerClass = 'py-1 overflow-hidden rounded-b-lg';
7
+ let containerCls = twMerge(containerClass, $$props.classContainer);
6
8
  let headerCls = twMerge(headerClass, $$props.classHeader);
7
9
  let ulCls = twMerge('py-1', $$props.class);
8
10
  let footerCls = twMerge(footerClass, $$props.classFooter);
@@ -17,7 +19,7 @@ $: {
17
19
  }
18
20
  </script>
19
21
 
20
- <Popper activeContent {...$$restProps} class={'divide-y'} on:show bind:open>
22
+ <Popper activeContent {...$$restProps} class={containerCls} on:show bind:open>
21
23
  {#if $$slots.header}
22
24
  <div class={headerCls}>
23
25
  <slot name="header" />
@@ -63,6 +65,7 @@ $: {
63
65
  - Events
64
66
  ## Props
65
67
  @prop open: boolean = false;
68
+ @prop containerClass: string = 'divide-y z-50';
66
69
  @prop headerClass: string = 'py-1 overflow-hidden rounded-t-lg';
67
70
  @prop ulClass: string = 'py-1 w-44';
68
71
  @prop footerClass: string = 'py-1 overflow-hidden rounded-b-lg';
@@ -71,7 +74,7 @@ $: {
71
74
  <script>
72
75
  import { Button, Dropdown, DropdownItem, Chevron } from 'flowbite-svelte'
73
76
  </script>
74
-
77
+
75
78
  <Button><Chevron>Dropdown button</Chevron></Button>
76
79
  <Dropdown >
77
80
  <DropdownItem>Dashboard</DropdownItem>
package/dist/dropdowns/Dropdown.svelte.d.ts CHANGED
@@ -238,6 +238,7 @@ declare const __propDef: {
238
238
  strategy?: "fixed" | "absolute" | undefined;
239
239
  open?: boolean | undefined;
240
240
  yOnly?: boolean | undefined;
241
+ containerClass?: string | undefined;
241
242
  headerClass?: string | undefined;
242
243
  footerClass?: string | undefined;
243
244
  };
@@ -284,6 +285,7 @@ export type DropdownSlots = typeof __propDef.slots;
284
285
  * - Events
285
286
  * ## Props
286
287
  * @prop open: boolean = false;
288
+ * @prop containerClass: string = 'divide-y z-50';
287
289
  * @prop headerClass: string = 'py-1 overflow-hidden rounded-t-lg';
288
290
  * @prop ulClass: string = 'py-1 w-44';
289
291
  * @prop footerClass: string = 'py-1 overflow-hidden rounded-b-lg';
package/dist/dropdowns/Dropdown.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdowns/Dropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
1
+ {"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdowns/Dropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2DD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
package/dist/forms/Dropzone.svelte CHANGED
@@ -23,7 +23,7 @@ function keydown(ev) {
23
23
  on:dragleave
24
24
  on:dragover
25
25
  on:drop>
26
- <label tabIndex="0">
26
+ <label class="flex flex-col items-center" tabIndex="0">
27
27
  <slot />
28
28
  <input
29
29
  {...$$restProps}
package/dist/forms/Textarea.svelte CHANGED
@@ -5,6 +5,7 @@ const background = getContext('background');
5
5
  export let value = undefined;
6
6
  export let wrappedClass = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0';
7
7
  export let unWrappedClass = 'p-2.5 text-sm focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
8
+ export let innerWrappedClass = 'py-2 px-4 bg-white dark:bg-gray-800';
8
9
  let wrapped;
9
10
  $: wrapped = $$slots.header || $$slots.footer;
10
11
  let wrapperClass;
@@ -13,7 +14,7 @@ let textareaClass;
13
14
  $: textareaClass = wrapped ? wrappedClass : twMerge(wrapperClass, unWrappedClass);
14
15
  const headerClass = (header) => twMerge(header ? 'border-b' : 'border-t', 'py-2 px-3 border-gray-200 dark:border-gray-600');
15
16
  let innerWrapperClass;
16
- $: innerWrapperClass = twMerge('py-2 px-4 bg-white dark:bg-gray-800', $$slots.footer ? 'rounded-b-lg' : '', $$slots.header ? 'rounded-t-lg' : '');
17
+ $: innerWrapperClass = twMerge(innerWrappedClass, $$slots.footer ? 'rounded-b-lg' : '', $$slots.header ? 'rounded-t-lg' : '');
17
18
  </script>
18
19
 
19
20
  <Wrapper show={wrapped} class={wrapperClass}>
package/dist/forms/Textarea.svelte.d.ts CHANGED
@@ -5,6 +5,7 @@ declare const __propDef: {
5
5
  value?: any;
6
6
  wrappedClass?: string | undefined;
7
7
  unWrappedClass?: string | undefined;
8
+ innerWrappedClass?: string | undefined;
8
9
  };
9
10
  events: {
10
11
  blur: FocusEvent;
package/dist/forms/Textarea.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Textarea.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgED,QAAA,MAAM,SAAS;;;gBAD0F,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;CAC9B,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
1
+ {"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Textarea.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgED,QAAA,MAAM,SAAS;;;gBADiI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;CACrE,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
package/dist/list-group/Listgroup.svelte CHANGED
@@ -1,7 +1,8 @@
1
- <script>import { setContext } from 'svelte';
1
+ <script>import { setContext, createEventDispatcher } from 'svelte';
2
2
  import { twMerge } from 'tailwind-merge';
3
3
  import ListgroupItem from './ListgroupItem.svelte';
4
4
  import Frame from '../utils/Frame.svelte';
5
+ const dispatch = createEventDispatcher();
5
6
  export let items = [];
6
7
  export let active = false;
7
8
  export let defaultClass = 'divide-y divide-gray-200 dark:divide-gray-600';
@@ -13,9 +14,11 @@ $: groupClass = twMerge(defaultClass, $$props.class);
13
14
  <Frame tag={active ? 'div' : 'ul'} {...$$restProps} rounded border class={groupClass}>
14
15
  {#each items as item, index}
15
16
  {#if typeof item === 'object'}
16
- <ListgroupItem {active} {...item} {index} on:click><slot {item} {index} /></ListgroupItem>
17
+ <ListgroupItem {active} {...item} {index} on:click={() => dispatch('click', item)}
18
+ ><slot {item} {index} /></ListgroupItem>
17
19
  {:else}
18
- <ListgroupItem {active} {index} on:click><slot {item} {index} /></ListgroupItem>
20
+ <ListgroupItem {active} {index} on:click={() => dispatch('click', item)}
21
+ ><slot {item} {index} /></ListgroupItem>
19
22
  {/if}
20
23
  {:else}
21
24
  <slot item={items[0]} />
package/dist/list-group/Listgroup.svelte.d.ts CHANGED
@@ -234,7 +234,7 @@ declare const __propDef: {
234
234
  active?: boolean | undefined;
235
235
  };
236
236
  events: {
237
- click: MouseEvent;
237
+ click: CustomEvent<any>;
238
238
  } & {
239
239
  [evt: string]: CustomEvent<any>;
240
240
  };
package/dist/list-group/Listgroup.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Listgroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/list-group/Listgroup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AA2ClD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
1
+ {"version":3,"file":"Listgroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/list-group/Listgroup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AA6ClD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
package/dist/modals/Modal.svelte CHANGED
@@ -126,7 +126,7 @@ function handleKeys(e) {
126
126
  {/if}
127
127
  <!-- Modal body -->
128
128
  <div
129
- class="p-6 space-y-6 flex-1 overflow-y-auto overscroll-contain"
129
+ class={twMerge('p-6 space-y-6 flex-1 overflow-y-auto overscroll-contain', $$props.bodyClass)}
130
130
  on:keydown|stopPropagation={handleKeys}
131
131
  role="document"
132
132
  on:wheel|stopPropagation|passive>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.40.1",
3
+ "version": "0.40.2",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "dist/index.js",
6
6
  "author": {