vue-dockable-desktop 1.8.1 → 1.9.0

package/CHANGELOG.md

@@ -11,6 +11,78 @@ correspondence lives, alongside the feature-by-feature map in [docs/PARITY.md](d
 
 ## [Unreleased]
 
+## [1.9.0] — 2026-10-06
+
+**Parity: react-dockable-desktop 7.8.0.** More control over how the desktop looks and where panels
+open, all opt-in: without the new options, nothing changes. Same names as rdd 7.8.0, in Vue's idiom.
+
+### Added
+
+- **Your own empty-workspace view.** `<VddDesktop>` takes a `#empty-workspace` slot, shown while no
+  panel is docked in place of the built-in message: a welcome screen, a logo, "Open a file"
+  buttons. Floating windows still show over it, and a window can still be dropped onto it to dock.
+  Empty groups inside a split keep the built-in message.
+- **Open a panel beside another.** `openPanel(id, component, { dockTo: { panel, position, size } })`
+  docks a new panel as a tab in that panel's group (`position: 'center'`) or in a new group split
+  off on one side, taking `size` (0.1–0.9) of the split. It wins over `initialTarget`. If the
+  target isn't docked, the panel is placed as usual and a warning says why.
+- **State attributes for your CSS.** Tabs carry `data-vdd-selected`, `data-vdd-focused` and
+  `data-vdd-dirty`; floating windows carry `data-vdd-focused` and `data-vdd-maximized`. Each is
+  present only while it is true. The existing classes are unchanged.
+- **Per-kind classes.** `className` and `tabClassName` in a kind's `defaultOptions` add your class
+  to every panel of that kind (on its content element, which moves with it) and to its tab.
+- **`keepAlive: false`**, per kind: the component unmounts while the panel is an unselected tab or
+  minimised, and mounts afresh when shown. Its own state is lost each time, and in such a panel
+  `onUnmounted` means hidden, not closed; a guard it registered with `onBeforeClose` is inactive
+  while it is unmounted, though its dirty flag still applies. The default is unchanged: panels
+  stay mounted. Recorded as [ADR 0021](docs/decisions/0021-opt-in-unmount-while-hidden.md), which
+  amends 0002 for kinds that opt in.
+
+### Docs
+
+- Theming (Chapter 10): **Your own empty-workspace view**, **Styling by state and by panel kind**,
+  and **Using it with Vuetify, PrimeVue, Bootstrap or Tailwind** (dark mode, the library's
+  z-index layers, why a framework popup opened inside one of the library's modals appears behind
+  it and the fixes, overriding styles). Layout (Chapter 4): **Opening beside another panel**.
+  Panels (Chapter 3): the new registration options and **Freeing a hidden panel**. Concepts
+  (Chapter 2) notes the `keepAlive: false` exception beside the zero-unmount guarantee.
+- `PARITY.md`: the rdd 7.8.0 trace.
+
+### Tests
+
+- `test/components/releaseA.test.ts` (15 tests): the empty-workspace slot (shown and gone as panels
+  dock and close; empty groups inside a split keep the built-in message), the state attributes on
+  tabs and windows, `dockTo` (sides, centre, size clamping, winning over `initialTarget`, the
+  fallback and its warning, no effect on an open panel), the per-kind classes (also after
+  floating), and `keepAlive: false` (unmount and fresh remount, the default unchanged, no leak
+  over 50 hide/show cycles). Each was seen failing with its feature broken.
+- M13's browser tour gains a step that shows the playground's `#empty-workspace` view, so the new
+  `.vdd-empty-workspace` rule is checked against a real render (the gate first failed on it as a
+  dead rule, which is what it is for).
+
+## [1.8.2] — 2026-10-06
+
+**Parity: react-dockable-desktop 7.7.3** (code health). Neither of rdd's last two releases needs a
+port: 7.7.2 fixed panels re-rendering on every workspace change, which vdd never did (each panel
+host reads only its own entry), and 7.7.3 is rdd's own lint and dead-code tooling. This release is
+vdd's matching lint cleanup. No API or behaviour change; the built code differs only in the
+explicit `undefined` prop defaults below.
+
+### Internal
+
+- **A lint warning now fails the gate.** ESLint runs with `--max-warnings 0` in the standing gate
+  (CI), `npm run verify` and `npm run lint`. Warnings never failed anything before, and 721 had
+  built up.
+- **Template-layout rules are off.** `vue/max-attributes-per-line` and five other Vue
+  template-formatting rules accounted for 706 of the 721: they only reflow markup, and the
+  templates keep their own consistent layout.
+- The 12 optional props without a default (`VddAlert`'s `okLabel`, `VddConfirm`'s callbacks, the
+  icon props, and others) declare `undefined` explicitly in `withDefaults`, as `icon` already did.
+  Their behaviour is unchanged.
+- The demo's Markdown preview: the `v-html` lint exemption now covers the right line, and its
+  comment no longer calls the output sanitised. It isn't: `rehype-raw` passes raw HTML through,
+  which is acceptable in a demo that renders only what is typed into its own editor.
+
 ## [1.8.1] — 2026-10-05
 
 **Parity: react-dockable-desktop 7.7.1.** Two desktops on one page no longer strip each other's

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

@@ -14,6 +14,8 @@ type __VLS_Props = {
 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;
+    onSettled: () => void;
+    okLabel: Label;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -19,8 +19,12 @@ type __VLS_Props = {
 };
 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;
+    alert: string;
     alertType: AlertType;
+    onCancel: () => void;
     yesNo: boolean;
+    onOk: () => void;
+    onSettled: (ok: boolean) => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -15,7 +15,11 @@ type __VLS_Props = {
     /** Fallback icon for panels that register none. */
     defaultPanelIcon?: unknown;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_13: {};
+type __VLS_Slots = {} & {
+    'empty-workspace'?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     taskbarContextMenu: (panelId: string, event: MouseEvent | PointerEvent) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onTaskbarContextMenu?: ((panelId: string, event: MouseEvent | PointerEvent) => any) | undefined;
@@ -23,6 +27,13 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     skin: string;
     animations: boolean;
     taskbar: TaskbarVisibility;
+    defaultPanelIcon: undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -45,6 +45,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }>, {
     width: number;
     height: number;
+    icon: Component;
     stretchable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -2,6 +2,16 @@ import type { LayoutLeafNode } from '../types';
 type __VLS_Props = {
     leaf: LayoutLeafNode;
 };
-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 var __VLS_16: {};
+type __VLS_Slots = {} & {
+    'empty-workspace'?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -15,6 +15,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     variant: ToolbarVariant;
     buttonVariant: ButtonVariant;
+    buttonSize: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -12,6 +12,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     onContextMenu?: ((panelId: string, event: MouseEvent | PointerEvent) => any) | undefined;
 }>, {
     visibility: TaskbarVisibility;
+    defaultIcon: undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -25,6 +25,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     width: number;
     position: ToastPosition;
     animation: "slide" | "fade" | "none";
+    adapter: ToastAdapter;
     pauseOnHover: boolean;
     defaultDuration: number;
     defaultClosable: boolean;

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

@@ -21,6 +21,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((result: SearchResult) => any) | undefined;
 }>, {
+    placeholder: string;
     debounce: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -3,6 +3,16 @@ type __VLS_Props = {
     node: LayoutNode;
     path: number[];
 };
-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 var __VLS_9: {};
+type __VLS_Slots = {} & {
+    'empty-workspace'?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/core/registry.d.ts

@@ -32,6 +32,22 @@ export interface PanelDefaultOptions {
      * @see docs/decisions/0014-preserve-scroll-and-focus.md
      */
     preserveScroll?: boolean;
+    /**
+     * Class added to each panel of this kind, on its own content element (`.vdd-panel-content`),
+     * which moves with the panel between groups, windows and the taskbar preview. (1.9.0)
+     */
+    className?: string;
+    /** Class added to the tab of each panel of this kind. (1.9.0) */
+    tabClassName?: string;
+    /**
+     * `false` unmounts the panel's component while it is hidden (an unselected tab, or minimised)
+     * and mounts it afresh when shown, to free what a heavy, rarely shown panel holds. Its own
+     * state is lost each time, and a guard it registered with `onBeforeClose` is not active while
+     * it is unmounted (its dirty flag still is). Its tab, title and lifecycle continue, and the
+     * taskbar shows a letter tile instead of a live preview. @default true
+     * @see docs/decisions/0021-opt-in-unmount-while-hidden.md
+     */
+    keepAlive?: boolean;
 }
 /** A registered panel kind. */
 export interface PanelRegistryEntry {

package/dist/core/workspace.d.ts

@@ -74,6 +74,18 @@ export interface OpenPanelOptions<P extends object = Record<string, unknown>> {
     props?: P;
     /** If another open panel of the same `component` has this key, focus that one instead. */
     dedupeKey?: string;
+    /**
+     * Dock the new panel beside an open, docked panel: in that panel's group (`position: 'center'`,
+     * as a tab) or in a new group split off on one side of it. `size` is the new group's share of
+     * that split, from 0.1 to 0.9 (the workspace's split ratio when omitted). Wins over
+     * `initialTarget`. If `panel` is not docked (not open, floating or minimised), the new panel is
+     * placed as usual and a warning says why. Applies only to a newly opened panel. (1.9.0)
+     */
+    dockTo?: {
+        panel: string;
+        position: DropPosition;
+        size?: number;
+    };
 }
 /** The live workspace state. */
 export interface WorkspaceState {