@antelopejs/dms 0.11.0 → 0.12.0

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

@@ -0,0 +1,105 @@
+import type {
+  DataType,
+  DataTypeFormatter,
+} from "#dms-core/app/composables/data-types/useDataType";
+import { isObject, isString } from "#dms-core/app/utils/type-check";
+import UAvatar from "@nuxt/ui/components/Avatar.vue";
+import { getAppTranslation } from "../../../../../dms-core/app/composables/translation/useTranslation";
+import {
+  FilePreview,
+  ImagePreview,
+  DisplayRichText,
+  DisplayPassword,
+  DisplayFile,
+  DisplayImage,
+  DisplayColor,
+} from "./defaultDisplayComponents";
+
+type CellOptions = Parameters<DataTypeFormatter>[2];
+
+type CellValue = Parameters<DataTypeFormatter>[0];
+
+interface FileOptions {
+  multiple?: boolean;
+  storage?: string;
+}
+
+interface ImageOptions {
+  multiple?: boolean;
+  storage?: string;
+}
+
+function toImageList(value: CellValue): ImageItemValue[] {
+  if (!value) return [];
+  const list = Array.isArray(value) ? value : [value];
+  return list.filter(
+    (item): item is ImageItemValue => isObject(item) && isString(item.key),
+  );
+}
+
+function renderImage(value: CellValue, options: CellOptions) {
+  if (isString(value)) {
+    return h(UAvatar, { src: value, alt: value });
+  }
+
+  const images = toImageList(value);
+  if (!images.length) return "";
+
+  // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- DataTypeFormatter erases image options; storage is forwarded without validation.
+  const opts = options as ImageOptions | undefined;
+  return h(ImagePreview, { images, storage: opts?.storage });
+}
+
+function renderFile(value: CellValue, options: CellOptions) {
+  const { t } = getAppTranslation();
+  // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- File options are erased by the plugin contract; multiple and storage retain their existing unchecked behavior.
+  const opts = options as FileOptions | undefined;
+
+  if (opts?.multiple && Array.isArray(value)) {
+    return t("dms.form.file.count", { count: value.length });
+  }
+
+  if (isString(value)) {
+    return h(FilePreview, { resourceKey: value, storage: opts?.storage });
+  }
+
+  return "";
+}
+
+export const registerImageType = (
+  registerDataType: (dataType: DataType) => void,
+) => {
+  registerDataType({
+    id: "image",
+    formatter: {
+      default: (value, _locale, options) => renderImage(value, options),
+    },
+    displayComponent: DisplayImage,
+  });
+};
+
+export const registerFileType = (
+  registerDataType: (dataType: DataType) => void,
+) => {
+  registerDataType({
+    id: "file",
+    formatter: {
+      default: (value, _locale, options) => renderFile(value, options),
+    },
+    displayComponent: DisplayFile,
+  });
+};
+
+export const registerDisplayOnlyTypes = (
+  registerDataType: (dataType: DataType) => void,
+) => {
+  registerDataType({ id: "rich_text", displayComponent: DisplayRichText });
+  registerDataType({ id: "password", displayComponent: DisplayPassword });
+  registerDataType({
+    id: "color",
+    displayComponent: DisplayColor,
+    formatter: {
+      default: (value, _locale) => (isString(value) ? value : ""),
+    },
+  });
+};

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

@@ -0,0 +1,190 @@
+import { type VNodeChild } from "vue";
+import type {
+  DataType,
+  DataTypeFormatter,
+} from "#dms-core/app/composables/data-types/useDataType";
+import { isObject } from "#dms-core/app/utils/type-check";
+import UIcon from "@nuxt/ui/runtime/vue/components/Icon.vue";
+import { readRowTone, type Row } from "./cellHelpers";
+import {
+  dateFilterEditorValue,
+  numberFilterEditorValue,
+} from "../table/utils/filterEditorValue";
+import { formatDuration } from "#dms-core/app/utils/formatter";
+import { withNumberSuffix } from "./numberSuffix";
+import { DMS_TONE_TEXT } from "../../utils/tone";
+import { getAppTranslation } from "../../../../../dms-core/app/composables/translation/useTranslation";
+
+type CellOptions = Parameters<DataTypeFormatter>[2];
+
+type CellValue = Parameters<DataTypeFormatter>[0];
+
+const convertToBoolean = (value: CellValue): boolean =>
+  parse(String(value)) === true;
+
+const getBooleanLabel = (value: CellValue): string => {
+  const { processI18n } = getAppTranslation();
+  return convertToBoolean(value)
+    ? processI18n("$dms.table.filter.boolean.checked")
+    : processI18n("$dms.table.filter.boolean.unchecked");
+};
+
+function renderBoolean(value: CellValue) {
+  const boolValue = convertToBoolean(value);
+  return h("div", { class: "flex items-center gap-1" }, [
+    h(UIcon, { name: boolValue ? "i-ph-check-circle" : "i-ph-x-circle" }),
+    h("span", getBooleanLabel(value)),
+  ]);
+}
+
+function formatDateBetween(value: CellValue, locale: string): string {
+  const { t } = getAppTranslation();
+  const [rawStart, rawEnd] = Array.isArray(value)
+    ? value
+    : [
+        // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- The open formatter value has no date-range schema; preserve optional start access on the original input.
+        (value as { start?: unknown })?.start,
+        // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- The open formatter value has no date-range schema; preserve optional end access on the original input.
+        (value as { end?: unknown })?.end,
+      ];
+  const start = formatDate(rawStart, locale) ?? t("dms.date.undefined");
+  const end = formatDate(rawEnd, locale) ?? t("dms.date.undefined");
+  return `${start} - ${end}`;
+}
+
+function formatAddress(value: CellValue): string {
+  if (!value || !isObject(value)) return " ";
+
+  const { processI18n } = getAppTranslation();
+  const addr = value;
+  const countryName = addr.countryCode
+    ? processI18n(`$country.${addr.countryCode}`)
+    : addr.countryCode;
+  const number = [addr.houseNumber, addr.boxNumber].filter(Boolean).join("/");
+  const street = [addr.streetName, number].filter(Boolean).join(" ");
+  const parts = [
+    street,
+    addr.addressLine2,
+    addr.postalCode,
+    addr.city,
+    addr.countrySubdivision,
+    countryName,
+  ].filter(Boolean);
+  return parts.join(", ");
+}
+
+interface TextOptions {
+  /** Row field holding the text's tone. */
+  toneField?: string;
+}
+
+/**
+ * `string`: the value as written, in the tone the row gives (`toneField`) when
+ * it gives one; a row without one keeps the bare value, as a string column
+ * always drew it. An empty one is `null`: a cell rendering `""` as its root
+ * leaves no node in the server's HTML, which the browser hydrates as a
+ * mismatch, where `null` renders a placeholder both sides agree on.
+ */
+function renderText(
+  value: CellValue,
+  _locale: string,
+  options?: CellOptions,
+  row?: Row,
+): ReturnType<DataTypeFormatter> {
+  if (value === "") return null;
+  const tone = readRowTone(
+    row,
+    // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Text options have no runtime schema; toneField is read from the original plugin input.
+    (options as TextOptions | undefined)?.toneField,
+  );
+  if (!tone) return value;
+
+  // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- A valid tone does not validate the row value as VNodeChild; preserve the existing unchecked Vue child.
+  return h("span", { class: DMS_TONE_TEXT[tone] }, [value as VNodeChild]);
+}
+
+export const registerPrimitiveTypes = (
+  registerDataType: (dataType: DataType) => void,
+) => {
+  registerDataType({
+    id: "number",
+    formatter: { default: withNumberSuffix(formatNumber) },
+    filterEditorValue: numberFilterEditorValue,
+  });
+  registerDataType({
+    id: "string",
+    formatter: { default: renderText },
+  });
+  registerDataType({
+    id: "price",
+    formatter: { default: withNumberSuffix(formatPrice) },
+    filterEditorValue: numberFilterEditorValue,
+  });
+  registerDataType({
+    id: "percentage",
+    formatter: { default: withNumberSuffix(formatPercentage) },
+    filterEditorValue: numberFilterEditorValue,
+  });
+  registerDataType({
+    id: "string_time",
+
+    formatter: {
+      default: (value, locale) =>
+        isNumber(value)
+          ? formatDuration(Number(value), locale, { precision: "rounded" })
+          : value,
+    },
+  });
+};
+
+const CELL_DATE_FORMAT: Intl.DateTimeFormatOptions = {
+  day: "2-digit",
+  month: "short",
+  year: "numeric",
+};
+
+export const registerDateType = (
+  registerDataType: (dataType: DataType) => void,
+) => {
+  registerDataType({
+    id: "date",
+    formatter: {
+      default: (value, locale) => {
+        const { t } = getAppTranslation();
+        return formatDate(value, locale) ?? t("dms.date.undefined");
+      },
+      cell: (value, locale) => {
+        const { t } = getAppTranslation();
+        return (
+          formatDate(value, locale, CELL_DATE_FORMAT) ?? t("dms.date.undefined")
+        );
+      },
+      is_between: formatDateBetween,
+    },
+    filterEditorValue: dateFilterEditorValue,
+  });
+};
+
+export const registerBooleanType = (
+  registerDataType: (dataType: DataType) => void,
+) => {
+  registerDataType({
+    id: "boolean",
+    formatter: {
+      default: (value, _locale) => renderBoolean(value),
+      is: getBooleanLabel,
+      is_not: getBooleanLabel,
+    },
+  });
+};
+
+export const registerAddressType = (
+  registerDataType: (dataType: DataType) => void,
+) => {
+  registerDataType({
+    id: "address",
+    formatter: {
+      default: (value, _locale) => formatAddress(value),
+    },
+  });
+};

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

@@ -0,0 +1,166 @@
+import type {
+  DataType,
+  DataTypeFormatter,
+} from "#dms-core/app/composables/data-types/useDataType";
+import { isObject } from "#dms-core/app/utils/type-check";
+import UAvatar from "@nuxt/ui/components/Avatar.vue";
+import UBadge from "@nuxt/ui/components/Badge.vue";
+import {
+  buildRelationBadges,
+  MAX_RELATION_BADGES,
+  readRelationLabel,
+} from "./relationBadges";
+import {
+  DEFAULT_RELATION_VALUE_KEY,
+  mapRelationBeforeState,
+  sameRelationValue,
+} from "./relationValue";
+import { NotFoundRelation, relationSelectSource } from "./relationRows";
+import { getAppTranslation } from "../../../../../dms-core/app/composables/translation/useTranslation";
+import { CascaderPath } from "./defaultDisplayComponents";
+
+const DEFAULT_RELATION_LABEL_KEY = "name";
+
+type CellOptions = Parameters<DataTypeFormatter>[2];
+
+type CellValue = Parameters<DataTypeFormatter>[0];
+
+const RELATION_BADGES_CLASS = "inline-flex flex-wrap items-center gap-1";
+
+const RELATION_BADGE_CLASS = "max-w-40";
+
+interface RelationOptions {
+  multiple?: boolean;
+  keyMapping?: { label?: string; avatar?: string; value?: string };
+}
+
+interface CascaderRelationOptions {
+  multiple?: boolean;
+  searchUrl?: string;
+  keyMapping?: {
+    label?: string;
+    value?: string;
+    parent?: string;
+    disabled?: string;
+  };
+}
+
+function renderRelationBadge(label: string, title?: string) {
+  return h(UBadge, {
+    label,
+    title: title ?? label,
+    color: "neutral",
+    variant: "subtle",
+    size: Size.small,
+    class: RELATION_BADGE_CLASS,
+  });
+}
+
+function renderNotFoundRelation(relation: NotFoundRelation) {
+  const { t } = getAppTranslation();
+  return h(
+    "span",
+    { class: "text-muted", title: relation.id },
+    t("dms.form.relation.not_found"),
+  );
+}
+
+function renderRelationBadges(
+  values: unknown[],
+  labelKey: string,
+  valueKey: string,
+) {
+  const { processI18n, t } = getAppTranslation();
+  const notFound = values.filter(
+    (item): item is NotFoundRelation => item instanceof NotFoundRelation,
+  );
+  const { visible, hidden } = buildRelationBadges(
+    values.filter((item) => !(item instanceof NotFoundRelation)),
+    labelKey,
+    MAX_RELATION_BADGES,
+    valueKey,
+  );
+  const badges = [
+    ...visible.map((label) => renderRelationBadge(processI18n(label))),
+    ...notFound.map((relation) =>
+      renderRelationBadge(t("dms.form.relation.not_found"), relation.id),
+    ),
+  ];
+  if (hidden.length > 0) {
+    const hiddenLabels = hidden.map((label) => processI18n(label)).join(", ");
+    badges.push(renderRelationBadge(`+${hidden.length}`, hiddenLabels));
+  }
+  return h("span", { class: RELATION_BADGES_CLASS }, badges);
+}
+
+function renderRelation(value: CellValue, options: CellOptions) {
+  // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Relation options cross the erased plugin boundary; multiple and keyMapping retain unchecked reads.
+  const opts = options as RelationOptions | undefined;
+  const labelKey = opts?.keyMapping?.label || DEFAULT_RELATION_LABEL_KEY;
+  const valueKey = opts?.keyMapping?.value || DEFAULT_RELATION_VALUE_KEY;
+
+  if (opts?.multiple && Array.isArray(value)) {
+    return renderRelationBadges(value, labelKey, valueKey);
+  }
+
+  if (value instanceof NotFoundRelation) return renderNotFoundRelation(value);
+  if (!value || !isObject(value)) return value;
+
+  const valueObject = value;
+  const avatarKey = opts?.keyMapping?.avatar;
+  const label = readRelationLabel(value, labelKey, valueKey);
+
+  if (!avatarKey || !valueObject[avatarKey]) return label;
+
+  return h("span", { class: "inline-flex items-center gap-2" }, [
+    h(UAvatar, {
+      // @ts-expect-error A truthy relation avatar field is still an unvalidated plugin value, wider than UAvatar's src contract; forward it unchanged.
+      src: valueObject[avatarKey],
+      alt: String(label),
+      size: Size.tiny,
+    }),
+    h("span", String(label)),
+  ]);
+}
+
+function renderCascaderRelation(value: CellValue, options: CellOptions) {
+  // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- DataTypeFormatter erases cascader options; preserve their unchecked handoff to CascaderPath.
+  const opts = options as CascaderRelationOptions | undefined;
+
+  if (!value) return value;
+
+  return h(CascaderPath, {
+    value,
+    searchUrl: opts?.searchUrl,
+    keyMapping: opts?.keyMapping,
+  });
+}
+
+export const registerRelationType = (
+  registerDataType: (dataType: DataType) => void,
+) => {
+  registerDataType({
+    id: "relation",
+    formatter: {
+      default: (value, _locale, options) => renderRelation(value, options),
+    },
+    beforeStateMapper: mapRelationBeforeState,
+    isSameValue: sameRelationValue,
+    selectSource: relationSelectSource,
+  });
+};
+
+export const registerCascaderRelationType = (
+  registerDataType: (dataType: DataType) => void,
+) => {
+  registerDataType({
+    id: "cascader_relation",
+    formatter: {
+      default: (value, _locale, options) =>
+        renderCascaderRelation(value, options),
+    },
+    beforeStateMapper: mapRelationBeforeState,
+    isSameValue: sameRelationValue,
+    selectSource: relationSelectSource,
+  });
+};

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

@@ -3,7 +3,10 @@ import {
   readableNumberFormat,
 } from "#dms-core/app/utils/formatter";
 import { defineAsyncComponent, h } from "vue";
-import type { DataType } from "#dms-core/app/composables/data-types/useDataType";
+import type {
+  DataType,
+  DataTypeFormatter,
+} from "#dms-core/app/composables/data-types/useDataType";
 import StatusPill from "../../../components/status-pill/StatusPill.vue";
 import MonoCell from "../../components/table/MonoCell.vue";
 import { getAppComposedText } from "../../../../../dms-core/app/composables/translation/useComposedText";
@@ -43,7 +46,6 @@ interface StatusPillOptions {
   typeOptions?: { items?: SelectItemOption[] };
 }
 
-// A row field that holds no known tone gives way to the column's map.
 function statusPillTone(opts: StatusPillOptions, key: string, row: Row) {
   return readRowTone(row, opts.toneField) ?? opts.tones?.[key] ?? "neutral";
 }
@@ -54,10 +56,14 @@ function statusPillTone(opts: StatusPillOptions, key: string, row: Row) {
  * failure's cause, a composed "retry Oct 10") in the row's tone, else
  * `subTone`, else the pill's.
  */
-function renderStatusPill(value: unknown, options: unknown, row: Row) {
+function renderStatusPill(
+  value: Parameters<DataTypeFormatter>[0],
+  options: Parameters<DataTypeFormatter>[2],
+  row: Row,
+) {
   const { processI18n } = getAppTranslation();
   const { processText } = getAppComposedText();
-  const opts = (options ?? {}) as StatusPillOptions;
+  const opts: StatusPillOptions = options ?? {};
   const key = String(value);
   const item = opts.typeOptions?.items?.find(
     (candidate) => String(candidate.value) === key,
@@ -98,17 +104,13 @@ interface ProgressOptions {
 
 const PERCENT = 100;
 
-const numberOf = (value: unknown): number => {
+const numberOf = (value: Parameters<DataTypeFormatter>[0]): number => {
   const number = Number(value);
   return Number.isFinite(number) ? number : 0;
 };
 
 /** The shares of the bar the done and the failed items fill, in percent. */
-export function progressShares(
-  done: number,
-  failed: number,
-  total: number,
-): { done: number; failed: number } {
+export function progressShares(done: number, failed: number, total: number) {
   if (total <= 0) return { done: 0, failed: 0 };
   const clamp = (share: number) => Math.min(Math.max(share, 0), PERCENT);
   const failedShare = clamp((failed / total) * PERCENT);
@@ -122,7 +124,8 @@ export function progressShares(
  * `progress`: a bar filled with the items done, the failed ones in red at its
  * end, and "done / total"; green once every item is done.
  */
-function renderProgress(options: unknown, row: Row) {
+function renderProgress(options: Parameters<DataTypeFormatter>[2], row: Row) {
+  // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- DataTypeFormatter erases options; field names are consumed without validation in the existing progress formatter.
   const opts = (options ?? {}) as ProgressOptions;
   const done = numberOf(readRowField(row, opts.doneField));
   const total = numberOf(readRowField(row, opts.totalField));
@@ -162,7 +165,8 @@ interface SparklineOptions {
 }
 
 /** `sparkline`: a small line chart of a list of numbers. */
-function renderSparkline(options: unknown, row: Row) {
+function renderSparkline(options: Parameters<DataTypeFormatter>[2], row: Row) {
+  // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- The plugin options contract has no sparkline schema; preserve its unchecked field and tone reads.
   const opts = (options ?? {}) as SparklineOptions;
   const series = readRowField(row, opts.field);
   const values = Array.isArray(series)
@@ -180,9 +184,11 @@ function renderSparkline(options: unknown, row: Row) {
 }
 
 const MS_PER_SECOND = 1000;
-const DURATION_UNIT_MS: Record<string, number> = { ms: 1, s: MS_PER_SECOND };
+const DURATION_UNIT_MS: Record<NonNullable<DurationOptions["unit"]>, number> = {
+  ms: 1,
+  s: MS_PER_SECOND,
+};
 
-// SI symbols read the same in every language; the figure follows the locale.
 const withSymbol = (
   locale: string,
   value: number,
@@ -233,8 +239,10 @@ interface DurationOptions {
 
 type DurationWriter = (ms: number, locale: string) => string;
 
-// A cell is read at a glance: the readable duration is rounded there.
-const DURATION_FORMATS: Record<string, DurationWriter> = {
+const DURATION_FORMATS: Record<
+  NonNullable<DurationOptions["format"]>,
+  DurationWriter
+> = {
   readable: (ms, locale) =>
     formatDuration(ms, locale, { precision: "rounded" }),
   ms: formatMilliseconds,
@@ -245,12 +253,12 @@ const DURATION_FORMATS: Record<string, DurationWriter> = {
  * (`format: "ms"`), in the tone the row gives (`toneField`).
  */
 function renderDuration(
-  value: unknown,
+  value: Parameters<DataTypeFormatter>[0],
   locale: string,
-  options: unknown,
+  options: Parameters<DataTypeFormatter>[2],
   row: Row,
 ) {
-  const opts = (options ?? {}) as DurationOptions;
+  const opts: DurationOptions = options ?? {};
   const ms = numberOf(value) * (DURATION_UNIT_MS[opts.unit ?? "ms"] ?? 1);
   const format =
     DURATION_FORMATS[opts.format ?? "readable"] ?? DURATION_FORMATS.readable!;
@@ -307,6 +315,7 @@ export const registerMetricCellTypes = (
       default: (value, _locale, options) =>
         h(MonoCell, {
           value: String(value),
+          // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- The open plugin options contract does not validate copy; preserve the existing truthiness conversion.
           copy: !!(options as { copy?: boolean } | undefined)?.copy,
           class: CELL_TEXT_CLASS,
         }),

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

@@ -1,12 +1,14 @@
 import type { DataTypeFormatter } from "#dms-core/app/composables/data-types/useDataType";
+import type { formatNumber } from "#dms-core/app/utils/formatter";
+import { isNumber, isString } from "#dms-core/app/utils/type-check";
 import { getAppTranslation } from "../../../../../dms-core/app/composables/translation/useTranslation";
 
 /** A formatter writing a number for a locale, with Intl's options. */
 type NumberFormatter = (
-  value: unknown,
+  value: Parameters<typeof formatNumber>[0],
   locale: string,
-  options?: Intl.NumberFormatOptions,
-) => unknown;
+  options?: Parameters<typeof formatNumber>[2],
+) => ReturnType<typeof formatNumber>;
 
 /** The options of a numeric field a cell reads besides Intl's. */
 interface NumberSuffixOptions {
@@ -14,7 +16,6 @@ interface NumberSuffixOptions {
   suffix?: string;
 }
 
-// Keeps the unit on the line of its number when a cell wraps.
 const UNIT_SEPARATOR = " ";
 
 /**
@@ -32,10 +33,12 @@ export function withNumberSuffix(format: NumberFormatter): DataTypeFormatter {
     const formatted = format(
       value,
       locale,
+      // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- DataTypeFormatter erases plugin options; Intl still receives the original unvalidated object and controls malformed-input behavior.
       options as Intl.NumberFormatOptions | undefined,
     );
+    // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- The suffix option has no runtime schema; preserve its current unchecked read and translation behavior.
     const suffix = (options as NumberSuffixOptions | undefined)?.suffix;
-    if (!suffix || typeof value !== "number" || typeof formatted !== "string") {
+    if (!suffix || !isNumber(value) || !isString(formatted)) {
       return formatted;
     }
     const unit = getAppTranslation().processI18n(suffix);