@antelopejs/dms 0.9.8 → 0.11.0

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

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import { usePageLive } from "../../composables/live/usePageLive";
+import { pageReadAt } from "../../build/composables/live/pageReadClock";
+import { useUpdatedLabel } from "../../build/composables/live/useUpdatedLabel";
+import {
+  type PageToolbarSize,
+  providePageToolbar,
+} from "../../build/composables/page-toolbar/pageToolbarContext";
+import { PAGE_TOOLBAR_CONTROL_HEIGHT_CLASSES } from "../../build/composables/page-toolbar/toolbarControlHeight";
+import { refreshPageBlocks } from "../../utils/blockRefresh";
+import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
+
+// Its ids are optional: a component may draw it by hand around controls of
+// its own, outside the page's block tree.
+interface PageToolbarBlockProps extends Partial<DefaultComponentProps> {
+  /** The size of its controls, unless a child sets its own. */
+  size?: PageToolbarSize;
+  /** Without a live toggle on screen: "updated N s ago". */
+  showUpdatedAt?: boolean;
+  /** Without a live toggle on screen: the button reading the page again. */
+  refresh?: boolean;
+}
+
+const props = withDefaults(defineProps<PageToolbarBlockProps>(), {
+  size: "sm",
+  showUpdatedAt: true,
+  refresh: true,
+});
+
+// The updated label at the live toggle's steps, so it reads alike with or
+// without `live`; the refresh button stands as tall as the toggle's pill.
+const STATUS_TEXT_CLASSES: Record<PageToolbarSize, string> = {
+  xs: "text-[11.5px]",
+  sm: "text-[12.5px]",
+  md: "text-[13px]",
+};
+const REFRESH_ICON = "i-ph-arrow-clockwise";
+
+useComponentEvent(props.componentId);
+useWatch(props.watchActions || [], props.componentId);
+
+const { t } = useI18n();
+const toolbar = providePageToolbar(computed(() => props.size));
+const live = usePageLive();
+const statusTextClass = computed(() => STATUS_TEXT_CLASSES[props.size]);
+const heightClass = computed(
+  () => PAGE_TOOLBAR_CONTROL_HEIGHT_CLASSES[props.size],
+);
+
+// The browser's clock: the server and the hydrating render draw no status.
+const isMounted = ref(false);
+onMounted(() => (isMounted.value = true));
+
+// A live page's own clock, else the page's last read.
+const updatedLabel = useUpdatedLabel(
+  () => live.lastUpdatedAt.value ?? pageReadAt.value,
+  props.showUpdatedAt,
+);
+
+// The live toggle says when the page was updated, and more: the toolbar
+// only does where there is none to see.
+const showsStatus = computed(
+  () =>
+    isMounted.value &&
+    (props.showUpdatedAt || props.refresh) &&
+    !(live.isEnabled.value && toolbar.hasLiveToggle.value),
+);
+
+const isRefreshing = ref(false);
+async function refreshPage() {
+  if (isRefreshing.value) return;
+  isRefreshing.value = true;
+  try {
+    await refreshPageBlocks();
+  } finally {
+    isRefreshing.value = false;
+  }
+}
+</script>
+
+<template>
+  <div
+    class="dms-page-toolbar flex w-full flex-wrap items-center justify-end gap-x-3 gap-y-2"
+  >
+    <slot />
+    <span class="dms-page-toolbar__spacer" aria-hidden="true" />
+    <div
+      v-if="showsStatus"
+      class="dms-page-toolbar__status flex items-center gap-1"
+    >
+      <span
+        v-if="props.showUpdatedAt && updatedLabel"
+        class="text-muted tabular-nums"
+        :class="statusTextClass"
+        aria-live="off"
+      >
+        {{ updatedLabel }}
+      </span>
+      <UButton
+        v-if="props.refresh"
+        data-action="refresh"
+        color="neutral"
+        variant="ghost"
+        square
+        :size="props.size"
+        :class="heightClass"
+        :icon="REFRESH_ICON"
+        :loading="isRefreshing"
+        :aria-label="t('dms.live.refresh')"
+        :title="t('dms.live.refresh')"
+        @click="refreshPage"
+      />
+    </div>
+  </div>
+</template>
+
+<style>
+/* One order whatever the children's: the leading blocks, the spacer, the
+   updated label or the live toggle, then the period. A child is matched by
+   the block it draws, through the wrappers a role preview may add. Wrapped
+   onto more lines, the trailing controls stay on the right. */
+.dms-page-toolbar > * {
+  order: 0;
+}
+.dms-page-toolbar > .dms-page-toolbar__spacer {
+  order: 1;
+  flex: 1 1 0%;
+}
+.dms-page-toolbar > .dms-page-toolbar__status,
+.dms-page-toolbar > :is(.dms-live-toggle, :has(.dms-live-toggle)) {
+  order: 2;
+}
+.dms-page-toolbar > :is(.dms-period-selector, :has(.dms-period-selector)) {
+  order: 3;
+}
+</style>

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import DmsStatGroup, {
+  type StatGroupColumnsFrom,
   type StatGroupItem,
   type StatGroupLayout,
 } from "../stat-group/StatGroup.vue";
@@ -27,6 +28,8 @@ interface StatGroupBlockProps extends DefaultComponentProps {
   items?: StatGroupBlockItem[];
   layout?: StatGroupLayout;
   columns?: number;
+  /** The group's width from which all `columns` sit side by side. */
+  columnsFrom?: StatGroupColumnsFrom;
   /** Accessible name of the group. */
   label?: string;
   fetchUrl?: string;
@@ -48,6 +51,7 @@ const props = withDefaults(defineProps<StatGroupBlockProps>(), {
   items: () => [],
   layout: "joined",
   columns: undefined,
+  columnsFrom: undefined,
   label: undefined,
   fetchUrl: undefined,
   fetchUrlMethod: undefined,
@@ -100,6 +104,7 @@ const resolvedItems = computed<StatGroupItem[]>(() =>
     :items="resolvedItems"
     :layout="props.layout"
     :columns="props.columns"
+    :columns-from="props.columnsFrom"
     :loading="isPending"
     :skeleton-count="
       props.skeletonCount ?? props.columns ?? DEFAULT_SKELETON_COUNT

package/frontend-vue/layers/dms-ui/app/components/chart/ApexChartHost.vue

@@ -117,11 +117,24 @@ function pushOptionsWithoutGroupBroadcast(
     .catch(() => undefined);
 }
 
+function axisTypeOf(options: Record<string, unknown>): unknown {
+  return (options.xaxis as Record<string, unknown> | undefined)?.type;
+}
+
+/**
+ * Apex merges an update into the options it holds: an option the update no
+ * longer sets stays. A category axis drawing calendar buckets carries its own
+ * label and tooltip formatters, which a datetime axis would keep writing raw
+ * timestamps with (and the reverse leaves Apex's datetime state behind), so a
+ * chart whose X axis changes type is drawn anew rather than updated.
+ */
+const axisType = computed(() => String(axisTypeOf(props.options) ?? ""));
+
 watch(
   () => props.options,
-  (next) => {
+  (next, previous) => {
     const instance = chartRef.value;
-    if (!instance) {
+    if (!instance || axisTypeOf(next) !== axisTypeOf(previous)) {
       pinnedOptions.value = rawApexInput(next);
       return;
     }
@@ -158,6 +171,7 @@ function redrawIfResizedWhileAnimating() {
 <template>
   <div ref="hostRef" class="dms-apex">
     <ApexChart
+      :key="axisType"
       ref="chartRef"
       :type="apexType"
       :height="height"

package/frontend-vue/layers/dms-ui/app/components/chart/Chart.vue

@@ -11,6 +11,10 @@ import { useChartFetch } from "../../composables/chart/useChartFetch";
 import { useThemeRevision } from "../../composables/chart/useThemeRevision";
 import { formatValue } from "../../composables/chart/formatValue";
 import { toDonutRecords } from "../../composables/chart/donutRecords";
+import {
+  localizeDonutRecords,
+  localizeSeries,
+} from "../../composables/chart/localizeSeries";
 import {
   CHART_EVENT_NAMES,
   isSegmentChart,
@@ -117,16 +121,26 @@ const themeRevision = useThemeRevision();
 
 const isCircular = computed(() => CIRCULAR_CHART_TYPES.includes(props.type));
 
+// A bare chart's own series and slices are translated like a card's: the
+// `$` keys of a name, a category or a label reach Apex in the reader's
+// language. A nested chart receives its card's series already translated.
+function localized(series: ChartSeries[]): ChartSeries[] {
+  return series.map((entry) => localizeSeries(entry, processI18n));
+}
+
 const staticSeries = computed<ChartSeries[]>(() => {
   if (isCircular.value) return [];
   if (!props.staticDataset) return [];
-  return props.staticDataset as ChartSeries[];
+  return localized(props.staticDataset as ChartSeries[]);
 });
 
 const staticDonut = computed<DonutRecord[]>(() => {
   if (!isCircular.value) return [];
   if (!props.staticDataset) return [];
-  return props.staticDataset as DonutRecord[];
+  return localizeDonutRecords(
+    props.staticDataset as DonutRecord[],
+    processI18n,
+  );
 });
 
 const isNested = computed(() => !!nestedContext);
@@ -148,7 +162,7 @@ const seriesFromCtx = computed<ChartSeries[]>(() => {
 
 const fetchSeries = computed<ChartSeries[]>(() => {
   if (!data.value) return [];
-  return data.value.series ?? [];
+  return localized(data.value.series ?? []);
 });
 
 const finalSeries = computed<ChartSeries[]>(() => {
@@ -185,14 +199,18 @@ function buildXyClickPayload(opts: {
   seriesIndex: number;
 }): ChartClickPayload {
   const series = finalSeries.value[opts.seriesIndex];
-  const point = series?.data[opts.dataPointIndex];
+  const dataPointIndex = apex.sourcePointIndex(
+    opts.seriesIndex,
+    opts.dataPointIndex,
+  );
+  const point = series?.data[dataPointIndex];
   const pointValue = readPointValue(point);
   const label =
     typeof point === "object" && point !== null && "label" in point
       ? (point as { label?: string }).label
       : undefined;
   return {
-    dataPointIndex: opts.dataPointIndex,
+    dataPointIndex,
     seriesIndex: opts.seriesIndex,
     ...pointValue,
     seriesName: series?.name ?? "",
@@ -276,6 +294,7 @@ const apex = useApexChart(() => ({
   xAxis: props.xAxis,
   xAxisFormatter: props.xAxisFormatter,
   yAxisFormatter: yAxisFormatter.value,
+  locale: locale.value,
   onDataPointClick: emitDataClick,
 }));
 

package/frontend-vue/layers/dms-ui/app/components/chart/ChartCard.vue

@@ -12,6 +12,8 @@ import {
 } from "../../composables/chart/formatValue";
 import { resolveChartColor } from "../../composables/chart/useChartTheme";
 import { useThemeRevision } from "../../composables/chart/useThemeRevision";
+import { usePeriodComparisonDisplay } from "../../build/composables/period/periodComparison";
+import { localizeSeries } from "../../composables/chart/localizeSeries";
 import {
   NESTED_CHART_INJECT_KEY,
   type ChartCardResponse,
@@ -34,6 +36,8 @@ interface Props extends DefaultComponentProps {
   currencyCode?: string;
   valuePrecision?: ValuePrecision;
   showDelta?: boolean;
+  /** A rising value is the bad outcome: the delta's colours swap. */
+  invert?: boolean;
   showLegend?: boolean;
   /** The wrapped chart draws its own legend, naming each series. */
   showSeriesLegend?: boolean;
@@ -80,26 +84,35 @@ const { data, isLoading } = useChartFetch<ChartCardResponse>({
   watchSource: () => watchKey.value,
 });
 
+// With no comparison selected on the scope, whatever comparison the data
+// still carries is not drawn: no change, no "vs" figure, no second series.
+const comparison = usePeriodComparisonDisplay(props.periodScope);
 const value = computed(() => data.value?.value);
-const previousValue = computed(() => data.value?.previousValue);
-const delta = computed(() => data.value?.delta ?? null);
-
-// ApexCharts prints `name` verbatim in its legend and tooltip, so backend
-// series names carrying the `$` convention are resolved here, before the
-// array reaches the nested chart and the default slot.
-function withResolvedName(entry: ChartSeries): ChartSeries {
-  return { ...entry, name: processI18n(entry.name) };
+const previousValue = computed(() =>
+  comparison.isOff.value ? undefined : data.value?.previousValue,
+);
+const delta = computed(() =>
+  comparison.isOff.value ? null : (data.value?.delta ?? null),
+);
+
+// ApexCharts prints names, categories and slice labels verbatim, so a
+// route's `$` keys are resolved here, before the array reaches the nested
+// chart and the default slot.
+function localized(entry: ChartSeries): ChartSeries {
+  return localizeSeries(entry, processI18n);
 }
 
 const cardSeries = computed<ChartSeries[]>(() =>
-  (data.value?.series ?? []).map(withResolvedName),
+  (data.value?.series ?? []).map(localized),
 );
 
 const cardComparisonSeries = computed<ChartSeries[]>(() =>
-  (data.value?.comparisonSeries ?? []).map((entry) => ({
-    ...withResolvedName(entry),
-    color: entry.color ?? comparisonColor.value,
-  })),
+  comparison.isOff.value
+    ? []
+    : (data.value?.comparisonSeries ?? []).map((entry) => ({
+        ...localized(entry),
+        color: entry.color ?? comparisonColor.value,
+      })),
 );
 
 const formatted = computed(() =>
@@ -116,13 +129,15 @@ const formatted = computed(() =>
 
 const previousFormatted = computed(() =>
   previousValue.value !== undefined
-    ? formatValue(
-        previousValue.value,
-        props.valueFormat,
-        locale.value,
-        props.currencyCode,
-        props.valuePrecision,
-      )
+    ? t("dms.chart.versus_value", {
+        value: formatValue(
+          previousValue.value,
+          props.valueFormat,
+          locale.value,
+          props.currencyCode,
+          props.valuePrecision,
+        ),
+      })
     : null,
 );
 
@@ -155,10 +170,13 @@ const primaryLegendLabel = computed(() =>
     ? processI18n(props.primaryLabel)
     : t(DEFAULT_PRIMARY_LABEL_KEY, "Period"),
 );
+// The comparison the scope selects names its series ("Previous year"),
+// unless the card names it itself.
 const comparisonLegendLabel = computed(() =>
   props.comparisonLabel
     ? processI18n(props.comparisonLabel)
-    : t(DEFAULT_COMPARISON_LABEL_KEY, "Comparison"),
+    : (comparison.legendLabel.value ??
+      t(DEFAULT_COMPARISON_LABEL_KEY, "Comparison")),
 );
 
 const isFirstLoad = computed(() => isLoading.value && data.value === null);
@@ -215,9 +233,9 @@ const hasMeta = computed(
           class="mt-1.5 flex flex-wrap items-center gap-2 transition-opacity"
           :class="isRefreshing && 'opacity-55'"
         >
-          <DmsTrendBadge v-if="showTrend" :delta="delta" />
+          <DmsTrendBadge v-if="showTrend" :delta="delta" :invert="invert" />
           <span v-if="previousFormatted" class="text-dimmed text-xs">
-            vs {{ previousFormatted }}
+            {{ previousFormatted }}
           </span>
           <span v-else-if="description" class="text-dimmed text-xs">
             {{ processI18n(description) }}

package/frontend-vue/layers/dms-ui/app/components/code-snippet/CodeSnippet.vue

@@ -1,18 +1,21 @@
 <script setup lang="ts">
-import { computed, onMounted, shallowRef } from "vue";
+import { computed, onMounted, shallowRef, watch } from "vue";
 import DmsCopyButton from "../copy/CopyButton.vue";
 import {
   codeLanguageLabel,
   PLAIN_CODE_LANGUAGE,
   resolveCodeLanguage,
 } from "../../build/utils/codeLanguages";
-import type { CodeToken, highlightCode } from "../../build/utils/codeHighlight";
+import type {
+  CodeHighlighter,
+  CodeToken,
+} from "../../build/utils/codeHighlight";
 
 // Read-only code in the editor's look: a head with the title, the language
 // and a copy button, then the code highlighted by the editor's languages.
 // Without a title or a language there is no head: the copy button floats in
-// the code's corner. Until the highlighter loads (and on the server) the
-// code shows as is.
+// the code's corner. Until its language's grammar loads (and on the server)
+// the code shows as is.
 
 /**
  * How long lines break: `false` scrolls them sideways, `true` wraps them
@@ -63,7 +66,7 @@ const WRAP_CLASSES: Record<"false" | "true" | "anywhere", string> = {
   anywhere: "whitespace-pre-wrap [overflow-wrap:anywhere]",
 };
 
-const highlight = shallowRef<typeof highlightCode | null>(null);
+const highlight = shallowRef<CodeHighlighter | null>(null);
 
 const language = computed(() => resolveCodeLanguage(props.language));
 // A language given, even `text`, is named in a head; without a title either,
@@ -79,9 +82,7 @@ const wrapClass = computed(
   () => WRAP_CLASSES[String(props.wrap) as keyof typeof WRAP_CLASSES],
 );
 const tokens = computed<CodeToken[]>(() =>
-  highlight.value
-    ? highlight.value(props.code, language.value)
-    : [{ text: props.code }],
+  highlight.value ? highlight.value(props.code) : [{ text: props.code }],
 );
 const sizeStyle = computed(() => {
   if (props.maxLines)
@@ -91,10 +92,20 @@ const sizeStyle = computed(() => {
   return props.maxHeight ? { maxHeight: props.maxHeight } : undefined;
 });
 
-onMounted(async () => {
-  const module = await import("../../build/utils/codeHighlight");
-  highlight.value = module.highlightCode;
-});
+// Only the grammar of the language shown loads. A language changed while
+// one loads drops it: the code stays plain until its own grammar is in.
+async function loadHighlighter(): Promise<void> {
+  const requested = language.value;
+  highlight.value = null;
+  const { loadCodeHighlighter } = await import(
+    "../../build/utils/codeHighlight"
+  );
+  const highlighter = await loadCodeHighlighter(requested);
+  if (language.value === requested) highlight.value = highlighter;
+}
+
+onMounted(loadHighlighter);
+watch(language, loadHighlighter);
 </script>
 
 <template>

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

@@ -382,7 +382,7 @@ function handleCancel() {
         size="sm"
         square
         :disabled="isPending"
-        :aria-label="$t('dms.confirm.cancel')"
+        :aria-label="$t('dms.confirm.close')"
         @click="handleCancel"
       />
     </template>

package/frontend-vue/layers/dms-ui/app/components/container-footer/ContainerFooter.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+/**
+ * The footer band of a drawer's or a modal's body component: its buttons
+ * under a hairline, flush with the container's edges. It sticks to the
+ * bottom of the container while the content runs past it. In a drawer, whose
+ * body is a flex column, a body component whose root grows (`flex-1`, and
+ * `flex flex-col` to lay its own content out) keeps it at the bottom of the
+ * drawer while its content is short.
+ */
+interface ContainerFooterProps {
+  /** Where the buttons sit along the band; `end` by default. */
+  justify?: "start" | "end" | "between";
+}
+
+const props = withDefaults(defineProps<ContainerFooterProps>(), {
+  justify: "end",
+});
+
+// Same band as a form's footer in a container (FORM_SURFACE_CLASSES), but
+// pushed to the bottom (`mt-auto`) rather than set under the fields.
+const FOOTER_CLASS =
+  "border-default bg-default sticky bottom-[calc(var(--dms-form-foot-pb,0px)*-1)] z-10 mt-auto -mx-[var(--dms-form-foot-px,0px)] -mb-[var(--dms-form-foot-pb,0px)] flex flex-wrap items-center gap-2 border-t px-[var(--dms-form-foot-px,0px)] pt-3 pb-[var(--dms-form-foot-pb,12px)]";
+const JUSTIFY_CLASSES = {
+  start: "justify-start",
+  end: "justify-end",
+  between: "justify-between",
+} as const;
+</script>
+
+<template>
+  <footer :class="[FOOTER_CLASS, JUSTIFY_CLASSES[props.justify]]">
+    <slot />
+  </footer>
+</template>

package/frontend-vue/layers/dms-ui/app/components/field-row/FieldRow.vue

@@ -8,9 +8,10 @@ export type FieldRowLayout = "inline" | "form" | "stack";
 
 /**
  * `row`: the row pads itself and draws a hairline above the next one (rows
- * of a card). `list`: the list around it spaces the rows (a stacked form).
+ * of a card). `dense`: the same, tighter, for a form in a drawer or a modal.
+ * `list`: the list around it spaces the rows (a stacked form).
  */
-export type FieldRowSpacing = "row" | "list";
+export type FieldRowSpacing = "row" | "dense" | "list";
 
 // The renderer's props are optional: DmsFieldRow is both the backend
 // `FieldRow` block (`dms-field-row-block`) and a template component.
@@ -34,6 +35,12 @@ interface FieldRowProps extends Partial<DefaultComponentProps> {
   required?: boolean;
   /** Dims the whole row. */
   disabled?: boolean;
+  /**
+   * `stack` only: the row and its control fill the height their flex parent
+   * leaves them (a drawer's body), handing it to a control that fills it
+   * (`DmsInputCode fill`).
+   */
+  fill?: boolean;
 }
 
 interface FieldRowSlots {
@@ -56,6 +63,7 @@ const props = withDefaults(defineProps<FieldRowProps>(), {
   spacing: "row",
   required: false,
   disabled: false,
+  fill: false,
 });
 const slots = defineSlots<FieldRowSlots>();
 
@@ -102,11 +110,25 @@ const theme = tv({
     },
     spacing: {
       row: { root: "border-t border-muted first:border-t-0", body: "py-4" },
+      // 12px above and below a 32px control, 6px from a label set above it.
+      dense: {
+        root: "border-t border-muted first:border-t-0",
+        body: "py-3 gap-y-1.5",
+      },
       list: { body: "gap-y-1.5" },
     },
     disabled: {
       true: { root: "opacity-55" },
     },
+    // Flex columns down to the control, which grows: their minimum stays
+    // their content's (the control's floor), the parent scrolling below it.
+    fill: {
+      true: {
+        root: "flex flex-1 flex-col",
+        body: "flex flex-1 flex-col",
+        control: "flex flex-1 flex-col",
+      },
+    },
     // Without a label cell, the control is the grid's only child: it spans
     // both columns instead of falling into the form's 240px label column.
     labeled: {
@@ -124,6 +146,7 @@ const ui = computed(() =>
     inset: props.inset,
     spacing: props.spacing,
     disabled: props.disabled,
+    fill: props.fill && props.layout === "stack",
     labeled: hasText.value,
   }),
 );

package/frontend-vue/layers/dms-ui/app/components/flow-canvas/FlowCanvas.vue

@@ -313,8 +313,8 @@ defineExpose(flow);
         type="button"
         class="dms-flow-canvas__delete-button"
         :style="{ left: `${affordance.x}px`, top: `${affordance.y}px` }"
-        title="Delete node"
-        aria-label="Delete node"
+        :title="$t('dms.flow_canvas.delete_node')"
+        :aria-label="$t('dms.flow_canvas.delete_node')"
         @click.stop="emitDelete([affordance.id])"
       >
         <svg