@antelopejs/dms 0.5.6 → 0.6.1

package/frontend-vue/layers/dms-ui/app/build/composables/period/periodDisplay.ts

@@ -0,0 +1,154 @@
+import {
+  type CalendarDate,
+  fromDate,
+  getLocalTimeZone,
+  toCalendarDate,
+} from "@internationalized/date";
+import {
+  END_OF_DAY_HOURS,
+  END_OF_DAY_MINUTES,
+  END_OF_DAY_MS,
+  END_OF_DAY_SECONDS,
+  MS_PER_DAY,
+  MS_PER_HOUR,
+  type PeriodRange,
+} from "#dms-core/app/composables/period/types";
+import { regionalDateTimeFormat } from "#dms-core/app/utils/regional";
+
+/** A day range as the range calendar reads and writes it. */
+export interface CalendarRange {
+  start: CalendarDate;
+  end: CalendarDate;
+}
+
+export function dateToCalendar(date: Date): CalendarDate {
+  return toCalendarDate(fromDate(date, getLocalTimeZone()));
+}
+
+export function calendarToDate(
+  calendar: CalendarDate,
+  asEndOfDay: boolean,
+): Date {
+  const native = new Date(calendar.year, calendar.month - 1, calendar.day);
+  if (asEndOfDay) {
+    native.setHours(
+      END_OF_DAY_HOURS,
+      END_OF_DAY_MINUTES,
+      END_OF_DAY_SECONDS,
+      END_OF_DAY_MS,
+    );
+  }
+  return native;
+}
+
+export function rangeToCalendar(range: PeriodRange): CalendarRange {
+  return { start: dateToCalendar(range.from), end: dateToCalendar(range.to) };
+}
+
+/** Whole days, start of the first to end of the last. */
+export function calendarToRange(range: CalendarRange): PeriodRange {
+  return {
+    from: calendarToDate(range.start, false),
+    to: calendarToDate(range.end, true),
+  };
+}
+
+function isStartOfDay(date: Date): boolean {
+  return (
+    date.getHours() === 0 &&
+    date.getMinutes() === 0 &&
+    date.getSeconds() === 0 &&
+    date.getMilliseconds() === 0
+  );
+}
+
+function isEndOfDay(date: Date): boolean {
+  return (
+    date.getHours() === END_OF_DAY_HOURS &&
+    date.getMinutes() === END_OF_DAY_MINUTES
+  );
+}
+
+// Up to a day and an hour: `last-24h` plus slack for a DST shift.
+const TIMED_RANGE_MAX_MS = MS_PER_DAY + MS_PER_HOUR;
+
+/**
+ * Relative presets (`last-hour`, `last-24h`) keep instant bounds: their
+ * label carries the time, where a whole-day range only needs dates. Long
+ * ranges stay on dates even off day bounds (a DST shift moves them by an
+ * hour).
+ */
+function hasTimeBounds(range: PeriodRange): boolean {
+  const span = range.to.getTime() - range.from.getTime();
+  if (span > TIMED_RANGE_MAX_MS) return false;
+  return !isStartOfDay(range.from) || !isEndOfDay(range.to);
+}
+
+type FormatOptions = Intl.DateTimeFormatOptions;
+
+// Node's ICU and Chrome's disagree on the spaces of a range: Node joins with
+// thin spaces (U+2009 around the dash, U+202F before AM/PM) where Chrome
+// prints plain ones. One spelling on both sides keeps the server-rendered
+// label from mismatching at hydration.
+const ICU_SPACES = /[\u2009\u202f]/g;
+const PLAIN_SPACE = " ";
+
+function normalizeSpaces(text: string): string {
+  return text.replace(ICU_SPACES, PLAIN_SPACE);
+}
+
+const DAY_FORMAT: FormatOptions = { month: "short", day: "numeric" };
+const TIME_FORMAT: FormatOptions = { hour: "2-digit", minute: "2-digit" };
+
+function formatRangeWith(
+  range: PeriodRange,
+  locale: string,
+  options: FormatOptions,
+): string {
+  // A period's bounds are computed in the browser's zone: only the clock
+  // follows the user's preference.
+  const formatter = regionalDateTimeFormat(locale, options, {
+    keepLocalZone: true,
+  });
+  if (range.to.getTime() < range.from.getTime()) {
+    return normalizeSpaces(formatter.format(range.from));
+  }
+  return normalizeSpaces(formatter.formatRange(range.from, range.to));
+}
+
+/**
+ * Compact range label (design .ps__range): "31 Aug – 29 Sep 2026" in the
+ * reader's locale. `withYear: false` drops the year, for a comparison range
+ * that falls in the same year as the main one.
+ */
+export function formatPeriodRange(
+  range: PeriodRange,
+  locale: string,
+  withYear = true,
+): string {
+  // A timed range reads "30 Sep, 04:46 – 1 Oct, 04:46": the year is noise.
+  if (hasTimeBounds(range)) {
+    return formatRangeWith(range, locale, { ...DAY_FORMAT, ...TIME_FORMAT });
+  }
+  const options: FormatOptions = withYear
+    ? { ...DAY_FORMAT, year: "numeric" }
+    : DAY_FORMAT;
+  return formatRangeWith(range, locale, options);
+}
+
+export interface PeriodDuration {
+  unit: "days" | "hours";
+  count: number;
+}
+
+/** Length of a range in whole days, or in hours below a day. */
+export function periodDuration(range: PeriodRange): PeriodDuration {
+  const span = Math.max(range.to.getTime() - range.from.getTime(), 0);
+  if (span < MS_PER_DAY - MS_PER_HOUR) {
+    return {
+      unit: "hours",
+      count: Math.max(Math.round(span / MS_PER_HOUR), 1),
+    };
+  }
+  return { unit: "days", count: Math.max(Math.round(span / MS_PER_DAY), 1) };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/period/usePeriodDraft.ts

@@ -0,0 +1,127 @@
+import { computed, ref, type ComputedRef, type Ref } from "vue";
+import type { UsePeriodReturn } from "#dms-core/app/composables/period/usePeriod";
+import { resolvePresetRange } from "#dms-core/app/composables/period/presetResolvers";
+import { resolveComparisonRange } from "#dms-core/app/composables/period/compareResolvers";
+import type {
+  PeriodComparison,
+  PeriodPreset,
+  PeriodRange,
+} from "#dms-core/app/composables/period/types";
+import { calendarToRange, rangeToCalendar } from "./periodDisplay";
+
+const CUSTOM_PRESET: PeriodPreset = "custom";
+
+export interface UsePeriodDraftReturn {
+  preset: Ref<PeriodPreset>;
+  comparison: Ref<PeriodComparison>;
+  customRange: Ref<PeriodRange | null>;
+  /** The range the staged preset (or custom range) resolves to. */
+  range: ComputedRef<PeriodRange>;
+  compareRange: ComputedRef<PeriodRange | null>;
+  isDirty: ComputedRef<boolean>;
+  /** Start over from the committed period (on open, on cancel). */
+  reset: () => void;
+  selectPreset: (preset: PeriodPreset) => void;
+  selectRange: (range: PeriodRange) => void;
+  selectComparison: (comparison: PeriodComparison) => void;
+  /** Commit the staged selection to the period, in one state change. */
+  apply: () => void;
+}
+
+function sameInstant(a: Date | undefined, b: Date | undefined): boolean {
+  return a?.getTime() === b?.getTime();
+}
+
+function sameRange(a: PeriodRange | null, b: PeriodRange | null): boolean {
+  if (!a || !b) return a === b;
+  return sameInstant(a.from, b.from) && sameInstant(a.to, b.to);
+}
+
+/**
+ * Staged copy of a period for the selector popover: presets, dates and the
+ * comparison change here, and the period (with every chart bound to its
+ * scope) only moves on `apply`.
+ */
+export function usePeriodDraft(period: UsePeriodReturn): UsePeriodDraftReturn {
+  const preset = ref<PeriodPreset>(period.preset.value);
+  const comparison = ref<PeriodComparison>(period.comparison.value);
+  const customRange = ref<PeriodRange | null>(null);
+
+  function committedCustomRange(): PeriodRange | null {
+    return period.preset.value === CUSTOM_PRESET
+      ? period.state.value.range
+      : null;
+  }
+
+  function reset(): void {
+    preset.value = period.preset.value;
+    comparison.value = period.comparison.value;
+    customRange.value = committedCustomRange();
+  }
+
+  const range = computed<PeriodRange>(() =>
+    resolvePresetRange(
+      preset.value,
+      new Date(),
+      customRange.value ?? period.state.value.range,
+    ),
+  );
+
+  const compareRange = computed<PeriodRange | null>(() =>
+    resolveComparisonRange(
+      comparison.value,
+      range.value,
+      period.customCompareRange.value,
+    ),
+  );
+
+  const isDirty = computed(
+    () =>
+      preset.value !== period.preset.value ||
+      comparison.value !== period.comparison.value ||
+      (preset.value === CUSTOM_PRESET &&
+        !sameRange(customRange.value, committedCustomRange())),
+  );
+
+  function selectPreset(next: PeriodPreset): void {
+    if (next === CUSTOM_PRESET && !customRange.value) {
+      // Custom starts from the days on screen, ready to be adjusted.
+      customRange.value = calendarToRange(rangeToCalendar(range.value));
+    }
+    preset.value = next;
+  }
+
+  function selectRange(next: PeriodRange): void {
+    customRange.value = next;
+    preset.value = CUSTOM_PRESET;
+  }
+
+  function selectComparison(next: PeriodComparison): void {
+    comparison.value = next;
+  }
+
+  function apply(): void {
+    if (preset.value === CUSTOM_PRESET && customRange.value) {
+      period.setCustomRange(customRange.value);
+    } else {
+      period.setPreset(preset.value);
+    }
+    period.setComparison(comparison.value);
+  }
+
+  reset();
+
+  return {
+    preset,
+    comparison,
+    customRange,
+    range,
+    compareRange,
+    isDirty,
+    reset,
+    selectPreset,
+    selectRange,
+    selectComparison,
+    apply,
+  };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/shortcuts/useShortcutRegistry.ts

@@ -1,6 +1,13 @@
 const shortcutsMap = new Map<string, ComponentShortcuts>();
 const registry = ref<ComponentShortcuts[]>([]);
 
+const shortcutSignature = (metadata: ShortcutMetadata): string =>
+  JSON.stringify([
+    metadata.key,
+    metadata.descriptionKey,
+    metadata.condition?.descriptionKey,
+  ]);
+
 export function useShortcutRegistry() {
   function registerShortcut(component: string, metadata: ShortcutMetadata) {
     const componentKey = component.startsWith("$")
@@ -14,7 +21,18 @@ export function useShortcutRegistry() {
       });
     }
 
+    // The registry is module state: the plugin registering every shortcut
+    // runs again for each server render, so a shortcut already listed stays
+    // listed once.
     const componentShortcuts = shortcutsMap.get(componentKey)!;
+    const signature = shortcutSignature(metadata);
+    if (
+      componentShortcuts.shortcuts.some(
+        (entry) => shortcutSignature(entry) === signature,
+      )
+    ) {
+      return;
+    }
     componentShortcuts.shortcuts.push(metadata);
 
     registry.value = Array.from(shortcutsMap.values());

package/frontend-vue/layers/dms-ui/app/build/composables/table/constants.ts

@@ -5,6 +5,12 @@ export const DEFAULT_PAGE_INDEX = 0;
 
 export const SELECT_COLUMN_ID = "select";
 export const ACTIONS_COLUMN_ID = "actions";
+export const EXPAND_COLUMN_ID = "expand";
 
-export const ALWAYS_PINNED_LEFT_COLUMN_IDS: string[] = [SELECT_COLUMN_ID];
+// The caret stays next to the checkbox when a data column is pinned: pinned
+// columns move to the left edge, and the caret must never land after them.
+export const ALWAYS_PINNED_LEFT_COLUMN_IDS: string[] = [
+  SELECT_COLUMN_ID,
+  EXPAND_COLUMN_ID,
+];
 export const ALWAYS_PINNED_RIGHT_COLUMN_IDS: string[] = [ACTIONS_COLUMN_ID];

package/frontend-vue/layers/dms-ui/app/build/composables/table/useTable.ts

@@ -1,4 +1,5 @@
-import type { ModelRef } from "vue";
+import { mergeColumnOrder } from "./utils/columnOrder";
+import type { ModelRef, Ref } from "vue";
 import type {
   Data,
   TableEmits,
@@ -73,6 +74,14 @@ interface UseTableProps<T> {
     paginationState: ModelRef<PaginationState>;
   };
   ui: ComputedRef<TableStyleSlots>;
+  /** Adds the expander column (the table renders an `expanded` slot). */
+  expandable?: boolean;
+  /** DOM id of a row's detail band, for the caret's aria-controls. */
+  expandedRowDomId?: (rowId: string) => string;
+  /** True while the table lists archived rows (archive mode toggle on). */
+  showArchived?: Ref<boolean>;
+  /** Column header menus and resizing. Defaults to true. */
+  columnMenus?: boolean;
 }
 
 export const useTable = <T extends Data>(props: UseTableProps<T>) => {
@@ -95,23 +104,29 @@ export const useTable = <T extends Data>(props: UseTableProps<T>) => {
     formPages: props.tableProps.formPages,
     routeParams: props.tableProps.routeParams,
     onCustomRowAction: props.tableProps.onCustomRowAction,
+    expandable: props.expandable,
+    expandedRowDomId: props.expandedRowDomId,
+    showArchived: props.showArchived,
+    columnMenus: props.columnMenus,
+    defaultSort: props.tableProps.defaultSort,
   });
 
-  states.columnOrderState.value = columns.value
+  // A saved order (the user's, a view's) is kept, completed with the
+  // columns it leaves out.
+  const declaredColumnOrder = columns.value
     .map((x) => x.id ?? "")
     .filter(Boolean);
+  states.columnOrderState.value = mergeColumnOrder(
+    states.columnOrderState.value,
+    declaredColumnOrder,
+  );
 
   watchEffect(() =>
     applyAlwaysPinned(states.columnPinningState, columns.value),
   );
 
-  const {
-    deleteFilter,
-    resetFilters,
-    deleteSorting,
-    stateHandlers,
-    stateGetters,
-  } = useTableStates(states);
+  const { deleteFilter, deleteSorting, stateHandlers, stateGetters } =
+    useTableStates(states);
 
   const isManualFiltering =
     props.tableProps.columnFiltersOptions?.manualFiltering;
@@ -140,6 +155,8 @@ export const useTable = <T extends Data>(props: UseTableProps<T>) => {
     getPaginationRowModel: getPaginationRowModel(),
 
     columnResizeMode: "onChange" as const,
+    // A reduced chrome keeps its columns as laid out.
+    enableColumnResizing: props.columnMenus !== false,
     ...(props.tableProps.sizingOptions || {}),
 
     state: stateGetters,
@@ -175,9 +192,9 @@ export const useTable = <T extends Data>(props: UseTableProps<T>) => {
     table,
     data: tableData,
     columns,
+    declaredColumnOrder,
     labeledColumns,
     deleteFilter,
-    resetFilters,
     deleteSorting,
   };
 };