flowbite-svelte 0.14.1 → 0.14.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.
- package/CHANGELOG.md +24 -0
- package/README.md +1 -1
- package/buttons/Button.svelte +2 -2
- package/buttons/Button.svelte.d.ts +2 -1
- package/buttons/ColorShadowButton.svelte +5 -2
- package/buttons/ColorShadowButton.svelte.d.ts +5 -2
- package/buttons/GradientDuotoneButton.svelte +5 -2
- package/buttons/GradientDuotoneButton.svelte.d.ts +5 -2
- package/buttons/GradientMonochromeButton.svelte +5 -2
- package/buttons/GradientMonochromeButton.svelte.d.ts +5 -2
- package/buttons/GradientOutlineButton.svelte +4 -3
- package/buttons/GradientOutlineButton.svelte.d.ts +5 -2
- package/dropdowns/DropdownDefault.svelte +54 -35
- package/dropdowns/DropdownDefault.svelte.d.ts +3 -0
- package/dropdowns/dropdownStores.d.ts +2 -0
- package/dropdowns/dropdownStores.js +5 -0
- package/modals/modalStores.js +5 -2
- package/package.json +9 -6
- package/tabs/tabStore.js +5 -2
- package/types.js +2 -1
- package/index.d.ts +0 -89
- package/utils/generateId.d.ts +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,30 @@
|
|
|
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.14.4](https://github.com/shinokada/flowbite-svelte/compare/v0.14.3...v0.14.4) (2022-04-19)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* add close on body, add close another dropdown and open own ([addabf8](https://github.com/shinokada/flowbite-svelte/commit/addabf81ccb322e6a482f3baa0687b443914674b))
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
* change btnType to type in Button components ([310d2d8](https://github.com/shinokada/flowbite-svelte/commit/310d2d8f5bd00f3339b59749e79c67d39717f652))
|
|
16
|
+
* change z-50 to z-10 for DropdownDefault ([71d4640](https://github.com/shinokada/flowbite-svelte/commit/71d4640e613c671e11c972d8ceee3721b6c568cc))
|
|
17
|
+
* moved @codewithshin/svelte-heroicons to dependencies ([5639d70](https://github.com/shinokada/flowbite-svelte/commit/5639d70d85fc829bc3827f0cbc82e01c56d644a2))
|
|
18
|
+
* Utterances link update to themesberg ([584da7e](https://github.com/shinokada/flowbite-svelte/commit/584da7ecf8a755814b436998e3567b7ea46c35d9))
|
|
19
|
+
|
|
20
|
+
### [0.14.3](https://github.com/shinokada/flowbite-svelte/compare/v0.14.2...v0.14.3) (2022-04-18)
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
### Features
|
|
24
|
+
|
|
25
|
+
* add slot and {...70121restProps} to all button components ([c98057c](https://github.com/shinokada/flowbite-svelte/commit/c98057cd6ee39053660378dad2b0bdb6970e18da))
|
|
26
|
+
|
|
27
|
+
### [0.14.2](https://github.com/shinokada/flowbite-svelte/compare/v0.14.1...v0.14.2) (2022-04-18)
|
|
28
|
+
|
|
5
29
|
### [0.14.1](https://github.com/shinokada/flowbite-svelte/compare/v0.13.10...v0.14.1) (2022-04-18)
|
|
6
30
|
|
|
7
31
|
|
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# FLOWBITE-SVELTE
|
|
2
2
|
|
|
3
|
-
[Flowbite-Svelte](https://flowbite-svelte.vercel.app/) is an
|
|
3
|
+
[Flowbite-Svelte](https://flowbite-svelte.vercel.app/) is an official Flowbite component library for Svelte. All interactivities are handled by Svelte.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
package/buttons/Button.svelte
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
export let textSize = 'text-sm';
|
|
3
3
|
export let name = 'Read more';
|
|
4
4
|
export let btnColor = 'blue';
|
|
5
|
-
export let
|
|
5
|
+
export let type = 'button';
|
|
6
6
|
let paddings;
|
|
7
7
|
if (textSize === 'text-xs') {
|
|
8
8
|
paddings = 'py-2 px-3';
|
|
@@ -63,7 +63,7 @@ else {
|
|
|
63
63
|
}
|
|
64
64
|
</script>
|
|
65
65
|
|
|
66
|
-
<button type
|
|
66
|
+
<button {type} class={buttonClass} {...$$restProps} on:click>
|
|
67
67
|
{name}
|
|
68
68
|
<slot />
|
|
69
69
|
</button>
|
|
@@ -2,11 +2,12 @@ import { SvelteComponentTyped } from "svelte";
|
|
|
2
2
|
import type { Buttontypes, ButtonType, Textsize } from '../types';
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
|
+
[x: string]: any;
|
|
5
6
|
rounded?: boolean;
|
|
6
7
|
textSize?: Textsize;
|
|
7
8
|
name?: string;
|
|
8
9
|
btnColor?: Buttontypes;
|
|
9
|
-
|
|
10
|
+
type?: ButtonType;
|
|
10
11
|
};
|
|
11
12
|
events: {
|
|
12
13
|
click: MouseEvent;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
export let color = 'blue';
|
|
3
3
|
export let name = 'Read more';
|
|
4
4
|
let btnClass;
|
|
5
|
-
export let
|
|
5
|
+
export let type = 'button';
|
|
6
6
|
if (color === 'blue') {
|
|
7
7
|
btnClass = `text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
|
|
8
8
|
}
|
|
@@ -32,4 +32,7 @@ else {
|
|
|
32
32
|
}
|
|
33
33
|
</script>
|
|
34
34
|
|
|
35
|
-
<button type
|
|
35
|
+
<button {type} class={btnClass} {...$$restProps} on:click>
|
|
36
|
+
{name}
|
|
37
|
+
<slot />
|
|
38
|
+
</button>
|
|
@@ -2,17 +2,20 @@ import { SvelteComponentTyped } from "svelte";
|
|
|
2
2
|
import type { Buttonshadows, Textsize, ButtonType } from '../types';
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
|
+
[x: string]: any;
|
|
5
6
|
textSize?: Textsize;
|
|
6
7
|
color?: Buttonshadows;
|
|
7
8
|
name?: string;
|
|
8
|
-
|
|
9
|
+
type?: ButtonType;
|
|
9
10
|
};
|
|
10
11
|
events: {
|
|
11
12
|
click: MouseEvent;
|
|
12
13
|
} & {
|
|
13
14
|
[evt: string]: CustomEvent<any>;
|
|
14
15
|
};
|
|
15
|
-
slots: {
|
|
16
|
+
slots: {
|
|
17
|
+
default: {};
|
|
18
|
+
};
|
|
16
19
|
};
|
|
17
20
|
export declare type ColorShadowButtonProps = typeof __propDef.props;
|
|
18
21
|
export declare type ColorShadowButtonEvents = typeof __propDef.events;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
export let color = 'purple2blue';
|
|
3
3
|
export let name = 'Read more';
|
|
4
4
|
let btnClass;
|
|
5
|
-
export let
|
|
5
|
+
export let type = 'button';
|
|
6
6
|
if (color === 'purple2blue') {
|
|
7
7
|
btnClass = `text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
|
|
8
8
|
}
|
|
@@ -29,4 +29,7 @@ else {
|
|
|
29
29
|
}
|
|
30
30
|
</script>
|
|
31
31
|
|
|
32
|
-
<button type
|
|
32
|
+
<button {type} class={btnClass} {...$$restProps} on:click>
|
|
33
|
+
{name}
|
|
34
|
+
<slot />
|
|
35
|
+
</button>
|
|
@@ -2,17 +2,20 @@ import { SvelteComponentTyped } from "svelte";
|
|
|
2
2
|
import type { Gradientduotones, Textsize, ButtonType } from '../types';
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
|
+
[x: string]: any;
|
|
5
6
|
textSize?: Textsize;
|
|
6
7
|
color?: Gradientduotones;
|
|
7
8
|
name?: string;
|
|
8
|
-
|
|
9
|
+
type?: ButtonType;
|
|
9
10
|
};
|
|
10
11
|
events: {
|
|
11
12
|
click: MouseEvent;
|
|
12
13
|
} & {
|
|
13
14
|
[evt: string]: CustomEvent<any>;
|
|
14
15
|
};
|
|
15
|
-
slots: {
|
|
16
|
+
slots: {
|
|
17
|
+
default: {};
|
|
18
|
+
};
|
|
16
19
|
};
|
|
17
20
|
export declare type GradientDuotoneButtonProps = typeof __propDef.props;
|
|
18
21
|
export declare type GradientDuotoneButtonEvents = typeof __propDef.events;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
export let color = 'blue';
|
|
3
3
|
export let name = 'Read more';
|
|
4
4
|
let btnClass;
|
|
5
|
-
export let
|
|
5
|
+
export let type = 'button';
|
|
6
6
|
if (color === 'blue') {
|
|
7
7
|
btnClass = `text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
|
|
8
8
|
}
|
|
@@ -32,4 +32,7 @@ else {
|
|
|
32
32
|
}
|
|
33
33
|
</script>
|
|
34
34
|
|
|
35
|
-
<button type
|
|
35
|
+
<button {type} class={btnClass} {...$$restProps} on:click>
|
|
36
|
+
{name}
|
|
37
|
+
<slot />
|
|
38
|
+
</button>
|
|
@@ -2,17 +2,20 @@ import { SvelteComponentTyped } from "svelte";
|
|
|
2
2
|
import type { Buttonshadows, Textsize, ButtonType } from '../types';
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
|
+
[x: string]: any;
|
|
5
6
|
textSize?: Textsize;
|
|
6
7
|
color?: Buttonshadows;
|
|
7
8
|
name?: string;
|
|
8
|
-
|
|
9
|
+
type?: ButtonType;
|
|
9
10
|
};
|
|
10
11
|
events: {
|
|
11
12
|
click: MouseEvent;
|
|
12
13
|
} & {
|
|
13
14
|
[evt: string]: CustomEvent<any>;
|
|
14
15
|
};
|
|
15
|
-
slots: {
|
|
16
|
+
slots: {
|
|
17
|
+
default: {};
|
|
18
|
+
};
|
|
16
19
|
};
|
|
17
20
|
export declare type GradientMonochromeButtonProps = typeof __propDef.props;
|
|
18
21
|
export declare type GradientMonochromeButtonEvents = typeof __propDef.events;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script >export let textSize = 'text-sm';
|
|
2
2
|
export let color = 'purple2blue';
|
|
3
3
|
export let name = 'Read more';
|
|
4
|
-
export let
|
|
4
|
+
export let type = 'button';
|
|
5
5
|
let btnClass;
|
|
6
6
|
let spanClass;
|
|
7
7
|
if (color === 'purple2blue') {
|
|
@@ -38,6 +38,7 @@ else {
|
|
|
38
38
|
}
|
|
39
39
|
</script>
|
|
40
40
|
|
|
41
|
-
<button class={btnClass} type
|
|
42
|
-
<span class={spanClass}
|
|
41
|
+
<button class={btnClass} {type} {...$$restProps} on:click>
|
|
42
|
+
<span class={spanClass}>{name}</span>
|
|
43
|
+
<slot />
|
|
43
44
|
</button>
|
|
@@ -2,17 +2,20 @@ import { SvelteComponentTyped } from "svelte";
|
|
|
2
2
|
import type { Gradientduotones, Textsize, ButtonType } from '../types';
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
|
+
[x: string]: any;
|
|
5
6
|
textSize?: Textsize;
|
|
6
7
|
color?: Gradientduotones;
|
|
7
8
|
name?: string;
|
|
8
|
-
|
|
9
|
+
type?: ButtonType;
|
|
9
10
|
};
|
|
10
11
|
events: {
|
|
11
12
|
click: MouseEvent;
|
|
12
13
|
} & {
|
|
13
14
|
[evt: string]: CustomEvent<any>;
|
|
14
15
|
};
|
|
15
|
-
slots: {
|
|
16
|
+
slots: {
|
|
17
|
+
default: {};
|
|
18
|
+
};
|
|
16
19
|
};
|
|
17
20
|
export declare type GradientOutlineButtonProps = typeof __propDef.props;
|
|
18
21
|
export declare type GradientOutlineButtonEvents = typeof __propDef.events;
|
|
@@ -1,7 +1,14 @@
|
|
|
1
|
-
<script >
|
|
1
|
+
<script >import { dropdownIdStore } from './dropdownStores';
|
|
2
|
+
import { get } from 'svelte/store';
|
|
3
|
+
export let id = 'dropdown';
|
|
4
|
+
export let label = 'Dropdown button';
|
|
2
5
|
export let rounded = false;
|
|
3
6
|
export let textSize = 'text-sm';
|
|
4
7
|
export let color = 'blue';
|
|
8
|
+
let showDropdownId;
|
|
9
|
+
dropdownIdStore.subscribe((value) => {
|
|
10
|
+
showDropdownId = value;
|
|
11
|
+
});
|
|
5
12
|
let paddings;
|
|
6
13
|
if (textSize === 'text-xs') {
|
|
7
14
|
paddings = 'py-2 px-3';
|
|
@@ -17,78 +24,90 @@ else {
|
|
|
17
24
|
}
|
|
18
25
|
let buttonClass;
|
|
19
26
|
let round = rounded ? 'rounded-full' : 'rounded-lg';
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
27
|
+
export const openFn = (id) => {
|
|
28
|
+
if (showDropdownId === id) {
|
|
29
|
+
dropdownIdStore.update((n) => (n = null));
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
dropdownIdStore.update((n) => (n = id));
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
const closeDropdown = () => {
|
|
36
|
+
dropdownIdStore.update((n) => (n = null));
|
|
24
37
|
};
|
|
25
38
|
export let items;
|
|
26
|
-
export let dropdownClass = '
|
|
39
|
+
export let dropdownClass = 'absolute -left-44 top-12 z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700';
|
|
27
40
|
export let headerClass = 'py-3 px-4 text-gray-900 dark:text-white';
|
|
28
41
|
export let linkClass = 'block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white';
|
|
29
42
|
if (color === 'blue') {
|
|
30
|
-
buttonClass = `inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
|
|
43
|
+
buttonClass = `inline-flex z-10 items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
|
|
31
44
|
}
|
|
32
45
|
else if (color === 'blue-outline') {
|
|
33
|
-
buttonClass = `inline-flex items-center text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800`;
|
|
46
|
+
buttonClass = `inline-flex z-10 items-center text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800`;
|
|
34
47
|
}
|
|
35
48
|
else if (color === 'dark') {
|
|
36
|
-
buttonClass =
|
|
49
|
+
buttonClass = `inline-flex z-10 items-center text-white bg-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700`;
|
|
37
50
|
}
|
|
38
51
|
else if (color === 'dark-outline') {
|
|
39
|
-
buttonClass = `inline-flex items-center text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800`;
|
|
52
|
+
buttonClass = `inline-flex z-10 items-center text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800`;
|
|
40
53
|
}
|
|
41
54
|
else if (color === 'light') {
|
|
42
|
-
buttonClass = `inline-flex items-center text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-800`;
|
|
55
|
+
buttonClass = `inline-flex z-10 items-center text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-800`;
|
|
43
56
|
}
|
|
44
57
|
else if (color === 'green') {
|
|
45
|
-
buttonClass = `inline-flex items-center text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800`;
|
|
58
|
+
buttonClass = `inline-flex z-10 items-center text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800`;
|
|
46
59
|
}
|
|
47
60
|
else if (color === 'green-outline') {
|
|
48
|
-
buttonClass = `inline-flex items-center text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800`;
|
|
61
|
+
buttonClass = `inline-flex z-10 items-center text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800`;
|
|
49
62
|
}
|
|
50
63
|
else if (color === 'red') {
|
|
51
|
-
buttonClass = `inline-flex items-center text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900`;
|
|
64
|
+
buttonClass = `inline-flex z-10 items-center text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900`;
|
|
52
65
|
}
|
|
53
66
|
else if (color === 'red-outline') {
|
|
54
|
-
buttonClass = `inline-flex items-center text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900`;
|
|
67
|
+
buttonClass = `inline-flex z-10 items-center text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900`;
|
|
55
68
|
}
|
|
56
69
|
else if (color === 'yellow') {
|
|
57
|
-
buttonClass = `inline-flex items-center text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium ${round} ${textSize} ${paddings} text-center dark:focus:ring-yellow-900`;
|
|
70
|
+
buttonClass = `inline-flex z-10 items-center text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium ${round} ${textSize} ${paddings} text-center dark:focus:ring-yellow-900`;
|
|
58
71
|
}
|
|
59
72
|
else if (color === 'yellow-outline') {
|
|
60
|
-
buttonClass = `inline-flex items-center text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900`;
|
|
73
|
+
buttonClass = `inline-flex z-10 items-center text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900`;
|
|
61
74
|
}
|
|
62
75
|
else if (color === 'purple') {
|
|
63
|
-
buttonClass = `inline-flex items-center text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium ${round} ${textSize} ${paddings} text-center mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900`;
|
|
76
|
+
buttonClass = `inline-flex z-10 items-center text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium ${round} ${textSize} ${paddings} text-center mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900`;
|
|
64
77
|
}
|
|
65
78
|
else if (color === 'purple-outline') {
|
|
66
|
-
buttonClass = `inline-flex items-center text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900`;
|
|
79
|
+
buttonClass = `inline-flex z-10 items-center text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900`;
|
|
67
80
|
}
|
|
68
81
|
else {
|
|
69
82
|
// blue
|
|
70
|
-
buttonClass = `inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
|
|
83
|
+
buttonClass = `inline-flex z-10 items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
|
|
71
84
|
}
|
|
72
85
|
</script>
|
|
73
86
|
|
|
74
|
-
<button on:click={
|
|
87
|
+
<button on:click={() => openFn(id)} class={buttonClass} type="button"
|
|
75
88
|
>{label}
|
|
76
89
|
<svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg>
|
|
77
90
|
</button>
|
|
78
91
|
|
|
79
92
|
<div class="relative">
|
|
80
|
-
|
|
81
|
-
{
|
|
82
|
-
|
|
83
|
-
<
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
<
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
93
|
+
{#if showDropdownId === id}
|
|
94
|
+
<div class={dropdownClass}>
|
|
95
|
+
{#if $$slots.header}
|
|
96
|
+
<div class={headerClass}>
|
|
97
|
+
<slot name="header" />
|
|
98
|
+
</div>
|
|
99
|
+
{/if}
|
|
100
|
+
<ul class="py-1" aria-labelledby="dropdownButton">
|
|
101
|
+
{#each items as { href, name, divider }}
|
|
102
|
+
<li class:border-b={divider} class:border-gray-100={divider} class:dark:border-gray-500={divider}>
|
|
103
|
+
<a {href} class={linkClass}>{name}</a>
|
|
104
|
+
</li>
|
|
105
|
+
{/each}
|
|
106
|
+
</ul>
|
|
107
|
+
</div>
|
|
108
|
+
{/if}
|
|
94
109
|
</div>
|
|
110
|
+
|
|
111
|
+
{#if $dropdownIdStore}
|
|
112
|
+
<div on:click={closeDropdown} class="fixed w-full h-full z-0 inset-0" />
|
|
113
|
+
{/if}
|
|
@@ -2,10 +2,12 @@ import { SvelteComponentTyped } from "svelte";
|
|
|
2
2
|
import type { DropdownType, DropdownColorType } from '../types';
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
|
+
id?: string;
|
|
5
6
|
label?: string;
|
|
6
7
|
rounded?: boolean;
|
|
7
8
|
textSize?: string;
|
|
8
9
|
color?: DropdownColorType;
|
|
10
|
+
openFn?: (id: string) => void;
|
|
9
11
|
items: DropdownType[];
|
|
10
12
|
dropdownClass?: string;
|
|
11
13
|
headerClass?: string;
|
|
@@ -22,5 +24,6 @@ export declare type DropdownDefaultProps = typeof __propDef.props;
|
|
|
22
24
|
export declare type DropdownDefaultEvents = typeof __propDef.events;
|
|
23
25
|
export declare type DropdownDefaultSlots = typeof __propDef.slots;
|
|
24
26
|
export default class DropdownDefault extends SvelteComponentTyped<DropdownDefaultProps, DropdownDefaultEvents, DropdownDefaultSlots> {
|
|
27
|
+
get openFn(): (id: string) => void;
|
|
25
28
|
}
|
|
26
29
|
export {};
|
package/modals/modalStores.js
CHANGED
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.modalIdStore = void 0;
|
|
4
|
+
var store_1 = require("svelte/store");
|
|
5
|
+
exports.modalIdStore = (0, store_1.writable)('');
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flowbite-svelte",
|
|
3
|
-
"version": "0.14.
|
|
3
|
+
"version": "0.14.4",
|
|
4
4
|
"description": "Flowbite components for Svelte",
|
|
5
5
|
"main": "./package/index.js",
|
|
6
6
|
"author": {
|
|
@@ -8,11 +8,10 @@
|
|
|
8
8
|
"email": "connect@codewithshin.com",
|
|
9
9
|
"url": "https://blog.codewithshin.com"
|
|
10
10
|
},
|
|
11
|
-
"bugs": "https://github.com/
|
|
12
|
-
"homepage": "https://github.com/
|
|
11
|
+
"bugs": "https://github.com/themesberg/flowbite-svelte/issues",
|
|
12
|
+
"homepage": "https://github.com/themesberg/flowbite-svelte",
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"devDependencies": {
|
|
15
|
-
"@codewithshin/svelte-heroicons": "^1.1.3",
|
|
16
15
|
"@codewithshin/svelte-sidebar": "^0.4.8",
|
|
17
16
|
"@codewithshin/svelte-simpleicons": "^0.2.2",
|
|
18
17
|
"@codewithshin/svelte-utterances": "^0.2.2",
|
|
@@ -25,7 +24,6 @@
|
|
|
25
24
|
"eslint": "^7.32.0",
|
|
26
25
|
"eslint-config-prettier": "^8.3.0",
|
|
27
26
|
"eslint-plugin-svelte3": "^3.2.1",
|
|
28
|
-
"flowbite": "^1.4.1",
|
|
29
27
|
"flowbite-svelte": "^0.13.8",
|
|
30
28
|
"mdsvex": "^0.10.5",
|
|
31
29
|
"postcss": "^8.4.12",
|
|
@@ -35,7 +33,6 @@
|
|
|
35
33
|
"prism-themes": "^1.9.0",
|
|
36
34
|
"svelte": "^3.44.0",
|
|
37
35
|
"svelte-check": "^2.2.6",
|
|
38
|
-
"svelte-collapse": "^0.0.4",
|
|
39
36
|
"svelte-preprocess": "^4.10.5",
|
|
40
37
|
"svelte2tsx": "^0.5.9",
|
|
41
38
|
"tailwindcss": "^3.0.23",
|
|
@@ -76,6 +73,11 @@
|
|
|
76
73
|
"type": "git",
|
|
77
74
|
"url": "https://github.com/shinokada/flowbite-svelte"
|
|
78
75
|
},
|
|
76
|
+
"dependencies": {
|
|
77
|
+
"@codewithshin/svelte-heroicons": "^1.1.3",
|
|
78
|
+
"flowbite": "^1.4.2",
|
|
79
|
+
"svelte-collapse": "^0.0.4"
|
|
80
|
+
},
|
|
79
81
|
"exports": {
|
|
80
82
|
"./package.json": "./package.json",
|
|
81
83
|
"./.DS_Store": "./.DS_Store",
|
|
@@ -118,6 +120,7 @@
|
|
|
118
120
|
"./darkmode/DarkMode.svelte": "./darkmode/DarkMode.svelte",
|
|
119
121
|
"./dropdowns/DropdownDefault.svelte": "./dropdowns/DropdownDefault.svelte",
|
|
120
122
|
"./dropdowns/ImgDropdown.svelte": "./dropdowns/ImgDropdown.svelte",
|
|
123
|
+
"./dropdowns/dropdownStores": "./dropdowns/dropdownStores.js",
|
|
121
124
|
"./footer/LogoFooter.svelte": "./footer/LogoFooter.svelte",
|
|
122
125
|
"./footer/SimpleFooter.svelte": "./footer/SimpleFooter.svelte",
|
|
123
126
|
"./footer/SitemapFooter.svelte": "./footer/SitemapFooter.svelte",
|
package/tabs/tabStore.js
CHANGED
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.tabStore = void 0;
|
|
4
|
+
var store_1 = require("svelte/store");
|
|
5
|
+
exports.tabStore = (0, store_1.writable)(1);
|
package/types.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
package/index.d.ts
DELETED
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
export { default as Accordion } from "./accordions/AccordionDefault.svelte";
|
|
2
|
-
export { default as AccordionItem } from "./accordions/AccordionItem.svelte";
|
|
3
|
-
export { default as Alert } from "./alerts/Alert.svelte";
|
|
4
|
-
export { default as BorderAlert } from "./alerts/BorderAlert.svelte";
|
|
5
|
-
export { default as InfoAlert } from "./alerts/InfoAlert.svelte";
|
|
6
|
-
export { default as Confirm } from "./auth/Confirm.svelte";
|
|
7
|
-
export { default as ForgotPassword } from "./auth/ForgotPassword.svelte";
|
|
8
|
-
export { default as Login } from "./auth/Login.svelte";
|
|
9
|
-
export { default as Register } from "./auth/Register.svelte";
|
|
10
|
-
export { default as Reset } from "./auth/Reset.svelte";
|
|
11
|
-
export { default as Avatar } from "./avatar/Avatar.svelte";
|
|
12
|
-
export { default as Badge } from "./badges/Badge.svelte";
|
|
13
|
-
export { default as BadgeIcon } from "./badges/BadgeIcon.svelte";
|
|
14
|
-
export { default as BadgeLink } from "./badges/BadgeLink.svelte";
|
|
15
|
-
export { default as Breadcrumb } from "./breadcrumbs/Breadcrumb.svelte";
|
|
16
|
-
export { default as Button } from "./buttons/Button.svelte";
|
|
17
|
-
export { default as ColorShadowButton } from "./buttons/ColorShadowButton.svelte";
|
|
18
|
-
export { default as GradientDuotoneButton } from "./buttons/GradientDuotoneButton.svelte";
|
|
19
|
-
export { default as GradientMonochromeButton } from "./buttons/GradientMonochromeButton.svelte";
|
|
20
|
-
export { default as GradientOutlineButton } from "./buttons/GradientOutlineButton.svelte";
|
|
21
|
-
export { default as ButtonGroup } from "./buttongroups/ButtonGroup.svelte";
|
|
22
|
-
export { default as ButtonGroupOutline } from "./buttongroups/ButtonGroupOutline.svelte";
|
|
23
|
-
export { default as Card } from "./cards/Card.svelte";
|
|
24
|
-
export { default as HorizontalCard } from "./cards/HorizontalCard.svelte";
|
|
25
|
-
export { default as InteractiveCard } from "./cards/InteractiveCard.svelte";
|
|
26
|
-
export { default as ListCard } from "./cards/ListCard.svelte";
|
|
27
|
-
export { default as CtaCard } from "./cards/CtaCard.svelte";
|
|
28
|
-
export { default as EcommerceCard } from "./cards/EcommerceCard.svelte";
|
|
29
|
-
export { default as SignInCard } from "./cards/SignInCard.svelte";
|
|
30
|
-
export { default as Carousel } from "./carousels/Carousel.svelte";
|
|
31
|
-
export { default as CarouselTransition } from "./carousels/CarouselTransition.svelte";
|
|
32
|
-
export { default as DarkMode } from "./darkmode/DarkMode.svelte";
|
|
33
|
-
export { default as Dropdown } from "./dropdowns/DropdownDefault.svelte";
|
|
34
|
-
export { default as ImgDropdown } from "./dropdowns/ImgDropdown.svelte";
|
|
35
|
-
export { default as SimpleFooter } from "./footer/SimpleFooter.svelte";
|
|
36
|
-
export { default as LogoFooter } from "./footer/LogoFooter.svelte";
|
|
37
|
-
export { default as SocialMediaFooter } from "./footer/SocialMediaFooter.svelte";
|
|
38
|
-
export { default as SitemapFooter } from "./footer/SitemapFooter.svelte";
|
|
39
|
-
export { default as Checkbox } from "./forms/Checkbox.svelte";
|
|
40
|
-
export { default as Fileupload } from "./forms/Fileupload.svelte";
|
|
41
|
-
export { default as FloatingLabelInput } from "./forms/FloatingLabelInput.svelte";
|
|
42
|
-
export { default as Iconinput } from "./forms/Iconinput.svelte";
|
|
43
|
-
export { default as Input } from "./forms/Input.svelte";
|
|
44
|
-
export { default as Radio } from "./forms/Radio.svelte";
|
|
45
|
-
export { default as SingleCheckbox } from "./forms/SingleCheckbox.svelte";
|
|
46
|
-
export { default as Select } from "./forms/Select.svelte";
|
|
47
|
-
export { default as Textarea } from "./forms/Textarea.svelte";
|
|
48
|
-
export { default as Toggle } from "./forms/Toggle.svelte";
|
|
49
|
-
export { default as List } from "./list-group/List.svelte";
|
|
50
|
-
export { modalIdStore } from "./modals/modalStores";
|
|
51
|
-
export { default as ExtraLargeModal } from "./modals/ExtraLargeModal.svelte";
|
|
52
|
-
export { default as LargeModal } from "./modals/LargeModal.svelte";
|
|
53
|
-
export { default as MediumModal } from "./modals/MediumModal.svelte";
|
|
54
|
-
export { default as ModalButton } from "./modals/ModalButton.svelte";
|
|
55
|
-
export { default as SignInModal } from "./modals/SignInModal.svelte";
|
|
56
|
-
export { default as SmallModal } from "./modals/SmallModal.svelte";
|
|
57
|
-
export { default as Navbar } from "./navbar/Navbar.svelte";
|
|
58
|
-
export { default as DropdownNavbar } from "./navbar/DropdownNavbar.svelte";
|
|
59
|
-
export { default as Pagination } from "./paginations/Pagination.svelte";
|
|
60
|
-
export { default as Previous } from "./paginations/Previous.svelte";
|
|
61
|
-
export { default as Next } from "./paginations/Next.svelte";
|
|
62
|
-
export { default as TableData } from "./paginations/TableData.svelte";
|
|
63
|
-
export { default as Progressbar } from "./progressbars/Progressbar.svelte";
|
|
64
|
-
export { default as Sidebar } from "./sidebars/Sidebar.svelte";
|
|
65
|
-
export { default as Spinner } from "./spinners/Spinner.svelte";
|
|
66
|
-
export { default as SpinnerButton } from "./spinners/SpinnerButton.svelte";
|
|
67
|
-
export { default as Table } from "./tables/Table.svelte";
|
|
68
|
-
export { default as TableDefaultRow } from "./tables/TableDefaultRow.svelte";
|
|
69
|
-
export { default as TableSearch } from "./tables/TableSearch.svelte";
|
|
70
|
-
export { default as InteractiveTabHead } from "./tabs/InteractiveTabHead.svelte";
|
|
71
|
-
export { default as InteractiveTabs } from "./tabs/InteractiveTabs.svelte";
|
|
72
|
-
export { default as DefaultTabs } from "./tabs/DefaultTabs.svelte";
|
|
73
|
-
export { default as FullWidthTabs } from "./tabs/FullWidthTabs.svelte";
|
|
74
|
-
export { default as IconTabs } from "./tabs/IconTabs.svelte";
|
|
75
|
-
export { default as PillTabs } from "./tabs/PillTabs.svelte";
|
|
76
|
-
export { default as TabContent } from "./tabs/TabContent.svelte";
|
|
77
|
-
export { default as UnderlineTabs } from "./tabs/UnderlineTabs.svelte";
|
|
78
|
-
export { default as Group } from "./timelines/Group.svelte";
|
|
79
|
-
export { default as GroupItem } from "./timelines/GroupItem.svelte";
|
|
80
|
-
export { default as Activity } from "./timelines/Activity.svelte";
|
|
81
|
-
export { default as ActivityItem } from "./timelines/ActivityItem.svelte";
|
|
82
|
-
export { default as Timeline } from "./timelines/Timeline.svelte";
|
|
83
|
-
export { default as TimelineItem } from "./timelines/TimelineItem.svelte";
|
|
84
|
-
export { default as TimelineHorizontal } from "./timelines/TimelineHorizontal.svelte";
|
|
85
|
-
export { default as TimelineItemHorizontal } from "./timelines/TimelineItemHorizontal.svelte";
|
|
86
|
-
export { default as TimelineItemVertical } from "./timelines/TimelineItemVertical.svelte";
|
|
87
|
-
export { default as Toast } from "./toasts/Toast.svelte";
|
|
88
|
-
export { default as Tooltip } from "./tooltips/Tooltip.svelte";
|
|
89
|
-
export { default as LightTooltip } from "./tooltips/LightTooltip.svelte";
|
package/utils/generateId.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export default function _default(): string;
|