@getmicdrop/svelte-components 5.17.4 → 5.18.1
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/dist/calendar/AboutShow/AboutShow.svelte +9 -5
- package/dist/calendar/AboutShow/AboutShow.svelte.d.ts +2 -2
- package/dist/calendar/AboutShow/AboutShow.svelte.d.ts.map +1 -1
- package/dist/calendar/Calendar/MiniMonthCalendar.svelte +39 -18
- package/dist/calendar/Calendar/MiniMonthCalendar.svelte.d.ts +4 -0
- package/dist/calendar/Calendar/MiniMonthCalendar.svelte.d.ts.map +1 -1
- package/dist/calendar/FAQs/FAQs.svelte +16 -5
- package/dist/calendar/FAQs/FAQs.svelte.d.ts +6 -4
- package/dist/calendar/FAQs/FAQs.svelte.d.ts.map +1 -1
- package/dist/calendar/MonthSwitcher/MonthSwitcher.svelte +19 -4
- package/dist/calendar/MonthSwitcher/MonthSwitcher.svelte.d.ts +2 -0
- package/dist/calendar/MonthSwitcher/MonthSwitcher.svelte.d.ts.map +1 -1
- package/dist/calendar/OrderSummary/OrderSummary.spec.js +3 -3
- package/dist/calendar/OrderSummary/OrderSummary.svelte +17 -13
- package/dist/calendar/OrderSummary/OrderSummary.svelte.d.ts +4 -2
- package/dist/calendar/OrderSummary/OrderSummary.svelte.d.ts.map +1 -1
- package/dist/calendar/PublicCard/PublicCard.svelte +11 -2
- package/dist/calendar/PublicCard/PublicCard.svelte.d.ts +4 -0
- package/dist/calendar/PublicCard/PublicCard.svelte.d.ts.map +1 -1
- package/dist/calendar/ShowCard/ShowCard.svelte +25 -11
- package/dist/calendar/ShowCard/ShowCard.svelte.d.ts +4 -0
- package/dist/calendar/ShowCard/ShowCard.svelte.d.ts.map +1 -1
- package/dist/calendar/ShowTimeCard/ShowTimeCard.svelte +12 -4
- package/dist/calendar/ShowTimeCard/ShowTimeCard.svelte.d.ts +4 -0
- package/dist/calendar/ShowTimeCard/ShowTimeCard.svelte.d.ts.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/patterns/chat/ChatBubble.svelte +9 -1
- package/dist/patterns/chat/ChatBubble.svelte.d.ts +6 -4
- package/dist/patterns/chat/ChatBubble.svelte.d.ts.map +1 -1
- package/dist/patterns/chat/ChatInvitationBubble.svelte +10 -1
- package/dist/patterns/chat/ChatInvitationBubble.svelte.d.ts +6 -3
- package/dist/patterns/chat/ChatInvitationBubble.svelte.d.ts.map +1 -1
- package/dist/patterns/chat/ChatInvitationNotice.svelte +10 -1
- package/dist/patterns/chat/ChatInvitationNotice.svelte.d.ts +6 -3
- package/dist/patterns/chat/ChatInvitationNotice.svelte.d.ts.map +1 -1
- package/dist/patterns/forms/FormValidationSummary.svelte +9 -1
- package/dist/patterns/forms/FormValidationSummary.svelte.d.ts +5 -3
- package/dist/patterns/forms/FormValidationSummary.svelte.d.ts.map +1 -1
- package/dist/patterns/navigation/BottomNav.svelte +9 -1
- package/dist/patterns/navigation/BottomNav.svelte.d.ts +10 -9
- package/dist/patterns/navigation/BottomNav.svelte.d.ts.map +1 -1
- package/dist/patterns/navigation/Header.svelte +20 -8
- package/dist/patterns/navigation/Header.svelte.d.ts +17 -9
- package/dist/patterns/navigation/Header.svelte.d.ts.map +1 -1
- package/dist/patterns/page/PageLoader.svelte +12 -3
- package/dist/patterns/page/PageLoader.svelte.d.ts +6 -3
- package/dist/patterns/page/PageLoader.svelte.d.ts.map +1 -1
- package/dist/primitives/Accordion/AccordionItem.svelte +9 -1
- package/dist/primitives/Accordion/AccordionItem.svelte.d.ts +6 -4
- package/dist/primitives/Accordion/AccordionItem.svelte.d.ts.map +1 -1
- package/dist/primitives/Alert/Alert.svelte +10 -2
- package/dist/primitives/Alert/Alert.svelte.d.ts +6 -4
- package/dist/primitives/Alert/Alert.svelte.d.ts.map +1 -1
- package/dist/primitives/Breadcrumb/Breadcrumb.svelte +9 -1
- package/dist/primitives/Breadcrumb/Breadcrumb.svelte.d.ts +13 -9
- package/dist/primitives/Breadcrumb/Breadcrumb.svelte.d.ts.map +1 -1
- package/dist/primitives/DarkModeToggle.svelte +16 -5
- package/dist/primitives/DarkModeToggle.svelte.d.ts +9 -3
- package/dist/primitives/DarkModeToggle.svelte.d.ts.map +1 -1
- package/dist/primitives/Dropdown/Dropdown.svelte +11 -2
- package/dist/primitives/Dropdown/Dropdown.svelte.d.ts +7 -4
- package/dist/primitives/Dropdown/Dropdown.svelte.d.ts.map +1 -1
- package/dist/primitives/Input/Input.svelte +19 -6
- package/dist/primitives/Input/Input.svelte.d.ts.map +1 -1
- package/dist/primitives/NumberInput/NumberInput.svelte +10 -2
- package/dist/primitives/NumberInput/NumberInput.svelte.d.ts.map +1 -1
- package/dist/primitives/Pagination/Pagination.svelte +21 -7
- package/dist/primitives/Pagination/Pagination.svelte.d.ts +14 -6
- package/dist/primitives/Pagination/Pagination.svelte.d.ts.map +1 -1
- package/dist/primitives/Skeleton/CardPlaceholder.svelte +11 -2
- package/dist/primitives/Skeleton/CardPlaceholder.svelte.d.ts +8 -5
- package/dist/primitives/Skeleton/CardPlaceholder.svelte.d.ts.map +1 -1
- package/dist/primitives/Skeleton/ImagePlaceholder.svelte +11 -2
- package/dist/primitives/Skeleton/ImagePlaceholder.svelte.d.ts +8 -5
- package/dist/primitives/Skeleton/ImagePlaceholder.svelte.d.ts.map +1 -1
- package/dist/primitives/Skeleton/ListPlaceholder.svelte +11 -2
- package/dist/primitives/Skeleton/ListPlaceholder.svelte.d.ts +8 -5
- package/dist/primitives/Skeleton/ListPlaceholder.svelte.d.ts.map +1 -1
- package/dist/primitives/Skeleton/Skeleton.svelte +11 -2
- package/dist/primitives/Skeleton/Skeleton.svelte.d.ts +7 -4
- package/dist/primitives/Skeleton/Skeleton.svelte.d.ts.map +1 -1
- package/dist/primitives/Spinner/Spinner.svelte +9 -1
- package/dist/primitives/Spinner/Spinner.svelte.d.ts +6 -4
- package/dist/primitives/Spinner/Spinner.svelte.d.ts.map +1 -1
- package/dist/recipes/ImageUploader/ImageUploader.svelte +5 -3
- package/dist/recipes/ImageUploader/ImageUploader.svelte.d.ts +1 -0
- package/dist/recipes/ImageUploader/ImageUploader.svelte.d.ts.map +1 -1
- package/dist/recipes/SuperLogin/SuperLogin.svelte +25 -23
- package/dist/recipes/SuperLogin/SuperLogin.svelte.d.ts.map +1 -1
- package/dist/recipes/feedback/EmptyState/EmptyState.svelte +12 -3
- package/dist/recipes/feedback/EmptyState/EmptyState.svelte.d.ts +7 -4
- package/dist/recipes/feedback/EmptyState/EmptyState.svelte.d.ts.map +1 -1
- package/dist/recipes/inputs/MultiSelect.svelte +10 -2
- package/dist/recipes/inputs/MultiSelect.svelte.d.ts.map +1 -1
- package/dist/recipes/inputs/OTPInput.svelte +14 -3
- package/dist/recipes/inputs/OTPInput.svelte.d.ts +14 -12
- package/dist/recipes/inputs/OTPInput.svelte.d.ts.map +1 -1
- package/dist/recipes/inputs/PasswordInput.svelte +10 -1
- package/dist/recipes/inputs/PasswordInput.svelte.d.ts +7 -4
- package/dist/recipes/inputs/PasswordInput.svelte.d.ts.map +1 -1
- package/dist/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte +21 -10
- package/dist/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte.d.ts +8 -3
- package/dist/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte.d.ts.map +1 -1
- package/dist/recipes/inputs/PhoneInput.svelte +254 -0
- package/dist/recipes/inputs/PhoneInput.svelte.d.ts +40 -0
- package/dist/recipes/inputs/PhoneInput.svelte.d.ts.map +1 -0
- package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte +22 -9
- package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte.d.ts +21 -16
- package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte.d.ts.map +1 -1
- package/dist/recipes/inputs/Search.svelte +10 -2
- package/dist/recipes/inputs/Search.svelte.d.ts +7 -5
- package/dist/recipes/inputs/Search.svelte.d.ts.map +1 -1
- package/dist/recipes/inputs/index.d.ts +1 -0
- package/dist/recipes/inputs/index.js +1 -0
- package/dist/recipes/inputs/phoneInput/CountrySelector.svelte +240 -0
- package/dist/recipes/inputs/phoneInput/CountrySelector.svelte.d.ts +15 -0
- package/dist/recipes/inputs/phoneInput/CountrySelector.svelte.d.ts.map +1 -0
- package/dist/recipes/inputs/phoneInput/countryData.d.ts +18 -0
- package/dist/recipes/inputs/phoneInput/countryData.d.ts.map +1 -0
- package/dist/recipes/inputs/phoneInput/countryData.js +211 -0
- package/dist/recipes/modals/AlertModal.svelte +11 -2
- package/dist/recipes/modals/AlertModal.svelte.d.ts +4 -2
- package/dist/recipes/modals/AlertModal.svelte.d.ts.map +1 -1
- package/dist/recipes/modals/ConfirmationModal.svelte +8 -1
- package/dist/recipes/modals/ConfirmationModal.svelte.d.ts +2 -0
- package/dist/recipes/modals/ConfirmationModal.svelte.d.ts.map +1 -1
- package/dist/recipes/modals/InputModal.svelte +19 -7
- package/dist/recipes/modals/InputModal.svelte.d.ts +6 -4
- package/dist/recipes/modals/InputModal.svelte.d.ts.map +1 -1
- package/dist/recipes/modals/StatusModal.svelte +14 -4
- package/dist/recipes/modals/StatusModal.svelte.d.ts +4 -2
- package/dist/recipes/modals/StatusModal.svelte.d.ts.map +1 -1
- package/dist/tokens/__tests__/variants.test.js +12 -4
- package/dist/tokens/variants.d.ts +4 -4
- package/dist/tokens/variants.js +4 -4
- package/dist/utils/formatters.d.ts +6 -0
- package/dist/utils/formatters.d.ts.map +1 -1
- package/dist/utils/formatters.js +8 -0
- package/dist/utils/phoneUtils.d.ts +35 -0
- package/dist/utils/phoneUtils.d.ts.map +1 -0
- package/dist/utils/phoneUtils.js +104 -0
- package/dist/utils/utils.js +25 -16
- package/package.json +6 -1
|
@@ -3,6 +3,16 @@
|
|
|
3
3
|
import { ChevronLeftOutline, ChevronRightOutline } from "../Icons";
|
|
4
4
|
import { typography } from "../../tokens/typography";
|
|
5
5
|
|
|
6
|
+
const defaultLabels = {
|
|
7
|
+
showing: 'Showing',
|
|
8
|
+
to: 'to',
|
|
9
|
+
of: 'of',
|
|
10
|
+
entries: 'entries',
|
|
11
|
+
previousPage: 'Previous page',
|
|
12
|
+
nextPage: 'Next page',
|
|
13
|
+
pagination: 'Pagination',
|
|
14
|
+
};
|
|
15
|
+
|
|
6
16
|
interface Props {
|
|
7
17
|
currentPage?: number;
|
|
8
18
|
totalPages?: number;
|
|
@@ -20,6 +30,7 @@
|
|
|
20
30
|
onPageChange?: (page: number) => void;
|
|
21
31
|
prev?: Snippet;
|
|
22
32
|
next?: Snippet;
|
|
33
|
+
labels?: Partial<typeof defaultLabels>;
|
|
23
34
|
[key: string]: unknown;
|
|
24
35
|
}
|
|
25
36
|
|
|
@@ -40,9 +51,12 @@
|
|
|
40
51
|
onPageChange,
|
|
41
52
|
prev,
|
|
42
53
|
next,
|
|
54
|
+
labels: userLabels = {},
|
|
43
55
|
...restProps
|
|
44
56
|
}: Props = $props();
|
|
45
57
|
|
|
58
|
+
let labels = $derived({ ...defaultLabels, ...userLabels });
|
|
59
|
+
|
|
46
60
|
// Support flowbite's showIcons prop
|
|
47
61
|
let effectiveShowPrevNext = $derived(showIcons !== undefined ? showIcons : showPrevNext);
|
|
48
62
|
|
|
@@ -114,16 +128,16 @@
|
|
|
114
128
|
{#if variant === 'table'}
|
|
115
129
|
<div class="flex flex-col items-center gap-3 sm:flex-row sm:justify-between {className}" {...restProps}>
|
|
116
130
|
<span class={`${typography.sm} text-gray-700 dark:text-gray-400`}>
|
|
117
|
-
|
|
131
|
+
{labels.showing} <span class={`font-semibold ${typography.sm}`}>{startItem}</span> {labels.to} <span class={`font-semibold ${typography.sm}`}>{endItem}</span> {labels.of} <span class={`font-semibold ${typography.sm}`}>{totalItems}</span> {labels.entries}
|
|
118
132
|
</span>
|
|
119
|
-
<nav class="inline-flex -space-x-px rtl:space-x-reverse" aria-label=
|
|
133
|
+
<nav class="inline-flex -space-x-px rtl:space-x-reverse" aria-label={labels.pagination}>
|
|
120
134
|
{#if effectiveShowPrevNext}
|
|
121
135
|
<button
|
|
122
136
|
type="button"
|
|
123
137
|
class="{baseButtonClasses} {sizeClasses} rounded-s-lg {currentPage === 1 ? disabledClasses : ''}"
|
|
124
138
|
disabled={currentPage === 1}
|
|
125
139
|
onclick={previous}
|
|
126
|
-
aria-label=
|
|
140
|
+
aria-label={labels.previousPage}
|
|
127
141
|
>
|
|
128
142
|
{#if prev}
|
|
129
143
|
{@render prev()}
|
|
@@ -174,7 +188,7 @@
|
|
|
174
188
|
class="{baseButtonClasses} {sizeClasses} rounded-e-lg {currentPage === totalPages ? disabledClasses : ''}"
|
|
175
189
|
disabled={currentPage === totalPages}
|
|
176
190
|
onclick={nextPage}
|
|
177
|
-
aria-label=
|
|
191
|
+
aria-label={labels.nextPage}
|
|
178
192
|
>
|
|
179
193
|
{#if next}
|
|
180
194
|
{@render next()}
|
|
@@ -188,14 +202,14 @@
|
|
|
188
202
|
</nav>
|
|
189
203
|
</div>
|
|
190
204
|
{:else}
|
|
191
|
-
<nav class="inline-flex -space-x-px rtl:space-x-reverse text-sm {className}" aria-label=
|
|
205
|
+
<nav class="inline-flex -space-x-px rtl:space-x-reverse text-sm {className}" aria-label={labels.pagination} {...restProps}>
|
|
192
206
|
{#if effectiveShowPrevNext}
|
|
193
207
|
<button
|
|
194
208
|
type="button"
|
|
195
209
|
class="{baseButtonClasses} {sizeClasses} rounded-s-lg {currentPage === 1 ? disabledClasses : ''}"
|
|
196
210
|
disabled={currentPage === 1}
|
|
197
211
|
onclick={previous}
|
|
198
|
-
aria-label=
|
|
212
|
+
aria-label={labels.previousPage}
|
|
199
213
|
>
|
|
200
214
|
{#if prev}
|
|
201
215
|
{@render prev()}
|
|
@@ -246,7 +260,7 @@
|
|
|
246
260
|
class="{baseButtonClasses} {sizeClasses} rounded-e-lg {currentPage === totalPages ? disabledClasses : ''}"
|
|
247
261
|
disabled={currentPage === totalPages}
|
|
248
262
|
onclick={nextPage}
|
|
249
|
-
aria-label=
|
|
263
|
+
aria-label={labels.nextPage}
|
|
250
264
|
>
|
|
251
265
|
{#if next}
|
|
252
266
|
{@render next()}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Snippet } from 'svelte';
|
|
2
|
-
|
|
2
|
+
declare const Pagination: import("svelte").Component<{
|
|
3
|
+
[key: string]: unknown;
|
|
3
4
|
currentPage?: number;
|
|
4
5
|
totalPages?: number;
|
|
5
6
|
maxVisible?: number;
|
|
@@ -7,8 +8,8 @@ interface Props {
|
|
|
7
8
|
showIcons?: boolean;
|
|
8
9
|
previousLabel?: string;
|
|
9
10
|
nextLabel?: string;
|
|
10
|
-
variant?:
|
|
11
|
-
size?:
|
|
11
|
+
variant?: "default" | "table";
|
|
12
|
+
size?: "sm" | "md" | "lg";
|
|
12
13
|
totalItems?: number;
|
|
13
14
|
perPage?: number;
|
|
14
15
|
class?: string;
|
|
@@ -18,9 +19,16 @@ interface Props {
|
|
|
18
19
|
onPageChange?: (page: number) => void;
|
|
19
20
|
prev?: Snippet;
|
|
20
21
|
next?: Snippet;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
labels?: Partial<{
|
|
23
|
+
showing: string;
|
|
24
|
+
to: string;
|
|
25
|
+
of: string;
|
|
26
|
+
entries: string;
|
|
27
|
+
previousPage: string;
|
|
28
|
+
nextPage: string;
|
|
29
|
+
pagination: string;
|
|
30
|
+
}>;
|
|
31
|
+
}, {}, "currentPage">;
|
|
24
32
|
type Pagination = ReturnType<typeof Pagination>;
|
|
25
33
|
export default Pagination;
|
|
26
34
|
//# sourceMappingURL=Pagination.svelte.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Pagination/Pagination.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Pagination/Pagination.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAwOtC,QAAA,MAAM,UAAU;;kBApNE,MAAM;iBACP,MAAM;iBACN,MAAM;mBACJ,OAAO;gBACV,OAAO;oBACH,MAAM;gBACV,MAAM;cACR,SAAS,GAAG,OAAO;WACtB,IAAI,GAAG,IAAI,GAAG,IAAI;iBACZ,MAAM;cACT,MAAM;YACR,MAAM;eACH,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;mBAC9B,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;WAC9B,OAAO;WACP,OAAO;aACL,OAAO;;;;;;;;MAAsB;qBAoMc,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
|
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
+
const defaultLabels = {
|
|
3
|
+
loadingCard: 'Loading card',
|
|
4
|
+
loading: 'Loading...',
|
|
5
|
+
};
|
|
6
|
+
|
|
2
7
|
interface Props {
|
|
3
8
|
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
4
9
|
animate?: boolean;
|
|
5
10
|
showAvatar?: boolean;
|
|
6
11
|
showImage?: boolean;
|
|
7
12
|
class?: string;
|
|
13
|
+
labels?: Partial<typeof defaultLabels>;
|
|
8
14
|
[key: string]: unknown;
|
|
9
15
|
}
|
|
10
16
|
|
|
@@ -14,9 +20,12 @@
|
|
|
14
20
|
showAvatar = true,
|
|
15
21
|
showImage = true,
|
|
16
22
|
class: className = '',
|
|
23
|
+
labels: userLabels = {},
|
|
17
24
|
...restProps
|
|
18
25
|
}: Props = $props();
|
|
19
26
|
|
|
27
|
+
let labels = $derived({ ...defaultLabels, ...userLabels });
|
|
28
|
+
|
|
20
29
|
const cardSizeClasses = {
|
|
21
30
|
sm: 'max-w-xs',
|
|
22
31
|
md: 'max-w-sm',
|
|
@@ -41,7 +50,7 @@
|
|
|
41
50
|
<div
|
|
42
51
|
role="status"
|
|
43
52
|
class="{cardWidthClass} p-4 border border-gray-200 rounded-lg shadow dark:border-gray-700 {animateClass} {className}"
|
|
44
|
-
aria-label=
|
|
53
|
+
aria-label={labels.loadingCard}
|
|
45
54
|
{...restProps}
|
|
46
55
|
>
|
|
47
56
|
{#if showImage}
|
|
@@ -83,5 +92,5 @@
|
|
|
83
92
|
</div>
|
|
84
93
|
{/if}
|
|
85
94
|
|
|
86
|
-
<span class="sr-only">
|
|
95
|
+
<span class="sr-only">{labels.loading}</span>
|
|
87
96
|
</div>
|
|
@@ -1,12 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
declare const CardPlaceholder: import("svelte").Component<{
|
|
2
|
+
[key: string]: unknown;
|
|
3
|
+
size?: "sm" | "md" | "lg" | "xl" | "2xl";
|
|
3
4
|
animate?: boolean;
|
|
4
5
|
showAvatar?: boolean;
|
|
5
6
|
showImage?: boolean;
|
|
6
7
|
class?: string;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
labels?: Partial<{
|
|
9
|
+
loadingCard: string;
|
|
10
|
+
loading: string;
|
|
11
|
+
}>;
|
|
12
|
+
}, {}, "">;
|
|
10
13
|
type CardPlaceholder = ReturnType<typeof CardPlaceholder>;
|
|
11
14
|
export default CardPlaceholder;
|
|
12
15
|
//# sourceMappingURL=CardPlaceholder.svelte.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardPlaceholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Skeleton/CardPlaceholder.svelte.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CardPlaceholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Skeleton/CardPlaceholder.svelte.ts"],"names":[],"mappings":"AAqFA,QAAA,MAAM,eAAe;;WA3EV,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK;cAC9B,OAAO;iBACJ,OAAO;gBACR,OAAO;YACX,MAAM;aACL,OAAO;;;MAAsB;UAsEmB,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
|
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
+
const defaultLabels = {
|
|
3
|
+
loadingImage: 'Loading image',
|
|
4
|
+
loading: 'Loading...',
|
|
5
|
+
};
|
|
6
|
+
|
|
2
7
|
interface Props {
|
|
3
8
|
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
4
9
|
animate?: boolean;
|
|
5
10
|
showText?: boolean;
|
|
6
11
|
class?: string;
|
|
12
|
+
labels?: Partial<typeof defaultLabels>;
|
|
7
13
|
[key: string]: unknown;
|
|
8
14
|
}
|
|
9
15
|
|
|
@@ -12,9 +18,12 @@
|
|
|
12
18
|
animate = true,
|
|
13
19
|
showText = false,
|
|
14
20
|
class: className = '',
|
|
21
|
+
labels: userLabels = {},
|
|
15
22
|
...restProps
|
|
16
23
|
}: Props = $props();
|
|
17
24
|
|
|
25
|
+
let labels = $derived({ ...defaultLabels, ...userLabels });
|
|
26
|
+
|
|
18
27
|
const imageSizeClasses = {
|
|
19
28
|
sm: 'h-32',
|
|
20
29
|
md: 'h-48',
|
|
@@ -30,7 +39,7 @@
|
|
|
30
39
|
<div
|
|
31
40
|
role="status"
|
|
32
41
|
class="{animateClass} {className}"
|
|
33
|
-
aria-label=
|
|
42
|
+
aria-label={labels.loadingImage}
|
|
34
43
|
{...restProps}
|
|
35
44
|
>
|
|
36
45
|
<div class="flex items-center justify-center w-full {imageHeightClass} bg-gray-300 rounded-lg dark:bg-gray-700">
|
|
@@ -55,5 +64,5 @@
|
|
|
55
64
|
</div>
|
|
56
65
|
{/if}
|
|
57
66
|
|
|
58
|
-
<span class="sr-only">
|
|
67
|
+
<span class="sr-only">{labels.loading}</span>
|
|
59
68
|
</div>
|
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
declare const ImagePlaceholder: import("svelte").Component<{
|
|
2
|
+
[key: string]: unknown;
|
|
3
|
+
size?: "sm" | "md" | "lg" | "xl" | "2xl";
|
|
3
4
|
animate?: boolean;
|
|
4
5
|
showText?: boolean;
|
|
5
6
|
class?: string;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
labels?: Partial<{
|
|
8
|
+
loadingImage: string;
|
|
9
|
+
loading: string;
|
|
10
|
+
}>;
|
|
11
|
+
}, {}, "">;
|
|
9
12
|
type ImagePlaceholder = ReturnType<typeof ImagePlaceholder>;
|
|
10
13
|
export default ImagePlaceholder;
|
|
11
14
|
//# sourceMappingURL=ImagePlaceholder.svelte.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImagePlaceholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Skeleton/ImagePlaceholder.svelte.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ImagePlaceholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Skeleton/ImagePlaceholder.svelte.ts"],"names":[],"mappings":"AA+DA,QAAA,MAAM,gBAAgB;;WArDX,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK;cAC9B,OAAO;eACN,OAAO;YACV,MAAM;aACL,OAAO;;;MAAsB;UAiDoB,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
+
const defaultLabels = {
|
|
3
|
+
loadingList: 'Loading list',
|
|
4
|
+
loading: 'Loading...',
|
|
5
|
+
};
|
|
6
|
+
|
|
2
7
|
interface Props {
|
|
3
8
|
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
4
9
|
items?: number;
|
|
@@ -6,6 +11,7 @@
|
|
|
6
11
|
showIcon?: boolean;
|
|
7
12
|
showAction?: boolean;
|
|
8
13
|
class?: string;
|
|
14
|
+
labels?: Partial<typeof defaultLabels>;
|
|
9
15
|
[key: string]: unknown;
|
|
10
16
|
}
|
|
11
17
|
|
|
@@ -16,9 +22,12 @@
|
|
|
16
22
|
showIcon = true,
|
|
17
23
|
showAction = true,
|
|
18
24
|
class: className = '',
|
|
25
|
+
labels: userLabels = {},
|
|
19
26
|
...restProps
|
|
20
27
|
}: Props = $props();
|
|
21
28
|
|
|
29
|
+
let labels = $derived({ ...defaultLabels, ...userLabels });
|
|
30
|
+
|
|
22
31
|
const containerSizeClasses = {
|
|
23
32
|
sm: 'max-w-xs',
|
|
24
33
|
md: 'max-w-sm',
|
|
@@ -43,7 +52,7 @@
|
|
|
43
52
|
<div
|
|
44
53
|
role="status"
|
|
45
54
|
class="{containerWidthClass} p-4 space-y-4 border border-gray-200 divide-y divide-gray-200 rounded-lg shadow dark:divide-gray-700 dark:border-gray-700 {animateClass} {className}"
|
|
46
|
-
aria-label=
|
|
55
|
+
aria-label={labels.loadingList}
|
|
47
56
|
{...restProps}
|
|
48
57
|
>
|
|
49
58
|
{#each Array(items) as _, i}
|
|
@@ -72,5 +81,5 @@
|
|
|
72
81
|
</div>
|
|
73
82
|
{/each}
|
|
74
83
|
|
|
75
|
-
<span class="sr-only">
|
|
84
|
+
<span class="sr-only">{labels.loading}</span>
|
|
76
85
|
</div>
|
|
@@ -1,13 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
declare const ListPlaceholder: import("svelte").Component<{
|
|
2
|
+
[key: string]: unknown;
|
|
3
|
+
size?: "sm" | "md" | "lg" | "xl" | "2xl";
|
|
3
4
|
items?: number;
|
|
4
5
|
animate?: boolean;
|
|
5
6
|
showIcon?: boolean;
|
|
6
7
|
showAction?: boolean;
|
|
7
8
|
class?: string;
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
labels?: Partial<{
|
|
10
|
+
loadingList: string;
|
|
11
|
+
loading: string;
|
|
12
|
+
}>;
|
|
13
|
+
}, {}, "">;
|
|
11
14
|
type ListPlaceholder = ReturnType<typeof ListPlaceholder>;
|
|
12
15
|
export default ListPlaceholder;
|
|
13
16
|
//# sourceMappingURL=ListPlaceholder.svelte.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListPlaceholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Skeleton/ListPlaceholder.svelte.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ListPlaceholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Skeleton/ListPlaceholder.svelte.ts"],"names":[],"mappings":"AAgFA,QAAA,MAAM,eAAe;;WAtEV,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK;YAChC,MAAM;cACJ,OAAO;eACN,OAAO;iBACL,OAAO;YACZ,MAAM;aACL,OAAO;;;MAAsB;UAgEmB,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
|
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { skeletonSizes, type SkeletonSize } from '../../tokens/sizing.js';
|
|
3
3
|
|
|
4
|
+
const defaultLabels = {
|
|
5
|
+
loadingContent: 'Loading content',
|
|
6
|
+
loading: 'Loading...',
|
|
7
|
+
};
|
|
8
|
+
|
|
4
9
|
interface Props {
|
|
5
10
|
size?: SkeletonSize;
|
|
6
11
|
lines?: number;
|
|
7
12
|
animate?: boolean;
|
|
8
13
|
class?: string;
|
|
14
|
+
labels?: Partial<typeof defaultLabels>;
|
|
9
15
|
[key: string]: unknown;
|
|
10
16
|
}
|
|
11
17
|
|
|
@@ -14,9 +20,12 @@
|
|
|
14
20
|
lines = 3,
|
|
15
21
|
animate = true,
|
|
16
22
|
class: className = '',
|
|
23
|
+
labels: userLabels = {},
|
|
17
24
|
...restProps
|
|
18
25
|
}: Props = $props();
|
|
19
26
|
|
|
27
|
+
let labels = $derived({ ...defaultLabels, ...userLabels });
|
|
28
|
+
|
|
20
29
|
const widthPatterns = [
|
|
21
30
|
'w-full',
|
|
22
31
|
'max-w-sm',
|
|
@@ -34,7 +43,7 @@
|
|
|
34
43
|
<div
|
|
35
44
|
role="status"
|
|
36
45
|
class="{animateClass} {className}"
|
|
37
|
-
aria-label=
|
|
46
|
+
aria-label={labels.loadingContent}
|
|
38
47
|
{...restProps}
|
|
39
48
|
>
|
|
40
49
|
{#each Array(lines) as _, i}
|
|
@@ -42,5 +51,5 @@
|
|
|
42
51
|
class="{heightClass} bg-gray-200 rounded-full dark:bg-gray-700 {widthPatterns[i % widthPatterns.length]} {i < lines - 1 ? 'mb-2.5' : ''}"
|
|
43
52
|
></div>
|
|
44
53
|
{/each}
|
|
45
|
-
<span class="sr-only">
|
|
54
|
+
<span class="sr-only">{labels.loading}</span>
|
|
46
55
|
</div>
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import { type SkeletonSize } from '../../tokens/sizing.js';
|
|
2
|
-
|
|
2
|
+
declare const Skeleton: import("svelte").Component<{
|
|
3
|
+
[key: string]: unknown;
|
|
3
4
|
size?: SkeletonSize;
|
|
4
5
|
lines?: number;
|
|
5
6
|
animate?: boolean;
|
|
6
7
|
class?: string;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
labels?: Partial<{
|
|
9
|
+
loadingContent: string;
|
|
10
|
+
loading: string;
|
|
11
|
+
}>;
|
|
12
|
+
}, {}, "">;
|
|
10
13
|
type Skeleton = ReturnType<typeof Skeleton>;
|
|
11
14
|
export default Skeleton;
|
|
12
15
|
//# sourceMappingURL=Skeleton.svelte.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Skeleton/Skeleton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAiB,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"Skeleton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Skeleton/Skeleton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAiB,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAqD1E,QAAA,MAAM,QAAQ;;WA1CH,YAAY;YACX,MAAM;cACJ,OAAO;YACT,MAAM;aACL,OAAO;;;MAAsB;UAsCY,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
|
|
@@ -5,10 +5,15 @@
|
|
|
5
5
|
} from '../../tokens/variants.js';
|
|
6
6
|
import { iconSizes, type IconSize } from '../../tokens/sizing.js';
|
|
7
7
|
|
|
8
|
+
const defaultLabels = {
|
|
9
|
+
loading: 'Loading...',
|
|
10
|
+
};
|
|
11
|
+
|
|
8
12
|
interface Props {
|
|
9
13
|
size?: IconSize;
|
|
10
14
|
color?: SpinnerColorVariant;
|
|
11
15
|
class?: string;
|
|
16
|
+
labels?: Partial<typeof defaultLabels>;
|
|
12
17
|
[key: string]: unknown;
|
|
13
18
|
}
|
|
14
19
|
|
|
@@ -16,9 +21,12 @@
|
|
|
16
21
|
size = 'md',
|
|
17
22
|
color = 'blue',
|
|
18
23
|
class: className = '',
|
|
24
|
+
labels: userLabels = {},
|
|
19
25
|
...restProps
|
|
20
26
|
}: Props = $props();
|
|
21
27
|
|
|
28
|
+
let labels = $derived({ ...defaultLabels, ...userLabels });
|
|
29
|
+
|
|
22
30
|
let sizeClass = $derived(iconSizes[size] || iconSizes.md);
|
|
23
31
|
let colorClass = $derived(spinnerColorVariants[color] || spinnerColorVariants.blue);
|
|
24
32
|
</script>
|
|
@@ -41,4 +49,4 @@
|
|
|
41
49
|
fill="currentFill"
|
|
42
50
|
/>
|
|
43
51
|
</svg>
|
|
44
|
-
<span class="sr-only">
|
|
52
|
+
<span class="sr-only">{labels.loading}</span>
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { type SpinnerColorVariant } from '../../tokens/variants.js';
|
|
2
2
|
import { type IconSize } from '../../tokens/sizing.js';
|
|
3
|
-
|
|
3
|
+
declare const Spinner: import("svelte").Component<{
|
|
4
|
+
[key: string]: unknown;
|
|
4
5
|
size?: IconSize;
|
|
5
6
|
color?: SpinnerColorVariant;
|
|
6
7
|
class?: string;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
labels?: Partial<{
|
|
9
|
+
loading: string;
|
|
10
|
+
}>;
|
|
11
|
+
}, {}, "">;
|
|
10
12
|
type Spinner = ReturnType<typeof Spinner>;
|
|
11
13
|
export default Spinner;
|
|
12
14
|
//# sourceMappingURL=Spinner.svelte.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Spinner/Spinner.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAEH,KAAK,mBAAmB,EACzB,MAAM,0BAA0B,CAAC;AACpC,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"Spinner.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Spinner/Spinner.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAEH,KAAK,mBAAmB,EACzB,MAAM,0BAA0B,CAAC;AACpC,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAwClE,QAAA,MAAM,OAAO;;WA7BF,QAAQ;YACP,mBAAmB;YACnB,MAAM;aACL,OAAO;;MAAsB;UA0BW,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
|
|
@@ -55,6 +55,7 @@
|
|
|
55
55
|
fileTypes: 'JPG, PNG, WebP',
|
|
56
56
|
uploadedAlt: 'Uploaded',
|
|
57
57
|
closeModal: 'Close',
|
|
58
|
+
emptyLabel: 'Drag & drop or click to upload',
|
|
58
59
|
};
|
|
59
60
|
|
|
60
61
|
interface Props {
|
|
@@ -119,7 +120,7 @@
|
|
|
119
120
|
showMainBadge = true,
|
|
120
121
|
maxFileSize = '20MB',
|
|
121
122
|
acceptedTypes = ['image/jpeg', 'image/png', 'image/webp', 'image/heic', 'image/heif'],
|
|
122
|
-
emptyLabel =
|
|
123
|
+
emptyLabel = undefined,
|
|
123
124
|
constraintsText = '',
|
|
124
125
|
helperText = '',
|
|
125
126
|
onUpload,
|
|
@@ -135,6 +136,7 @@
|
|
|
135
136
|
}: Props = $props();
|
|
136
137
|
|
|
137
138
|
let labels = $derived({ ...defaultLabels, ...userLabels });
|
|
139
|
+
let resolvedEmptyLabel = $derived(emptyLabel ?? labels.emptyLabel);
|
|
138
140
|
|
|
139
141
|
// Normalize images to array
|
|
140
142
|
let imageArray = $derived(
|
|
@@ -255,7 +257,7 @@
|
|
|
255
257
|
<svg class="w-8 h-8 mb-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
256
258
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
|
257
259
|
</svg>
|
|
258
|
-
<span class="text-sm font-medium text-gray-600 dark:text-gray-300">${
|
|
260
|
+
<span class="text-sm font-medium text-gray-600 dark:text-gray-300">${resolvedEmptyLabel}</span>
|
|
259
261
|
<span class="text-[11px] text-gray-400 dark:text-gray-500 mt-2 block">${labels.fileTypes}</span>
|
|
260
262
|
${constraintsText ? `<span class="text-[10px] text-gray-400/50 dark:text-gray-500/50 mt-1 block">${constraintsText}</span>` : ''}
|
|
261
263
|
</div>
|
|
@@ -804,7 +806,7 @@
|
|
|
804
806
|
ondrop={(e) => handleModalDrop(e)}
|
|
805
807
|
>
|
|
806
808
|
<PlusOutline class="w-8 h-8 mb-2 text-gray-400" />
|
|
807
|
-
<span class={typography.smMuted}>{
|
|
809
|
+
<span class={typography.smMuted}>{resolvedEmptyLabel}</span>
|
|
808
810
|
<span class={`${typography.xsMuted} mt-1`}>{labels.fileTypes}</span>
|
|
809
811
|
</div>
|
|
810
812
|
<input
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageUploader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/ImageUploader/ImageUploader.svelte.ts"],"names":[],"mappings":"AAoBA,OAAO,gCAAgC,CAAC;AACxC,OAAO,sEAAsE,CAAC;
|
|
1
|
+
{"version":3,"file":"ImageUploader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/ImageUploader/ImageUploader.svelte.ts"],"names":[],"mappings":"AAoBA,OAAO,gCAAgC,CAAC;AACxC,OAAO,sEAAsE,CAAC;AAouB9E,QAAA,MAAM,aAAa;IAvqBf,6CAA6C;aACpC,MAAM,GAAG,MAAM,EAAE;IAC1B,qDAAqD;gBACzC,MAAM;IAClB,2BAA2B;iBACd,OAAO;IACpB,wBAAwB;;IAExB,mDAAmD;oBACnC,OAAO;IACvB,wDAAwD;;IAExD,gEAAgE;;IAEhE,oDAAoD;oBACpC,OAAO;IACvB,uCAAuC;kBACzB,MAAM;IACpB,0BAA0B;oBACV,MAAM,EAAE;IACxB,6BAA6B;iBAChB,MAAM;IACnB,wEAAwE;sBACtD,MAAM;IACxB,uCAAuC;iBAC1B,MAAM;IACnB;;sEAEkE;eACvD,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,IAAI;IAC/D,qCAAqC;eAC1B,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IAClC,8DAA8D;gBAClD,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI;IACtC,oFAAoF;uBACjE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;IAC/D,4EAA4E;gBAChE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;IAC7C,2DAA2D;eAChD,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI;IACrC,wBAAwB;YAChB,MAAM;IACd,qBAAqB;eACV,OAAO;IAClB,+BAA+B;YACvB,MAAM;IACd,oCAAoC;aAC3B,OAAO;;;;;;;;;;;MAAsB;gBAwnBiB,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
|