flowbite-svelte 0.19.7 → 0.19.8
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 +2 -0
- package/alerts/Alert.svelte +45 -65
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
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.19.8](https://github.com/themesberg/flowbite-svelte/compare/v0.19.7...v0.19.8) (2022-06-27)
|
|
6
|
+
|
|
5
7
|
### [0.19.7](https://github.com/themesberg/flowbite-svelte/compare/v0.19.6...v0.19.7) (2022-06-27)
|
|
6
8
|
|
|
7
9
|
### [0.19.6](https://github.com/themesberg/flowbite-svelte/compare/v0.19.5...v0.19.6) (2022-06-27)
|
package/alerts/Alert.svelte
CHANGED
|
@@ -21,70 +21,51 @@ if (rounded)
|
|
|
21
21
|
divClass += 'rounded-lg ';
|
|
22
22
|
if (borderAccent)
|
|
23
23
|
divClass += 'border-t-4 ';
|
|
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
|
-
buttonClass +=
|
|
70
|
-
'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';
|
|
71
|
-
}
|
|
72
|
-
else if (color === 'pink') {
|
|
73
|
-
divClass += 'bg-pink-100 dark:bg-pink-200 ';
|
|
74
|
-
if (borderAccent)
|
|
75
|
-
divClass += 'border-pink-500 dark:bg-pink-200 ';
|
|
76
|
-
contentClass = 'text-pink-700 dark:text-pink-800';
|
|
77
|
-
buttonClass +=
|
|
78
|
-
'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';
|
|
79
|
-
}
|
|
80
|
-
else {
|
|
81
|
-
divClass += 'bg-blue-100 dark:bg-blue-200 ';
|
|
82
|
-
if (borderAccent)
|
|
83
|
-
divClass += 'border-blue-500 dark:bg-blue-200 ';
|
|
84
|
-
contentClass = 'text-blue-700 dark:text-blue-800';
|
|
85
|
-
buttonClass +=
|
|
86
|
-
'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';
|
|
87
|
-
}
|
|
24
|
+
const bgClasses = {
|
|
25
|
+
gray: 'bg-gray-100 dark:bg-gray-200 ',
|
|
26
|
+
red: 'bg-red-100 dark:bg-red-200',
|
|
27
|
+
yellow: 'bg-yellow-100 dark:bg-yellow-200 ',
|
|
28
|
+
green: 'bg-green-100 dark:bg-green-200 ',
|
|
29
|
+
indigo: 'bg-indigo-100 dark:bg-indigo-200 ',
|
|
30
|
+
purple: 'bg-purple-100 dark:bg-purple-200 ',
|
|
31
|
+
pink: 'bg-pink-100 dark:bg-pink-200 ',
|
|
32
|
+
blue: 'bg-blue-100 dark:bg-blue-200 '
|
|
33
|
+
};
|
|
34
|
+
const borderAccentClasses = {
|
|
35
|
+
gray: 'border-gray-500 dark:bg-gray-200 ',
|
|
36
|
+
red: 'border-red-500 dark:bg-red-200 ',
|
|
37
|
+
yellow: 'border-yellow-500 dark:bg-tellow-200 ',
|
|
38
|
+
green: 'border-green-500 dark:bg-green-200 ',
|
|
39
|
+
indigo: 'border-indigo-500 dark:bg-indigo-200 ',
|
|
40
|
+
purple: 'border-purple-500 dark:bg-purple-200 ',
|
|
41
|
+
pink: 'border-pink-500 dark:bg-pink-200 ',
|
|
42
|
+
blue: 'border-blue-500 dark:bg-blue-200 '
|
|
43
|
+
};
|
|
44
|
+
const contentClasses = {
|
|
45
|
+
gray: 'text-gray-700 dark:text-gray-800',
|
|
46
|
+
red: 'text-red-700 dark:text-red-800',
|
|
47
|
+
yellow: 'text-yellow-700 dark:text-yellow-800',
|
|
48
|
+
green: 'text-green-700 dark:text-green-800',
|
|
49
|
+
indigo: 'text-indigo-700 dark:text-indigo-800',
|
|
50
|
+
purple: 'text-purple-700 dark:text-purple-800',
|
|
51
|
+
pink: 'text-pink-700 dark:text-pink-800',
|
|
52
|
+
blue: 'text-blue-700 dark:text-blue-800'
|
|
53
|
+
};
|
|
54
|
+
const buttonClasses = {
|
|
55
|
+
gray: 'bg-gray-100 text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300',
|
|
56
|
+
red: 'bg-red-100 text-red-500 focus:ring-red-400 hover:bg-red-200 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300',
|
|
57
|
+
yellow: 'bg-yellow-100 text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300',
|
|
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;
|
|
88
69
|
</script>
|
|
89
70
|
|
|
90
71
|
<div id={$$props.id} class:hidden class={classNames(divClass, $$props.class)} role="alert">
|
|
@@ -120,6 +101,5 @@ else {
|
|
|
120
101
|
</button>
|
|
121
102
|
{/if}
|
|
122
103
|
</div>
|
|
123
|
-
|
|
124
104
|
<slot name="extra" />
|
|
125
105
|
</div>
|