@antelopejs/dms 0.5.5 → 0.6.0

package/frontend-vue/layers/dms-ui/app/build/components/activity-feed/activityFeedDays.ts

@@ -0,0 +1,173 @@
+import {
+  regionalDateTimeFormat,
+  regionalDayKey,
+  regionalDayNumber,
+} from "#dms-core/app/utils/regional";
+import type { Tone } from "../../../types/tone";
+
+/** One entry of an activity feed, as a page declares it or a source answers. */
+export interface ActivityFeedItem {
+  id?: string;
+  icon?: string;
+  tone?: Tone;
+  /** Title (i18n key with `$` or literal). */
+  title: string;
+  /** Dimmed details, joined by "·". */
+  meta?: string[];
+  /**
+   * Values the title and the details interpolate; a `$`-prefixed value is
+   * translated first.
+   */
+  params?: Record<string, string>;
+  /** ISO date: files the entry under its day and gives its time. */
+  date?: string;
+  /** Literal trailing text, in place of the formatted time. */
+  time?: string;
+  unread?: boolean;
+  /** Makes the row a link. */
+  to?: string;
+}
+
+/** A run of entries sharing one calendar day, newest first. */
+export interface ActivityFeedDay {
+  /** `YYYY-MM-DD`, or `undated` for entries without a date. */
+  key: string;
+  /** "Today", "Yesterday", a weekday within the week, else the date. */
+  name?: string;
+  /** The short date after the name ("Sep 29"); absent when the name is it. */
+  date?: string;
+  items: ActivityFeedItem[];
+}
+
+export interface ActivityFeedDayLabels {
+  today: string;
+  yesterday: string;
+}
+
+const WEEK_DAYS = 7;
+const UNDATED_KEY = "undated";
+const YEAR_KEY_LENGTH = 4;
+
+const isValidDate = (date: Date): boolean => !Number.isNaN(date.getTime());
+
+/** Calendar days from `date` to `now`, counted in the reader's time zone. */
+export function calendarDaysAgo(date: Date, now: Date): number {
+  return regionalDayNumber(now) - regionalDayNumber(date);
+}
+
+/** The short date of a day ("Sep 29"), with its year when not this year's. */
+export function formatShortDate(date: Date, now: Date, locale: string): string {
+  const sameYear =
+    regionalDayKey(date).slice(0, YEAR_KEY_LENGTH) ===
+    regionalDayKey(now).slice(0, YEAR_KEY_LENGTH);
+  return regionalDateTimeFormat(locale, {
+    month: "short",
+    day: "numeric",
+    ...(sameYear ? {} : { year: "numeric" }),
+  }).format(date);
+}
+
+/** How far back a day is, in the coarse buckets of a feed. */
+export type RelativeDayBucket = "today" | "week" | "older";
+
+/** Today, earlier this week (the last seven days), or older. */
+export function relativeDayBucket(date: Date, now: Date): RelativeDayBucket {
+  const daysAgo = calendarDaysAgo(date, now);
+  if (daysAgo <= 0) return "today";
+  if (daysAgo < WEEK_DAYS) return "week";
+  return "older";
+}
+
+/**
+ * How a calendar day reads next to today: "Today", "Yesterday", a weekday
+ * within the week, else the short date — with the short date beside a name.
+ */
+export function nameCalendarDay(
+  date: Date,
+  now: Date,
+  locale: string,
+  labels: ActivityFeedDayLabels,
+): Pick<ActivityFeedDay, "name" | "date"> {
+  const daysAgo = calendarDaysAgo(date, now);
+  const shortDate = formatShortDate(date, now, locale);
+  if (daysAgo === 0) return { name: labels.today, date: shortDate };
+  if (daysAgo === 1) return { name: labels.yesterday, date: shortDate };
+  if (daysAgo > 1 && daysAgo < WEEK_DAYS) {
+    const weekday = regionalDateTimeFormat(locale, {
+      weekday: "long",
+    }).format(date);
+    return {
+      name: weekday.charAt(0).toLocaleUpperCase(locale) + weekday.slice(1),
+      date: shortDate,
+    };
+  }
+  return { name: shortDate };
+}
+
+/**
+ * Splits a newest-first feed into calendar days, keeping the feed order.
+ * Entries without a valid date are gathered last, under no heading.
+ */
+export function groupActivityByDay(
+  items: ActivityFeedItem[],
+  locale: string,
+  labels: ActivityFeedDayLabels,
+  now: Date = new Date(),
+): ActivityFeedDay[] {
+  const days = new Map<string, ActivityFeedDay>();
+  for (const item of items) {
+    const date = item.date ? new Date(item.date) : null;
+    const key = date && isValidDate(date) ? regionalDayKey(date) : UNDATED_KEY;
+    let day = days.get(key);
+    if (!day) {
+      day =
+        key === UNDATED_KEY || !date
+          ? { key, items: [] }
+          : { key, ...nameCalendarDay(date, now, locale, labels), items: [] };
+      days.set(key, day);
+    }
+    day.items.push(item);
+  }
+  const dated = [...days.values()].filter((day) => day.key !== UNDATED_KEY);
+  const undated = days.get(UNDATED_KEY);
+  return undated ? [...dated, undated] : dated;
+}
+
+/** Hour and minute of an entry, in the reader's locale ("09:42"). */
+export function formatActivityTime(date: string, locale: string): string {
+  const parsed = new Date(date);
+  if (!isValidDate(parsed)) return "";
+  return regionalDateTimeFormat(locale, {
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(parsed);
+}
+
+type ActivityTranslate = (
+  key: string,
+  params?: Record<string, string> | null,
+) => string;
+
+const isTextKey = (value: string): boolean => value.startsWith("$");
+
+/**
+ * The values an entry's title and details interpolate. A `$` value is a text
+ * of its own, translated with the entry's literal values: "Signed in on
+ * {device}" with `device` = "{browser} on {os}".
+ */
+export function resolveActivityParams(
+  params: Record<string, string> | undefined,
+  translate: ActivityTranslate,
+): Record<string, string> | null {
+  if (!params) return null;
+  const entries = Object.entries(params);
+  const literals = Object.fromEntries(
+    entries.filter(([, value]) => !isTextKey(value)),
+  );
+  return Object.fromEntries(
+    entries.map(([name, value]) => [
+      name,
+      isTextKey(value) ? translate(value, literals) : value,
+    ]),
+  );
+}

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

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { ButtonProps } from "@nuxt/ui";
+import { buttonLinkProps } from "../../utils/link";
+import type { Tone } from "../../../types/tone";
+
+/** A link button a block option declares (interface-dms `BlockLinkAction`). */
+export interface BlockAction {
+  label: string;
+  /** Route, `#anchor` or URL; an absolute URL opens in a new tab. */
+  to: string;
+  icon?: string;
+  variant?: ButtonProps["variant"];
+  color?: Tone;
+}
+
+// The link buttons of a display block (empty state, banner, card head). One
+// action leads (`leadVariant` / `leadColor`): the first, or the last in a
+// banner where the main action sits right-most. The others are quiet buttons,
+// unless an action sets its own look. Labels follow the `$` i18n convention.
+interface BlockActionsProps {
+  actions: BlockAction[];
+  size?: ButtonProps["size"];
+  leadVariant?: ButtonProps["variant"];
+  leadColor?: Tone;
+  /** Look of the other actions. */
+  restVariant?: ButtonProps["variant"];
+  /** Which action leads. */
+  leadPosition?: "first" | "last";
+}
+
+const props = withDefaults(defineProps<BlockActionsProps>(), {
+  size: "sm",
+  leadVariant: "solid",
+  leadColor: "primary",
+  restVariant: "outline",
+  leadPosition: "first",
+});
+
+const { processI18n } = useTranslation();
+
+function isLead(index: number): boolean {
+  return props.leadPosition === "last"
+    ? index === props.actions.length - 1
+    : index === 0;
+}
+
+function buttonVariant(
+  action: BlockAction,
+  index: number,
+): ButtonProps["variant"] {
+  return (
+    action.variant ?? (isLead(index) ? props.leadVariant : props.restVariant)
+  );
+}
+
+function buttonColor(action: BlockAction, index: number): ButtonProps["color"] {
+  return action.color ?? (isLead(index) ? props.leadColor : "neutral");
+}
+</script>
+
+<template>
+  <UButton
+    v-for="(action, index) in props.actions"
+    :key="`${index}-${action.to}`"
+    :label="processI18n(action.label ?? '')"
+    :icon="action.icon"
+    :size="props.size"
+    :variant="buttonVariant(action, index)"
+    :color="buttonColor(action, index)"
+    v-bind="buttonLinkProps(action.to)"
+  />
+</template>

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

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import DmsEmptyState from "../../../components/empty-state/EmptyState.vue";
+
+/** What a block shows when it has nothing to list (interface-dms `BlockEmptyText`). */
+export interface BlockEmptyText {
+  /** `$`-prefixed for an i18n key, like `description`. */
+  title: string;
+  description?: string;
+}
+
+// What a data-driven block shows instead of its content: an empty list, or a
+// first load that failed (with a retry). Compact v2 .c-empty in a card, so it
+// keeps the footprint of the block it stands in for.
+interface BlockStatusProps {
+  /** `empty`: nothing to show. `error`: the first load failed. */
+  state: "empty" | "error";
+  /** Replaces the default texts of the empty state. */
+  empty?: BlockEmptyText;
+  /** Draw the card surface around it (off inside a card). */
+  card?: boolean;
+}
+
+interface BlockStatusEmits {
+  (e: "retry"): void;
+}
+
+const props = withDefaults(defineProps<BlockStatusProps>(), {
+  empty: undefined,
+  card: true,
+});
+const emit = defineEmits<BlockStatusEmits>();
+
+const { t } = useI18n();
+const { processI18n } = useTranslation();
+</script>
+
+<template>
+  <div :class="props.card && 'dms-card'">
+    <DmsEmptyState
+      size="sm"
+      :variant="props.state === 'error' ? 'error' : 'no-data'"
+      :title="
+        props.state === 'error'
+          ? t('dms.blocks.load_error')
+          : props.empty
+            ? processI18n(props.empty.title)
+            : t('dms.blocks.empty')
+      "
+      :description="
+        props.state === 'error'
+          ? t('dms.blocks.load_error_hint')
+          : props.empty?.description
+            ? processI18n(props.empty.description)
+            : undefined
+      "
+    >
+      <template v-if="props.state === 'error'" #actions>
+        <UButton
+          :label="t('dms.blocks.retry')"
+          icon="i-ph-arrows-clockwise"
+          color="neutral"
+          variant="outline"
+          size="sm"
+          @click="emit('retry')"
+        />
+      </template>
+    </DmsEmptyState>
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/build/components/chart/internal/ChartSkeleton.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+/**
+ * The chart-shaped placeholder of a chart that is not drawn yet: ghost
+ * columns on a baseline for an axis chart, a ring for a circular one. It
+ * takes the exact frame height of the drawn chart, so the swap moves nothing.
+ */
+interface ChartSkeletonProps {
+  /** Frame height of the drawn chart, as a CSS length. */
+  height: string;
+  /** Donut, pie or radial bar: a ring instead of columns. */
+  circular?: boolean;
+}
+
+const props = withDefaults(defineProps<ChartSkeletonProps>(), {
+  circular: false,
+});
+
+// Ghost columns at plot height, rising like a series would (heights in %).
+const GHOST_BAR_HEIGHTS = [38, 52, 46, 64, 58, 72, 66, 80, 74, 88, 70, 92];
+const PERCENT_UNIT = "%";
+// The ring spans most of the frame, like Apex sizes a donut to its box.
+const RING_SIZE = "min(78%, 16rem)";
+const RING_HOLE_MASK =
+  "radial-gradient(circle, transparent 54%, #000 calc(54% + 1px))";
+</script>
+
+<template>
+  <div
+    v-if="props.circular"
+    class="grid place-items-center"
+    :style="{ height: props.height }"
+    aria-busy="true"
+  >
+    <USkeleton
+      class="aspect-square rounded-full"
+      :style="{
+        height: RING_SIZE,
+        maskImage: RING_HOLE_MASK,
+        WebkitMaskImage: RING_HOLE_MASK,
+      }"
+    />
+  </div>
+  <div
+    v-else
+    class="flex items-end gap-2.5 border-b border-(--dms-chart-grid) px-1.5"
+    :style="{ height: props.height }"
+    aria-busy="true"
+  >
+    <USkeleton
+      v-for="(barHeight, index) in GHOST_BAR_HEIGHTS"
+      :key="index"
+      class="flex-1 rounded-t-[4px] rounded-b-none"
+      :style="{ height: `${barHeight}${PERCENT_UNIT}` }"
+    />
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/build/components/containers/constants.ts

@@ -0,0 +1,2 @@
+/** Placeholder field rows shown while the container body resolves. */
+export const CONTAINER_SKELETON_FIELDS = 4;

package/frontend-vue/layers/dms-ui/app/build/components/containers/drawer/DynamicDrawer.vue

@@ -1,8 +1,13 @@
 <script setup lang="ts">
 import type { Component } from "vue";
 import { DialogDescription, DialogTitle, VisuallyHidden } from "reka-ui";
-
-type DrawerDirection = "top" | "bottom" | "left" | "right";
+import type {
+  ContainerColor,
+  DrawerDirection,
+} from "../../../../composables/containers/types";
+import DmsIconWell from "../../../../components/icon-well/IconWell.vue";
+import { CONTAINER_SKELETON_FIELDS } from "../constants";
+import { DMS_CONTAINER_KEY } from "../../../composables/containers/context";
 
 interface DynamicDrawerProps {
   title: string;
@@ -10,9 +15,13 @@ interface DynamicDrawerProps {
   containerId: string;
   component: Component;
   componentOptions?: Record<string, unknown>;
+  /** Mounts the body component anew when it changes. */
+  componentKey?: string;
   headerComponent?: Component;
   headerComponentOptions?: Record<string, unknown>;
   direction?: DrawerDirection;
+  icon?: string;
+  color?: ContainerColor;
 }
 
 interface DynamicDrawerEmits {
@@ -20,7 +29,13 @@ interface DynamicDrawerEmits {
 }
 
 const props = withDefaults(defineProps<DynamicDrawerProps>(), {
+  description: undefined,
+  componentOptions: undefined,
+  headerComponent: undefined,
+  headerComponentOptions: undefined,
   direction: "bottom",
+  icon: undefined,
+  color: "primary",
 });
 const emit = defineEmits<DynamicDrawerEmits>();
 
@@ -51,6 +66,22 @@ async function tryClose() {
   closePromise = null;
 }
 
+// A form in the body closes through the guards (its Cancel button) and
+// registers its own under this id, whatever component wraps it.
+provide(DMS_CONTAINER_KEY, { id: props.containerId, close: tryClose });
+
+// Another page (Back, a link): the drawer belongs to the one left. Its
+// unsaved changes were already confirmed by the navigation guard.
+const route = useDmsRoute();
+watch(
+  () => route.path,
+  () => {
+    clearGuards(props.containerId);
+    isOpen.value = false;
+    emit("close");
+  },
+);
+
 function handleSuccess(result?: unknown) {
   clearGuards(props.containerId);
   isOpen.value = false;
@@ -74,15 +105,20 @@ function onContentResolve() {
     :title="title"
     :dismissible="false"
     :ui="{
-      header:
-        'border-b border-default flex items-center justify-between gap-4 pb-4',
+      header: 'border-b border-default flex shrink-0 items-center gap-4 pb-4',
+      // The scroll area's bottom padding: a form's sticky footer sits flush
+      // with the drawer's edge (see Form.vue).
+      container: '[--dms-form-foot-pb:1rem]',
     }"
     @close:prevent="tryClose"
   >
     <template #header>
-      <!-- Same container as the body so the title aligns with the form -->
-      <UContainer class="flex w-full flex-1 items-center justify-between gap-4">
-        <div v-if="headerComponent" class="flex-1">
+      <!-- Same container as the body so the title aligns with the form. On
+        phones the drawer's own padding is the 16px gutter: the container
+        drops its own. -->
+      <UContainer class="flex w-full flex-1 items-start gap-3 max-sm:px-0">
+        <DmsIconWell v-if="icon" :icon="icon" :tone="color" />
+        <div v-if="headerComponent" class="min-w-0 flex-1">
           <VisuallyHidden>
             <DialogTitle>{{ title }}</DialogTitle>
             <DialogDescription>{{ description }}</DialogDescription>
@@ -91,11 +127,17 @@ function onContentResolve() {
             <component :is="headerComponent" v-bind="headerComponentOptions" />
           </Suspense>
         </div>
-        <div v-else class="flex-1">
-          <DialogTitle as="h2" class="text-highlighted font-semibold">
+        <div v-else class="min-w-0 flex-1 self-center">
+          <DialogTitle
+            as="h2"
+            class="text-highlighted text-[17px] leading-[1.3] font-[650] tracking-[-0.02em]"
+          >
             {{ title }}
           </DialogTitle>
-          <DialogDescription v-if="description" class="text-muted text-sm">
+          <DialogDescription
+            v-if="description"
+            class="text-muted mt-1 text-[13px]"
+          >
             {{ description }}
           </DialogDescription>
           <VisuallyHidden v-else>
@@ -103,23 +145,39 @@ function onContentResolve() {
           </VisuallyHidden>
         </div>
         <UButton
-          icon="i-lucide-x"
+          icon="i-ph-x"
           color="neutral"
           variant="ghost"
+          size="sm"
+          square
           aria-label="Close"
+          :disabled="isContentLoading"
           @click="tryClose"
         />
       </UContainer>
     </template>
     <template #body>
-      <UContainer>
+      <UContainer class="max-sm:px-0">
         <Suspense @pending="onContentPending" @resolve="onContentResolve">
           <component
             :is="component"
+            :key="componentKey"
             v-bind="componentOptions"
             :container-id="containerId"
             @success="handleSuccess"
           />
+          <template #fallback>
+            <div class="grid gap-4 sm:grid-cols-2" aria-busy="true">
+              <div
+                v-for="field in CONTAINER_SKELETON_FIELDS"
+                :key="field"
+                class="flex flex-col gap-2"
+              >
+                <USkeleton class="h-3 w-24" />
+                <USkeleton class="h-8 w-full" />
+              </div>
+            </div>
+          </template>
         </Suspense>
       </UContainer>
     </template>