@antelopejs/dms 0.6.2 → 0.7.1

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

@@ -43,6 +43,20 @@ export const DMS_TONE_SOFT: Record<Tone, string> = {
   info: "bg-info/12 text-info",
 };
 
+/**
+ * The solid fills of the v2 badges (the `solid` variant's theme): a count
+ * floating over an icon, where a tint would let the icon show through.
+ */
+export const DMS_TONE_SOLID: Record<Tone, string> = {
+  neutral: "bg-inverted text-inverted",
+  primary: "bg-(--dms-accent-fill) text-(--dms-accent-on-fill)",
+  secondary: "bg-(--ui-color-secondary-400) text-(--ui-color-secondary-950)",
+  success: "bg-(--ui-color-success-500) text-(--ui-color-success-950)",
+  warning: "bg-(--ui-color-warning-400) text-(--ui-color-warning-950)",
+  error: "bg-(--ui-color-error-500) text-white",
+  info: "bg-(--ui-color-info-400) text-(--ui-color-info-950)",
+};
+
 /** Tone as a text color only. */
 export const DMS_TONE_TEXT: Record<Tone, string> = {
   neutral: "text-muted",
@@ -72,3 +86,11 @@ export const DMS_TONE_OUTLINE: Record<Tone, string> = {
 export function toneTextClass(tone: string | undefined): string {
   return tone && isDmsTone(tone) ? DMS_TONE_TEXT[tone] : "";
 }
+
+/**
+ * A tone drawn as an icon well's: neutral, or no tone, is the quiet `muted`
+ * well. A summary row coloured by a navigation badge's tone reads it so.
+ */
+export function iconWellToneOf(tone: Tone | undefined): Tone | "muted" {
+  return !tone || tone === "neutral" ? "muted" : tone;
+}

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

@@ -36,6 +36,11 @@ interface ActivityFeedProps extends Partial<DefaultComponentProps> {
   groupByDay?: boolean;
   /** Shows at most this many entries. */
   maxItems?: number;
+  /**
+   * Fills its grid cell instead of growing with its entries, which scroll
+   * under the fixed head: the cards beside it set the row's height.
+   */
+  fillHeight?: boolean;
   /**
    * Placeholder rows while `fetchUrl` loads: the length the source usually
    * answers, never more than `maxItems`. Optional. Defaults to `maxItems`,
@@ -59,6 +64,7 @@ const props = withDefaults(defineProps<ActivityFeedProps>(), {
   fetchUrlMethod: undefined,
   groupByDay: true,
   maxItems: undefined,
+  fillHeight: false,
   skeletonCount: undefined,
   actions: () => [],
   empty: undefined,
@@ -137,6 +143,32 @@ const skeletonDays = computed<number[][]>(() => {
   }
   return days;
 });
+
+// Filling its cell, the body is the scroll area: sized to nothing
+// (`contain: size`), it leaves the row's height to the cards beside it and
+// stretches to it. Once the grid stacks its cells (`--dms-grid-tracks: 1`,
+// see grid/columns.ts) no neighbour sets that height: the list takes its own,
+// capped like a top-list card's (24rem, about six entries under their day
+// separators). Focusable, so the keyboard scrolls it too; its ring is drawn
+// inside, where the card's clipped edge cannot hide it.
+const scrollArea = computed(() =>
+  props.fillHeight
+    ? {
+        class:
+          "h-full overflow-y-auto overscroll-contain [scrollbar-width:thin] contain-size focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--dms-accent-line) [@container_style(--dms-grid-tracks:1)]:h-auto [@container_style(--dms-grid-tracks:1)]:max-h-[24rem] [@container_style(--dms-grid-tracks:1)]:contain-none",
+        role: "region",
+        tabindex: 0,
+        "aria-label": props.title
+          ? processI18n(props.title)
+          : t("dms.activity_feed.list_label"),
+      }
+    : {},
+);
+// Inside the scroll area, a day's separator stays on top of its entries.
+const dayHeadClass = computed(
+  () => props.fillHeight && "sticky top-0 z-[1] bg-(--dms-surface-card)",
+);
+
 const Wrapper = props.card ? resolveComponent("DmsCard") : "div";
 const wrapperProps = computed(() =>
   props.card
@@ -161,91 +193,94 @@ const wrapperProps = computed(() =>
       />
     </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 v-bind="scrollArea">
+      <!-- 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>
-    </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>
+      <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)"
+            :class="dayHeadClass"
+          >
+            <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>
     </div>
   </component>
 </template>

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

@@ -30,6 +30,9 @@ interface NavCardGridItem {
   stateTone?: Tone;
   tag?: string;
   readout?: string[];
+  /** The page's navigation badge (a category's cards), in the top corner. */
+  badge?: string;
+  badgeTone?: Tone;
 }
 
 interface NavCardGridBlockProps extends DefaultComponentProps {
@@ -125,10 +128,16 @@ const cards = computed(() =>
 // v2 .sx-grid: cards closing on a state line run a tighter rhythm, the whole
 // grid at once so the rows stay aligned.
 const hasStates = computed(() => cards.value.some((card) => !!card.state));
+// A category the viewer opens no page of is left out, title included, as the
+// navigation leaves out an empty group: the settings overview of a member
+// without a role shows no Workspace section. `empty` shows a message instead.
+const isLeftOut = computed(
+  () => !!props.categoryId && !props.empty && cards.value.length === 0,
+);
 </script>
 
 <template>
-  <section>
+  <section v-if="!isLeftOut">
     <DmsSectionHeader
       v-if="props.title || props.description"
       class="mb-3"
@@ -190,6 +199,8 @@ const hasStates = computed(() => cards.value.some((card) => !!card.state));
             :state="card.state"
             :state-tone="card.stateTone"
             :tag="card.tag"
+            :badge="card.badge"
+            :badge-tone="card.badgeTone"
             :readout="card.readout"
             :class="hasStates && 'gap-2.5'"
           />

package/frontend-vue/layers/dms-ui/app/components/card/NavCard.vue

@@ -6,12 +6,14 @@ import DmsStatusPill from "../status-pill/StatusPill.vue";
 import DmsAutoLink from "../link/AutoLink.vue";
 import type { Tone } from "../../types/tone";
 import { MONO_TAG_CLASS } from "../../build/utils/monoChip";
+import { navBadgeClass } from "../../build/utils/navBadge";
 
 // Navigation tile (v2 .navcard): an icon well + title + description rendered
 // as a clickable card linking elsewhere (settings overview, a module's home),
 // optionally closed by the target's live state (v2 .sx-state, pinned to the
 // bottom so the states of a row line up) or a mono readout (v2
-// .module-tile__viz). A tag follows the title (v2 .sx-mod).
+// .module-tile__viz). A tag follows the title (v2 .sx-mod); the target's
+// navigation badge sits in the top corner, drawn as the settings nav draws it.
 //
 // Built on a bare <DmsAutoLink> rather than <ULink> on purpose: ULink's theme
 // injects its own `rounded-md` which would override the .dms-card radius.
@@ -34,6 +36,10 @@ interface NavCardProps {
   statePending?: boolean;
   /** Small uppercase mono tag after the title (module tag: "SAAS"). */
   tag?: string;
+  /** The target's navigation badge ("3"), in the card's top corner. */
+  badge?: string;
+  /** Tone of the badge; neutral grey when absent. */
+  badgeTone?: Tone;
   /** Mono readout lines under the description (module tile). */
   readout?: string[];
 }
@@ -46,6 +52,8 @@ const props = withDefaults(defineProps<NavCardProps>(), {
   state: undefined,
   stateTone: "neutral",
   tag: undefined,
+  badge: undefined,
+  badgeTone: undefined,
   readout: undefined,
 });
 const attrs = useAttrs();
@@ -55,6 +63,7 @@ const theme = tv({
     root: "dms-card dms-card--interactive group flex flex-col gap-3 p-[18px] text-start",
     title: "text-highlighted min-w-0 truncate text-sm font-[650]",
     tag: `${MONO_TAG_CLASS} bg-elevated shrink-0 text-dimmed`,
+    badge: "shrink-0",
     arrow:
       "text-dimmed group-hover:text-primary ms-auto size-4 shrink-0 -translate-x-[3px] opacity-0 transition group-hover:translate-x-0 group-hover:opacity-100",
     description: "text-muted text-[13px] leading-normal",
@@ -78,6 +87,12 @@ const passthrough = computed(() => {
       <h3 :class="ui.title()">{{ props.title }}</h3>
       <span v-if="props.tag" :class="ui.tag()">{{ props.tag }}</span>
       <UIcon name="i-ph-arrow-right" :class="ui.arrow()" :aria-hidden="true" />
+      <span
+        v-if="props.badge"
+        :class="ui.badge({ class: navBadgeClass(props.badgeTone) })"
+      >
+        {{ props.badge }}
+      </span>
     </div>
 
     <p v-if="props.description" :class="ui.description()">

package/frontend-vue/layers/dms-ui/app/components/confirm/ConfirmModal.vue

@@ -2,6 +2,7 @@
 import { nextTick, useTemplateRef, watch, type FunctionalComponent } from "vue";
 import { DialogDescription, DialogTitle } from "reka-ui";
 import DmsIconWell from "../icon-well/IconWell.vue";
+import DmsModalEscHint from "../../build/components/modal/ModalEscHint.vue";
 import {
   ConfirmActionError,
   type ConfirmBodyRender,
@@ -454,16 +455,14 @@ function handleCancel() {
 
     <template #footer>
       <div class="flex w-full items-center justify-end gap-2">
-        <span
-          class="text-dimmed me-auto hidden items-center gap-1.5 text-xs sm:flex"
-        >
-          <UKbd value="Esc" size="sm" />
-          {{
+        <DmsModalEscHint
+          class="max-sm:hidden"
+          :label="
             $t(
-              isSettled ? "dms.confirm.esc_close_hint" : "dms.confirm.esc_hint",
+              isSettled ? 'dms.confirm.esc_close_hint' : 'dms.confirm.esc_hint',
             )
-          }}
-        </span>
+          "
+        />
         <UButton
           :label="
             isSettled

package/frontend-vue/layers/dms-ui/app/components/form/Form.vue

@@ -57,6 +57,11 @@ import { useInstantForm } from "../../build/composables/form/useInstantForm";
 import { useInstantSaveHeader } from "#dms-layout/app/composables/layout/useInstantSaveHeader";
 import DmsFormEntries from "../../build/components/form/FormEntries.vue";
 import DmsFormErrorSummary from "../../build/components/form/FormErrorSummary.vue";
+import DmsFormLoadError from "../../build/components/form/FormLoadError.vue";
+import {
+  type FormRecordLoad,
+  trackFormRecordLoad,
+} from "../../build/composables/form/formRecordLoad";
 import DmsFormRequiredLegend from "../../build/components/form/FormRequiredLegend.vue";
 import DmsFormSections from "../../build/components/form/FormSections.vue";
 
@@ -506,7 +511,7 @@ function setFieldLoading(id: string, isLoading: boolean): void {
 const isAnyFieldLoading = computed(() => fieldLoadingStates.value.size > 0);
 
 function onSubmit(event: Parameters<typeof handleSubmit>[0]) {
-  if (!runValidators()) return;
+  if (loadFailure.value || !runValidators()) return;
   handleSubmit(event);
 }
 
@@ -522,6 +527,7 @@ allFields.value.forEach((field) => {
   ) as FormFieldValue;
 });
 
+let recordLoad: FormRecordLoad | undefined;
 if (props.fetchUrl) {
   const formLoad = await useDmsAsyncData(
     `form-${props.componentId}-${props.pageId}`,
@@ -539,15 +545,23 @@ if (props.fetchUrl) {
     formLoad.status.value = "idle";
   });
 
-  const payload = formLoad.data.value;
-  if (payload) {
+  recordLoad = trackFormRecordLoad(formLoad, (payload) => {
     if (payload.values && Object.keys(payload.values).length > 0) {
       Object.assign(state.value, payload.values);
     }
     if (payload.initial && payload.initial !== initialValues.value) {
       initialValues.value = { ...initialValues.value, ...payload.initial };
     }
-  }
+  });
+}
+
+const loadFailure = computed(() => recordLoad?.failure.value ?? null);
+const isRetryingLoad = computed(() => recordLoad?.retrying.value ?? false);
+
+/** Load the record again after a failure; it is what the form starts from. */
+async function retryRecordLoad(): Promise<void> {
+  await recordLoad?.retry();
+  if (!recordLoad?.failure.value) markFormClean();
 }
 
 // Loaded (or filled with its defaults): this is what the form starts from.
@@ -868,7 +882,15 @@ onUnmounted(async () => {
         </p>
       </header>
 
-      <div :class="surfaceClasses.body">
+      <div v-if="loadFailure" :class="surfaceClasses.body">
+        <DmsFormLoadError
+          :failure="loadFailure"
+          :retrying="isRetryingLoad"
+          @retry="retryRecordLoad"
+        />
+      </div>
+
+      <div v-else :class="surfaceClasses.body">
         <UAlert
           v-if="showConcurrentEditBanner"
           color="warning"
@@ -935,7 +957,7 @@ onUnmounted(async () => {
         on a page, the footer band of a card, a drawer or a modal. It holds
         its place while hidden, so its showing up never moves anything. -->
       <DmsSaveBar
-        v-if="canSave && !isInstant"
+        v-if="canSave && !isInstant && !loadFailure"
         :variant="usesSaveBar ? 'floating' : 'band'"
         :kind="props.kind"
         :dirty="isDirty"

package/frontend-vue/layers/dms-ui/app/components/form/components/Display.vue

@@ -8,6 +8,10 @@ interface DisplayProps {
 }
 
 const props = defineProps<DisplayProps>();
+// The field's options, spread on the display as on its input: the
+// formatter reads them as a table cell does (a status' labels and tones,
+// a select's items).
+const options = useAttrs();
 
 const { getDataType } = useDataTypes();
 const { locale, t } = useI18n();
@@ -29,7 +33,7 @@ const formattedValue = computed(() => {
   if (isEmptyValue(props.modelValue)) return EMPTY_FALLBACK;
   const formatter = dataType.value?.formatter?.default;
   if (!formatter) return String(props.modelValue);
-  return formatter(props.modelValue, locale.value, props);
+  return formatter(props.modelValue, locale.value, options);
 });
 
 const isVNodeValue = computed(() => isVNode(formattedValue.value));

package/frontend-vue/layers/dms-ui/app/components/save-bar/SaveBar.vue

@@ -5,6 +5,7 @@ import {
   type FormKind,
   saveBarState,
 } from "../../build/composables/form/formFooter";
+import { trackFloatingSaveBar } from "../../build/composables/form/floatingSaveBars";
 import DmsUnsavedStatus from "../../build/components/form/UnsavedStatus.vue";
 
 /**
@@ -107,6 +108,9 @@ const ui = computed(() =>
   theme({ variant: props.variant, hidden: state.value.isHidden }),
 );
 const buttons = computed(() => BUTTONS[props.variant]);
+trackFloatingSaveBar(
+  () => props.variant === "floating" && !state.value.isHidden,
+);
 
 // Empty while there is nothing to save: the hidden bar keeps its line.
 const statusText = computed(() => {

package/frontend-vue/layers/dms-ui/app/components/status-pill/StatusPill.vue

@@ -70,8 +70,13 @@ const theme = tv({
   },
   variants: {
     variant: {
-      soft: { root: "rounded-full" },
-      outline: { root: "rounded-full border bg-transparent" },
+      // A pill wider than its cell keeps its shape: the label gives way
+      // with an ellipsis instead of the pill being cut at the cell's edge.
+      soft: { root: "max-w-full rounded-full", label: "min-w-0 truncate" },
+      outline: {
+        root: "max-w-full rounded-full border bg-transparent",
+        label: "min-w-0 truncate",
+      },
       // A state line may run long: it wraps like text instead of a pill.
       text: { root: "whitespace-normal" },
     },

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

@@ -33,6 +33,7 @@ import type {
   TableViewPaginationMode,
   TableViewSourceConfig,
   TableViewReorderConfig,
+  TableViewTab,
 } from "../../composables/table-view/types";
 import {
   TABLE_DISPLAY_ID,
@@ -563,7 +564,7 @@ interface ResolvedTab {
   to?: string;
   toPage?: string;
   countFrom?: string;
-  navBadge?: boolean;
+  navBadge?: TableViewTab["navBadge"];
 }
 
 // A configured "all" tab stands in for the implicit one, at its own place.
@@ -1175,7 +1176,11 @@ watch(
       const source = resolvedTabs.value.find((entry) => entry.id === tab.id);
       if (!source?.navBadge || tab.count === undefined) continue;
       const fullId = source.to ? source.toPage : pageId;
-      if (fullId) setNavBadge(fullId, tab.count > 0 ? String(tab.count) : "");
+      const tone =
+        typeof source.navBadge === "object" ? source.navBadge.tone : undefined;
+      if (fullId) {
+        setNavBadge(fullId, tab.count > 0 ? String(tab.count) : "", tone);
+      }
     }
   },
   { immediate: true },