@antelopejs/dms 0.5.6 → 0.6.1

package/frontend-vue/layers/dms-ui/app/build/composables/chart/sparklinePath.ts

@@ -0,0 +1,81 @@
+/** A point in sparkline viewBox coordinates. */
+export interface SparkPoint {
+  x: number;
+  y: number;
+}
+
+/** Box the values are projected into, with a vertical inset for the stroke. */
+export interface SparkBox {
+  width: number;
+  height: number;
+  padding: number;
+}
+
+/** Catmull-Rom to Bézier divisor: 6 gives the uniform, non-overshooting curve. */
+const CATMULL_ROM_DIVISOR = 6;
+const COORDINATE_PRECISION = 2;
+
+/** Project values onto the box, highest value at the top. */
+export function projectSparkPoints(
+  values: number[],
+  box: SparkBox,
+): SparkPoint[] {
+  if (values.length === 0) return [];
+  const min = Math.min(...values);
+  const span = Math.max(...values) - min || 1;
+  const denominator = values.length > 1 ? values.length - 1 : 1;
+  const drawable = box.height - box.padding * 2;
+  return values.map((value, index) => ({
+    x: (index / denominator) * box.width,
+    y: box.height - box.padding - ((value - min) / span) * drawable,
+  }));
+}
+
+function format(point: SparkPoint): string {
+  return `${point.x.toFixed(COORDINATE_PRECISION)},${point.y.toFixed(COORDINATE_PRECISION)}`;
+}
+
+function controlPoints(
+  points: SparkPoint[],
+  index: number,
+): [SparkPoint, SparkPoint] {
+  const current = points[index]!;
+  const next = points[index + 1]!;
+  const previous = points[index - 1] ?? current;
+  const afterNext = points[index + 2] ?? next;
+  return [
+    {
+      x: current.x + (next.x - previous.x) / CATMULL_ROM_DIVISOR,
+      y: current.y + (next.y - previous.y) / CATMULL_ROM_DIVISOR,
+    },
+    {
+      x: next.x - (afterNext.x - current.x) / CATMULL_ROM_DIVISOR,
+      y: next.y - (afterNext.y - current.y) / CATMULL_ROM_DIVISOR,
+    },
+  ];
+}
+
+/** Smooth line through every point (v2 sparkline curve). */
+export function smoothSparkPath(points: SparkPoint[]): string {
+  if (points.length === 0) return "";
+  const segments = [`M${format(points[0]!)}`];
+  for (let index = 0; index < points.length - 1; index++) {
+    const [first, second] = controlPoints(points, index);
+    segments.push(
+      `C${format(first)} ${format(second)} ${format(points[index + 1]!)}`,
+    );
+  }
+  return segments.join(" ");
+}
+
+/** The line path closed down to the baseline, for the area under it. */
+export function closeSparkArea(
+  line: string,
+  points: SparkPoint[],
+  height: number,
+): string {
+  if (!line) return "";
+  const first = points[0]!;
+  const last = points[points.length - 1]!;
+  return `${line} L${last.x.toFixed(COORDINATE_PRECISION)},${height} L${first.x.toFixed(COORDINATE_PRECISION)},${height} Z`;
+}

package/frontend-vue/layers/dms-ui/app/build/composables/clipboard/useCopyFeedback.ts

@@ -0,0 +1,49 @@
+import { onScopeDispose, ref, type Ref } from "vue";
+
+/** How long a copy button says "Copied" before it offers to copy again. */
+const COPIED_FEEDBACK_MS = 1600;
+const COPY_ICON = "i-ph-copy";
+const COPIED_ICON = "i-ph-check";
+
+/** What `useCopyFeedback` offers a copy button. */
+export interface CopyFeedback<Key> {
+  /** Copies the text, then marks `key` copied for a while. */
+  copyText: (text: string, key: Key) => Promise<void>;
+  isCopied: (key: Key) => boolean;
+  /** The copy icon, or the check while `key` reads as copied. */
+  iconOf: (key: Key) => string;
+  /** Forgets the last copy. */
+  reset: () => void;
+}
+
+/**
+ * Copies to the clipboard and remembers, for a moment, what was copied:
+ * a list of copy buttons (keyed by what each copies) or a single one.
+ *
+ * @param feedbackMs How long a copy reads as copied; `Infinity` keeps it
+ *   until `reset` (a copy that acknowledges something, such as backup codes)
+ */
+export function useCopyFeedback<Key = true>(
+  feedbackMs: number = COPIED_FEEDBACK_MS,
+): CopyFeedback<Key> {
+  const copiedKey = ref<Key | null>(null) as Ref<Key | null>;
+  let timer: ReturnType<typeof setTimeout> | undefined;
+
+  function reset(): void {
+    clearTimeout(timer);
+    copiedKey.value = null;
+  }
+
+  async function copyText(text: string, key: Key): Promise<void> {
+    await navigator.clipboard.writeText(text);
+    clearTimeout(timer);
+    copiedKey.value = key;
+    if (Number.isFinite(feedbackMs)) timer = setTimeout(reset, feedbackMs);
+  }
+
+  const isCopied = (key: Key) => copiedKey.value === key;
+  const iconOf = (key: Key) => (isCopied(key) ? COPIED_ICON : COPY_ICON);
+
+  onScopeDispose(() => clearTimeout(timer));
+  return { copyText, isCopied, iconOf, reset };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/confirm/actionError.ts

@@ -0,0 +1,142 @@
+import {
+  readTranslationKey,
+  type I18nTranslate,
+} from "#dms-core/app/composables/translation/useTranslation";
+
+/** Shown when the request never reached the server (offline, DNS, CORS…). */
+export const ACTION_ERROR_NETWORK_KEY = "error.network.description";
+/** Shown for a 401/403 whose body is not a user-facing message. */
+export const ACTION_ERROR_FORBIDDEN_KEY = "dms.action_error.forbidden";
+/** Shown when the server's message is missing or not meant for users. */
+export const ACTION_ERROR_GENERIC_KEY = "dms.action_error.generic";
+
+const HTTP_UNAUTHORIZED = 401;
+const HTTP_FORBIDDEN = 403;
+const HTTP_SERVER_ERROR = 500;
+// Longer than a sentence or two: a dump, not a message.
+const MAX_MESSAGE_LENGTH = 300;
+// `error.not_found`, `$page.settings.invites.error.expired`.
+const KEY_PATTERN = /^\$?[\w-]+(\.[\w-]+)+$/;
+// JSON, HTML, a stack trace or a thrown `TypeError: …`.
+const TECHNICAL_PATTERNS = [
+  /^\s*[[{<]/,
+  /\n\s*at\s/,
+  /^\s*[A-Z]\w*Error\b/,
+  /<no response>/,
+];
+// What browsers say when `fetch` itself fails.
+const NETWORK_MESSAGES = [/failed to fetch/i, /networkerror/i, /load failed/i];
+
+interface FetchErrorLike {
+  name?: string;
+  message?: string;
+  statusCode?: number;
+  status?: number;
+  response?: { status?: number };
+  data?: unknown;
+}
+
+const isObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null;
+
+// An ofetch `FetchError` (or anything shaped like a failed request): its own
+// `message` is the raw "[DELETE] "/api/…": 403 Forbidden" line, never shown.
+const isFetchError = (error: unknown): error is FetchErrorLike =>
+  isObject(error) &&
+  (error.name === "FetchError" ||
+    "statusCode" in error ||
+    "response" in error ||
+    "data" in error);
+
+const statusOf = (error: FetchErrorLike): number | undefined =>
+  error.statusCode ?? error.status ?? error.response?.status;
+
+/** The message the server put in the error body, when it sent one. */
+const serverMessageOf = (error: FetchErrorLike): string | undefined => {
+  const { data } = error;
+  if (typeof data === "string") return data;
+  if (isObject(data) && typeof data.message === "string") return data.message;
+  return undefined;
+};
+
+const isTechnical = (text: string) =>
+  text.length > MAX_MESSAGE_LENGTH ||
+  TECHNICAL_PATTERNS.some((pattern) => pattern.test(text));
+
+/**
+ * `text` as the user should read it: a translated i18n key, or plain prose
+ * as it came. Undefined when it is not user-facing (an untranslated key, JSON,
+ * a stack trace…), for the caller to fall back on a generic message.
+ */
+const userFacingText = (
+  text: string | undefined,
+  translate: I18nTranslate,
+): string | undefined => {
+  const trimmed = text?.trim();
+  if (!trimmed) return undefined;
+  const { key } = readTranslationKey(trimmed);
+  if (KEY_PATTERN.test(trimmed)) {
+    const translated = translate(key, {});
+    return translated !== key ? translated : undefined;
+  }
+  return isTechnical(trimmed) ? undefined : trimmed;
+};
+
+const translateKey = (translate: I18nTranslate, key: string) =>
+  translate(key, {});
+
+/**
+ * The message telling a user why an action failed, from whatever the request
+ * threw: the server's own message when it is user-facing (an i18n key, or
+ * plain text on a 4xx), else a translated fallback: the request never got
+ * through, it was refused for lack of permission, or something went wrong.
+ * Never a stack trace, raw JSON or an ofetch error line.
+ */
+export function resolveActionError(
+  error: unknown,
+  translate: I18nTranslate,
+): string {
+  if (isFetchError(error)) {
+    const status = statusOf(error);
+    if (status === undefined) {
+      return translateKey(translate, ACTION_ERROR_NETWORK_KEY);
+    }
+    const raw = serverMessageOf(error);
+    const isForbidden =
+      status === HTTP_UNAUTHORIZED || status === HTTP_FORBIDDEN;
+    // Plain text on a refusal or a crash is the server talking to developers
+    // ("Forbidden: missing permission …", "Archive field not configured"):
+    // only a translated key gets through there.
+    if (isForbidden || status >= HTTP_SERVER_ERROR) {
+      const translated =
+        raw && KEY_PATTERN.test(raw.trim())
+          ? userFacingText(raw, translate)
+          : undefined;
+      return (
+        translated ??
+        translateKey(
+          translate,
+          isForbidden ? ACTION_ERROR_FORBIDDEN_KEY : ACTION_ERROR_GENERIC_KEY,
+        )
+      );
+    }
+    return (
+      userFacingText(raw, translate) ??
+      translateKey(translate, ACTION_ERROR_GENERIC_KEY)
+    );
+  }
+
+  const message =
+    error instanceof Error
+      ? error.message
+      : typeof error === "string"
+        ? error
+        : undefined;
+  if (message && NETWORK_MESSAGES.some((pattern) => pattern.test(message))) {
+    return translateKey(translate, ACTION_ERROR_NETWORK_KEY);
+  }
+  return (
+    userFacingText(message, translate) ??
+    translateKey(translate, ACTION_ERROR_GENERIC_KEY)
+  );
+}

package/frontend-vue/layers/dms-ui/app/build/composables/confirm/confirmDialogTexts.ts

@@ -0,0 +1,66 @@
+import type { ConfirmDialog } from "#dms-core/app/types/confirm-dialog";
+import { readTranslationKey } from "#dms-core/app/composables/translation/useTranslation";
+import type { ConfirmOptions } from "../../../composables/confirm/types";
+import { processFieldI18n } from "../../utils/fieldOptionsI18n";
+import { interpolateLiteral } from "../../utils/literalText";
+
+/** `t` as vue-i18n gives it: named parameters, then the plural count. */
+export type ConfirmTranslate = (
+  key: string,
+  params: Record<string, unknown>,
+  plural?: number,
+) => string;
+
+/**
+ * One text of a confirmation dialog: an i18n key (with `$`) translated with
+ * `params` — pluralized on `params.count` when it is a number — or a literal
+ * filled in with the same `params`.
+ */
+export function resolveConfirmText(
+  text: string,
+  params: Record<string, unknown>,
+  t: ConfirmTranslate,
+): string {
+  const { isKey, key } = readTranslationKey(text);
+  if (!isKey) return interpolateLiteral(text, params);
+  return typeof params.count === "number"
+    ? t(key, params, params.count)
+    : t(key, params);
+}
+
+/**
+ * A confirmation dialog with its texts resolved, ready for `useConfirm()`:
+ * interpolated with the row's fields (`row`) and the dialog's own `params`.
+ */
+export function resolveConfirmDialog(
+  dialog: ConfirmDialog,
+  row: Record<string, unknown> | undefined,
+  t: ConfirmTranslate,
+): ConfirmOptions {
+  const params = { ...row, ...dialog.params };
+  const text = (value: string | undefined) =>
+    value === undefined ? undefined : resolveConfirmText(value, params, t);
+  const { params: _params, ...rest } = dialog;
+  return {
+    ...rest,
+    title: text(dialog.title) ?? "",
+    description: text(dialog.description),
+    confirmLabel: text(dialog.confirmLabel),
+    cancelLabel: text(dialog.cancelLabel),
+    impact: dialog.impact?.map((entry) => ({
+      ...entry,
+      label: text(entry.label) ?? "",
+      count: typeof entry.count === "string" ? text(entry.count) : entry.count,
+    })),
+    fields: dialog.fields?.map((field) =>
+      processFieldI18n(
+        {
+          ...field,
+          label: text(field.label),
+          description: text(field.description),
+        },
+        (key) => resolveConfirmText(key, params, t),
+      ),
+    ),
+  };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/confirm/useActionConfirm.ts

@@ -0,0 +1,102 @@
+import type {
+  ActionConfirm,
+  ConfirmDialog,
+} from "#dms-core/app/types/confirm-dialog";
+import { isConfirmFrom } from "#dms-core/app/types/confirm-dialog";
+import { resolveActionError } from "./actionError";
+import type {
+  ConfirmOptions,
+  ConfirmPartialOutcome,
+  ConfirmValues,
+} from "../../../composables/confirm/types";
+import {
+  type ConfirmTranslate,
+  resolveConfirmDialog,
+} from "./confirmDialogTexts";
+
+/** What an action asks its confirmation with. */
+export interface ActionConfirmRequest {
+  /** The row the action targets: its fields fill the texts and `from` URL. */
+  row?: Record<string, unknown>;
+  /** Fill-ins of a `from` URL besides the row's fields (`{id}`). */
+  urlParams?: Record<string, unknown>;
+  /**
+   * The look of the action, where the dialog leaves it out (an archive's
+   * amber, a delete's trash icon).
+   */
+  fallback?: Partial<ConfirmOptions>;
+  /**
+   * Runs the action from inside the dialog with its fields' values: a
+   * refusal stays on screen, under its field when it names one. Without it,
+   * the caller runs the action once the confirmation resolved `true`.
+   */
+  run?: (
+    values: ConfirmValues,
+  ) => Promise<void | boolean | ConfirmPartialOutcome>;
+}
+
+/**
+ * Asks an action's confirmation (backend `confirm`): a fixed dialog, or the
+ * one a `{ from }` URL answers for the row.
+ */
+export function useActionConfirm() {
+  const { confirm } = useConfirm();
+  const { $authFetch } = useAuthFetch();
+  const { t } = useI18n();
+  const toast = useToast();
+
+  const loadDialog = async (
+    declared: ActionConfirm,
+    request: ActionConfirmRequest,
+  ): Promise<ConfirmDialog | undefined> => {
+    if (!isConfirmFrom(declared)) return declared;
+    const url = interpolateUrl(declared.from, {
+      ...request.row,
+      ...request.urlParams,
+    });
+    try {
+      return await $authFetch<ConfirmDialog>(url);
+    } catch (error) {
+      toast.add({
+        color: Color.error,
+        icon: "i-ph-warning-circle",
+        title: t("dms.form.error_title"),
+        description: resolveActionError(error, t),
+      });
+      return undefined;
+    }
+  };
+
+  /**
+   * Asks the confirmation, running `request.run` inside it; resolves whether
+   * the user confirmed (never for a `blocked` dialog, which only explains).
+   */
+  const confirmAction = async (
+    declared: ActionConfirm,
+    request: ActionConfirmRequest = {},
+  ): Promise<boolean> => {
+    const dialog = await loadDialog(declared, request);
+    if (!dialog) return false;
+    const options = resolveConfirmDialog(
+      dialog,
+      request.row,
+      t as ConfirmTranslate,
+    );
+    const isConfirmed = await confirm({
+      ...request.fallback,
+      ...withoutUndefined(options),
+      title: options.title,
+      onConfirm: dialog.blocked ? undefined : request.run,
+    });
+    return isConfirmed && !dialog.blocked;
+  };
+
+  return { confirmAction };
+}
+
+// A text the dialog leaves out keeps the action's own (its fallback).
+function withoutUndefined<T extends object>(value: T): Partial<T> {
+  return Object.fromEntries(
+    Object.entries(value).filter(([, entry]) => entry !== undefined),
+  ) as Partial<T>;
+}

package/frontend-vue/layers/dms-ui/app/build/composables/containers/context.ts

@@ -0,0 +1,16 @@
+import type { InjectionKey } from "vue";
+
+/** What a DynamicDrawer or DynamicModal tells the content it renders. */
+export interface DmsContainerContext {
+  /** The id its leave guards are registered under. */
+  id: string;
+  /**
+   * Closes it the way its X does: its guards run first (unsaved changes ask),
+   * so a form's Cancel button never skips them.
+   */
+  close: () => Promise<void>;
+}
+
+/** Provided by DynamicDrawer and DynamicModal to their body. */
+export const DMS_CONTAINER_KEY: InjectionKey<DmsContainerContext> =
+  Symbol("dms:container");

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

@@ -0,0 +1,39 @@
+import { get } from "@nuxt/ui/runtime/utils/index.js";
+
+// What the cell data types share: reading a sibling field off the row, and
+// the text tones a cell takes.
+
+export type Row = Record<string, unknown> | undefined;
+
+export const readRowField = (row: Row, field: string | undefined): unknown =>
+  field && row ? get(row, field) : undefined;
+
+export const stringOf = (value: unknown): string | undefined =>
+  value === null || value === undefined || value === ""
+    ? undefined
+    : String(value);
+
+/** Truthy the way a status reads it: a non-empty list, a set flag. */
+export const isSet = (value: unknown): boolean => {
+  if (Array.isArray(value)) return value.length > 0;
+  if (typeof value === "string") return value !== "" && value !== "false";
+  return Boolean(value);
+};
+
+// Text tones a cell data type can take, as literal classes for Tailwind.
+const CELL_TONES: Record<string, string> = {
+  default: "text-toned",
+  toned: "text-toned",
+  highlighted: "text-highlighted",
+  muted: "text-muted",
+  dimmed: "text-dimmed",
+  success: "text-success",
+  warning: "text-warning",
+  error: "text-error",
+  info: "text-info",
+  primary: "text-primary",
+};
+export const toneClass = (
+  tone: string | undefined,
+  fallback = "default",
+): string => CELL_TONES[tone ?? fallback] ?? CELL_TONES[fallback]!;