@marianmeres/stuic 3.149.0 → 3.151.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.
Files changed (7) hide show
  1. package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte +3 -0
  2. package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte.d.ts +3 -0
  3. package/dist/components/AlertConfirmPrompt/Current.svelte +49 -7
  4. package/dist/components/AlertConfirmPrompt/Current.svelte.d.ts +3 -0
  5. package/dist/components/AlertConfirmPrompt/README.md +29 -24
  6. package/dist/components/AlertConfirmPrompt/alert-confirm-prompt-stack.svelte.d.ts +8 -0
  7. package/package.json +1 -1
package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte CHANGED
@@ -24,6 +24,9 @@
24
24
  classButtonPrimary?: string;
25
25
  intentButtonCancel?: IntentColorKey;
26
26
  intentButtonCustom?: IntentColorKey;
27
+ /** Intent of the primary (OK) button. Defaults to `"primary"`, except for
28
+ * `"warn"` confirm/prompt dialogs, which default to `"destructive"`. A dialog
29
+ * option of the same name wins over this. */
27
30
  intentButtonPrimary?: IntentColorKey;
28
31
  classSpinnerBox?: string;
29
32
  defaultIcons?: Partial<
package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte.d.ts CHANGED
@@ -22,6 +22,9 @@ export interface Props {
22
22
  classButtonPrimary?: string;
23
23
  intentButtonCancel?: IntentColorKey;
24
24
  intentButtonCustom?: IntentColorKey;
25
+ /** Intent of the primary (OK) button. Defaults to `"primary"`, except for
26
+ * `"warn"` confirm/prompt dialogs, which default to `"destructive"`. A dialog
27
+ * option of the same name wins over this. */
25
28
  intentButtonPrimary?: IntentColorKey;
26
29
  classSpinnerBox?: string;
27
30
  defaultIcons?: Partial<Record<"info" | "success" | "warn" | "error" | "spinner", () => string | undefined>>;
package/dist/components/AlertConfirmPrompt/Current.svelte CHANGED
@@ -39,6 +39,9 @@
39
39
  classButtonPrimary?: string;
40
40
  intentButtonCancel?: IntentColorKey;
41
41
  intentButtonCustom?: IntentColorKey;
42
+ /** Intent of the primary (OK) button. Defaults to `"primary"`, except for
43
+ * `"warn"` confirm/prompt dialogs, which default to `"destructive"`. A dialog
44
+ * option of the same name wins over this. */
42
45
  intentButtonPrimary?: IntentColorKey;
43
46
  classSpinnerBox?: string;
44
47
  defaultIcons?: Partial<
@@ -68,13 +71,31 @@
68
71
  classButtonPrimary,
69
72
  intentButtonCancel,
70
73
  intentButtonCustom,
71
- intentButtonPrimary = "primary",
74
+ intentButtonPrimary,
72
75
  classSpinnerBox,
73
76
  defaultIcons = acpDefaultIcons,
74
77
  }: Props = $props();
75
78
 
76
79
  let current = $derived(acp?.current!);
77
80
 
81
+ // Button config is layered: the dialog object's own value (most specific) wins over
82
+ // the component level prop - same as CmpButtonOk/Cancel/Custom below.
83
+
84
+ // The "warn" variant hints a destructive action, so unless explicitly configured
85
+ // otherwise, render the primary button accordingly. Not for ALERT though: its ok
86
+ // button only dismisses the dialog (onOk defaults to `shift`), so there is no
87
+ // destructive action to signal - a warning-severity *message* is not the same
88
+ // thing as a destructive *action*.
89
+ let _intentButtonPrimary = $derived(
90
+ current?.intentButtonPrimary ??
91
+ intentButtonPrimary ??
92
+ (current?.variant === "warn" && current?.type !== ALERT ? "destructive" : "primary")
93
+ );
94
+
95
+ let _intentButtonCancel = $derived(current?.intentButtonCancel ?? intentButtonCancel);
96
+
97
+ let _intentButtonCustom = $derived(current?.intentButtonCustom ?? intentButtonCustom);
98
+
78
99
  let iconHtml = $derived.by(() => {
79
100
  let fn = current.iconFn as any;
80
101
  if (current.iconFn === true) {
@@ -211,8 +232,15 @@
211
232
  {#if current.type !== ALERT}
212
233
  <li class={twMerge(_classMenuLi, classMenuLi, hasCustom && classMenuLiCustom)}>
213
234
  <CmpButtonCancel
214
- class={twMerge("cancel", _classButton, classButton, classButtonCancel)}
215
- intent={intentButtonCancel}
235
+ class={twMerge(
236
+ "cancel",
237
+ _classButton,
238
+ classButton,
239
+ classButtonCancel,
240
+ current.classButton,
241
+ current.classButtonCancel
242
+ )}
243
+ intent={_intentButtonCancel}
216
244
  disabled={isPending}
217
245
  onclick={createOnClick("cancel", current.onCancel)}
218
246
  >
@@ -223,8 +251,15 @@
223
251
  {#if hasCustom}
224
252
  <li class={twMerge(_classMenuLi, classMenuLi, classMenuLiCustom)}>
225
253
  <CmpButtonCustom
226
- class={twMerge("custom", _classButton, classButton, classButtonCustom)}
227
- intent={intentButtonCustom}
254
+ class={twMerge(
255
+ "custom",
256
+ _classButton,
257
+ classButton,
258
+ classButtonCustom,
259
+ current.classButton,
260
+ current.classButtonCustom
261
+ )}
262
+ intent={_intentButtonCustom}
228
263
  disabled={isPending}
229
264
  onclick={createOnClick("custom", current.onCustom!)}
230
265
  >
@@ -234,8 +269,15 @@
234
269
  {/if}
235
270
  <li class={twMerge(_classMenuLi, classMenuLi, hasCustom && classMenuLiCustom)}>
236
271
  <CmpButtonOk
237
- class={twMerge("ok", _classButton, classButton, classButtonPrimary)}
238
- intent={intentButtonPrimary}
272
+ class={twMerge(
273
+ "ok",
274
+ _classButton,
275
+ classButton,
276
+ classButtonPrimary,
277
+ current.classButton,
278
+ current.classButtonPrimary
279
+ )}
280
+ intent={_intentButtonPrimary}
239
281
  disabled={isPending}
240
282
  onclick={createOnClick("ok", current.onOk)}
241
283
  bind:el={okButtonEl}
package/dist/components/AlertConfirmPrompt/Current.svelte.d.ts CHANGED
@@ -22,6 +22,9 @@ interface Props {
22
22
  classButtonPrimary?: string;
23
23
  intentButtonCancel?: IntentColorKey;
24
24
  intentButtonCustom?: IntentColorKey;
25
+ /** Intent of the primary (OK) button. Defaults to `"primary"`, except for
26
+ * `"warn"` confirm/prompt dialogs, which default to `"destructive"`. A dialog
27
+ * option of the same name wins over this. */
25
28
  intentButtonPrimary?: IntentColorKey;
26
29
  classSpinnerBox?: string;
27
30
  defaultIcons?: Partial<Record<"info" | "success" | "warn" | "error" | "spinner", () => string | undefined>>;
package/dist/components/AlertConfirmPrompt/README.md CHANGED
@@ -4,20 +4,23 @@ A modern, customizable replacement for native browser `alert()`, `confirm()`, an
4
4
 
5
5
  ## Props
6
6
 
7
- | Prop | Type | Default | Description |
8
- | -------------------- | ------------------------------- | ------- | ---------------------------------------- |
9
- | `acp` | `AlertConfirmPromptStack` | - | Stack instance managing the dialog queue |
10
- | `forceAsHtml` | `boolean` | `false` | Render all content as HTML |
11
- | `class` | `string` | - | CSS classes for the modal dialog |
12
- | `classWrap` | `string` | - | CSS for outer wrapper |
13
- | `classIconBox` | `string` | - | CSS for icon container |
14
- | `classTitle` | `string` | - | CSS for title text |
15
- | `classContent` | `string` | - | CSS for content area |
16
- | `classInput` | `string` | - | CSS for prompt input field |
17
- | `classButton` | `string` | - | CSS for all buttons |
18
- | `classButtonPrimary` | `string` | - | CSS for OK button |
19
- | `classButtonCancel` | `string` | - | CSS for Cancel button |
20
- | `defaultIcons` | `Record<variant, () => string>` | - | Custom icon functions per variant |
7
+ | Prop | Type | Default | Description |
8
+ | --------------------- | ------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
9
+ | `acp` | `AlertConfirmPromptStack` | - | Stack instance managing the dialog queue |
10
+ | `forceAsHtml` | `boolean` | `false` | Render all content as HTML |
11
+ | `class` | `string` | - | CSS classes for the modal dialog |
12
+ | `classWrap` | `string` | - | CSS for outer wrapper |
13
+ | `classIconBox` | `string` | - | CSS for icon container |
14
+ | `classTitle` | `string` | - | CSS for title text |
15
+ | `classContent` | `string` | - | CSS for content area |
16
+ | `classInput` | `string` | - | CSS for prompt input field |
17
+ | `classButton` | `string` | - | CSS for all buttons |
18
+ | `classButtonPrimary` | `string` | - | CSS for OK button |
19
+ | `classButtonCancel` | `string` | - | CSS for Cancel button |
20
+ | `intentButtonPrimary` | `IntentColorKey` | - | Intent of the OK button; defaults to `"primary"`, or `"destructive"` for `"warn"` confirm/prompt dialogs (a dialog option of the same name wins) |
21
+ | `intentButtonCancel` | `IntentColorKey` | - | Intent of the Cancel button |
22
+ | `intentButtonCustom` | `IntentColorKey` | - | Intent of the custom button |
23
+ | `defaultIcons` | `Record<variant, () => string>` | - | Custom icon functions per variant |
21
24
 
22
25
  ## AlertConfirmPromptStack API
23
26
 
@@ -39,16 +42,18 @@ A modern, customizable replacement for native browser `alert()`, `confirm()`, an
39
42
 
40
43
  ### Dialog Options
41
44
 
42
- | Option | Type | Description |
43
- | ------------- | ------------------------------------------ | --------------------------- |
44
- | `title` | `THC` | Dialog title |
45
- | `content` | `THC` | Dialog message/content |
46
- | `variant` | `"info" \| "success" \| "warn" \| "error"` | Visual style |
47
- | `value` | `any` | Initial value for prompt |
48
- | `labelOk` | `THC` | Custom OK button label |
49
- | `labelCancel` | `THC` | Custom Cancel button label |
50
- | `labelCustom` | `THC` | Optional third button label |
51
- | `onCustom` | `(value) => void` | Custom button callback |
45
+ | Option | Type | Description |
46
+ | ----------------------------------------------------------------------------- | ------------------------------------------ | ----------------------------------------------------------------------------------------------- |
47
+ | `title` | `THC` | Dialog title |
48
+ | `content` | `THC` | Dialog message/content |
49
+ | `variant` | `"info" \| "success" \| "warn" \| "error"` | Visual style (for confirm/prompt, `"warn"` also renders the OK button as `destructive`) |
50
+ | `value` | `any` | Initial value for prompt |
51
+ | `labelOk` | `THC` | Custom OK button label |
52
+ | `labelCancel` | `THC` | Custom Cancel button label |
53
+ | `labelCustom` | `THC` | Optional third button label |
54
+ | `onCustom` | `(value) => void` | Custom button callback |
55
+ | `classButton`, `classButtonPrimary`, `classButtonCancel`, `classButtonCustom` | `string` | Per dialog button classes, merged on top of the same named component props |
56
+ | `intentButtonPrimary`, `intentButtonCancel`, `intentButtonCustom` | `IntentColorKey` | Per dialog button intents, overriding the same named component props (and the `"warn"` default) |
52
57
 
53
58
  ## Usage
54
59
 
package/dist/components/AlertConfirmPrompt/alert-confirm-prompt-stack.svelte.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { Component } from "svelte";
2
2
  import type { THC } from "../Thc/Thc.svelte";
3
+ import type { IntentColorKey } from "../../utils/design-tokens.js";
3
4
  /**
4
5
  * Types of alert/confirm/prompt dialogs.
5
6
  */
@@ -42,6 +43,13 @@ export interface AlertConfirmPromptObj extends Record<string, any> {
42
43
  CmpButtonOk?: Component;
43
44
  CmpButtonCancel?: Component;
44
45
  CmpButtonCustom?: Component;
46
+ classButton?: string;
47
+ classButtonPrimary?: string;
48
+ classButtonCancel?: string;
49
+ classButtonCustom?: string;
50
+ intentButtonPrimary?: IntentColorKey;
51
+ intentButtonCancel?: IntentColorKey;
52
+ intentButtonCustom?: IntentColorKey;
45
53
  }
46
54
  /**
47
55
  * A reactive stack manager for alert, confirm, and prompt dialogs.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@marianmeres/stuic",
3
- "version": "3.149.0",
3
+ "version": "3.151.0",
4
4
  "packageManager": "pnpm@11.5.0",
5
5
  "scripts": {
6
6
  "dev": "vite dev",