@antelopejs/dms 0.6.1 → 0.7.0

package/frontend-vue/layers/dms-ui/app/build/composables/data-types/twoLineCell.ts

@@ -0,0 +1,118 @@
+import { h, type VNodeChild } from "vue";
+import type { DataType } from "#dms-core/app/composables/data-types/useDataType";
+import { useComposedText } from "../../../../../dms-core/app/composables/translation/useComposedText";
+import {
+  type ComposableText,
+  isComposedText,
+} from "../../../../../dms-core/app/utils/composedText";
+import { readRowField, readSubline, toneClass, type Row } from "./cellHelpers";
+
+const EMPTY = "—";
+const PRIMARY_CLASS = "text-highlighted truncate text-[13px] font-medium";
+const EMPTY_PRIMARY_CLASS = "text-dimmed truncate text-[13px]";
+const SUB_CLASS = "truncate text-xs";
+
+interface TwoLineOptions {
+  /** Row field holding the primary line, in place of the column's value. */
+  primaryField?: string;
+  /** Row field holding the secondary line. */
+  subField?: string;
+  /** Tone of the secondary line when the row gives none. */
+  subTone?: string;
+  /** Text of an empty primary line. */
+  emptyLabel?: string;
+  /** The column's own data type, which writes its value. */
+  columnType?: string;
+  /** The column's own type options (a select's items). */
+  typeOptions?: unknown;
+}
+
+const isBlank = (value: unknown): boolean =>
+  value === null || value === undefined || value === "";
+
+/** The column's value written by the column's own data type. */
+function formatColumnValue(
+  value: unknown,
+  locale: string,
+  opts: TwoLineOptions,
+  row: Row,
+): VNodeChild {
+  const { getDataType } = useDataTypes();
+  const formatter = opts.columnType
+    ? getDataType(opts.columnType)?.formatter
+    : undefined;
+  const format = formatter?.cell ?? formatter?.default;
+  if (!format) return String(value);
+  return format(value, locale, opts.typeOptions, row) as VNodeChild;
+}
+
+/** The primary line, or nothing when the row has none to show. */
+function readPrimary(
+  value: unknown,
+  locale: string,
+  opts: TwoLineOptions,
+  row: Row,
+): VNodeChild | undefined {
+  const { processText } = useComposedText();
+  if (opts.primaryField) {
+    const text = processText(
+      readRowField(row, opts.primaryField) as ComposableText,
+    );
+    return text || undefined;
+  }
+  if (isBlank(value)) return undefined;
+  if (isComposedText(value)) return processText(value);
+  return formatColumnValue(value, locale, opts, row);
+}
+
+/**
+ * `two_line`: a primary line — the column's value in its own format, or a row
+ * field's text — over a secondary line read off the row, in the row's tone,
+ * else `subTone`, else muted. No avatar.
+ */
+function renderTwoLine(
+  value: unknown,
+  locale: string,
+  options: unknown,
+  row: Row,
+) {
+  const { processText } = useComposedText();
+  const opts = (options ?? {}) as TwoLineOptions;
+  const primary = readPrimary(value, locale, opts, row);
+  const sub = readSubline(readRowField(row, opts.subField), {
+    processText,
+    isStringTranslated: true,
+  });
+  return h("span", { class: "flex min-w-0 flex-col leading-tight" }, [
+    primary === undefined
+      ? h(
+          "span",
+          { class: EMPTY_PRIMARY_CLASS },
+          opts.emptyLabel ? processText(opts.emptyLabel) : EMPTY,
+        )
+      : h("span", { class: PRIMARY_CLASS }, [primary]),
+    sub
+      ? h(
+          "span",
+          {
+            class: [SUB_CLASS, toneClass(sub.tone ?? opts.subTone, "muted")],
+            title: sub.text,
+          },
+          sub.text,
+        )
+      : null,
+  ]);
+}
+
+/**
+ * The `two_line` cell data type. It draws an empty value too: its primary
+ * line may come from another field, and its secondary line always does.
+ */
+export const registerTwoLineCellType = (
+  registerDataType: (dataType: DataType) => void,
+) => {
+  registerDataType({
+    id: "two_line",
+    formatter: { default: renderTwoLine, empty: renderTwoLine },
+  });
+};

package/frontend-vue/layers/dms-ui/app/build/composables/data-types/useColumnValueRenderer.ts

@@ -45,8 +45,10 @@ export function useColumnValueRenderer() {
   const { locale } = useI18n();
 
   // A display also reads the column's own type options (`typeOptions`): a
-  // select's items name the values it draws. A display declared without
-  // options reads them at the top level, as it always did.
+  // select's items name the values it draws; and the column's own type id
+  // (`columnType`), so it can write the value as the column would (an amount
+  // under `two_line`). A display declared without options reads the type
+  // options at the top level, as it always did.
   const resolveRenderer = (column: RenderableColumn) => {
     const typeOptions = column.type?.inputComponent?.options as
       | Record<string, unknown>
@@ -56,7 +58,7 @@ export function useColumnValueRenderer() {
     const displayOptions = column.display.options ?? typeOptions;
     return {
       typeId: column.display.type,
-      options: { ...displayOptions, typeOptions },
+      options: { ...displayOptions, typeOptions, columnType: column.type?.id },
     };
   };
 

package/frontend-vue/layers/dms-ui/app/build/composables/form/floatingSaveBars.ts

@@ -0,0 +1,38 @@
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowReactive,
+  watch,
+} from "vue";
+
+// Only mounted bars count, so a server render never adds to it.
+const shownBars = shallowReactive(new Set<symbol>());
+
+/**
+ * Whether a floating save bar (the one sticking to the bottom of the panel)
+ * is on screen: what else sits in that corner steps aside for it.
+ */
+export const isFloatingSaveBarShown = computed(() => shownBars.size > 0);
+
+/** Counts the calling floating save bar while `isShown` holds. */
+export function trackFloatingSaveBar(isShown: () => boolean): void {
+  const id = Symbol("floating-save-bar");
+  const isMounted = ref(false);
+  watch(
+    () => isMounted.value && isShown(),
+    (shown) => {
+      if (shown) shownBars.add(id);
+      else shownBars.delete(id);
+    },
+    { immediate: true },
+  );
+  onMounted(() => {
+    isMounted.value = true;
+  });
+  onBeforeUnmount(() => {
+    isMounted.value = false;
+    shownBars.delete(id);
+  });
+}

package/frontend-vue/layers/dms-ui/app/build/composables/form/formRecordLoad.ts

@@ -0,0 +1,66 @@
+import { type Ref, ref } from "vue";
+import { apiErrorStatus } from "#dms-core/app/composables/useFieldErrors";
+import { HTTP_FORBIDDEN } from "#dms-core/app/utils/http-status";
+
+/**
+ * Why a form could not load the record it edits: `forbidden` when the server
+ * refused the caller the read (a role that may edit rows but not view them),
+ * `error` for anything else (a network failure, a server error, a row gone).
+ */
+export type FormLoadFailure = "forbidden" | "error";
+
+/** The cached load of a form's record (`useDmsAsyncData`), as far as it is read. */
+export interface FormLoadSource<T> {
+  data: Ref<T | null>;
+  error: Ref<unknown>;
+  refresh(): Promise<void>;
+}
+
+/** Where a form stands with the record it loads, and how to try again. */
+export interface FormRecordLoad {
+  /** Set while the last load failed: the form shows it instead of its fields. */
+  failure: Ref<FormLoadFailure | null>;
+  /** Set while `retry` loads the record again. */
+  retrying: Ref<boolean>;
+  /** Load the record again; the form opens on it once it arrives. */
+  retry(): Promise<void>;
+}
+
+/** The failure a load error stands for; `null` when there is none. */
+export function formLoadFailure(error: unknown): FormLoadFailure | null {
+  if (!error) return null;
+  return apiErrorStatus(error) === HTTP_FORBIDDEN ? "forbidden" : "error";
+}
+
+/**
+ * Follow a form's record load: `apply` receives the record once it loaded,
+ * and only then. A failed load is never applied, not even the values a
+ * previous opening left in the cache: a form showing them, or its defaults,
+ * would read as the record and save over it.
+ */
+export function trackFormRecordLoad<T>(
+  load: FormLoadSource<T>,
+  apply: (payload: T) => void,
+): FormRecordLoad {
+  const failure = ref<FormLoadFailure | null>(null);
+  const retrying = ref(false);
+  const settle = (): void => {
+    failure.value = formLoadFailure(load.error.value);
+    const payload = load.data.value;
+    if (!failure.value && payload) apply(payload);
+  };
+  settle();
+  return {
+    failure,
+    retrying,
+    async retry() {
+      retrying.value = true;
+      try {
+        await load.refresh();
+      } finally {
+        retrying.value = false;
+      }
+      settle();
+    },
+  };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/navigation/useNavBadges.ts

@@ -1,24 +1,65 @@
+import type { Tone } from "../../../types/tone";
+
+/** A page's navigation badge: its label (`""` for none) and its tone. */
+export interface NavBadge {
+  label: string;
+  /** Neutral (grey) when absent. */
+  tone?: Tone;
+}
+
+/** A menu entry as the server serves it, as far as its badge goes. */
+export interface ServedNavBadge {
+  fullId?: string;
+  badge?: string;
+  /** The tone of a counted badge; neutral when absent. */
+  badgeTone?: Tone;
+}
+
 /**
  * Fresh counts a page publishes for its navigation entry, by page full id
- * (`settings.workspace.members` → `"7"`, `""` for none). The server counts a table
- * view tab declared with `navBadge: true` when the menu loads; the table
- * publishes its own counter here once shown, which navigation surfaces draw
- * over the server's badge.
+ * (`settings.workspace.members` → `{ label: "7" }`, `""` for none), with
+ * their tone. The server counts a table view tab declared with `navBadge`
+ * when the menu loads; the table publishes its own counter here once shown,
+ * which navigation surfaces draw over the server's badge.
  *
  * Shared state, so a count published on one page stays shown on the others.
  */
 export const useNavBadges = () => {
-  const badges = useDmsState<Record<string, string>>(
+  const badges = useDmsState<Record<string, NavBadge>>(
     "dms-nav-badges",
     () => ({}),
   );
 
   /** Sets, or with `undefined` clears, the badge of a page. */
-  function setNavBadge(fullId: string, badge: string | undefined): void {
-    if (badges.value[fullId] === badge) return;
+  function setNavBadge(
+    fullId: string,
+    label: string | undefined,
+    tone?: Tone,
+  ): void {
+    const current = badges.value[fullId];
+    if (current?.label === label && current?.tone === tone) return;
     const { [fullId]: _previous, ...rest } = badges.value;
-    badges.value = badge === undefined ? rest : { ...rest, [fullId]: badge };
+    if (label === undefined) {
+      if (current !== undefined) badges.value = rest;
+      return;
+    }
+    badges.value = { ...rest, [fullId]: tone ? { label, tone } : { label } };
+  }
+
+  /**
+   * The badge `entry` shows: the one its page published, fresher, or the
+   * one the server served; undefined when it has none.
+   */
+  function navBadgeOf(entry: ServedNavBadge): NavBadge | undefined {
+    const live =
+      entry.fullId === undefined ? undefined : badges.value[entry.fullId];
+    const served: NavBadge | undefined =
+      entry.badge === undefined
+        ? undefined
+        : { label: entry.badge, tone: entry.badgeTone };
+    const badge = live ?? served;
+    return badge?.label ? badge : undefined;
   }
 
-  return { badges, setNavBadge };
+  return { badges, setNavBadge, navBadgeOf };
 };

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

@@ -134,7 +134,13 @@ export const useTable = <T extends Data>(props: UseTableProps<T>) => {
 
   const tableConfig = shallowRef({
     data: tableData,
-    columns: columns.value,
+    // Read on each update rather than once: labelled row actions are sized on
+    // the rows listed, which a table opened by client-side navigation only
+    // receives after it is set up. A copy taken then keeps the width of an
+    // empty list, and the rows' buttons are cut.
+    get columns() {
+      return columns.value;
+    },
 
     ...stateHandlers,
 

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/utils/chrome.ts

@@ -35,7 +35,7 @@ const LAYOUT_CHROME: Record<TableViewLayout, ResolvedTableChrome> = {
     pageSize: true,
   },
   // The list of a settings page: tabs, an open search field, quick filters,
-  // sortable headers, the row menu and a short footer.
+  // sortable headers, the row menu and a footer with the page size picker.
   compact: {
     caption: false,
     search: "field",
@@ -44,7 +44,7 @@ const LAYOUT_CHROME: Record<TableViewLayout, ResolvedTableChrome> = {
     refresh: false,
     menu: false,
     columnMenus: false,
-    pageSize: false,
+    pageSize: true,
   },
 };
 

package/frontend-vue/layers/dms-ui/app/build/types/tree.ts

@@ -53,6 +53,7 @@ function buildNavigationItem(
     variant: item.variant,
     status: item.status,
     badge: item.badge,
+    badgeTone: item.badgeTone,
     children: children.length > 0 ? children : undefined,
   };
 }
@@ -98,19 +99,22 @@ function convertToTreeItems(node: SiteLayoutTree): NavigationMenuItem[][] {
 }
 
 // Module roots are only ever direct children of the `modules` category, so the
-// same walk serves the root menu and a module's own menu.
+// same walk serves the root menu and a module's own menu. A page left out of
+// the menu (refused, or showing the viewer none of its blocks) hands its
+// place to the pages nested under it that the viewer can open.
 function convertChildrenToItems(node: SiteLayoutTree): NavigationMenuItem[] {
-  return node.childrenOrders
-    .map((nodeId) => {
-      const item = node.children[nodeId]!;
+  return node.childrenOrders.flatMap((nodeId): NavigationMenuItem[] => {
+    const item = node.children[nodeId]!;
 
-      if (item.isModuleRoot || item.hasAccess === false) {
-        return null;
-      }
+    if (item.isModuleRoot) {
+      return [];
+    }
+    if (item.hasAccess === false) {
+      return item.layoutUrl ? convertChildrenToItems(item) : [];
+    }
 
-      return buildNavigationItem(item, convertChildrenToItems(item));
-    })
-    .filter((item) => item !== null) as NavigationMenuItem[];
+    return [buildNavigationItem(item, convertChildrenToItems(item))];
+  });
 }
 
 const MODULE_PAGES_GROUP_ID = "module-pages";

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

@@ -0,0 +1,12 @@
+import type { Tone } from "../../types/tone";
+import { DMS_TONE_SOFT } from "./tone";
+
+/**
+ * A page's navigation badge (v2 nav trail count): a small mono pill in the
+ * soft tint of the tone its count carries, neutral grey without one. The
+ * settings nav draws it after an entry, a nav card in its top corner; where
+ * it sits is the caller's.
+ */
+export function navBadgeClass(tone: Tone | undefined): string {
+  return `rounded-full px-1.5 font-mono text-[10.5px] font-semibold tabular-nums ${DMS_TONE_SOFT[tone ?? "neutral"]}`;
+}

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

@@ -1,29 +1,6 @@
+import { formatRelativeDistance } from "#dms-core/app/utils/formatter";
 import { regionalDateTimeFormat } from "#dms-core/app/utils/regional";
 
-const SECOND_MS = 1000;
-const MINUTE_MS = 60 * SECOND_MS;
-const HOUR_MS = 60 * MINUTE_MS;
-const DAY_MS = 24 * HOUR_MS;
-const WEEK_MS = 7 * DAY_MS;
-const MONTH_MS = 30 * DAY_MS;
-const YEAR_MS = 365 * DAY_MS;
-
-interface RelativeUnit {
-  unit: Intl.RelativeTimeFormatUnit;
-  ms: number;
-  /** The unit applies below this elapsed time. */
-  below: number;
-}
-
-const RELATIVE_UNITS: RelativeUnit[] = [
-  { unit: "minute", ms: MINUTE_MS, below: HOUR_MS },
-  { unit: "hour", ms: HOUR_MS, below: DAY_MS },
-  { unit: "day", ms: DAY_MS, below: WEEK_MS },
-  { unit: "week", ms: WEEK_MS, below: MONTH_MS },
-  { unit: "month", ms: MONTH_MS, below: YEAR_MS },
-  { unit: "year", ms: YEAR_MS, below: Number.POSITIVE_INFINITY },
-];
-
 function capitalize(text: string): string {
   return text ? `${text[0]!.toLocaleUpperCase()}${text.slice(1)}` : text;
 }
@@ -37,17 +14,9 @@ export function formatRelativeDate(
   locale: string,
   now: number = Date.now(),
 ): string {
-  const deltaMs = new Date(date).getTime() - now;
-  const distance = Math.abs(deltaMs);
-  const unit =
-    RELATIVE_UNITS.find((candidate) => distance < candidate.below) ??
-    RELATIVE_UNITS[RELATIVE_UNITS.length - 1]!;
-  const value = Math.round(deltaMs / unit.ms);
-  const format = new Intl.RelativeTimeFormat(locale, {
-    numeric: "auto",
-    style: "short",
-  });
-  return capitalize(format.format(value, unit.unit));
+  return capitalize(
+    formatRelativeDistance(date, locale, { style: "short", now }),
+  );
 }
 
 /** "Sep 27": day and short month. */

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;
+}