@antelopejs/dms 0.7.7 → 0.7.9

package/frontend-vue/layers/dms-ui/app/build/composables/period/usePeriodLocation.ts

@@ -0,0 +1,189 @@
+import { router as inertiaRouter } from "@inertiajs/vue3";
+import { onMounted, watch } from "vue";
+import type { UsePeriodReturn } from "#dms-core/app/composables/period/usePeriod";
+import {
+  isPeriodQueryCurrent,
+  mergePeriodSearch,
+  periodQueryKeys,
+  rememberedPeriodKey,
+  rememberPeriod,
+  type RememberedPeriods,
+  type PeriodQuery,
+  type PeriodQueryKeys,
+  type PeriodSelection,
+  type PeriodSource,
+  resolvePeriodSelection,
+  writePeriodQuery,
+} from "./periodQuery";
+
+export interface PeriodLocationOptions {
+  /** The selector's id: the prefix of its URL keys. */
+  id: string;
+  /** The page it is on: its last choice is kept per page and per id. */
+  pageId: string;
+  /** What the period falls back to when no source names a valid one. */
+  fallback: PeriodSelection;
+}
+
+/**
+ * The preference holding the user's last choice of each selector
+ * (`usePreferences`), capped to the most recent ones.
+ */
+export const PERIOD_PREFERENCE_KEY = "periods";
+const STORED_KEYS = periodQueryKeys();
+
+function readSelection(period: UsePeriodReturn): PeriodSelection {
+  return {
+    preset: period.preset.value,
+    comparison: period.comparison.value,
+    customRange: period.customRange.value,
+    customCompareRange: period.customCompareRange.value,
+  };
+}
+
+function applySelection(
+  period: UsePeriodReturn,
+  selection: PeriodSelection,
+): void {
+  period.customRange.value = selection.customRange;
+  period.customCompareRange.value = selection.customCompareRange;
+  period.preset.value = selection.preset;
+  period.comparison.value = selection.comparison;
+}
+
+function urlKeysText(query: PeriodQuery, keys: PeriodQueryKeys): string {
+  return JSON.stringify(Object.values(keys).map((key) => query[key] ?? null));
+}
+
+function selectionText(selection: PeriodSelection): string {
+  return JSON.stringify(writePeriodQuery(selection, STORED_KEYS));
+}
+
+/**
+ * Writes the period into the URL: the history entry is replaced, and no
+ * request reloads the page. The browser's URL is written at once, so a
+ * second selector writing in the same tick merges into it; Inertia's
+ * client-side replace then moves its page URL, which the DMS route follows,
+ * so a component writing the query from the route (a tab, a quick action)
+ * carries the period on instead of the one the page was opened with.
+ */
+function replacePeriodInUrl(
+  keys: PeriodQueryKeys,
+  selection: PeriodSelection,
+): string | null {
+  if (typeof window === "undefined") return null;
+  const url = new URL(window.location.href);
+  const query = Object.fromEntries(url.searchParams);
+  if (isPeriodQueryCurrent(query, keys, selection)) return null;
+  url.search = mergePeriodSearch(url.search, keys, selection);
+  const written = urlKeysText(Object.fromEntries(url.searchParams), keys);
+  window.history.replaceState(window.history.state, "", url);
+  inertiaRouter.replace({
+    url: `${url.pathname}${url.search}${url.hash}`,
+    preserveState: true,
+    preserveScroll: true,
+  });
+  return written;
+}
+
+/** The user's last choice of one selector, kept in the preferences. */
+function useRememberedPeriod(pageId: string, id: string) {
+  const { getPreference, setPreference } = usePreferences();
+  const key = rememberedPeriodKey(pageId, id);
+  const all = () => getPreference<RememberedPeriods>(PERIOD_PREFERENCE_KEY, {});
+  return {
+    source: (): PeriodSource => ({
+      query: all()[key] ?? {},
+      keys: STORED_KEYS,
+    }),
+    remember: (selection: PeriodSelection) =>
+      setPreference(
+        PERIOD_PREFERENCE_KEY,
+        rememberPeriod(all(), key, writePeriodQuery(selection, STORED_KEYS)),
+      ),
+  };
+}
+
+/**
+ * The URL writes of one selector. The route catches up with each write
+ * later, and a pick made meanwhile must not be undone by the URL of the one
+ * before: `isEcho` tells a route naming a URL written here from a change.
+ */
+function usePeriodUrlWriter(keys: PeriodQueryKeys) {
+  const pending: string[] = [];
+  return {
+    write: (selection: PeriodSelection) => {
+      const written = replacePeriodInUrl(keys, selection);
+      if (written !== null) pending.push(written);
+    },
+    isEcho: (text: string) => {
+      const index = pending.indexOf(text);
+      if (index === -1) return false;
+      pending.splice(0, index + 1);
+      return true;
+    },
+  };
+}
+
+/**
+ * Keeps a selector's period in the page URL (`?<id>.period=`, see
+ * `periodQuery`) and its last choice in the user's preferences. The period
+ * starts from the URL, then from that last choice, then from `fallback`. Both
+ * are read in setup, on the server too: the preferences are a cookie, so the
+ * server renders the period the browser will show.
+ *
+ * The URL is written once mounted, so a copied URL always carries the
+ * period, then on every change: the history entry is replaced instead of
+ * pushed, so Back leaves the page rather than stepping through every pick,
+ * and the page is not requested again, only the bound cards and tables
+ * refetch. A route changed from outside (Back to the page with another
+ * period, a link) moves the period.
+ */
+export function usePeriodLocation(
+  period: UsePeriodReturn,
+  options: PeriodLocationOptions,
+): void {
+  const route = useDmsRoute();
+  const urlKeys = periodQueryKeys(options.id);
+  const remembered = useRememberedPeriod(options.pageId, options.id);
+  const writer = usePeriodUrlWriter(urlKeys);
+  const choices = {
+    presets: period.presets.value,
+    comparisons: period.comparisons.value,
+  };
+  const urlSource = (): PeriodSource => ({
+    query: route.query as PeriodQuery,
+    keys: urlKeys,
+  });
+
+  applySelection(
+    period,
+    resolvePeriodSelection(
+      [urlSource(), remembered.source()],
+      choices,
+      options.fallback,
+    ),
+  );
+  onMounted(() => writer.write(readSelection(period)));
+
+  watch(
+    () => selectionText(readSelection(period)),
+    () => {
+      const selection = readSelection(period);
+      remembered.remember(selection);
+      writer.write(selection);
+    },
+  );
+
+  // Only the route is followed here: the preferences move with the period.
+  watch(
+    () => urlKeysText(route.query as PeriodQuery, urlKeys),
+    (text) => {
+      if (writer.isEcho(text)) return;
+      const current = readSelection(period);
+      const next = resolvePeriodSelection([urlSource()], choices, current);
+      if (selectionText(next) === selectionText(current)) return;
+      applySelection(period, next);
+    },
+  );
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableListData.ts

@@ -18,6 +18,11 @@ export interface TableListDataOptions<T extends Record<string, unknown>> {
   archiveQuery: ComputedRef<Query>;
   /** A self-managed display (the kanban) reads its own rows. */
   isSelfManaged: ComputedRef<boolean>;
+  /**
+   * Added to each request when it leaves, never watched: the live hold's
+   * bound must not list the rows again by changing (see useTableLiveHold).
+   */
+  heldQuery?: () => Query;
 }
 
 /** One counter: its id and its list query, as the table view builds it. */
@@ -32,8 +37,12 @@ export interface TableCountsDataOptions<T extends Record<string, unknown>> {
   rows: TableRows<T>;
   queries: ComputedRef<TableCountRequest[]>;
   archiveQuery: ComputedRef<Query>;
+  /** Added to each request when it leaves, never watched (see the list's). */
+  heldQuery?: () => Query;
 }
 
+const NO_HELD_QUERY = (): Query => ({});
+
 const EMPTY_LIST_RESULT: TableViewListResponse<never> = {
   results: [],
   total: 0,
@@ -51,6 +60,7 @@ export function useTableListData<T extends Record<string, unknown>>(
   options: TableListDataOptions<T>,
 ) {
   const { rows, query, archiveQuery, isSelfManaged } = options;
+  const heldQuery = options.heldQuery ?? NO_HELD_QUERY;
   const key = buildTableDataKey({
     componentId: options.componentId,
     pageId: options.pageId,
@@ -61,10 +71,11 @@ export function useTableListData<T extends Record<string, unknown>>(
   });
   return useServerRenderedAsyncData(
     key,
-    (): Promise<TableViewListResponse<T>> =>
+    // `null` while a source waits on its period scope: the table's skeleton.
+    (): Promise<TableViewListResponse<T> | null> =>
       isSelfManaged.value
         ? Promise.resolve(EMPTY_LIST_RESULT)
-        : rows.list({ ...query.value, ...archiveQuery.value }),
+        : rows.list({ ...query.value, ...archiveQuery.value, ...heldQuery() }),
     { watch: [query, archiveQuery, isSelfManaged, rows.sourceUrl] },
   );
 }
@@ -77,6 +88,7 @@ export function useTableCountsData<T extends Record<string, unknown>>(
   options: TableCountsDataOptions<T>,
 ) {
   const { rows, queries, archiveQuery } = options;
+  const heldQuery = options.heldQuery ?? NO_HELD_QUERY;
   const sourceSuffix = rows.sourceUrl.value ? `-${rows.sourceUrl.value}` : "";
   return useServerRenderedAsyncData<Record<string, number>>(
     `table-view-${options.componentId}-${options.pageId}-tab-counts${sourceSuffix}`,
@@ -85,7 +97,7 @@ export function useTableCountsData<T extends Record<string, unknown>>(
       return await rows.countBatch(
         queries.value.map(({ id, query }) => ({
           id,
-          query: { ...query, ...archiveQuery.value },
+          query: { ...query, ...archiveQuery.value, ...heldQuery() },
         })),
       );
     },

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableLiveHold.ts

@@ -0,0 +1,77 @@
+import { computed, ref, watch, type ComputedRef } from "vue";
+import { usePageLive } from "../../../composables/live/usePageLive";
+import type { LiveGate } from "../live/currentPageLive";
+import { LIVE_HELD_AT_QUERY_KEY } from "./useTableRows";
+
+type Query = Record<string, unknown>;
+
+export interface TableLiveHoldOptions {
+  /** The table declares `liveHold`. */
+  isEnabled: boolean;
+  /** A `TableView.fromSource` table: its route receives the hold's bound. */
+  isSource: boolean;
+  /**
+   * The table's refresh gate (useRefreshTriggers), read when used: the table
+   * sets it up after the list this hold bounds.
+   */
+  gate: () => LiveGate;
+}
+
+export interface TableLiveHold {
+  /** The rows are held: the table declares `liveHold` and the page is paused. */
+  isHolding: ComputedRef<boolean>;
+  /** Events the table received since its rows were held or last shown. */
+  newCount: ComputedRef<number>;
+  /** Reads the rows once, staying paused, and holds them from now. */
+  showNew: () => void;
+  /** The bound a source route receives with each request while held. */
+  heldQuery: () => Query;
+}
+
+const NO_QUERY: Query = {};
+
+/**
+ * The `liveHold` of a table view: while its live page is paused, the table
+ * keeps its rows — the gate already requests nothing on its events — and a
+ * source route is told the moment they were frozen, so the user's own search,
+ * sort and pagination list the rows as they stood. Show reads them once more
+ * without leaving the pause.
+ *
+ * @internal
+ */
+export function useTableLiveHold(options: TableLiveHoldOptions): TableLiveHold {
+  const { isEnabled, isPaused } = usePageLive();
+  const pausedAt = ref<number | null>(null);
+  const isHolding = computed(
+    () => options.isEnabled && isEnabled.value && isPaused.value,
+  );
+
+  watch(
+    isHolding,
+    (holding) => {
+      pausedAt.value = holding ? Date.now() : null;
+    },
+    { immediate: true },
+  );
+
+  // The rows are as fresh as the pause, or as the last read the user asked
+  // for since (Show, an action of theirs).
+  const heldAt = () =>
+    pausedAt.value === null
+      ? null
+      : Math.max(pausedAt.value, options.gate().lastReadAt.value);
+
+  return {
+    isHolding,
+    newCount: computed(() =>
+      isHolding.value ? options.gate().missed.value : 0,
+    ),
+    showNew: () => options.gate().catchUp(),
+    heldQuery: () => {
+      const at = heldAt();
+      return options.isSource && at !== null
+        ? { [LIVE_HELD_AT_QUERY_KEY]: new Date(at).toISOString() }
+        : NO_QUERY;
+    },
+  };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableRows.ts

@@ -9,6 +9,10 @@ import {
   type ReplaceUrlVariablesContext,
   resolveUrlVariables,
 } from "../../utils/urlVariables";
+import {
+  appendPeriodToUrl,
+  usePeriodScope,
+} from "#dms-core/app/composables/period/usePeriodScope";
 
 type Query = Record<string, unknown>;
 
@@ -37,7 +41,13 @@ const SEARCH_KEY = "search";
 const SORT_KEYS = ["sortKey", "sortDirection"];
 const PAGE_KEYS = ["offset", "limit"];
 const DESCENDING = "desc";
+/**
+ * Sent while a `liveHold` table is paused: the moment its rows were frozen,
+ * for a source route to list the rows as they stood then.
+ */
+export const LIVE_HELD_AT_QUERY_KEY = "liveHeldAt";
 const NO_ROUTE_VALUES: ReplaceUrlVariablesContext = { routeQuery: {} };
+const ROW_ID_TOKEN = "{id}";
 
 type SourceCapabilities = TableViewSourceConfig["capabilities"];
 
@@ -54,6 +64,7 @@ const QUERY_KEY_CAPABILITIES: Array<
 /**
  * The part of the list query a source route handles, by its capabilities: a
  * key no capability names (a controller's `showArchived`…) never reaches it.
+ * The live hold's bound always does: a route not reading it lists as usual.
  */
 export function sourceRouteQuery(
   query: Query,
@@ -61,6 +72,7 @@ export function sourceRouteQuery(
 ): Query {
   return Object.fromEntries(
     Object.entries(query).filter(([key]) => {
+      if (key === LIVE_HELD_AT_QUERY_KEY) return true;
       const entry = QUERY_KEY_CAPABILITIES.find(([matches]) => matches(key));
       return !!entry && !!capabilities[entry[1]];
     }),
@@ -135,28 +147,35 @@ function emptySourcePage<T>(query: Query): TableViewListResponse<T> {
  * the rest to the browser; a route answering one page is taken as it is.
  *
  * A source's `{{params.X}}` and `{{query.X}}` tokens are filled from `route`;
- * while one has no value nothing is requested and the list is empty.
- * `sourceUrl` is the URL requested, for the caller to list again when it
- * changes.
+ * while one has no value nothing is requested and the list is empty. A
+ * source's `periodScope` adds the period of its selector to the URL, like a
+ * chart's; until that selector registers, nothing is requested and the list
+ * answers `null`, which the table draws as its skeleton. `sourceUrl` is the
+ * URL requested, for the caller to list again when it changes.
  */
 export function useTableRows<T extends Record<string, unknown>>(
   options: TableRowsOptions,
 ) {
   const { api, location, source, columns } = options;
-
-  const sourceUrl = computed(() =>
-    source
-      ? resolveUrlVariables(
-          source.fetchUrl,
-          options.route?.() ?? NO_ROUTE_VALUES,
-        )
-      : undefined,
+  const periodScope = usePeriodScope(source?.periodScope);
+  const isPeriodPending = computed(
+    () => !!source?.periodScope && !periodScope.value,
   );
 
+  const sourceUrl = computed(() => {
+    if (!source) return undefined;
+    const url = resolveUrlVariables(
+      source.fetchUrl,
+      options.route?.() ?? NO_ROUTE_VALUES,
+    );
+    return source.periodScope ? appendPeriodToUrl(url, periodScope.value) : url;
+  });
+
   const listFromSource = async (
     sourceConfig: TableViewSourceConfig,
     query: Query,
-  ): Promise<TableViewListResponse<T>> => {
+  ): Promise<TableViewListResponse<T> | null> => {
+    if (isPeriodPending.value) return null;
     const url = sourceUrl.value;
     if (!url) return emptySourcePage(query);
     const { capabilities } = sourceConfig;
@@ -173,7 +192,7 @@ export function useTableRows<T extends Record<string, unknown>>(
     return processSourceRows(response.results, query, capabilities, columns);
   };
 
-  const list = (query: Query): Promise<TableViewListResponse<T>> =>
+  const list = (query: Query): Promise<TableViewListResponse<T> | null> =>
     source
       ? listFromSource(source, query)
       : api<TableViewListResponse<T>>(`${location}/list`, { query });
@@ -190,21 +209,37 @@ export function useTableRows<T extends Record<string, unknown>>(
     }
     const totals = await Promise.all(
       queries.map(async ({ id, query }) => {
-        const { total } = await listFromSource(source, {
+        const page = await listFromSource(source, {
           ...query,
           offset: 0,
           limit: 1,
         });
-        return [id, total] as const;
+        return page ? [[id, page.total] as const] : [];
       }),
     );
-    return Object.fromEntries(totals);
+    return Object.fromEntries(totals.flat());
+  };
+
+  // A source reads one row through its `fetchRowUrl`, if it declares one. It
+  // sends no list query, the period included: one row by id depends on none.
+  const getSourceRow = (
+    sourceConfig: TableViewSourceConfig,
+    id: string,
+  ): Promise<T | undefined> => {
+    const url = resolveUrlVariables(
+      sourceConfig.fetchRowUrl?.replaceAll(
+        ROW_ID_TOKEN,
+        encodeURIComponent(id),
+      ),
+      options.route?.() ?? NO_ROUTE_VALUES,
+    );
+    return url ? api<T>(url) : Promise.resolve(undefined);
   };
 
-  /** One row by id: a source has no route for it. */
+  /** One row by id: a source's `fetchRowUrl`, a controller's `get` route. */
   const getRow = (id: string): Promise<T | undefined> =>
     source
-      ? Promise.resolve(undefined)
+      ? getSourceRow(source, id)
       : api<T>(`${location}/get`, { query: { id } });
 
   return { isSource: !!source, sourceUrl, list, countBatch, getRow };

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableViewConfig.ts

@@ -123,6 +123,7 @@ export const useTableViewConfig = <T extends Data>(
     maxHeight: config.maxHeight,
     rowIdKey: config.rowIdKey,
     rowActions: config.rowActions,
+    rowClick: config.rowClick,
     customNavItems: config.customNavItems,
     componentId: config.componentId,
     formContainer: config.formContainer,

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/utils/recordLink.ts

@@ -1,3 +1,4 @@
+import type { CustomRowAction } from "../../../../types/row-action";
 import { readTableUrlKey, type TableUrlScope } from "./views";
 
 /** Query key of the row a `deepLink` action has open. */
@@ -21,12 +22,70 @@ export function readRecordId(
 /**
  * Writes (or, without an id, removes) the open row in the browser's URL in
  * place: no visit, no history entry, the link and a reload open it again.
+ * Returns what it wrote, for {@link clearWrittenRecord}.
  */
-export function writeRecordId(scope: TableUrlScope, id?: string): void {
-  if (typeof window === "undefined") return;
+export function writeRecordId(
+  scope: TableUrlScope,
+  id?: string,
+): WrittenRecord | undefined {
+  if (typeof window === "undefined") return undefined;
   const url = new URL(window.location.href);
   const key = recordUrlKey(scope);
   if (id) url.searchParams.set(key, id);
   else url.searchParams.delete(key);
   window.history.replaceState(window.history.state, "", url);
+  return id ? { pathname: url.pathname, key, id } : undefined;
+}
+
+/**
+ * Whether an action keeps the row it opens in the URL: a side panel does
+ * unless its target or the action sets `deepLink: false`, a drawer or a modal
+ * only with the action's `deepLink: true`.
+ */
+export function isDeepLinkAction(action: CustomRowAction): boolean {
+  if (action.target.type !== "sidePanel") return !!action.deepLink;
+  return (action.deepLink ?? action.target.deepLink) !== false;
+}
+
+/** The row a table wrote in the URL, and the page it wrote it on. */
+export interface WrittenRecord {
+  pathname: string;
+  key: string;
+  id: string;
+}
+
+/**
+ * Removes the row a table wrote in the URL, only while the URL still holds
+ * it: a container closing as the user leaves the page must not erase the
+ * `?record=` of the page reached.
+ */
+export function clearWrittenRecord(written: WrittenRecord | undefined): void {
+  if (typeof window === "undefined" || !written) return;
+  const url = new URL(window.location.href);
+  if (url.pathname !== written.pathname) return;
+  if (url.searchParams.get(written.key) !== written.id) return;
+  url.searchParams.delete(written.key);
+  window.history.replaceState(window.history.state, "", url);
+}
+
+/** Where a deep link finds its row: among the rows listed, or by id. */
+export interface DeepLinkedRowSource<T> {
+  listed: T[] | undefined;
+  idOf: (row: T) => string | undefined;
+  /** Reads one row: a controller's `get` route, a source's `fetchRowUrl`. */
+  getRow: (id: string) => Promise<T | undefined>;
+}
+
+/**
+ * The row a deep link names: the listed one, else the one read by id — a row
+ * beyond the first page. A row the route cannot answer (gone, a 404) opens
+ * nothing.
+ */
+export async function resolveDeepLinkedRow<T>(
+  id: string,
+  source: DeepLinkedRowSource<T>,
+): Promise<T | undefined> {
+  const listed = source.listed?.find((row) => source.idOf(row) === id);
+  if (listed) return listed;
+  return source.getRow(id).catch(() => undefined);
 }

package/frontend-vue/layers/dms-ui/app/build/utils/rowClickTrigger.ts

@@ -0,0 +1,73 @@
+/**
+ * What runs a row's click action (backend `TableViewRowClick`): a double-click
+ * by default, or a single click.
+ */
+export type TableViewRowClick = "single" | "double";
+
+/** A reason a pointer event on a row must not run its click action. */
+type RowClickGuard = (event: MouseEvent) => boolean;
+
+interface RowClickTrigger {
+  eventType: string;
+  guards: RowClickGuard[];
+}
+
+const DEFAULT_ROW_CLICK: TableViewRowClick = "double";
+
+// The controls a row may hold: a click on one is that control's, not the
+// row's.
+const ROW_CONTROL_SELECTOR = [
+  "a",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "label",
+  "summary",
+  "[role='button']",
+  "[role='checkbox']",
+  "[role='menuitem']",
+  "[role='switch']",
+  "[contenteditable='true']",
+].join(", ");
+
+// The second click of a double-click: the first one already ran the action.
+const isRepeatClick: RowClickGuard = (event) => event.detail > 1;
+
+const isOnRowControl: RowClickGuard = (event) => {
+  const target = event.target as Element | null;
+  const control = target?.closest?.(ROW_CONTROL_SELECTOR);
+  if (!control) return false;
+  const row = event.currentTarget as Element | null;
+  return !row || row.contains(control);
+};
+
+// A click ending a drag over the cells selects their text: the user copies a
+// value, not opens the row.
+const endsTextSelection: RowClickGuard = () => {
+  if (typeof window === "undefined") return false;
+  const selection = window.getSelection();
+  return !!selection && !selection.isCollapsed && selection.toString() !== "";
+};
+
+const ROW_CLICK_TRIGGERS: Record<TableViewRowClick, RowClickTrigger> = {
+  // Unchanged from before `rowClick` existed: any double-click on the row.
+  double: { eventType: "dblclick", guards: [] },
+  single: {
+    eventType: "click",
+    guards: [isRepeatClick, isOnRowControl, endsTextSelection],
+  },
+};
+
+/**
+ * Whether `event`, a click or a double-click on a row, runs the row's click
+ * action under the table's `rowClick` mode.
+ */
+export function isRowClickTrigger(
+  mode: TableViewRowClick | undefined,
+  event: MouseEvent,
+): boolean {
+  const trigger = ROW_CLICK_TRIGGERS[mode ?? DEFAULT_ROW_CLICK];
+  if (!trigger || event.type !== trigger.eventType) return false;
+  return !trigger.guards.some((guard) => guard(event));
+}

package/frontend-vue/layers/dms-ui/app/components/RecursiveComponent.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { usePermissionPreview } from "#dms-core/app/build/composables/auth/usePermissionPreview";
 import { childLayoutPath } from "#dms-core/app/build/utils/permission-preview";
+import { childComponentId } from "../utils/componentId";
 import {
   GRID_DECLARED_COLUMNS,
   type GridDeclaredColumns,
@@ -111,7 +112,7 @@ provide<GridDeclaredColumns>(GRID_DECLARED_COLUMNS, {
           <DmsRecursiveComponent
             :component="child"
             :page-id="pageId"
-            :component-id="`${componentId}-child-${child.id}`"
+            :component-id="childComponentId(componentId, child.id)"
             :route-params="routeParams"
             :layout-path="childLayoutPath(layoutPath, child.id)"
           />
@@ -120,7 +121,7 @@ provide<GridDeclaredColumns>(GRID_DECLARED_COLUMNS, {
           v-else
           :component="child"
           :page-id="pageId"
-          :component-id="`${componentId}-child-${child.id}`"
+          :component-id="childComponentId(componentId, child.id)"
           :route-params="routeParams"
           :layout-path="childLayoutPath(layoutPath, child.id)"
         />
@@ -135,7 +136,7 @@ provide<GridDeclaredColumns>(GRID_DECLARED_COLUMNS, {
           <DmsRecursiveComponent
             :component="child"
             :page-id="pageId"
-            :component-id="`${componentId}-child-${child.id}`"
+            :component-id="childComponentId(componentId, child.id)"
             :route-params="routeParams"
             :layout-path="childLayoutPath(layoutPath, child.id)"
           />
@@ -144,7 +145,7 @@ provide<GridDeclaredColumns>(GRID_DECLARED_COLUMNS, {
           v-else
           :component="child"
           :page-id="pageId"
-          :component-id="`${componentId}-child-${child.id}`"
+          :component-id="childComponentId(componentId, child.id)"
           :route-params="routeParams"
           :layout-path="childLayoutPath(layoutPath, child.id)"
         />