@marianmeres/stuic 3.150.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 -2
  2. package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte.d.ts +3 -2
  3. package/dist/components/AlertConfirmPrompt/Current.svelte +44 -10
  4. package/dist/components/AlertConfirmPrompt/Current.svelte.d.ts +3 -2
  5. package/dist/components/AlertConfirmPrompt/README.md +29 -27
  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,8 +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 the
28
- * `"warn"` variant, which defaults to `"destructive"`. */
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. */
29
30
  intentButtonPrimary?: IntentColorKey;
30
31
  classSpinnerBox?: string;
31
32
  defaultIcons?: Partial<
package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte.d.ts CHANGED
@@ -22,8 +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 the
26
- * `"warn"` variant, which defaults to `"destructive"`. */
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. */
27
28
  intentButtonPrimary?: IntentColorKey;
28
29
  classSpinnerBox?: string;
29
30
  defaultIcons?: Partial<Record<"info" | "success" | "warn" | "error" | "spinner", () => string | undefined>>;
package/dist/components/AlertConfirmPrompt/Current.svelte CHANGED
@@ -39,8 +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 the
43
- * `"warn"` variant, which defaults to `"destructive"`. */
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. */
44
45
  intentButtonPrimary?: IntentColorKey;
45
46
  classSpinnerBox?: string;
46
47
  defaultIcons?: Partial<
@@ -77,12 +78,24 @@
77
78
 
78
79
  let current = $derived(acp?.current!);
79
80
 
80
- // the "warn" variant hints a destructive action, so unless explicitly configured
81
- // otherwise, render the primary button accordingly
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*.
82
89
  let _intentButtonPrimary = $derived(
83
- intentButtonPrimary ?? (current?.variant === "warn" ? "destructive" : "primary")
90
+ current?.intentButtonPrimary ??
91
+ intentButtonPrimary ??
92
+ (current?.variant === "warn" && current?.type !== ALERT ? "destructive" : "primary")
84
93
  );
85
94
 
95
+ let _intentButtonCancel = $derived(current?.intentButtonCancel ?? intentButtonCancel);
96
+
97
+ let _intentButtonCustom = $derived(current?.intentButtonCustom ?? intentButtonCustom);
98
+
86
99
  let iconHtml = $derived.by(() => {
87
100
  let fn = current.iconFn as any;
88
101
  if (current.iconFn === true) {
@@ -219,8 +232,15 @@
219
232
  {#if current.type !== ALERT}
220
233
  <li class={twMerge(_classMenuLi, classMenuLi, hasCustom && classMenuLiCustom)}>
221
234
  <CmpButtonCancel
222
- class={twMerge("cancel", _classButton, classButton, classButtonCancel)}
223
- intent={intentButtonCancel}
235
+ class={twMerge(
236
+ "cancel",
237
+ _classButton,
238
+ classButton,
239
+ classButtonCancel,
240
+ current.classButton,
241
+ current.classButtonCancel
242
+ )}
243
+ intent={_intentButtonCancel}
224
244
  disabled={isPending}
225
245
  onclick={createOnClick("cancel", current.onCancel)}
226
246
  >
@@ -231,8 +251,15 @@
231
251
  {#if hasCustom}
232
252
  <li class={twMerge(_classMenuLi, classMenuLi, classMenuLiCustom)}>
233
253
  <CmpButtonCustom
234
- class={twMerge("custom", _classButton, classButton, classButtonCustom)}
235
- intent={intentButtonCustom}
254
+ class={twMerge(
255
+ "custom",
256
+ _classButton,
257
+ classButton,
258
+ classButtonCustom,
259
+ current.classButton,
260
+ current.classButtonCustom
261
+ )}
262
+ intent={_intentButtonCustom}
236
263
  disabled={isPending}
237
264
  onclick={createOnClick("custom", current.onCustom!)}
238
265
  >
@@ -242,7 +269,14 @@
242
269
  {/if}
243
270
  <li class={twMerge(_classMenuLi, classMenuLi, hasCustom && classMenuLiCustom)}>
244
271
  <CmpButtonOk
245
- class={twMerge("ok", _classButton, classButton, classButtonPrimary)}
272
+ class={twMerge(
273
+ "ok",
274
+ _classButton,
275
+ classButton,
276
+ classButtonPrimary,
277
+ current.classButton,
278
+ current.classButtonPrimary
279
+ )}
246
280
  intent={_intentButtonPrimary}
247
281
  disabled={isPending}
248
282
  onclick={createOnClick("ok", current.onOk)}
package/dist/components/AlertConfirmPrompt/Current.svelte.d.ts CHANGED
@@ -22,8 +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 the
26
- * `"warn"` variant, which defaults to `"destructive"`. */
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. */
27
28
  intentButtonPrimary?: IntentColorKey;
28
29
  classSpinnerBox?: string;
29
30
  defaultIcons?: Partial<Record<"info" | "success" | "warn" | "error" | "spinner", () => string | undefined>>;
package/dist/components/AlertConfirmPrompt/README.md CHANGED
@@ -4,23 +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
- | `intentButtonPrimary` | `IntentColorKey` | - | Intent of the OK button; defaults to `"primary"`, or `"destructive"` for the `"warn"` variant |
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 |
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 |
24
24
 
25
25
  ## AlertConfirmPromptStack API
26
26
 
@@ -42,16 +42,18 @@ A modern, customizable replacement for native browser `alert()`, `confirm()`, an
42
42
 
43
43
  ### Dialog Options
44
44
 
45
- | Option | Type | Description |
46
- | ------------- | ------------------------------------------ | ------------------------------------------------------------------- |
47
- | `title` | `THC` | Dialog title |
48
- | `content` | `THC` | Dialog message/content |
49
- | `variant` | `"info" \| "success" \| "warn" \| "error"` | Visual style (`"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 |
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) |
55
57
 
56
58
  ## Usage
57
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.150.0",
3
+ "version": "3.151.0",
4
4
  "packageManager": "pnpm@11.5.0",
5
5
  "scripts": {
6
6
  "dev": "vite dev",