@marianmeres/stuic 1.74.0 → 1.75.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.
|
@@ -4,6 +4,7 @@ import { twMerge } from "tailwind-merge";
|
|
|
4
4
|
import Thc from "../Thc/Thc.svelte";
|
|
5
5
|
import X from "../X/X.svelte";
|
|
6
6
|
import { notificationsDefaultIcons } from "./notifications-icons.js";
|
|
7
|
+
import { disableScrollHandling } from "$app/navigation";
|
|
7
8
|
const X_POSITIONS = ["left", "center", "right"];
|
|
8
9
|
const Y_POSITIONS = ["top", "center", "bottom"];
|
|
9
10
|
const DEFAULT = {
|
|
@@ -129,64 +130,67 @@ const _iconFn = (o) => o.iconFn ?? defaultIcons?.[o.type];
|
|
|
129
130
|
const _isFn = (v) => typeof v === "function";
|
|
130
131
|
</script>
|
|
131
132
|
|
|
132
|
-
|
|
133
|
-
<
|
|
134
|
-
{
|
|
135
|
-
{
|
|
136
|
-
{
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
133
|
+
{#if $notifications.length}
|
|
134
|
+
<dialog open>
|
|
135
|
+
<div class={_wrapClass}>
|
|
136
|
+
<div class={_wrapInnerClass}>
|
|
137
|
+
{#each $notifications as n}
|
|
138
|
+
{@const iconFn = _iconFn(n)}
|
|
139
|
+
<!-- use your own component -->
|
|
140
|
+
{#if n?.component}
|
|
141
|
+
<svelte:component
|
|
142
|
+
this={n.component.component || n.component}
|
|
143
|
+
{...n.component.props || {}}
|
|
144
|
+
notification={n}
|
|
145
|
+
{notifications}
|
|
146
|
+
/>
|
|
147
|
+
{:else}
|
|
148
|
+
<!-- svelte-ignore
|
|
147
149
|
a11y-click-events-have-key-events
|
|
148
150
|
a11y-no-noninteractive-element-interactions
|
|
149
151
|
a11y-mouse-events-have-key-events -->
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
{n
|
|
164
|
-
|
|
165
|
-
|
|
152
|
+
<div
|
|
153
|
+
transition:fade|global={{ duration: 200 }}
|
|
154
|
+
class={_boxClass(n)}
|
|
155
|
+
class:cursor-pointer={typeof n.onClick === 'function'}
|
|
156
|
+
data-notification-type={n.type}
|
|
157
|
+
data-notification-multiple={n.count > 1 ? true : undefined}
|
|
158
|
+
role="alert"
|
|
159
|
+
on:mouseover={() =>
|
|
160
|
+
notifications.event(n.id, notifications.EVENT.MOUSEOVER)}
|
|
161
|
+
on:mouseout={() => notifications.event(n.id, notifications.EVENT.MOUSEOUT)}
|
|
162
|
+
on:click={() => notifications.event(n.id, notifications.EVENT.CLICK)}
|
|
163
|
+
>
|
|
164
|
+
{#if n.count > 1}
|
|
165
|
+
<div class={_countClass(n)}>
|
|
166
|
+
{n.count}
|
|
167
|
+
</div>
|
|
168
|
+
{/if}
|
|
166
169
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
+
{#if _isFn(iconFn)}
|
|
171
|
+
<div class={_iconClass(n)}>{@html iconFn()}</div>
|
|
172
|
+
{/if}
|
|
170
173
|
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
174
|
+
<div class={_contentClass(n)}>
|
|
175
|
+
<Thc
|
|
176
|
+
thc={n.content}
|
|
177
|
+
forceAsHtml={n.forceAsHtml ?? forceAsHtml}
|
|
178
|
+
notification={n}
|
|
179
|
+
{notifications}
|
|
180
|
+
/>
|
|
181
|
+
</div>
|
|
179
182
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
</
|
|
183
|
+
<button
|
|
184
|
+
class={_buttonClass(n)}
|
|
185
|
+
aria-label={ariaCloseLabel}
|
|
186
|
+
on:click|preventDefault|stopPropagation={() => notifications.remove(n.id)}
|
|
187
|
+
>
|
|
188
|
+
<X class={_xClass(n)} />
|
|
189
|
+
</button>
|
|
190
|
+
</div>
|
|
191
|
+
{/if}
|
|
192
|
+
{/each}
|
|
193
|
+
</div>
|
|
194
|
+
</div>
|
|
195
|
+
</dialog>
|
|
196
|
+
{/if}
|