@antelopejs/dms 0.7.7 → 0.7.9

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

@@ -432,7 +432,8 @@
     "components": {
       "tableview": "📄 TableView",
       "tab": "🗂️ Onglet",
-      "global": "🌐 Global"
+      "global": "🌐 Global",
+      "livetoggle": "📡 Direct / Pause"
     },
     "chart": {
       "no_data": "Aucune donnée",

package/frontend-vue/layers/dms-layout/app/build/components/layout/RowSidePanel.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+/**
+ * The body of the side panel a `sidePanel` action target opens on a row (see
+ * `rowSidePanel.ts`). The DMS draws the header: the title, the row's position
+ * among the rows the table shows, previous and next (J and K too) and close
+ * (Escape too). Below it, the module's component receives the row as a
+ * drawer's component does, mounted anew on each row. The position follows the
+ * table: a refresh that moves or drops the row updates it.
+ */
+import { computed, onBeforeUnmount, onMounted } from "vue";
+import {
+  listenRowPanelClose,
+  listenRowSteps,
+  rowNavigation,
+} from "#dms-ui/app/build/composables/actions/rowNavigation";
+import {
+  closeRowSidePanel,
+  useRowSidePanelContent,
+} from "../../composables/layout/rowSidePanel";
+
+const DEFAULT_POSITION_KEY = "side_panel.position";
+
+const { t } = useI18n();
+const { processI18n } = useTranslation();
+const content = useRowSidePanelContent();
+
+const navigation = computed(() => {
+  const current = content.value;
+  if (!current?.row || !current.source) return undefined;
+  return rowNavigation(current.source, current.row, current.showRow);
+});
+
+const position = computed(() => {
+  if (!navigation.value) return undefined;
+  const params = {
+    index: navigation.value.index + 1,
+    total: navigation.value.total,
+  };
+  const label = content.value?.positionLabel;
+  return label ? processI18n(label, params) : t(DEFAULT_POSITION_KEY, params);
+});
+
+const componentProps = computed(() => ({
+  ...content.value?.componentOptions,
+  rowData: content.value?.row,
+  navigation: navigation.value,
+}));
+
+const close = () => closeRowSidePanel();
+
+let stopKeys: Array<() => void> = [];
+
+onMounted(() => {
+  stopKeys = [
+    listenRowSteps(() => navigation.value),
+    listenRowPanelClose(close),
+  ];
+});
+
+// Another side panel took its place, or the user signed out: the row is no
+// longer open.
+onBeforeUnmount(() => {
+  stopKeys.forEach((stop) => stop());
+  close();
+});
+</script>
+
+<template>
+  <div v-if="content" data-dms-row-side-panel class="flex min-h-0 flex-col">
+    <header
+      class="border-default flex shrink-0 items-start gap-2 border-b py-3 ps-4 pe-3"
+    >
+      <div class="min-w-0 flex-1 self-center">
+        <h2
+          class="text-highlighted truncate text-[15px] leading-[1.3] font-[650] tracking-[-0.015em]"
+        >
+          {{ content.title }}
+        </h2>
+        <p
+          v-if="position"
+          data-dms-row-side-panel-position
+          class="text-muted mt-0.5 text-[12.5px] tabular-nums"
+        >
+          {{ position }}
+        </p>
+      </div>
+      <div class="flex shrink-0 items-center gap-0.5">
+        <template v-if="navigation">
+          <UButton
+            data-dms-row-side-panel-prev
+            icon="i-ph-caret-up"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            square
+            :aria-label="t('side_panel.previous')"
+            :disabled="!navigation.hasPrev"
+            @click="navigation.prev()"
+          />
+          <UButton
+            data-dms-row-side-panel-next
+            icon="i-ph-caret-down"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            square
+            :aria-label="t('side_panel.next')"
+            :disabled="!navigation.hasNext"
+            @click="navigation.next()"
+          />
+        </template>
+        <UButton
+          data-dms-row-side-panel-close
+          icon="i-ph-x"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          square
+          :aria-label="t('side_panel.close')"
+          @click="close"
+        />
+      </div>
+    </header>
+    <div class="min-h-0 flex-1 overflow-y-auto p-4">
+      <Suspense>
+        <component
+          :is="content.component"
+          :key="content.rowKey"
+          v-bind="componentProps"
+        />
+      </Suspense>
+    </div>
+  </div>
+</template>

package/frontend-vue/layers/dms-layout/app/build/composables/layout/rowSidePanel.ts

@@ -0,0 +1,129 @@
+import { type Component, type ShallowRef, shallowRef } from "vue";
+import type { RowNavigationSource } from "#dms-ui/app/build/composables/actions/rowNavigation";
+import {
+  registerSidePanel,
+  unregisterSidePanel,
+} from "../../../composables/useAppSidePanels";
+import {
+  isSidePanelOpen,
+  setOpenSidePanel,
+  useSidePanelPreferences,
+} from "./sidePanelState";
+
+/**
+ * Id of the side panel a `sidePanel` action target opens. It is registered
+ * only while a row is open, so a side panel cookie still naming it after a
+ * reload shows nothing.
+ *
+ * @internal
+ */
+export const ROW_SIDE_PANEL_ID = "dms:row-side-panel";
+/** Registered name of `RowSidePanel.vue` (the layer's `Dms` prefix applied). */
+const ROW_SIDE_PANEL_COMPONENT = "DmsRowSidePanel";
+
+/**
+ * What the row side panel shows: the header the DMS draws, the module's
+ * component and the row it receives.
+ *
+ * @internal
+ */
+export interface RowSidePanelContent {
+  /** One run of an action: rows shown by stepping share it. */
+  session: symbol;
+  /** The table (or button bar) that opened the panel; see {@link rowSidePanelOwnerKey}. */
+  ownerKey: string;
+  title: string;
+  /** i18n key (`$`-prefixed) of the position, receiving `{ index, total }`. */
+  positionLabel?: string;
+  component: Component;
+  /** Props of the component besides `rowData` and `navigation`. */
+  componentOptions: Record<string, unknown>;
+  row?: Data;
+  /** Id of `row`: the key the component is mounted under, the row the table highlights. */
+  rowKey?: string;
+  /** The rows shown, which the panel steps through (J / K). */
+  source?: RowNavigationSource;
+  /** Shows another row of the same run in place. */
+  showRow: (row: Data) => void;
+  /** Runs once the panel closes, whatever closed it. */
+  onClose?: () => void;
+}
+
+// Written on the client only (a click, a table mounting on a deep link), never
+// while the server renders a request, so a module-level ref is safe here. It
+// holds a component and callbacks, which no shared state may serialize.
+const content = shallowRef<RowSidePanelContent | null>(null);
+
+/**
+ * The key a table's open row is kept under, which the table compares to
+ * highlight it.
+ *
+ * @internal
+ */
+export function rowSidePanelOwnerKey(
+  pageId: string,
+  componentId: string,
+): string {
+  return `${pageId}-${componentId}`;
+}
+
+/** @internal */
+export function useRowSidePanelContent(): Readonly<
+  ShallowRef<RowSidePanelContent | null>
+> {
+  return content;
+}
+
+/**
+ * Shows `next` in the row side panel, opening it (and closing any other side
+ * panel) when it is closed. Another run's content gives way: its `onClose`
+ * runs first.
+ *
+ * @internal
+ */
+export function openRowSidePanel(next: RowSidePanelContent): void {
+  const current = content.value;
+  if (current && current.session !== next.session) current.onClose?.();
+  content.value = next;
+  if (current?.title !== next.title) {
+    registerSidePanel({
+      id: ROW_SIDE_PANEL_ID,
+      component: ROW_SIDE_PANEL_COMPONENT,
+      ariaLabel: next.title,
+    });
+  }
+  setOpenSidePanel(useSidePanelPreferences(), ROW_SIDE_PANEL_ID);
+}
+
+function closeContent(current: RowSidePanelContent): void {
+  content.value = null;
+  unregisterSidePanel(ROW_SIDE_PANEL_ID);
+  const preferences = useSidePanelPreferences();
+  if (isSidePanelOpen(preferences, ROW_SIDE_PANEL_ID)) {
+    setOpenSidePanel(preferences, null);
+  }
+  current.onClose?.();
+}
+
+/**
+ * Closes the row side panel; with `session`, only while it still shows that
+ * run.
+ *
+ * @internal
+ */
+export function closeRowSidePanel(session?: symbol): void {
+  const current = content.value;
+  if (!current || (session && current.session !== session)) return;
+  closeContent(current);
+}
+
+/**
+ * Closes the row side panel when `ownerKey` opened it: the table it belongs
+ * to is gone.
+ *
+ * @internal
+ */
+export function closeRowSidePanelOf(ownerKey: string): void {
+  const current = content.value;
+  if (current?.ownerKey === ownerKey) closeContent(current);
+}

package/frontend-vue/layers/dms-layout/app/pages/[...slug].vue

@@ -2,6 +2,7 @@
 import { withoutTrailingSlash } from "ufo";
 import { holdPageHeaderActions } from "../composables/layout/usePageHeaderActions";
 import { useDevReloading } from "../build/composables/dev-reload/useDevReloadHolder";
+import { usePageLiveHost } from "#dms-ui/app/build/composables/live/usePageLiveHost";
 
 defineOptions({ inheritAttrs: false });
 
@@ -216,6 +217,11 @@ const { permissions: userPermissions } = usePermissions();
 const realtimePageId = computed(() => pagelayoutMetadata.value?.fullId ?? "");
 const realtime = usePageRealtime(realtimePageId);
 providePageRealtime(realtime);
+// Before the blocks set up: their refetches go through the page's live gate.
+usePageLiveHost(() => ({
+  pageId: pagelayoutMetadata.value?.fullId,
+  live: pagelayoutMetadata.value?.live,
+}));
 
 function buildPageSetupContext(
   pageInfo: PageInfo,

package/frontend-vue/layers/dms-layout/app/types/page.ts

@@ -1,5 +1,6 @@
 import type { BlockText } from "#dms-core/app/types/composed-text";
 import type { BlockAction } from "#dms-ui/app/build/components/blocks/BlockActions.vue";
+import type { PageLiveOptions } from "#dms-ui/app/types/live";
 
 export type MenuItemType = "label" | "link";
 // MenuItemVariant / MenuItemStatus / MenuItemQuery live in dms-core, the layer
@@ -28,6 +29,8 @@ export interface MenuOptions {
   status?: MenuItemStatus;
   badge?: string;
   bypassTenantAccessGate?: boolean;
+  /** The page's Direct / Pause valve (see `PageLiveOptions`). */
+  live?: PageLiveOptions;
 }
 
 export interface CategoryInfo extends Omit<MenuOptions, "category"> {

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

@@ -895,6 +895,10 @@
     "close": "Don't show again"
   },
   "side_panel": {
-    "resize": "Resize the panel"
+    "resize": "Resize the panel",
+    "position": "{index} of {total}",
+    "previous": "Previous",
+    "next": "Next",
+    "close": "Close"
   }
 }

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

@@ -899,6 +899,10 @@
     "close": "Ne plus afficher"
   },
   "side_panel": {
-    "resize": "Redimensionner le panneau"
+    "resize": "Redimensionner le panneau",
+    "position": "{index} sur {total}",
+    "previous": "Précédent",
+    "next": "Suivant",
+    "close": "Fermer"
   }
 }

package/frontend-vue/layers/dms-ui/app/build/components/table/Table.vue

@@ -37,6 +37,7 @@ import type {
   FormPageUrls,
 } from "../../composables/table-view/useTableViewConfig";
 import type { CustomRowAction } from "../../../types/row-action";
+import type { TableViewRowClick } from "../../utils/rowClickTrigger";
 import type { RowActionConfig } from "#dms-core/app/types/row-action";
 import type { TableTabItem } from "./Tabs.vue";
 import type { ColumnDisplay } from "../../composables/data-types/useColumnValueRenderer";
@@ -149,6 +150,13 @@ export interface TableProps<T> {
 
   rowIdKey?: string;
   rowActions?: TableRowActionOptions;
+  /**
+   * What runs a row's click action: a double-click (the default) or a single
+   * click (`"single"`). See `isRowClickTrigger`.
+   */
+  rowClick?: TableViewRowClick;
+  /** Id of the row a side panel has open: the grid highlights it. */
+  openRowId?: string;
   customNavItems?: NavItem[];
   tabs?: TableTabItem[];
   customButtons?: CustomButton[];
@@ -412,6 +420,7 @@ import {
 } from "../../composables/table/constants";
 import { mergeColumnOrder } from "../../composables/table/utils/columnOrder";
 import { EYEBROW_CLASS } from "../../utils/eyebrow";
+import { isRowClickTrigger } from "../../utils/rowClickTrigger";
 
 // Same color as the surrounding card frame (.dms-card) so sticky
 // rail/pinned cells blend in instead of showing a contrasting block.
@@ -435,6 +444,12 @@ const ROW_SELECTED_BG = "data-[selected=true]:bg-primary/10";
 const ROW_SELECTED_CELL_BG =
   "group-data-[selected=true]:bg-[color-mix(in_srgb,var(--ui-primary)_10%,var(--dms-surface-card))]";
 
+// The row a side panel has open: the hover tint, held, and an accent rule on
+// its leading edge.
+const ROW_OPEN_BG =
+  "data-[open=true]:bg-elevated data-[open=true]:shadow-[inset_2px_0_0_0_var(--ui-primary)]";
+const ROW_OPEN_CELL_BG = "group-data-[open=true]:bg-elevated";
+
 // An expanded row keeps the hover tint and hands its bottom rule to the detail
 // band below it.
 const ROW_EXPANDED_BG = "data-[expanded=true]:bg-elevated";
@@ -501,7 +516,7 @@ const theme = tv({
     colResizer:
       "bg-primary/40 absolute right-0 top-0 z-10 h-full w-1 cursor-col-resize touch-none select-none opacity-0 hover:opacity-100",
 
-    row: `group ${ROW_SELECTED_BG} ${ROW_EXPANDED_BG}`,
+    row: `group ${ROW_SELECTED_BG} ${ROW_EXPANDED_BG} ${ROW_OPEN_BG}`,
     rowCell: `${FIRST_ROW_CELL_GUTTER} border-b-muted border-b h-11 px-3.5 py-0 text-[13px] last:pe-2.5 in-[tr:last-child]:border-b-0 group-data-[expanded=true]:border-b-transparent`,
     rowInternal: "transition-opacity duration-150",
     rowContainer: "relative",
@@ -560,11 +575,11 @@ const theme = tv({
     pinned: {
       left: {
         headCell: `${HEADER_MATCH_BG} sticky z-10 shadow-[2px_0_0_0_rgba(0,0,0,0.06)]`,
-        rowCell: `${PANEL_MATCH_BG} ${ROW_SELECTED_CELL_BG} ${ROW_EXPANDED_CELL_BG} group-data-[presence=true]:bg-elevated sticky z-10 shadow-[2px_0_0_0_rgba(0,0,0,0.06)]`,
+        rowCell: `${PANEL_MATCH_BG} ${ROW_SELECTED_CELL_BG} ${ROW_EXPANDED_CELL_BG} ${ROW_OPEN_CELL_BG} group-data-[presence=true]:bg-elevated sticky z-10 shadow-[2px_0_0_0_rgba(0,0,0,0.06)]`,
       },
       right: {
         headCell: `${HEADER_MATCH_BG} sticky z-10 shadow-[-2px_0_0_0_rgba(0,0,0,0.06)]`,
-        rowCell: `${PANEL_MATCH_BG} ${ROW_SELECTED_CELL_BG} ${ROW_EXPANDED_CELL_BG} group-data-[presence=true]:bg-elevated sticky z-10 shadow-[-2px_0_0_0_rgba(0,0,0,0.06)]`,
+        rowCell: `${PANEL_MATCH_BG} ${ROW_SELECTED_CELL_BG} ${ROW_EXPANDED_CELL_BG} ${ROW_OPEN_CELL_BG} group-data-[presence=true]:bg-elevated sticky z-10 shadow-[-2px_0_0_0_rgba(0,0,0,0.06)]`,
       },
     },
     // Dense lists: 36px rows under a 32px header band.
@@ -1205,7 +1220,7 @@ const rowClickAction = (row: T): RowClickAction | undefined =>
 // lights up always opens something.
 const isRowClickable = (row: T): boolean => rowClickAction(row) !== undefined;
 
-const handleRowDoubleClick = (row: T) => {
+const runRowClickAction = (row: T) => {
   const action = rowClickAction(row);
   if (!action) return;
   if (typeof action === "string") {
@@ -1215,6 +1230,19 @@ const handleRowDoubleClick = (row: T) => {
   props.onCustomRowAction?.(action, row);
 };
 
+// Both events reach the row: `rowClick` tells which one runs its action.
+const handleRowPointer = (event: MouseEvent, row: T) => {
+  if (!isRowClickTrigger(props.rowClick, event)) return;
+  runRowClickAction(row);
+};
+
+const isOpenRow = (row: T): boolean =>
+  props.openRowId !== undefined &&
+  String(get(row, rowIdKey)) === props.openRowId;
+
+const isSingleClickRow = (row: T): boolean =>
+  props.rowClick === "single" && isRowClickable(row);
+
 const presenceRailBackground = (row: T): string => {
   if (getRowPresence(row)) return PRESENCE_RAIL_ACTIVE_BG;
   if (props.loading || !isRowClickable(row)) return PANEL_MATCH_BG;
@@ -1339,6 +1367,10 @@ defineShortcuts({
       />
     </template>
 
+    <!-- A strip the table view adds over its rows (the live hold's "N new"),
+         shown whichever chrome the display keeps. -->
+    <slot name="notice" />
+
     <slot name="body" :table="table">
       <section
         ref="tableRoot"
@@ -1472,20 +1504,24 @@ defineShortcuts({
                     <tr
                       :data-selected="row.getIsSelected()"
                       :data-expanded="row.getIsExpanded()"
+                      :data-open="isOpenRow(row.original) || undefined"
+                      :aria-current="isOpenRow(row.original) || undefined"
                       :data-presence="!!getRowPresence(row.original)"
                       :title="
                         getRowPresence(row.original)
                           ? presenceTooltipText(getRowPresence(row.original)!)
                           : undefined
                       "
-                      :class="
+                      :class="[
                         uiTable.row({
                           loading,
                           rowClickable: isRowClickable(row.original),
                           presence: !!getRowPresence(row.original),
-                        })
-                      "
-                      @dblclick="handleRowDoubleClick(row.original)"
+                        }),
+                        { 'cursor-pointer': isSingleClickRow(row.original) },
+                      ]"
+                      @click="handleRowPointer($event, row.original)"
+                      @dblclick="handleRowPointer($event, row.original)"
                       @mouseenter="handleRowHover(row)"
                       @mouseleave="handleRowLeave"
                       @dragover="reorderHandles.allowDrop"

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+/**
+ * The strip a `liveHold` table shows while its page is paused and events came
+ * in: "N new · Show". Show reads the rows once; the page stays paused.
+ */
+defineProps<{
+  /** Events the table received since its rows were held or last shown. */
+  count: number;
+}>();
+
+const emit = defineEmits<{ show: [] }>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div
+    role="status"
+    class="dms-live-hold-banner text-highlighted flex items-center gap-2.5 border-b border-(--dms-info-line) bg-(--dms-info-tint) py-[7px] ps-[18px] pe-3.5 text-[13px]"
+  >
+    <UIcon name="i-ph-pause-circle" class="text-info size-4 shrink-0" />
+    <span class="min-w-0">
+      {{ t("dms.live.new_rows", { count }, count) }}
+    </span>
+    <span aria-hidden="true" class="text-muted">·</span>
+    <UButton
+      :label="t('dms.live.show_new')"
+      color="neutral"
+      variant="link"
+      size="xs"
+      class="p-0 font-medium"
+      @click="emit('show')"
+    />
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/build/composables/actions/rowNavigation.ts

@@ -83,3 +83,20 @@ export function listenRowSteps(current: () => RowNavigation | undefined) {
   window.addEventListener("keydown", onKey);
   return () => window.removeEventListener("keydown", onKey);
 }
+
+const CLOSE_KEY = "Escape";
+
+/**
+ * Escape closes a row's side panel, unless the user types in a field or a
+ * layer above it (a dialog, a menu) already handled the key. Returns the
+ * listener's removal.
+ */
+export function listenRowPanelClose(close: () => void) {
+  const onKey = (event: KeyboardEvent) => {
+    if (event.key !== CLOSE_KEY || event.defaultPrevented) return;
+    if (isTypingTarget(event.target)) return;
+    close();
+  };
+  window.addEventListener("keydown", onKey);
+  return () => window.removeEventListener("keydown", onKey);
+}