@antelopejs/dms 0.6.0 → 0.6.2

package/frontend-vue/layers/dms-ui/app/build/composables/data-types/registerDefaults.ts

@@ -10,11 +10,14 @@ import { mapRelationBeforeState, sameRelationValue } from "./relationValue";
 import {
   isSet,
   readRowField,
+  readSubline,
   type Row,
   stringOf,
   toneClass,
 } from "./cellHelpers";
 import { registerMetricCellTypes } from "./metricCells";
+import { registerTwoLineCellType } from "./twoLineCell";
+import { useComposedText } from "../../../../../dms-core/app/composables/translation/useComposedText";
 import StatusPill from "../../../components/status-pill/StatusPill.vue";
 import IdentityCell from "../../components/table-view/IdentityCell.vue";
 import {
@@ -381,10 +384,15 @@ interface IdentityOptions {
   avatarField?: string;
   icon?: string;
   subtitleField?: string;
+  subtitleTone?: string;
   selfField?: string;
   selfLabel?: string;
   badges?: IdentityBadgeOption[];
   storage?: string;
+  /** Name drawn, muted, for a row without a value. */
+  emptyLabel?: string;
+  /** Icon tile of a row without a value. */
+  emptyIcon?: string;
 }
 
 const matchesBadge = (badge: IdentityBadgeOption, value: unknown): boolean =>
@@ -394,17 +402,28 @@ const matchesBadge = (badge: IdentityBadgeOption, value: unknown): boolean =>
 
 /**
  * `identity`: avatar or icon tile, the value as the name, a "You" tag on the
- * signed-in user's row, badges and a secondary line, all read off the row.
+ * signed-in user's row, badges and a secondary line (an address as written,
+ * or a composed text in its tone), all read off the row; `emptyLabel` and
+ * `emptyIcon` stand for a row without a value.
  */
 function renderIdentity(value: unknown, options: unknown, row: Row) {
   const { processI18n } = useTranslation();
+  const { processText } = useComposedText();
   const opts = (options ?? {}) as IdentityOptions;
   const badges = (opts.badges ?? [])
     .filter((badge) => matchesBadge(badge, readRowField(row, badge.field)))
     .map((badge) => ({ label: processI18n(badge.label), color: badge.tone }));
+  // An address or an id is data: only a composed text is translated.
+  const subtitle = readSubline(readRowField(row, opts.subtitleField), {
+    processText,
+    isStringTranslated: false,
+  });
   return h(IdentityCell, {
     title: stringOf(value) ?? "",
-    subtitle: stringOf(readRowField(row, opts.subtitleField)) ?? "",
+    subtitle: subtitle?.text ?? "",
+    subtitleClass: toneClass(subtitle?.tone ?? opts.subtitleTone, "dimmed"),
+    emptyLabel: opts.emptyLabel ? processI18n(opts.emptyLabel) : undefined,
+    emptyIcon: opts.emptyIcon,
     avatar: readRowField(row, opts.avatarField) as
       | { key: string }
       | string
@@ -843,5 +862,6 @@ export function registerDefaultDataTypes() {
   registerDisplayOnlyTypes(registerDataType);
   registerCellTypes(registerDataType);
   registerMetricCellTypes(registerDataType);
+  registerTwoLineCellType(registerDataType);
   registerFieldTypes(registerDataType);
 }

package/frontend-vue/layers/dms-ui/app/build/composables/data-types/twoLineCell.ts

@@ -0,0 +1,118 @@
+import { h, type VNodeChild } from "vue";
+import type { DataType } from "#dms-core/app/composables/data-types/useDataType";
+import { useComposedText } from "../../../../../dms-core/app/composables/translation/useComposedText";
+import {
+  type ComposableText,
+  isComposedText,
+} from "../../../../../dms-core/app/utils/composedText";
+import { readRowField, readSubline, toneClass, type Row } from "./cellHelpers";
+
+const EMPTY = "—";
+const PRIMARY_CLASS = "text-highlighted truncate text-[13px] font-medium";
+const EMPTY_PRIMARY_CLASS = "text-dimmed truncate text-[13px]";
+const SUB_CLASS = "truncate text-xs";
+
+interface TwoLineOptions {
+  /** Row field holding the primary line, in place of the column's value. */
+  primaryField?: string;
+  /** Row field holding the secondary line. */
+  subField?: string;
+  /** Tone of the secondary line when the row gives none. */
+  subTone?: string;
+  /** Text of an empty primary line. */
+  emptyLabel?: string;
+  /** The column's own data type, which writes its value. */
+  columnType?: string;
+  /** The column's own type options (a select's items). */
+  typeOptions?: unknown;
+}
+
+const isBlank = (value: unknown): boolean =>
+  value === null || value === undefined || value === "";
+
+/** The column's value written by the column's own data type. */
+function formatColumnValue(
+  value: unknown,
+  locale: string,
+  opts: TwoLineOptions,
+  row: Row,
+): VNodeChild {
+  const { getDataType } = useDataTypes();
+  const formatter = opts.columnType
+    ? getDataType(opts.columnType)?.formatter
+    : undefined;
+  const format = formatter?.cell ?? formatter?.default;
+  if (!format) return String(value);
+  return format(value, locale, opts.typeOptions, row) as VNodeChild;
+}
+
+/** The primary line, or nothing when the row has none to show. */
+function readPrimary(
+  value: unknown,
+  locale: string,
+  opts: TwoLineOptions,
+  row: Row,
+): VNodeChild | undefined {
+  const { processText } = useComposedText();
+  if (opts.primaryField) {
+    const text = processText(
+      readRowField(row, opts.primaryField) as ComposableText,
+    );
+    return text || undefined;
+  }
+  if (isBlank(value)) return undefined;
+  if (isComposedText(value)) return processText(value);
+  return formatColumnValue(value, locale, opts, row);
+}
+
+/**
+ * `two_line`: a primary line — the column's value in its own format, or a row
+ * field's text — over a secondary line read off the row, in the row's tone,
+ * else `subTone`, else muted. No avatar.
+ */
+function renderTwoLine(
+  value: unknown,
+  locale: string,
+  options: unknown,
+  row: Row,
+) {
+  const { processText } = useComposedText();
+  const opts = (options ?? {}) as TwoLineOptions;
+  const primary = readPrimary(value, locale, opts, row);
+  const sub = readSubline(readRowField(row, opts.subField), {
+    processText,
+    isStringTranslated: true,
+  });
+  return h("span", { class: "flex min-w-0 flex-col leading-tight" }, [
+    primary === undefined
+      ? h(
+          "span",
+          { class: EMPTY_PRIMARY_CLASS },
+          opts.emptyLabel ? processText(opts.emptyLabel) : EMPTY,
+        )
+      : h("span", { class: PRIMARY_CLASS }, [primary]),
+    sub
+      ? h(
+          "span",
+          {
+            class: [SUB_CLASS, toneClass(sub.tone ?? opts.subTone, "muted")],
+            title: sub.text,
+          },
+          sub.text,
+        )
+      : null,
+  ]);
+}
+
+/**
+ * The `two_line` cell data type. It draws an empty value too: its primary
+ * line may come from another field, and its secondary line always does.
+ */
+export const registerTwoLineCellType = (
+  registerDataType: (dataType: DataType) => void,
+) => {
+  registerDataType({
+    id: "two_line",
+    formatter: { default: renderTwoLine, empty: renderTwoLine },
+  });
+};

package/frontend-vue/layers/dms-ui/app/build/composables/data-types/useColumnValueRenderer.ts

@@ -45,8 +45,10 @@ export function useColumnValueRenderer() {
   const { locale } = useI18n();
 
   // A display also reads the column's own type options (`typeOptions`): a
-  // select's items name the values it draws. A display declared without
-  // options reads them at the top level, as it always did.
+  // select's items name the values it draws; and the column's own type id
+  // (`columnType`), so it can write the value as the column would (an amount
+  // under `two_line`). A display declared without options reads the type
+  // options at the top level, as it always did.
   const resolveRenderer = (column: RenderableColumn) => {
     const typeOptions = column.type?.inputComponent?.options as
       | Record<string, unknown>
@@ -56,7 +58,7 @@ export function useColumnValueRenderer() {
     const displayOptions = column.display.options ?? typeOptions;
     return {
       typeId: column.display.type,
-      options: { ...displayOptions, typeOptions },
+      options: { ...displayOptions, typeOptions, columnType: column.type?.id },
     };
   };
 

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

@@ -1,5 +1,5 @@
 import type { LocationQueryValue } from "#dms/frontend-module";
-import { replaceUrlVariables } from "../../../composables/form/useForm";
+import { replaceUrlVariables } from "../../utils/urlVariables";
 
 type RouteQuery = Record<string, LocationQueryValue | LocationQueryValue[]>;
 

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

@@ -1,29 +1,6 @@
+import { formatRelativeDistance } from "#dms-core/app/utils/formatter";
 import { regionalDateTimeFormat } from "#dms-core/app/utils/regional";
 
-const SECOND_MS = 1000;
-const MINUTE_MS = 60 * SECOND_MS;
-const HOUR_MS = 60 * MINUTE_MS;
-const DAY_MS = 24 * HOUR_MS;
-const WEEK_MS = 7 * DAY_MS;
-const MONTH_MS = 30 * DAY_MS;
-const YEAR_MS = 365 * DAY_MS;
-
-interface RelativeUnit {
-  unit: Intl.RelativeTimeFormatUnit;
-  ms: number;
-  /** The unit applies below this elapsed time. */
-  below: number;
-}
-
-const RELATIVE_UNITS: RelativeUnit[] = [
-  { unit: "minute", ms: MINUTE_MS, below: HOUR_MS },
-  { unit: "hour", ms: HOUR_MS, below: DAY_MS },
-  { unit: "day", ms: DAY_MS, below: WEEK_MS },
-  { unit: "week", ms: WEEK_MS, below: MONTH_MS },
-  { unit: "month", ms: MONTH_MS, below: YEAR_MS },
-  { unit: "year", ms: YEAR_MS, below: Number.POSITIVE_INFINITY },
-];
-
 function capitalize(text: string): string {
   return text ? `${text[0]!.toLocaleUpperCase()}${text.slice(1)}` : text;
 }
@@ -37,17 +14,9 @@ export function formatRelativeDate(
   locale: string,
   now: number = Date.now(),
 ): string {
-  const deltaMs = new Date(date).getTime() - now;
-  const distance = Math.abs(deltaMs);
-  const unit =
-    RELATIVE_UNITS.find((candidate) => distance < candidate.below) ??
-    RELATIVE_UNITS[RELATIVE_UNITS.length - 1]!;
-  const value = Math.round(deltaMs / unit.ms);
-  const format = new Intl.RelativeTimeFormat(locale, {
-    numeric: "auto",
-    style: "short",
-  });
-  return capitalize(format.format(value, unit.unit));
+  return capitalize(
+    formatRelativeDistance(date, locale, { style: "short", now }),
+  );
 }
 
 /** "Sep 27": day and short month. */

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

@@ -0,0 +1,63 @@
+// `{{params.id}}` takes the bare name, which on a route repeating a placeholder
+// is its last occurrence — the row id of a form page. The `:<n>` suffix reaches
+// a specific occurrence, `{{params.id:1}}` being the id of the page carrying the
+// table view (see extractRouteParams).
+const PARAM_TOKEN = /\{\{params\.(\w+(?::\d+)?)\}\}/g;
+const QUERY_TOKEN = /\{\{query\.(\w+)\}\}/g;
+const RESPONSE_TOKEN = /\{\{response\.(\w+)\}\}/g;
+const TOKEN_OPENING = "{{";
+
+export interface ReplaceUrlVariablesContext {
+  routeParams?: Record<string, string>;
+  routeQuery: Record<string, unknown>;
+  response?: Record<string, unknown>;
+}
+
+/**
+ * Fills the `{{params.X}}`, `{{query.X}}` and (with a response)
+ * `{{response.X}}` tokens of a URL. A token with no value is left as written.
+ */
+export function replaceUrlVariables(
+  url: string,
+  context: ReplaceUrlVariablesContext,
+): string {
+  let processedUrl = url.replace(
+    PARAM_TOKEN,
+    (match, key) => context.routeParams?.[key] || match,
+  );
+
+  processedUrl = processedUrl.replace(QUERY_TOKEN, (match, key) => {
+    const value = context.routeQuery[key];
+    return typeof value === "string" ? value : match;
+  });
+
+  if (context.response) {
+    processedUrl = processedUrl.replace(RESPONSE_TOKEN, (match, key) => {
+      const value = context.response?.[key];
+      return typeof value === "string" || typeof value === "number"
+        ? String(value)
+        : match;
+    });
+  }
+
+  return processedUrl;
+}
+
+/** Whether a URL still names a token: written so, or left unresolved. */
+export function hasUrlVariables(url: string): boolean {
+  return url.includes(TOKEN_OPENING);
+}
+
+/**
+ * The URL with its tokens filled, or `undefined` while one is left: a URL
+ * naming a value the page does not carry is not a route, and must not be
+ * requested as one.
+ */
+export function resolveUrlVariables(
+  url: string | undefined,
+  context: ReplaceUrlVariablesContext,
+): string | undefined {
+  if (!url) return undefined;
+  const resolved = replaceUrlVariables(url, context);
+  return hasUrlVariables(resolved) ? undefined : resolved;
+}

package/frontend-vue/layers/dms-ui/app/components/activity-feed/ActivityFeed.vue

@@ -83,6 +83,7 @@ const {
   items: () => props.items,
   fetchUrl: props.fetchUrl,
   fetchUrlMethod: props.fetchUrlMethod,
+  routeParams: () => props.routeParams,
   watchActions: props.watchActions,
   componentId: props.componentId,
 });

package/frontend-vue/layers/dms-ui/app/components/blocks/BannerBlock.vue

@@ -5,7 +5,9 @@ import DmsBlockActions, {
   type BlockAction,
 } from "../../build/components/blocks/BlockActions.vue";
 import { useWatch } from "../../../../dms-core/app/composables/watch/useWatch";
+import { useComposedText } from "../../../../dms-core/app/composables/translation/useComposedText";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
+import type { BlockText } from "../../../../dms-core/app/types/composed-text";
 
 type BannerTone = "info" | "success" | "warning" | "error" | "primary";
 
@@ -14,8 +16,9 @@ type BannerTone = "info" | "success" | "warning" | "error" | "primary";
 // Dismissals live in a cookie (like the dashboard banners) so the server
 // render already leaves a dismissed banner out instead of flashing it.
 interface BannerBlockProps extends Partial<DefaultComponentProps> {
-  title?: string;
-  description?: string;
+  /** A string (`$` for an i18n key) or a composed text. */
+  title?: BlockText;
+  description?: BlockText;
   tone?: BannerTone;
   /** Overrides the tone's icon. */
   icon?: string;
@@ -56,7 +59,7 @@ const TONE_ICONS: Record<BannerTone, string> = {
 
 useWatch(props.watchActions || [], props.componentId);
 
-const { processI18n } = useTranslation();
+const { processText } = useComposedText();
 const dismissed = useDmsCookie<string[]>(DISMISSED_COOKIE, {
   default: () => [],
   maxAge: DISMISSED_MAX_AGE_S,
@@ -91,9 +94,9 @@ function dismiss(): void {
 <template>
   <DmsBanner
     v-if="isVisible"
-    :title="props.title ? processI18n(props.title) : undefined"
+    :title="props.title ? processText(props.title) : undefined"
     :description="
-      props.description ? processI18n(props.description) : undefined
+      props.description ? processText(props.description) : undefined
     "
     :icon="props.icon ?? TONE_ICONS[props.tone]"
     :tone="props.tone"

package/frontend-vue/layers/dms-ui/app/components/blocks/KeyValueListBlock.vue

@@ -8,13 +8,24 @@ import DmsBlockStatus, {
   type BlockEmptyText,
 } from "../../build/components/blocks/BlockStatus.vue";
 import { useBlockItems } from "../../build/composables/blocks/useBlockItems";
+import { useComposedText } from "../../../../dms-core/app/composables/translation/useComposedText";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
+import type { BlockText } from "../../../../dms-core/app/types/composed-text";
+import { isComposedText } from "../../../../dms-core/app/utils/composedText";
 
 // `KeyValueList` block (interface-dms `base/key-value-list`): label / value
 // rows (v2 .c-dl), static or from `fetchUrl` (`{ items }`), in a card by
-// default. Labels, details and text values follow the `$` i18n convention.
+// default. Labels, details and text values follow the `$` i18n convention or
+// are composed texts.
+interface KeyValueListBlockItem
+  extends Omit<KeyValueItem, "label" | "value" | "detail"> {
+  label: BlockText;
+  value?: BlockText | number | null;
+  detail?: BlockText;
+}
+
 interface KeyValueListBlockProps extends DefaultComponentProps {
-  items?: KeyValueItem[];
+  items?: KeyValueListBlockItem[];
   dense?: boolean;
   columns?: number;
   currency?: string;
@@ -50,29 +61,39 @@ const props = withDefaults(defineProps<KeyValueListBlockProps>(), {
 
 const TRANSLATED_TYPES = new Set([undefined, "text", "status", "link"]);
 
-const { processI18n } = useTranslation();
+const { processText } = useComposedText();
 
-const { items, isPending, hasError, refresh } = useBlockItems<KeyValueItem>({
-  items: () => props.items,
-  fetchUrl: props.fetchUrl,
-  fetchUrlMethod: props.fetchUrlMethod,
-  watchActions: props.watchActions,
-  componentId: props.componentId,
-});
+const { items, isPending, hasError, refresh } =
+  useBlockItems<KeyValueListBlockItem>({
+    items: () => props.items,
+    fetchUrl: props.fetchUrl,
+    fetchUrlMethod: props.fetchUrlMethod,
+    routeParams: () => props.routeParams,
+    watchActions: props.watchActions,
+    componentId: props.componentId,
+  });
+
+// A composed value already says how each of its parameters is written, so it
+// is composed whatever the row's type; a plain one is translated only where
+// the type draws text.
+function resolveValue(item: KeyValueListBlockItem): KeyValueItem["value"] {
+  if (isComposedText(item.value)) return processText(item.value);
+  if (typeof item.value === "string" && TRANSLATED_TYPES.has(item.type)) {
+    return processText(item.value);
+  }
+  return item.value as KeyValueItem["value"];
+}
 
 const resolvedItems = computed<KeyValueItem[]>(() =>
   items.value.map((item) => ({
     ...item,
-    label: processI18n(item.label ?? ""),
-    detail: item.detail ? processI18n(item.detail) : undefined,
-    value:
-      typeof item.value === "string" && TRANSLATED_TYPES.has(item.type)
-        ? processI18n(item.value)
-        : item.value,
+    label: processText(item.label),
+    detail: item.detail ? processText(item.detail) : undefined,
+    value: resolveValue(item),
   })),
 );
 const title = computed(() =>
-  props.title ? processI18n(props.title) : undefined,
+  props.title ? processText(props.title) : undefined,
 );
 const isEmpty = computed(
   () => !isPending.value && !hasError.value && resolvedItems.value.length === 0,

package/frontend-vue/layers/dms-ui/app/components/blocks/NavCardGridBlock.vue

@@ -87,6 +87,7 @@ const {
   items: () => props.items,
   fetchUrl: props.fetchUrl,
   fetchUrlMethod: props.fetchUrlMethod,
+  routeParams: () => props.routeParams,
   watchActions: props.watchActions,
   componentId: props.componentId,
 });

package/frontend-vue/layers/dms-ui/app/components/blocks/StatGroupBlock.vue

@@ -8,13 +8,23 @@ import DmsBlockStatus, {
   type BlockEmptyText,
 } from "../../build/components/blocks/BlockStatus.vue";
 import { useBlockItems } from "../../build/composables/blocks/useBlockItems";
+import { useComposedText } from "../../../../dms-core/app/composables/translation/useComposedText";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
+import type { BlockText } from "../../../../dms-core/app/types/composed-text";
 
 // `StatGroup` block (interface-dms `base/stat-group`): the generic StatGroup
 // fed from the block options or from `fetchUrl` (`{ items }`). Texts follow
-// the `$` i18n-key convention; numeric values are formatted for the locale.
+// the `$` i18n-key convention or are composed texts; numeric values are
+// formatted for the locale.
+interface StatGroupBlockItem
+  extends Omit<StatGroupItem, "eyebrow" | "value" | "detail"> {
+  eyebrow: BlockText;
+  value: BlockText | number;
+  detail?: BlockText;
+}
+
 interface StatGroupBlockProps extends DefaultComponentProps {
-  items?: StatGroupItem[];
+  items?: StatGroupBlockItem[];
   layout?: StatGroupLayout;
   columns?: number;
   /** Accessible name of the group. */
@@ -43,30 +53,24 @@ const props = withDefaults(defineProps<StatGroupBlockProps>(), {
 
 const DEFAULT_SKELETON_COUNT = 4;
 
-const { locale } = useI18n();
-const { processI18n } = useTranslation();
+const { processText } = useComposedText();
 
-const { items, isPending, hasError, refresh } = useBlockItems<StatGroupItem>({
-  items: () => props.items,
-  fetchUrl: props.fetchUrl,
-  fetchUrlMethod: props.fetchUrlMethod,
-  watchActions: props.watchActions,
-  componentId: props.componentId,
-});
-
-function formatValue(value: StatGroupItem["value"]): string {
-  if (typeof value === "number") {
-    return new Intl.NumberFormat(locale.value).format(value);
-  }
-  return processI18n(String(value ?? ""));
-}
+const { items, isPending, hasError, refresh } =
+  useBlockItems<StatGroupBlockItem>({
+    items: () => props.items,
+    fetchUrl: props.fetchUrl,
+    fetchUrlMethod: props.fetchUrlMethod,
+    routeParams: () => props.routeParams,
+    watchActions: props.watchActions,
+    componentId: props.componentId,
+  });
 
 const resolvedItems = computed<StatGroupItem[]>(() =>
   items.value.map((item) => ({
     ...item,
-    eyebrow: processI18n(item.eyebrow ?? ""),
-    value: formatValue(item.value),
-    detail: item.detail ? processI18n(item.detail) : undefined,
+    eyebrow: processText(item.eyebrow),
+    value: processText(item.value),
+    detail: item.detail ? processText(item.detail) : undefined,
   })),
 );
 </script>
@@ -87,6 +91,6 @@ const resolvedItems = computed<StatGroupItem[]>(() =>
     :skeleton-count="
       props.skeletonCount ?? props.columns ?? DEFAULT_SKELETON_COUNT
     "
-    :label="props.label ? processI18n(props.label) : undefined"
+    :label="props.label ? processText(props.label) : undefined"
   />
 </template>

package/frontend-vue/layers/dms-ui/app/components/chart/Chart.vue

@@ -132,6 +132,7 @@ const isNested = computed(() => !!nestedContext);
 const { data, isLoading } = useChartFetch<ChartResponse>({
   fetchUrl: isNested.value ? undefined : props.fetchUrl,
   fetchUrlMethod: props.fetchUrlMethod,
+  routeParams: () => props.routeParams,
   periodScope: props.periodScope,
   realtimeTopic: props.realtimeTopic,
   staticData: null,

package/frontend-vue/layers/dms-ui/app/components/chart/ChartCard.vue

@@ -69,6 +69,7 @@ const watchKey = computed(() => JSON.stringify(watchState.value));
 const { data, isLoading } = useChartFetch<ChartCardResponse>({
   fetchUrl: props.fetchUrl,
   fetchUrlMethod: props.fetchUrlMethod,
+  routeParams: () => props.routeParams,
   periodScope: props.periodScope,
   watchSource: () => watchKey.value,
 });

package/frontend-vue/layers/dms-ui/app/components/kpi/KpiCard.vue

@@ -79,6 +79,7 @@ const staticData = computed<KpiCardResponse | null>(() => {
 const { data, isLoading, error, refresh } = useChartFetch<KpiCardResponse>({
   fetchUrl: props.fetchUrl,
   fetchUrlMethod: props.fetchUrlMethod,
+  routeParams: () => props.routeParams,
   periodScope: props.periodScope,
   staticData: () => staticData.value,
   watchSource: () => watchKey.value,

package/frontend-vue/layers/dms-ui/app/components/meter/MeterBlock.vue

@@ -76,6 +76,7 @@ const { state: watchState } = useWatch(
 const { data, isLoading, error, refresh } = useChartFetch<MeterResponse>({
   fetchUrl: props.fetchUrl,
   fetchUrlMethod: props.fetchUrlMethod,
+  routeParams: () => props.routeParams,
   watchSource: () => JSON.stringify(watchState.value),
 });
 

package/frontend-vue/layers/dms-ui/app/components/tab/Tab.vue

@@ -30,6 +30,7 @@ const { state: watchState } = useWatch(
 );
 const { data: fetchedBadges } = useChartFetch<TabBadges>({
   fetchUrl: props.badgesUrl,
+  routeParams: () => props.routeParams,
   watchSource: () => JSON.stringify(watchState.value),
 });
 const { locale } = useI18n();

package/frontend-vue/layers/dms-ui/app/components/top-list/TopListCard.vue

@@ -108,6 +108,7 @@ const staticData = computed<TopListCardResponse | null>(() =>
 const { data, isLoading } = useChartFetch<TopListCardResponse>({
   fetchUrl: props.fetchUrl,
   fetchUrlMethod: props.fetchUrlMethod,
+  routeParams: () => props.routeParams,
   periodScope: props.periodScope,
   staticData: () => staticData.value,
   watchSource: () => watchKey.value,