@antelopejs/dms 0.5.5 → 0.6.0

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

@@ -1,13 +1,48 @@
 <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 {
+  GRID_DECLARED_COLUMNS,
+  type GridDeclaredColumns,
+} from "./grid/constants";
+import DmsPermissionVeil from "../build/components/permission/PermissionVeil.vue";
+
 interface Props {
   component: ResolvedComponentInfo;
   pageId: string;
   componentId: string;
   routeParams?: Record<string, string>;
+  /**
+   * Position in the page layout: the component key, then each child id. Lets
+   * a role preview veil this block; without it the block is never veiled.
+   */
+  layoutPath?: string;
 }
 
 const props = defineProps<Props>();
 
+const { t } = useI18n();
+const preview = usePermissionPreview();
+const previewBlock = computed(() => preview.blockFor(props.layoutPath));
+const veilLabel = computed(() => {
+  const block = previewBlock.value;
+  if (!block) return "";
+  if (block.state === "hidden") {
+    return t("page.settings.roles.preview.veil_hidden", {
+      role: preview.session.value?.roleName ?? "",
+    });
+  }
+  return t(`page.settings.roles.preview.veil_${block.state}`);
+});
+const { processI18n } = useTranslation();
+const veilDetail = computed(() => {
+  const block = previewBlock.value;
+  if (!block || block.state === "hidden") return undefined;
+  return t("page.settings.roles.preview.veil_withheld", {
+    actions: block.withheld.map((title) => processI18n(title)).join(", "),
+  });
+});
+
 function calculateColumnCount(
   children: ResolvedComponentInfo[] | undefined,
 ): number {
@@ -23,63 +58,97 @@ function getColSpanStyle(
 ): Record<string, string> | undefined {
   const colSpan = Number(child.colSpan);
   if (!colSpan || colSpan <= 1) return undefined;
-  return { gridColumn: `span ${colSpan}` };
+  // Never more tracks than the grid has left at its current width (a phone
+  // keeps one): a wider span would add implicit columns past the screen.
+  // `--dms-grid-tracks` comes from the enclosing Grid / GridRow.
+  return {
+    gridColumn: `span min(${colSpan}, var(--dms-grid-tracks, ${colSpan}))`,
+  };
 }
 
 const columnCount = computed(() =>
   calculateColumnCount(props.component.children),
 );
+
+// A Grid drawn here lines its rows up on the widest of them: declared from
+// the layout, so it is known before any row sets up (see GridDeclaredColumns).
+provide<GridDeclaredColumns>(GRID_DECLARED_COLUMNS, {
+  componentId: props.componentId,
+  columns: computed(() =>
+    Math.max(
+      0,
+      ...(props.component.children ?? []).map((row) =>
+        calculateColumnCount(row.children),
+      ),
+    ),
+  ),
+});
 </script>
 
 <template>
-  <Component
-    :is="component.component"
-    v-bind="JSON.parse(JSON.stringify(component.options || {})) || {}"
-    :page-id="pageId"
-    :component-id="componentId"
-    :child-count="columnCount"
-    :route-params="routeParams"
+  <!-- Persistent while a preview runs: its answers move the veils under live
+       blocks (a table view has an async setup), which must not remount. -->
+  <DmsPermissionVeil
+    :state="previewBlock?.state"
+    :label="veilLabel"
+    :detail="veilDetail"
+    :persistent="preview.isActive.value"
   >
-    <template
-      v-for="(child, childIndex) in component.children?.filter((c) => c.slot)"
-      :key="`${componentId}-slot-${childIndex}`"
-      #[child.slot]
+    <Component
+      :is="component.component"
+      v-bind="JSON.parse(JSON.stringify(component.options || {})) || {}"
+      :page-id="pageId"
+      :component-id="componentId"
+      :child-count="columnCount"
+      :route-params="routeParams"
     >
-      <div v-if="getColSpanStyle(child)" :style="getColSpanStyle(child)">
+      <template
+        v-for="(child, childIndex) in component.children?.filter((c) => c.slot)"
+        :key="`${componentId}-slot-${childIndex}`"
+        #[child.slot]
+      >
+        <div v-if="getColSpanStyle(child)" :style="getColSpanStyle(child)">
+          <DmsRecursiveComponent
+            :component="child"
+            :page-id="pageId"
+            :component-id="`${componentId}-child-${child.id}`"
+            :route-params="routeParams"
+            :layout-path="childLayoutPath(layoutPath, child.id)"
+          />
+        </div>
         <DmsRecursiveComponent
+          v-else
           :component="child"
           :page-id="pageId"
           :component-id="`${componentId}-child-${child.id}`"
           :route-params="routeParams"
+          :layout-path="childLayoutPath(layoutPath, child.id)"
         />
-      </div>
-      <DmsRecursiveComponent
-        v-else
-        :component="child"
-        :page-id="pageId"
-        :component-id="`${componentId}-child-${child.id}`"
-        :route-params="routeParams"
-      />
-    </template>
-    <template
-      v-for="(child, childIndex) in component.children?.filter((c) => !c.slot)"
-      :key="`${componentId}-child-${childIndex}`"
-    >
-      <div v-if="getColSpanStyle(child)" :style="getColSpanStyle(child)">
+      </template>
+      <template
+        v-for="(child, childIndex) in component.children?.filter(
+          (c) => !c.slot,
+        )"
+        :key="`${componentId}-child-${childIndex}`"
+      >
+        <div v-if="getColSpanStyle(child)" :style="getColSpanStyle(child)">
+          <DmsRecursiveComponent
+            :component="child"
+            :page-id="pageId"
+            :component-id="`${componentId}-child-${child.id}`"
+            :route-params="routeParams"
+            :layout-path="childLayoutPath(layoutPath, child.id)"
+          />
+        </div>
         <DmsRecursiveComponent
+          v-else
           :component="child"
           :page-id="pageId"
           :component-id="`${componentId}-child-${child.id}`"
           :route-params="routeParams"
+          :layout-path="childLayoutPath(layoutPath, child.id)"
         />
-      </div>
-      <DmsRecursiveComponent
-        v-else
-        :component="child"
-        :page-id="pageId"
-        :component-id="`${componentId}-child-${child.id}`"
-        :route-params="routeParams"
-      />
-    </template>
-  </Component>
+      </template>
+    </Component>
+  </DmsPermissionVeil>
 </template>

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

@@ -1,64 +1,90 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { SOFT_TINT, type SemanticColor } from "../../utils/semanticTint";
+import DmsListRow from "../list-row/ListRow.vue";
+import type { Tone } from "../../types/tone";
 
-// DMS activity / feed / history row (design .feed-row + .watch-row): an
-// optional tinted icon bubble, a title (+ optional subtitle) and trailing meta.
-// Compose a divided list of these for "Recent requests", "Recent queries",
-// activity feeds, history panels… The title/subtitle/trailing accept slots so
-// callers can inline badges or rich markup.
-const props = withDefaults(
-  defineProps<{
-    icon?: string;
-    iconColor?: SemanticColor;
-    title?: string;
-    subtitle?: string;
-    trailing?: string;
-    /** Render title/subtitle in mono (for paths, queries…). */
-    mono?: boolean;
-  }>(),
-  {
-    iconColor: "neutral",
-    mono: false,
-  },
-);
+// DMS activity / feed / history row (v2 .activity): the feed preset of
+// DmsListRow — a 30px tinted well, a one-line title, a dimmed subtitle and a
+// mono trailing time. Stack these in DmsActivityFeed or a card for activity
+// feeds, "Recent requests", history panels… The title, subtitle and trailing
+// accept slots so callers can inline badges or rich markup.
+interface Props {
+  icon?: string;
+  /** Well tone (v2 .activity.is-*). */
+  iconColor?: Tone;
+  title?: string;
+  subtitle?: string;
+  /** Trailing meta, usually the time. */
+  trailing?: string;
+  /** Render title/subtitle in mono (for paths, queries…). */
+  mono?: boolean;
+  /** Accent dot after the trailing meta. */
+  unread?: boolean;
+  /** Makes the whole row a link. */
+  to?: string;
+  /** Hover band; on by default. */
+  interactive?: boolean;
+}
 
-const bubbleClass = computed(() => SOFT_TINT[props.iconColor]);
+interface Slots {
+  default?: () => unknown;
+  subtitle?: () => unknown;
+  trailing?: () => unknown;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  icon: undefined,
+  iconColor: "neutral",
+  title: undefined,
+  subtitle: undefined,
+  trailing: undefined,
+  mono: false,
+  unread: false,
+  to: undefined,
+  interactive: true,
+});
+const slots = defineSlots<Slots>();
+
+const meta = computed(() => (props.subtitle ? [props.subtitle] : undefined));
+const hasTitle = computed(() => !!props.title || !!slots.default);
 </script>
 
 <template>
-  <div
-    class="hover:bg-elevated/40 flex items-center gap-3 px-4 py-3 transition-colors"
+  <DmsListRow
+    size="sm"
+    icon-size="xs"
+    marker="trailing"
+    truncate
+    :icon="props.icon"
+    :tone="props.iconColor"
+    :meta="meta"
+    :mono="props.mono"
+    :unread="props.unread || undefined"
+    :trailing="props.trailing"
+    :to="props.to"
+    :interactive="props.interactive"
   >
-    <div
-      v-if="icon"
-      :class="bubbleClass"
-      class="grid size-[26px] shrink-0 place-items-center rounded-full"
-    >
-      <UIcon :name="icon" class="size-3.5" :aria-hidden="true" />
-    </div>
-
-    <div class="min-w-0 flex-1">
-      <div
-        :class="mono ? 'font-mono text-[12.5px]' : 'text-[13px]'"
-        class="text-toned flex items-center gap-2 truncate"
+    <template v-if="hasTitle" #default>
+      <!-- One line on wide screens (the full text shows on hover); on a
+           phone a sentence wraps rather than losing its end, while a mono
+           path or query keeps its line. -->
+      <span
+        class="min-w-0 truncate"
+        :class="
+          props.mono
+            ? 'text-toned font-mono text-[12.5px]'
+            : 'max-sm:whitespace-normal'
+        "
+        :title="props.title"
       >
-        <slot>{{ title }}</slot>
-      </div>
-      <div
-        v-if="subtitle || $slots.subtitle"
-        :class="mono ? 'font-mono' : ''"
-        class="text-dimmed mt-1 truncate text-[11px]"
-      >
-        <slot name="subtitle">{{ subtitle }}</slot>
-      </div>
-    </div>
-
-    <div
-      v-if="trailing || $slots.trailing"
-      class="text-dimmed shrink-0 text-right font-mono text-[11px]"
-    >
-      <slot name="trailing">{{ trailing }}</slot>
-    </div>
-  </div>
+        <slot>{{ props.title }}</slot>
+      </span>
+    </template>
+    <template v-if="slots.subtitle" #meta>
+      <slot name="subtitle" />
+    </template>
+    <template v-if="slots.trailing" #trailing>
+      <slot name="trailing" />
+    </template>
+  </DmsListRow>
 </template>

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

@@ -0,0 +1,250 @@
+<script setup lang="ts">
+import { computed, resolveComponent } from "vue";
+import DmsActivityItem from "../activity/ActivityItem.vue";
+import DmsBlockActions, {
+  type BlockAction,
+} from "../../build/components/blocks/BlockActions.vue";
+import DmsEmptyState from "../empty-state/EmptyState.vue";
+import DmsEyebrow from "../section-header/Eyebrow.vue";
+import DmsRowSkeleton from "../../build/components/skeleton/RowSkeleton.vue";
+import { useBlockItems } from "../../build/composables/blocks/useBlockItems";
+import { formatRelativeTime } from "#dms-core/app/utils/formatter";
+import {
+  type ActivityFeedDay,
+  type ActivityFeedItem,
+  formatActivityTime,
+  groupActivityByDay,
+  resolveActivityParams,
+} from "../../build/components/activity-feed/activityFeedDays";
+import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
+import type { BlockEmptyText } from "../../build/components/blocks/BlockStatus.vue";
+
+// The renderer's props are optional: DmsActivityFeed is both the backend
+// `ActivityFeed` block (`dms-activity-feed-block`) and a template component.
+interface ActivityFeedProps extends Partial<DefaultComponentProps> {
+  /** Eyebrow title of the card head ("Activity"). */
+  title?: string;
+  /** Entries shown when no data source is set. */
+  items?: ActivityFeedItem[];
+  /** Endpoint answering `{ items }`, newest first. */
+  fetchUrl?: string;
+  fetchUrlMethod?: string;
+  /**
+   * Files the entries under day separators ("Today · Sep 29") with their
+   * time; off, each entry shows how long ago it happened.
+   */
+  groupByDay?: boolean;
+  /** Shows at most this many entries. */
+  maxItems?: number;
+  /**
+   * Placeholder rows while `fetchUrl` loads: the length the source usually
+   * answers, never more than `maxItems`. Optional. Defaults to `maxItems`,
+   * or 3.
+   */
+  skeletonCount?: number;
+  /** Link buttons in the card head ("View all"). */
+  actions?: BlockAction[];
+  /** Empty state text (i18n keys with `$` or literals). */
+  empty?: BlockEmptyText;
+  /** Mono titles and meta (paths, queries, request logs). */
+  mono?: boolean;
+  /** Card frame with a head; off, the bare list. */
+  card?: boolean;
+}
+
+const props = withDefaults(defineProps<ActivityFeedProps>(), {
+  title: undefined,
+  items: undefined,
+  fetchUrl: undefined,
+  fetchUrlMethod: undefined,
+  groupByDay: true,
+  maxItems: undefined,
+  skeletonCount: undefined,
+  actions: () => [],
+  empty: undefined,
+  mono: false,
+  card: true,
+});
+
+const SKELETON_ROWS = 3;
+// A day separator every few placeholder rows, the rhythm of a recent feed.
+const SKELETON_ROWS_PER_DAY = 3;
+const SKELETON_TITLE_WIDTHS = ["w-3/5", "w-1/2", "w-2/5"];
+
+const { t, locale } = useI18n();
+const { processI18n } = useTranslation();
+
+const {
+  items: list,
+  isPending,
+  hasError,
+  refresh,
+} = useBlockItems<ActivityFeedItem>({
+  items: () => props.items,
+  fetchUrl: props.fetchUrl,
+  fetchUrlMethod: props.fetchUrlMethod,
+  watchActions: props.watchActions,
+  componentId: props.componentId,
+});
+
+const entries = computed<ActivityFeedItem[]>(() =>
+  props.maxItems ? list.value.slice(0, props.maxItems) : list.value,
+);
+
+const days = computed<ActivityFeedDay[]>(() =>
+  props.groupByDay
+    ? groupActivityByDay(entries.value, locale.value, {
+        today: t("dms.activity_feed.today"),
+        yesterday: t("dms.activity_feed.yesterday"),
+      })
+    : [{ key: "all", items: entries.value }],
+);
+
+const trailingOf = (item: ActivityFeedItem): string | undefined => {
+  if (item.time) return processI18n(item.time);
+  if (!item.date) return undefined;
+  return props.groupByDay
+    ? formatActivityTime(item.date, locale.value)
+    : formatRelativeTime(item.date, t, locale.value);
+};
+
+const textOf = (item: ActivityFeedItem, text: string): string =>
+  processI18n(text, resolveActivityParams(item.params, processI18n));
+
+const metaOf = (item: ActivityFeedItem): string | undefined =>
+  item.meta?.length
+    ? item.meta.map((entry) => textOf(item, entry)).join(" · ")
+    : undefined;
+
+const isFirstLoad = isPending;
+
+// The placeholder takes the feed's loaded shape: as many rows as it will show
+// (`skeletonCount`, else `maxItems`; never more than `maxItems`), under day
+// separators when the entries are grouped by day.
+const skeletonDays = computed<number[][]>(() => {
+  const wanted = props.skeletonCount ?? props.maxItems ?? SKELETON_ROWS;
+  const count = props.maxItems ? Math.min(wanted, props.maxItems) : wanted;
+  const perDay = props.groupByDay ? SKELETON_ROWS_PER_DAY : count;
+  const days: number[][] = [];
+  for (let start = 0; start < count; start += perDay) {
+    days.push(
+      Array.from(
+        { length: Math.min(perDay, count - start) },
+        (_, offset) => start + offset,
+      ),
+    );
+  }
+  return days;
+});
+const Wrapper = props.card ? resolveComponent("DmsCard") : "div";
+const wrapperProps = computed(() =>
+  props.card
+    ? {
+        padded: false,
+        title: props.title ? processI18n(props.title) : undefined,
+        class: "min-w-0 overflow-hidden",
+      }
+    : { class: "min-w-0" },
+);
+</script>
+
+<template>
+  <component :is="Wrapper" v-bind="wrapperProps">
+    <template v-if="props.card && props.actions.length" #actions>
+      <DmsBlockActions
+        :actions="props.actions"
+        size="xs"
+        lead-variant="ghost"
+        lead-color="neutral"
+        rest-variant="ghost"
+      />
+    </template>
+
+    <!-- Rows at the loaded rows' boxes (a 18px title line over a 16px meta
+         line beside the 30px well), split by the same hairlines. -->
+    <div v-if="isFirstLoad" class="py-1" aria-busy="true">
+      <div v-for="(day, dayIndex) in skeletonDays" :key="dayIndex">
+        <div
+          v-if="props.groupByDay"
+          class="flex items-center gap-2.5 px-[18px] pt-3.5 pb-1.5 after:h-px after:flex-1 after:bg-(--ui-border-muted)"
+        >
+          <USkeleton class="my-[1.5px] h-2.5 w-24" />
+        </div>
+        <div class="divide-y divide-(--ui-border-muted)">
+          <DmsRowSkeleton
+            v-for="row in day"
+            :key="row"
+            class="px-[18px] py-2.5"
+            well="size-[30px] rounded-lg"
+            :lines="[
+              `my-[3px] h-3 ${SKELETON_TITLE_WIDTHS[row % SKELETON_TITLE_WIDTHS.length]}`,
+              'my-[3px] h-2.5 w-1/3',
+            ]"
+            lines-class="grid gap-px"
+          />
+        </div>
+      </div>
+    </div>
+
+    <DmsEmptyState
+      v-else-if="hasError"
+      variant="error"
+      size="sm"
+      :title="t('dms.activity_feed.error_title')"
+      :description="t('dms.activity_feed.error_description')"
+      :actions="[
+        {
+          label: t('dms.activity_feed.retry'),
+          icon: 'i-ph-arrow-clockwise',
+          color: 'neutral',
+          variant: 'outline',
+          onClick: () => refresh(),
+        },
+      ]"
+    />
+
+    <DmsEmptyState
+      v-else-if="!entries.length"
+      icon="i-ph-tray"
+      size="sm"
+      :title="
+        props.empty
+          ? processI18n(props.empty.title)
+          : t('dms.activity_feed.empty_title')
+      "
+      :description="
+        props.empty?.description
+          ? processI18n(props.empty.description)
+          : undefined
+      "
+    />
+
+    <div v-else class="py-1">
+      <section v-for="day in days" :key="day.key">
+        <!-- v2 .feed__day: "Today · Sep 29" and a hairline to the edge. -->
+        <div
+          v-if="props.groupByDay && day.name"
+          class="flex items-center gap-2.5 px-[18px] pt-3.5 pb-1.5 after:h-px after:flex-1 after:bg-(--ui-border-muted)"
+        >
+          <DmsEyebrow as="h3">
+            <b class="text-muted font-semibold">{{ day.name }}</b>
+            {{ day.date ? ` · ${day.date}` : "" }}
+          </DmsEyebrow>
+        </div>
+        <DmsActivityItem
+          v-for="(item, index) in day.items"
+          :key="item.id ?? `${day.key}-${index}`"
+          :icon="item.icon"
+          :icon-color="item.tone ?? 'neutral'"
+          :title="textOf(item, item.title)"
+          :subtitle="metaOf(item)"
+          :trailing="trailingOf(item)"
+          :unread="item.unread"
+          :mono="props.mono"
+          :to="item.to"
+          :interactive="!!item.to"
+        />
+      </section>
+    </div>
+  </component>
+</template>