@antelopejs/dms 0.7.1 → 0.7.3

package/frontend-vue/layers/dms-ui/app/components/table-view/TableView.vue

@@ -47,7 +47,6 @@ import {
 } from "../../composables/table-view/kanban";
 import { useTableRowActions } from "../../build/composables/table-view/useTableViewRowActions";
 import {
-  buildTableDataKey,
   buildTableQuery,
   isFilterEffective,
 } from "../../build/composables/table-view/utils/tableQuery";
@@ -107,7 +106,9 @@ import { useTableViews } from "../../build/composables/table-view/useTableViews"
 import { useGroupedRows } from "../../build/composables/table-view/useGroupedRows";
 import { useTableFooter } from "../../build/composables/table-view/useTableFooter";
 import { useAccumulatedPages } from "../../build/composables/table-view/useAccumulatedPages";
+import { usePersistedPagination } from "../../build/composables/table-view/usePersistedPagination";
 import { useTableRows } from "../../build/composables/table-view/useTableRows";
+import { useRefreshTriggers } from "../../build/composables/blocks/useRefreshTriggers";
 import { useTableReorder } from "../../build/composables/table-view/useTableReorder";
 import {
   groupedOptionsFor,
@@ -118,7 +119,10 @@ import { readTableUrlKey } from "../../build/composables/table-view/utils/views"
 import TableViews, {
   type TableViewItem,
 } from "../../build/components/table/Views.vue";
-import { useServerRenderedAsyncData } from "../../build/composables/table-view/useServerRenderedAsyncData";
+import {
+  useTableCountsData,
+  useTableListData,
+} from "../../build/composables/table-view/useTableListData";
 import { useTableDataChanges } from "../../composables/table-view/useTableDataChanges";
 
 const REALTIME_ROW_TOPIC_PREFIX = "tableview:row:";
@@ -172,6 +176,8 @@ interface TableViewProps<T extends Data> extends TableViewConfig<T> {
   tableId?: string;
   /** The page carries no other table view: `?view=` / `?tab=` are its own. */
   isSoleTableView?: boolean;
+  /** Topics whose events make the table read its rows again. */
+  realtimeTopic?: string | string[];
 }
 
 const props = defineProps<TableViewProps<T>>();
@@ -347,12 +353,42 @@ const resolvedChrome = resolveTableChrome(props.layout, {
 });
 const GLOBAL_FILTER_DEBOUNCE_MS = 400;
 
-const paginationState = ref<PaginationState>(
-  getPreference<PaginationState>(
-    getTablePreferenceKey("pagination"),
-    DEFAULT_PAGINATION,
-  ),
-);
+const route = useDmsRoute();
+
+const DEFAULT_FILTER_MODE = "is";
+
+const queryParamHiddenFilters = computed<TableFilter[]>(() => {
+  if (!queryParamFilters) return [];
+
+  return Object.entries(queryParamFilters)
+    .filter(([param]) => route.query[param] !== undefined)
+    .map(([param, config]) => ({
+      accessorKey: config.field,
+      mode: config.mode || DEFAULT_FILTER_MODE,
+      value: route.query[param] as string,
+    }));
+});
+
+const routeParamHiddenFilters = computed<TableFilter[]>(() => {
+  if (!routeParamFilters || !routeParams) return [];
+
+  return Object.entries(routeParamFilters)
+    .filter(([param]) => routeParams[param] !== undefined)
+    .map(([param, config]) => ({
+      accessorKey: config.field,
+      mode: config.mode || DEFAULT_FILTER_MODE,
+      value: routeParams[param] as string,
+    }));
+});
+
+// A hidden filter's value changed with the URL, in place or through a
+// remount: the page reached among the previous rows lists from page 1.
+const paginationState = usePersistedPagination({
+  preferences: { getPreference, setPreference },
+  preferenceKey: getTablePreferenceKey,
+  defaults: DEFAULT_PAGINATION,
+  scope: () => [queryParamHiddenFilters.value, routeParamHiddenFilters.value],
+});
 const rowSelect = ref<RowSelectionState>({});
 // A column's grid header, for the sort messages.
 const columnLabel = (id: string): string => {
@@ -615,35 +651,11 @@ const tableRows = useTableRows<T>({
   location,
   source: props.source,
   columns: props.columns,
+  route: () => ({
+    routeParams: props.routeParams,
+    routeQuery: route.query as Record<string, unknown>,
+  }),
 });
-const route = useDmsRoute();
-
-const DEFAULT_FILTER_MODE = "is";
-
-const queryParamHiddenFilters = computed<TableFilter[]>(() => {
-  if (!queryParamFilters) return [];
-
-  return Object.entries(queryParamFilters)
-    .filter(([param]) => route.query[param] !== undefined)
-    .map(([param, config]) => ({
-      accessorKey: config.field,
-      mode: config.mode || DEFAULT_FILTER_MODE,
-      value: route.query[param] as string,
-    }));
-});
-
-const routeParamHiddenFilters = computed<TableFilter[]>(() => {
-  if (!routeParamFilters || !routeParams) return [];
-
-  return Object.entries(routeParamFilters)
-    .filter(([param]) => routeParams[param] !== undefined)
-    .map(([param, config]) => ({
-      accessorKey: config.field,
-      mode: config.mode || DEFAULT_FILTER_MODE,
-      value: routeParams[param] as string,
-    }));
-});
-
 // Quick filters: dropdowns of the toolbar over a column's values (a select's
 // items, a boolean, the rows a relation points to), writing that column's
 // filter like the filters row does.
@@ -788,34 +800,15 @@ const archiveQuery = computed(() =>
   archiveMode ? { showArchived: showArchived.value } : {},
 );
 
-const EMPTY_LIST_RESULT: TableViewListResponse<never> = {
-  results: [],
-  total: 0,
-  offset: 0,
-  limit: 0,
-};
-
-const tableDataKey = buildTableDataKey({
+const { data, status, error, refresh } = await useTableListData<T>({
   componentId,
   pageId,
-  query: queryRequest.value,
-  archiveQuery: archiveQuery.value,
-  isSelfManaged: isActiveDisplaySelfManaged.value,
+  rows: tableRows,
+  query: queryRequest,
+  archiveQuery,
+  isSelfManaged: isActiveDisplaySelfManaged,
 });
 
-const { data, status, error, refresh } = await useServerRenderedAsyncData(
-  tableDataKey,
-  (): Promise<TableViewListResponse<T>> => {
-    // Self-managed displays (e.g. kanban) fetch their own data; skip the
-    // shared list query for them.
-    if (isActiveDisplaySelfManaged.value) {
-      return Promise.resolve(EMPTY_LIST_RESULT);
-    }
-    return tableRows.list({ ...queryRequest.value, ...archiveQuery.value });
-  },
-  { watch: [queryRequest, archiveQuery, isActiveDisplaySelfManaged] },
-);
-
 // Nothing listed yet (a client navigation paints before the first page
 // arrives): the table draws its skeleton, never the empty state.
 const isFirstPageLoading = computed(() => data.value === null && !error.value);
@@ -949,19 +942,13 @@ const tabCountsQuery = computed(() => [
 // No default: `null` until the counts arrive, so the tabs draw placeholders
 // instead of a count of nothing.
 const { data: tabCountsData, refresh: refreshTabCounts } =
-  await useServerRenderedAsyncData<Record<string, number>>(
-    `table-view-${componentId}-${pageId}-tab-counts`,
-    async () => {
-      if (tabCountsQuery.value.length === 0) return {};
-      return await tableRows.countBatch(
-        tabCountsQuery.value.map(({ id, query }) => ({
-          id,
-          query: { ...query, ...archiveQuery.value },
-        })),
-      );
-    },
-    { watch: [tabCountsQuery, archiveQuery] },
-  );
+  await useTableCountsData<T>({
+    componentId,
+    pageId,
+    rows: tableRows,
+    queries: tabCountsQuery,
+    archiveQuery,
+  });
 
 const viewItems = computed<TableViewItem[]>(() =>
   tableViewItems.value.map((view) => ({
@@ -1131,6 +1118,11 @@ const refreshAll = async () => {
   ]);
 };
 
+// The rows can move without the table seeing it (a batch, a job, another
+// block's action): a topic of the backend or a page refresh reads them again,
+// keeping the current rows on screen until the answer lands.
+useRefreshTriggers(props.realtimeTopic, () => void refreshAll());
+
 // "Preview as role": a link tab to a page the previewed role could not open
 // is drawn locked, one to a page it opens partially is drawn partially
 // locked. Never outside a preview (`entryState` is null then).
@@ -1847,7 +1839,6 @@ defineShortcuts(
 
 const tableStatePreferences = {
   sorting,
-  pagination: paginationState,
   columnFilters: columnFilters,
   columnVisibility,
   filtersOpen: filtersRowOpen,
@@ -1980,6 +1971,7 @@ onMounted(() => {
     :quick-filters="resolvedQuickFilters"
     :footer="resolvedFooter"
     :empty-states="props.emptyStates"
+    :hidden-filters-apply="queryParamHiddenFilters.length > 0"
     :default-page-size="props.pageSize"
     :archive-toggle="canToggleArchived"
     :displays="availableDisplays"

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import type { TopListItem } from "../../../composables/chart/types";
+import { useComposedText } from "../../../../../dms-core/app/composables/translation/useComposedText";
 // Imported rather than resolved from the registry: a registered component is
 // a lazy chunk of its own, fetched only when the data first shows it, so the
 // trend would pop in a beat after the row.
@@ -31,11 +32,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const PERCENT_UNIT = "%";
 
-const { processI18n } = useTranslation();
+const { processText } = useComposedText();
 
-const titleDisplay = computed(() => processI18n(props.item.title));
+const titleDisplay = computed(() => processText(props.item.title));
 const descriptionDisplay = computed(() =>
-  props.item.description ? processI18n(props.item.description) : "",
+  props.item.description ? processText(props.item.description) : "",
 );
 
 const hasSparklineData = computed(

package/frontend-vue/layers/dms-ui/app/composables/chart/types.ts

@@ -1,3 +1,5 @@
+import type { BlockText } from "#dms-core/app/types/composed-text";
+
 /** Serializable X-axis settings, matching the DMS server contract. */
 export interface ChartXAxis {
   /** Requested intervals; ignored by ApexCharts on datetime axes. */
@@ -100,8 +102,9 @@ export interface KpiCardResponse {
 
 export interface TopListItem {
   id: string | number;
-  title: string;
-  description?: string;
+  /** A literal, a `$`-prefixed i18n key, or a composed text. */
+  title: BlockText;
+  description?: BlockText;
   value: number;
   delta?: number | null;
   sparkline?: number[];

package/frontend-vue/layers/dms-ui/app/composables/chart/useChartFetch.ts

@@ -1,6 +1,5 @@
 import {
   computed,
-  onBeforeUnmount,
   onMounted,
   ref,
   watch,
@@ -12,12 +11,11 @@ import {
   usePeriodScope,
 } from "../../../../dms-core/app/composables/period/usePeriodScope";
 import type { PeriodState } from "../../../../dms-core/app/composables/period/types";
-import { useRealtimeTopic } from "../../../../dms-core/app/composables/realtime/useRealtimeTopic";
 import {
   hasUrlVariables,
   resolveUrlVariables,
 } from "../../build/utils/urlVariables";
-import { onPageBlocksRefresh } from "../../utils/blockRefresh";
+import { useRefreshTriggers } from "../../build/composables/blocks/useRefreshTriggers";
 
 export interface UseChartFetchOptions<T> {
   /**
@@ -132,20 +130,6 @@ function readStaticData<T>(
   return source ?? null;
 }
 
-function subscribeRealtimeTopics(
-  topic: string | string[] | undefined,
-  onEvent: () => void,
-): void {
-  if (!topic) return;
-  const topics = Array.isArray(topic) ? topic : [topic];
-  for (const entry of topics) {
-    useRealtimeTopic(entry, (event) => {
-      if (!("type" in event)) return;
-      onEvent();
-    });
-  }
-}
-
 /**
  * The URL to request: `fetchUrl` with its tokens filled, or `undefined` while
  * one has no value. Only a URL naming a token reads the route.
@@ -164,16 +148,6 @@ function useResolvedFetchUrl<T>(
   );
 }
 
-// Mounted only: the page refresh is a browser event, and a block the server
-// renders has nothing to refetch.
-function subscribePageRefresh(onRefresh: () => void): void {
-  let unsubscribe: (() => void) | undefined;
-  onMounted(() => {
-    unsubscribe = onPageBlocksRefresh(onRefresh);
-  });
-  onBeforeUnmount(() => unsubscribe?.());
-}
-
 export function useChartFetch<T>(
   options: UseChartFetchOptions<T>,
 ): UseChartFetchReturn<T> {
@@ -290,8 +264,7 @@ export function useChartFetch<T>(
       scheduleRefresh,
     );
     onMounted(fetchOnMount);
-    subscribeRealtimeTopics(options.realtimeTopic, refreshSameInputs);
-    subscribePageRefresh(refreshSameInputs);
+    useRefreshTriggers(options.realtimeTopic, refreshSameInputs);
   } else if (typeof options.staticData === "function") {
     watch(
       () => readStaticData(options.staticData),

package/frontend-vue/layers/dms-ui/app/composables/form/useForm.ts

@@ -13,6 +13,7 @@ import {
   type ReplaceUrlVariablesContext,
   hasUrlVariables,
   replaceUrlVariables,
+  resolveTextVariables,
   resolveUrlVariables,
 } from "../../build/utils/urlVariables";
 
@@ -347,7 +348,7 @@ export function resolveSubmitDefaults(
   const resolved: Record<string, unknown> = {};
   for (const [key, value] of Object.entries(submitDefaults)) {
     if (typeof value === "string" && hasUrlVariables(value)) {
-      const replaced = resolveUrlVariables(value, context);
+      const replaced = resolveTextVariables(value, context);
       if (replaced === undefined) continue;
       resolved[key] = replaced;
     } else {

package/frontend-vue/layers/dms-ui/app/composables/tab/types/props.ts

@@ -29,6 +29,8 @@ export interface TabProps extends TabComponentProps {
    * names, read in one request and again when a watch action fires.
    */
   badgesUrl?: string;
+  /** Topics whose events make the tab set read `badgesUrl` again. */
+  realtimeTopic?: string | string[];
 }
 
 /** The badges `badgesUrl` answers with, by tab slot. */

package/frontend-vue/layers/dms-ui/app/composables/table-view/types/action-target.ts

@@ -1,9 +1,13 @@
+import type { DrawerDirection } from "../../containers/types";
+
 export type ActionTarget =
   | {
       type: "drawer";
       component: ComponentInfo;
       title?: string;
       description?: string;
+      /** Edge the drawer slides in from (`bottom` by default). */
+      direction?: DrawerDirection;
     }
   | {
       type: "modal";

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

@@ -1,7 +1,7 @@
 /**
  * The window event a data block (StatGroup, KeyValueList, NavCardGrid,
- * ActivityFeed, KPI, top list, meter, chart, a tab set's badges) re-fetches
- * on, keeping its values on screen until the new answer lands.
+ * ActivityFeed, KPI, top list, meter, chart, a tab set's badges, table view)
+ * re-fetches on, keeping its values on screen until the new answer lands.
  */
 export const BLOCK_REFRESH_EVENT = "DmsComponent.Block.Refresh";
 

package/frontend-vue/layers/dms-ui/i18n/locales/ui-en-GB.json

@@ -25,6 +25,7 @@
       "edit_item_description": "Change its fields, then save.",
       "edit_item_in": "Changes are saved to {caption}.",
       "search_placeholder": "Search...",
+      "search_open": "Open search",
       "options_title": "Table options",
       "filters_title": "Filters",
       "columns_title": "Columns",

package/frontend-vue/layers/dms-ui/i18n/locales/ui-fr-FR.json

@@ -25,6 +25,7 @@
       "edit_item_description": "Modifiez ses champs, puis enregistrez.",
       "edit_item_in": "Les modifications sont enregistrées dans « {caption} ».",
       "search_placeholder": "Rechercher...",
+      "search_open": "Ouvrir la recherche",
       "options_title": "Options de la table",
       "filters_title": "Filtres",
       "columns_title": "Colonnes",

package/frontend-vue/package.json

@@ -11,7 +11,7 @@
   "license": "Apache-2.0",
   "packageManager": "pnpm@10.6.5",
   "engines": {
-    "@antelopejs/dms-frontend": ">=0.5.1 <0.6.0"
+    "@antelopejs/dms-frontend": ">=0.5.2 <0.6.0"
   },
   "scripts": {
     "typecheck": "ajs dms verify-source --layer \"$PWD\" --local-package @antelopejs/dms=.. --local-package @antelopejs/interface-dms=../../interface-dms",
@@ -30,12 +30,13 @@
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lang-sql": "^6.10.0",
     "@codemirror/language": "^6.11.0",
-    "@codemirror/streamparser": "^6.0.0",
     "@codemirror/state": "^6.5.2",
+    "@codemirror/streamparser": "^6.0.0",
     "@codemirror/view": "^6.38.1",
     "@iconify-json/lucide": "^1.2.64",
     "@iconify-json/ph": "^1.2.2",
     "@internationalized/date": "^3.10.0",
+    "@lezer/common": "^1.5.3",
     "@lezer/highlight": "^1.2.5",
     "@tailwindcss/typography": "^0.5.19",
     "@tanstack/vue-table": "^8.21.3",
@@ -73,7 +74,7 @@
   },
   "devDependencies": {
     "@antelopejs/core": ">=1.13.4 <2",
-    "@antelopejs/dms-frontend": ">=0.5.1 <0.6.0",
+    "@antelopejs/dms-frontend": ">=0.5.2 <0.6.0",
     "@eslint/js": "^8.57.0",
     "@inertiajs/vue3": "^3.7.0",
     "@nuxt/ui": "4.10.0",

package/frontend-vue/pnpm-lock.yaml

@@ -47,6 +47,9 @@ importers:
       '@internationalized/date':
         specifier: ^3.10.0
         version: 3.10.0
+      '@lezer/common':
+        specifier: ^1.5.3
+        version: 1.5.3
       '@lezer/highlight':
         specifier: ^1.2.5
         version: 1.2.5
@@ -157,8 +160,8 @@ importers:
         specifier: '>=1.13.4 <2'
         version: 1.13.5
       '@antelopejs/dms-frontend':
-        specifier: '>=0.5.1 <0.6.0'
-        version: 0.5.1(@antelopejs/core@1.13.5)
+        specifier: '>=0.5.2 <0.6.0'
+        version: 0.5.2(@antelopejs/core@1.13.5)
       '@eslint/js':
         specifier: ^8.57.0
         version: 8.57.0
@@ -234,8 +237,8 @@ packages:
     engines: {node: '>=20.19'}
     hasBin: true
 
-  '@antelopejs/dms-frontend@0.5.1':
-    resolution: {integrity: sha512-ykrqlHfYF+BqNy+h4FuZBbqAW6UjviauCiI8cQCW1M55MzIxk2Ar3ZnMH1VKH8QsfDBBNapDik5rd/AMLQ33dw==}
+  '@antelopejs/dms-frontend@0.5.2':
+    resolution: {integrity: sha512-0kChPedSTpKES7aN/gLj5tAe4WRaU+FrwaRKpOyvo3fvvRPfDTvlTYjjdUpabsF150d3+V/AksXstZ5eb36QwQ==}
     engines: {node: '>=20.12.0'}
     hasBin: true
     peerDependencies:
@@ -4205,7 +4208,7 @@ snapshots:
       semver: 7.8.5
       typescript: 5.9.3
 
-  '@antelopejs/dms-frontend@0.5.1(@antelopejs/core@1.13.5)':
+  '@antelopejs/dms-frontend@0.5.2(@antelopejs/core@1.13.5)':
     dependencies:
       '@antelopejs/core': 1.13.5
       chokidar: 4.0.3

package/frontend-vue/tests/activity-feed-days.test.ts

@@ -3,6 +3,7 @@ import {
   formatActivityTime,
   formatShortDate,
   groupActivityByDay,
+  activityText,
   resolveActivityParams,
   relativeDayBucket,
 } from "../layers/dms-ui/app/build/components/activity-feed/activityFeedDays";
@@ -87,25 +88,38 @@ describe("activity feed day groups", () => {
 });
 
 describe("resolveActivityParams", () => {
-  // Echoes the key and its values, so assertions read the whole text.
-  const translate = (key: string, params?: Record<string, string> | null) =>
-    `${key}(${JSON.stringify(params ?? {})})`;
-
-  it("translates a $ value with the entry's literal values", () => {
+  it("makes a $ value a text of its own, with the entry's other values", () => {
+    const count = { type: "count", value: 2 } as const;
     expect(
-      resolveActivityParams(
-        { device: "$activity.device", browser: "Chrome", os: "Windows" },
-        translate,
-      ),
+      resolveActivityParams({
+        device: "$activity.device",
+        browser: "Chrome",
+        count,
+      }),
     ).toEqual({
-      device: '$activity.device({"browser":"Chrome","os":"Windows"})',
+      device: {
+        key: "$activity.device",
+        params: { browser: "Chrome", count },
+      },
       browser: "Chrome",
-      os: "Windows",
+      count,
     });
   });
 
   it("gives nothing for an entry without values", () => {
-    expect(resolveActivityParams(undefined, translate)).toBeNull();
+    expect(resolveActivityParams(undefined)).toBeUndefined();
+  });
+});
+
+describe("activityText", () => {
+  it("gives a $ title the entry's values and leaves other texts alone", () => {
+    expect(activityText("$a.title", { name: "Léa" })).toEqual({
+      key: "$a.title",
+      params: { name: "Léa" },
+    });
+    expect(activityText("Plain", { name: "Léa" })).toBe("Plain");
+    const composed = { key: "a.composed" };
+    expect(activityText(composed, { name: "Léa" })).toBe(composed);
   });
 });