flowbite-svelte 0.9.2 → 0.9.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/cards/InteractiveCard.svelte +2 -2
- package/modals/ExtraLargeModal.svelte +187 -191
- package/modals/ExtraLargeModal.svelte.d.ts +9 -27
- package/modals/LargeModal.svelte +188 -191
- package/modals/LargeModal.svelte.d.ts +9 -27
- package/modals/MediumModal.svelte +191 -200
- package/modals/MediumModal.svelte.d.ts +9 -27
- package/modals/ModalButton.svelte +40 -35
- package/modals/ModalButton.svelte.d.ts +7 -17
- package/modals/SignInModal.svelte +151 -160
- package/modals/SignInModal.svelte.d.ts +10 -24
- package/modals/SmallModal.svelte +188 -191
- package/modals/SmallModal.svelte.d.ts +9 -27
- package/modals/modalStores.d.ts +2 -1
- package/modals/modalStores.js +1 -2
- package/navbar/DropdownNavbar.svelte +7 -7
- package/package.json +1 -1
- package/tabs/DefaultTabs.svelte +2 -2
- package/tabs/InteractiveTabs.svelte +6 -6
- package/tabs/PillTabs.svelte +2 -2
- package/types.d.ts +5 -5
package/modals/SmallModal.svelte
CHANGED
|
@@ -1,236 +1,233 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
});
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
export let showModalId;
|
|
19
|
-
modalIdStore.subscribe((value) => {
|
|
1
|
+
<script >import { createEventDispatcher } from 'svelte';
|
|
2
|
+
import { modalIdStore } from './modalStores';
|
|
3
|
+
const dispatch = createEventDispatcher();
|
|
4
|
+
export let id = 'small-modal';
|
|
5
|
+
export let btnColor = 'blue';
|
|
6
|
+
export let textColor = 'gray';
|
|
7
|
+
export let title = 'Terms of Service';
|
|
8
|
+
export let btn1;
|
|
9
|
+
export let btn2;
|
|
10
|
+
const closeModal = () => {
|
|
11
|
+
modalIdStore.update((value) => (value = null));
|
|
12
|
+
};
|
|
13
|
+
export let showModalId;
|
|
14
|
+
modalIdStore.subscribe((value) => {
|
|
20
15
|
showModalId = value;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
divClass = "relative bg-white rounded-lg shadow dark:bg-blue-700";
|
|
40
|
-
headDivClass =
|
|
41
|
-
"flex justify-between items-center p-5 rounded-t border-b dark:border-blue-600";
|
|
42
|
-
h3Class = "text-xl font-medium text-blue-900 dark:text-white";
|
|
16
|
+
});
|
|
17
|
+
const handlebtn1 = () => {
|
|
18
|
+
dispatch('handlebtn1');
|
|
19
|
+
};
|
|
20
|
+
const handlebtn2 = () => {
|
|
21
|
+
dispatch('handlebtn2');
|
|
22
|
+
};
|
|
23
|
+
let divClass;
|
|
24
|
+
let headDivClass;
|
|
25
|
+
let h3Class;
|
|
26
|
+
let buttonClass;
|
|
27
|
+
let pClass;
|
|
28
|
+
let footerClass;
|
|
29
|
+
let btn2Class;
|
|
30
|
+
if (textColor === 'blue') {
|
|
31
|
+
divClass = 'relative bg-white rounded-lg shadow dark:bg-blue-700';
|
|
32
|
+
headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-blue-600';
|
|
33
|
+
h3Class = 'text-xl font-medium text-blue-900 dark:text-white';
|
|
43
34
|
buttonClass =
|
|
44
|
-
|
|
45
|
-
pClass =
|
|
35
|
+
'text-blue-400 bg-transparent hover:bg-blue-200 hover:text-blue-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-blue-600 dark:hover:text-white';
|
|
36
|
+
pClass = 'text-base leading-relaxed text-blue-500 dark:text-blue-400';
|
|
46
37
|
footerClass =
|
|
47
|
-
|
|
38
|
+
'flex items-center p-6 space-x-2 rounded-b border-t border-blue-200 dark:border-blue-600';
|
|
48
39
|
btn2Class =
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
h3Class =
|
|
40
|
+
'text-blue-500 bg-white hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 rounded-lg border border-blue-200 text-sm font-medium px-5 py-2.5 hover:text-blue-900 focus:z-10 dark:bg-blue-700 dark:text-blue-300 dark:border-blue-500 dark:hover:text-white dark:hover:bg-blue-600';
|
|
41
|
+
}
|
|
42
|
+
else if (textColor === 'gray') {
|
|
43
|
+
divClass = 'relative bg-white rounded-lg shadow dark:bg-gray-700';
|
|
44
|
+
headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-gray-600';
|
|
45
|
+
h3Class = 'text-xl font-medium text-gray-900 dark:text-white';
|
|
55
46
|
buttonClass =
|
|
56
|
-
|
|
57
|
-
pClass =
|
|
47
|
+
'text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white';
|
|
48
|
+
pClass = 'text-base leading-relaxed text-gray-500 dark:text-gray-400';
|
|
58
49
|
footerClass =
|
|
59
|
-
|
|
50
|
+
'flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600';
|
|
60
51
|
btn2Class =
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
h3Class =
|
|
52
|
+
'text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600';
|
|
53
|
+
}
|
|
54
|
+
else if (textColor === 'red') {
|
|
55
|
+
divClass = 'relative bg-white rounded-lg shadow dark:bg-red-700';
|
|
56
|
+
headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-red-600';
|
|
57
|
+
h3Class = 'text-xl font-medium text-red-900 dark:text-white';
|
|
67
58
|
buttonClass =
|
|
68
|
-
|
|
69
|
-
pClass =
|
|
59
|
+
'text-red-400 bg-transparent hover:bg-red-200 hover:text-red-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-red-600 dark:hover:text-white';
|
|
60
|
+
pClass = 'text-base leading-relaxed text-red-500 dark:text-red-400';
|
|
70
61
|
footerClass =
|
|
71
|
-
|
|
62
|
+
'flex items-center p-6 space-x-2 rounded-b border-t border-red-200 dark:border-red-600';
|
|
72
63
|
btn2Class =
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
64
|
+
'text-red-500 bg-white hover:bg-red-100 focus:ring-4 focus:ring-red-300 rounded-lg border border-red-200 text-sm font-medium px-5 py-2.5 hover:text-red-900 focus:z-10 dark:bg-red-700 dark:text-red-300 dark:border-red-500 dark:hover:text-white dark:hover:bg-red-600';
|
|
65
|
+
}
|
|
66
|
+
else if (textColor === 'yellow') {
|
|
67
|
+
divClass = 'relative bg-white rounded-lg shadow dark:bg-yellow-700';
|
|
76
68
|
headDivClass =
|
|
77
|
-
|
|
78
|
-
h3Class =
|
|
69
|
+
'flex justify-between items-center p-5 rounded-t border-b dark:border-yellow-600';
|
|
70
|
+
h3Class = 'text-xl font-medium text-yellow-900 dark:text-white';
|
|
79
71
|
buttonClass =
|
|
80
|
-
|
|
81
|
-
pClass =
|
|
72
|
+
'text-yellow-400 bg-transparent hover:bg-yellow-200 hover:text-yellow-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-yellow-600 dark:hover:text-white';
|
|
73
|
+
pClass = 'text-base leading-relaxed text-yellow-500 dark:text-yellow-400';
|
|
82
74
|
footerClass =
|
|
83
|
-
|
|
75
|
+
'flex items-center p-6 space-x-2 rounded-b border-t border-yellow-200 dark:border-yellow-600';
|
|
84
76
|
btn2Class =
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
h3Class =
|
|
77
|
+
'text-yellow-500 bg-white hover:bg-yellow-100 focus:ring-4 focus:ring-yellow-300 rounded-lg border border-yellow-200 text-sm font-medium px-5 py-2.5 hover:text-yellow-900 focus:z-10 dark:bg-yellow-700 dark:text-yellow-300 dark:border-yellow-500 dark:hover:text-white dark:hover:bg-yellow-600';
|
|
78
|
+
}
|
|
79
|
+
else if (textColor === 'green') {
|
|
80
|
+
divClass = 'relative bg-white rounded-lg shadow dark:bg-green-700';
|
|
81
|
+
headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-green-600';
|
|
82
|
+
h3Class = 'text-xl font-medium text-green-900 dark:text-white';
|
|
91
83
|
buttonClass =
|
|
92
|
-
|
|
93
|
-
pClass =
|
|
84
|
+
'text-green-400 bg-transparent hover:bg-green-200 hover:text-green-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-green-600 dark:hover:text-white';
|
|
85
|
+
pClass = 'text-base leading-relaxed text-green-500 dark:text-green-400';
|
|
94
86
|
footerClass =
|
|
95
|
-
|
|
87
|
+
'flex items-center p-6 space-x-2 rounded-b border-t border-green-200 dark:border-green-600';
|
|
96
88
|
btn2Class =
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
89
|
+
'text-green-500 bg-white hover:bg-green-100 focus:ring-4 focus:ring-green-300 rounded-lg border border-green-200 text-sm font-medium px-5 py-2.5 hover:text-green-900 focus:z-10 dark:bg-green-700 dark:text-green-300 dark:border-green-500 dark:hover:text-white dark:hover:bg-green-600';
|
|
90
|
+
}
|
|
91
|
+
else if (textColor === 'indigo') {
|
|
92
|
+
divClass = 'relative bg-white rounded-lg shadow dark:bg-indigo-700';
|
|
100
93
|
headDivClass =
|
|
101
|
-
|
|
102
|
-
h3Class =
|
|
94
|
+
'flex justify-between items-center p-5 rounded-t border-b dark:border-indigo-600';
|
|
95
|
+
h3Class = 'text-xl font-medium text-indigo-900 dark:text-white';
|
|
103
96
|
buttonClass =
|
|
104
|
-
|
|
105
|
-
pClass =
|
|
97
|
+
'text-indigo-400 bg-transparent hover:bg-indigo-200 hover:text-indigo-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-indigo-600 dark:hover:text-white';
|
|
98
|
+
pClass = 'text-base leading-relaxed text-indigo-500 dark:text-indigo-400';
|
|
106
99
|
footerClass =
|
|
107
|
-
|
|
100
|
+
'flex items-center p-6 space-x-2 rounded-b border-t border-indigo-200 dark:border-indigo-600';
|
|
108
101
|
btn2Class =
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
102
|
+
'text-indigo-500 bg-white hover:bg-indigo-100 focus:ring-4 focus:ring-indigo-300 rounded-lg border border-indigo-200 text-sm font-medium px-5 py-2.5 hover:text-indigo-900 focus:z-10 dark:bg-indigo-700 dark:text-indigo-300 dark:border-indigo-500 dark:hover:text-white dark:hover:bg-indigo-600';
|
|
103
|
+
}
|
|
104
|
+
else if (textColor === 'purple') {
|
|
105
|
+
divClass = 'relative bg-white rounded-lg shadow dark:bg-purple-700';
|
|
112
106
|
headDivClass =
|
|
113
|
-
|
|
114
|
-
h3Class =
|
|
107
|
+
'flex justify-between items-center p-5 rounded-t border-b dark:border-purple-600';
|
|
108
|
+
h3Class = 'text-xl font-medium text-purple-900 dark:text-white';
|
|
115
109
|
buttonClass =
|
|
116
|
-
|
|
117
|
-
pClass =
|
|
110
|
+
'text-purple-400 bg-transparent hover:bg-purple-200 hover:text-purple-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-purple-600 dark:hover:text-white';
|
|
111
|
+
pClass = 'text-base leading-relaxed text-purple-500 dark:text-purple-400';
|
|
118
112
|
footerClass =
|
|
119
|
-
|
|
113
|
+
'flex items-center p-6 space-x-2 rounded-b border-t border-purple-200 dark:border-purple-600';
|
|
120
114
|
btn2Class =
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
h3Class =
|
|
115
|
+
'text-purple-500 bg-white hover:bg-purple-100 focus:ring-4 focus:ring-purple-300 rounded-lg border border-purple-200 text-sm font-medium px-5 py-2.5 hover:text-purple-900 focus:z-10 dark:bg-purple-700 dark:text-purple-300 dark:border-purple-500 dark:hover:text-white dark:hover:bg-purple-600';
|
|
116
|
+
}
|
|
117
|
+
else if (textColor === 'pink') {
|
|
118
|
+
divClass = 'relative bg-white rounded-lg shadow dark:bg-pink-700';
|
|
119
|
+
headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-pink-600';
|
|
120
|
+
h3Class = 'text-xl font-medium text-pink-900 dark:text-white';
|
|
127
121
|
buttonClass =
|
|
128
|
-
|
|
129
|
-
pClass =
|
|
122
|
+
'text-pink-400 bg-transparent hover:bg-pink-200 hover:text-pink-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-pink-600 dark:hover:text-white';
|
|
123
|
+
pClass = 'text-base leading-relaxed text-pink-500 dark:text-pink-400';
|
|
130
124
|
footerClass =
|
|
131
|
-
|
|
125
|
+
'flex items-center p-6 space-x-2 rounded-b border-t border-pink-200 dark:border-pink-600';
|
|
132
126
|
btn2Class =
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
h3Class =
|
|
127
|
+
'text-pink-500 bg-white hover:bg-pink-100 focus:ring-4 focus:ring-pink-300 rounded-lg border border-pink-200 text-sm font-medium px-5 py-2.5 hover:text-pink-900 focus:z-10 dark:bg-pink-700 dark:text-pink-300 dark:border-pink-500 dark:hover:text-white dark:hover:bg-pink-600';
|
|
128
|
+
}
|
|
129
|
+
else {
|
|
130
|
+
divClass = 'relative bg-white rounded-lg shadow dark:bg-blue-700';
|
|
131
|
+
headDivClass = 'flex justify-between items-center p-5 rounded-t border-b dark:border-blue-600';
|
|
132
|
+
h3Class = 'text-xl font-medium text-blue-900 dark:text-white';
|
|
139
133
|
buttonClass =
|
|
140
|
-
|
|
141
|
-
pClass =
|
|
134
|
+
'text-blue-400 bg-transparent hover:bg-blue-200 hover:text-blue-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-blue-600 dark:hover:text-white';
|
|
135
|
+
pClass = 'text-base leading-relaxed text-blue-500 dark:text-blue-400';
|
|
142
136
|
footerClass =
|
|
143
|
-
|
|
137
|
+
'flex items-center p-6 space-x-2 rounded-b border-t border-blue-200 dark:border-blue-600';
|
|
144
138
|
btn2Class =
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
if (btnColor === "blue") {
|
|
139
|
+
'text-blue-500 bg-white hover:bg-blue-100 focus:ring-4 focus:ring-blue-300 rounded-lg border border-blue-200 text-sm font-medium px-5 py-2.5 hover:text-blue-900 focus:z-10 dark:bg-blue-700 dark:text-blue-300 dark:border-blue-500 dark:hover:text-white dark:hover:bg-blue-600';
|
|
140
|
+
}
|
|
141
|
+
let button1Class;
|
|
142
|
+
if (btnColor === 'blue') {
|
|
150
143
|
button1Class =
|
|
151
|
-
|
|
152
|
-
|
|
144
|
+
'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
|
|
145
|
+
}
|
|
146
|
+
else if (btnColor === 'gray') {
|
|
153
147
|
button1Class =
|
|
154
|
-
|
|
155
|
-
|
|
148
|
+
'text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
|
|
149
|
+
}
|
|
150
|
+
else if (btnColor === 'red') {
|
|
156
151
|
button1Class =
|
|
157
|
-
|
|
158
|
-
|
|
152
|
+
'text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
|
|
153
|
+
}
|
|
154
|
+
else if (btnColor === 'yellow') {
|
|
159
155
|
button1Class =
|
|
160
|
-
|
|
161
|
-
|
|
156
|
+
'text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
|
|
157
|
+
}
|
|
158
|
+
else if (btnColor === 'green') {
|
|
162
159
|
button1Class =
|
|
163
|
-
|
|
164
|
-
|
|
160
|
+
'text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
|
|
161
|
+
}
|
|
162
|
+
else if (btnColor === 'indigo') {
|
|
165
163
|
button1Class =
|
|
166
|
-
|
|
167
|
-
|
|
164
|
+
'text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
|
|
165
|
+
}
|
|
166
|
+
else if (btnColor === 'purple') {
|
|
168
167
|
button1Class =
|
|
169
|
-
|
|
170
|
-
|
|
168
|
+
'text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
|
|
169
|
+
}
|
|
170
|
+
else if (btnColor === 'pink') {
|
|
171
171
|
button1Class =
|
|
172
|
-
|
|
173
|
-
|
|
172
|
+
'text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
|
|
173
|
+
}
|
|
174
|
+
else {
|
|
174
175
|
button1Class =
|
|
175
|
-
|
|
176
|
-
|
|
176
|
+
'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
|
|
177
|
+
}
|
|
177
178
|
</script>
|
|
178
179
|
|
|
179
180
|
{#if showModalId === id}
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
</div>
|
|
228
|
-
</div>
|
|
229
|
-
</div>
|
|
230
|
-
</div>
|
|
181
|
+
<!-- Small Modal Component -->
|
|
182
|
+
<div
|
|
183
|
+
{id}
|
|
184
|
+
role="dialog"
|
|
185
|
+
aria-modal="true"
|
|
186
|
+
class="flex overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-20 z-50 justify-center items-center"
|
|
187
|
+
>
|
|
188
|
+
<div class="relative px-4 w-full max-w-md h-full md:h-auto">
|
|
189
|
+
<!-- Modal content -->
|
|
190
|
+
<div class={divClass}>
|
|
191
|
+
<!-- Modal header -->
|
|
192
|
+
<div class={headDivClass}>
|
|
193
|
+
<h3 class={h3Class}>
|
|
194
|
+
{title}
|
|
195
|
+
</h3>
|
|
196
|
+
<button type="button" class={buttonClass} on:click={closeModal}>
|
|
197
|
+
<svg
|
|
198
|
+
class="w-5 h-5"
|
|
199
|
+
fill="currentColor"
|
|
200
|
+
viewBox="0 0 20 20"
|
|
201
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
202
|
+
><path
|
|
203
|
+
fill-rule="evenodd"
|
|
204
|
+
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"
|
|
205
|
+
clip-rule="evenodd"
|
|
206
|
+
/></svg
|
|
207
|
+
>
|
|
208
|
+
</button>
|
|
209
|
+
</div>
|
|
210
|
+
<!-- Modal body -->
|
|
211
|
+
<div class="p-6 space-y-6">
|
|
212
|
+
<p class={pClass}>
|
|
213
|
+
<slot />
|
|
214
|
+
</p>
|
|
215
|
+
</div>
|
|
216
|
+
<!-- Modal footer -->
|
|
217
|
+
<div class={footerClass}>
|
|
218
|
+
{#if btn1}
|
|
219
|
+
<button type="button" class={button1Class} on:click={handlebtn1}>{btn1}</button>
|
|
220
|
+
{/if}
|
|
221
|
+
{#if btn2}
|
|
222
|
+
<button type="button" class={btn2Class} on:click={handlebtn2}>{btn2}</button>
|
|
223
|
+
{/if}
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
231
228
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
229
|
+
<div
|
|
230
|
+
on:click={closeModal}
|
|
231
|
+
class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40 w-full h-full"
|
|
232
|
+
/>
|
|
236
233
|
{/if}
|
|
@@ -1,36 +1,13 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props} SmallModalProps */
|
|
2
|
-
/** @typedef {typeof __propDef.events} SmallModalEvents */
|
|
3
|
-
/** @typedef {typeof __propDef.slots} SmallModalSlots */
|
|
4
|
-
export default class SmallModal extends SvelteComponentTyped<{
|
|
5
|
-
btn1: any;
|
|
6
|
-
btn2: any;
|
|
7
|
-
showModalId: any;
|
|
8
|
-
id?: string;
|
|
9
|
-
title?: string;
|
|
10
|
-
btnColor?: string;
|
|
11
|
-
textColor?: string;
|
|
12
|
-
}, {
|
|
13
|
-
handlebtn1: CustomEvent<any>;
|
|
14
|
-
handlebtn2: CustomEvent<any>;
|
|
15
|
-
} & {
|
|
16
|
-
[evt: string]: CustomEvent<any>;
|
|
17
|
-
}, {
|
|
18
|
-
default: {};
|
|
19
|
-
}> {
|
|
20
|
-
}
|
|
21
|
-
export type SmallModalProps = typeof __propDef.props;
|
|
22
|
-
export type SmallModalEvents = typeof __propDef.events;
|
|
23
|
-
export type SmallModalSlots = typeof __propDef.slots;
|
|
24
1
|
import { SvelteComponentTyped } from "svelte";
|
|
25
2
|
declare const __propDef: {
|
|
26
3
|
props: {
|
|
27
|
-
btn1: any;
|
|
28
|
-
btn2: any;
|
|
29
|
-
showModalId: any;
|
|
30
4
|
id?: string;
|
|
31
|
-
title?: string;
|
|
32
5
|
btnColor?: string;
|
|
33
6
|
textColor?: string;
|
|
7
|
+
title?: string;
|
|
8
|
+
btn1: string;
|
|
9
|
+
btn2: string;
|
|
10
|
+
showModalId: string;
|
|
34
11
|
};
|
|
35
12
|
events: {
|
|
36
13
|
handlebtn1: CustomEvent<any>;
|
|
@@ -42,4 +19,9 @@ declare const __propDef: {
|
|
|
42
19
|
default: {};
|
|
43
20
|
};
|
|
44
21
|
};
|
|
22
|
+
export declare type SmallModalProps = typeof __propDef.props;
|
|
23
|
+
export declare type SmallModalEvents = typeof __propDef.events;
|
|
24
|
+
export declare type SmallModalSlots = typeof __propDef.slots;
|
|
25
|
+
export default class SmallModal extends SvelteComponentTyped<SmallModalProps, SmallModalEvents, SmallModalSlots> {
|
|
26
|
+
}
|
|
45
27
|
export {};
|
package/modals/modalStores.d.ts
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import type { Writable } from 'svelte/store';
|
|
2
|
+
export declare const modalIdStore: Writable<string>;
|
package/modals/modalStores.js
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
let hidden = true;
|
|
3
3
|
let block = false;
|
|
4
4
|
let activeDropdown = undefined;
|
|
5
|
-
const handleDropdown = (
|
|
5
|
+
const handleDropdown = (id) => {
|
|
6
6
|
hidden = !hidden;
|
|
7
7
|
block = !block;
|
|
8
|
-
activeDropdown =
|
|
8
|
+
activeDropdown = id;
|
|
9
9
|
};
|
|
10
10
|
let barHidden = true;
|
|
11
11
|
const handleClickbtn = () => {
|
|
@@ -60,11 +60,11 @@ export let menus;
|
|
|
60
60
|
</button>
|
|
61
61
|
<div class="w-full md:block md:w-auto" class:hidden={barHidden} id="mobile-menu">
|
|
62
62
|
<ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
|
|
63
|
-
{#each menus as { id, name,
|
|
63
|
+
{#each menus as { id, name, href, rel, child }}
|
|
64
64
|
{#if child}
|
|
65
65
|
<li>
|
|
66
66
|
<button
|
|
67
|
-
on:click={() => handleDropdown(
|
|
67
|
+
on:click={() => handleDropdown(id)}
|
|
68
68
|
class="flex justify-between items-center py-2 pr-4 pl-3 w-full {textsize} font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent"
|
|
69
69
|
>{name}
|
|
70
70
|
<svg
|
|
@@ -91,7 +91,7 @@ export let menus;
|
|
|
91
91
|
{#each child as item}
|
|
92
92
|
<li>
|
|
93
93
|
<a
|
|
94
|
-
href={item.
|
|
94
|
+
href={item.href}
|
|
95
95
|
{rel}
|
|
96
96
|
class="block py-2 px-4 text-{textsize} text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white"
|
|
97
97
|
>{item.name}</a
|
|
@@ -105,8 +105,8 @@ export let menus;
|
|
|
105
105
|
{:else}
|
|
106
106
|
<li>
|
|
107
107
|
<a
|
|
108
|
-
class:active={$page.url.pathname ===
|
|
109
|
-
href
|
|
108
|
+
class:active={$page.url.pathname === href}
|
|
109
|
+
{href}
|
|
110
110
|
{rel}
|
|
111
111
|
class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent {textsize}"
|
|
112
112
|
>{name}</a
|
package/package.json
CHANGED
package/tabs/DefaultTabs.svelte
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
</script>
|
|
3
3
|
|
|
4
4
|
<ul class="flex flex-wrap border-b border-gray-200 dark:border-gray-700">
|
|
5
|
-
{#each tabs as { name, active,
|
|
5
|
+
{#each tabs as { name, active, href, rel }}
|
|
6
6
|
<li class="mr-2">
|
|
7
7
|
<a
|
|
8
|
-
href
|
|
8
|
+
{href}
|
|
9
9
|
{rel}
|
|
10
10
|
aria-current="page"
|
|
11
11
|
class={active
|
|
@@ -6,29 +6,29 @@ export let tabs;
|
|
|
6
6
|
|
|
7
7
|
<div class="mb-4 border-b border-gray-200 dark:border-gray-700">
|
|
8
8
|
<ul class="flex flex-wrap -mb-px" id={tabId} role="tablist">
|
|
9
|
-
{#each tabs as {
|
|
9
|
+
{#each tabs as { name, id }}
|
|
10
10
|
<li class="mr-2" role="presentation">
|
|
11
11
|
<button
|
|
12
12
|
on:click={handleClick(id)}
|
|
13
13
|
class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
|
|
14
|
-
id="{
|
|
14
|
+
id="{name}-tab"
|
|
15
15
|
type="button"
|
|
16
16
|
role="tab"
|
|
17
17
|
class:active={activeTabValue === id}
|
|
18
|
-
aria-controls={
|
|
18
|
+
aria-controls={name}>{name}</button
|
|
19
19
|
>
|
|
20
20
|
</li>
|
|
21
21
|
{/each}
|
|
22
22
|
</ul>
|
|
23
23
|
</div>
|
|
24
24
|
<div id="{tabId}Content">
|
|
25
|
-
{#each tabs as {
|
|
25
|
+
{#each tabs as { name, content, id }}
|
|
26
26
|
{#if activeTabValue === id}
|
|
27
27
|
<div
|
|
28
28
|
class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
|
|
29
|
-
id={
|
|
29
|
+
id={name}
|
|
30
30
|
role="tabpanel"
|
|
31
|
-
aria-labelledby="{
|
|
31
|
+
aria-labelledby="{name}-tab"
|
|
32
32
|
>
|
|
33
33
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
|
34
34
|
{content}
|
package/tabs/PillTabs.svelte
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
</script>
|
|
3
3
|
|
|
4
4
|
<ul class="flex flex-wrap">
|
|
5
|
-
{#each tabs as { name, selected,
|
|
5
|
+
{#each tabs as { name, selected, href }}
|
|
6
6
|
<li class="mr-2">
|
|
7
7
|
<a
|
|
8
8
|
class="{selected
|
|
9
9
|
? 'active inline-block py-3 px-4 text-sm font-medium text-center text-white bg-blue-600 rounded-lg'
|
|
10
10
|
: 'inline-block py-3 px-4 text-sm font-medium text-center text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white'} "
|
|
11
|
-
href
|
|
11
|
+
{href}
|
|
12
12
|
rel="external">{name}</a
|
|
13
13
|
>
|
|
14
14
|
</li>
|