@antelopejs/dms 0.7.21 → 0.8.1

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

@@ -6,10 +6,10 @@
  *   it has somewhere to go back to, then "Unsaved changes" with Discard and
  *   Save.
  * - `action`: a form that does something each time (send a notification,
- *   invite someone, run a job). Reset and the form's own submit label once a
- *   value changed; untouched — pre-filled or not —, no buttons on a page, and
- *   Cancel beside a held submit in a drawer or a modal. It empties after a
- *   successful submit.
+ *   invite someone, run a job). Its own submit label, always ready: what it
+ *   holds untouched, its defaults included, is a payload too. Beside it,
+ *   Reset once a value changed, Cancel before that in a drawer or a modal.
+ *   It empties after a successful submit.
  */
 export type FormKind = "record" | "action";
 
@@ -83,21 +83,25 @@ function recordSaveBar(context: SaveBarContext): SaveBarState {
 }
 
 /**
- * An action form's bar: Reset and its submit once a value changed. Before
- * that, a form in a drawer or a modal offers Cancel beside its held submit —
- * the modal's only way out and the proof it sends something —, a page form
- * nothing; a form nothing in which can be changed, its submit alone.
+ * An action form's bar: its submit, never held, so a pre-filled form sends as
+ * it is. Beside it, Reset once a value changed; before that, Cancel in a
+ * drawer or a modal, its only way out. A form nothing in which can be changed
+ * has nothing to reset.
  */
 function actionSaveBar(context: SaveBarContext): SaveBarState {
-  const bar = { showsStatus: false, showsSubmit: true, isHidden: false };
-  if (!context.resettable) return { ...bar, isSubmitHeld: false };
-  if (context.dirty) {
-    return { ...bar, secondary: "discard", isSubmitHeld: false };
+  const bar: SaveBarState = {
+    showsStatus: false,
+    showsSubmit: true,
+    isSubmitHeld: false,
+    isHidden: false,
+  };
+  if (context.dirty && context.resettable) {
+    return { ...bar, secondary: "discard" };
   }
-  if (!context.cancellable) {
-    return { ...HIDDEN_BAR, showsStatus: false };
+  if (!context.dirty && context.cancellable) {
+    return { ...bar, secondary: "cancel" };
   }
-  return { ...bar, secondary: "cancel", isSubmitHeld: true };
+  return bar;
 }
 
 const SAVE_BARS: Record<FormKind, (context: SaveBarContext) => SaveBarState> = {

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

@@ -5,9 +5,33 @@ import { HTTP_FORBIDDEN } from "#dms-core/app/utils/http-status";
 /**
  * Why a form could not load the record it edits: `forbidden` when the server
  * refused the caller the read (a role that may edit rows but not view them),
- * `error` for anything else (a network failure, a server error, a row gone).
+ * `missing` when its address lacks the record's id (a page reached without
+ * its `?id=`), `error` for anything else (a network failure, a server error,
+ * a row gone).
  */
-export type FormLoadFailure = "forbidden" | "error";
+export type FormLoadFailure = "forbidden" | "missing" | "error";
+
+/** What a form knows of the record it is about, as far as `missing` goes. */
+export interface FormRecordAddress {
+  requiresRecord?: boolean;
+  fetchUrl?: string;
+  /** `fetchUrl` with its route values filled; unset while one is missing. */
+  resolvedFetchUrl?: string;
+}
+
+/**
+ * `missing` for a form about one record whose address names no record yet:
+ * its fields would only hold their defaults, which read as a record.
+ */
+export function missingRecordFailure(
+  address: FormRecordAddress,
+): FormLoadFailure | null {
+  const isMissing =
+    !!address.requiresRecord &&
+    !!address.fetchUrl &&
+    !address.resolvedFetchUrl;
+  return isMissing ? "missing" : null;
+}
 
 /** The cached load of a form's record (`useDmsAsyncData`), as far as it is read. */
 export interface FormLoadSource<T> {

package/frontend-vue/layers/dms-ui/app/build/composables/page/pageUrlValues.ts

@@ -0,0 +1,41 @@
+import {
+  namesPageValue,
+  type ReplaceUrlVariablesContext,
+  resolveLinkVariables,
+  resolveUrlVariables,
+} from "../../utils/urlVariables";
+
+/**
+ * The values of the page being shown that a `{{params.X}}` / `{{query.X}}`
+ * token names: the route parameters of the DMS page matching the URL, and its
+ * query. Read when called, so it follows the URL as it changes.
+ */
+export function currentPageUrlValues(): ReplaceUrlVariablesContext {
+  const route = useDmsRoute();
+  return {
+    routeParams: useSiteLayout().findMatchingRoute(route.path)?.params,
+    routeQuery: route.query as Record<string, unknown>,
+  };
+}
+
+/**
+ * A link declared on a block (`to`) with the page's tokens filled, as a page
+ * header button's: a query pair the page has no value for is left out. The
+ * route is only read for a link holding a token.
+ */
+export function pageLink(to: string): string;
+export function pageLink(to: string | undefined): string | undefined;
+export function pageLink(to: string | undefined): string | undefined {
+  if (!to || !namesPageValue(to)) return to;
+  return resolveLinkVariables(to, currentPageUrlValues());
+}
+
+/**
+ * A route a field or block requests (`searchUrl`, `rotateUrl`, …) with the
+ * page's tokens filled, or `undefined` while one has no value, as a block's
+ * `fetchUrl`.
+ */
+export function pageRequestUrl(url: string | undefined): string | undefined {
+  if (!url || !namesPageValue(url)) return url;
+  return resolveUrlVariables(url, currentPageUrlValues());
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/registerDefaultFunctions.ts

@@ -1,5 +1,5 @@
 import type { LocationQueryValue } from "#dms/frontend-module";
-import { replaceUrlVariables } from "../../utils/urlVariables";
+import { resolveLinkVariables } from "../../utils/urlVariables";
 
 type RouteQuery = Record<string, LocationQueryValue | LocationQueryValue[]>;
 
@@ -23,7 +23,7 @@ export function resolveFormSuccessTarget(
   { url, preserveQuery }: FormSuccessParams,
   route: FormSuccessRoute,
 ): { path: string; query?: RouteQuery } {
-  const path = replaceUrlVariables(url, {
+  const path = resolveLinkVariables(url, {
     routeParams: route.params,
     routeQuery: route.query,
   });

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableRows.ts

@@ -1,5 +1,6 @@
 import { get } from "@nuxt/ui/runtime/utils/index.js";
 import { computed } from "vue";
+import { interpolateUrl } from "#dms-core/app/utils/url-interpolation";
 import type {
   TableViewColumn,
   TableViewListResponse,
@@ -54,7 +55,6 @@ const DESCENDING = "desc";
  */
 export const LIVE_HELD_AT_QUERY_KEY = "liveHeldAt";
 const NO_ROUTE_VALUES: ReplaceUrlVariablesContext = { routeQuery: {} };
-const ROW_ID_TOKEN = "{id}";
 
 type SourceCapabilities = TableViewSourceConfig["capabilities"];
 
@@ -251,10 +251,8 @@ export function useTableRows<T extends Record<string, unknown>>(
     id: string,
   ): Promise<T | undefined> => {
     const url = resolveUrlVariables(
-      sourceConfig.fetchRowUrl?.replaceAll(
-        ROW_ID_TOKEN,
-        encodeURIComponent(id),
-      ),
+      sourceConfig.fetchRowUrl &&
+        interpolateUrl(sourceConfig.fetchRowUrl, { id }),
       options.route?.() ?? NO_ROUTE_VALUES,
     );
     return url ? api<T>(url) : Promise.resolve(undefined);

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableViewConfig.ts

@@ -102,20 +102,15 @@ export const useTableViewConfig = <T extends Data>(
       .map((col) => ({ ...col, header: processI18n(col.header) })),
   );
 
-  // Config-derived (SSR-safe; the registry is client-only): the implicit `table`
-  // display (unless `tableDisplay` is false) plus explicit `displays`. Built-in defaults
+  // Config-derived (SSR-safe; the registry is client-only): the listed
+  // `displays`, else the built-in `table` alone. Built-in defaults
   // (selfManagedData/capabilities) are merged per id.
-  const resolvedDisplays: TableViewDisplayConfig[] = (() => {
-    const list: TableViewDisplayConfig[] =
-      config.tableDisplay === false ? [] : [{ id: TABLE_DISPLAY_ID }];
-    for (const display of config.displays ?? []) {
-      if (display.id === TABLE_DISPLAY_ID) continue;
-      list.push(display);
-    }
-    return list.map(withBuiltinDefaults);
-  })();
+  const resolvedDisplays: TableViewDisplayConfig[] = (
+    config.displays ?? [{ id: TABLE_DISPLAY_ID }]
+  ).map(withBuiltinDefaults);
 
-  const defaultDisplay = config.defaultDisplay ?? TABLE_DISPLAY_ID;
+  const defaultDisplay =
+    config.defaultDisplay ?? resolvedDisplays[0]?.id ?? TABLE_DISPLAY_ID;
 
   const initialVisibility = buildInitialColumnVisibility(config.columns ?? []);
 

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableViewRowActions.ts

@@ -1,3 +1,4 @@
+import { namesRowField } from "#dms-core/app/utils/url-interpolation";
 import {
   fillFormPageUrl,
   type FormContainer,
@@ -91,7 +92,6 @@ interface BulkActionConfig {
 /** Runs a confirmed action from inside its dialog (see `onConfirm`). */
 type ConfirmedRun = NonNullable<ConfirmOptions["onConfirm"]>;
 
-const ROW_URL_PLACEHOLDER = /\{[^}]+\}/;
 /** Options of a delete: from the archive, it is a permanent one. */
 interface DeleteRowsOptions {
   permanently?: boolean;
@@ -634,7 +634,7 @@ export const useTableRowActions = <T extends Data>(
    * reaches: a `from` dialog is worded for one row, so several rows keep the
    * generic confirmation. Undefined when none applies.
    */
-  // A `from` URL naming a row (`{id}`, `{_id}`…) is worded for that row
+  // A `from` URL naming a row (`{{row.id}}`, `{{row._id}}`…) is worded for that row
   // alone; one naming none receives the rows as `?ids=`, one or several, like
   // the `from` of a bulk custom action.
   const declaredBulkConfirm = (
@@ -643,7 +643,7 @@ export const useTableRowActions = <T extends Data>(
   ): ActionConfirm | undefined => {
     const declared = normalizeActionConfig(actionConfig).confirm;
     if (!declared || !isConfirmFrom(declared)) return declared;
-    if (ROW_URL_PLACEHOLDER.test(declared.from)) {
+    if (namesRowField(declared.from)) {
       return ids.length === 1 ? declared : undefined;
     }
     return {

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

@@ -3,6 +3,8 @@
 // bare `<a href="#…">` (an Inertia visit would reload the page to scroll), an
 // absolute URL opens in a new tab, and everything else is a DMS route.
 
+import { pageLink } from "../composables/page/pageUrlValues";
+
 export type LinkKind = "internal" | "anchor" | "external";
 
 const EXTERNAL_LINK_PATTERN = /^(?:[a-z][a-z\d+.-]*:|\/\/)/i;
@@ -20,12 +22,14 @@ export const EXTERNAL_LINK_ATTRIBUTES = {
 } as const;
 
 /**
- * Props for a `UButton` (or `ULink`) following `to`: an external target opens
- * in a new tab, the others navigate in place.
+ * Props for a `UButton` (or `ULink`) following `to`, its page tokens
+ * (`{{params.X}}`, `{{query.X}}`) filled: an external target opens in a new
+ * tab, the others navigate in place.
  */
 export function buttonLinkProps(
-  to: string | undefined,
+  declared: string | undefined,
 ): Record<string, string> {
+  const to = pageLink(declared);
   if (!to) return {};
   return linkKind(to) === "external"
     ? { to, ...EXTERNAL_LINK_ATTRIBUTES }

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

@@ -1,11 +1,24 @@
+import { get } from "@nuxt/ui/runtime/utils/index.js";
+
+// Every token is `{{<scope>.<key>}}`, spaces inside the braces allowed, as the
+// server's filter tokens (`{{ user.id }}`) are.
+//
 // `{{params.id}}` takes the bare name, which on a route repeating a placeholder
 // is its last occurrence — the row id of a form page. The `:<n>` suffix reaches
 // a specific occurrence, `{{params.id:1}}` being the id of the page carrying the
 // table view (see extractRouteParams).
-const PARAM_TOKEN = /\{\{params\.(\w+(?::\d+)?)\}\}/g;
+const PARAM_KEY = String.raw`params\.(\w+(?::\d+)?)`;
 // A query key may carry dots and dashes: a period selector writes `<id>.period`.
-const QUERY_TOKEN = /\{\{query\.([\w.-]+)\}\}/g;
-const RESPONSE_TOKEN = /\{\{response\.(\w+)\}\}/g;
+const QUERY_KEY = String.raw`query\.([\w.-]+)`;
+// A response key is a path into the answered body: `{{response.data.id}}`.
+const RESPONSE_KEY = String.raw`response\.([\w.-]+)`;
+
+const tokenPattern = (key: string, flags = "g"): RegExp =>
+  new RegExp(String.raw`\{\{\s*${key}\s*\}\}`, flags);
+
+const PARAM_TOKEN = tokenPattern(PARAM_KEY);
+const QUERY_TOKEN = tokenPattern(QUERY_KEY);
+const RESPONSE_TOKEN = tokenPattern(RESPONSE_KEY);
 const TOKEN_OPENING = "{{";
 
 export interface ReplaceUrlVariablesContext {
@@ -63,8 +76,8 @@ function fillResponseTokens(
   response: Record<string, unknown> | undefined,
 ): string {
   if (!response) return text;
-  return text.replace(RESPONSE_TOKEN, (match, key) => {
-    const value = response[key];
+  return text.replace(RESPONSE_TOKEN, (match, key: string) => {
+    const value: unknown = get(response, key);
     return typeof value === "string" || typeof value === "number"
       ? String(value)
       : match;
@@ -122,10 +135,20 @@ export function resolveTextVariables(
 
 // 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 ROUTE_KEY = `(?:${PARAM_KEY}|${QUERY_KEY})`;
+const UNRESOLVED_ROUTE_TOKEN = tokenPattern(ROUTE_KEY);
+const UNRESOLVED_ROUTE_VALUE = new RegExp(
+  `^${tokenPattern(ROUTE_KEY, "").source}$`,
+);
+
+/**
+ * Whether a text names a value of the page (`{{params.X}}`, `{{query.X}}`):
+ * the route is only read for one that does.
+ */
+export function namesPageValue(text: string): boolean {
+  return new RegExp(UNRESOLVED_ROUTE_TOKEN.source).test(text);
+}
+
 const QUERY_SEPARATOR = "?";
 const FRAGMENT_SEPARATOR = "#";
 const PAIR_SEPARATOR = "&";

package/frontend-vue/layers/dms-ui/app/components/activity-feed/ActivityFeed.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { pageLink } from "../../build/composables/page/pageUrlValues";
 import { computed, ref, resolveComponent } from "vue";
 import DmsActivityItem from "../activity/ActivityItem.vue";
 import DmsBlockActions, {
@@ -236,6 +237,11 @@ const scrollArea = computed(() =>
 const dayHeadClass = computed(
   () => props.fillHeight && "sticky top-0 z-[1] bg-(--dms-surface-card)",
 );
+// …and the "Show N more" button at its foot, where entries taller than the
+// row would otherwise push it out of sight.
+const foldClass = computed(
+  () => props.fillHeight && "sticky bottom-0 z-[1] bg-(--dms-surface-card)",
+);
 
 const Wrapper = props.card ? resolveComponent("DmsCard") : "div";
 const wrapperProps = computed(() =>
@@ -365,13 +371,14 @@ const wrapperProps = computed(() =>
             :unread="item.unread"
             :mono="props.mono"
             :wrap="props.wrap"
-            :to="item.to"
+            :to="pageLink(item.to)"
             :interactive="!!item.to"
           />
         </section>
         <div
           v-if="foldedCount > 0"
           class="dms-activity-feed__fold border-t border-(--ui-border-muted) px-[18px] pt-2 pb-1"
+          :class="foldClass"
         >
           <UButton
             :label="foldLabel"

package/frontend-vue/layers/dms-ui/app/components/banner/Banner.vue

@@ -1,19 +1,22 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import DmsIconWell, { type IconWellSize } from "../icon-well/IconWell.vue";
-import type { SemanticColor } from "../../utils/semanticTint";
+import {
+  BANNER_TONE_ICONS,
+  type BannerTone,
+} from "../../utils/bannerToneIcons";
 
 // DMS-styled notice banner (design .banner): a left-to-right tinted wash over
 // the card surface with a boxed leading icon, used for module beta / info
 // notices. Wraps UAlert so we keep its a11y + slots while pinning the exact
 // reference look. The `cli` slot hosts the optional inset command box
 // (compose with DmsCopyButton), `actions` the right-aligned buttons.
-type BannerTone = Exclude<SemanticColor, "neutral">;
 type BannerSize = "sm" | "md";
 
 interface BannerProps {
   title?: string;
   description?: string;
+  /** Defaults to the tone's icon. */
   icon?: string;
   /** Colour of the wash and the icon well. */
   tone?: BannerTone;
@@ -39,7 +42,7 @@ interface BannerSlots {
 const props = withDefaults(defineProps<BannerProps>(), {
   title: undefined,
   description: undefined,
-  icon: "i-ph-warning",
+  icon: undefined,
   tone: "warning",
   size: "md",
   dismissible: false,
@@ -99,6 +102,8 @@ const alertUi = computed(() => ({
   actions: `items-center gap-2 mt-0 ${slots.actions ? "max-sm:basis-full max-sm:flex-wrap" : ""}`,
 }));
 
+const leadingIcon = computed(() => props.icon ?? BANNER_TONE_ICONS[props.tone]);
+
 function onOpenChange(open: boolean) {
   if (!open) emit("dismiss");
 }
@@ -116,7 +121,7 @@ function onOpenChange(open: boolean) {
     @update:open="onOpenChange"
   >
     <template #leading>
-      <DmsIconWell :icon="icon" :tone="tone" :size="SIZE_WELL[size]" />
+      <DmsIconWell :icon="leadingIcon" :tone="tone" :size="SIZE_WELL[size]" />
     </template>
 
     <template v-if="slots.description || slots.cli" #description>

package/frontend-vue/layers/dms-ui/app/components/blocks/BannerBlock.vue

@@ -8,14 +8,16 @@ import DmsBlockActions, {
 import { useActionTargets } from "../../build/composables/actions/useActionTargets";
 import { useChartFetch } from "../../composables/chart/useChartFetch";
 import { refreshPageBlocks } from "../../utils/blockRefresh";
+import {
+  BANNER_TONE_ICONS,
+  type BannerTone,
+} from "../../utils/bannerToneIcons";
 import type { CustomButton } from "../../composables/table-view/types/custom-button";
 import { useWatch } from "../../../../dms-core/app/composables/watch/useWatch";
 import { useComposedText } from "../../../../dms-core/app/composables/translation/useComposedText";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
 import type { BlockText } from "../../../../dms-core/app/types/composed-text";
 
-type BannerTone = "info" | "success" | "warning" | "error" | "primary";
-
 /** What a banner shows (interface-dms `BannerContent`). */
 interface BannerContent {
   /** A string (`$` for an i18n key) or a composed text. */
@@ -83,14 +85,6 @@ const DISMISSED_MAX_KEYS = 40;
 const FALLBACK_COMPONENT_ID = "banner";
 const FALLBACK_PAGE_ID = "page";
 
-const TONE_ICONS: Record<BannerTone, string> = {
-  info: "i-ph-info",
-  success: "i-ph-check-circle",
-  warning: "i-ph-warning",
-  error: "i-ph-warning-circle",
-  primary: "i-ph-sparkle",
-};
-
 const { state: watchState } = useWatch(
   props.watchActions || [],
   props.componentId,
@@ -183,7 +177,7 @@ function press(action: BlockButtonAction): void {
     :description="
       banner.description ? processText(banner.description) : undefined
     "
-    :icon="banner.icon ?? TONE_ICONS[banner.tone]"
+    :icon="banner.icon ?? BANNER_TONE_ICONS[banner.tone]"
     :tone="banner.tone"
     :size="banner.size"
     :dismissible="banner.dismissible"

package/frontend-vue/layers/dms-ui/app/components/blocks/NavCardGridBlock.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { pageLink } from "../../build/composables/page/pageUrlValues";
 import { gridColumnsTemplate } from "../grid/columns";
 import {
   useCategoryNavCards,
@@ -217,7 +218,7 @@ const { t } = useI18n();
         >
           <DmsNavCard
             class="h-full"
-            :to="card.to"
+            :to="pageLink(card.to)"
             :icon="card.icon"
             :icon-tone="card.iconTone"
             :title="card.title"

package/frontend-vue/layers/dms-ui/app/components/chart/ApexChartHost.vue

@@ -24,7 +24,14 @@ interface Emits {
   (event: "drawn"): void;
 }
 
+/** The ApexCharts instance the wrapper exposes as `chart`. */
+interface ApexCore {
+  /** Apex's own (debounced) window resize handler: redraws at the container width. */
+  windowResizeHandler: () => void;
+}
+
 interface ApexChartInstance {
+  chart: ApexCore | null;
   updateOptions: (
     options: Record<string, unknown>,
     redrawPaths?: boolean,
@@ -39,6 +46,7 @@ const emit = defineEmits<Emits>();
 const REDRAW_PATHS = false;
 const ANIMATE = true;
 const UPDATE_SYNCED_CHARTS = false;
+const WIDTH_TOLERANCE_PX = 1;
 
 const { locale } = useI18n();
 
@@ -57,6 +65,7 @@ onMounted(() => {
   void ensureApexLocale(locale.value).catch(() => undefined);
 });
 
+const hostRef = ref<HTMLElement | null>(null);
 const chartRef = ref<ApexChartInstance | null>(null);
 
 /**
@@ -123,10 +132,31 @@ watch(
 function onDrawn() {
   emit("drawn");
 }
+
+function isDrawnAtStaleWidth(host: HTMLElement): boolean {
+  const svg = host.querySelector("svg.apexcharts-svg");
+  if (!svg) return false;
+  const drawnWidth = svg.getBoundingClientRect().width;
+  const hostWidth = host.getBoundingClientRect().width;
+  return Math.abs(drawnWidth - hostWidth) > WIDTH_TOLERANCE_PX;
+}
+
+/**
+ * Apex drops its container's resizes while an animation runs, so a sidebar
+ * collapsed or expanded during one leaves the chart at its old width, past
+ * its card when the container shrank, until the next window resize. Once the
+ * animation is over, a chart drawn at another width than its host redraws.
+ */
+function redrawIfResizedWhileAnimating() {
+  const host = hostRef.value;
+  const chart = chartRef.value?.chart;
+  if (!host || !chart || !isDrawnAtStaleWidth(host)) return;
+  chart.windowResizeHandler();
+}
 </script>
 
 <template>
-  <div class="dms-apex">
+  <div ref="hostRef" class="dms-apex">
     <ApexChart
       ref="chartRef"
       :type="apexType"
@@ -135,6 +165,7 @@ function onDrawn() {
       :series="apexSeries"
       @mounted="onDrawn"
       @updated="onDrawn"
+      @animation-end="redrawIfResizedWhileAnimating"
     />
   </div>
 </template>

package/frontend-vue/layers/dms-ui/app/components/check-list/CheckList.vue

@@ -75,7 +75,7 @@ const ICONS: Record<
     ok: "i-ph-check",
     warn: "i-ph-warning",
     error: "i-ph-x",
-    pending: "i-ph-x",
+    pending: "i-ph-circle",
     info: "i-ph-arrow-right",
   },
 };

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { pageLink } from "../../build/composables/page/pageUrlValues";
 import type { FormProps } from "../../composables/form/types/props";
 import type {
   FormData,
@@ -64,6 +65,7 @@ import DmsFormErrorSummary from "../../build/components/form/FormErrorSummary.vu
 import DmsFormLoadError from "../../build/components/form/FormLoadError.vue";
 import {
   type FormRecordLoad,
+  missingRecordFailure,
   trackFormRecordLoad,
 } from "../../build/composables/form/formRecordLoad";
 import DmsFormRequiredLegend from "./FormRequiredLegend.vue";
@@ -492,7 +494,7 @@ function cancelForm(): void {
     window.history.back();
     return;
   }
-  if (props.backTo) void router.push(props.backTo);
+  if (props.backTo) void router.push(pageLink(props.backTo));
 }
 
 const validators = new Set<FormValidator>();
@@ -573,7 +575,15 @@ if (props.fetchUrl) {
   });
 }
 
-const loadFailure = computed(() => recordLoad?.failure.value ?? null);
+const loadFailure = computed(
+  () =>
+    recordLoad?.failure.value ??
+    missingRecordFailure({
+      requiresRecord: props.requiresRecord,
+      fetchUrl: props.fetchUrl,
+      resolvedFetchUrl: resolvedFetchUrl.value,
+    }),
+);
 const isRetryingLoad = computed(() => recordLoad?.retrying.value ?? false);
 
 /** Load the record again after a failure; it is what the form starts from. */

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { pageRequestUrl } from "../../../build/composables/page/pageUrlValues";
 import {
   buildCascaderTree,
   CASCADER_FETCH_LIMIT,
@@ -68,8 +69,10 @@ interface CascaderResponse {
 
 const { data, status, execute } = await useDmsAsyncData(
   `cascader-${instanceId}`,
-  () =>
-    $authFetch<CascaderResponse>(props.searchUrl, {
+  () => {
+    const url = pageRequestUrl(props.searchUrl);
+    if (!url) return Promise.resolve({ results: [], total: 0 });
+    return $authFetch<CascaderResponse>(url, {
       params: { limit: CASCADER_FETCH_LIMIT },
       onRequestError: ({ error }: { error: Error }) => {
         toast.add({
@@ -78,7 +81,8 @@ const { data, status, execute } = await useDmsAsyncData(
           description: error.message,
         });
       },
-    }),
+    });
+  },
   { lazy: true, immediate: false },
 );
 

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

@@ -349,6 +349,12 @@ const acceptString = computed(() =>
   props.constraints?.allowedMimetypes?.join(","),
 );
 
+const dropPromptKey = computed(() =>
+  props.multiple
+    ? "dms.form.file.drop_prompt_multiple"
+    : "dms.form.file.drop_prompt",
+);
+
 const maxSizeFormatted = computed(() => {
   if (!props.constraints?.maxSize) return null;
   return formatFileSize(props.constraints.maxSize);
@@ -373,6 +379,7 @@ onScopeDispose(() => {
       :disabled="disabled || isUploading"
       :color="color"
       :highlight="highlight"
+      :label="$t(dropPromptKey)"
       v-bind="dropZoneAria"
     >
       <template v-if="maxSizeFormatted" #description>

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { pageRequestUrl } from "../../../build/composables/page/pageUrlValues";
 import type { SelectMenuItem } from "@nuxt/ui";
 import { refDebounced } from "@vueuse/core";
 import {
@@ -225,7 +226,9 @@ interface CountryOptions {
 }
 
 async function fetchCountryOptions(): Promise<CountryOptions> {
-  const data = await $authFetch<CountryApiResponse>(props.searchUrl!, {
+  const url = pageRequestUrl(props.searchUrl);
+  if (!url) return { results: [], total: 0 };
+  const data = await $authFetch<CountryApiResponse>(url, {
     params: {
       q: countrySearchTermDebounced.value,
     },