@antelopejs/dms 0.7.13 → 0.7.14

package/frontend-vue/layers/dms-ui/app/build/composables/period/periodQuery.ts

@@ -7,6 +7,12 @@ import {
   type PeriodPreset,
   type PeriodRange,
 } from "#dms-core/app/composables/period/types";
+import type { PeriodQueryKeys } from "#dms-core/app/composables/period/periodLink";
+
+export {
+  type PeriodQueryKeys,
+  periodQueryKeys,
+} from "#dms-core/app/composables/period/periodLink";
 
 /** The range half of a selector's choice: a preset, or a custom range. */
 export interface PeriodRangeChoice {
@@ -34,16 +40,6 @@ export interface PeriodChoices {
 /** A page URL query, or a selection kept in the preferences. */
 export type PeriodQuery = Record<string, unknown>;
 
-/** The keys one selector reads and writes. */
-export interface PeriodQueryKeys {
-  period: string;
-  compare: string;
-  from: string;
-  to: string;
-  compareFrom: string;
-  compareTo: string;
-}
-
 /** A source the halves of a selection are read from, in order. */
 export interface PeriodSource {
   query: PeriodQuery;
@@ -57,31 +53,12 @@ export interface PeriodSource {
 
 const CUSTOM_PRESET: PeriodPreset = "custom";
 const CUSTOM_COMPARISON: PeriodComparison = "custom";
-const KEY_NAMES: Array<keyof PeriodQueryKeys> = [
-  "period",
-  "compare",
-  "from",
-  "to",
-  "compareFrom",
-  "compareTo",
-];
 const ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
 const ISO_DATE_TIME = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/;
 const MONTH_OFFSET = 1;
 const DATE_PART_LENGTH = 2;
 const YEAR_PART_LENGTH = 4;
 
-/**
- * The keys of selector `id` in the page URL (`<id>.period`), or the bare keys
- * (`period`) of a selection kept on its own.
- */
-export function periodQueryKeys(id?: string): PeriodQueryKeys {
-  const prefix = id ? `${id}.` : "";
-  return Object.fromEntries(
-    KEY_NAMES.map((name) => [name, `${prefix}${name}`]),
-  ) as unknown as PeriodQueryKeys;
-}
-
 function readText(query: PeriodQuery, key: string): string | undefined {
   const raw = query[key];
   const value = Array.isArray(raw) ? raw[0] : raw;

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

@@ -120,9 +120,12 @@ export function resolveTextVariables(
   return hasUrlVariables(resolved) ? undefined : resolved;
 }
 
-// A route token left without a value: `{{params.id}}`, `{{query.workspace}}`.
-const UNRESOLVED_ROUTE_TOKEN = /\{\{(?:params|query)\.\w+(?::\d+)?\}\}/g;
-const UNRESOLVED_ROUTE_VALUE = /^\{\{(?:params|query)\.\w+(?::\d+)?\}\}$/;
+// A route token left without a value: `{{params.id}}`, `{{query.workspace}}`,
+// `{{query.sales.period}}` (a query key may carry dots and dashes, as above).
+const UNRESOLVED_ROUTE_TOKEN =
+  /\{\{(?:params\.\w+(?::\d+)?|query\.[\w.-]+)\}\}/g;
+const UNRESOLVED_ROUTE_VALUE =
+  /^\{\{(?:params\.\w+(?::\d+)?|query\.[\w.-]+)\}\}$/;
 const QUERY_SEPARATOR = "?";
 const FRAGMENT_SEPARATOR = "#";
 const PAIR_SEPARATOR = "&";

package/frontend-vue/layers/dms-ui/app/components/confirm/ConfirmModal.vue

@@ -3,7 +3,7 @@ import { nextTick, useTemplateRef, watch, type FunctionalComponent } from "vue";
 import { DialogDescription, DialogTitle } from "reka-ui";
 import DmsIconWell from "../icon-well/IconWell.vue";
 import DmsModalEscHint from "../../build/components/modal/ModalEscHint.vue";
-import DmsFormRequiredLegend from "../../build/components/form/FormRequiredLegend.vue";
+import DmsFormRequiredLegend from "../form/FormRequiredLegend.vue";
 import {
   ConfirmActionError,
   type ConfirmBodyRender,
@@ -17,6 +17,7 @@ import {
   type ConfirmValues,
 } from "../../composables/confirm/types";
 import { resolveActionError } from "../../build/composables/confirm/actionError";
+import { isConfirmTextMatch } from "../../build/composables/confirm/confirmTextMatch";
 import type { ConfirmDialogField } from "#dms-core/app/types/confirm-dialog";
 import { resolveFieldErrors } from "#dms-core/app/composables/useFieldErrors";
 
@@ -46,6 +47,8 @@ interface ConfirmModalProps {
    * empty or different flags it under the field instead.
    */
   confirmText?: string;
+  /** Compares the typed text with `confirmText` ignoring case. */
+  confirmTextCaseInsensitive?: boolean;
   /**
    * Fields filled in before confirming (labels resolved); their values reach
    * `onConfirm`, and a field error it rejects with shows under its field.
@@ -92,6 +95,7 @@ const props = withDefaults(defineProps<ConfirmModalProps>(), {
   impact: () => [],
   body: undefined,
   confirmText: undefined,
+  confirmTextCaseInsensitive: false,
   fields: () => [],
   component: undefined,
   secondaryAction: undefined,
@@ -225,7 +229,13 @@ const modalContent = computed(() =>
 );
 
 const isTypedMatch = computed(
-  () => !props.confirmText || typedText.value.trim() === props.confirmText,
+  () =>
+    !props.confirmText ||
+    isConfirmTextMatch(
+      typedText.value,
+      props.confirmText,
+      props.confirmTextCaseInsensitive,
+    ),
 );
 
 function close(value: boolean) {

package/frontend-vue/layers/dms-ui/app/components/form/Form.vue

@@ -66,7 +66,7 @@ import {
   type FormRecordLoad,
   trackFormRecordLoad,
 } from "../../build/composables/form/formRecordLoad";
-import DmsFormRequiredLegend from "../../build/components/form/FormRequiredLegend.vue";
+import DmsFormRequiredLegend from "./FormRequiredLegend.vue";
 import DmsFormSections from "../../build/components/form/FormSections.vue";
 
 const REALTIME_PRESENCE_FLAG = "_presence=1";

package/frontend-vue/layers/dms-ui/app/components/form/components/InputNumber.vue

@@ -4,9 +4,14 @@ import type {
   InputNumberEmits,
   InputNumberSlots,
 } from "@nuxt/ui/components/InputNumber.vue";
-import { computed, nextTick } from "vue";
+import { computed, nextTick, watch } from "vue";
 import { useForwardPropsEmits } from "reka-ui";
 import { useControlError } from "../../../build/composables/form/useControlError";
+import {
+  BELOW_MIN_MESSAGE,
+  numberRangeError,
+  numberStepperState,
+} from "../../../build/composables/form/numberRange";
 import {
   numberAdjustment,
   parseTypedNumber,
@@ -18,6 +23,11 @@ defineOptions({ inheritAttrs: false });
 interface InputNumberFieldProps extends InputNumberProps {
   /** Unit after the field ("days"): an i18n key with `$`, or a literal. */
   suffix?: string;
+  /**
+   * `false` keeps a value typed outside `min` / `max` as typed and reports
+   * it as the field's error, instead of clamping it into range on blur.
+   */
+  clamp?: boolean;
 }
 
 interface InputNumberAdjustEmits {
@@ -30,14 +40,29 @@ interface InputNumberAdjustEmits {
 
 type InputNumberFieldEmits = InputNumberEmits & InputNumberAdjustEmits;
 
-const props = defineProps<InputNumberFieldProps>();
+const props = withDefaults(defineProps<InputNumberFieldProps>(), {
+  clamp: true,
+});
 const emits = defineEmits<InputNumberFieldEmits>();
 defineSlots<InputNumberSlots>();
 
 const forwarded = useForwardPropsEmits(props, emits);
+const bounds = computed(() => ({ min: props.min, max: props.max }));
+// Unclamped, the input is not told the bounds (it would clamp to them on
+// blur): its steppers stop there instead, and the range is checked here.
 const inputProps = computed(() => {
-  const { suffix: _suffix, onAdjust: _onAdjust, ...rest } = forwarded.value;
-  return rest;
+  const {
+    suffix: _suffix,
+    clamp: _clamp,
+    onAdjust: _onAdjust,
+    ...rest
+  } = forwarded.value;
+  if (props.clamp) return rest;
+  const { min: _min, max: _max, ...unbounded } = rest;
+  return {
+    ...unbounded,
+    ...numberStepperState(props.modelValue, bounds.value),
+  };
 });
 const { processI18n } = useTranslation();
 const { locale } = useI18n();
@@ -48,16 +73,25 @@ const DEFAULT_ORIENTATION = "vertical";
 // A minus typed or pasted where no negative number is allowed is refused
 // by the field before it shows: it says why, rather than leaving an emptied
 // field to read as never filled.
-const BELOW_MIN = "$dms.field_errors.too_small";
 const { report } = useControlError();
 
 function onIncomingText(event: InputEvent): void {
+  if (!props.clamp) return;
   const text = event.data ?? event.dataTransfer?.getData("text/plain") ?? "";
   if (!text) return;
   const refusesNegative = props.min !== undefined && props.min >= 0;
-  report(refusesNegative && text.includes("-") ? BELOW_MIN : undefined);
+  report(refusesNegative && text.includes("-") ? BELOW_MIN_MESSAGE : undefined);
 }
 
+watch(
+  () =>
+    props.clamp ? undefined : numberRangeError(props.modelValue, bounds.value),
+  (message) => {
+    if (!props.clamp) report(message);
+  },
+  { immediate: true },
+);
+
 // What was typed since the field last settled, and the value it settled on.
 let typedText: string | null = null;
 let settledValue: number | null | undefined;
@@ -87,7 +121,12 @@ async function settle(event: Event): Promise<void> {
   await nextTick();
   const typed = parseTypedNumber(text, props.locale ?? locale.value);
   const kept = settledValue === undefined ? props.modelValue : settledValue;
-  const adjustment = numberAdjustment(typed, kept, props);
+  const adjustment = numberAdjustment(
+    typed,
+    kept,
+    // Unclamped, only the step changes what was typed.
+    props.clamp ? bounds.value : {},
+  );
   if (!adjustment) return;
   emits("adjust", adjustment);
   redraw(input);

package/frontend-vue/layers/dms-ui/app/components/top-list/TopListCard.vue

@@ -14,6 +14,10 @@ import { useChartFetch } from "../../composables/chart/useChartFetch";
 import { formatValue } from "../../composables/chart/formatValue";
 import { resolveSparklineAccent } from "../../composables/chart/resolveSparklineAccent";
 import { usePeriodScope } from "#dms-core/app/composables/period/usePeriodScope";
+import {
+  hasUrlVariables,
+  resolveLinkVariables,
+} from "../../build/utils/urlVariables";
 import type {
   TopListCardResponse,
   TopListItem,
@@ -126,7 +130,23 @@ const { data, isLoading } = useChartFetch<TopListCardResponse>({
   watchSource: () => watchKey.value,
 });
 
-const items = computed<TopListItem[]>(() => data.value?.items ?? []);
+// A row's link may name the page it is shown on (`{{query.website}}`), so a
+// list served once leads on with the page's own context, as the URL changes.
+// The route is only read for a list holding such a link.
+function withPageValues(item: TopListItem): TopListItem {
+  if (!item.to || !hasUrlVariables(item.to)) return item;
+  return {
+    ...item,
+    to: resolveLinkVariables(item.to, {
+      routeParams: props.routeParams,
+      routeQuery: useDmsRoute().query as Record<string, unknown>,
+    }),
+  };
+}
+
+const items = computed<TopListItem[]>(() =>
+  (data.value?.items ?? []).map(withPageValues),
+);
 const hasAnyIcon = computed(() =>
   items.value.some((item) => Boolean(item.icon || item.avatar)),
 );

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

@@ -1,3 +1,4 @@
 export * from "./types";
 export * from "./useConfirm";
+export * from "./useConfirmFrom";
 export * from "./usePresenceEditWarning";

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

@@ -70,6 +70,26 @@ export interface ConfirmOptions
   ) => Promise<void | boolean | ConfirmPartialOutcome>;
 }
 
+/**
+ * How `useConfirmFrom().confirmFrom(url, options)` asks a dialog the server
+ * words, as a declarative action's `confirm: { from }` does.
+ */
+export interface ConfirmFromOptions {
+  /**
+   * Fill-ins of the URL's `{placeholders}` and of the dialog's texts (a
+   * record's fields); the dialog's own `params` win in its texts.
+   */
+  params?: Record<string, unknown>;
+  /** What the dialog leaves out (a colour, an icon, a confirm label). */
+  fallback?: Partial<ConfirmOptions>;
+  /**
+   * Runs the action from inside the dialog with its fields' values, as
+   * {@link ConfirmOptions.onConfirm}; left out, run it once `confirmFrom`
+   * resolved `true`.
+   */
+  onConfirm?: ConfirmOptions["onConfirm"];
+}
+
 /** A secondary button of the confirm modal: its text resolved, its handler. */
 export interface ConfirmSecondaryAction {
   label: string;

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

@@ -0,0 +1,32 @@
+import { useActionConfirm } from "../../build/composables/confirm/useActionConfirm";
+import type { ConfirmFromOptions } from "./types";
+
+/**
+ * Opens the confirmation dialog a route words (a `ConfirmDialogSerialized`,
+ * see `serializeConfirmDialog`), as a declarative action's
+ * `confirm: { from }` does: the URL is read, its texts resolved, then the
+ * standard confirm dialog shown. A failed read is a toast and resolves
+ * `false`.
+ *
+ * @returns `confirmFrom(url, options)`, resolving `true` when the user
+ *   confirmed — never for a `blocked` dialog, which only explains
+ */
+export function useConfirmFrom() {
+  const { confirmAction } = useActionConfirm();
+
+  function confirmFrom(
+    from: string,
+    options: ConfirmFromOptions = {},
+  ): Promise<boolean> {
+    return confirmAction(
+      { from },
+      {
+        row: options.params,
+        fallback: options.fallback,
+        run: options.onConfirm,
+      },
+    );
+  }
+
+  return { confirmFrom };
+}

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

@@ -721,10 +721,10 @@ export const useForm = (props: FormProps, options: UseFormOptions = {}) => {
         // them: the field shows which ones to fix.
         message: entry.values?.length
           ? t("dms.field_errors.with_values", {
-              message: processApiMessage(entry.message),
+              message: processApiMessage(entry.message, entry.params),
               values: entry.values.join(", "),
             })
-          : processApiMessage(entry.message),
+          : processApiMessage(entry.message, entry.params),
         values: entry.values,
         path: entry.path,
       })),

package/frontend-vue/tests/confirm-from.test.ts

@@ -0,0 +1,101 @@
+// @vitest-environment jsdom
+/**
+ * `useConfirmFrom().confirmFrom(url)` opens the dialog a route words, as a
+ * declarative action's `confirm: { from }` does, for code of a module's own
+ * (a custom page, a block's button).
+ */
+import { createApp, defineComponent, h, type App } from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { interpolateUrl } from "../layers/dms-core/app/utils/url-interpolation";
+import { useConfirmFrom } from "../layers/dms-ui/app/composables/confirm/useConfirmFrom";
+import { isConfirmTextMatch } from "../layers/dms-ui/app/build/composables/confirm/confirmTextMatch";
+
+const authFetch = vi.fn();
+const confirm = vi.fn(async () => true);
+const addToast = vi.fn();
+let app: App | undefined;
+
+function mountConfirmFrom() {
+  let api: ReturnType<typeof useConfirmFrom> | undefined;
+  app = createApp(
+    defineComponent({
+      setup() {
+        api = useConfirmFrom();
+        return () => h("div");
+      },
+    }),
+  );
+  app.mount(document.createElement("div"));
+  return api!;
+}
+
+beforeEach(() => {
+  authFetch.mockReset();
+  confirm.mockClear();
+  addToast.mockClear();
+  const fetch = Object.assign(authFetch, { raw: vi.fn() });
+  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: fetch }));
+  vi.stubGlobal("useConfirm", () => ({ confirm }));
+  vi.stubGlobal("useToast", () => ({ add: addToast }));
+  vi.stubGlobal("useI18n", () => ({
+    t: (key: string, params?: Record<string, unknown>) =>
+      params?.name ? `${key}(${String(params.name)})` : key,
+  }));
+  vi.stubGlobal("interpolateUrl", interpolateUrl);
+  vi.stubGlobal("Color", { error: "error" });
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  vi.unstubAllGlobals();
+});
+
+describe("confirmFrom", () => {
+  it("reads the dialog from the URL filled with the params and shows it", async () => {
+    authFetch.mockResolvedValue({
+      title: "$campaigns.delete_title",
+      color: "error",
+    });
+    const onConfirm = vi.fn(async () => undefined);
+    const confirmed = await mountConfirmFrom().confirmFrom(
+      "/api/campaigns/{id}/delete-confirm",
+      {
+        params: { id: "c1", name: "Spring" },
+        fallback: { icon: "i-ph-trash" },
+        onConfirm,
+      },
+    );
+    expect(confirmed).toBe(true);
+    expect(authFetch).toHaveBeenCalledWith("/api/campaigns/c1/delete-confirm");
+    expect(confirm).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: "campaigns.delete_title(Spring)",
+        color: "error",
+        icon: "i-ph-trash",
+        onConfirm,
+      }),
+    );
+  });
+
+  it("never resolves true for a blocked dialog", async () => {
+    authFetch.mockResolvedValue({ title: "Cannot delete", blocked: true });
+    expect(await mountConfirmFrom().confirmFrom("/api/x")).toBe(false);
+  });
+
+  it("toasts a failed read and resolves false", async () => {
+    authFetch.mockRejectedValue(new Error("down"));
+    expect(await mountConfirmFrom().confirmFrom("/api/x")).toBe(false);
+    expect(confirm).not.toHaveBeenCalled();
+    expect(addToast).toHaveBeenCalledOnce();
+  });
+});
+
+describe("isConfirmTextMatch", () => {
+  it("compares the trimmed text, ignoring case only when asked", () => {
+    expect(isConfirmTextMatch(" ACME ", "ACME")).toBe(true);
+    expect(isConfirmTextMatch("acme", "ACME")).toBe(false);
+    expect(isConfirmTextMatch("acme", "ACME", true)).toBe(true);
+    expect(isConfirmTextMatch("acmé", "ACME", true)).toBe(false);
+  });
+});

package/frontend-vue/tests/confirm-typed-text.test.ts

@@ -171,6 +171,41 @@ it("flags an empty or different typed text instead of disabling confirm", async
   expect(closed).toHaveBeenCalledWith(true);
 });
 
+it("matches the typed text ignoring case when asked", async () => {
+  const onConfirm = vi.fn(async () => undefined);
+  mount({
+    title: "Delete?",
+    confirmLabel: "Delete",
+    confirmText: "Acme Corp",
+    confirmTextCaseInsensitive: true,
+    onConfirm,
+  });
+  await flush();
+
+  await type("acme corp");
+  confirmButton().click();
+  await flush();
+  expect(typedError()).toBeUndefined();
+  expect(onConfirm).toHaveBeenCalledOnce();
+});
+
+it("keeps the case-sensitive match by default", async () => {
+  const onConfirm = vi.fn(async () => undefined);
+  mount({
+    title: "Delete?",
+    confirmLabel: "Delete",
+    confirmText: "Acme Corp",
+    onConfirm,
+  });
+  await flush();
+
+  await type("acme corp");
+  confirmButton().click();
+  await flush();
+  expect(typedError()).toBe('dms.confirm.type_mismatch {"text":"Acme Corp"}');
+  expect(onConfirm).not.toHaveBeenCalled();
+});
+
 it("runs the body check with the typed one and stays open when it fails", async () => {
   const validate = vi.fn(() => false);
   const onConfirm = vi.fn(async () => undefined);