flowbite-svelte 0.26.29 → 0.26.31

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 +19 -0
  2. package/forms/Iconinput.svelte +67 -43
  3. package/forms/Iconinput.svelte.d.ts +13 -0
  4. package/forms/Input.svelte +29 -28
  5. package/forms/Input.svelte.d.ts +1 -0
  6. package/package.json +1 -2
  7. package/tabs/TabHead.svelte +4 -5
  8. package/tabs/TabHead.svelte.d.ts +1 -2
  9. package/tabs/TabHeadItem.svelte +19 -20
  10. package/tabs/TabHeadItem.svelte.d.ts +1 -1
  11. package/tabs/TabWrapper.svelte +1 -3
  12. package/tabs/TabWrapper.svelte.d.ts +0 -4
  13. package/tabs/TabContentWrapper.svelte +0 -8
  14. package/tabs/TabContentWrapper.svelte.d.ts +0 -16
package/CHANGELOG.md CHANGED
@@ -2,6 +2,25 @@
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.26.31](https://github.com/themesberg/flowbite-svelte/compare/v0.26.30...v0.26.31) (2022-09-23)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * add default style to TabHeadItem and TabHead and removed {tabStyle} from default example in tab page ([a9025c4](https://github.com/themesberg/flowbite-svelte/commit/a9025c432d57fe6896ab20249d711ff7739c9f1c))
11
+ * add events to IconInput and on:input to Input components ([6668918](https://github.com/themesberg/flowbite-svelte/commit/66689185cd6cdf94ab66e1ff05ba33fbcaf6be0f))
12
+ * remove activeTabvalue from TabWrapper and let:tabId vrom tab page examples ([ee1b444](https://github.com/themesberg/flowbite-svelte/commit/ee1b444cd552de4cd0c13e4356159ce44a864024))
13
+
14
+ ### [0.26.30](https://github.com/themesberg/flowbite-svelte/compare/v0.26.29...v0.26.30) (2022-09-22)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * add classOptions type to classes object ([2d7131b](https://github.com/themesberg/flowbite-svelte/commit/2d7131b25a5f6766c2cadc2b2034cc3cf68b9528))
20
+ * remove bind: from TabWrapper bind:activeTabValue ([0269b3a](https://github.com/themesberg/flowbite-svelte/commit/0269b3ac4daf31cebec6f215983bfb4e99a118e3))
21
+ * remove tabId from TabWrapper component ([5f46d23](https://github.com/themesberg/flowbite-svelte/commit/5f46d238ff1c81c1c66c1542565aa589f97cf530))
22
+ * update icon class in TabHeadItem for Tabs with icons ([e94b344](https://github.com/themesberg/flowbite-svelte/commit/e94b3449826e84146b877e00e458885e08606ec5))
23
+
5
24
  ### [0.26.29](https://github.com/themesberg/flowbite-svelte/compare/v0.26.28...v0.26.29) (2022-09-22)
6
25
 
7
26
 
package/forms/Iconinput.svelte CHANGED
@@ -10,48 +10,72 @@ export let noBorderDivClass = 'flex absolute inset-y-0 left-0 items-center pl-3'
10
10
  </script>
11
11
 
12
12
  {#if noBorder}
13
- <div class="relative">
14
- <div
15
- class={classNames(
16
- noBorderDivClass,
17
- {
18
- 'p-2 sm:text-xs': size === 'sm',
19
- 'p-2.5 text-sm': size === 'md',
20
- 'sm:text-md p-4': size === 'lg'
21
- },
22
- pointerEvent ? 'cursor-pointer' : 'pointer-events-none'
23
- )}>
24
- <slot />
25
- </div>
26
- <input
27
- {...$$restProps}
28
- bind:value
29
- class={classNames(
30
- noBorderInputClass,
31
- {
32
- 'p-2 sm:text-xs pl-9': size === 'sm',
33
- 'p-2.5 text-sm pl-10': size === 'md',
34
- 'sm:text-md p-4 pl-11': size === 'lg'
35
- },
36
- $$props.class
37
- )} />
38
- </div>
13
+ <div class="relative">
14
+ <div
15
+ class={classNames(
16
+ noBorderDivClass,
17
+ {
18
+ 'p-2 sm:text-xs': size === 'sm',
19
+ 'p-2.5 text-sm': size === 'md',
20
+ 'sm:text-md p-4': size === 'lg'
21
+ },
22
+ pointerEvent ? 'cursor-pointer' : 'pointer-events-none'
23
+ )}>
24
+ <slot />
25
+ </div>
26
+ <input
27
+ {...$$restProps}
28
+ bind:value
29
+ on:blur
30
+ on:change
31
+ on:click
32
+ on:focus
33
+ on:keydown
34
+ on:keypress
35
+ on:keyup
36
+ on:mouseover
37
+ on:mouseenter
38
+ on:mouseleave
39
+ on:paste
40
+ on:input
41
+ class={classNames(
42
+ noBorderInputClass,
43
+ {
44
+ 'p-2 sm:text-xs pl-9': size === 'sm',
45
+ 'p-2.5 text-sm pl-10': size === 'md',
46
+ 'sm:text-md p-4 pl-11': size === 'lg'
47
+ },
48
+ $$props.class
49
+ )} />
50
+ </div>
39
51
  {:else}
40
- <div class="flex">
41
- <span class={spanClass}>
42
- <slot />
43
- </span>
44
- <input
45
- {...$$restProps}
46
- bind:value
47
- class={classNames(
48
- inputClass,
49
- {
50
- 'p-2 sm:text-xs': size === 'sm',
51
- 'p-2.5 text-sm': size === 'md',
52
- 'sm:text-md p-4': size === 'lg'
53
- },
54
- $$props.class
55
- )} />
56
- </div>
52
+ <div class="flex">
53
+ <span class={spanClass}>
54
+ <slot />
55
+ </span>
56
+ <input
57
+ {...$$restProps}
58
+ bind:value
59
+ on:blur
60
+ on:change
61
+ on:click
62
+ on:focus
63
+ on:keydown
64
+ on:keypress
65
+ on:keyup
66
+ on:mouseover
67
+ on:mouseenter
68
+ on:mouseleave
69
+ on:paste
70
+ on:input
71
+ class={classNames(
72
+ inputClass,
73
+ {
74
+ 'p-2 sm:text-xs': size === 'sm',
75
+ 'p-2.5 text-sm': size === 'md',
76
+ 'sm:text-md p-4': size === 'lg'
77
+ },
78
+ $$props.class
79
+ )} />
80
+ </div>
57
81
  {/if}
package/forms/Iconinput.svelte.d.ts CHANGED
@@ -12,6 +12,19 @@ declare const __propDef: {
12
12
  noBorderDivClass?: string | undefined;
13
13
  };
14
14
  events: {
15
+ blur: FocusEvent;
16
+ change: Event;
17
+ click: MouseEvent;
18
+ focus: FocusEvent;
19
+ keydown: KeyboardEvent;
20
+ keypress: KeyboardEvent;
21
+ keyup: KeyboardEvent;
22
+ mouseover: MouseEvent;
23
+ mouseenter: MouseEvent;
24
+ mouseleave: MouseEvent;
25
+ paste: ClipboardEvent;
26
+ input: Event;
27
+ } & {
15
28
  [evt: string]: CustomEvent<any>;
16
29
  };
17
30
  slots: {
package/forms/Input.svelte CHANGED
@@ -19,31 +19,32 @@ const setType = (node) => {
19
19
  </script>
20
20
 
21
21
  <input
22
- {...$$restProps}
23
- bind:value
24
- on:blur
25
- on:change
26
- on:click
27
- on:focus
28
- on:keydown
29
- on:keypress
30
- on:keyup
31
- on:mouseover
32
- on:mouseenter
33
- on:mouseleave
34
- on:paste
35
- use:setType
36
- class={classNames(
37
- inputClass,
38
- colorClasses[color],
39
- color === 'base' &&
40
- (background
41
- ? 'dark:bg-gray-600 dark:border-gray-500'
42
- : 'dark:bg-gray-700 dark:border-gray-600'),
43
- {
44
- 'p-2 sm:text-xs': size === 'sm',
45
- 'p-2.5 text-sm': size === 'md',
46
- 'sm:text-md p-4': size === 'lg'
47
- },
48
- $$props.class
49
- )} />
22
+ {...$$restProps}
23
+ bind:value
24
+ on:blur
25
+ on:change
26
+ on:click
27
+ on:focus
28
+ on:keydown
29
+ on:keypress
30
+ on:keyup
31
+ on:mouseover
32
+ on:mouseenter
33
+ on:mouseleave
34
+ on:paste
35
+ on:input
36
+ use:setType
37
+ class={classNames(
38
+ inputClass,
39
+ colorClasses[color],
40
+ color === 'base' &&
41
+ (background
42
+ ? 'dark:bg-gray-600 dark:border-gray-500'
43
+ : 'dark:bg-gray-700 dark:border-gray-600'),
44
+ {
45
+ 'p-2 sm:text-xs': size === 'sm',
46
+ 'p-2.5 text-sm': size === 'md',
47
+ 'sm:text-md p-4': size === 'lg'
48
+ },
49
+ $$props.class
50
+ )} />
package/forms/Input.svelte.d.ts CHANGED
@@ -21,6 +21,7 @@ declare const __propDef: {
21
21
  mouseenter: MouseEvent;
22
22
  mouseleave: MouseEvent;
23
23
  paste: ClipboardEvent;
24
+ input: Event;
24
25
  } & {
25
26
  [evt: string]: CustomEvent<any>;
26
27
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.26.29",
3
+ "version": "0.26.31",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "index.js",
6
6
  "author": {
@@ -203,7 +203,6 @@
203
203
  "./tables/TableHeadCell.svelte": "./tables/TableHeadCell.svelte",
204
204
  "./tables/TableSearch.svelte": "./tables/TableSearch.svelte",
205
205
  "./tabs/TabContentItem.svelte": "./tabs/TabContentItem.svelte",
206
- "./tabs/TabContentWrapper.svelte": "./tabs/TabContentWrapper.svelte",
207
206
  "./tabs/TabHead.svelte": "./tabs/TabHead.svelte",
208
207
  "./tabs/TabHeadItem.svelte": "./tabs/TabHeadItem.svelte",
209
208
  "./tabs/TabWrapper.svelte": "./tabs/TabWrapper.svelte",
package/tabs/TabHead.svelte CHANGED
@@ -1,5 +1,4 @@
1
- <script>export let tabStyle;
2
- export let tabId;
1
+ <script>export let tabStyle = 'default';
3
2
  export let customDivClass = '';
4
3
  export let customUlClass = '';
5
4
  const divClasses = {
@@ -21,7 +20,7 @@ const ulClasses = {
21
20
  </script>
22
21
 
23
22
  <div class={divClasses[tabStyle]}>
24
- <ul class={ulClasses[tabStyle]} id={tabId} role="tablist">
25
- <slot />
26
- </ul>
23
+ <ul class={ulClasses[tabStyle]} role="tablist">
24
+ <slot />
25
+ </ul>
27
26
  </div>
package/tabs/TabHead.svelte.d.ts CHANGED
@@ -1,8 +1,7 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
- tabStyle: any;
5
- tabId: any;
4
+ tabStyle?: "default" | "icon" | "custom" | "pill" | "underline" | "full" | undefined;
6
5
  customDivClass?: string | undefined;
7
6
  customUlClass?: string | undefined;
8
7
  };
package/tabs/TabHeadItem.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script>import classNames from 'classnames';
2
2
  export let id;
3
- export let tabStyle;
3
+ export let tabStyle = 'default';
4
4
  export let activeTabValue;
5
5
  export let customActiveClass = '';
6
6
  export let customInActiveClass = '';
@@ -32,23 +32,22 @@ const liClasses = {
32
32
  </script>
33
33
 
34
34
  <li class={liClasses[tabStyle]} role="presentation">
35
- <button
36
- {...$$restProps}
37
- on:click
38
- on:blur
39
- on:click
40
- on:focus
41
- on:keydown
42
- on:keypress
43
- on:keyup
44
- on:mouseenter
45
- on:mouseleave
46
- on:mouseover
47
- class={classNames(activeTabValue === id ? activeClasses[tabStyle] : inactiveClasses[tabStyle])}
48
- id="{id}-tabhead"
49
- type="button"
50
- role="tab"
51
- {...$$restProps}>
52
- <slot />
53
- </button>
35
+ <button
36
+ {...$$restProps}
37
+ on:click
38
+ on:blur
39
+ on:click
40
+ on:focus
41
+ on:keydown
42
+ on:keypress
43
+ on:keyup
44
+ on:mouseenter
45
+ on:mouseleave
46
+ on:mouseover
47
+ class={classNames(activeTabValue === id ? activeClasses[tabStyle] : inactiveClasses[tabStyle])}
48
+ id="{id}-tabhead"
49
+ type="button"
50
+ role="tab">
51
+ <slot />
52
+ </button>
54
53
  </li>
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: string;
6
+ tabStyle?: "default" | "icon" | "custom" | "pill" | "underline" | "full" | undefined;
7
7
  activeTabValue: number;
8
8
  customActiveClass?: string | undefined;
9
9
  customInActiveClass?: string | undefined;
package/tabs/TabWrapper.svelte CHANGED
@@ -1,10 +1,8 @@
1
1
  <script>import classNames from 'classnames';
2
2
  export let divClass = 'w-full';
3
3
  export let tabStyle = 'default';
4
- export let tabId;
5
- export let activeTabValue;
6
4
  </script>
7
5
 
8
6
  <div class={classNames(divClass, $$props.class)}>
9
- <slot {tabStyle} {tabId} {activeTabValue} />
7
+ <slot {tabStyle} />
10
8
  </div>
package/tabs/TabWrapper.svelte.d.ts CHANGED
@@ -4,8 +4,6 @@ declare const __propDef: {
4
4
  [x: string]: any;
5
5
  divClass?: string | undefined;
6
6
  tabStyle?: "default" | "icon" | "custom" | "pill" | "underline" | "full" | undefined;
7
- tabId: number;
8
- activeTabValue: number;
9
7
  };
10
8
  events: {
11
9
  [evt: string]: CustomEvent<any>;
@@ -13,8 +11,6 @@ declare const __propDef: {
13
11
  slots: {
14
12
  default: {
15
13
  tabStyle: "default" | "icon" | "custom" | "pill" | "underline" | "full";
16
- tabId: number;
17
- activeTabValue: number;
18
14
  };
19
15
  };
20
16
  };
package/tabs/TabContentWrapper.svelte DELETED
@@ -1,8 +0,0 @@
1
- <script>import { getContext } from 'svelte';
2
- let tabId;
3
- tabId = getContext('tabId');
4
- </script>
5
-
6
- <div id="{tabId}-content">
7
- <slot />
8
- </div>
package/tabs/TabContentWrapper.svelte.d.ts DELETED
@@ -1,16 +0,0 @@
1
- import { SvelteComponentTyped } from "svelte";
2
- declare const __propDef: {
3
- props: {};
4
- events: {
5
- [evt: string]: CustomEvent<any>;
6
- };
7
- slots: {
8
- default: {};
9
- };
10
- };
11
- export declare type TabContentWrapperProps = typeof __propDef.props;
12
- export declare type TabContentWrapperEvents = typeof __propDef.events;
13
- export declare type TabContentWrapperSlots = typeof __propDef.slots;
14
- export default class TabContentWrapper extends SvelteComponentTyped<TabContentWrapperProps, TabContentWrapperEvents, TabContentWrapperSlots> {
15
- }
16
- export {};