@marianmeres/stuic 2.1.11 → 2.1.13
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.
|
@@ -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;
|
|
@@ -64,6 +65,7 @@
|
|
|
64
65
|
classNotifContent?: string;
|
|
65
66
|
classNotifButton?: string;
|
|
66
67
|
classNotifButtonX?: string;
|
|
68
|
+
buttonXStrokeWidth?: 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4;
|
|
67
69
|
//
|
|
68
70
|
classProgress?: string;
|
|
69
71
|
classProgressBar?: string;
|
|
@@ -74,6 +76,8 @@
|
|
|
74
76
|
//
|
|
75
77
|
noProgress?: boolean;
|
|
76
78
|
noXButton?: boolean;
|
|
79
|
+
//
|
|
80
|
+
iconFns?: Partial<Record<keyof typeof notificationsDefaultIcons, CallableFunction>>;
|
|
77
81
|
}
|
|
78
82
|
|
|
79
83
|
let {
|
|
@@ -91,6 +95,7 @@
|
|
|
91
95
|
themeSuccess = "green",
|
|
92
96
|
// use truthy `noTheme` if manual css-only var customization is needed
|
|
93
97
|
noTheme,
|
|
98
|
+
noIcons,
|
|
94
99
|
//
|
|
95
100
|
classWrapY,
|
|
96
101
|
classWrapX,
|
|
@@ -100,6 +105,7 @@
|
|
|
100
105
|
classNotifContent,
|
|
101
106
|
classNotifButton,
|
|
102
107
|
classNotifButtonX,
|
|
108
|
+
buttonXStrokeWidth = 1.5,
|
|
103
109
|
//
|
|
104
110
|
classProgress,
|
|
105
111
|
classProgressBar,
|
|
@@ -109,6 +115,7 @@
|
|
|
109
115
|
duration = 200,
|
|
110
116
|
noProgress,
|
|
111
117
|
noXButton,
|
|
118
|
+
iconFns = {},
|
|
112
119
|
}: Props = $props();
|
|
113
120
|
|
|
114
121
|
let { x, y, xMobile, yMobile } = $derived.by(() => {
|
|
@@ -124,7 +131,9 @@
|
|
|
124
131
|
return { Cmp: null, props: null };
|
|
125
132
|
};
|
|
126
133
|
|
|
127
|
-
|
|
134
|
+
let _iconFns = $derived({ ...iconFns, ...notificationsDefaultIcons });
|
|
135
|
+
|
|
136
|
+
const maybeIcon = (n: Notification) => n.iconFn ?? _iconFns?.[n.type];
|
|
128
137
|
|
|
129
138
|
const _classWrapX = `
|
|
130
139
|
fixed z-50 flex flex-row inset-0
|
|
@@ -154,7 +163,7 @@
|
|
|
154
163
|
bg-neutral-950 text-neutral-50`;
|
|
155
164
|
|
|
156
165
|
const _classNotifIcon = `
|
|
157
|
-
flex items-
|
|
166
|
+
flex items-center justify-center
|
|
158
167
|
pt-4 pr-0 pb-4 pl-4
|
|
159
168
|
text-neutral-200`;
|
|
160
169
|
|
|
@@ -188,13 +197,13 @@
|
|
|
188
197
|
warn: themeWarn,
|
|
189
198
|
}[type] || "info";
|
|
190
199
|
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);`,
|
|
200
|
+
`--color-notif-bg: var(--color-bg-${type}, var(--color-${theme}-700));`,
|
|
201
|
+
`--color-notif-text: var(--color-text-${type}, var(--color-${theme}-50));`,
|
|
202
|
+
`--color-notif-border: var(--color-border-${type}, var(--color-${theme}-800));`,
|
|
194
203
|
//
|
|
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);`,
|
|
204
|
+
`--color-notif-bg-dark: var(--color-bg-dark-${type}, var(--color-${theme}-800));`,
|
|
205
|
+
`--color-notif-text-dark: var(--color-text-dark-${type}, var(--color-${theme}-200));`,
|
|
206
|
+
`--color-notif-border-dark: var(--color-border-dark-${type}, var(--color-${theme}-700));`,
|
|
198
207
|
].join("");
|
|
199
208
|
};
|
|
200
209
|
</script>
|
|
@@ -238,7 +247,7 @@
|
|
|
238
247
|
{n.count}
|
|
239
248
|
</div>
|
|
240
249
|
{/if}
|
|
241
|
-
{#if typeof iconFn === "function"}
|
|
250
|
+
{#if !noIcons && typeof iconFn === "function"}
|
|
242
251
|
<div class={twMerge("icon", _classNotifIcon, classNotifIcon)}>
|
|
243
252
|
{@html iconFn()}
|
|
244
253
|
</div>
|
|
@@ -274,7 +283,7 @@
|
|
|
274
283
|
>
|
|
275
284
|
<X
|
|
276
285
|
class={twMerge("x", _classNotifButtonX, classNotifButtonX)}
|
|
277
|
-
strokeWidth={
|
|
286
|
+
strokeWidth={buttonXStrokeWidth}
|
|
278
287
|
/>
|
|
279
288
|
</button>
|
|
280
289
|
{/if}
|
|
@@ -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;
|
|
@@ -20,6 +22,7 @@ declare const Notifications: import("svelte").Component<{
|
|
|
20
22
|
classNotifContent?: string;
|
|
21
23
|
classNotifButton?: string;
|
|
22
24
|
classNotifButtonX?: string;
|
|
25
|
+
buttonXStrokeWidth?: 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4;
|
|
23
26
|
classProgress?: string;
|
|
24
27
|
classProgressBar?: string;
|
|
25
28
|
forceAsHtml?: boolean;
|
|
@@ -27,6 +30,7 @@ declare const Notifications: import("svelte").Component<{
|
|
|
27
30
|
duration?: number;
|
|
28
31
|
noProgress?: boolean;
|
|
29
32
|
noXButton?: boolean;
|
|
33
|
+
iconFns?: Partial<Record<keyof typeof notificationsDefaultIcons, CallableFunction>>;
|
|
30
34
|
}, {}, "">;
|
|
31
35
|
type Notifications = ReturnType<typeof Notifications>;
|
|
32
36
|
export default Notifications;
|