@marianmeres/stuic 2.1.10 → 2.1.12
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/AlertConfirmPrompt/AlertConfirmPrompt.svelte +50 -2
- package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte.d.ts +12 -0
- package/dist/components/Notifications/Notifications.svelte +16 -9
- package/dist/components/Notifications/Notifications.svelte.d.ts +3 -0
- package/package.json +1 -1
|
@@ -15,9 +15,42 @@
|
|
|
15
15
|
forceAsHtml?: boolean;
|
|
16
16
|
class?: string;
|
|
17
17
|
classModalInnerBox?: string;
|
|
18
|
+
//
|
|
19
|
+
classWrap?: string;
|
|
20
|
+
classIconBox?: string;
|
|
21
|
+
classContentBox?: string;
|
|
22
|
+
classTitle?: string;
|
|
23
|
+
classContent?: string;
|
|
24
|
+
classInputBox?: string;
|
|
25
|
+
classInput?: string;
|
|
26
|
+
classMenu?: string;
|
|
27
|
+
classMenuLi?: string;
|
|
28
|
+
classButton?: string;
|
|
29
|
+
classSpinnerBox?: string;
|
|
30
|
+
defaultIcons?: Partial<
|
|
31
|
+
Record<"info" | "success" | "warn" | "error" | "spinner", () => string | undefined>
|
|
32
|
+
>;
|
|
18
33
|
}
|
|
19
34
|
|
|
20
|
-
let {
|
|
35
|
+
let {
|
|
36
|
+
acp,
|
|
37
|
+
forceAsHtml,
|
|
38
|
+
class: classProp,
|
|
39
|
+
classModalInnerBox,
|
|
40
|
+
//
|
|
41
|
+
classWrap,
|
|
42
|
+
classIconBox,
|
|
43
|
+
classContentBox,
|
|
44
|
+
classTitle,
|
|
45
|
+
classContent,
|
|
46
|
+
classInputBox,
|
|
47
|
+
classInput,
|
|
48
|
+
classMenu,
|
|
49
|
+
classMenuLi,
|
|
50
|
+
classButton,
|
|
51
|
+
classSpinnerBox,
|
|
52
|
+
defaultIcons,
|
|
53
|
+
}: Props = $props();
|
|
21
54
|
|
|
22
55
|
let modal = $state<ModalDialog>();
|
|
23
56
|
|
|
@@ -55,6 +88,21 @@
|
|
|
55
88
|
classProp
|
|
56
89
|
)}
|
|
57
90
|
>
|
|
58
|
-
<Current
|
|
91
|
+
<Current
|
|
92
|
+
bind:isPending
|
|
93
|
+
{acp}
|
|
94
|
+
{classWrap}
|
|
95
|
+
{classIconBox}
|
|
96
|
+
{classContentBox}
|
|
97
|
+
{classTitle}
|
|
98
|
+
{classContent}
|
|
99
|
+
{classInputBox}
|
|
100
|
+
{classInput}
|
|
101
|
+
{classMenu}
|
|
102
|
+
{classMenuLi}
|
|
103
|
+
{classButton}
|
|
104
|
+
{classSpinnerBox}
|
|
105
|
+
{defaultIcons}
|
|
106
|
+
/>
|
|
59
107
|
</ModalDialog>
|
|
60
108
|
{/if}
|
|
@@ -4,6 +4,18 @@ interface Props {
|
|
|
4
4
|
forceAsHtml?: boolean;
|
|
5
5
|
class?: string;
|
|
6
6
|
classModalInnerBox?: string;
|
|
7
|
+
classWrap?: string;
|
|
8
|
+
classIconBox?: string;
|
|
9
|
+
classContentBox?: string;
|
|
10
|
+
classTitle?: string;
|
|
11
|
+
classContent?: string;
|
|
12
|
+
classInputBox?: string;
|
|
13
|
+
classInput?: string;
|
|
14
|
+
classMenu?: string;
|
|
15
|
+
classMenuLi?: string;
|
|
16
|
+
classButton?: string;
|
|
17
|
+
classSpinnerBox?: string;
|
|
18
|
+
defaultIcons?: Partial<Record<"info" | "success" | "warn" | "error" | "spinner", () => string | undefined>>;
|
|
7
19
|
}
|
|
8
20
|
declare const AlertConfirmPrompt: import("svelte").Component<Props, {}, "">;
|
|
9
21
|
type AlertConfirmPrompt = ReturnType<typeof AlertConfirmPrompt>;
|
|
@@ -55,6 +55,7 @@
|
|
|
55
55
|
themeWarn?: TW_COLORS;
|
|
56
56
|
themeSuccess?: TW_COLORS;
|
|
57
57
|
noTheme?: boolean;
|
|
58
|
+
noIcons?: boolean;
|
|
58
59
|
//
|
|
59
60
|
classWrapY?: string;
|
|
60
61
|
classWrapX?: string;
|
|
@@ -74,6 +75,8 @@
|
|
|
74
75
|
//
|
|
75
76
|
noProgress?: boolean;
|
|
76
77
|
noXButton?: boolean;
|
|
78
|
+
//
|
|
79
|
+
iconFns?: Partial<Record<keyof typeof notificationsDefaultIcons, CallableFunction>>;
|
|
77
80
|
}
|
|
78
81
|
|
|
79
82
|
let {
|
|
@@ -91,6 +94,7 @@
|
|
|
91
94
|
themeSuccess = "green",
|
|
92
95
|
// use truthy `noTheme` if manual css-only var customization is needed
|
|
93
96
|
noTheme,
|
|
97
|
+
noIcons,
|
|
94
98
|
//
|
|
95
99
|
classWrapY,
|
|
96
100
|
classWrapX,
|
|
@@ -109,6 +113,7 @@
|
|
|
109
113
|
duration = 200,
|
|
110
114
|
noProgress,
|
|
111
115
|
noXButton,
|
|
116
|
+
iconFns = {},
|
|
112
117
|
}: Props = $props();
|
|
113
118
|
|
|
114
119
|
let { x, y, xMobile, yMobile } = $derived.by(() => {
|
|
@@ -124,7 +129,9 @@
|
|
|
124
129
|
return { Cmp: null, props: null };
|
|
125
130
|
};
|
|
126
131
|
|
|
127
|
-
|
|
132
|
+
let _iconFns = $derived({ ...iconFns, ...notificationsDefaultIcons });
|
|
133
|
+
|
|
134
|
+
const maybeIcon = (n: Notification) => n.iconFn ?? _iconFns?.[n.type];
|
|
128
135
|
|
|
129
136
|
const _classWrapX = `
|
|
130
137
|
fixed z-50 flex flex-row inset-0
|
|
@@ -154,7 +161,7 @@
|
|
|
154
161
|
bg-neutral-950 text-neutral-50`;
|
|
155
162
|
|
|
156
163
|
const _classNotifIcon = `
|
|
157
|
-
flex items-
|
|
164
|
+
flex items-center justify-center
|
|
158
165
|
pt-4 pr-0 pb-4 pl-4
|
|
159
166
|
text-neutral-200`;
|
|
160
167
|
|
|
@@ -188,13 +195,13 @@
|
|
|
188
195
|
warn: themeWarn,
|
|
189
196
|
}[type] || "info";
|
|
190
197
|
return [
|
|
191
|
-
`--color-notif-bg: var(--color-${theme}-700);`,
|
|
192
|
-
`--color-notif-text: var(--color-${theme}-50);`,
|
|
193
|
-
`--color-notif-border: var(--color-${theme}-800);`,
|
|
198
|
+
`--color-notif-bg: var(--color-bg-${type}, var(--color-${theme}-700));`,
|
|
199
|
+
`--color-notif-text: var(--color-text-${type}, var(--color-${theme}-50));`,
|
|
200
|
+
`--color-notif-border: var(--color-border-${type}, var(--color-${theme}-800));`,
|
|
194
201
|
//
|
|
195
|
-
`--color-notif-bg-dark: var(--color-${theme}-800);`,
|
|
196
|
-
`--color-notif-text-dark: var(--color-${theme}-200);`,
|
|
197
|
-
`--color-notif-border-dark: var(--color-${theme}-700);`,
|
|
202
|
+
`--color-notif-bg-dark: var(--color-bg-dark-${type}, var(--color-${theme}-800));`,
|
|
203
|
+
`--color-notif-text-dark: var(--color-text-dark-${type}, var(--color-${theme}-200));`,
|
|
204
|
+
`--color-notif-border-dark: var(--color-border-dark-${type}, var(--color-${theme}-700));`,
|
|
198
205
|
].join("");
|
|
199
206
|
};
|
|
200
207
|
</script>
|
|
@@ -238,7 +245,7 @@
|
|
|
238
245
|
{n.count}
|
|
239
246
|
</div>
|
|
240
247
|
{/if}
|
|
241
|
-
{#if typeof iconFn === "function"}
|
|
248
|
+
{#if !noIcons && typeof iconFn === "function"}
|
|
242
249
|
<div class={twMerge("icon", _classNotifIcon, classNotifIcon)}>
|
|
243
250
|
{@html iconFn()}
|
|
244
251
|
</div>
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { TW_COLORS } from "../../types.js";
|
|
2
|
+
import { notificationsDefaultIcons } from "./notifications-icons.js";
|
|
2
3
|
import "./index.css";
|
|
3
4
|
import type { NotificationsStack } from "./notifications-stack.svelte.js";
|
|
4
5
|
declare const Notifications: import("svelte").Component<{
|
|
@@ -12,6 +13,7 @@ declare const Notifications: import("svelte").Component<{
|
|
|
12
13
|
themeWarn?: TW_COLORS;
|
|
13
14
|
themeSuccess?: TW_COLORS;
|
|
14
15
|
noTheme?: boolean;
|
|
16
|
+
noIcons?: boolean;
|
|
15
17
|
classWrapY?: string;
|
|
16
18
|
classWrapX?: string;
|
|
17
19
|
class?: string;
|
|
@@ -27,6 +29,7 @@ declare const Notifications: import("svelte").Component<{
|
|
|
27
29
|
duration?: number;
|
|
28
30
|
noProgress?: boolean;
|
|
29
31
|
noXButton?: boolean;
|
|
32
|
+
iconFns?: Partial<Record<keyof typeof notificationsDefaultIcons, CallableFunction>>;
|
|
30
33
|
}, {}, "">;
|
|
31
34
|
type Notifications = ReturnType<typeof Notifications>;
|
|
32
35
|
export default Notifications;
|