@antelopejs/dms 0.5.6 → 0.6.0

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

@@ -1,3 +1,4 @@
+import { registerFieldTypes } from "./registerFieldTypes";
 import { defineAsyncComponent, type VNode } from "vue";
 import type { DataType } from "#dms-core/app/composables/data-types/useDataType";
 import UAvatar from "@nuxt/ui/components/Avatar.vue";
@@ -5,6 +6,22 @@ import UBadge from "@nuxt/ui/components/Badge.vue";
 import UIcon from "@nuxt/ui/runtime/vue/components/Icon.vue";
 import ULink from "@nuxt/ui/components/Link.vue";
 import { buildRelationBadges } from "./relationBadges";
+import { mapRelationBeforeState, sameRelationValue } from "./relationValue";
+import {
+  isSet,
+  readRowField,
+  type Row,
+  stringOf,
+  toneClass,
+} from "./cellHelpers";
+import { registerMetricCellTypes } from "./metricCells";
+import StatusPill from "../../../components/status-pill/StatusPill.vue";
+import IdentityCell from "../../components/table-view/IdentityCell.vue";
+import {
+  firstNameOf,
+  formatDayMonth,
+  formatRelativeDate,
+} from "../../utils/relativeDate";
 
 const FilePreview = defineAsyncComponent(
   () => import("../../../components/table-view/FilePreview.vue"),
@@ -35,14 +52,12 @@ const DisplayColor = defineAsyncComponent(
 );
 
 const LINK_CLASS =
-  "flex items-center gap-1 truncate text-[15px] font-medium text-primary hover:text-primary/80";
+  "flex items-center gap-1 truncate text-[13px] font-medium text-primary hover:text-primary/80";
 const LINK_ICON_CLASS = "size-3 text-primary/70 flex-shrink-0";
 const LINK_ICON_NAME = "i-ph-arrow-up-right-light";
-const DEFAULT_RELATION_VALUE_KEY = "_id";
 const DEFAULT_RELATION_LABEL_KEY = "name";
 const RELATION_BADGES_CLASS = "inline-flex flex-wrap items-center gap-1";
 const RELATION_BADGE_CLASS = "max-w-40";
-const PERMISSION_SEPARATOR = ".";
 
 interface LinkRendererOptions {
   hrefPrefix?: string;
@@ -94,10 +109,6 @@ interface ImageOptions {
   storage?: string;
 }
 
-interface TreeOptions {
-  multiple?: boolean;
-}
-
 function createLinkRenderer(options: LinkRendererOptions) {
   return (value: unknown, _locale: string) => {
     if (!value || !isString(value)) return String(value);
@@ -154,6 +165,7 @@ function formatDateBetween(value: unknown, locale: string): string {
   return `${start} - ${end}`;
 }
 
+// v2 .status pill, tinted with the configured online/offline color.
 function renderStatus(value: unknown, options: unknown) {
   const { processI18n } = useTranslation();
   const opts = options as StatusOptions | undefined;
@@ -163,21 +175,15 @@ function renderStatus(value: unknown, options: unknown) {
   const onlineColor = opts?.onlineColor || "primary";
   const offlineColor = opts?.offlineColor || "neutral";
 
-  return h("div", { class: "flex items-center gap-2" }, [
-    h("div", {
-      class: `w-2 h-2 rounded-full shrink-0`,
-      style: {
-        backgroundColor: isOnline
-          ? `var(--ui-color-${onlineColor}-500)`
-          : `var(--ui-color-${offlineColor}-400)`,
-      },
-    }),
-    h(
-      "span",
-      { class: "text-sm" },
-      isOnline ? processI18n(onlineLabel) : processI18n(offlineLabel),
-    ),
-  ]);
+  return h(StatusPill, {
+    tone: isOnline ? onlineColor : offlineColor,
+    label: isOnline ? processI18n(onlineLabel) : processI18n(offlineLabel),
+  });
+}
+
+/** v2 status pill: mono label on a tint of its color, led by a dot. */
+function renderStatusPill(label: string, color: string) {
+  return h(StatusPill, { tone: color, label });
 }
 
 function renderSelectItem(item: SelectItem) {
@@ -185,6 +191,10 @@ function renderSelectItem(item: SelectItem) {
   const label = processI18n(item.label);
   if (!item.icon && !item.iconColor && !item.textColor) return label;
 
+  // A colored option is a status: v2 renders it as a pill, without the icon.
+  const statusColor = item.textColor ?? item.iconColor;
+  if (statusColor) return renderStatusPill(label, statusColor);
+
   const children: VNode[] = [];
   if (item.icon) {
     children.push(
@@ -254,20 +264,6 @@ function formatAddress(value: unknown): string {
   return parts.join(", ");
 }
 
-function countLeafPermissions(value: string[]): number {
-  const parentIds = new Set<string>();
-  for (const id of value) {
-    const parts = id.split(PERMISSION_SEPARATOR);
-    let prefix = "";
-    for (let i = 0; i < parts.length - 1; i++) {
-      const segment = parts[i] ?? "";
-      prefix = i === 0 ? segment : `${prefix}${PERMISSION_SEPARATOR}${segment}`;
-      parentIds.add(prefix);
-    }
-  }
-  return value.filter((id) => !parentIds.has(id)).length;
-}
-
 function renderRelationBadge(label: string, title?: string) {
   return h(UBadge, {
     label,
@@ -335,29 +331,6 @@ function renderCascaderRelation(value: unknown, options: unknown) {
   });
 }
 
-function mapRelationBeforeState(value: unknown, options: unknown) {
-  if (!value) return value;
-
-  const opts = options as RelationOptions | undefined;
-  const valueKey = opts?.keyMapping?.value || DEFAULT_RELATION_VALUE_KEY;
-
-  if (typeof value === "string" || typeof value === "number") return value;
-
-  if (opts?.multiple && Array.isArray(value)) {
-    return value.map((item) =>
-      typeof item === "object" && item !== null
-        ? (item as Record<string, unknown>)[valueKey]
-        : item,
-    );
-  }
-
-  if (typeof value === "object" && value !== null) {
-    return (value as Record<string, unknown>)[valueKey];
-  }
-
-  return value;
-}
-
 function toImageList(value: unknown): ImageItemValue[] {
   if (!value) return [];
   const list = Array.isArray(value) ? value : [value];
@@ -393,6 +366,294 @@ function renderFile(value: unknown, options: unknown) {
   return "";
 }
 
+interface IdentityBadgeOption {
+  /** Row field the badge reads. */
+  field: string;
+  /** Shown when the field equals this (defaults to `true`). */
+  equals?: unknown;
+  /** Shown when the field differs from this. */
+  notEquals?: unknown;
+  label: string;
+  tone?: string;
+}
+
+interface IdentityOptions {
+  avatarField?: string;
+  icon?: string;
+  subtitleField?: string;
+  selfField?: string;
+  selfLabel?: string;
+  badges?: IdentityBadgeOption[];
+  storage?: string;
+}
+
+const matchesBadge = (badge: IdentityBadgeOption, value: unknown): boolean =>
+  "notEquals" in badge
+    ? value !== badge.notEquals
+    : value === (badge.equals ?? true);
+
+/**
+ * `identity`: avatar or icon tile, the value as the name, a "You" tag on the
+ * signed-in user's row, badges and a secondary line, all read off the row.
+ */
+function renderIdentity(value: unknown, options: unknown, row: Row) {
+  const { processI18n } = useTranslation();
+  const opts = (options ?? {}) as IdentityOptions;
+  const badges = (opts.badges ?? [])
+    .filter((badge) => matchesBadge(badge, readRowField(row, badge.field)))
+    .map((badge) => ({ label: processI18n(badge.label), color: badge.tone }));
+  return h(IdentityCell, {
+    title: stringOf(value) ?? "",
+    subtitle: stringOf(readRowField(row, opts.subtitleField)) ?? "",
+    avatar: readRowField(row, opts.avatarField) as
+      | { key: string }
+      | string
+      | null,
+    icon: opts.icon,
+    selfId: stringOf(readRowField(row, opts.selfField)),
+    selfLabel: opts.selfLabel ? processI18n(opts.selfLabel) : undefined,
+    badges,
+    storage: opts.storage,
+  });
+}
+
+interface PillsOptions {
+  /** Field naming a related row (relation values). Defaults to `name`. */
+  labelKey?: string;
+  /** When the row's field is set, one filled pill replaces the list. */
+  exclusive?: { field: string; label: string; icon?: string };
+  /** Text drawn for an empty list. */
+  emptyLabel?: string;
+}
+
+const PILL_CLASS =
+  "inline-flex h-[22px] items-center gap-[5px] rounded-full border px-[9px] font-mono text-[11px] whitespace-nowrap";
+const PILL_OUTLINE_CLASS = "border-accented text-toned font-[550]";
+const PILL_SHRINK_CLASS = "min-w-12";
+const PILL_FILLED_CLASS =
+  "shrink-0 border-(--dms-accent-fill) bg-(--dms-accent-fill) font-[650] text-(--dms-accent-on-fill)";
+
+/**
+ * `pills`: a list (relation rows, select values, strings) as v2 role pills,
+ * or a single filled pill when the row's `exclusive.field` is set (an owner's
+ * crown). A bare id a relation could not resolve (a deleted row) is skipped.
+ */
+function renderPills(value: unknown, options: unknown, row: Row) {
+  const { processI18n } = useTranslation();
+  const opts = (options ?? {}) as PillsOptions;
+  if (opts.exclusive && isSet(readRowField(row, opts.exclusive.field))) {
+    return h("span", { class: [PILL_CLASS, PILL_FILLED_CLASS] }, [
+      opts.exclusive.icon
+        ? h(UIcon, { name: opts.exclusive.icon, class: "size-3" })
+        : null,
+      processI18n(opts.exclusive.label),
+    ]);
+  }
+  const labelKey = opts.labelKey ?? DEFAULT_RELATION_LABEL_KEY;
+  const items = Array.isArray(value) ? value : value == null ? [] : [value];
+  const hasObjects = items.some((item) => isObject(item));
+  const labels = items.flatMap((item) => {
+    if (isObject(item)) {
+      const label = (item as Record<string, unknown>)[labelKey];
+      return label === undefined ? [] : [processI18n(String(label))];
+    }
+    return hasObjects ? [] : [processI18n(String(item))];
+  });
+  if (labels.length === 0) {
+    return opts.emptyLabel
+      ? h(
+          "span",
+          { class: "text-dimmed text-[12.5px]" },
+          processI18n(opts.emptyLabel),
+        )
+      : "";
+  }
+  // Pills too wide for the column shrink to an ellipsis (no shorter than a
+  // few letters); the list's tooltip names them all.
+  return h(
+    "span",
+    { class: "flex min-w-0 gap-1 overflow-hidden", title: labels.join(", ") },
+    labels.map((label) =>
+      h(
+        "span",
+        { class: [PILL_CLASS, PILL_OUTLINE_CLASS, PILL_SHRINK_CLASS] },
+        [h("span", { class: "truncate" }, label)],
+      ),
+    ),
+  );
+}
+
+interface RelativeDateOptions {
+  /** `relative` ("2 hr. ago", "In 5 days", default) or `day` ("Sep 27"). */
+  style?: "relative" | "day";
+  /** Text tone; see the cell tones. */
+  tone?: string;
+  /** A past date closer than this reads `nowLabel`, with a live dot. */
+  nowWithinMs?: number;
+  nowLabel?: string;
+  /** Text and tone of a missing date. */
+  emptyLabel?: string;
+  emptyTone?: string;
+  /** A future date closer than this takes `soonTone` (warning). */
+  soonWithinMs?: number;
+  soonTone?: string;
+  /** Style and tone of a date already past (an expired invitation). */
+  pastStyle?: "relative" | "day";
+  pastTone?: string;
+  /** Row field naming who acted: "Sep 27 · by Camille". */
+  byField?: string;
+  /** i18n key receiving `{ date, name }`. */
+  byLabel?: string;
+}
+
+const CELL_TEXT_CLASS = "text-[12.5px]";
+// Tooltip of a relative date: the exact moment, in the reader's preferences.
+const RELATIVE_TITLE_FORMAT: Intl.DateTimeFormatOptions = {
+  dateStyle: "medium",
+  timeStyle: "short",
+};
+const NOW_DOT_CLASS =
+  "inline-flex items-center gap-1.5 before:size-1.5 before:rounded-full before:bg-current";
+
+/**
+ * `relative_date`: a date as the distance to now, with an "active now"
+ * window, an amber "soon", a dimmed past and an optional "· by" author.
+ */
+function renderRelativeDate(
+  value: unknown,
+  locale: string,
+  options: unknown,
+  row: Row,
+) {
+  const { processI18n } = useTranslation();
+  const opts = (options ?? {}) as RelativeDateOptions;
+  const date = new Date(value as string);
+  if (Number.isNaN(date.getTime())) return String(value);
+  const deltaMs = date.getTime() - Date.now();
+  const isPast = deltaMs < 0;
+  const title = formatDate(date, locale, RELATIVE_TITLE_FORMAT) ?? undefined;
+
+  if (opts.nowWithinMs && isPast && -deltaMs < opts.nowWithinMs) {
+    return h(
+      "span",
+      { class: [CELL_TEXT_CLASS, NOW_DOT_CLASS, toneClass("success")], title },
+      processI18n(opts.nowLabel ?? "$dms.table.cell.now"),
+    );
+  }
+
+  const style = (isPast ? opts.pastStyle : undefined) ?? opts.style;
+  let text =
+    style === "day"
+      ? formatDayMonth(date, locale)
+      : formatRelativeDate(date, locale);
+  const isSoon = !isPast && !!opts.soonWithinMs && deltaMs < opts.soonWithinMs;
+  const tone = isPast
+    ? (opts.pastTone ?? opts.tone)
+    : isSoon
+      ? (opts.soonTone ?? "warning")
+      : opts.tone;
+
+  const author = firstNameOf(readRowField(row, opts.byField));
+  if (author) {
+    text = processI18n(opts.byLabel ?? "$dms.table.cell.by", {
+      date: text,
+      name: author,
+    });
+  }
+  return h("span", { class: [CELL_TEXT_CLASS, toneClass(tone)], title }, text);
+}
+
+function renderMissingDate(options: unknown) {
+  const { processI18n } = useTranslation();
+  const opts = (options ?? {}) as RelativeDateOptions;
+  if (!opts.emptyLabel) return "-";
+  return h(
+    "span",
+    { class: [CELL_TEXT_CLASS, toneClass(opts.emptyTone, "dimmed")] },
+    processI18n(opts.emptyLabel),
+  );
+}
+
+interface IndicatorOptions {
+  onLabel?: string;
+  offLabel?: string;
+  onIcon?: string;
+  offIcon?: string;
+  /** Defaults to `success`. */
+  onTone?: string;
+  /** Defaults to `dimmed`. */
+  offTone?: string;
+}
+
+/**
+ * `indicator`: an on/off state as an icon and a word ("On" with a shield),
+ * on for a set flag or a non-empty list.
+ */
+function renderIndicator(value: unknown, options: unknown) {
+  const { processI18n } = useTranslation();
+  const opts = (options ?? {}) as IndicatorOptions;
+  const isOn = isSet(value);
+  const icon = isOn ? opts.onIcon : opts.offIcon;
+  const label = isOn
+    ? (opts.onLabel ?? "$dms.table.filter.boolean.checked")
+    : (opts.offLabel ?? "$dms.table.filter.boolean.unchecked");
+  return h(
+    "span",
+    {
+      class: [
+        "inline-flex items-center gap-[5px]",
+        CELL_TEXT_CLASS,
+        isOn
+          ? toneClass(opts.onTone, "success")
+          : toneClass(opts.offTone, "dimmed"),
+      ],
+    },
+    [
+      icon ? h(UIcon, { name: icon, class: "size-[15px] shrink-0" }) : null,
+      processI18n(label),
+    ],
+  );
+}
+
+/**
+ * Cell data types a column picks through its `display` option, composing the
+ * row's fields: reusable by any table.
+ */
+const registerCellTypes = (registerDataType: (dataType: DataType) => void) => {
+  registerDataType({
+    id: "identity",
+    formatter: {
+      default: (value, _locale, options, row) =>
+        renderIdentity(value, options, row),
+      empty: (_value, _locale, options, row) =>
+        renderIdentity("", options, row),
+    },
+  });
+  registerDataType({
+    id: "pills",
+    formatter: {
+      default: (value, _locale, options, row) =>
+        renderPills(value, options, row),
+      empty: (_value, _locale, options, row) => renderPills([], options, row),
+    },
+  });
+  registerDataType({
+    id: "relative_date",
+    formatter: {
+      default: (value, locale, options, row) =>
+        renderRelativeDate(value, locale, options, row),
+      empty: (_value, _locale, options) => renderMissingDate(options),
+    },
+  });
+  registerDataType({
+    id: "indicator",
+    formatter: {
+      default: (value, _locale, options) => renderIndicator(value, options),
+      empty: (_value, _locale, options) => renderIndicator(false, options),
+    },
+  });
+};
+
 const registerPrimitiveTypes = (
   registerDataType: (dataType: DataType) => void,
 ) => {
@@ -418,6 +679,14 @@ const registerPrimitiveTypes = (
   });
 };
 
+// Table cells use a short month ("30 Sep 2026", order per locale) so the
+// date fits a default-width column in the mono face.
+const CELL_DATE_FORMAT: Intl.DateTimeFormatOptions = {
+  day: "2-digit",
+  month: "short",
+  year: "numeric",
+};
+
 const registerDateType = (registerDataType: (dataType: DataType) => void) => {
   registerDataType({
     id: "date",
@@ -426,6 +695,12 @@ const registerDateType = (registerDataType: (dataType: DataType) => void) => {
         const { t } = useI18n();
         return formatDate(value, locale) ?? t("dms.date.undefined");
       },
+      cell: (value: unknown, locale: string) => {
+        const { t } = useI18n();
+        return (
+          formatDate(value, locale, CELL_DATE_FORMAT) ?? t("dms.date.undefined")
+        );
+      },
       is_between: formatDateBetween,
     },
   });
@@ -497,38 +772,6 @@ const registerLinkTypes = (registerDataType: (dataType: DataType) => void) => {
   });
 };
 
-const registerTreeType = (registerDataType: (dataType: DataType) => void) => {
-  registerDataType({
-    id: "tree",
-    formatter: {
-      default: (value: unknown, _locale: string, options: unknown) => {
-        const { t } = useI18n();
-        const opts = options as TreeOptions | undefined;
-        if (opts?.multiple && Array.isArray(value)) {
-          return t("dms.form.relation.selected_count", { count: value.length });
-        }
-        return value;
-      },
-    },
-  });
-};
-
-const registerPermissionsType = (
-  registerDataType: (dataType: DataType) => void,
-) => {
-  registerDataType({
-    id: "permissions",
-    formatter: {
-      default: (value: unknown, _locale: string) => {
-        const { t } = useI18n();
-        if (!Array.isArray(value)) return value;
-        const leafCount = countLeafPermissions(value as string[]);
-        return t("dms.form.relation.selected_count", { count: leafCount });
-      },
-    },
-  });
-};
-
 const registerRelationType = (
   registerDataType: (dataType: DataType) => void,
 ) => {
@@ -539,6 +782,7 @@ const registerRelationType = (
         renderRelation(value, options),
     },
     beforeStateMapper: mapRelationBeforeState,
+    isSameValue: sameRelationValue,
   });
 };
 
@@ -552,6 +796,7 @@ const registerCascaderRelationType = (
         renderCascaderRelation(value, options),
     },
     beforeStateMapper: mapRelationBeforeState,
+    isSameValue: sameRelationValue,
   });
 };
 
@@ -592,10 +837,11 @@ export function registerDefaultDataTypes() {
   registerAddressType(registerDataType);
   registerImageType(registerDataType);
   registerLinkTypes(registerDataType);
-  registerTreeType(registerDataType);
-  registerPermissionsType(registerDataType);
   registerRelationType(registerDataType);
   registerCascaderRelationType(registerDataType);
   registerFileType(registerDataType);
   registerDisplayOnlyTypes(registerDataType);
+  registerCellTypes(registerDataType);
+  registerMetricCellTypes(registerDataType);
+  registerFieldTypes(registerDataType);
 }

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

@@ -0,0 +1,64 @@
+import { h } from "vue";
+import type { DataType } from "#dms-core/app/composables/data-types/useDataType";
+
+// How the field types made of several values read in a table cell or a
+// read-only form: a count, a masked secret, the first line of the code,
+// the tags as pills.
+const SECRET_TAIL = 4;
+const SECRET_MASK = "••••";
+const TAG_CLASS =
+  "inline-flex h-5 items-center rounded-[5px] border border-default bg-elevated px-1.5 text-[11.5px]";
+const TAGS_CLASS = "inline-flex flex-wrap items-center gap-1";
+const CODE_CLASS = "font-mono text-[12px] truncate";
+
+const countOf = (value: unknown): number => {
+  if (Array.isArray(value)) return value.length;
+  if (value && typeof value === "object") return Object.keys(value).length;
+  return 0;
+};
+
+function renderCount(key: string) {
+  return (value: unknown) => {
+    const { t } = useI18n();
+    const count = countOf(value);
+    return t(key, { count }, count);
+  };
+}
+
+function renderSecret(value: unknown): string {
+  return typeof value === "string" && value
+    ? `${SECRET_MASK}${value.slice(-SECRET_TAIL)}`
+    : "";
+}
+
+function renderCode(value: unknown) {
+  if (typeof value !== "string") return "";
+  const [firstLine = ""] = value.split("\n");
+  return h("span", { class: CODE_CLASS, title: value }, firstLine);
+}
+
+function renderTags(value: unknown) {
+  if (!Array.isArray(value)) return "";
+  return h(
+    "span",
+    { class: TAGS_CLASS },
+    value.map((tag) => h("span", { class: TAG_CLASS }, String(tag))),
+  );
+}
+
+/** The display of the array, key-value, secret, code and tags types. */
+export function registerFieldTypes(
+  registerDataType: (dataType: DataType) => void,
+): void {
+  registerDataType({
+    id: "array",
+    formatter: { default: renderCount("dms.form.repeater.count") },
+  });
+  registerDataType({
+    id: "key_value",
+    formatter: { default: renderCount("dms.form.key_value.count") },
+  });
+  registerDataType({ id: "secret", formatter: { default: renderSecret } });
+  registerDataType({ id: "code", formatter: { default: renderCode } });
+  registerDataType({ id: "tags", formatter: { default: renderTags } });
+}

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

@@ -0,0 +1,66 @@
+import { isEmptyFormValue, sameFormValue } from "../unsaved-changes/formValue";
+
+const DEFAULT_RELATION_VALUE_KEY = "_id";
+
+interface RelationKeyMapping {
+  value?: string;
+}
+
+interface RelationValueOptions {
+  multiple?: boolean;
+  keyMapping?: RelationKeyMapping;
+}
+
+/**
+ * The form state of a relation value: the id of each row it references, as
+ * the picker holds it, whether the server sent the joined rows or their ids.
+ */
+export function mapRelationBeforeState(value: unknown, options: unknown) {
+  if (!value) return value;
+
+  const opts = options as RelationValueOptions | undefined;
+  const valueKey = opts?.keyMapping?.value || DEFAULT_RELATION_VALUE_KEY;
+
+  if (typeof value === "string" || typeof value === "number") return value;
+
+  if (opts?.multiple && Array.isArray(value)) {
+    return value.map((item) =>
+      typeof item === "object" && item !== null
+        ? (item as Record<string, unknown>)[valueKey]
+        : item,
+    );
+  }
+
+  if (typeof value === "object" && value !== null) {
+    return (value as Record<string, unknown>)[valueKey];
+  }
+
+  return value;
+}
+
+function relationIds(value: unknown, options: unknown): unknown[] {
+  const ids = mapRelationBeforeState(value, options);
+  return isEmptyFormValue(ids) ? [] : [ids].flat();
+}
+
+function compareIdText(left: unknown, right: unknown): number {
+  return String(left).localeCompare(String(right));
+}
+
+/**
+ * Two relation values are the same when they reference the same rows, whether
+ * a side holds the rows the server joined or the ids the picker keeps. The
+ * picks of a multiple relation are a set: their order does not count.
+ */
+export function sameRelationValue(
+  left: unknown,
+  right: unknown,
+  options: unknown,
+): boolean {
+  const isSet = !!(options as RelationValueOptions | undefined)?.multiple;
+  const comparable = (value: unknown) => {
+    const ids = relationIds(value, options);
+    return isSet ? ids.sort(compareIdText) : ids;
+  };
+  return sameFormValue(comparable(left), comparable(right));
+}