@antelopejs/dms 0.9.8 → 0.10.0

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

@@ -8,6 +8,7 @@ import type {
 import type { FormField } from "../../composables/form/types/field";
 import {
   cloneFormValue,
+  fieldValuesOfSubmitDefaults,
   type FormServerFieldError,
   formShowsActions,
   isAcceptanceField,
@@ -18,6 +19,7 @@ import {
   type FormValidator,
 } from "../../composables/form/types/validation";
 import { FORM_FIELD_LOADING_KEY } from "../../composables/form/types/field-loading";
+import { FORM_FIELD_SAVED_KEY } from "../../composables/form/types/field-saved";
 import {
   FORM_HANDLE_KEY,
   linkedFieldId,
@@ -42,6 +44,7 @@ import {
   fieldErrorPattern,
 } from "../../build/composables/form/formEntryContext";
 import {
+  CONTAINER_LAYOUT_CLASSES,
   FORM_LAYOUT_CLASSES,
   FORM_SURFACE_CLASSES,
   type FormSurface,
@@ -58,7 +61,15 @@ import {
   sectionState,
 } from "../../build/composables/form/formSections";
 import { FORM_CONTROL_ERRORS_KEY } from "../../build/composables/form/formControlErrors";
+import {
+  changedServerErrorFields,
+  keptServerErrors,
+  serverErrorValue,
+  type KeptServerError,
+  type PlacedServerError,
+} from "../../build/composables/form/serverFieldErrors";
 import { useInstantForm } from "../../build/composables/form/useInstantForm";
+import { fieldSavedMarker } from "../../build/composables/form/fieldSaved";
 import { useInstantSaveHeader } from "#dms-layout/app/composables/layout/useInstantSaveHeader";
 import DmsFormEntries from "../../build/components/form/FormEntries.vue";
 import DmsFormErrorSummary from "../../build/components/form/FormErrorSummary.vue";
@@ -70,6 +81,8 @@ import {
 } from "../../build/composables/form/formRecordLoad";
 import DmsFormRequiredLegend from "./FormRequiredLegend.vue";
 import DmsFormSections from "../../build/components/form/FormSections.vue";
+import { scrollWithin } from "../../build/utils/scrollWithin";
+import { isHiddenOnCreate } from "../../build/composables/form/createFormFields";
 
 const REALTIME_PRESENCE_FLAG = "_presence=1";
 const REALTIME_ACQUIRE_PATH = "/api/realtime/acquire";
@@ -97,10 +110,11 @@ const FormWrapper =
 
 const { processI18n, processApiMessage } = useTranslation();
 
-// Server errors stay on their field until its value changes (UForm only
-// re-validates a field once it was left, and its schema knows nothing of
-// them): the value each field's were raised against, by field id.
-const serverErrorValues = new Map<string, string>();
+// Server errors stay on their field until its value changes or the form is
+// saved, whatever re-validates the field in between: UForm's `validate`
+// answers them with its schema's (see `keptServerErrors`). Each one shown,
+// with the value it was raised against, by field id.
+const serverErrors = new Map<string, KeptServerError>();
 
 /** The control of a field, by its id, inside this form only. */
 function fieldControl(name: string | undefined): HTMLElement | null {
@@ -171,13 +185,14 @@ async function focusField(name: string | undefined): Promise<void> {
     target.focus();
     return;
   }
-  row?.scrollIntoView({ block: "center" });
+  if (row) scrollWithin(row, { block: "center" });
 }
 
 /** Brings a field into view and focuses it: a link's anchor, a field's request. */
 async function revealField(fieldId: string): Promise<void> {
   await formSettled();
-  fieldRow(fieldId)?.scrollIntoView({ block: "center" });
+  const row = fieldRow(fieldId);
+  if (row) scrollWithin(row, { block: "center" });
   await focusField(fieldId);
 }
 
@@ -193,14 +208,19 @@ function showFieldErrors(errors: FormServerFieldError[]): boolean {
   // instant form) replaces its own only.
   if (!isInstant) {
     target.setErrors([]);
-    serverErrorValues.clear();
+    serverErrors.clear();
   }
   for (const error of errors) placeServerError(target, error);
   const shown = errors.filter(
     (error) => target.getErrors(fieldErrorPattern(error.name)).length,
   );
   for (const error of shown) {
-    serverErrorValues.set(error.name, JSON.stringify(state.value[error.name]));
+    serverErrors.set(error.name, {
+      value: serverErrorValue(state.value[error.name]),
+      errors: target
+        .getErrors(fieldErrorPattern(error.name))
+        .map(({ name, message }: PlacedServerError) => ({ name, message })),
+    });
   }
   showsErrorSummary.value = shown.length > 0;
   void focusField(target.errors[0]?.name);
@@ -229,7 +249,9 @@ function onValidationError(event: { errors: Array<{ name?: string }> }): void {
 }
 
 // Once a submit is refused, the form lists what to fix above its fields
-// until it is saved.
+// until it is saved. The last fix empties the list, not the place it holds:
+// the fields, and the submit button with them, would move up under the
+// pointer on its way to it, and the click would land beside it.
 const showsErrorSummary = ref(false);
 
 const {
@@ -251,20 +273,33 @@ const {
   isFieldGroup,
   submitSucceeded,
   resolvedFetchUrl,
+  createsRecord,
+  effectiveSubmitDefaults,
 } = useForm(props, { showFieldErrors, onSaved: markFormClean });
 
 watch(
   state,
   (current) => {
-    for (const [name, value] of serverErrorValues) {
-      if (JSON.stringify(current[name]) === value) continue;
-      serverErrorValues.delete(name);
+    for (const name of changedServerErrorFields(serverErrors, current)) {
+      serverErrors.delete(name);
       form.value?.clear(fieldErrorPattern(name));
     }
   },
   { deep: true },
 );
 
+// UForm is busy while it validates a submit: the kept errors stay out of it.
+const validateServerErrors = (current: Record<string, unknown>) =>
+  keptServerErrors(serverErrors, current, !!form.value?.loading);
+
+/** A saved form: what the server refused before no longer stands. */
+function clearServerErrors(): void {
+  for (const name of serverErrors.keys()) {
+    form.value?.clear(fieldErrorPattern(name));
+  }
+  serverErrors.clear();
+}
+
 const allFieldIds = computed(() => toValue(allFields).map((field) => field.id));
 
 const showActions = computed(() => formShowsActions(props, toValue(allFields)));
@@ -335,7 +370,7 @@ watch(
       const previous = fieldValueSnapshots.get(field.id);
       fieldValueSnapshots.set(field.id, snapshot);
       if (previous === undefined || previous === snapshot) continue;
-      if (!form.value || serverErrorValues.has(field.id)) continue;
+      if (!form.value || serverErrors.has(field.id)) continue;
       const pattern = fieldErrorPattern(field.id);
       if (!form.value.getErrors(pattern).length) continue;
       void form.value.validate({ name: errorNames(field), silent: true });
@@ -346,10 +381,12 @@ watch(
 
 const { t, locale, locales } = useI18n();
 
+// A new row is created, not "changes" saved.
+const DEFAULT_SUBMIT_LABEL = createsRecord
+  ? "dms.button.create"
+  : "dms.button.save_changes";
 const submitButtonLabel = computed(() =>
-  props.submitLabel
-    ? processI18n(props.submitLabel)
-    : t("dms.button.save_changes"),
+  props.submitLabel ? processI18n(props.submitLabel) : t(DEFAULT_SUBMIT_LABEL),
 );
 
 watch(disabledFields, (newDisabled, oldDisabled) => {
@@ -413,6 +450,7 @@ onMounted(() => {
 function markFormClean(): void {
   isTouched = false;
   showsErrorSummary.value = false;
+  clearServerErrors();
   formDirty.markClean();
   instantSave?.start();
 }
@@ -441,11 +479,20 @@ const isDirty = computed(
 
 useUnsavedChanges({ dirty: isDirty, containerId, element: form });
 
-// A form offers Cancel while clean when it has somewhere to go back to: its
-// drawer or modal, or `backTo` on a page. An action form (send, invite, run)
-// saves from its footer band, never from the floating bar.
+// A form offers Cancel when it has somewhere to go back to: its drawer or
+// modal, `backTo` on a page, or the page of the app the user came from. An
+// action form (send, invite, run) saves from its footer band, never from the
+// floating bar.
 const isActionForm = props.kind === "action";
-const canCancel = inFormContainer || !!container || !!props.backTo;
+// Read once mounted: the server renders no history.
+const cameFromAppPage = ref(false);
+onMounted(() => {
+  cameFromAppPage.value = !!previousAppPage();
+});
+const canCancel = computed(
+  () =>
+    inFormContainer || !!container || !!props.backTo || cameFromAppPage.value,
+);
 const usesSaveBar = saveMode === "bar" && !inFormContainer && !isActionForm;
 
 /** Validates one field alone: whether it holds no error. */
@@ -479,19 +526,30 @@ const hasChangeableFields = computed(() =>
 const router = useDmsRouter();
 const route = useDmsRoute();
 /**
- * Cancel, with nothing to save: closes the drawer or modal, or leaves a page
- * form for the page the user came from (its list, when opened from one), or
- * its `backTo` when the form was opened directly.
+ * The page of the app this one was reached from, which the router records
+ * in the history entry: none for a page opened from a link outside the app,
+ * a bookmark or a new tab, where going back would leave the app.
+ */
+function previousAppPage(): string | undefined {
+  const back = (window.history.state as { back?: unknown } | null)?.back;
+  return typeof back === "string" ? back : undefined;
+}
+
+/**
+ * Cancel: drops what was changed, then closes the drawer or modal, or leaves
+ * a page form for the page of the app the user came from (its list, when
+ * opened from one), or its `backTo` when the form was opened directly.
+ * Discarding first means leaving never asks about changes the user just chose
+ * to drop.
  */
 function cancelForm(): void {
+  if (isDirty.value) discardChanges();
   if (container) {
     void container.close();
     return;
   }
-  const navigation = (window as { navigation?: { canGoBack?: boolean } })
-    .navigation;
-  if (navigation?.canGoBack ?? window.history.length > 1) {
-    window.history.back();
+  if (previousAppPage()) {
+    router.back();
     return;
   }
   if (props.backTo) void router.push(pageLink(props.backTo));
@@ -537,6 +595,15 @@ provide(FORM_HANDLE_KEY, {
   revealField,
 });
 provide(FORM_FIELD_LOADING_KEY, setFieldLoading);
+provide(
+  FORM_FIELD_SAVED_KEY,
+  fieldSavedMarker({
+    hasField: (id) => toValue(allFields).some((field) => field.id === id),
+    initialValues,
+    dirty: formDirty,
+    instantSave,
+  }),
+);
 provide(FORM_CONTENT_LANGUAGE_KEY, "*");
 
 allFields.value.forEach((field) => {
@@ -547,6 +614,15 @@ allFields.value.forEach((field) => {
   ) as FormFieldValue;
 });
 
+// A field the form submits a default under (the parent a table is filtered
+// on) holds it from the start: it shows, and a mandatory one is filled.
+for (const [id, value] of Object.entries(
+  fieldValuesOfSubmitDefaults(allFields.value, effectiveSubmitDefaults.value),
+)) {
+  state.value[id] = cloneFormValue(value);
+  initialValues.value[id] = cloneFormValue(value) as FormFieldValue;
+}
+
 let recordLoad: FormRecordLoad | undefined;
 if (props.fetchUrl) {
   // Keyed on the record too: the load outlives a drawer or modal, and the
@@ -648,7 +724,10 @@ function layoutClasses(inSectionCard: boolean) {
   if ((inSectionCard || inSection) && isHorizontal) {
     return SECTION_LAYOUT_CLASSES;
   }
-  return FORM_LAYOUT_CLASSES[isHorizontal ? "horizontal" : "vertical"];
+  const orientation = isHorizontal ? "horizontal" : "vertical";
+  return inFormContainer
+    ? CONTAINER_LAYOUT_CLASSES[orientation]
+    : FORM_LAYOUT_CLASSES[orientation];
 }
 
 function isFieldDisabled(field: FormField): boolean {
@@ -657,7 +736,8 @@ function isFieldDisabled(field: FormField): boolean {
 }
 
 function isFieldHidden(field: FormField): boolean {
-  return hiddenFields.value?.has(field.id) ?? false;
+  if (hiddenFields.value?.has(field.id)) return true;
+  return createsRecord && isHiddenOnCreate(field, state.value[field.id]);
 }
 
 function isFieldRequired(field: FormField): boolean {
@@ -684,7 +764,10 @@ provide(FORM_ENTRY_CONTEXT_KEY, {
   isFieldHidden,
   isFieldDisabled,
   isFieldRequired,
-  showsChanges: !isInstant && !isActionForm,
+  isReadOnly: computed(() => !hasChangeableFields.value),
+  // A new row has no earlier value to compare with: "Changed · was empty"
+  // on every field it fills would say nothing.
+  showsChanges: !isInstant && !isActionForm && !createsRecord,
   isFieldChanged: (fieldId) => changedFieldIds.value.has(fieldId),
   baselineValue: (fieldId) => formDirty.baseline.value[fieldId],
   fieldSaveState: (fieldId) => instantSave?.states[fieldId] ?? "idle",
@@ -739,10 +822,6 @@ const sectionOfField = computed(() => {
   return owners;
 });
 
-watch(invalidFields, (invalid) => {
-  if (invalid.size === 0) showsErrorSummary.value = false;
-});
-
 // One entry per row to fix: the unlabelled fields of a group share its
 // label, and its first invalid field stands for them.
 const errorSummaryItems = computed(() => {
@@ -916,6 +995,7 @@ onUnmounted(async () => {
       ref="form"
       :state
       :schema="localizedSchema"
+      :validate="validateServerErrors"
       :disabled="allFields.every((field) => field.disabled)"
       @submit="onSubmit"
       @error="onValidationError"
@@ -963,7 +1043,7 @@ onUnmounted(async () => {
         />
 
         <DmsFormErrorSummary
-          v-if="errorSummaryItems.length"
+          v-if="showsErrorSummary"
           :items="errorSummaryItems"
           :class="hasSections ? 'mb-5' : 'mt-4'"
           @select="focusField"
@@ -1014,7 +1094,9 @@ onUnmounted(async () => {
         :saving="loading || isAnyFieldLoading"
         :changes="changedFieldLabels"
         :form="formElementId"
-        :save-label="usesSaveBar ? props.submitLabel : submitButtonLabel"
+        :save-label="
+          usesSaveBar && !createsRecord ? props.submitLabel : submitButtonLabel
+        "
         :cancellable="canCancel"
         :resettable="hasChangeableFields"
         :class="usesSaveBar ? 'mx-3' : surfaceClasses.foot"

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

@@ -176,7 +176,21 @@ function trackRangePick(value: unknown): void {
   if (!isHalfPicked) report(undefined);
 }
 
+const isPickerOpen = ref(false);
+
+/**
+ * Whether a pick completes the field: a day, or a range's end. A multiple
+ * picker stays open for the next day, a range for its end.
+ */
+function isPickComplete(value: unknown): boolean {
+  if (!value || props.multiple) return false;
+  if (!props.range) return true;
+  const ends = value as Partial<StrictDateRange>;
+  return !!ends.start && !!ends.end;
+}
+
 function onPickerToggle(open: boolean): void {
+  isPickerOpen.value = open;
   if (open) return;
   if (props.range && isHalfPicked) report(RANGE_INCOMPLETE);
   emitFormBlur();
@@ -214,6 +228,10 @@ const wrappedEmits = (event: EmitEvent, value: EmitValue) => {
   if (event === "update:modelValue" && props.range) trackRangePick(value);
   // After the update: the field re-validates its new value.
   if (event === "update:modelValue") emitFormChange();
+  // The day picked, the calendar closes, as it does when left.
+  if (event === "update:modelValue" && isPickComplete(value)) {
+    onPickerToggle(false);
+  }
 };
 
 function forwardEmit(event: EmitEvent, value: EmitValue): void {
@@ -286,10 +304,11 @@ const label = computed(() => {
 </script>
 
 <template>
-  <UPopover @update:open="onPickerToggle">
+  <UPopover :open="isPickerOpen" @update:open="onPickerToggle">
     <UButton
       :id="props.id"
       :label="label ?? t('dms.form.select_date')"
+      :title="label"
       :ui="{
         ...FIELD_TRIGGER_UI,
         label: label ? 'truncate text-highlighted' : 'truncate text-dimmed',

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

@@ -1,10 +1,15 @@
 <script setup lang="ts">
 import { isVNode } from "vue";
+import { NUMERIC_TYPE_IDS } from "../../../build/composables/data-types/useColumnValueRenderer";
 
 interface DisplayProps {
   modelValue?: unknown;
   type?: string;
   loading?: boolean;
+  /** The field's label, which names the value where it is not text (an image). */
+  label?: string;
+  /** The record the value belongs to, read as a grid cell reads its row. */
+  row?: Record<string, unknown>;
 }
 
 const props = defineProps<DisplayProps>();
@@ -33,10 +38,16 @@ const formattedValue = computed(() => {
   if (isEmptyValue(props.modelValue)) return EMPTY_FALLBACK;
   const formatter = dataType.value?.formatter?.default;
   if (!formatter) return String(props.modelValue);
-  return formatter(props.modelValue, locale.value, options);
+  const formatterOptions = props.label
+    ? { ...options, fieldLabel: props.label }
+    : options;
+  return formatter(props.modelValue, locale.value, formatterOptions, props.row);
 });
 
 const isVNodeValue = computed(() => isVNode(formattedValue.value));
+// Amounts read in tabular figures, so a read-only list's amounts and the
+// totals under it line up in one font.
+const isNumeric = computed(() => NUMERIC_TYPE_IDS.has(props.type ?? ""));
 </script>
 
 <template>
@@ -56,6 +67,7 @@ const isVNodeValue = computed(() => isVNode(formattedValue.value));
   <div
     v-else
     class="text-default flex min-h-9 items-center py-1.5 text-sm"
+    :class="isNumeric && 'tabular-nums'"
     :title="typeof formattedValue === 'string' ? formattedValue : undefined"
   >
     <component :is="formattedValue" v-if="isVNodeValue" />

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

@@ -536,7 +536,9 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div @paste="onPaste">
+  <!-- A size container: the preview sits beside its details once the field
+    itself has room (a drawer, a form column), not the window. -->
+  <div class="@container" @paste="onPaste">
     <input
       ref="fileInput"
       type="file"
@@ -740,9 +742,12 @@ onBeforeUnmount(() => {
         </span>
       </button>
 
-      <div v-else class="flex flex-col gap-4 sm:flex-row sm:items-stretch">
+      <div
+        v-else
+        class="flex flex-col gap-4 @min-[480px]:flex-row @min-[480px]:items-stretch"
+      >
         <div
-          class="group relative aspect-[4/3] w-full flex-none overflow-hidden rounded-xl shadow-sm sm:w-58"
+          class="group relative aspect-[4/3] w-full flex-none overflow-hidden rounded-xl shadow-sm @min-[480px]:w-58"
           :class="{
             'ring-primary ring-2': isDraggingOver,
             'ring-error ring-2': !isDraggingOver && invalid,

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

@@ -2,6 +2,10 @@
 import { pageRequestUrl } from "../../../build/composables/page/pageUrlValues";
 import type { SelectMenuItem } from "@nuxt/ui";
 import { refDebounced } from "@vueuse/core";
+import {
+  rankAddressSuggestions,
+  suggestionPoolSize,
+} from "../../../build/utils/addressSuggestions";
 import {
   formErrorsInjectionKey,
   formInputsInjectionKey,
@@ -48,6 +52,12 @@ interface AddressProps {
     label?: string;
     value?: string;
   };
+  /**
+   * ISO 3166-1 alpha-2 code ("BE") the country shows while the address has
+   * none, written with the first part typed, and the country whose places
+   * the street suggestions list first.
+   */
+  defaultCountry?: string;
 }
 
 const props = defineProps<AddressProps>();
@@ -68,7 +78,18 @@ const defaultAddress: AddressValue = {
   countryCode: "",
 };
 
-const safeModelValue = computed(() => modelValue.value ?? defaultAddress);
+const defaultCountryCode = computed(
+  () => props.defaultCountry?.trim().toUpperCase() ?? "",
+);
+
+// An address with no country shows the default one; it is written with the
+// first part typed, so an address left empty stays empty.
+const safeModelValue = computed<AddressValue>(() => {
+  const value = modelValue.value ?? defaultAddress;
+  return value.countryCode || !defaultCountryCode.value
+    ? value
+    : { ...value, countryCode: defaultCountryCode.value };
+});
 
 /* -------------------------------------------------------------------------- */
 /* Field state: which parts show the field's error                            */
@@ -308,6 +329,7 @@ interface PhotonResponse {
 interface AddressSuggestion {
   id: string;
   label: string;
+  countryCode?: string;
   patch: Partial<AddressValue>;
 }
 
@@ -329,6 +351,9 @@ const streetQueryDebounced = refDebounced(streetQuery, SEARCH_DEBOUNCE_MS);
 const suggestions = ref<AddressSuggestion[]>([]);
 const isSearching = ref(false);
 const showSuggestions = ref(false);
+// Suggestions only open under the street field while it has the focus: an
+// answer arriving once the user left it must not cover the next fields.
+const isStreetFocused = ref(false);
 
 // Photon/OSM exposes a single `housenumber`. We only pull a box/unit out when it
 // is *explicitly* marked (BE "bte", NL "bus", "box", or a "/" separator). A bare
@@ -403,22 +428,31 @@ watch(streetQueryDebounced, async (query) => {
       params: {
         q: query,
         lang: photonLang.value,
-        limit: photonLimit.value,
+        // A wider pool, so the places of the address's country can come
+        // first and the duplicates can go.
+        limit: suggestionPoolSize(photonLimit.value),
       },
     });
 
     if (seq !== searchSeq) return;
 
-    suggestions.value = (response.features ?? [])
+    const found = (response.features ?? [])
       .filter(
         (feature) => feature.properties?.street || feature.properties?.name,
       )
       .map((feature, index) => ({
         id: String(index),
         label: formatPhotonLabel(feature.properties),
+        countryCode: feature.properties.countrycode?.toUpperCase(),
         patch: mapPhotonFeature(feature.properties),
       }));
-    showSuggestions.value = suggestions.value.length > 0;
+    suggestions.value = rankAddressSuggestions(
+      found,
+      safeModelValue.value.countryCode,
+      photonLimit.value,
+    );
+    showSuggestions.value =
+      isStreetFocused.value && suggestions.value.length > 0;
   } catch {
     if (seq === searchSeq) suggestions.value = [];
   } finally {
@@ -438,7 +472,9 @@ const streetModel = computed({
 });
 
 const applySuggestion = (suggestion: AddressSuggestion) => {
-  patchFields(suggestion.patch);
+  // A place the geocoder gives no country keeps the one shown.
+  const { countryCode, ...located } = suggestion.patch;
+  patchFields(countryCode ? suggestion.patch : located);
   // Bump the sequence so any still-in-flight request is discarded and cannot
   // repopulate the list / reopen the dropdown after the user picked a result.
   searchSeq++;
@@ -449,17 +485,27 @@ const applySuggestion = (suggestion: AddressSuggestion) => {
 let blurTimer: ReturnType<typeof setTimeout> | undefined;
 
 const onStreetFocus = () => {
+  isStreetFocused.value = true;
   if (autocompleteEnabled.value && suggestions.value.length > 0) {
     showSuggestions.value = true;
   }
 };
 
 const onStreetBlur = () => {
+  isStreetFocused.value = false;
   blurTimer = setTimeout(() => {
     showSuggestions.value = false;
   }, BLUR_CLOSE_DELAY_MS);
 };
 
+/** Escape closes the suggestions, as it would any list; typing reopens it. */
+const onStreetEscape = (event: KeyboardEvent) => {
+  if (!showSuggestions.value) return;
+  // Only the list closes, not the drawer or modal around the form.
+  event.stopPropagation();
+  showSuggestions.value = false;
+};
+
 onBeforeUnmount(() => {
   if (blurTimer) clearTimeout(blurTimer);
 });
@@ -532,6 +578,7 @@ const streetPlaceholder = computed(() => {
         autocomplete="off"
         @focus="onStreetFocus"
         @blur="onStreetBlur"
+        @keydown.esc="onStreetEscape"
       />
       <div
         v-if="autocompleteEnabled && showSuggestions && suggestions.length"
@@ -635,6 +682,7 @@ const streetPlaceholder = computed(() => {
         value-key="value"
         label-key="label"
         searchable
+        :aria-label="t('dms.a11y.show_options')"
         @update:model-value="updateField('countryCode', $event)"
       />
     </div>

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

@@ -21,6 +21,12 @@ interface InputCodeProps {
   completions?: CodeEditorCompletion[];
   placeholder?: string;
   disabled?: boolean;
+  /**
+   * Fills the height its flex parent leaves it (a drawer's body, a stacked
+   * `DmsFieldRow fill`) and scrolls inside it: `minLines` stays its floor
+   * (the parent scrolls below it), `maxLines` is ignored.
+   */
+  fill?: boolean;
 }
 
 interface CompletionsResponse {
@@ -35,6 +41,7 @@ const props = withDefaults(defineProps<InputCodeProps>(), {
   completions: undefined,
   placeholder: undefined,
   id: undefined,
+  fill: false,
 });
 const model = defineModel<string | null | undefined>();
 const { t } = useI18n();
@@ -152,13 +159,18 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
+  <!-- Filling, the root clips without scrolling (`overflow-clip`): its
+    minimum stays its content's, the editor's floor, and the parent scrolls
+    below it. The editor's area holds no size of its own (`contain-size`): a
+    long text scrolls in it instead of growing the root. -->
   <div
-    class="border-accented overflow-hidden rounded-md border focus-within:ring-2"
-    :class="
+    class="border-accented rounded-md border focus-within:ring-2"
+    :class="[
       isInvalid
         ? 'border-error focus-within:ring-error/25'
-        : 'focus-within:border-primary focus-within:ring-primary/25'
-    "
+        : 'focus-within:border-primary focus-within:ring-primary/25',
+      fill ? 'flex flex-1 flex-col overflow-clip' : 'overflow-hidden',
+    ]"
     :style="sizeStyle"
     @focusout="emitFormBlur"
   >
@@ -167,11 +179,23 @@ onBeforeUnmount(() => {
     <pre
       v-if="!isReady"
       class="text-highlighted min-h-(--dms-code-min-height) overflow-auto px-3 py-2 font-mono text-[12.5px] whitespace-pre-wrap"
+      :class="fill && 'flex-1 contain-size'"
       >{{ model }}</pre
     >
+    <!-- Important: CodeMirror's unlayered `.cm-content { min-height: 100% }`
+      outranks a utility, and `min-lines` would never apply. -->
     <div
       ref="host"
-      class="[&_.cm-content]:min-h-(--dms-code-min-height) [&_.cm-scroller]:max-h-(--dms-code-max-height) [&_.cm-scroller]:overflow-auto"
+      data-dms-code-host
+      class="[&_.cm-content]:min-h-(--dms-code-min-height)! [&_.cm-scroller]:overflow-auto"
+      :class="
+        fill
+          ? [
+              'flex flex-col contain-size [&_.cm-editor]:min-h-0 [&_.cm-editor]:flex-1 [&_.cm-scroller]:min-h-0 [&_.cm-scroller]:flex-1',
+              isReady && 'min-h-(--dms-code-min-height) flex-1',
+            ]
+          : '[&_.cm-scroller]:max-h-(--dms-code-max-height)'
+      "
     />
     <div
       class="border-default text-dimmed flex items-center gap-3 border-t bg-(--dms-bg-muted) px-3 py-1 font-mono text-[11px]"