@antelopejs/dms 0.5.6 → 0.6.0

package/frontend-vue/layers/dms-ui/app/build/components/period/PeriodRangeCalendar.vue

@@ -0,0 +1,294 @@
+<script setup lang="ts">
+import { computed, shallowRef, watch } from "vue";
+import {
+  type CalendarDate,
+  type DateValue,
+  getLocalTimeZone,
+  isSameMonth,
+  today,
+} from "@internationalized/date";
+import {
+  RangeCalendarCell,
+  RangeCalendarCellTrigger,
+  RangeCalendarGrid,
+  RangeCalendarGridBody,
+  RangeCalendarGridHead,
+  RangeCalendarGridRow,
+  RangeCalendarHeadCell,
+  RangeCalendarNext,
+  RangeCalendarPrev,
+  RangeCalendarRoot,
+  type DateRange,
+} from "reka-ui";
+import type { CalendarRange } from "../../composables/period/periodDisplay";
+
+// Two-month range calendar of the period selector (design .cal): a
+// continuous accent strip for the selected range with filled endpoints, and
+// the comparison range painted under it as a violet strip with ringed ends.
+interface Props {
+  modelValue: CalendarRange | null;
+  compareRange?: CalendarRange | null;
+  locale: string;
+  weekStartsOn?: number;
+  numberOfMonths?: number;
+  readonly?: boolean;
+}
+
+type WeekStart = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+const props = withDefaults(defineProps<Props>(), {
+  compareRange: null,
+  weekStartsOn: 1,
+  numberOfMonths: 2,
+  readonly: false,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: CalendarRange];
+  /** A start day is picked and the end is still to come. */
+  pending: [start: CalendarDate | null];
+}>();
+
+const DAYS_PER_WEEK = 7;
+const LAST_COLUMN = DAYS_PER_WEEK - 1;
+const WEEKDAY_LABEL_LENGTH = 2;
+
+const todayDate = today(getLocalTimeZone());
+
+// Day being picked: the first click of a new range, until the second lands.
+// shallowRef: a deep ref would unwrap the date classes (losing their private
+// fields) and break their types.
+const pendingStart = shallowRef<CalendarDate | null>(null);
+
+// The range's last month sits on the right, the month before it on its
+// left: a trailing range reads against what came just before.
+function firstVisibleMonth(range: CalendarRange | null): CalendarDate {
+  const anchor = (range?.end ?? todayDate).set({ day: 1 });
+  return anchor.subtract({ months: props.numberOfMonths - 1 });
+}
+
+const placeholder = shallowRef<DateValue>(firstVisibleMonth(props.modelValue));
+
+// The view follows the range when it changes from outside (a preset, the
+// date fields), not while the reader pages through months.
+watch(
+  () => props.modelValue,
+  (range) => {
+    pendingStart.value = null;
+    if (!range) return;
+    const visibleStart = placeholder.value.set({ day: 1 });
+    const visibleEnd = visibleStart.add({ months: props.numberOfMonths });
+    const visible =
+      range.start.compare(visibleStart) >= 0 &&
+      range.end.compare(visibleEnd) < 0;
+    if (!visible) placeholder.value = firstVisibleMonth(range);
+  },
+);
+
+const rekaValue = computed<DateRange>(() =>
+  pendingStart.value
+    ? { start: pendingStart.value, end: undefined }
+    : {
+        start: props.modelValue?.start,
+        end: props.modelValue?.end,
+      },
+);
+
+function onUpdate(value: DateRange | null) {
+  const start = value?.start as CalendarDate | undefined;
+  const end = value?.end as CalendarDate | undefined;
+  if (start && end) {
+    pendingStart.value = null;
+    emit("pending", null);
+    emit("update:modelValue", { start, end });
+    return;
+  }
+  pendingStart.value = start ?? null;
+  emit("pending", pendingStart.value);
+}
+
+function onPlaceholder(value: DateValue) {
+  // Picking a start day re-anchors reka's view on it; with two months on
+  // screen that would shift the grid under the pointer.
+  if (pendingStart.value && isSameMonth(value, pendingStart.value)) return;
+  placeholder.value = value;
+}
+
+const monthFormatter = computed(
+  () =>
+    new Intl.DateTimeFormat(props.locale, { month: "long", year: "numeric" }),
+);
+
+function monthTitle(month: DateValue): string {
+  return monthFormatter.value.format(month.toDate(getLocalTimeZone()));
+}
+
+function weekdayLabel(day: string): string {
+  return day.replace(".", "").slice(0, WEEKDAY_LABEL_LENGTH);
+}
+
+function within(date: DateValue, range: CalendarRange | null): boolean {
+  if (!range) return false;
+  return date.compare(range.start) >= 0 && date.compare(range.end) <= 0;
+}
+
+function isSameDay(a: DateValue, b: DateValue | undefined): boolean {
+  return !!b && a.compare(b) === 0;
+}
+
+const selection = computed<CalendarRange | null>(() =>
+  pendingStart.value
+    ? { start: pendingStart.value, end: pendingStart.value }
+    : props.modelValue,
+);
+
+const STRIP_RADIUS_START = "rounded-s-lg";
+const STRIP_RADIUS_END = "rounded-e-lg";
+
+// The strip lives on the cell: accent for the range, violet for the
+// comparison, rounded where it starts or breaks (row ends, month ends).
+function cellClass(
+  date: DateValue,
+  month: DateValue,
+  column: number,
+): (string | false)[] {
+  if (!isSameMonth(date, month)) return ["invisible"];
+  const range = selection.value;
+  const compare = props.compareRange;
+  const inRange = within(date, range);
+  const inCompare = within(date, compare);
+  const isLastOfMonth = date.add({ days: 1 }).month !== date.month;
+  const opensStrip =
+    column === 0 ||
+    date.day === 1 ||
+    isSameDay(date, range?.start) ||
+    isSameDay(date, compare?.start);
+  const closesStrip =
+    column === LAST_COLUMN ||
+    isLastOfMonth ||
+    isSameDay(date, range?.end) ||
+    isSameDay(date, compare?.end);
+  const isSingleDay = !!range && isSameDay(range.start, range.end);
+  return [
+    inRange && !isSingleDay && "bg-(--dms-accent-tint)",
+    inCompare && "bg-secondary/10",
+    opensStrip && STRIP_RADIUS_START,
+    closesStrip && STRIP_RADIUS_END,
+  ];
+}
+
+function triggerClass(date: DateValue): (string | false)[] {
+  const range = selection.value;
+  const compare = props.compareRange;
+  const isEndpoint =
+    isSameDay(date, range?.start) || isSameDay(date, range?.end);
+  const isCompareEdge =
+    !isEndpoint &&
+    (isSameDay(date, compare?.start) || isSameDay(date, compare?.end));
+  return [
+    isEndpoint &&
+      "bg-(--dms-accent-fill) text-(--dms-accent-on-fill) font-bold shadow-(--dms-fill-highlight)",
+    isCompareEdge &&
+      "text-secondary font-[650] ring ring-inset ring-secondary/40",
+    !isEndpoint && (within(date, range) ? "text-highlighted" : "text-toned"),
+    !isEndpoint &&
+      !props.readonly &&
+      "cursor-pointer hover:bg-(--ui-bg-elevated) data-disabled:cursor-default data-disabled:hover:bg-transparent",
+  ];
+}
+
+const weekStart = computed(() => props.weekStartsOn as WeekStart);
+</script>
+
+<template>
+  <RangeCalendarRoot
+    v-slot="{ grid, weekDays }"
+    :model-value="rekaValue"
+    :placeholder="placeholder"
+    :locale="locale"
+    :week-starts-on="weekStart"
+    :number-of-months="numberOfMonths"
+    :max-value="todayDate"
+    :readonly="readonly"
+    weekday-format="short"
+    prevent-deselect
+    class="flex gap-6"
+    @update:model-value="onUpdate"
+    @update:placeholder="onPlaceholder"
+  >
+    <div
+      v-for="(month, index) in grid"
+      :key="month.value.toString()"
+      class="w-56 shrink-0"
+    >
+      <div class="mb-1.5 flex h-7 items-center">
+        <RangeCalendarPrev v-if="index === 0" as-child>
+          <UButton
+            icon="i-ph-caret-left-light"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            square
+            class="w-[26px] justify-center"
+            :aria-label="
+              $t('dms.period.popover.previous_month', 'Previous month')
+            "
+          />
+        </RangeCalendarPrev>
+        <span v-else class="w-[26px]" aria-hidden="true" />
+        <span
+          class="text-highlighted flex-1 text-center text-[13px] font-semibold first-letter:uppercase"
+        >
+          {{ monthTitle(month.value) }}
+        </span>
+        <RangeCalendarNext v-if="index === grid.length - 1" as-child>
+          <UButton
+            icon="i-ph-caret-right-light"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            square
+            class="w-[26px] justify-center"
+            :aria-label="$t('dms.period.popover.next_month', 'Next month')"
+          />
+        </RangeCalendarNext>
+        <span v-else class="w-[26px]" aria-hidden="true" />
+      </div>
+      <RangeCalendarGrid class="w-full border-collapse select-none">
+        <RangeCalendarGridHead>
+          <RangeCalendarGridRow class="grid grid-cols-7">
+            <RangeCalendarHeadCell
+              v-for="day in weekDays"
+              :key="day"
+              class="text-dimmed grid h-6 place-items-center font-mono text-[10px] font-semibold tracking-[0.06em] uppercase"
+            >
+              {{ weekdayLabel(day) }}
+            </RangeCalendarHeadCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridHead>
+        <RangeCalendarGridBody class="grid gap-y-0.5">
+          <RangeCalendarGridRow
+            v-for="(row, rowIndex) in month.rows"
+            :key="`row-${rowIndex}`"
+            class="grid grid-cols-7"
+          >
+            <RangeCalendarCell
+              v-for="(date, column) in row"
+              :key="date.toString()"
+              :date="date"
+              class="grid h-8 place-items-center p-0"
+              :class="cellClass(date, month.value, column)"
+            >
+              <RangeCalendarCellTrigger
+                :day="date"
+                :month="month.value"
+                class="focus-visible:outline-primary relative grid size-[30px] place-items-center rounded-lg font-mono text-[12.5px] font-medium tabular-nums outline-offset-1 transition-colors focus-visible:outline-2 data-disabled:opacity-55 data-highlighted:bg-(--dms-accent-tint) data-today:after:absolute data-today:after:bottom-[3px] data-today:after:size-[3px] data-today:after:rounded-full data-today:after:bg-current"
+                :class="triggerClass(date)"
+              />
+            </RangeCalendarCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridBody>
+      </RangeCalendarGrid>
+    </div>
+  </RangeCalendarRoot>
+</template>

package/frontend-vue/layers/dms-ui/app/build/components/permission/PermissionVeil.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { tv } from "tailwind-variants";
+import { computed } from "vue";
+
+// Block permission veil (v2 card "Locked"): shows what a role would lose on a
+// block without taking the block away.
+// - hidden: the content stays in place but inert under a hatched veil, with a
+//   centred error lock badge.
+// - readonly / limited: the content is untouched; a warning badge sits on the
+//   top-right edge, its tooltip naming what is withheld.
+// - partial (an entry to a page the role opens without all of it, e.g. a
+//   settings card): the content stays usable under a light warning hatch,
+//   with a warning lock badge on the top-right edge.
+// Without a state the slot renders alone, with no wrapper element, unless the
+// veil is `persistent`.
+interface Props {
+  state?: "hidden" | "readonly" | "limited" | "partial" | null;
+  /** Badge text, e.g. "Hidden for Support". */
+  label?: string;
+  /** Tooltip of the badge, e.g. the withheld actions. */
+  detail?: string;
+  /**
+   * Keep the wrapper elements (as `display: contents`) while there is no
+   * state, so a state change only restyles the wrapper and never remounts the
+   * slot content. Needed whenever the state can change under live content: a
+   * remount loses the content's state and refetches it, and remounting a
+   * component with an async setup while the page's Suspense waits for the
+   * next page made Vue mount it under a detached placeholder (`insertBefore`
+   * on a null parent).
+   */
+  persistent?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  state: null,
+  label: "",
+  detail: undefined,
+  persistent: false,
+});
+
+const veil = tv({
+  slots: {
+    root: "relative isolate min-w-0",
+    veil: [
+      "pointer-events-auto absolute inset-0 z-10 rounded-[inherit] backdrop-blur-[3px]",
+      "bg-[repeating-linear-gradient(-45deg,color-mix(in_srgb,var(--ui-bg)_84%,transparent)_0_10px,color-mix(in_srgb,var(--ui-bg)_70%,transparent)_10px_20px)]",
+    ],
+    badge: [
+      "absolute z-20 inline-flex h-6 items-center gap-1.5 rounded-full border px-2.5 whitespace-nowrap backdrop-blur-md",
+      "font-mono text-[10.5px] font-[650] tracking-[0.08em] uppercase",
+    ],
+    icon: "size-[13px] shrink-0",
+  },
+  variants: {
+    hidden: {
+      true: {
+        root: "overflow-hidden rounded-(--dms-radius-card)",
+        badge:
+          "text-error top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 border-(--dms-error-line) bg-(--dms-error-tint)",
+      },
+      false: {
+        // On the block's top edge rather than inside it, so it never covers
+        // the block's own toolbar; opaque, so the edge does not show through.
+        badge:
+          "text-warning -top-3 right-4 border-(--dms-warning-line) [background:linear-gradient(var(--dms-warning-tint),var(--dms-warning-tint)),var(--ui-bg)]",
+      },
+    },
+    // The content stays reachable: the hatch lets every pointer through and
+    // leaves the text readable (no blur).
+    partial: {
+      true: {
+        root: "rounded-(--dms-radius-card)",
+        veil: "pointer-events-none backdrop-blur-none bg-[repeating-linear-gradient(-45deg,color-mix(in_srgb,var(--ui-warning)_10%,transparent)_0_10px,transparent_10px_20px)]",
+      },
+    },
+  },
+});
+
+const isHidden = computed(() => props.state === "hidden");
+const isPartial = computed(() => props.state === "partial");
+const ui = computed(() =>
+  veil({ hidden: isHidden.value, partial: isPartial.value }),
+);
+const rootClass = computed(() => (props.state ? ui.value.root() : "contents"));
+</script>
+
+<template>
+  <slot v-if="!props.state && !props.persistent" />
+  <!-- The slot keeps the same place in the tree whatever the state: a change
+       only restyles the wrapper and adds or drops the veil and badge. -->
+  <div
+    v-else
+    :class="rootClass"
+    :data-permission-veil="props.state || undefined"
+  >
+    <div
+      :inert="isHidden || undefined"
+      :aria-hidden="isHidden || undefined"
+      class="contents"
+    >
+      <slot />
+    </div>
+    <div v-if="isHidden || isPartial" :class="ui.veil()" />
+    <UTooltip v-if="props.state" :text="props.detail" :disabled="!props.detail">
+      <span
+        :class="ui.badge()"
+        role="status"
+        :tabindex="props.detail ? 0 : undefined"
+      >
+        <UIcon
+          :name="isHidden || isPartial ? 'i-ph-lock-simple' : 'i-ph-eye'"
+          :class="ui.icon()"
+        />
+        {{ props.label }}
+      </span>
+    </UTooltip>
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/build/components/section/context.ts

@@ -0,0 +1,10 @@
+import type { InjectionKey } from "vue";
+
+/**
+ * Provided by a framed DmsSection to its content. A block that brings its own
+ * card (a Form) reads it to drop that card and lay its rows out like the
+ * section's field rows instead of nesting a second frame.
+ */
+export const DMS_SECTION_SURFACE_KEY: InjectionKey<boolean> = Symbol(
+  "dms:section-surface",
+);

package/frontend-vue/layers/dms-ui/app/build/components/skeleton/RowSkeleton.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+// The placeholder of a list row while it loads: an icon well and a few text
+// lines, each sized like the row it stands for so nothing moves once the
+// rows arrive. The padding is the caller's (`class`).
+
+interface RowSkeletonProps {
+  /** Classes of the icon well: its size and radius. */
+  well: string;
+  /** Classes of each text line: its height, width and margins. */
+  lines: readonly string[];
+  /** Classes of the column of lines: their spacing. */
+  linesClass?: string;
+  /** Centres the well on the lines rather than on the first one. */
+  isCentered?: boolean;
+}
+
+const props = withDefaults(defineProps<RowSkeletonProps>(), {
+  linesClass: "space-y-1.5",
+  isCentered: false,
+});
+</script>
+
+<template>
+  <div
+    class="flex gap-3"
+    :class="props.isCentered ? 'items-center' : 'items-start'"
+    aria-hidden="true"
+  >
+    <USkeleton class="shrink-0" :class="props.well" />
+    <div class="min-w-0 flex-1" :class="props.linesClass">
+      <USkeleton
+        v-for="(line, index) in props.lines"
+        :key="index"
+        :class="line"
+      />
+    </div>
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/build/components/stat/StatCell.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import DmsIconWell, {
+  type IconWellTone,
+} from "../../../components/icon-well/IconWell.vue";
+import DmsEyebrow from "../../../components/section-header/Eyebrow.vue";
+import DmsAutoLink from "../../../components/link/AutoLink.vue";
+import { DMS_TONE_TEXT } from "../../utils/tone";
+import type { Tone } from "../../../types/tone";
+
+// One headline figure: icon well, mono label, value, detail line. The one
+// markup behind the compact KPI card (`KpiCard variant="stat"`) and every cell
+// of a StatGroup, so the two never drift apart.
+//
+// - size `md`: the compact stat card (v2 .mc-summary), framed, 40px well,
+//   22px value; `#aside` holds what sits on its right (a KPI's trend).
+// - size `sm`: a bare cell of a joined group (v2 .cs-status), 32px well,
+//   14px value; the group draws the frame and the hairlines.
+export type StatCellSize = "md" | "sm";
+
+interface StatCellProps {
+  /** Mono label above the value; drawn as a skeleton in `placeholder`. */
+  eyebrow?: string;
+  /** The figure or the short state; the `#value` slot replaces it. */
+  value?: string | number;
+  /** Icon of the well; the cell has no well without one. */
+  icon?: string;
+  tone?: IconWellTone;
+  /** One line under the value. */
+  detail?: string;
+  /** Tone of the detail line (`neutral` = muted text). */
+  detailTone?: Tone;
+  /** Route, `#anchor` or URL the whole cell links to. */
+  to?: string;
+  size?: StatCellSize;
+  /** The value is loading: well and value turn to skeletons, labels stay. */
+  loading?: boolean;
+  /** Nothing is known yet: every line is a skeleton at its loaded box. */
+  placeholder?: boolean;
+  /** A refetch runs: the value stays, faded. */
+  refreshing?: boolean;
+  /**
+   * `md` only. Under 28rem of the enclosing `@container` (two cards side by
+   * side on a phone) the well goes on top and the lines wrap. Without it, the
+   * label wraps on phones only.
+   */
+  stack?: boolean;
+}
+
+interface StatCellSlots {
+  /** Replaces the value (a figure split from its unit). */
+  value?: () => unknown;
+  /** `md` only: the right-hand column (trend, sparkline). */
+  aside?: () => unknown;
+}
+
+const props = withDefaults(defineProps<StatCellProps>(), {
+  eyebrow: "",
+  value: undefined,
+  icon: undefined,
+  tone: "primary",
+  detail: undefined,
+  detailTone: "neutral",
+  to: undefined,
+  size: "md",
+  loading: false,
+  placeholder: false,
+  refreshing: false,
+  stack: false,
+});
+
+defineSlots<StatCellSlots>();
+
+// Literal class strings (Tailwind extracts them).
+const MD_CELL = "dms-card flex items-center gap-3.5 px-4 py-3.5";
+const MD_STACK = "@max-md:flex-col @max-md:items-start @max-md:gap-2.5";
+const SM_CELL = "flex min-w-0 items-start gap-3 px-4 py-3.5";
+
+const isMd = computed(() => props.size === "md");
+const wraps = computed(() =>
+  props.stack ? "@max-md:whitespace-normal" : "max-sm:whitespace-normal",
+);
+const cellClass = computed(() => {
+  if (!isMd.value) {
+    return [SM_CELL, props.to && "hover:bg-elevated transition-colors"];
+  }
+  return [
+    MD_CELL,
+    props.stack && MD_STACK,
+    props.to && "dms-card--interactive",
+  ];
+});
+const detailClass = computed(() => DMS_TONE_TEXT[props.detailTone]);
+</script>
+
+<template>
+  <component
+    :is="props.to ? DmsAutoLink : 'div'"
+    :to="props.to"
+    :class="cellClass"
+  >
+    <template v-if="isMd">
+      <USkeleton
+        v-if="props.placeholder || (props.loading && props.icon)"
+        class="size-10 shrink-0 rounded-[10px]"
+      />
+      <DmsIconWell
+        v-else-if="props.icon"
+        :icon="props.icon"
+        :tone="props.tone"
+        size="xl"
+      />
+      <!-- A placeholder keeps the loaded lines' boxes (eyebrow 13px, value
+           24px, detail 16px), so the card keeps its height when it lands. -->
+      <div v-if="props.placeholder" class="grid flex-1 gap-[3px]">
+        <USkeleton class="my-[1.5px] h-2.5 w-20" />
+        <USkeleton class="my-px h-[22px] w-10" />
+        <USkeleton class="my-0.5 h-3 w-24" />
+      </div>
+      <div v-else class="grid min-w-0 flex-1 gap-[3px]">
+        <DmsEyebrow
+          tone="muted"
+          truncate
+          :class="wraps"
+          :label="props.eyebrow"
+        />
+        <USkeleton v-if="props.loading" class="h-[22px] w-16" />
+        <p
+          v-else
+          class="text-highlighted text-[22px] leading-[1.1] font-[650] tracking-[-0.035em] tabular-nums transition-opacity"
+          :class="props.refreshing && 'opacity-55'"
+        >
+          <slot name="value">{{ props.value }}</slot>
+        </p>
+        <p
+          v-if="props.detail && !props.loading"
+          class="truncate text-xs"
+          :class="[wraps, detailClass]"
+        >
+          {{ props.detail }}
+        </p>
+      </div>
+      <slot name="aside" />
+    </template>
+
+    <template v-else>
+      <USkeleton
+        v-if="props.placeholder || (props.loading && props.icon)"
+        class="size-8 shrink-0 rounded-[9px]"
+      />
+      <DmsIconWell
+        v-else-if="props.icon"
+        :icon="props.icon"
+        :tone="props.tone"
+        size="sm"
+      />
+      <!-- Each placeholder line keeps the loaded line's box (eyebrow 11px,
+           value 19px, detail 16px), so the group keeps its height. -->
+      <div v-if="props.placeholder" class="grid flex-1 gap-0.5">
+        <USkeleton class="my-px h-[9px] w-16" />
+        <USkeleton class="my-[2.5px] h-3.5 w-24" />
+        <USkeleton class="my-0.5 h-3 w-20" />
+      </div>
+      <span v-else class="grid min-w-0 gap-0.5">
+        <DmsEyebrow as="span" size="xs" :label="props.eyebrow" />
+        <USkeleton v-if="props.loading" class="my-0.5 h-3.5 w-24" />
+        <b
+          v-else
+          class="text-highlighted text-sm leading-[1.35] font-semibold whitespace-nowrap tabular-nums transition-opacity"
+          :class="props.refreshing && 'opacity-55'"
+        >
+          <slot name="value">{{ props.value }}</slot>
+        </b>
+        <template v-if="props.detail">
+          <USkeleton v-if="props.loading" class="h-3 w-20" />
+          <small v-else class="truncate text-xs" :class="detailClass">
+            {{ props.detail }}
+          </small>
+        </template>
+      </span>
+    </template>
+  </component>
+</template>