vue-dockable-desktop 1.7.2 → 1.8.0

package/CHANGELOG.md

@@ -11,6 +11,55 @@ correspondence lives, alongside the feature-by-feature map in [docs/PARITY.md](d
 
 ## [Unreleased]
 
+## [1.8.0] — 2026-10-05
+
+**Parity: react-dockable-desktop 7.7.0.** Ready-made dialogs: the confirmation shows an icon,
+a new alert dialog, and both as promises.
+
+### Added
+
+- **`<VddConfirm>` shows an icon left of its message**: a question mark, coloured by
+  `alertType` (info, success, warning, danger) with the toast colour tokens. The new `icon` prop
+  replaces it with your own component; `icon: null` hides it.
+- **`<VddAlert>`**: a message with a single OK button, for telling rather than asking. Its icon
+  follows `alertType`, with the same `icon` override. Props: `message`, `alertType`, `icon`,
+  `okLabel`, `onSettled`. Focus starts on OK and Enter presses it; Escape, the backdrop and the ×
+  acknowledge it too, unless the modal is `closable: false`. Button hook: `data-vdd-alert-ok`.
+- **`useModals().confirm(options)` and `useModals().alert(options)`** open those dialogs (size
+  `small`) and return a promise: `confirm` resolves `true` for the confirm button and `false` for
+  cancel or any dismissal; `alert` resolves once it is closed. Option types: `ConfirmOptions`,
+  `AlertOptions`.
+- **Message keys `confirmTitle`** ("Confirmation") **and `alertTitle`** ("Information"), the
+  helpers' default titles. A table typed `Record<MessageKey, string>` needs the two new keys.
+- New classes: `vdd-dialog-content`, `vdd-dialog-icon`, `vdd-dialog-icon-{info|success|warning|danger}`.
+
+rdd 7.7.0 also fixed an `RddConfirm` that never answered when dismissed, and one that overwrote
+the modal's header icon. Neither applied here: `<VddConfirm>` already settled on unmount and
+never set a header icon.
+
+### Upgrading
+
+- A confirmation now draws a question mark beside its message. Pass `icon: null` to keep the
+  old look.
+- The line under a confirmation's message is now the border of the new icon row,
+  `.vdd-dialog-content`, so it spans the icon too; it was `.vdd-confirmation-message`'s own
+  `border-bottom`. A stylesheet that restyled that border should target `.vdd-dialog-content`.
+
+### Tests
+
+- `test/components/dialogs.test.ts`: settle-once for every exit of both dialogs (Escape,
+  backdrop, ×, `closeAllModals`, `close(id)`, the buttons); default, custom and hidden icons;
+  the header icon left alone; alert focus, label and `closable: false`; both promise helpers.
+  Each assertion was seen failing with its code removed.
+- M10 checks that `<VddAlert>` settles on unmount and only once (with a selftest mutation). The
+  non-vacuity selftest now blanks `contributions.test.ts`: `useOverlays.ts` is reached by the new
+  dialog tests too, so blanking `useOverlays.test.ts` no longer leaves a module unexecuted.
+- `test/core/stylesheet.test.ts`: every dialog-icon class has a rule coloured from a toast token,
+  and the separator is the icon row's border, not the message's (seen failing with each removed).
+- The M15 colour baseline (`scripts/gates/browser/fixtures/m15-branding-baseline.json`, which M16
+  also reads) is regenerated on purpose: its scenes include a confirmation, whose message now sits
+  in the icon row. Nothing outside that modal changed.
+
 ## [1.7.2] — 2026-10-04
 
 **Parity: react-dockable-desktop 7.6.2.**

package/dist/components/VddAlert.vue.d.ts

@@ -0,0 +1,19 @@
+import type { Component } from 'vue';
+import type { AlertType, Label } from '../types';
+type __VLS_Props = {
+    message: Label;
+    /** Picks the built-in icon and its colour. */
+    alertType?: AlertType;
+    /** Omit it for the built-in icon of `alertType`, pass `null` for none, or pass a component. */
+    icon?: Component | null;
+    /** The button label. Defaults to the `ok` message. */
+    okLabel?: Label;
+    /** Called exactly once, whichever way the dialog closes. */
+    onSettled?: () => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    icon: Component | null;
+    alertType: AlertType;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/VddConfirm.vue.d.ts

@@ -1,3 +1,4 @@
+import type { Component } from 'vue';
 import type { AlertType, Label } from '../types';
 type __VLS_Props = {
     message: Label;
@@ -10,8 +11,14 @@ type __VLS_Props = {
     onCancel?: () => void;
     /** Called exactly once, whichever way the dialog closes. `ok` says which. */
     onSettled?: (ok: boolean) => void;
+    /**
+     * The icon left of the message (1.8.0): omit it for the built-in question mark, pass `null`
+     * for none, or pass a component. Coloured by `alertType`.
+     */
+    icon?: Component | null;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    icon: Component | null;
     alertType: AlertType;
     yesNo: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/VddDialogIcon.vue.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The icon slot left of a dialog's message (1.8.0). `icon` undefined draws the built-in icon —
+ * a question mark for a confirmation, the type's icon for an alert — `null` draws nothing, and a
+ * component is drawn in its place. Coloured by `vdd-dialog-icon-${type}`; the glyphs use
+ * currentColor, on the same grid as the toast icons.
+ */
+import type { Component } from 'vue';
+import type { AlertType } from '../types';
+type __VLS_Props = {
+    icon: Component | null | undefined;
+    type: AlertType;
+    question?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/composables/useOverlays.d.ts

@@ -1,5 +1,28 @@
 import type { Component, ComputedRef } from 'vue';
 import type { ModalOptions, OverlayInstance, SidePanelOptions } from '../core/overlays';
+import type { AlertType, Label } from '../types';
+/** Options of `useModals().confirm()`. The title defaults to the `confirmTitle` message. */
+export interface ConfirmOptions {
+    message: Label;
+    title?: Label;
+    alert?: string;
+    alertType?: AlertType;
+    icon?: Component | null;
+    /** Label the buttons "Yes"/"No" rather than "OK"/"Cancel". */
+    yesNo?: boolean;
+    /** @default 'small' */
+    size?: ModalOptions['size'];
+}
+/** Options of `useModals().alert()`. The title defaults to the `alertTitle` message. */
+export interface AlertOptions {
+    message: Label;
+    title?: Label;
+    alertType?: AlertType;
+    icon?: Component | null;
+    okLabel?: Label;
+    /** @default 'small' */
+    size?: ModalOptions['size'];
+}
 /**
  * The modal stack.
  *
@@ -25,6 +48,13 @@ export declare function useModals(): {
         force?: boolean;
     }) => Promise<void>;
     closeAll: () => void;
+    /**
+     * Open a `<VddConfirm>` (1.8.0). Resolves `true` for the confirm button, `false` for cancel and
+     * for any dismissal — Escape, the backdrop, the ×, or a close by code.
+     */
+    confirm: (options: ConfirmOptions) => Promise<boolean>;
+    /** Open a `<VddAlert>` (1.8.0). Resolves once it is closed, however. */
+    alert: (options: AlertOptions) => Promise<void>;
 };
 /**
  * The two side drawers.

package/dist/core/messages.d.ts

@@ -87,6 +87,14 @@ export declare const defaultMessages: {
         readonly id: "vdd.ok";
         readonly defaultMessage: "OK";
     };
+    readonly confirmTitle: {
+        readonly id: "vdd.confirmTitle";
+        readonly defaultMessage: "Confirmation";
+    };
+    readonly alertTitle: {
+        readonly id: "vdd.alertTitle";
+        readonly defaultMessage: "Information";
+    };
     readonly closeTooltip: {
         readonly id: "vdd.closeTooltip";
         readonly defaultMessage: "Close";