@marianmeres/stuic 1.41.0 → 1.42.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.
@@ -1,16 +1,16 @@
1
- <script context="module">import { onMount } from "svelte";
1
+ <script context="module">import { createClog } from "@marianmeres/clog";
2
+ import { onMount } from "svelte";
3
+ import { twMerge } from "tailwind-merge";
2
4
  import {
3
5
  AlertConfirmPromptType,
4
6
  Button,
7
+ Field,
5
8
  FieldSelect,
9
+ Thc,
6
10
  createAlertConfirmPromptStore,
7
- focusTrap,
8
- Field,
9
- Thc
11
+ focusTrap
10
12
  } from "../../index.js";
11
- import { twMerge } from "tailwind-merge";
12
13
  import { acpDefaultIcons } from "./acp-icons.js";
13
- import { createClog } from "@marianmeres/clog";
14
14
  export class AlertConfirmPromptConfig {
15
15
  // sane defaults which perhaps should stay untouched
16
16
  static preset = {
@@ -69,85 +69,13 @@ export class AlertConfirmPromptConfig {
69
69
  bg-white/75
70
70
  `.trim()
71
71
  };
72
- // main userland configuration
73
- static class = {
74
- dialog: "",
75
- icon: "",
76
- contentBlock: "",
77
- title: "",
78
- content: "",
79
- inputBox: "",
80
- inputField: "",
81
- menu: "",
82
- // menuLi: '',
83
- button: "",
84
- spinnerBox: ""
85
- };
86
- // 'info' | 'success' | 'warn' | 'error'
87
- // userlang variant fine tuning
88
- static variant = {
89
- info: {
90
- dialog: "",
91
- icon: "",
92
- contentBlock: "",
93
- title: "",
94
- content: "",
95
- inputBox: "",
96
- inputField: "",
97
- menu: "",
98
- // menuLi: '',
99
- button: "",
100
- spinnerBox: ""
101
- },
102
- success: {
103
- dialog: "",
104
- icon: "",
105
- contentBlock: "",
106
- title: "",
107
- content: "",
108
- inputBox: "",
109
- inputField: "",
110
- menu: "",
111
- // menuLi: '',
112
- button: "",
113
- spinnerBox: ""
114
- },
115
- warn: {
116
- dialog: "",
117
- icon: "",
118
- contentBlock: "",
119
- title: "",
120
- content: "",
121
- inputBox: "",
122
- inputField: "",
123
- menu: "",
124
- // menuLi: '',
125
- button: "",
126
- spinnerBox: ""
127
- },
128
- error: {
129
- dialog: "",
130
- icon: "",
131
- contentBlock: "",
132
- title: "",
133
- content: "",
134
- inputBox: "",
135
- inputField: "",
136
- menu: "",
137
- // menuLi: '',
138
- button: "",
139
- spinnerBox: ""
140
- }
141
- };
142
- static iconFn = {
143
- info: void 0,
144
- success: void 0,
145
- warn: void 0,
146
- error: void 0,
147
- spinner: void 0
72
+ // prettier-ignore
73
+ static presetByVariant = {
74
+ info: { dialog: "", icon: "", contentBlock: "", title: "", content: "", inputBox: "", inputField: "", menu: "", button: "", spinnerBox: "" },
75
+ success: { dialog: "", icon: "", contentBlock: "", title: "", content: "", inputBox: "", inputField: "", menu: "", button: "", spinnerBox: "" },
76
+ warn: { dialog: "", icon: "", contentBlock: "", title: "", content: "", inputBox: "", inputField: "", menu: "", button: "", spinnerBox: "" },
77
+ error: { dialog: "", icon: "", contentBlock: "", title: "", content: "", inputBox: "", inputField: "", menu: "", button: "", spinnerBox: "" }
148
78
  };
149
- // conveniently hoisted THC option, since all content is rendered via THC
150
- static forceAsHtml = void 0;
151
79
  }
152
80
  const _isFn = (v) => typeof v === "function";
153
81
  </script>
@@ -155,15 +83,12 @@ const _isFn = (v) => typeof v === "function";
155
83
  <script>const { ALERT, CONFIRM, PROMPT } = AlertConfirmPromptType;
156
84
  const clog = createClog("AlertConfirmPrompt");
157
85
  export let acp;
86
+ export let forceAsHtml = void 0;
87
+ export let defaultIcons = acpDefaultIcons;
88
+ export let classes = {};
89
+ export let classesByVariant = {};
158
90
  $:
159
91
  dialog = $acp[0];
160
- let forceAsHtml = void 0;
161
- $:
162
- if (dialog) {
163
- forceAsHtml = dialog.forceAsHtml ?? AlertConfirmPromptConfig.forceAsHtml;
164
- } else {
165
- forceAsHtml = void 0;
166
- }
167
92
  let _dialogEl;
168
93
  let _formEl;
169
94
  let value = null;
@@ -191,97 +116,43 @@ const onKeyDown = (e) => {
191
116
  }
192
117
  };
193
118
  onMount(() => {
194
- _dialogEl.addEventListener("close", async (e) => {
195
- });
196
119
  _dialogEl.addEventListener("cancel", (e) => {
197
120
  e.preventDefault();
198
121
  });
199
122
  document.addEventListener("keydown", onKeyDown, true);
200
123
  return () => document.removeEventListener("keydown", onKeyDown, true);
201
124
  });
125
+ const _collectClasses = (k) => [
126
+ AlertConfirmPromptConfig?.preset?.[k] || "",
127
+ classes?.[k] || "",
128
+ AlertConfirmPromptConfig.presetByVariant?.[dialog?.variant]?.[k] || "",
129
+ classesByVariant?.[dialog?.variant]?.[k] || "",
130
+ dialog?.class?.[k] || ""
131
+ ];
202
132
  $:
203
- _dialogClass = twMerge(
204
- AlertConfirmPromptConfig.preset.dialog,
205
- AlertConfirmPromptConfig.class.dialog,
206
- dialog?.class?.dialog || "",
207
- AlertConfirmPromptConfig.variant?.[dialog?.variant]?.dialog || ""
208
- );
133
+ _dialogClass = twMerge(..._collectClasses("dialog"));
209
134
  $:
210
- _iconClass = twMerge(
211
- AlertConfirmPromptConfig.preset.icon,
212
- AlertConfirmPromptConfig.class.icon,
213
- dialog?.class?.icon || "",
214
- AlertConfirmPromptConfig.variant?.[dialog?.variant]?.icon || ""
215
- );
135
+ _iconClass = twMerge(..._collectClasses("icon"));
216
136
  $:
217
- _contentBlockClass = twMerge(
218
- AlertConfirmPromptConfig.preset.contentBlock,
219
- AlertConfirmPromptConfig.class.contentBlock,
220
- dialog?.class?.contentBlock || "",
221
- AlertConfirmPromptConfig.variant?.[dialog?.variant]?.contentBlock || ""
222
- );
137
+ _contentBlockClass = twMerge(..._collectClasses("contentBlock"));
223
138
  $:
224
- _titleClass = twMerge(
225
- AlertConfirmPromptConfig.preset.title,
226
- AlertConfirmPromptConfig.class.title,
227
- dialog?.class?.title || "",
228
- AlertConfirmPromptConfig.variant?.[dialog?.variant]?.title || ""
229
- );
139
+ _titleClass = twMerge(..._collectClasses("title"));
230
140
  $:
231
- _contentClass = twMerge(
232
- AlertConfirmPromptConfig.preset.content,
233
- AlertConfirmPromptConfig.class.content,
234
- dialog?.class?.content || "",
235
- AlertConfirmPromptConfig.variant?.[dialog?.variant]?.content || ""
236
- );
141
+ _contentClass = twMerge(..._collectClasses("content"));
237
142
  $:
238
- _inputBoxClass = twMerge(
239
- AlertConfirmPromptConfig.preset.inputBox,
240
- AlertConfirmPromptConfig.class.inputBox,
241
- dialog?.class?.inputBox || "",
242
- AlertConfirmPromptConfig.variant?.[dialog?.variant]?.inputBox || ""
243
- );
143
+ _inputBoxClass = twMerge(..._collectClasses("inputBox"));
244
144
  $:
245
- _inputFieldClass = twMerge(
246
- AlertConfirmPromptConfig.preset.inputField,
247
- AlertConfirmPromptConfig.class.inputField,
248
- dialog?.class?.inputField || "",
249
- AlertConfirmPromptConfig.variant?.[dialog?.variant]?.inputField || ""
250
- );
145
+ _inputFieldClass = twMerge(..._collectClasses("inputField"));
251
146
  $:
252
- _menuClass = twMerge(
253
- AlertConfirmPromptConfig.preset.menu,
254
- AlertConfirmPromptConfig.class.menu,
255
- dialog?.class?.menu || "",
256
- AlertConfirmPromptConfig.variant?.[dialog?.variant]?.menu || ""
257
- );
147
+ _menuClass = twMerge(..._collectClasses("menu"));
258
148
  $:
259
149
  _menuLiClass = twMerge(AlertConfirmPromptConfig.preset.menuLi);
260
150
  $:
261
- _buttonClass = twMerge(
262
- AlertConfirmPromptConfig.preset.button,
263
- AlertConfirmPromptConfig.class.button,
264
- dialog?.class?.button || "",
265
- AlertConfirmPromptConfig.variant?.[dialog?.variant]?.button || ""
266
- );
151
+ _buttonClass = twMerge(..._collectClasses("button"));
267
152
  $:
268
- _spinnerBoxClass = twMerge(
269
- AlertConfirmPromptConfig.preset.spinnerBox,
270
- AlertConfirmPromptConfig.class.spinnerBox,
271
- dialog?.class?.spinnerBox || "",
272
- AlertConfirmPromptConfig.variant?.[dialog?.variant]?.spinnerBox || ""
273
- );
274
- let iconFn = false;
153
+ _spinnerBoxClass = twMerge(..._collectClasses("spinnerBox"));
275
154
  $:
276
- if (dialog?.iconFn === true) {
277
- iconFn = // either runtime config
278
- AlertConfirmPromptConfig.iconFn[dialog?.variant] || // or fixed default
279
- acpDefaultIcons[dialog?.variant];
280
- } else if (dialog?.iconFn) {
281
- iconFn = dialog.iconFn;
282
- } else {
283
- iconFn = false;
284
- }
155
+ iconFn = dialog?.iconFn ?? defaultIcons?.[dialog?.variant];
285
156
  </script>
286
157
 
287
158
  <dialog
@@ -1,5 +1,9 @@
1
1
  import { SvelteComponent } from "svelte";
2
2
  import { createAlertConfirmPromptStore } from '../../index.js';
3
+ import type { AlertConfirmPromptKnownClasses, AlertConfirmPromptVariant } from './alert-confirm-prompt.js';
4
+ export interface AlertConfirmPromptIcons extends Record<AlertConfirmPromptVariant, () => string> {
5
+ spinner: () => string;
6
+ }
3
7
  export declare class AlertConfirmPromptConfig {
4
8
  static preset: {
5
9
  dialog: string;
@@ -14,19 +18,7 @@ export declare class AlertConfirmPromptConfig {
14
18
  button: string;
15
19
  spinnerBox: string;
16
20
  };
17
- static class: {
18
- dialog: string;
19
- icon: string;
20
- contentBlock: string;
21
- title: string;
22
- content: string;
23
- inputBox: string;
24
- inputField: string;
25
- menu: string;
26
- button: string;
27
- spinnerBox: string;
28
- };
29
- static variant: {
21
+ static presetByVariant: {
30
22
  info: {
31
23
  dialog: string;
32
24
  icon: string;
@@ -76,18 +68,14 @@ export declare class AlertConfirmPromptConfig {
76
68
  spinnerBox: string;
77
69
  };
78
70
  };
79
- static iconFn: {
80
- info: undefined;
81
- success: undefined;
82
- warn: undefined;
83
- error: undefined;
84
- spinner: undefined;
85
- };
86
- static forceAsHtml: boolean | undefined;
87
71
  }
88
72
  declare const __propDef: {
89
73
  props: {
90
74
  acp: ReturnType<typeof createAlertConfirmPromptStore>;
75
+ forceAsHtml?: boolean | undefined;
76
+ defaultIcons?: Partial<AlertConfirmPromptIcons> | undefined;
77
+ classes?: Partial<AlertConfirmPromptKnownClasses> | undefined;
78
+ classesByVariant?: Partial<Record<AlertConfirmPromptVariant, Partial<AlertConfirmPromptKnownClasses>>> | undefined;
91
79
  };
92
80
  events: {
93
81
  [evt: string]: CustomEvent<any>;
@@ -1,8 +1,3 @@
1
+ import type { AlertConfirmPromptIcons } from './AlertConfirmPrompt.svelte';
1
2
  export declare function iconFeatherAlertTriangle(props: any): string;
2
- export declare const acpDefaultIcons: {
3
- info: () => string;
4
- success: () => string;
5
- warn: () => string;
6
- error: () => string;
7
- spinner: () => string;
8
- };
3
+ export declare const acpDefaultIcons: AlertConfirmPromptIcons;
@@ -9,7 +9,7 @@ type FnOnOK = (value: any) => any;
9
9
  type FnOnCancel = (value: false) => any;
10
10
  type FnOnEscape = () => undefined;
11
11
  type FnOnCustom = (value: any) => any;
12
- interface KnownClasses {
12
+ export interface AlertConfirmPromptKnownClasses {
13
13
  dialog: string;
14
14
  icon: string;
15
15
  contentBlock: string;
@@ -36,13 +36,10 @@ export interface AlertConfirmPromptOptions extends Record<string, any> {
36
36
  promptFieldProps?: any;
37
37
  variant: AlertConfirmPromptVariant;
38
38
  iconFn: (() => string) | boolean;
39
- class?: Partial<KnownClasses>;
39
+ class?: Partial<AlertConfirmPromptKnownClasses>;
40
40
  forceAsHtml?: boolean;
41
41
  }
42
- export interface AlertConfirmPromptFactoryStoreOptions extends Partial<AlertConfirmPromptOptions> {
43
- classByVariant: Partial<Record<AlertConfirmPromptVariant, Partial<KnownClasses>>>;
44
- }
45
- export declare const createAlertConfirmPromptStore: (defaults?: Partial<AlertConfirmPromptFactoryStoreOptions>) => {
42
+ export declare const createAlertConfirmPromptStore: (defaults?: Partial<AlertConfirmPromptOptions>) => {
46
43
  subscribe: (cb: import("@marianmeres/store").Subscribe<AlertConfirmPromptOptions[]>) => import("@marianmeres/store").Unsubscribe;
47
44
  get: () => AlertConfirmPromptOptions[];
48
45
  push: (o: Partial<AlertConfirmPromptOptions>) => void;
@@ -1,6 +1,5 @@
1
1
  import { createClog } from '@marianmeres/clog';
2
2
  import { createStore } from '@marianmeres/store';
3
- import { twMerge } from 'tailwind-merge';
4
3
  const clog = createClog('alert-confirm-prompt');
5
4
  export var AlertConfirmPromptType;
6
5
  (function (AlertConfirmPromptType) {
@@ -36,21 +35,10 @@ export const createAlertConfirmPromptStore = (defaults) => {
36
35
  o.labelOk ??= defaults.labelOk;
37
36
  o.labelCancel ??= defaults.labelCancel;
38
37
  o.title ??= defaults.title;
39
- o.iconFn ??= defaults.iconFn;
40
- o.forceAsHtml ??= defaults.forceAsHtml;
41
38
  // variant defaults to info
42
39
  if (!['info', 'success', 'warn', 'error'].includes(o?.variant)) {
43
40
  o.variant = 'info';
44
41
  }
45
- o.class ??= {};
46
- // prettier-ignore
47
- const clsKeys = [
48
- 'dialog', 'icon', 'contentBlock', 'title', 'content', 'inputBox',
49
- 'inputField', 'menu', 'button', 'spinnerBox'
50
- ];
51
- clsKeys.forEach((k) => {
52
- o.class[k] = twMerge(defaults?.class?.[k] || '', defaults?.classByVariant?.[o.variant]?.[k] || '', o?.class?.[k] || '');
53
- });
54
42
  //
55
43
  _stack.update((old) => [...old, o]);
56
44
  };
@@ -1,9 +1,9 @@
1
- <script context="module">import { fade } from "svelte/transition";
1
+ <script context="module">import { createClog } from "@marianmeres/clog";
2
+ import { fade } from "svelte/transition";
2
3
  import { twMerge } from "tailwind-merge";
3
4
  import Thc from "../Thc/Thc.svelte";
4
5
  import X from "../X/X.svelte";
5
6
  import { notificationsDefaultIcons } from "./notifications-icons.js";
6
- import { createClog } from "@marianmeres/clog";
7
7
  const X_POSITIONS = ["left", "center", "right"];
8
8
  const Y_POSITIONS = ["top", "center", "bottom"];
9
9
  const DEFAULT = {
@@ -72,33 +72,15 @@ export class NotificationsConfig {
72
72
  warn: { box: ``, count: ``, icon: ``, content: ``, button: ``, x: `` },
73
73
  error: { box: `bg-red-700`, count: ``, icon: ``, content: ``, button: ``, x: `` }
74
74
  };
75
- static class = {
76
- wrap: "",
77
- wrapInner: "",
78
- notification: { box: ``, count: ``, icon: ``, content: ``, button: ``, x: `` }
79
- };
80
- // prettier-ignore
81
- static classByType = {
82
- info: { box: ``, count: ``, icon: ``, content: ``, button: ``, x: `` },
83
- success: { box: ``, count: ``, icon: ``, content: ``, button: ``, x: `` },
84
- warn: { box: ``, count: ``, icon: ``, content: ``, button: ``, x: `` },
85
- error: { box: ``, count: ``, icon: ``, content: ``, button: ``, x: `` }
86
- };
87
- static iconFn = {
88
- info: void 0,
89
- success: void 0,
90
- warn: void 0,
91
- error: void 0
92
- };
93
- // conveniently hoisted THC option, since all content is rendered via THC
94
- static forceAsHtml = void 0;
95
75
  }
96
76
  </script>
97
77
 
98
78
  <script>const clog = createClog("Notifications");
99
79
  export let notifications;
100
- let _class = "";
101
- export { _class as class };
80
+ export let forceAsHtml = void 0;
81
+ export let defaultIcons = notificationsDefaultIcons;
82
+ export let classes = {};
83
+ export let classesByType = {};
102
84
  export let ariaCloseLabel = "Discard";
103
85
  export let posX = DEFAULT.posX;
104
86
  export let posXMobile = DEFAULT.posXMobile;
@@ -116,7 +98,6 @@ $:
116
98
  $:
117
99
  _wrapClass = twMerge(
118
100
  NotificationsConfig.preset.wrap,
119
- NotificationsConfig.class.wrap,
120
101
  `flex flex-row inset-0
121
102
  pointer-events-none bg-transparent`,
122
103
  YMAP_M[yMobile],
@@ -125,71 +106,28 @@ $:
125
106
  $:
126
107
  _wrapInnerClass = twMerge(
127
108
  NotificationsConfig.preset.wrapInner,
128
- NotificationsConfig.class.wrapInner,
129
109
  `flex flex-col w-full
130
110
  pointer-events-none bg-transparent`,
131
111
  XMAP_M[xMobile],
132
112
  XMAP[x]
133
113
  );
134
- const _boxClass = (n) => twMerge(
135
- NotificationsConfig?.preset?.notification?.box || "",
136
- NotificationsConfig?.class?.notification?.box || "",
137
- NotificationsConfig?.presetByType?.[n.type]?.box || "",
138
- NotificationsConfig?.classByType?.[n.type]?.box || "",
139
- n.class?.box || ""
140
- );
141
- const _countClass = (n) => twMerge(
142
- NotificationsConfig?.preset?.notification?.count || "",
143
- NotificationsConfig?.class?.notification?.count || "",
144
- NotificationsConfig?.presetByType?.[n.type]?.count || "",
145
- NotificationsConfig?.classByType?.[n.type]?.count || "",
146
- n.class?.count || ""
147
- );
148
- const _iconClass = (n) => twMerge(
149
- NotificationsConfig?.preset?.notification?.icon || "",
150
- NotificationsConfig?.class?.notification?.icon || "",
151
- NotificationsConfig?.presetByType?.[n.type]?.icon || "",
152
- NotificationsConfig?.classByType?.[n.type]?.icon || "",
153
- n.class?.icon || ""
154
- );
155
- const _contentClass = (n) => twMerge(
156
- NotificationsConfig?.preset?.notification?.content || "",
157
- NotificationsConfig?.class?.notification?.content || "",
158
- NotificationsConfig?.presetByType?.[n.type]?.content || "",
159
- NotificationsConfig?.classByType?.[n.type]?.content || "",
160
- n.class?.content || ""
161
- );
162
- const _buttonClass = (n) => twMerge(
163
- NotificationsConfig?.preset?.notification?.button || "",
164
- NotificationsConfig?.class?.notification?.button || "",
165
- NotificationsConfig?.presetByType?.[n.type]?.button || "",
166
- NotificationsConfig?.classByType?.[n.type]?.button || "",
167
- n.class?.button || ""
168
- );
169
- const _xClass = (n) => twMerge(
170
- NotificationsConfig?.preset?.notification?.x || "",
171
- NotificationsConfig?.class?.notification?.x || "",
172
- NotificationsConfig?.presetByType?.[n.type]?.x || "",
173
- NotificationsConfig?.classByType?.[n.type]?.x || "",
174
- n.class?.x || ""
175
- );
176
- const _iconFn = (n) => {
177
- let iconFn = false;
178
- if (n?.iconFn === true) {
179
- iconFn = // either runtime config
180
- NotificationsConfig.iconFn[n?.type] || // or fixed default
181
- notificationsDefaultIcons[n?.type];
182
- } else if (n?.iconFn) {
183
- iconFn = n.iconFn;
184
- } else {
185
- iconFn = false;
186
- }
187
- return iconFn;
188
- };
114
+ const _collectClasses = (n, k) => [
115
+ NotificationsConfig?.preset?.notification?.[k] || "",
116
+ classes?.[k] || "",
117
+ NotificationsConfig?.presetByType?.[n.type]?.[k] || "",
118
+ classesByType?.[n.type]?.[k] || "",
119
+ n.class?.[k] || ""
120
+ ];
121
+ const _boxClass = (n) => twMerge(..._collectClasses(n, "box"));
122
+ const _countClass = (n) => twMerge(..._collectClasses(n, "count"));
123
+ const _iconClass = (n) => twMerge(..._collectClasses(n, "icon"));
124
+ const _contentClass = (n) => twMerge(..._collectClasses(n, "content"));
125
+ const _buttonClass = (n) => twMerge(..._collectClasses(n, "button"));
126
+ const _xClass = (n) => twMerge(..._collectClasses(n, "x"));
127
+ const _iconFn = (o) => o.iconFn ?? defaultIcons?.[o.type];
189
128
  const _isFn = (v) => typeof v === "function";
190
129
  </script>
191
130
 
192
- <!-- {#if $notifications.length} -->
193
131
  <div class={_wrapClass} aria-live="assertive">
194
132
  <div class={_wrapInnerClass}>
195
133
  {#if $notifications.length}
@@ -232,7 +170,7 @@ const _isFn = (v) => typeof v === "function";
232
170
  <div class={_contentClass(n)}>
233
171
  <Thc
234
172
  thc={n.content}
235
- forceAsHtml={n.forceAsHtml ?? NotificationsConfig.forceAsHtml}
173
+ forceAsHtml={n.forceAsHtml ?? forceAsHtml}
236
174
  notification={n}
237
175
  {notifications}
238
176
  />
@@ -251,4 +189,3 @@ const _isFn = (v) => typeof v === "function";
251
189
  {/if}
252
190
  </div>
253
191
  </div>
254
- <!-- {/if} -->
@@ -1,13 +1,5 @@
1
1
  import { SvelteComponent } from "svelte";
2
- import type { NotificationType, createNotificationsStore } from './notifications.js';
3
- interface NotifClasses {
4
- box: string;
5
- count: string;
6
- icon: string;
7
- content: string;
8
- button: string;
9
- x: string;
10
- }
2
+ import type { NotificationKnownClasses, NotificationType, createNotificationsStore } from './notifications.js';
11
3
  export declare class NotificationsConfig {
12
4
  static preset: {
13
5
  wrap: string;
@@ -21,27 +13,15 @@ export declare class NotificationsConfig {
21
13
  x: string;
22
14
  };
23
15
  };
24
- static presetByType: Record<NotificationType, NotifClasses>;
25
- static class: {
26
- wrap: string;
27
- wrapInner: string;
28
- notification: {
29
- box: string;
30
- count: string;
31
- icon: string;
32
- content: string;
33
- button: string;
34
- x: string;
35
- };
36
- };
37
- static classByType: Record<NotificationType, NotifClasses>;
38
- static iconFn: Record<NotificationType, undefined | (() => string)>;
39
- static forceAsHtml: boolean | undefined;
16
+ static presetByType: Record<NotificationType, NotificationKnownClasses>;
40
17
  }
41
18
  declare const __propDef: {
42
19
  props: {
43
20
  notifications: ReturnType<typeof createNotificationsStore>;
44
- class?: string | undefined;
21
+ forceAsHtml?: boolean | undefined;
22
+ defaultIcons?: Partial<Record<string, () => string>> | undefined;
23
+ classes?: Partial<NotificationKnownClasses> | undefined;
24
+ classesByType?: Partial<Record<string, Partial<NotificationKnownClasses>>> | undefined;
45
25
  ariaCloseLabel?: string | undefined;
46
26
  posX?: "center" | "left" | "right" | undefined;
47
27
  posXMobile?: "center" | "left" | "right" | undefined;
@@ -6,7 +6,7 @@ interface ComponentWrap {
6
6
  component: Function;
7
7
  props?: any;
8
8
  }
9
- interface KnownClasses {
9
+ export interface NotificationKnownClasses {
10
10
  box: string;
11
11
  count: string;
12
12
  icon: string;
@@ -24,7 +24,7 @@ export interface NotificationInput extends Record<string, any> {
24
24
  count: number;
25
25
  component?: Function | ComponentWrap;
26
26
  iconFn: (() => string) | boolean;
27
- class?: Partial<KnownClasses>;
27
+ class?: Partial<NotificationKnownClasses>;
28
28
  forceAsHtml: boolean | undefined;
29
29
  }
30
30
  export interface Notification extends NotificationInput {
@@ -36,10 +36,6 @@ export interface NotiticationsCreateStoreOptions {
36
36
  defaultType: string;
37
37
  defaultTtl: number;
38
38
  sortOrder?: NotificationsSortOrder;
39
- defaultIcons?: Record<NotificationType, () => string> | boolean;
40
- forceAsHtml?: boolean | undefined;
41
- class?: Partial<KnownClasses>;
42
- classByType?: Partial<Record<NotificationType, Partial<KnownClasses>>>;
43
39
  logger: (...v: any) => void;
44
40
  }
45
41
  export declare const NOTIFICATION_EVENT: {
@@ -62,10 +58,6 @@ export declare const createNotificationsStore: (initial?: NotificationCreatePara
62
58
  defaultType?: string | undefined;
63
59
  defaultTtl?: number | undefined;
64
60
  sortOrder?: NotificationsSortOrder | undefined;
65
- defaultIcons?: boolean | Record<string, () => string> | undefined;
66
- forceAsHtml?: boolean | undefined;
67
- class?: Partial<KnownClasses> | undefined;
68
- classByType?: Partial<Record<string, Partial<KnownClasses>>> | undefined;
69
61
  logger?: ((...v: any) => void) | undefined;
70
62
  };
71
63
  EVENT: {
@@ -1,14 +1,12 @@
1
1
  import { createClog } from '@marianmeres/clog';
2
2
  import { createStore } from '@marianmeres/store';
3
3
  import { createTicker } from '@marianmeres/ticker';
4
- import { twMerge } from 'tailwind-merge';
5
4
  const isFn = (v) => typeof v === 'function';
6
5
  const DEFAULT_OPTIONS = {
7
6
  maxCapacity: 5,
8
7
  defaultTtl: 10,
9
8
  defaultType: 'info',
10
9
  sortOrder: 'asc',
11
- defaultIcons: true,
12
10
  logger: createClog('notifications'),
13
11
  };
14
12
  export const NOTIFICATION_EVENT = {
@@ -68,26 +66,9 @@ export const createNotificationsStore = (initial = [], opts = {}) => {
68
66
  o.id ||= _id(o.type, [o.content].join());
69
67
  o.created = new Date(o.created || Date.now());
70
68
  o.count ??= 1;
71
- o.forceAsHtml ??= opts.forceAsHtml;
72
- // classes merge dance
73
- o.class ??= {};
74
- // prettier-ignore
75
- const clsKeys = ['box', 'count', 'icon', 'content', 'button', 'x'];
76
- clsKeys.forEach((k) => {
77
- o.class[k] = twMerge(opts?.class?.[k] || '', opts?.classByType?.[o.type]?.[k] || '', o?.class?.[k] || '');
78
- });
79
69
  //
80
70
  if (o.ttl === undefined)
81
71
  o.ttl = opts.defaultTtl;
82
- //
83
- if (o.iconFn === undefined) {
84
- if (typeof opts.defaultIcons === 'boolean') {
85
- o.iconFn = opts.defaultIcons;
86
- }
87
- else {
88
- o.iconFn = opts.defaultIcons?.[o.type];
89
- }
90
- }
91
72
  return o;
92
73
  };
93
74
  const _findIndexById = (notifs, id) => notifs.findIndex((n) => n.id === id);
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export { default as AlertConfirmPrompt, AlertConfirmPromptConfig, } from './components/AlertConfirmPrompt/AlertConfirmPrompt.svelte';
2
- export { createAlertConfirmPromptStore, createAlert, createConfirm, createPrompt, AlertConfirmPromptType, type AlertConfirmPromptVariant, type AlertConfirmPromptOptions, type AlertConfirmPromptFactoryStoreOptions, } from './components/AlertConfirmPrompt/alert-confirm-prompt.js';
2
+ export { createAlertConfirmPromptStore, createAlert, createConfirm, createPrompt, AlertConfirmPromptType, type AlertConfirmPromptVariant, type AlertConfirmPromptOptions, type AlertConfirmPromptKnownClasses, } from './components/AlertConfirmPrompt/alert-confirm-prompt.js';
3
3
  export { default as AppShell, appShellSetHtmlBodyHeight, } from './components/AppShell/AppShell.svelte';
4
4
  export { default as Backdrop, BackdropConfig, } from './components/Backdrop/Backdrop.svelte';
5
5
  export { default as Button, ButtonConfig } from './components/Button/Button.svelte';
@@ -13,7 +13,7 @@ export { default as FieldCheckbox } from './components/Input/FieldCheckbox.svelt
13
13
  export { default as FieldRadios } from './components/Input/FieldRadios.svelte';
14
14
  export { default as FieldSelect } from './components/Input/FieldSelect.svelte';
15
15
  export { default as Fieldset } from './components/Input/Fieldset.svelte';
16
- export { createNotificationsStore, NOTIFICATION_EVENT, type NotiticationsCreateStoreOptions, type NotificationCreateParam, type Notification, type NotificationInput, type NotificationType, type NotificationOnEventHandler, type NotificationsSortOrder, } from './components/Notifications/notifications.js';
16
+ export { createNotificationsStore, NOTIFICATION_EVENT, type NotiticationsCreateStoreOptions, type NotificationCreateParam, type Notification, type NotificationInput, type NotificationType, type NotificationOnEventHandler, type NotificationsSortOrder, type NotificationKnownClasses, } from './components/Notifications/notifications.js';
17
17
  export { default as Notifications, NotificationsConfig, } from './components/Notifications/Notifications.svelte';
18
18
  export { default as Popover } from './components/Popover/Popover.svelte';
19
19
  export { default as Switch, SwitchConfig } from './components/Switch/Switch.svelte';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@marianmeres/stuic",
3
- "version": "1.41.0",
3
+ "version": "1.42.0",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "vite build && npm run package && node ./scripts/date.js",