cabloy 5.1.166 → 5.1.167

package/zova/pnpm-workspace.yaml

@@ -48,7 +48,7 @@ overrides:
   '@vue/reactivity': 'npm:@cabloy/vue-reactivity@^3.5.16'
   '@vue/server-renderer': 'npm:@cabloy/vue-server-renderer@^3.5.18'
   '@vue/shared': '3.5.13'
-  vue-router: 'npm:@cabloy/vue-router@^4.4.16'
+  vue-router: 'npm:@cabloy/vue-router@^4.4.18'
   zod: 'npm:@cabloy/zod@4.3.8'
 
 allowBuilds:

package/zova/src/suite/a-demo/modules/demo-basic/src/.metadata/index.ts

@@ -26,7 +26,7 @@ declare module 'zova-module-demo-basic' {
 }
 /** model: end */
 /** model: begin */
-import { ModelTest } from '../model/test.js';
+import type { ModelTest } from '../model/test.js';
 import 'zova';
 declare module 'zova' {
   export interface IBeanRecordGeneral {
@@ -44,6 +44,9 @@ export * from '../page/locale/controller.jsx';
 export * from '../page/routeParams/controller.jsx';
 export * from '../page/routeQuery/controller.jsx';
 export * from '../page/routeQueryB/controller.jsx';
+export * from '../page/routedDialog/controller.jsx';
+export * from '../page/routedDialogDetail/controller.jsx';
+export * from '../page/routedDialogEntry/controller.jsx';
 export * from '../page/state/controller.jsx';
 export * from '../page/style/controller.jsx';
 export * from '../page/toolMinimal/controller.jsx';
@@ -102,6 +105,21 @@ declare module 'zova-module-demo-basic' {
           get scope(): ScopeModuleDemoBasic;
         }
 
+        export interface ControllerPageRoutedDialog {
+          /** @internal */
+          get scope(): ScopeModuleDemoBasic;
+        }
+
+        export interface ControllerPageRoutedDialogDetail {
+          /** @internal */
+          get scope(): ScopeModuleDemoBasic;
+        }
+
+        export interface ControllerPageRoutedDialogEntry {
+          /** @internal */
+          get scope(): ScopeModuleDemoBasic;
+        }
+
         export interface ControllerPageState {
           /** @internal */
           get scope(): ScopeModuleDemoBasic;
@@ -129,20 +147,23 @@ declare module 'zova-module-demo-basic' {
 }
 /** controller: end */
 /** controller: begin */
-import { ControllerActionView } from '../component/actionView/controller.jsx';
-import { ControllerCard } from '../component/card/controller.jsx';
-import { ControllerFormFieldTest } from '../component/formFieldTest/controller.jsx';
-import { ControllerTableCellTest } from '../component/tableCellTest/controller.jsx';
-import { ControllerPageComponent } from '../page/component/controller.jsx';
-import { ControllerPageLocale } from '../page/locale/controller.jsx';
-import { ControllerPageRouteParams } from '../page/routeParams/controller.jsx';
-import { ControllerPageRouteQuery } from '../page/routeQuery/controller.jsx';
-import { ControllerPageRouteQueryB } from '../page/routeQueryB/controller.jsx';
-import { ControllerPageState } from '../page/state/controller.jsx';
-import { ControllerPageStyle } from '../page/style/controller.jsx';
-import { ControllerPageToolMinimal } from '../page/toolMinimal/controller.jsx';
-import { ControllerPageToolOne } from '../page/toolOne/controller.jsx';
-import { ControllerPageToolTwo } from '../page/toolTwo/controller.jsx';
+import type { ControllerActionView } from '../component/actionView/controller.jsx';
+import type { ControllerCard } from '../component/card/controller.jsx';
+import type { ControllerFormFieldTest } from '../component/formFieldTest/controller.jsx';
+import type { ControllerTableCellTest } from '../component/tableCellTest/controller.jsx';
+import type { ControllerPageComponent } from '../page/component/controller.jsx';
+import type { ControllerPageLocale } from '../page/locale/controller.jsx';
+import type { ControllerPageRouteParams } from '../page/routeParams/controller.jsx';
+import type { ControllerPageRouteQuery } from '../page/routeQuery/controller.jsx';
+import type { ControllerPageRouteQueryB } from '../page/routeQueryB/controller.jsx';
+import type { ControllerPageRoutedDialog } from '../page/routedDialog/controller.jsx';
+import type { ControllerPageRoutedDialogDetail } from '../page/routedDialogDetail/controller.jsx';
+import type { ControllerPageRoutedDialogEntry } from '../page/routedDialogEntry/controller.jsx';
+import type { ControllerPageState } from '../page/state/controller.jsx';
+import type { ControllerPageStyle } from '../page/style/controller.jsx';
+import type { ControllerPageToolMinimal } from '../page/toolMinimal/controller.jsx';
+import type { ControllerPageToolOne } from '../page/toolOne/controller.jsx';
+import type { ControllerPageToolTwo } from '../page/toolTwo/controller.jsx';
 import 'zova';
 declare module 'zova' {
   export interface IBeanRecordLocal {
@@ -155,6 +176,9 @@ declare module 'zova' {
 'demo-basic.controller.pageRouteParams': ControllerPageRouteParams;
 'demo-basic.controller.pageRouteQuery': ControllerPageRouteQuery;
 'demo-basic.controller.pageRouteQueryB': ControllerPageRouteQueryB;
+'demo-basic.controller.pageRoutedDialog': ControllerPageRoutedDialog;
+'demo-basic.controller.pageRoutedDialogDetail': ControllerPageRoutedDialogDetail;
+'demo-basic.controller.pageRoutedDialogEntry': ControllerPageRoutedDialogEntry;
 'demo-basic.controller.pageState': ControllerPageState;
 'demo-basic.controller.pageStyle': ControllerPageStyle;
 'demo-basic.controller.pageToolMinimal': ControllerPageToolMinimal;
@@ -172,6 +196,11 @@ export * from './page/routeQuery.js';
 import { NSControllerPageRouteQuery } from './page/routeQuery.js';
 export * from './page/routeQueryB.js';
 import { NSControllerPageRouteQueryB } from './page/routeQueryB.js';
+export * from './page/routedDialog.js';
+export * from './page/routedDialogDetail.js';
+import { NSControllerPageRoutedDialogDetail } from './page/routedDialogDetail.js';
+export * from './page/routedDialogEntry.js';
+import { NSControllerPageRoutedDialogEntry } from './page/routedDialogEntry.js';
 export * from './page/state.js';
 export * from './page/style.js';
 export * from './page/toolMinimal.js';
@@ -189,6 +218,9 @@ export interface IPagePathRecord {
 '/demo/basic/routeParams/:id?': TypePagePathSchema<NSControllerPageRouteParams.ParamsInput,NSControllerPageRouteParams.QueryInput>;
 '/demo/basic/routeQuery': TypePagePathSchema<NSControllerPageRouteQuery.ParamsInput,NSControllerPageRouteQuery.QueryInput>;
 '/demo/basic/routeQueryB': TypePagePathSchema<NSControllerPageRouteQueryB.ParamsInput,NSControllerPageRouteQueryB.QueryInput>;
+'/demo/basic/routedDialog': TypePagePathSchema<undefined,undefined>;
+'/demo/basic/routedDialogDetail/:id': TypePagePathSchema<NSControllerPageRoutedDialogDetail.ParamsInput,NSControllerPageRoutedDialogDetail.QueryInput>;
+'/demo/basic/routedDialogEntry': TypePagePathSchema<NSControllerPageRoutedDialogEntry.ParamsInput,NSControllerPageRoutedDialogEntry.QueryInput>;
 '/demo/basic/state': TypePagePathSchema<undefined,undefined>;
 '/demo/basic/style': TypePagePathSchema<undefined,undefined>;
 '/demo/basic/toolMinimal': TypePagePathSchema<undefined,undefined>;
@@ -197,6 +229,7 @@ export interface IPagePathRecord {
 }
 export interface IPageNameRecord {
   'demo-basic:routeParams': TypePagePathSchema<NSControllerPageRouteParams.ParamsInput,NSControllerPageRouteParams.QueryInput>;
+'demo-basic:routedDialogDetail': TypePagePathSchema<NSControllerPageRoutedDialogDetail.ParamsInput,NSControllerPageRoutedDialogDetail.QueryInput>;
 'demo-basic:toolMinimal': TypePagePathSchema<undefined,undefined>;
 'demo-basic:toolOne': TypePagePathSchema<NSControllerPageToolOne.ParamsInput,NSControllerPageToolOne.QueryInput>;
 'demo-basic:toolTwo': TypePagePathSchema<NSControllerPageToolTwo.ParamsInput,NSControllerPageToolTwo.QueryInput>;
@@ -209,12 +242,19 @@ export const pagePathSchemas = {
 '/demo/basic/routeQueryB': {
           query: NSControllerPageRouteQueryB.querySchema,
         },
+'/demo/basic/routedDialogEntry': {
+          query: NSControllerPageRoutedDialogEntry.querySchema,
+        },
 };
 export const pageNameSchemas = {
 'demo-basic:routeParams': {
           params: NSControllerPageRouteParams.paramsSchema,
           query: NSControllerPageRouteParams.querySchema,
         },
+'demo-basic:routedDialogDetail': {
+          params: NSControllerPageRoutedDialogDetail.paramsSchema,
+          query: NSControllerPageRoutedDialogDetail.querySchema,
+        },
 'demo-basic:toolOne': {
           params: NSControllerPageToolOne.paramsSchema,
           query: NSControllerPageToolOne.querySchema,
@@ -237,6 +277,14 @@ export interface ControllerPageRouteQueryB {
         $params: NSControllerPageRouteQueryB.ParamsOutput;
 $query: NSControllerPageRouteQueryB.QueryOutput;
       }
+export interface ControllerPageRoutedDialogDetail {
+        $params: NSControllerPageRoutedDialogDetail.ParamsOutput;
+$query: NSControllerPageRoutedDialogDetail.QueryOutput;
+      }
+export interface ControllerPageRoutedDialogEntry {
+        $params: NSControllerPageRoutedDialogEntry.ParamsOutput;
+$query: NSControllerPageRoutedDialogEntry.QueryOutput;
+      }
 export interface ControllerPageToolOne {
         $params: NSControllerPageToolOne.ParamsOutput;
 $query: NSControllerPageToolOne.QueryOutput;
@@ -296,7 +344,7 @@ declare module 'zova-module-demo-basic' {
 }
 /** render: end */
 /** render: begin */
-import { RenderPageToolOne } from '../page/toolOne/render.jsx';
+import type { RenderPageToolOne } from '../page/toolOne/render.jsx';
 import 'zova';
 declare module 'zova' {
   export interface IBeanRecordLocal {
@@ -331,7 +379,7 @@ declare module 'zova-module-demo-basic' {
 }
 /** behavior: end */
 /** behavior: begin */
-import { BehaviorFormFieldLayout } from '../bean/behavior.formFieldLayout.jsx';
+import type { BehaviorFormFieldLayout } from '../bean/behavior.formFieldLayout.jsx';
 import 'zova';
 declare module 'zova' {
   export interface IBeanRecordLocal {
@@ -385,7 +433,7 @@ declare module 'zova-module-demo-basic' {
 }
 /** tableCell: end */
 /** tableCell: begin */
-import { TableCellTest } from '../bean/tableCell.test.jsx';
+import type { TableCellTest } from '../bean/tableCell.test.jsx';
 import 'zova';
 declare module 'zova' {
   export interface IBeanRecordGeneral {

package/zova/src/suite/a-demo/modules/demo-basic/src/.metadata/page/routedDialog.ts

@@ -0,0 +1,9 @@
+import { createZovaComponentPage } from 'zova';
+
+import { ControllerPageRoutedDialog } from '../../page/routedDialog/controller.jsx';
+
+export const ZPageRoutedDialog = createZovaComponentPage(
+  ControllerPageRoutedDialog,
+  undefined,
+  undefined,
+);

package/zova/src/suite/a-demo/modules/demo-basic/src/.metadata/page/routedDialogDetail.ts

@@ -0,0 +1,23 @@
+import { z } from 'zod';
+import { createZovaComponentPage } from 'zova';
+
+import { ControllerPageRoutedDialogDetail } from '../../page/routedDialogDetail/controller.jsx';
+import {
+  ControllerPageRoutedDialogDetailSchemaParams,
+  ControllerPageRoutedDialogDetailSchemaQuery,
+} from '../../page/routedDialogDetail/controller.jsx';
+export namespace NSControllerPageRoutedDialogDetail {
+  export const paramsSchema = ControllerPageRoutedDialogDetailSchemaParams;
+  export type ParamsInput = z.input<typeof ControllerPageRoutedDialogDetailSchemaParams>;
+  export type ParamsOutput = z.output<typeof ControllerPageRoutedDialogDetailSchemaParams>;
+
+  export const querySchema = ControllerPageRoutedDialogDetailSchemaQuery;
+  export type QueryInput = z.input<typeof ControllerPageRoutedDialogDetailSchemaQuery>;
+  export type QueryOutput = z.output<typeof ControllerPageRoutedDialogDetailSchemaQuery>;
+}
+
+export const ZPageRoutedDialogDetail = createZovaComponentPage(
+  ControllerPageRoutedDialogDetail,
+  undefined,
+  undefined,
+);

package/zova/src/suite/a-demo/modules/demo-basic/src/.metadata/page/routedDialogEntry.ts

@@ -0,0 +1,23 @@
+import { z } from 'zod';
+import { createZovaComponentPage } from 'zova';
+
+import { ControllerPageRoutedDialogEntry } from '../../page/routedDialogEntry/controller.jsx';
+import {
+  ControllerPageRoutedDialogEntrySchemaParams,
+  ControllerPageRoutedDialogEntrySchemaQuery,
+} from '../../page/routedDialogEntry/controller.jsx';
+export namespace NSControllerPageRoutedDialogEntry {
+  export const paramsSchema = ControllerPageRoutedDialogEntrySchemaParams;
+  export type ParamsInput = z.input<typeof ControllerPageRoutedDialogEntrySchemaParams>;
+  export type ParamsOutput = z.output<typeof ControllerPageRoutedDialogEntrySchemaParams>;
+
+  export const querySchema = ControllerPageRoutedDialogEntrySchemaQuery;
+  export type QueryInput = z.input<typeof ControllerPageRoutedDialogEntrySchemaQuery>;
+  export type QueryOutput = z.output<typeof ControllerPageRoutedDialogEntrySchemaQuery>;
+}
+
+export const ZPageRoutedDialogEntry = createZovaComponentPage(
+  ControllerPageRoutedDialogEntry,
+  undefined,
+  undefined,
+);

package/zova/src/suite/a-demo/modules/demo-basic/src/page/routedDialog/controller.tsx

@@ -0,0 +1,301 @@
+import type {
+  IModalRoutedDialogPresentationOptions,
+  IRoutedDialogHandle,
+} from 'zova-module-basic-app';
+
+import { BeanControllerPageBase } from 'zova';
+import { Controller } from 'zova-module-a-bean';
+import { ZPage } from 'zova-module-home-base';
+
+@Controller()
+export class ControllerPageRoutedDialog extends BeanControllerPageBase {
+  handleA?: IRoutedDialogHandle;
+  handleB?: IRoutedDialogHandle;
+  statusA = 'idle';
+  statusB = 'idle';
+  browserUrl = '-';
+  browserUrlAtOpen?: string;
+  mainRouteAtOpen?: string;
+  events: string[] = [];
+
+  protected async __init__() {
+    this.$ssr.handleDirectOrOnHydrated(() => {
+      this.browserUrl = window.location.href;
+    });
+  }
+
+  openA() {
+    this._open('A');
+  }
+
+  openB() {
+    this._open('B');
+  }
+
+  openAAndB() {
+    this._open('A');
+    this._open('B');
+  }
+
+  openAWithHandlePush() {
+    const handle = this._open('A');
+    void this._navigateHandle(handle, 'push');
+  }
+
+  openAWithHandleReplace() {
+    const handle = this._open('A');
+    void this._navigateHandle(handle, 'replace');
+  }
+
+  openAWithBackdropClose() {
+    this._open('A', true);
+  }
+
+  openAAndClose() {
+    const handle = this._open('A');
+    void this._closeHandleAfterReady(handle);
+  }
+
+  openAWithScalarWidth() {
+    this._open('A', false, { maxWidth: 720 });
+  }
+
+  openAWithPartialResponsiveWidth() {
+    this._open('A', false, { maxWidth: { md: 800 } });
+  }
+
+  openAWithScalarTopGutter() {
+    this._open('A', false, { topGutter: 80 });
+  }
+
+  openAWithPartialResponsiveTopGutter() {
+    this._open('A', false, { topGutter: { md: 64 } });
+  }
+
+  private _open(
+    dialog: 'A' | 'B',
+    closeOnBackdrop = false,
+    dialogOptions?: IModalRoutedDialogPresentationOptions,
+  ) {
+    const route = this.$router.getPagePath('/demo/basic/routedDialogEntry', {
+      query: {
+        dialog,
+        token: `dialog-${dialog.toLowerCase()}-entry`,
+        via: 'open',
+        step: 0,
+      },
+    });
+    this.mainRouteAtOpen = this.$pageRoute?.fullPath;
+    this.browserUrlAtOpen = typeof window === 'undefined' ? undefined : window.location.href;
+    const handle = this.$appModal.routedDialog(
+      {
+        route,
+        title: `Routed Dialog ${dialog}`,
+        onClose: () => {
+          this._record(`${dialog}: onClose`);
+          if (dialog === 'A') {
+            this.statusA = 'closed';
+            this.handleA = undefined;
+          } else {
+            this.statusB = 'closed';
+            this.handleB = undefined;
+          }
+        },
+      },
+      {
+        closeOnBackdrop,
+        closeOnEscape: true,
+        showCloseButton: true,
+        ...dialogOptions,
+      },
+    );
+    if (dialog === 'A') {
+      this.handleA = handle;
+      this.statusA = 'loading';
+    } else {
+      this.handleB = handle;
+      this.statusB = 'loading';
+    }
+    void this._awaitReady(dialog, handle);
+    return handle;
+  }
+
+  private async _awaitReady(dialog: 'A' | 'B', handle: IRoutedDialogHandle) {
+    try {
+      await handle.ready;
+      if (dialog === 'A') this.statusA = 'ready';
+      else this.statusB = 'ready';
+      this._record(`${dialog}: ready`);
+    } catch (error) {
+      if (dialog === 'A') this.statusA = 'error';
+      else this.statusB = 'error';
+      this._record(`${dialog}: ${String(error)}`);
+    }
+  }
+
+  private async _navigateHandle(handle: IRoutedDialogHandle, action: 'push' | 'replace') {
+    try {
+      await handle.ready;
+      const route = this.$router.getPagePath('/demo/basic/routedDialogDetail/:id', {
+        params: { id: action === 'push' ? 101 : 202 },
+        query: {
+          dialog: 'A',
+          token: `dialog-a-handle-${action}`,
+          via: `handle-${action}`,
+          step: action === 'push' ? 1 : 2,
+        },
+      });
+      if (action === 'push') await handle.push(route);
+      else await handle.replace(route);
+      this._record(`A: handle.${action}`);
+    } catch (error) {
+      this._record(`A: handle.${action} ${String(error)}`);
+    }
+  }
+
+  private async _closeHandleAfterReady(handle: IRoutedDialogHandle) {
+    try {
+      await handle.ready;
+      this._record('A: ready for delayed handle.close');
+      setTimeout(() => {
+        handle.close();
+        this._record('A: handle.close');
+      }, 1500);
+    } catch (error) {
+      this._record(`A: delayed close ${String(error)}`);
+    }
+  }
+
+  private _record(event: string) {
+    this.events = [...this.events, event];
+  }
+
+  private async openStudentList() {
+    const route = this.$router.getPagePath('/rest/resource/:resource', {
+      params: {
+        resource: 'training-student:student',
+      },
+    });
+    this.$appModal.routedDialog({
+      route,
+      title: 'Student List',
+    });
+  }
+
+  protected render() {
+    return (
+      <ZPage>
+        <div class="mx-auto flex max-w-4xl flex-col gap-6">
+          <div>
+            <h1 class="text-2xl font-bold">Routed Dialog Manual Validation</h1>
+            <p class="mt-2 text-base-content/70">
+              Open a memory-history dialog and verify that every dialog route stays separate from
+              this browser route.
+            </p>
+          </div>
+
+          <div class="grid gap-4 md:grid-cols-2">
+            <div class="card bg-base-200">
+              <div class="card-body gap-2">
+                <h2 class="card-title text-base">Main route sentinel</h2>
+                <code class="break-all">{this.$pageRoute?.fullPath ?? '-'}</code>
+                <code class="break-all">{this.browserUrl}</code>
+              </div>
+            </div>
+            <div class="card bg-base-200">
+              <div class="card-body gap-2">
+                <h2 class="card-title text-base">Route at latest open</h2>
+                <code class="break-all">{this.mainRouteAtOpen ?? '-'}</code>
+                <code class="break-all">{this.browserUrlAtOpen ?? '-'}</code>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex flex-wrap gap-2">
+            <button class="btn btn-primary" onClick={() => this.openA()}>
+              Open A
+            </button>
+            <button class="btn btn-secondary" onClick={() => this.openB()}>
+              Open B
+            </button>
+            <button class="btn btn-outline" onClick={() => this.openAAndB()}>
+              Open A and B
+            </button>
+            <button class="btn btn-outline" onClick={() => this.openAWithHandlePush()}>
+              Open A with handle.push
+            </button>
+            <button class="btn btn-outline" onClick={() => this.openAWithHandleReplace()}>
+              Open A with handle.replace
+            </button>
+            <button class="btn btn-outline" onClick={() => this.openAWithBackdropClose()}>
+              Open A (backdrop close)
+            </button>
+            <button class="btn btn-outline" onClick={() => this.openAAndClose()}>
+              Open A then handle.close
+            </button>
+            <button class="btn btn-outline" onClick={() => this.openAWithScalarWidth()}>
+              Open A (720px width)
+            </button>
+            <button class="btn btn-outline" onClick={() => this.openAWithPartialResponsiveWidth()}>
+              Open A (md 800px width)
+            </button>
+            <button class="btn btn-outline" onClick={() => this.openAWithScalarTopGutter()}>
+              Open A (80px top gutter)
+            </button>
+            <button
+              class="btn btn-outline"
+              onClick={() => this.openAWithPartialResponsiveTopGutter()}
+            >
+              Open A (md 64px top gutter)
+            </button>
+          </div>
+
+          <div class="overflow-x-auto">
+            <table class="table">
+              <thead>
+                <tr>
+                  <th>Dialog</th>
+                  <th>Status</th>
+                  <th>Handle</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>A</td>
+                  <td>{this.statusA}</td>
+                  <td>{this.handleA ? 'active' : '-'}</td>
+                </tr>
+                <tr>
+                  <td>B</td>
+                  <td>{this.statusB}</td>
+                  <td>{this.handleB ? 'active' : '-'}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div class="card bg-base-200">
+            <div class="card-body">
+              <h2 class="card-title text-base">Lifecycle log</h2>
+              <ol class="list-inside list-decimal font-mono text-sm">
+                {this.events.map((event, index) => (
+                  <li key={`${index}-${event}`}>{event}</li>
+                ))}
+              </ol>
+            </div>
+          </div>
+          <div>
+            <button
+              class="btn btn-outline"
+              onClick={() => {
+                this.openStudentList();
+              }}
+            >
+              Student List
+            </button>
+          </div>
+        </div>
+      </ZPage>
+    );
+  }
+}

package/zova/src/suite/a-demo/modules/demo-basic/src/page/routedDialogDetail/controller.tsx

@@ -0,0 +1,135 @@
+import { RouterLink } from '@cabloy/vue-router';
+import { z } from 'zod';
+import { BeanControllerPageBase } from 'zova';
+import { Controller } from 'zova-module-a-bean';
+import { ZPage } from 'zova-module-home-base';
+
+export const ControllerPageRoutedDialogDetailSchemaParams = z.object({
+  id: z.number(),
+});
+
+export const ControllerPageRoutedDialogDetailSchemaQuery = z.object({
+  dialog: z.enum(['A', 'B']).optional().default('A'),
+  token: z.string().optional().default('detail'),
+  via: z.string().optional().default('unknown'),
+  step: z.number().optional().default(0),
+});
+
+@Controller()
+export class ControllerPageRoutedDialogDetail extends BeanControllerPageBase {
+  get entryRoute() {
+    return this.$router.getPagePath('/demo/basic/routedDialogEntry', {
+      query: {
+        ...this.$query,
+        token: `${this.$query.token}-entry`,
+        via: 'detail-entry',
+        step: this.$query.step + 1,
+      },
+    });
+  }
+
+  pushNextDetail() {
+    const route = this.$router.getPagePath('/demo/basic/routedDialogDetail/:id', {
+      params: { id: this.$params.id + 1 },
+      query: {
+        ...this.$query,
+        token: `${this.$query.token}-push`,
+        via: 'detail-push',
+        step: this.$query.step + 1,
+      },
+    });
+    this.$router.push(route);
+  }
+
+  replaceNextDetail() {
+    const route = this.$router.getPagePath('/demo/basic/routedDialogDetail/:id', {
+      params: { id: this.$params.id + 10 },
+      query: {
+        ...this.$query,
+        token: `${this.$query.token}-replace`,
+        via: 'detail-replace',
+        step: this.$query.step + 10,
+      },
+    });
+    this.$router.replace(route);
+  }
+
+  protected render() {
+    return (
+      <ZPage>
+        <div class="flex flex-col gap-4 p-1">
+          <div>
+            <h1 class="text-xl font-bold">Routed Dialog Detail</h1>
+            <p class="text-base-content/70">
+              The typed route state below belongs to this routed-dialog instance only.
+            </p>
+          </div>
+
+          <div class="overflow-x-auto">
+            <table class="table">
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Value</th>
+                  <th>Type</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>$pageRoute.fullPath</td>
+                  <td class="break-all">{this.$pageRoute?.fullPath}</td>
+                  <td>string</td>
+                </tr>
+                <tr>
+                  <td>$route.fullPath</td>
+                  <td class="break-all">{this.$route.fullPath}</td>
+                  <td>string</td>
+                </tr>
+                <tr>
+                  <td>$params.id</td>
+                  <td>{this.$params.id}</td>
+                  <td>{typeof this.$params.id}</td>
+                </tr>
+                <tr>
+                  <td>$query.dialog</td>
+                  <td>{this.$query.dialog}</td>
+                  <td>{typeof this.$query.dialog}</td>
+                </tr>
+                <tr>
+                  <td>$query.token</td>
+                  <td>{this.$query.token}</td>
+                  <td>{typeof this.$query.token}</td>
+                </tr>
+                <tr>
+                  <td>$query.via</td>
+                  <td>{this.$query.via}</td>
+                  <td>{typeof this.$query.via}</td>
+                </tr>
+                <tr>
+                  <td>$query.step</td>
+                  <td>{this.$query.step}</td>
+                  <td>{typeof this.$query.step}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div class="flex flex-wrap gap-2">
+            <button class="btn btn-primary" onClick={() => this.pushNextDetail()}>
+              Local push next detail
+            </button>
+            <button class="btn btn-secondary" onClick={() => this.replaceNextDetail()}>
+              Local replace next detail
+            </button>
+            <button class="btn btn-outline" onClick={() => this.$router.back()}>
+              Local router.back
+            </button>
+            <RouterLink class="btn btn-outline" to={this.entryRoute}>
+              RouterLink back to entry
+            </RouterLink>
+          </div>
+        </div>
+      </ZPage>
+    );
+  }
+}