@getmicdrop/svelte-components 2.8.1 → 3.0.0
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/components/Alert/Alert.svelte +24 -12
- package/dist/components/Alert/Alert.svelte.d.ts +15 -45
- package/dist/components/Alert/Alert.svelte.d.ts.map +1 -1
- package/dist/components/Badges/Badge.svelte +53 -37
- package/dist/components/Badges/Badge.svelte.d.ts +60 -48
- package/dist/components/Badges/Badge.svelte.d.ts.map +1 -1
- package/dist/components/BottomSheet/BottomSheet.svelte +37 -20
- package/dist/components/BottomSheet/BottomSheet.svelte.d.ts +45 -47
- package/dist/components/BottomSheet/BottomSheet.svelte.d.ts.map +1 -1
- package/dist/components/Breadcrumb/Breadcrumb.svelte +22 -16
- package/dist/components/Breadcrumb/Breadcrumb.svelte.d.ts +50 -31
- package/dist/components/Breadcrumb/Breadcrumb.svelte.d.ts.map +1 -1
- package/dist/components/Button/Button.svelte +179 -134
- package/dist/components/Button/Button.svelte.d.ts +37 -78
- package/dist/components/Button/Button.svelte.d.ts.map +1 -1
- package/dist/components/Checkbox/Checkbox.svelte +71 -41
- package/dist/components/Checkbox/Checkbox.svelte.d.ts +34 -62
- package/dist/components/Checkbox/Checkbox.svelte.d.ts.map +1 -1
- package/dist/components/Drawer/Drawer.svelte +63 -46
- package/dist/components/Drawer/Drawer.svelte.d.ts +110 -54
- package/dist/components/Drawer/Drawer.svelte.d.ts.map +1 -1
- package/dist/components/Dropdown/Dropdown.svelte +203 -193
- package/dist/components/Dropdown/Dropdown.svelte.d.ts +44 -42
- package/dist/components/Dropdown/Dropdown.svelte.d.ts.map +1 -1
- package/dist/components/Dropdown/DropdownItem.svelte +124 -111
- package/dist/components/Dropdown/DropdownItem.svelte.d.ts +39 -43
- package/dist/components/Dropdown/DropdownItem.svelte.d.ts.map +1 -1
- package/dist/components/Dropdown/SelectDropdown.svelte +31 -25
- package/dist/components/Dropdown/SelectDropdown.svelte.d.ts +48 -29
- package/dist/components/Dropdown/SelectDropdown.svelte.d.ts.map +1 -1
- package/dist/components/Input/Input.svelte +141 -98
- package/dist/components/Input/Input.svelte.d.ts +94 -110
- package/dist/components/Input/Input.svelte.d.ts.map +1 -1
- package/dist/components/Input/MultiSelect.svelte +58 -39
- package/dist/components/Input/MultiSelect.svelte.d.ts +101 -40
- package/dist/components/Input/MultiSelect.svelte.d.ts.map +1 -1
- package/dist/components/Input/OTPInput.svelte +30 -17
- package/dist/components/Input/OTPInput.svelte.d.ts +45 -36
- package/dist/components/Input/OTPInput.svelte.d.ts.map +1 -1
- package/dist/components/Input/Search.svelte +196 -173
- package/dist/components/Input/Search.svelte.d.ts +36 -65
- package/dist/components/Input/Search.svelte.d.ts.map +1 -1
- package/dist/components/Input/Select.svelte +49 -35
- package/dist/components/Input/Select.svelte.d.ts +44 -46
- package/dist/components/Input/Select.svelte.d.ts.map +1 -1
- package/dist/components/Input/Textarea.svelte +187 -160
- package/dist/components/Input/Textarea.svelte.d.ts +56 -66
- package/dist/components/Input/Textarea.svelte.d.ts.map +1 -1
- package/dist/components/Modal/ConfirmationModal.svelte +103 -78
- package/dist/components/Modal/ConfirmationModal.svelte.d.ts +132 -47
- package/dist/components/Modal/ConfirmationModal.svelte.d.ts.map +1 -1
- package/dist/components/Modal/InputModal.svelte +157 -132
- package/dist/components/Modal/InputModal.svelte.d.ts +181 -48
- package/dist/components/Modal/InputModal.svelte.d.ts.map +1 -1
- package/dist/components/Modal/Modal.svelte +77 -45
- package/dist/components/Modal/Modal.svelte.d.ts +56 -41
- package/dist/components/Modal/Modal.svelte.d.ts.map +1 -1
- package/dist/components/Modal/ModalTestWrapper.svelte.d.ts +2 -2
- package/dist/components/Modal/StatusModal.svelte +149 -122
- package/dist/components/Modal/StatusModal.svelte.d.ts +126 -47
- package/dist/components/Modal/StatusModal.svelte.d.ts.map +1 -1
- package/dist/components/OrderSummary/OrderSummary.svelte +68 -59
- package/dist/components/OrderSummary/OrderSummary.svelte.d.ts +72 -60
- package/dist/components/OrderSummary/OrderSummary.svelte.d.ts.map +1 -1
- package/dist/components/Pagination/Pagination.svelte +49 -39
- package/dist/components/Pagination/Pagination.svelte.d.ts +89 -36
- package/dist/components/Pagination/Pagination.svelte.d.ts.map +1 -1
- package/dist/components/PublicCard/PublicCard.svelte +22 -12
- package/dist/components/PublicCard/PublicCard.svelte.d.ts +14 -32
- package/dist/components/PublicCard/PublicCard.svelte.d.ts.map +1 -1
- package/dist/components/Radio/Radio.svelte +35 -21
- package/dist/components/Radio/Radio.svelte.d.ts +22 -51
- package/dist/components/Radio/Radio.svelte.d.ts.map +1 -1
- package/dist/components/ShowCard/ShowCard.svelte +47 -40
- package/dist/components/ShowCard/ShowCard.svelte.d.ts +30 -36
- package/dist/components/ShowCard/ShowCard.svelte.d.ts.map +1 -1
- package/dist/components/ShowTimeCard/ShowTimeCard.svelte +23 -14
- package/dist/components/ShowTimeCard/ShowTimeCard.svelte.d.ts +20 -34
- package/dist/components/ShowTimeCard/ShowTimeCard.svelte.d.ts.map +1 -1
- package/dist/components/Toggle.spec.js +21 -52
- package/dist/components/Toggle.svelte +11 -9
- package/dist/components/Toggle.svelte.d.ts +17 -30
- package/dist/components/Toggle.svelte.d.ts.map +1 -1
- package/dist/components/pages/settings/tabs/CustomImageDropzone.svelte +45 -32
- package/dist/components/pages/settings/tabs/CustomImageDropzone.svelte.d.ts +22 -36
- package/dist/components/pages/settings/tabs/CustomImageDropzone.svelte.d.ts.map +1 -1
- package/dist/components/pages/shows/TabNavigation.svelte +16 -8
- package/dist/components/pages/shows/TabNavigation.svelte.d.ts +20 -30
- package/dist/components/pages/shows/TabNavigation.svelte.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,30 +1,40 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import { Alert } from "flowbite-svelte";
|
|
3
|
-
import { createEventDispatcher } from "svelte";
|
|
4
3
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
/**
|
|
5
|
+
* @typedef {Object} Props
|
|
6
|
+
* @property {string} [title]
|
|
7
|
+
* @property {string} [message]
|
|
8
|
+
* @property {'info'|'success'|'warning'|'danger'} [type]
|
|
9
|
+
* @property {Function} [onClose]
|
|
10
|
+
* @property {import('svelte').Snippet} [children]
|
|
11
|
+
*/
|
|
9
12
|
|
|
10
|
-
|
|
13
|
+
/** @type {Props} */
|
|
14
|
+
let {
|
|
15
|
+
title = "",
|
|
16
|
+
message = "",
|
|
17
|
+
type = "info",
|
|
18
|
+
onClose = undefined,
|
|
19
|
+
children
|
|
20
|
+
} = $props();
|
|
11
21
|
|
|
12
22
|
// Map legacy 'type' to Flowbite 'color'
|
|
13
|
-
|
|
23
|
+
let color = $derived(
|
|
14
24
|
{
|
|
15
25
|
info: "blue",
|
|
16
26
|
success: "green",
|
|
17
27
|
warning: "yellow",
|
|
18
28
|
danger: "red",
|
|
19
|
-
}[type] || "blue"
|
|
29
|
+
}[type] || "blue"
|
|
30
|
+
);
|
|
20
31
|
|
|
21
32
|
function handleClose() {
|
|
22
|
-
|
|
23
|
-
dispatch("close");
|
|
33
|
+
onClose?.();
|
|
24
34
|
}
|
|
25
35
|
</script>
|
|
26
36
|
|
|
27
|
-
<Alert {color} dismissable={!!onClose}
|
|
37
|
+
<Alert {color} dismissable={!!onClose} onclose={handleClose} class="mb-4 custom-alert">
|
|
28
38
|
{#if title}
|
|
29
39
|
<span class="font-medium">{title}</span>
|
|
30
40
|
{/if}
|
|
@@ -33,7 +43,9 @@
|
|
|
33
43
|
{message}
|
|
34
44
|
</div>
|
|
35
45
|
{/if}
|
|
36
|
-
|
|
46
|
+
{#if children}
|
|
47
|
+
{@render children()}
|
|
48
|
+
{/if}
|
|
37
49
|
</Alert>
|
|
38
50
|
|
|
39
51
|
<style>
|
|
@@ -1,51 +1,21 @@
|
|
|
1
1
|
export default Alert;
|
|
2
|
-
type Alert =
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
type?: string | undefined;
|
|
6
|
-
onClose?: any;
|
|
7
|
-
}, {
|
|
8
|
-
default: {};
|
|
9
|
-
}>, {
|
|
10
|
-
close: CustomEvent<any>;
|
|
11
|
-
} & {
|
|
12
|
-
[evt: string]: CustomEvent<any>;
|
|
13
|
-
}, {
|
|
14
|
-
default: {};
|
|
15
|
-
}> & {
|
|
16
|
-
$$bindings?: string | undefined;
|
|
2
|
+
type Alert = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Props>): void;
|
|
17
5
|
};
|
|
18
|
-
declare const Alert:
|
|
6
|
+
declare const Alert: import("svelte").Component<{
|
|
19
7
|
title?: string | undefined;
|
|
20
8
|
message?: string | undefined;
|
|
21
|
-
type?:
|
|
22
|
-
onClose?:
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}>, {
|
|
26
|
-
close: CustomEvent<any>;
|
|
27
|
-
} & {
|
|
28
|
-
[evt: string]: CustomEvent<any>;
|
|
29
|
-
}, {
|
|
30
|
-
default: {};
|
|
31
|
-
}, {}, string>;
|
|
9
|
+
type?: "info" | "success" | "warning" | "danger" | undefined;
|
|
10
|
+
onClose?: Function | undefined;
|
|
11
|
+
children?: import("svelte").Snippet<[]> | undefined;
|
|
12
|
+
}, {}, "">;
|
|
32
13
|
import { Alert } from "flowbite-svelte";
|
|
33
|
-
type
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
$$bindings?: Bindings;
|
|
41
|
-
} & Exports;
|
|
42
|
-
(internal: unknown, props: Props & {
|
|
43
|
-
$$events?: Events;
|
|
44
|
-
$$slots?: Slots;
|
|
45
|
-
}): Exports & {
|
|
46
|
-
$set?: any;
|
|
47
|
-
$on?: any;
|
|
48
|
-
};
|
|
49
|
-
z_$$bindings?: Bindings;
|
|
50
|
-
}
|
|
14
|
+
type Props = {
|
|
15
|
+
title?: string | undefined;
|
|
16
|
+
message?: string | undefined;
|
|
17
|
+
type?: "info" | "success" | "warning" | "danger" | undefined;
|
|
18
|
+
onClose?: Function | undefined;
|
|
19
|
+
children?: import("svelte").Snippet<[]> | undefined;
|
|
20
|
+
};
|
|
51
21
|
//# sourceMappingURL=Alert.svelte.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Alert/Alert.svelte.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Alert/Alert.svelte.js"],"names":[],"mappings":";;;;;AA2DA;;;;;;WAAoD;sBAxD9B,iBAAiB"}
|
|
@@ -1,27 +1,39 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
import { createEventDispatcher } from "svelte";
|
|
3
2
|
import { classNames } from "./../../utils/utils.js";
|
|
4
3
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
/** @type {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
4
|
+
/**
|
|
5
|
+
* @typedef {Object} Props
|
|
6
|
+
* @property {'xs'|'small'|'medium'|'large'} [size]
|
|
7
|
+
* @property {string} [className]
|
|
8
|
+
* @property {string|number} [variant] - Semantic variant or tier number (1-5)
|
|
9
|
+
* @property {string|null} [event] - Event display type: "square" or "circle"
|
|
10
|
+
* @property {string|null} [textColor] - Custom text color (hex)
|
|
11
|
+
* @property {string|null} [bgColor] - Custom background color (hex or rgba)
|
|
12
|
+
* @property {boolean} [showDot] - Show status dot before text (uses variant color)
|
|
13
|
+
* @property {boolean} [pill] - Pill mode for counts/notifications (circular, minimal padding)
|
|
14
|
+
* @property {'rounded'|'pill'} [shape] - Border radius style - rounded-rect or full pill
|
|
15
|
+
* @property {Function} [onclick]
|
|
16
|
+
* @property {import('svelte').Snippet} [leftIcon]
|
|
17
|
+
* @property {import('svelte').Snippet} [children]
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
/** @type {Props} */
|
|
21
|
+
let {
|
|
22
|
+
size = "medium",
|
|
23
|
+
className = "",
|
|
24
|
+
variant = "neutral",
|
|
25
|
+
event = null,
|
|
26
|
+
textColor = null,
|
|
27
|
+
bgColor = null,
|
|
28
|
+
showDot = false,
|
|
29
|
+
pill = false,
|
|
30
|
+
shape = "rounded",
|
|
31
|
+
onclick,
|
|
32
|
+
leftIcon,
|
|
33
|
+
children
|
|
34
|
+
} = $props();
|
|
35
|
+
|
|
36
|
+
let sizeClass = $derived((() => {
|
|
25
37
|
switch (size) {
|
|
26
38
|
case "xs":
|
|
27
39
|
return "badge-xs";
|
|
@@ -34,12 +46,12 @@
|
|
|
34
46
|
default:
|
|
35
47
|
return "badge-md";
|
|
36
48
|
}
|
|
37
|
-
})();
|
|
49
|
+
})());
|
|
38
50
|
|
|
39
|
-
|
|
51
|
+
let shapeClass = $derived(pill ? "badge-pill" : (shape === "pill" ? "badge-shape-pill" : "badge-shape-rounded"));
|
|
40
52
|
|
|
41
53
|
// Handle tier numbers (1-5) as variants
|
|
42
|
-
|
|
54
|
+
let normalizedVariant = $derived((() => {
|
|
43
55
|
if (typeof variant === "number" || !isNaN(Number(variant))) {
|
|
44
56
|
const tierNum = Number(variant);
|
|
45
57
|
switch (tierNum) {
|
|
@@ -52,9 +64,9 @@
|
|
|
52
64
|
}
|
|
53
65
|
}
|
|
54
66
|
return String(variant).toLowerCase();
|
|
55
|
-
})();
|
|
67
|
+
})());
|
|
56
68
|
|
|
57
|
-
|
|
69
|
+
let variantClass = $derived((() => {
|
|
58
70
|
switch (normalizedVariant) {
|
|
59
71
|
// Role variants
|
|
60
72
|
case "host":
|
|
@@ -112,9 +124,9 @@
|
|
|
112
124
|
default:
|
|
113
125
|
return "badge-neutral";
|
|
114
126
|
}
|
|
115
|
-
})();
|
|
127
|
+
})());
|
|
116
128
|
|
|
117
|
-
|
|
129
|
+
let eventClass = $derived((() => {
|
|
118
130
|
if (!event) return "";
|
|
119
131
|
switch (event) {
|
|
120
132
|
case "square":
|
|
@@ -124,19 +136,19 @@
|
|
|
124
136
|
default:
|
|
125
137
|
return "";
|
|
126
138
|
}
|
|
127
|
-
})();
|
|
139
|
+
})());
|
|
128
140
|
|
|
129
141
|
// Custom style for text/bg color overrides
|
|
130
|
-
|
|
142
|
+
let customStyle = $derived((() => {
|
|
131
143
|
const styles = [];
|
|
132
144
|
if (textColor) styles.push(`color: ${textColor}`);
|
|
133
145
|
if (bgColor) styles.push(`background-color: ${bgColor}`);
|
|
134
146
|
return styles.length > 0 ? styles.join("; ") : null;
|
|
135
|
-
})();
|
|
147
|
+
})());
|
|
136
148
|
</script>
|
|
137
149
|
|
|
138
|
-
<!-- svelte-ignore
|
|
139
|
-
<!-- svelte-ignore
|
|
150
|
+
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
151
|
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
140
152
|
<div
|
|
141
153
|
class={classNames(
|
|
142
154
|
"badge",
|
|
@@ -147,19 +159,23 @@
|
|
|
147
159
|
className
|
|
148
160
|
)}
|
|
149
161
|
style={customStyle}
|
|
150
|
-
|
|
162
|
+
onclick={(e) => onclick?.(e)}
|
|
151
163
|
>
|
|
152
164
|
{#if showDot}
|
|
153
165
|
<span class="badge-dot"></span>
|
|
154
166
|
{/if}
|
|
155
|
-
|
|
156
|
-
|
|
167
|
+
{#if leftIcon}
|
|
168
|
+
{@render leftIcon()}
|
|
169
|
+
{/if}
|
|
170
|
+
{#if children}
|
|
171
|
+
{@render children()}
|
|
172
|
+
{/if}
|
|
157
173
|
</div>
|
|
158
174
|
|
|
159
175
|
<!--
|
|
160
176
|
Usage: <Badge variant="host">Host</Badge>
|
|
161
177
|
|
|
162
|
-
With icon: <Badge variant="success"
|
|
178
|
+
With icon: <Badge variant="success">{#snippet leftIcon}<CheckIcon />{/snippet}Verified</Badge>
|
|
163
179
|
With dot: <Badge variant="success" showDot>On Sale</Badge>
|
|
164
180
|
|
|
165
181
|
Role variants: host, headliner, feature, special-guest, opener, guest, teacher, assistant
|
|
@@ -1,64 +1,76 @@
|
|
|
1
1
|
export default Badge;
|
|
2
|
-
type Badge =
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
type Badge = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Props>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const Badge: import("svelte").Component<{
|
|
7
|
+
size?: "xs" | "small" | "medium" | "large" | undefined;
|
|
5
8
|
className?: string | undefined;
|
|
9
|
+
/**
|
|
10
|
+
* - Semantic variant or tier number (1-5)
|
|
11
|
+
*/
|
|
6
12
|
variant?: string | number | undefined;
|
|
13
|
+
/**
|
|
14
|
+
* - Event display type: "square" or "circle"
|
|
15
|
+
*/
|
|
7
16
|
event?: string | null | undefined;
|
|
17
|
+
/**
|
|
18
|
+
* - Custom text color (hex)
|
|
19
|
+
*/
|
|
8
20
|
textColor?: string | null | undefined;
|
|
21
|
+
/**
|
|
22
|
+
* - Custom background color (hex or rgba)
|
|
23
|
+
*/
|
|
9
24
|
bgColor?: string | null | undefined;
|
|
25
|
+
/**
|
|
26
|
+
* - Show status dot before text (uses variant color)
|
|
27
|
+
*/
|
|
10
28
|
showDot?: boolean | undefined;
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
default: {};
|
|
15
|
-
}>, {
|
|
16
|
-
click: CustomEvent<any>;
|
|
17
|
-
} & {
|
|
18
|
-
[evt: string]: CustomEvent<any>;
|
|
19
|
-
}, {
|
|
20
|
-
leftIcon: {};
|
|
21
|
-
default: {};
|
|
22
|
-
}> & {
|
|
23
|
-
$$bindings?: string | undefined;
|
|
24
|
-
};
|
|
25
|
-
declare const Badge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
|
|
29
|
+
/**
|
|
30
|
+
* - Pill mode for counts/notifications (circular, minimal padding)
|
|
31
|
+
*/
|
|
26
32
|
pill?: boolean | undefined;
|
|
27
|
-
|
|
33
|
+
/**
|
|
34
|
+
* - Border radius style - rounded-rect or full pill
|
|
35
|
+
*/
|
|
36
|
+
shape?: "rounded" | "pill" | undefined;
|
|
37
|
+
onclick?: Function | undefined;
|
|
38
|
+
leftIcon?: import("svelte").Snippet<[]> | undefined;
|
|
39
|
+
children?: import("svelte").Snippet<[]> | undefined;
|
|
40
|
+
}, {}, "">;
|
|
41
|
+
type Props = {
|
|
42
|
+
size?: "xs" | "small" | "medium" | "large" | undefined;
|
|
28
43
|
className?: string | undefined;
|
|
44
|
+
/**
|
|
45
|
+
* - Semantic variant or tier number (1-5)
|
|
46
|
+
*/
|
|
29
47
|
variant?: string | number | undefined;
|
|
48
|
+
/**
|
|
49
|
+
* - Event display type: "square" or "circle"
|
|
50
|
+
*/
|
|
30
51
|
event?: string | null | undefined;
|
|
52
|
+
/**
|
|
53
|
+
* - Custom text color (hex)
|
|
54
|
+
*/
|
|
31
55
|
textColor?: string | null | undefined;
|
|
56
|
+
/**
|
|
57
|
+
* - Custom background color (hex or rgba)
|
|
58
|
+
*/
|
|
32
59
|
bgColor?: string | null | undefined;
|
|
60
|
+
/**
|
|
61
|
+
* - Show status dot before text (uses variant color)
|
|
62
|
+
*/
|
|
33
63
|
showDot?: boolean | undefined;
|
|
64
|
+
/**
|
|
65
|
+
* - Pill mode for counts/notifications (circular, minimal padding)
|
|
66
|
+
*/
|
|
67
|
+
pill?: boolean | undefined;
|
|
68
|
+
/**
|
|
69
|
+
* - Border radius style - rounded-rect or full pill
|
|
70
|
+
*/
|
|
34
71
|
shape?: "rounded" | "pill" | undefined;
|
|
35
|
-
|
|
36
|
-
leftIcon
|
|
37
|
-
|
|
38
|
-
}
|
|
39
|
-
click: CustomEvent<any>;
|
|
40
|
-
} & {
|
|
41
|
-
[evt: string]: CustomEvent<any>;
|
|
42
|
-
}, {
|
|
43
|
-
leftIcon: {};
|
|
44
|
-
default: {};
|
|
45
|
-
}, {}, string>;
|
|
46
|
-
type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
|
|
47
|
-
default: any;
|
|
48
|
-
} ? Props extends Record<string, never> ? any : {
|
|
49
|
-
children?: any;
|
|
50
|
-
} : {});
|
|
51
|
-
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
52
|
-
new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
|
|
53
|
-
$$bindings?: Bindings;
|
|
54
|
-
} & Exports;
|
|
55
|
-
(internal: unknown, props: Props & {
|
|
56
|
-
$$events?: Events;
|
|
57
|
-
$$slots?: Slots;
|
|
58
|
-
}): Exports & {
|
|
59
|
-
$set?: any;
|
|
60
|
-
$on?: any;
|
|
61
|
-
};
|
|
62
|
-
z_$$bindings?: Bindings;
|
|
63
|
-
}
|
|
72
|
+
onclick?: Function | undefined;
|
|
73
|
+
leftIcon?: import("svelte").Snippet<[]> | undefined;
|
|
74
|
+
children?: import("svelte").Snippet<[]> | undefined;
|
|
75
|
+
};
|
|
64
76
|
//# sourceMappingURL=Badge.svelte.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Badges/Badge.svelte.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Badges/Badge.svelte.js"],"names":[],"mappings":";;;;;AAqLA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAAoD"}
|
|
@@ -1,15 +1,28 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
import {
|
|
2
|
+
import { onDestroy } from "svelte";
|
|
3
3
|
import { fly, fade } from "svelte/transition";
|
|
4
4
|
import { cubicOut } from "svelte/easing";
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
/**
|
|
7
|
+
* @typedef {Object} Props
|
|
8
|
+
* @property {boolean} [show] - Whether the sheet is visible
|
|
9
|
+
* @property {string} [title] - Optional title
|
|
10
|
+
* @property {Function} [onclose] - Close callback
|
|
11
|
+
* @property {import('svelte').Snippet} [actions] - Actions snippet
|
|
12
|
+
* @property {import('svelte').Snippet} [children] - Default content
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
/** @type {Props} */
|
|
16
|
+
let {
|
|
17
|
+
show = $bindable(false),
|
|
18
|
+
title = "",
|
|
19
|
+
onclose,
|
|
20
|
+
actions,
|
|
21
|
+
children
|
|
22
|
+
} = $props();
|
|
10
23
|
|
|
11
24
|
function close() {
|
|
12
|
-
|
|
25
|
+
onclose?.();
|
|
13
26
|
}
|
|
14
27
|
|
|
15
28
|
function handleBackdropClick(e) {
|
|
@@ -25,13 +38,15 @@
|
|
|
25
38
|
}
|
|
26
39
|
|
|
27
40
|
// Lock body scroll when sheet is open
|
|
28
|
-
|
|
29
|
-
if (
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
41
|
+
$effect(() => {
|
|
42
|
+
if (typeof document !== "undefined") {
|
|
43
|
+
if (show) {
|
|
44
|
+
document.body.style.overflow = "hidden";
|
|
45
|
+
} else {
|
|
46
|
+
document.body.style.overflow = "";
|
|
47
|
+
}
|
|
33
48
|
}
|
|
34
|
-
}
|
|
49
|
+
});
|
|
35
50
|
|
|
36
51
|
onDestroy(() => {
|
|
37
52
|
if (typeof document !== "undefined") {
|
|
@@ -40,19 +55,19 @@
|
|
|
40
55
|
});
|
|
41
56
|
</script>
|
|
42
57
|
|
|
43
|
-
<svelte:window
|
|
58
|
+
<svelte:window onkeydown={handleKeydown} />
|
|
44
59
|
|
|
45
60
|
{#if show}
|
|
46
|
-
<!-- svelte-ignore
|
|
47
|
-
<!-- svelte-ignore
|
|
61
|
+
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
62
|
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
48
63
|
<div
|
|
49
64
|
class="bottom-sheet-backdrop"
|
|
50
|
-
|
|
65
|
+
onclick={handleBackdropClick}
|
|
51
66
|
transition:fade={{ duration: 200 }}
|
|
52
67
|
>
|
|
53
68
|
<div
|
|
54
69
|
class="bottom-sheet"
|
|
55
|
-
|
|
70
|
+
onclick={(e) => e.stopPropagation()}
|
|
56
71
|
transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
|
|
57
72
|
>
|
|
58
73
|
<!-- Handle bar for drag indication -->
|
|
@@ -69,13 +84,15 @@
|
|
|
69
84
|
|
|
70
85
|
<!-- Content slot -->
|
|
71
86
|
<div class="bottom-sheet__content">
|
|
72
|
-
|
|
87
|
+
{#if children}
|
|
88
|
+
{@render children()}
|
|
89
|
+
{/if}
|
|
73
90
|
</div>
|
|
74
91
|
|
|
75
92
|
<!-- Actions slot (optional) -->
|
|
76
|
-
{#if
|
|
93
|
+
{#if actions}
|
|
77
94
|
<div class="bottom-sheet__actions">
|
|
78
|
-
|
|
95
|
+
{@render actions()}
|
|
79
96
|
</div>
|
|
80
97
|
{/if}
|
|
81
98
|
</div>
|
|
@@ -1,52 +1,50 @@
|
|
|
1
1
|
export default BottomSheet;
|
|
2
|
-
type BottomSheet =
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
}, {
|
|
6
|
-
default: {};
|
|
7
|
-
actions: {};
|
|
8
|
-
}>, {
|
|
9
|
-
click: PointerEvent;
|
|
10
|
-
close: CustomEvent<any>;
|
|
11
|
-
} & {
|
|
12
|
-
[evt: string]: CustomEvent<any>;
|
|
13
|
-
}, {
|
|
14
|
-
default: {};
|
|
15
|
-
actions: {};
|
|
16
|
-
}> & {
|
|
17
|
-
$$bindings?: string | undefined;
|
|
2
|
+
type BottomSheet = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Props>): void;
|
|
18
5
|
};
|
|
19
|
-
declare const BottomSheet:
|
|
6
|
+
declare const BottomSheet: import("svelte").Component<{
|
|
7
|
+
/**
|
|
8
|
+
* - Whether the sheet is visible
|
|
9
|
+
*/
|
|
10
|
+
show?: boolean | undefined;
|
|
11
|
+
/**
|
|
12
|
+
* - Optional title
|
|
13
|
+
*/
|
|
20
14
|
title?: string | undefined;
|
|
15
|
+
/**
|
|
16
|
+
* - Close callback
|
|
17
|
+
*/
|
|
18
|
+
onclose?: Function | undefined;
|
|
19
|
+
/**
|
|
20
|
+
* - Actions snippet
|
|
21
|
+
*/
|
|
22
|
+
actions?: import("svelte").Snippet<[]> | undefined;
|
|
23
|
+
/**
|
|
24
|
+
* - Default content
|
|
25
|
+
*/
|
|
26
|
+
children?: import("svelte").Snippet<[]> | undefined;
|
|
27
|
+
}, {}, "show">;
|
|
28
|
+
type Props = {
|
|
29
|
+
/**
|
|
30
|
+
* - Whether the sheet is visible
|
|
31
|
+
*/
|
|
21
32
|
show?: boolean | undefined;
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
children?:
|
|
38
|
-
}
|
|
39
|
-
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
40
|
-
new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
|
|
41
|
-
$$bindings?: Bindings;
|
|
42
|
-
} & Exports;
|
|
43
|
-
(internal: unknown, props: Props & {
|
|
44
|
-
$$events?: Events;
|
|
45
|
-
$$slots?: Slots;
|
|
46
|
-
}): Exports & {
|
|
47
|
-
$set?: any;
|
|
48
|
-
$on?: any;
|
|
49
|
-
};
|
|
50
|
-
z_$$bindings?: Bindings;
|
|
51
|
-
}
|
|
33
|
+
/**
|
|
34
|
+
* - Optional title
|
|
35
|
+
*/
|
|
36
|
+
title?: string | undefined;
|
|
37
|
+
/**
|
|
38
|
+
* - Close callback
|
|
39
|
+
*/
|
|
40
|
+
onclose?: Function | undefined;
|
|
41
|
+
/**
|
|
42
|
+
* - Actions snippet
|
|
43
|
+
*/
|
|
44
|
+
actions?: import("svelte").Snippet<[]> | undefined;
|
|
45
|
+
/**
|
|
46
|
+
* - Default content
|
|
47
|
+
*/
|
|
48
|
+
children?: import("svelte").Snippet<[]> | undefined;
|
|
49
|
+
};
|
|
52
50
|
//# sourceMappingURL=BottomSheet.svelte.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/BottomSheet/BottomSheet.svelte.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BottomSheet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/BottomSheet/BottomSheet.svelte.js"],"names":[],"mappings":";;;;;AAwGA;;;;;;;;;;;;;;;;;;;;;eAA0D"}
|