@antelopejs/dms 0.11.1 → 0.12.0

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

@@ -0,0 +1,177 @@
+import { type VNode } from "vue";
+import type {
+  DataType,
+  DataTypeFormatter,
+} from "#dms-core/app/composables/data-types/useDataType";
+import { isString } from "#dms-core/app/utils/type-check";
+import UIcon from "@nuxt/ui/runtime/vue/components/Icon.vue";
+import { isSet, toneClass } from "./cellHelpers";
+import StatusPill from "../../../components/status-pill/StatusPill.vue";
+import { getAppTranslation } from "../../../../../dms-core/app/composables/translation/useTranslation";
+
+const CELL_TEXT_CLASS = "text-[12.5px]";
+
+type CellOptions = Parameters<DataTypeFormatter>[2];
+
+type CellValue = Parameters<DataTypeFormatter>[0];
+
+interface SelectItem {
+  value: unknown;
+  label: string;
+  icon?: string;
+  iconColor?: string;
+  textColor?: string;
+}
+
+interface SelectOptions {
+  items?: SelectItem[];
+}
+
+interface StatusOptions {
+  onlineLabel?: string;
+  offlineLabel?: string;
+  onlineColor?: string;
+  offlineColor?: string;
+}
+
+function renderStatus(value: CellValue, options: CellOptions) {
+  const { processI18n } = getAppTranslation();
+  // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- DataTypeFormatter erases options; status labels and colors remain unchecked rather than rejecting malformed plugin inputs.
+  const opts = options as StatusOptions | undefined;
+  const isOnline = Boolean(value);
+  const onlineLabel = opts?.onlineLabel || "$common.status.online";
+  const offlineLabel = opts?.offlineLabel || "$common.status.offline";
+  const onlineColor = opts?.onlineColor || "primary";
+  const offlineColor = opts?.offlineColor || "neutral";
+
+  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) {
+  const { processI18n } = getAppTranslation();
+  const label = processI18n(item.label);
+  if (!item.icon && !item.iconColor && !item.textColor) return label;
+
+  const statusColor = item.textColor ?? item.iconColor;
+  if (statusColor) return renderStatusPill(label, statusColor);
+
+  const children: VNode[] = [];
+  if (item.icon) {
+    children.push(
+      h(UIcon, {
+        name: item.icon,
+        class: "size-4 shrink-0",
+        style: item.iconColor
+          ? { color: `var(--ui-${item.iconColor})` }
+          : undefined,
+      }),
+    );
+  }
+  children.push(
+    h(
+      "span",
+      {
+        style: item.textColor
+          ? { color: `var(--ui-${item.textColor})` }
+          : undefined,
+      },
+      label,
+    ),
+  );
+
+  return h("span", { class: "inline-flex items-center gap-1.5" }, children);
+}
+
+function renderSelect(value: CellValue, options?: CellOptions) {
+  // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- The formatter contract erases select options; items are consumed without a runtime schema.
+  const opts = options as SelectOptions | undefined;
+  const formatOne = (val: CellValue) => {
+    const item = opts?.items?.find((opt) => opt.value === val);
+    return item ? renderSelectItem(item) : val;
+  };
+
+  if (!Array.isArray(value)) return formatOne(value);
+
+  const rendered = value.map(formatOne);
+  if (rendered.every((part) => isString(part))) {
+    return rendered.join(", ");
+  }
+  const children: (VNode | string)[] = [];
+  rendered.forEach((part, index) => {
+    if (index > 0) children.push(", ");
+    // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- An unmatched select value is still unknown; Vue receives the original unchecked child as before.
+    children.push(part as VNode | string);
+  });
+  return h("span", { class: "inline-flex items-center gap-1" }, children);
+}
+
+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.
+ */
+export function renderIndicator(value: CellValue, options: CellOptions) {
+  const { processI18n } = getAppTranslation();
+  const opts: IndicatorOptions = options ?? {};
+  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),
+    ],
+  );
+}
+
+export const registerStatusType = (
+  registerDataType: (dataType: DataType) => void,
+) => {
+  registerDataType({
+    id: "status",
+    formatter: {
+      default: (value, _locale, options) => renderStatus(value, options),
+    },
+  });
+};
+
+export const registerSelectType = (
+  registerDataType: (dataType: DataType) => void,
+) => {
+  registerDataType({
+    id: "select",
+    formatter: {
+      default: (value, _locale, options) => renderSelect(value, options),
+    },
+  });
+};

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

@@ -0,0 +1,108 @@
+import type { DataTypeFormatter } from "#dms-core/app/composables/data-types/useDataType";
+import { readRowField, type Row, toneClass } from "./cellHelpers";
+import {
+  firstNameOf,
+  formatDayMonth,
+  formatRelativeDate,
+} from "../../utils/relativeDate";
+import { serverRenderNow } from "#dms-core/app/entries/composables/renderNow";
+import { getAppTranslation } from "../../../../../dms-core/app/composables/translation/useTranslation";
+
+const CELL_TEXT_CLASS = "text-[12.5px]";
+
+type CellOptions = Parameters<DataTypeFormatter>[2];
+
+type CellValue = Parameters<DataTypeFormatter>[0];
+
+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 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.
+ */
+export function renderRelativeDate(
+  value: CellValue,
+  locale: string,
+  options: CellOptions,
+  row: Row,
+) {
+  const { processI18n } = getAppTranslation();
+  const opts: RelativeDateOptions = options ?? {};
+  // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- The string assertion does not validate the input; Date retains its existing native coercion and exceptions for plugin values.
+  const date = new Date(value as string);
+  if (Number.isNaN(date.getTime())) return String(value);
+
+  const now = serverRenderNow() ?? Date.now();
+  const deltaMs = date.getTime() - 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, now)
+      : formatRelativeDate(date, locale, now);
+  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);
+}
+
+export function renderMissingDate(options: CellOptions) {
+  const { processI18n } = getAppTranslation();
+  const opts: RelativeDateOptions = options ?? {};
+  if (!opts.emptyLabel) return "-";
+  return h(
+    "span",
+    { class: [CELL_TEXT_CLASS, toneClass(opts.emptyTone, "dimmed")] },
+    processI18n(opts.emptyLabel),
+  );
+}

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

@@ -0,0 +1,33 @@
+import { defineAsyncComponent } from "vue";
+
+export const FilePreview = defineAsyncComponent(
+  () => import("../../../components/table-view/FilePreview.vue"),
+);
+
+export const ImagePreview = defineAsyncComponent(
+  () => import("../../../components/table-view/ImagePreview.vue"),
+);
+
+export const CascaderPath = defineAsyncComponent(
+  () => import("../../../components/table-view/CascaderPath.vue"),
+);
+
+export const DisplayRichText = defineAsyncComponent(
+  () => import("../../../components/form/components/DisplayRichText.vue"),
+);
+
+export const DisplayPassword = defineAsyncComponent(
+  () => import("../../../components/form/components/DisplayPassword.vue"),
+);
+
+export const DisplayFile = defineAsyncComponent(
+  () => import("../../../components/form/components/DisplayFile.vue"),
+);
+
+export const DisplayImage = defineAsyncComponent(
+  () => import("../../../components/form/components/DisplayImage.vue"),
+);
+
+export const DisplayColor = defineAsyncComponent(
+  () => import("../../../components/form/components/DisplayColor.vue"),
+);

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

@@ -0,0 +1,222 @@
+import type { DataTypeFormatter } from "#dms-core/app/composables/data-types/useDataType";
+import { isObject, isString } from "#dms-core/app/utils/type-check";
+import UIcon from "@nuxt/ui/runtime/vue/components/Icon.vue";
+import {
+  isSet,
+  readRowField,
+  readSubline,
+  type Row,
+  stringOf,
+  toneClass,
+} from "./cellHelpers";
+import { getAppComposedText } from "../../../../../dms-core/app/composables/translation/useComposedText";
+import StatusPill, {
+  type StatusPillVariant,
+} from "../../../components/status-pill/StatusPill.vue";
+import { isDmsTone } from "../../utils/tone";
+import IdentityCell from "../../components/table-view/IdentityCell.vue";
+import { getAppTranslation } from "../../../../../dms-core/app/composables/translation/useTranslation";
+
+const DEFAULT_RELATION_LABEL_KEY = "name";
+
+type CellOptions = Parameters<DataTypeFormatter>[2];
+
+type CellValue = Parameters<DataTypeFormatter>[0];
+
+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;
+  /** Row field holding the tile's icon; `icon` when it is empty. */
+  iconField?: string;
+  subtitleField?: string;
+  subtitleTone?: string;
+  selfField?: string;
+  selfLabel?: string;
+  badges?: IdentityBadgeOption[];
+  storage?: string;
+  /** Name drawn, muted, for a row without a value. */
+  emptyLabel?: string;
+  /** Icon tile of a row without a value. */
+  emptyIcon?: string;
+}
+
+const matchesBadge = (badge: IdentityBadgeOption, value: CellValue): 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 (an address as written,
+ * or a composed text in its tone), all read off the row; `emptyLabel` and
+ * `emptyIcon` stand for a row without a value.
+ */
+export function renderIdentity(
+  value: CellValue,
+  options: CellOptions,
+  row: Row,
+) {
+  const { processI18n } = getAppTranslation();
+  const { processText } = getAppComposedText();
+  const opts: IdentityOptions = options ?? {};
+  const badges = (opts.badges ?? [])
+    .filter((badge) => matchesBadge(badge, readRowField(row, badge.field)))
+    .map((badge) => ({ label: processI18n(badge.label), color: badge.tone }));
+
+  const subtitle = readSubline(readRowField(row, opts.subtitleField), {
+    processText,
+    isStringTranslated: false,
+  });
+  return h(IdentityCell, {
+    title: stringOf(value) ?? "",
+    subtitle: subtitle?.text ?? "",
+    subtitleClass: toneClass(subtitle?.tone ?? opts.subtitleTone, "dimmed"),
+    emptyLabel: opts.emptyLabel ? processI18n(opts.emptyLabel) : undefined,
+    emptyIcon: opts.emptyIcon,
+    // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- The row's avatar field has no runtime schema; this existing component handoff remains unchecked.
+    avatar: readRowField(row, opts.avatarField) as
+      | { key: string }
+      | string
+      | null,
+    icon: stringOf(readRowField(row, opts.iconField)) ?? 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)";
+
+/**
+ * A pill the server styles per row. Mirror of `DefaultDisplays.PillItem` from
+ * `@antelopejs/interface-dms/base/table-view`.
+ */
+interface PillItem {
+  label: string;
+  tone?: string;
+  variant?: string;
+}
+
+const DEFAULT_PILL_VARIANT: StatusPillVariant = "soft";
+
+const pillVariantOf = (variant: string | undefined): StatusPillVariant =>
+  variant === "soft" || variant === "outline" ? variant : DEFAULT_PILL_VARIANT;
+
+const DEFAULT_PILL_TONE = "neutral";
+
+const isPillItem = (item: unknown, labelKey: string): item is PillItem =>
+  isObject(item) && isString(item.label) && !(labelKey in item);
+
+/**
+ * The pills of a list. A bare id is skipped next to the related rows it
+ * could not be resolved into; next to pill items it is a pill.
+ */
+function pillsOf(
+  items: unknown[],
+  labelKey: string,
+  processI18n: (text: string) => string,
+): PillItem[] {
+  const hasRelatedRows = items.some(
+    (item) => isObject(item) && !isPillItem(item, labelKey),
+  );
+  return items.flatMap((item): PillItem[] => {
+    if (isPillItem(item, labelKey)) {
+      return [{ ...item, label: processI18n(item.label) }];
+    }
+    if (isObject(item)) {
+      const label = item[labelKey];
+      return label === undefined ? [] : [{ label: processI18n(String(label)) }];
+    }
+    return hasRelatedRows ? [] : [{ label: processI18n(String(item)) }];
+  });
+}
+
+/** A plain pill in the role-pill outline, a styled one as a status pill. */
+function renderPill(pill: PillItem) {
+  if (!pill.tone && !pill.variant) {
+    return h(
+      "span",
+      { class: [PILL_CLASS, PILL_OUTLINE_CLASS, PILL_SHRINK_CLASS] },
+      [h("span", { class: "truncate" }, pill.label)],
+    );
+  }
+  return h(StatusPill, {
+    label: pill.label,
+    tone: pill.tone && isDmsTone(pill.tone) ? pill.tone : DEFAULT_PILL_TONE,
+    variant: pillVariantOf(pill.variant),
+    dot: "none",
+    class: PILL_SHRINK_CLASS,
+  });
+}
+
+/**
+ * `pills`: a list (relation rows, select values, strings, pill items) as v2
+ * role pills, a pill item in its own tone and variant, 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.
+ */
+export function renderPills(value: CellValue, options: CellOptions, row: Row) {
+  const { processI18n } = getAppTranslation();
+  const opts: PillsOptions = options ?? {};
+  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 items = Array.isArray(value) ? value : value == null ? [] : [value];
+  const pills = pillsOf(
+    items,
+    opts.labelKey ?? DEFAULT_RELATION_LABEL_KEY,
+    processI18n,
+  );
+  if (pills.length === 0) {
+    return opts.emptyLabel
+      ? h(
+          "span",
+          { class: "text-dimmed text-[12.5px]" },
+          processI18n(opts.emptyLabel),
+        )
+      : "";
+  }
+
+  return h(
+    "span",
+    {
+      class: "flex min-w-0 gap-1 overflow-hidden",
+      title: pills.map((pill) => pill.label).join(", "),
+    },
+    pills.map(renderPill),
+  );
+}

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

@@ -0,0 +1,116 @@
+import type {
+  DataType,
+  DataTypeFormatter,
+} from "#dms-core/app/composables/data-types/useDataType";
+import { isString } from "#dms-core/app/utils/type-check";
+import UAvatar from "@nuxt/ui/components/Avatar.vue";
+import UIcon from "@nuxt/ui/runtime/vue/components/Icon.vue";
+import ULink from "@nuxt/ui/components/Link.vue";
+import { type Row } from "./cellHelpers";
+import { formatRecordLabel } from "../table-view/utils/formTexts";
+
+type CellOptions = Parameters<DataTypeFormatter>[2];
+
+type CellValue = Parameters<DataTypeFormatter>[0];
+
+const LINK_CLASS =
+  "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";
+
+interface LinkRendererOptions {
+  hrefPrefix?: string;
+  target?: string;
+}
+
+function createLinkRenderer(options: LinkRendererOptions) {
+  return (value: CellValue, _locale: string) => {
+    if (!value || !isString(value)) return String(value);
+
+    const href = options.hrefPrefix ? `${options.hrefPrefix}${value}` : value;
+
+    return h(
+      ULink,
+      {
+        to: href,
+        title: value,
+        ...(options.target && { target: options.target }),
+        class: LINK_CLASS,
+        onClick: (event: Event) => event.stopPropagation(),
+      },
+      () => [
+        h("span", { class: "truncate" }, value),
+        h(UIcon, { name: LINK_ICON_NAME, class: LINK_ICON_CLASS }),
+      ],
+    );
+  };
+}
+
+/** A `UrlType`'s options its read-only value reads. */
+interface UrlOptions {
+  preview?: "avatar" | "image";
+  /**
+   * The label of the field shown, handed by the form's read-only display:
+   * the image's name when its row has none.
+   */
+  fieldLabel?: string;
+}
+
+const URL_IMAGE_CLASS =
+  "border-default h-16 w-auto max-w-full rounded-md border object-cover";
+
+const ROW_NAME_FIELDS = ["name", "label", "title"];
+
+/**
+ * What an image stands for to a reader who cannot see it: the name of the
+ * row it belongs to (a team member's photo is that member), or else the
+ * field's label.
+ */
+function imageAlt(row: Row, locale: string, options: UrlOptions): string {
+  for (const field of ROW_NAME_FIELDS) {
+    const name = formatRecordLabel(row?.[field], locale);
+    if (name) return name;
+  }
+  return options.fieldLabel ?? "";
+}
+
+/**
+ * A URL drawn as the image it points to, when its type asks for it
+ * (`preview`): a remote photo reads as a picture, not as its address.
+ */
+function renderUrl(
+  value: CellValue,
+  locale: string,
+  options: CellOptions,
+  row: Row,
+) {
+  const opts: UrlOptions = options ?? {};
+  if (!opts.preview || !isString(value) || !value) return undefined;
+  const alt = imageAlt(row, locale, opts);
+  if (opts.preview === "avatar") return h(UAvatar, { src: value, alt });
+  return h("img", {
+    src: value,
+    alt,
+    loading: "lazy",
+    class: URL_IMAGE_CLASS,
+  });
+}
+
+export const registerLinkTypes = (
+  registerDataType: (dataType: DataType) => void,
+) => {
+  registerDataType({
+    id: "email",
+    formatter: { default: createLinkRenderer({ hrefPrefix: "mailto:" }) },
+  });
+  const renderLink = createLinkRenderer({ target: "_blank" });
+  registerDataType({
+    id: "url",
+    formatter: {
+      default: (value, locale, options, row) =>
+        renderUrl(value, locale, options, row) ?? renderLink(value, locale),
+    },
+  });
+};