flowbite-svelte 0.21.0 → 0.21.3
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 +25 -0
- package/alerts/Alert.svelte +21 -55
- package/alerts/Alert.svelte.d.ts +3 -3
- package/badges/Badge.svelte +3 -2
- package/badges/Badge.svelte.d.ts +1 -0
- package/buttons/Button.svelte +45 -94
- package/buttons/Button.svelte.d.ts +2 -6
- package/package.json +1 -1
- package/ratings/RatingComment.svelte +73 -12
- package/spinners/Spinner.svelte +14 -6
- package/toasts/Toast.svelte +14 -8
- package/toasts/Toast.svelte.d.ts +1 -0
- package/utils/CloseButton.svelte +10 -10
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,31 @@
|
|
|
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.21.3](https://github.com/themesberg/flowbite-svelte/compare/v0.21.2...v0.21.3) (2022-07-14)
|
|
6
|
+
|
|
7
|
+
### [0.21.2](https://github.com/themesberg/flowbite-svelte/compare/v0.21.1...v0.21.2) (2022-07-13)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### Bug Fixes
|
|
11
|
+
|
|
12
|
+
* toc more selective ([fb457a2](https://github.com/themesberg/flowbite-svelte/commit/fb457a26b595652f0f59d08915cfae3267361899))
|
|
13
|
+
|
|
14
|
+
### [0.21.1](https://github.com/themesberg/flowbite-svelte/compare/v0.21.0...v0.21.1) (2022-07-12)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Features
|
|
18
|
+
|
|
19
|
+
* add positioning to Toasts ([a88f641](https://github.com/themesberg/flowbite-svelte/commit/a88f641731efc52d55c6474a8f9696598fd339cc))
|
|
20
|
+
* merging jjagielka-buttons ([94ffdcb](https://github.com/themesberg/flowbite-svelte/commit/94ffdcba071488d0d56492c3a1fdb148afdb9450))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
### Bug Fixes
|
|
24
|
+
|
|
25
|
+
* buttons - transparency for outline ([6ae3d0f](https://github.com/themesberg/flowbite-svelte/commit/6ae3d0ff767e307ae5a4968f7b3c9a52dbb324f4))
|
|
26
|
+
* documentation typos ([942c3b2](https://github.com/themesberg/flowbite-svelte/commit/942c3b2a2624aec3ba4d34cfab2c1098d41cd362))
|
|
27
|
+
* removed bg and text from CloseButton to keep transparency ([b5d36ee](https://github.com/themesberg/flowbite-svelte/commit/b5d36eec584f89a46d59346995b79b9b0d0fd906))
|
|
28
|
+
* reverting Alert ([ccda53a](https://github.com/themesberg/flowbite-svelte/commit/ccda53ad474e0c6a39ffa6297555485f08ea9b5d))
|
|
29
|
+
|
|
5
30
|
## [0.21.0](https://github.com/themesberg/flowbite-svelte/compare/v0.20.0...v0.21.0) (2022-07-01)
|
|
6
31
|
|
|
7
32
|
|
package/alerts/Alert.svelte
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
<script>import classNames from 'classnames';
|
|
2
2
|
import { createEventDispatcher } from 'svelte';
|
|
3
|
+
import CloseButton from '../utils/CloseButton.svelte';
|
|
3
4
|
const dispatch = createEventDispatcher();
|
|
4
5
|
export let color = 'blue';
|
|
5
6
|
export let icon = null;
|
|
6
|
-
export let
|
|
7
|
+
export let dismissable = false;
|
|
7
8
|
export let rounded = true;
|
|
8
|
-
export let
|
|
9
|
+
export let accent = false;
|
|
9
10
|
let hidden = false;
|
|
10
11
|
const handleAlert = () => {
|
|
11
12
|
dispatch('handleAlert');
|
|
@@ -13,14 +14,6 @@ const handleAlert = () => {
|
|
|
13
14
|
const handleHide = () => {
|
|
14
15
|
hidden = !hidden;
|
|
15
16
|
};
|
|
16
|
-
let divClass = 'flex flex-col p-4 mb-4 gap-2 ';
|
|
17
|
-
let contentClass;
|
|
18
|
-
let buttonClass = 'ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex h-8 w-8 ';
|
|
19
|
-
// TODO: update on change
|
|
20
|
-
if (rounded)
|
|
21
|
-
divClass += 'rounded-lg ';
|
|
22
|
-
if (borderAccent)
|
|
23
|
-
divClass += 'border-t-4 ';
|
|
24
17
|
const bgClasses = {
|
|
25
18
|
gray: 'bg-gray-100 dark:bg-gray-200 ',
|
|
26
19
|
red: 'bg-red-100 dark:bg-red-200',
|
|
@@ -29,7 +22,8 @@ const bgClasses = {
|
|
|
29
22
|
indigo: 'bg-indigo-100 dark:bg-indigo-200 ',
|
|
30
23
|
purple: 'bg-purple-100 dark:bg-purple-200 ',
|
|
31
24
|
pink: 'bg-pink-100 dark:bg-pink-200 ',
|
|
32
|
-
blue: 'bg-blue-100 dark:bg-blue-200 '
|
|
25
|
+
blue: 'bg-blue-100 dark:bg-blue-200 ',
|
|
26
|
+
dark: 'bg-gray-100 dark:bg-gray-700'
|
|
33
27
|
};
|
|
34
28
|
const borderAccentClasses = {
|
|
35
29
|
gray: 'border-gray-500 dark:bg-gray-200 ',
|
|
@@ -39,9 +33,10 @@ const borderAccentClasses = {
|
|
|
39
33
|
indigo: 'border-indigo-500 dark:bg-indigo-200 ',
|
|
40
34
|
purple: 'border-purple-500 dark:bg-purple-200 ',
|
|
41
35
|
pink: 'border-pink-500 dark:bg-pink-200 ',
|
|
42
|
-
blue: 'border-blue-500 dark:bg-blue-200 '
|
|
36
|
+
blue: 'border-blue-500 dark:bg-blue-200 ',
|
|
37
|
+
dark: 'border-gray-500'
|
|
43
38
|
};
|
|
44
|
-
const
|
|
39
|
+
const textColors = {
|
|
45
40
|
gray: 'text-gray-700 dark:text-gray-800',
|
|
46
41
|
red: 'text-red-700 dark:text-red-800',
|
|
47
42
|
yellow: 'text-yellow-700 dark:text-yellow-800',
|
|
@@ -49,56 +44,27 @@ const contentClasses = {
|
|
|
49
44
|
indigo: 'text-indigo-700 dark:text-indigo-800',
|
|
50
45
|
purple: 'text-purple-700 dark:text-purple-800',
|
|
51
46
|
pink: 'text-pink-700 dark:text-pink-800',
|
|
52
|
-
blue: 'text-blue-700 dark:text-blue-800'
|
|
47
|
+
blue: 'text-blue-700 dark:text-blue-800',
|
|
48
|
+
dark: 'text-gray-700 dark:text-gray-300'
|
|
53
49
|
};
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
green: 'bg-green-100 text-green-500 focus:ring-green-400 hover:bg-green-200 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300',
|
|
59
|
-
indigo: 'bg-indigo-100 text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:bg-indigo-200 dark:text-indigo-600 dark:hover:bg-indigo-300',
|
|
60
|
-
purple: 'bg-purple-100 text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:bg-purple-200 dark:text-purple-600 dark:hover:bg-purple-300',
|
|
61
|
-
pink: 'bg-pink-100 text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:bg-pink-200 dark:text-pink-600 dark:hover:bg-pink-300',
|
|
62
|
-
blue: 'bg-blue-100 text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300'
|
|
63
|
-
};
|
|
64
|
-
divClass += bgClasses[color] ?? bgClasses.blue;
|
|
65
|
-
if (borderAccent)
|
|
66
|
-
divClass += borderAccentClasses[color] ?? borderAccentClasses.blue;
|
|
67
|
-
contentClass = contentClasses[color] ?? contentClasses.blue;
|
|
68
|
-
buttonClass += buttonClasses[color] ?? buttonClasses.blue;
|
|
50
|
+
let divClass;
|
|
51
|
+
$: divClass = classNames('flex flex-col p-4 mb-4 gap-2 ', bgClasses[color] ?? bgClasses.blue, accent && (borderAccentClasses[color] ?? borderAccentClasses.blue), rounded && 'rounded-lg ', accent && 'border-t-4 ', $$props.class);
|
|
52
|
+
let textColor;
|
|
53
|
+
$: textColor = textColors[color] ?? textColors.blue;
|
|
69
54
|
</script>
|
|
70
55
|
|
|
71
|
-
<div id={$$props.id} class:hidden class={
|
|
72
|
-
<div class="flex">
|
|
56
|
+
<div id={$$props.id} class:hidden class={divClass} role="alert">
|
|
57
|
+
<div class="flex items-center">
|
|
73
58
|
{#if icon}
|
|
74
|
-
<svelte:component this={icon} class="flex-shrink-0 w-5 h-5 {
|
|
59
|
+
<svelte:component this={icon} class="flex-shrink-0 w-5 h-5 {textColor} mr-3" />
|
|
75
60
|
{/if}
|
|
76
61
|
|
|
77
|
-
<div class="text-sm
|
|
78
|
-
<slot
|
|
62
|
+
<div class="text-sm {textColor}">
|
|
63
|
+
<slot />
|
|
79
64
|
</div>
|
|
80
65
|
|
|
81
|
-
{#if
|
|
82
|
-
<
|
|
83
|
-
on:click={handleHide}
|
|
84
|
-
on:click={handleAlert}
|
|
85
|
-
type="button"
|
|
86
|
-
class={buttonClass}
|
|
87
|
-
aria-label="Close"
|
|
88
|
-
>
|
|
89
|
-
<span class="sr-only">Close</span>
|
|
90
|
-
<svg
|
|
91
|
-
class="w-5 h-5"
|
|
92
|
-
fill="currentColor"
|
|
93
|
-
viewBox="0 0 20 20"
|
|
94
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
95
|
-
><path
|
|
96
|
-
fill-rule="evenodd"
|
|
97
|
-
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"
|
|
98
|
-
clip-rule="evenodd"
|
|
99
|
-
/></svg
|
|
100
|
-
>
|
|
101
|
-
</button>
|
|
66
|
+
{#if dismissable}
|
|
67
|
+
<CloseButton {color} on:click={handleHide} on:click={handleAlert} />
|
|
102
68
|
{/if}
|
|
103
69
|
</div>
|
|
104
70
|
<slot name="extra" />
|
package/alerts/Alert.svelte.d.ts
CHANGED
|
@@ -6,9 +6,9 @@ declare const __propDef: {
|
|
|
6
6
|
[x: string]: any;
|
|
7
7
|
color?: Colors;
|
|
8
8
|
icon?: typeof SvelteComponent | null;
|
|
9
|
-
|
|
9
|
+
dismissable?: boolean;
|
|
10
10
|
rounded?: boolean;
|
|
11
|
-
|
|
11
|
+
accent?: boolean;
|
|
12
12
|
};
|
|
13
13
|
events: {
|
|
14
14
|
handleAlert: CustomEvent<any>;
|
|
@@ -16,7 +16,7 @@ declare const __propDef: {
|
|
|
16
16
|
[evt: string]: CustomEvent<any>;
|
|
17
17
|
};
|
|
18
18
|
slots: {
|
|
19
|
-
|
|
19
|
+
default: {};
|
|
20
20
|
extra: {};
|
|
21
21
|
};
|
|
22
22
|
};
|
package/badges/Badge.svelte
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
export let color = 'blue';
|
|
3
3
|
export let large = false;
|
|
4
4
|
export let href;
|
|
5
|
+
export let rounded = false;
|
|
5
6
|
let badgeClass;
|
|
6
7
|
const colors = {
|
|
7
8
|
blue: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800',
|
|
@@ -23,9 +24,9 @@ const hovers = {
|
|
|
23
24
|
purple: 'hover:bg-purple-200 dark:hover:bg-purple-300',
|
|
24
25
|
pink: 'hover:bg-pink-200 dark:hover:bg-pink-300'
|
|
25
26
|
};
|
|
26
|
-
$: badgeClass = classNames('inline-flex items-center
|
|
27
|
+
$: badgeClass = classNames('inline-flex items-center justify-center mr-2', large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color] ?? colors.blue, href && (hovers[color] ?? hovers.blue), rounded ? 'rounded-full p-1' : 'rounded px-2.5 py-0.5', $$props.class);
|
|
27
28
|
</script>
|
|
28
29
|
|
|
29
|
-
<svelte:element this={href ? 'a' : 'span'} {href} class={badgeClass}
|
|
30
|
+
<svelte:element this={href ? 'a' : 'span'} {href} {...$$restProps} class={badgeClass}>
|
|
30
31
|
<slot />
|
|
31
32
|
</svelte:element>
|
package/badges/Badge.svelte.d.ts
CHANGED
package/buttons/Button.svelte
CHANGED
|
@@ -1,40 +1,36 @@
|
|
|
1
1
|
<script>import classNames from 'classnames';
|
|
2
|
-
export let label = '';
|
|
3
2
|
export let pill = false;
|
|
4
3
|
export let outline = false;
|
|
5
|
-
export let color = 'blue';
|
|
6
|
-
export let size = 'md';
|
|
7
|
-
export let icon = undefined;
|
|
8
4
|
export let gradient = false;
|
|
5
|
+
export let size = 'md';
|
|
6
|
+
export let color = 'blue';
|
|
9
7
|
export let shadow = null;
|
|
10
|
-
export let positionInGroup = null;
|
|
11
8
|
const colorClasses = {
|
|
12
|
-
blue: 'text-white bg-blue-700
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
light: 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-
|
|
16
|
-
green: 'text-white bg-green-700
|
|
17
|
-
red: 'text-white bg-red-700
|
|
18
|
-
yellow: 'text-white bg-yellow-400
|
|
19
|
-
purple: 'text-white bg-purple-700
|
|
20
|
-
none: ''
|
|
9
|
+
blue: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800',
|
|
10
|
+
dark: 'text-white bg-gray-800 hover:bg-gray-900 focus:ring-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700',
|
|
11
|
+
alternative: 'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 hover:text-blue-700 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700',
|
|
12
|
+
light: 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700',
|
|
13
|
+
green: 'text-white bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800',
|
|
14
|
+
red: 'text-white bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900',
|
|
15
|
+
yellow: 'text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300 dark:focus:ring-yellow-900',
|
|
16
|
+
purple: 'text-white bg-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900'
|
|
21
17
|
};
|
|
22
18
|
const gradientClasses = {
|
|
23
|
-
blue: 'text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-
|
|
24
|
-
green: 'text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-
|
|
25
|
-
cyan: 'text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-
|
|
26
|
-
teal: 'text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-
|
|
27
|
-
lime: 'text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-
|
|
28
|
-
red: 'text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-
|
|
29
|
-
pink: 'text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-
|
|
30
|
-
purple: 'text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-
|
|
31
|
-
purpleToBlue: 'text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-
|
|
32
|
-
cyanToBlue: 'text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-
|
|
33
|
-
greenToBlue: 'text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-
|
|
34
|
-
purpleToPink: 'text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-
|
|
35
|
-
pinkToOrange: 'text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-
|
|
36
|
-
tealToLime: 'text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l
|
|
37
|
-
redToYellow: 'text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-
|
|
19
|
+
blue: 'text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-blue-300 dark:focus:ring-blue-800 ',
|
|
20
|
+
green: 'text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-green-300 dark:focus:ring-green-800',
|
|
21
|
+
cyan: 'text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-cyan-300 dark:focus:ring-cyan-800',
|
|
22
|
+
teal: 'text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-teal-300 dark:focus:ring-teal-800',
|
|
23
|
+
lime: 'text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-lime-300 dark:focus:ring-lime-800',
|
|
24
|
+
red: 'text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-red-300 dark:focus:ring-red-800',
|
|
25
|
+
pink: 'text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-pink-300 dark:focus:ring-pink-800',
|
|
26
|
+
purple: 'text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-purple-300 dark:focus:ring-purple-800',
|
|
27
|
+
purpleToBlue: 'text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-blue-300 dark:focus:ring-blue-800',
|
|
28
|
+
cyanToBlue: 'text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-cyan-300 dark:focus:ring-cyan-800',
|
|
29
|
+
greenToBlue: 'text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-green-200 dark:focus:ring-green-800',
|
|
30
|
+
purpleToPink: 'text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-purple-200 dark:focus:ring-purple-800',
|
|
31
|
+
pinkToOrange: 'text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-pink-200 dark:focus:ring-pink-800',
|
|
32
|
+
tealToLime: 'text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l focus:ring-lime-200 dark:focus:ring-teal-700',
|
|
33
|
+
redToYellow: 'text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-red-100 dark:focus:ring-red-400'
|
|
38
34
|
};
|
|
39
35
|
const coloredShadowClasses = {
|
|
40
36
|
blue: 'shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80',
|
|
@@ -47,13 +43,12 @@ const coloredShadowClasses = {
|
|
|
47
43
|
purple: 'shadow-lg shadow-purple-500/50 dark:shadow-lg dark:shadow-purple-800/80'
|
|
48
44
|
};
|
|
49
45
|
const outlineClasses = {
|
|
50
|
-
|
|
51
|
-
dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-
|
|
52
|
-
green: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-
|
|
53
|
-
red: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-
|
|
54
|
-
yellow: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-
|
|
55
|
-
purple: 'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-
|
|
56
|
-
white: 'text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700'
|
|
46
|
+
blue: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800',
|
|
47
|
+
dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-gray-300 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800',
|
|
48
|
+
green: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-green-300 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800',
|
|
49
|
+
red: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900',
|
|
50
|
+
yellow: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900',
|
|
51
|
+
purple: 'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900'
|
|
57
52
|
};
|
|
58
53
|
const sizeClasses = {
|
|
59
54
|
xs: 'text-xs px-2 py-1',
|
|
@@ -62,64 +57,20 @@ const sizeClasses = {
|
|
|
62
57
|
lg: 'text-base px-5 py-2.5',
|
|
63
58
|
xl: 'text-base px-6 py-3'
|
|
64
59
|
};
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
xl: '!p-3'
|
|
71
|
-
};
|
|
60
|
+
let buttonClass;
|
|
61
|
+
$: buttonClass = classNames('group text-center font-medium focus:ring-4 focus:outline-none', outline && gradient ? 'p-0.5' : 'inline-flex items-center justify-center ' + sizeClasses[size], gradient ? gradientClasses[color] : outline ? outlineClasses[color] : colorClasses[color], pill ? 'rounded-full' : 'rounded-lg', shadow && coloredShadowClasses[shadow], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
|
|
62
|
+
let gradientOutlineClass;
|
|
63
|
+
$: gradientOutlineClass = classNames('inline-flex items-center justify-center', sizeClasses[size], pill ? 'rounded-full' : 'rounded-md', 'bg-white text-gray-900 dark:bg-gray-900 dark:text-white', // this is limitation - no transparency
|
|
64
|
+
'transition-all duration-75 ease-in group-hover:bg-opacity-0 group-hover:text-inherit');
|
|
72
65
|
</script>
|
|
73
66
|
|
|
74
|
-
<button
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
outline ? outlineClasses[color] : colorClasses[color],
|
|
84
|
-
shadow && coloredShadowClasses[shadow],
|
|
85
|
-
{
|
|
86
|
-
'border border-gray-900 dark:border-white': color === 'alternative' && outline,
|
|
87
|
-
'cursor-not-allowed opacity-50': $$props.disabled,
|
|
88
|
-
'focus:!ring-2': !!positionInGroup,
|
|
89
|
-
'rounded-r-none': positionInGroup === 'start',
|
|
90
|
-
'!rounded-none border-l-0 pl-0': positionInGroup === 'middle',
|
|
91
|
-
'rounded-l-none border-l-0 pl-0': positionInGroup === 'end'
|
|
92
|
-
},
|
|
93
|
-
$$props.class
|
|
94
|
-
)}
|
|
95
|
-
>
|
|
96
|
-
<span
|
|
97
|
-
class={classNames(
|
|
98
|
-
'flex items-center',
|
|
99
|
-
sizeClasses[size],
|
|
100
|
-
outline && pill ? 'rounded-full' : 'rounded-md',
|
|
101
|
-
{
|
|
102
|
-
'bg-white text-gray-900 transition-all duration-75 ease-in group-hover:bg-opacity-0 group-hover:text-inherit dark:bg-gray-900 dark:text-white':
|
|
103
|
-
outline,
|
|
104
|
-
'rounded-r-none': positionInGroup === 'start',
|
|
105
|
-
'!rounded-none': positionInGroup === 'middle',
|
|
106
|
-
'rounded-l-none': positionInGroup === 'end',
|
|
107
|
-
|
|
108
|
-
[iconSizeClasses[size]]: !!icon
|
|
109
|
-
}
|
|
110
|
-
)}
|
|
111
|
-
>
|
|
112
|
-
{#if icon}
|
|
113
|
-
<svelte:component this={icon} class="h-5 w-5" />
|
|
114
|
-
{:else}
|
|
115
|
-
<slot />
|
|
116
|
-
{#if label}
|
|
117
|
-
<span
|
|
118
|
-
class="ml-2 inline-flex h-4 w-4 items-center justify-center rounded-full bg-blue-200 text-xs font-semibold text-blue-800"
|
|
119
|
-
>
|
|
120
|
-
{label}
|
|
121
|
-
</span>
|
|
122
|
-
{/if}
|
|
123
|
-
{/if}
|
|
124
|
-
</span>
|
|
67
|
+
<button type="button" {...$$restProps} class={buttonClass} on:click>
|
|
68
|
+
{#if outline && gradient}
|
|
69
|
+
<!-- Trick to prentend outline without using border
|
|
70
|
+
This has a limitation of no supporting transparency as
|
|
71
|
+
background is set to bg-white dark:bg-gray-900 -->
|
|
72
|
+
<span class={gradientOutlineClass}><slot /></span>
|
|
73
|
+
{:else}
|
|
74
|
+
<slot />
|
|
75
|
+
{/if}
|
|
125
76
|
</button>
|
|
@@ -1,17 +1,13 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
import type { SvelteComponent } from 'svelte';
|
|
3
2
|
declare const __propDef: {
|
|
4
3
|
props: {
|
|
5
4
|
[x: string]: any;
|
|
6
|
-
label?: string;
|
|
7
5
|
pill?: boolean;
|
|
8
6
|
outline?: boolean;
|
|
9
|
-
color?: 'blue' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'none';
|
|
10
|
-
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
11
|
-
icon?: typeof SvelteComponent | undefined;
|
|
12
7
|
gradient?: boolean;
|
|
8
|
+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
9
|
+
color?: 'blue' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple';
|
|
13
10
|
shadow?: 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple' | null;
|
|
14
|
-
positionInGroup?: 'start' | 'middle' | 'end' | null;
|
|
15
11
|
};
|
|
16
12
|
events: {
|
|
17
13
|
click: MouseEvent;
|
package/package.json
CHANGED
|
@@ -9,22 +9,83 @@
|
|
|
9
9
|
</div>
|
|
10
10
|
</div>
|
|
11
11
|
<div class="flex items-center mb-1">
|
|
12
|
-
<svg
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
12
|
+
<svg
|
|
13
|
+
class="w-5 h-5 text-yellow-400"
|
|
14
|
+
fill="currentColor"
|
|
15
|
+
viewBox="0 0 20 20"
|
|
16
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
17
|
+
><path
|
|
18
|
+
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
|
19
|
+
/></svg
|
|
20
|
+
>
|
|
21
|
+
<svg
|
|
22
|
+
class="w-5 h-5 text-yellow-400"
|
|
23
|
+
fill="currentColor"
|
|
24
|
+
viewBox="0 0 20 20"
|
|
25
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
26
|
+
><path
|
|
27
|
+
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
|
28
|
+
/></svg
|
|
29
|
+
>
|
|
30
|
+
<svg
|
|
31
|
+
class="w-5 h-5 text-yellow-400"
|
|
32
|
+
fill="currentColor"
|
|
33
|
+
viewBox="0 0 20 20"
|
|
34
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
35
|
+
><path
|
|
36
|
+
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
|
37
|
+
/></svg
|
|
38
|
+
>
|
|
39
|
+
<svg
|
|
40
|
+
class="w-5 h-5 text-yellow-400"
|
|
41
|
+
fill="currentColor"
|
|
42
|
+
viewBox="0 0 20 20"
|
|
43
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
44
|
+
><path
|
|
45
|
+
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
|
46
|
+
/></svg
|
|
47
|
+
>
|
|
48
|
+
<svg
|
|
49
|
+
class="w-5 h-5 text-yellow-400"
|
|
50
|
+
fill="currentColor"
|
|
51
|
+
viewBox="0 0 20 20"
|
|
52
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
53
|
+
><path
|
|
54
|
+
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
|
55
|
+
/></svg
|
|
56
|
+
>
|
|
57
|
+
<h3 class="ml-2 text-sm font-semibold text-gray-900 dark:text-white">
|
|
58
|
+
Thinking to buy another one!
|
|
59
|
+
</h3>
|
|
18
60
|
</div>
|
|
19
|
-
<footer class="mb-5 text-sm text-gray-500 dark:text-gray-400"
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
<
|
|
61
|
+
<footer class="mb-5 text-sm text-gray-500 dark:text-gray-400">
|
|
62
|
+
<p>Reviewed in the United Kingdom on <time datetime="2017-03-03 19:00">March 3, 2017</time></p>
|
|
63
|
+
</footer>
|
|
64
|
+
<p class="mb-2 font-light text-gray-500 dark:text-gray-400">
|
|
65
|
+
This is my third Invicta Pro Diver. They are just fantastic value for money. This one arrived
|
|
66
|
+
yesterday and the first thing I did was set the time, popped on an identical strap from another
|
|
67
|
+
Invicta and went in the shower with it to test the waterproofing.... No problems.
|
|
68
|
+
</p>
|
|
69
|
+
<p class="mb-3 font-light text-gray-500 dark:text-gray-400">
|
|
70
|
+
It is obviously not the same build quality as those very expensive watches. But that is like
|
|
71
|
+
comparing a Citroën to a Ferrari. This watch was well under £100! An absolute bargain.
|
|
72
|
+
</p>
|
|
73
|
+
<a
|
|
74
|
+
href="/"
|
|
75
|
+
class="block mb-5 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
|
|
76
|
+
>Read more</a
|
|
77
|
+
>
|
|
23
78
|
<aside>
|
|
24
79
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">19 people found this helpful</p>
|
|
25
80
|
<div class="flex items-center mt-3 space-x-3 divide-x divide-gray-200 dark:divide-gray-600">
|
|
26
|
-
<a
|
|
27
|
-
|
|
81
|
+
<a
|
|
82
|
+
href="/"
|
|
83
|
+
class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-xs px-2 py-1.5 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
|
|
84
|
+
>Helpful</a
|
|
85
|
+
>
|
|
86
|
+
<a href="/" class="pl-4 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
|
|
87
|
+
>Report abuse</a
|
|
88
|
+
>
|
|
28
89
|
</div>
|
|
29
90
|
</aside>
|
|
30
91
|
</article>
|
package/spinners/Spinner.svelte
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
export let
|
|
1
|
+
<script>import classNames from 'classnames';
|
|
2
|
+
export let color = 'blue';
|
|
3
|
+
export let bg = 'text-gray-300';
|
|
3
4
|
export let size = '8';
|
|
5
|
+
let iconsize = `w-${size} h-${size}`;
|
|
4
6
|
// these two props add fine control over the spinner colors
|
|
5
7
|
export let currentFill = 'currentFill';
|
|
6
8
|
export let currentColor = 'currentColor';
|
|
@@ -9,20 +11,26 @@ if (currentFill !== 'currentFill') {
|
|
|
9
11
|
}
|
|
10
12
|
const fillColorClasses = {
|
|
11
13
|
blue: 'fill-blue-600',
|
|
12
|
-
gray: 'fill-gray-600',
|
|
14
|
+
gray: 'fill-gray-600 dark:fill-gray-300',
|
|
13
15
|
green: 'fill-green-500',
|
|
14
16
|
red: 'fill-red-600',
|
|
15
17
|
yellow: 'fill-yellow-400',
|
|
16
18
|
pink: 'fill-pink-600',
|
|
17
|
-
purple: 'fill-purple-600'
|
|
19
|
+
purple: 'fill-purple-600',
|
|
20
|
+
white: 'fill-white'
|
|
18
21
|
};
|
|
19
22
|
let fillColorClass = color === undefined ? '' : fillColorClasses[color] ?? fillColorClasses.blue;
|
|
20
23
|
</script>
|
|
21
24
|
|
|
22
25
|
<svg
|
|
23
26
|
role="status"
|
|
24
|
-
class=
|
|
25
|
-
'
|
|
27
|
+
class={classNames(
|
|
28
|
+
'inline -mt-px animate-spin dark:text-gray-600',
|
|
29
|
+
iconsize,
|
|
30
|
+
bg,
|
|
31
|
+
fillColorClass,
|
|
32
|
+
$$props.class
|
|
33
|
+
)}
|
|
26
34
|
viewBox="0 0 100 101"
|
|
27
35
|
fill="none"
|
|
28
36
|
xmlns="http://www.w3.org/2000/svg"
|
package/toasts/Toast.svelte
CHANGED
|
@@ -7,6 +7,8 @@ export let simple = false;
|
|
|
7
7
|
export let transition = 'fade';
|
|
8
8
|
// Pass in extra transition params
|
|
9
9
|
export let params = {};
|
|
10
|
+
// Absolute position
|
|
11
|
+
export let position = undefined; // default not set
|
|
10
12
|
let visible = true;
|
|
11
13
|
const colors = {
|
|
12
14
|
blue: 'text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200',
|
|
@@ -21,26 +23,30 @@ const colors = {
|
|
|
21
23
|
let transitionFunc;
|
|
22
24
|
$: transitionFunc = transitions[transition] ?? transitions.fade;
|
|
23
25
|
let divClass;
|
|
24
|
-
$: divClass = classNames('w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800',
|
|
26
|
+
$: divClass = classNames('w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800', {
|
|
27
|
+
'absolute top-5 left-5': position == 'tl',
|
|
28
|
+
'absolute top-5 right-5': position == 'tr',
|
|
29
|
+
'absolute bottom-5 left-5': position == 'bl',
|
|
30
|
+
'absolute bottom-5 right-5': position == 'br'
|
|
31
|
+
}, $$props.class);
|
|
25
32
|
let iconClass;
|
|
26
33
|
$: iconClass = classNames('inline-flex items-center justify-center flex-shrink-0 rounded-lg w-8 h-8 mr-3', colors[color]);
|
|
27
34
|
</script>
|
|
28
35
|
|
|
29
36
|
{#if visible}
|
|
30
37
|
<div transition:transitionFunc={params} class={divClass} role="alert">
|
|
31
|
-
<div class="flex items-
|
|
38
|
+
<div class="flex {$$slots.extra ? 'items-start' : 'items-center'}">
|
|
32
39
|
{#if $$slots.icon}
|
|
33
|
-
<div class={iconClass}>
|
|
34
|
-
<slot name="icon" />
|
|
35
|
-
</div>
|
|
40
|
+
<div class={iconClass}><slot name="icon" /></div>
|
|
36
41
|
{/if}
|
|
37
42
|
|
|
38
|
-
<div class="text-sm font-normal"
|
|
39
|
-
|
|
43
|
+
<div class="text-sm font-normal w-full">
|
|
44
|
+
<slot />
|
|
45
|
+
<slot name="extra" />
|
|
46
|
+
</div>
|
|
40
47
|
{#if !simple}
|
|
41
48
|
<CloseButton on:click={() => (visible = false)} />
|
|
42
49
|
{/if}
|
|
43
50
|
</div>
|
|
44
|
-
<slot name="extra" />
|
|
45
51
|
</div>
|
|
46
52
|
{/if}
|
package/toasts/Toast.svelte.d.ts
CHANGED
package/utils/CloseButton.svelte
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
<script>import classNames from 'classnames';
|
|
2
2
|
export let color = 'default';
|
|
3
3
|
const colors = {
|
|
4
|
-
gray: '
|
|
5
|
-
red: '
|
|
6
|
-
yellow: '
|
|
7
|
-
green: '
|
|
8
|
-
indigo: '
|
|
9
|
-
purple: '
|
|
10
|
-
pink: '
|
|
11
|
-
blue: '
|
|
12
|
-
default: '
|
|
4
|
+
gray: 'focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-300',
|
|
5
|
+
red: 'focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-300',
|
|
6
|
+
yellow: 'focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-300',
|
|
7
|
+
green: 'focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-300',
|
|
8
|
+
indigo: 'focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-300',
|
|
9
|
+
purple: 'focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-300',
|
|
10
|
+
pink: 'focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-300',
|
|
11
|
+
blue: 'focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-300',
|
|
12
|
+
default: 'focus:ring-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
|
|
13
13
|
};
|
|
14
14
|
let buttonClass = '';
|
|
15
|
-
$: buttonClass = classNames('ml-auto -mx-1 -my-1.5 rounded-lg focus:ring-2 p-1.5
|
|
15
|
+
$: buttonClass = classNames('ml-auto -mx-1 -my-1.5 rounded-lg focus:ring-2 p-1.5 h-8 w-8 focus:outline-none', colors[color], $$props.class);
|
|
16
16
|
</script>
|
|
17
17
|
|
|
18
18
|
<button on:click type="button" class={buttonClass} aria-label="Close">
|