flowbite-svelte 0.18.3 → 0.18.6
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
CHANGED
|
@@ -2,6 +2,19 @@
|
|
|
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.18.6](https://github.com/themesberg/flowbite-svelte/compare/v0.18.5...v0.18.6) (2022-06-24)
|
|
6
|
+
|
|
7
|
+
### [0.18.5](https://github.com/themesberg/flowbite-svelte/compare/v0.18.4...v0.18.5) (2022-06-24)
|
|
8
|
+
|
|
9
|
+
### [0.18.4](https://github.com/themesberg/flowbite-svelte/compare/v0.18.3...v0.18.4) (2022-06-23)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
### Features
|
|
13
|
+
|
|
14
|
+
* add button colored shadows ([96e20c5](https://github.com/themesberg/flowbite-svelte/commit/96e20c568f2fcc7d51e9a430fcb0007f02290bd2))
|
|
15
|
+
* add outline button ([aa14b26](https://github.com/themesberg/flowbite-svelte/commit/aa14b267ec1bf283ca3684fa956776b6ce4e6932))
|
|
16
|
+
* add outlineStyle white for loader ([7769c19](https://github.com/themesberg/flowbite-svelte/commit/7769c19df48cac833fa08ce659ebfa651160bbf5))
|
|
17
|
+
|
|
5
18
|
### [0.18.3](https://github.com/themesberg/flowbite-svelte/compare/v0.18.2...v0.18.3) (2022-06-22)
|
|
6
19
|
|
|
7
20
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
<script>
|
|
1
|
+
<script>import classNames from 'classnames';
|
|
2
|
+
export let divClass = 'inline-flex rounded-md shadow-sm';
|
|
2
3
|
</script>
|
|
3
4
|
|
|
4
|
-
<div class=
|
|
5
|
+
<div {...$$restProps} class={classNames(divClass, $$props.class)} role="group">
|
|
5
6
|
<slot />
|
|
6
7
|
</div>
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
<script>export let type = 'button';
|
|
2
|
+
import classNames from 'classnames';
|
|
2
3
|
export let btnClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white first:rounded-l-lg border-t border-b last:rounded-r-md border-l last:border-r border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white';
|
|
3
4
|
export let outlineClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-transparent first:rounded-l-lg border-t border-b last:rounded-r-md border-l last:border-r border-gray-900 hover:bg-gray-900 hover:text-white focus:z-10 focus:ring-2 focus:ring-gray-500 focus:bg-gray-900 focus:text-white dark:border-white dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:bg-gray-700';
|
|
4
5
|
export let outline = false;
|
|
@@ -9,9 +10,9 @@ if (outline) {
|
|
|
9
10
|
</script>
|
|
10
11
|
|
|
11
12
|
{#if href}
|
|
12
|
-
<a {href} class=
|
|
13
|
+
<a {href} {...$$restProps} class={classNames(btnClass, $$props.class)} on:click><slot /></a>
|
|
13
14
|
{:else}
|
|
14
|
-
<button {type} class=
|
|
15
|
+
<button {type} {...$$restProps} class={classNames(btnClass, $$props.class)} on:click>
|
|
15
16
|
<slot />
|
|
16
17
|
</button>
|
|
17
18
|
{/if}
|
package/buttons/Button.svelte
CHANGED
|
@@ -1,92 +1,135 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
export let
|
|
3
|
-
export let
|
|
4
|
-
export let
|
|
5
|
-
export let
|
|
6
|
-
let
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
case 'purple':
|
|
77
|
-
buttonClass = `text-white text-center font-medium ${round} ${textSize} ${paddings}`;
|
|
78
|
-
if (disabled)
|
|
79
|
-
buttonClass += ' bg-purple-400 dark:bg-purple-500 cursor-not-allowed';
|
|
80
|
-
else
|
|
81
|
-
buttonClass += ' bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900';
|
|
82
|
-
break;
|
|
83
|
-
case 'purple-outline':
|
|
84
|
-
buttonClass = `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`;
|
|
85
|
-
break;
|
|
86
|
-
}
|
|
87
|
-
buttonClass += ' items-center inline-flex';
|
|
1
|
+
<script>import classNames from 'classnames';
|
|
2
|
+
export let label = '';
|
|
3
|
+
export let pill = false;
|
|
4
|
+
export let outline = false;
|
|
5
|
+
export let color = 'blue';
|
|
6
|
+
export let size = 'md';
|
|
7
|
+
export let icon = undefined;
|
|
8
|
+
export let gradientMonochrome = null;
|
|
9
|
+
export let gradientDuoTone = null;
|
|
10
|
+
export let coloredShadow = null;
|
|
11
|
+
export let positionInGroup = null;
|
|
12
|
+
export let outlineStyle = null;
|
|
13
|
+
const colorClasses = {
|
|
14
|
+
blue: 'text-white bg-blue-700 border border-transparent hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 disabled:hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 dark:disabled:hover:bg-blue-600',
|
|
15
|
+
alternative: 'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 disabled:hover:bg-white focus:ring-blue-700 focus:text-blue-700 dark:bg-transparent dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 focus:ring-2 dark:disabled:hover:bg-gray-800',
|
|
16
|
+
dark: 'text-white bg-gray-800 border border-transparent hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 disabled:hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700 dark:disabled:hover:bg-gray-800',
|
|
17
|
+
light: 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 disabled:hover:bg-white 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-700',
|
|
18
|
+
green: 'text-white bg-green-700 border border-transparent hover:bg-green-800 focus:ring-4 focus:ring-green-300 disabled:hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800 dark:disabled:hover:bg-green-600',
|
|
19
|
+
red: 'text-white bg-red-700 border border-transparent hover:bg-red-800 focus:ring-4 focus:ring-red-300 disabled:hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900 dark:disabled:hover:bg-red-600',
|
|
20
|
+
yellow: 'text-white bg-yellow-400 border border-transparent hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 disabled:hover:bg-yellow-400 dark:focus:ring-yellow-900 dark:disabled:hover:bg-yellow-400',
|
|
21
|
+
purple: 'text-white bg-purple-700 border border-transparent hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 disabled:hover:bg-purple-700 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900 dark:disabled:hover:bg-purple-600',
|
|
22
|
+
none: ''
|
|
23
|
+
};
|
|
24
|
+
const gradientMonochromeClasses = {
|
|
25
|
+
blue: '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 ',
|
|
26
|
+
green: 'text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-green-300 dark:focus:ring-green-800',
|
|
27
|
+
cyan: 'text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800',
|
|
28
|
+
teal: 'text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-800',
|
|
29
|
+
lime: 'text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-800',
|
|
30
|
+
red: 'text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800',
|
|
31
|
+
pink: 'text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800',
|
|
32
|
+
purple: 'text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800'
|
|
33
|
+
};
|
|
34
|
+
const gradientDuoToneClasses = {
|
|
35
|
+
purpleToBlue: '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',
|
|
36
|
+
cyanToBlue: 'text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800',
|
|
37
|
+
greenToBlue: 'text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:ring-green-200 dark:focus:ring-green-800',
|
|
38
|
+
purpleToPink: 'text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:ring-purple-200 dark:focus:ring-purple-800',
|
|
39
|
+
pinkToOrange: 'text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-800',
|
|
40
|
+
tealToLime: 'text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 hover:!text-gray-900 focus:ring-4 focus:ring-lime-200 dark:focus:ring-teal-700',
|
|
41
|
+
redToYellow: 'text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:ring-red-100 dark:focus:ring-red-400'
|
|
42
|
+
};
|
|
43
|
+
const coloredShadowClasses = {
|
|
44
|
+
blue: 'text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80',
|
|
45
|
+
green: 'text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-green-300 dark:focus:ring-green-800 shadow-lg shadow-green-500/50 dark:shadow-lg dark:shadow-green-800/80',
|
|
46
|
+
cyan: 'text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 shadow-lg shadow-cyan-500/50 dark:shadow-lg dark:shadow-cyan-800/80',
|
|
47
|
+
teal: 'text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-teal-300 dark:focus:ring-teal-800 shadow-lg shadow-teal-500/50 dark:shadow-lg dark:shadow-teal-800/80 ',
|
|
48
|
+
lime: 'text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-lime-300 dark:focus:ring-lime-800 shadow-lg shadow-lime-500/50 dark:shadow-lg dark:shadow-lime-800/80',
|
|
49
|
+
red: 'text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 shadow-lg shadow-red-500/50 dark:shadow-lg dark:shadow-red-800/80 ',
|
|
50
|
+
pink: 'text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-pink-300 dark:focus:ring-pink-800 shadow-lg shadow-pink-500/50 dark:shadow-lg dark:shadow-pink-800/80',
|
|
51
|
+
purple: 'text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 shadow-lg shadow-purple-500/50 dark:shadow-lg dark:shadow-purple-800/80'
|
|
52
|
+
};
|
|
53
|
+
const outlineClasses = {
|
|
54
|
+
default: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300',
|
|
55
|
+
dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:outline-none focus:ring-gray-300',
|
|
56
|
+
green: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 ',
|
|
57
|
+
red: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300',
|
|
58
|
+
yellow: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:outline-none focus:ring-yellow-300',
|
|
59
|
+
purple: 'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-purple-300',
|
|
60
|
+
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'
|
|
61
|
+
};
|
|
62
|
+
const sizeClasses = {
|
|
63
|
+
xs: 'text-xs px-2 py-1',
|
|
64
|
+
sm: 'text-sm px-3 py-1.5',
|
|
65
|
+
md: 'text-sm px-4 py-2',
|
|
66
|
+
lg: 'text-base px-5 py-2.5',
|
|
67
|
+
xl: 'text-base px-6 py-3'
|
|
68
|
+
};
|
|
69
|
+
const iconSizeClasses = {
|
|
70
|
+
xs: '!px-1',
|
|
71
|
+
sm: '!px-1.5',
|
|
72
|
+
md: '!px-2',
|
|
73
|
+
lg: '!p-2.5',
|
|
74
|
+
xl: '!p-3'
|
|
75
|
+
};
|
|
88
76
|
</script>
|
|
89
77
|
|
|
90
|
-
<button
|
|
91
|
-
|
|
78
|
+
<button
|
|
79
|
+
on:click
|
|
80
|
+
data-testid="button-element"
|
|
81
|
+
type="button"
|
|
82
|
+
{...$$props}
|
|
83
|
+
class={classNames(
|
|
84
|
+
'group flex h-min w-fit items-center justify-center p-0.5 text-center font-medium focus:z-10',
|
|
85
|
+
pill ? 'rounded-full' : 'rounded-lg',
|
|
86
|
+
!gradientMonochrome &&
|
|
87
|
+
!gradientDuoTone &&
|
|
88
|
+
!coloredShadow &&
|
|
89
|
+
!outlineStyle &&
|
|
90
|
+
colorClasses[color],
|
|
91
|
+
!gradientDuoTone && gradientMonochrome && gradientMonochromeClasses[gradientMonochrome],
|
|
92
|
+
gradientDuoTone && gradientDuoToneClasses[gradientDuoTone],
|
|
93
|
+
coloredShadow && coloredShadowClasses[coloredShadow],
|
|
94
|
+
outlineStyle && outlineClasses[outlineStyle],
|
|
95
|
+
{
|
|
96
|
+
'border border-gray-900 dark:border-white': color === 'alternative' && outline,
|
|
97
|
+
'cursor-not-allowed opacity-50': $$props.disabled,
|
|
98
|
+
'focus:!ring-2': !!positionInGroup,
|
|
99
|
+
'rounded-r-none': positionInGroup === 'start',
|
|
100
|
+
'!rounded-none border-l-0 pl-0': positionInGroup === 'middle',
|
|
101
|
+
'rounded-l-none border-l-0 pl-0': positionInGroup === 'end'
|
|
102
|
+
},
|
|
103
|
+
$$props.class
|
|
104
|
+
)}
|
|
105
|
+
>
|
|
106
|
+
<span
|
|
107
|
+
class={classNames(
|
|
108
|
+
'flex items-center',
|
|
109
|
+
sizeClasses[size],
|
|
110
|
+
outline && pill ? 'rounded-full' : 'rounded-md',
|
|
111
|
+
{
|
|
112
|
+
'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':
|
|
113
|
+
outline,
|
|
114
|
+
'rounded-r-none': positionInGroup === 'start',
|
|
115
|
+
'!rounded-none': positionInGroup === 'middle',
|
|
116
|
+
'rounded-l-none': positionInGroup === 'end',
|
|
117
|
+
|
|
118
|
+
[iconSizeClasses[size]]: !!icon
|
|
119
|
+
}
|
|
120
|
+
)}
|
|
121
|
+
>
|
|
122
|
+
{#if icon}
|
|
123
|
+
<svelte:component this={icon} class="h-5 w-5" />
|
|
124
|
+
{:else}
|
|
125
|
+
<slot />
|
|
126
|
+
{#if label}
|
|
127
|
+
<span
|
|
128
|
+
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"
|
|
129
|
+
>
|
|
130
|
+
{label}
|
|
131
|
+
</span>
|
|
132
|
+
{/if}
|
|
133
|
+
{/if}
|
|
134
|
+
</span>
|
|
92
135
|
</button>
|
|
@@ -1,13 +1,19 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
import type {
|
|
2
|
+
import type { SvelteComponent } from 'svelte';
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
5
|
[x: string]: any;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
label?: string;
|
|
7
|
+
pill?: boolean;
|
|
8
|
+
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
|
+
gradientMonochrome?: 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple' | null;
|
|
13
|
+
gradientDuoTone?: 'purpleToBlue' | 'cyanToBlue' | 'greenToBlue' | 'purpleToPink' | 'pinkToOrange' | 'tealToLime' | 'redToYellow' | null;
|
|
14
|
+
coloredShadow?: 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple' | null;
|
|
15
|
+
positionInGroup?: 'start' | 'middle' | 'end' | null;
|
|
16
|
+
outlineStyle?: 'default' | 'dark' | 'green' | 'red' | 'yellow' | 'purple' | 'white' | null;
|
|
11
17
|
};
|
|
12
18
|
events: {
|
|
13
19
|
click: MouseEvent;
|