@antelopejs/dms 0.9.8 → 0.11.0

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]"

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

@@ -16,6 +16,10 @@ import {
   numberAdjustment,
   parseTypedNumber,
 } from "../../../build/utils/numberAdjustment";
+import {
+  type InputWidth,
+  isCompactNumberInput,
+} from "../../../build/utils/inputWidth";
 import type { InputNumberAdjustment } from "../../../types/input-number";
 
 defineOptions({ inheritAttrs: false });
@@ -28,12 +32,23 @@ interface InputNumberFieldProps extends InputNumberProps {
    * it as the field's error, instead of clamping it into range on blur.
    */
   clamp?: boolean;
+  /**
+   * `"compact"` sizes the field for a short number from `sm` up, `"full"`
+   * fills the row; left out, a `max` of a few digits makes it compact.
+   */
+  width?: InputWidth;
+  /**
+   * `true` puts a typed value on the nearest `step` when the field is left.
+   * Off by default: `step` only drives the steppers and the arrow keys, and
+   * a value is never rewritten (9,692 kept as 9,692 with steps of 100).
+   */
+  stepSnapping?: boolean;
 }
 
 interface InputNumberAdjustEmits {
   /**
    * The field kept another value than the one typed, on leaving it or on
-   * Enter: clamped to `min` / `max`, or put on its `step`.
+   * Enter: clamped to `min` / `max`, or put on its `step` (`stepSnapping`).
    */
   adjust: [adjustment: InputNumberAdjustment];
 }
@@ -42,6 +57,7 @@ type InputNumberFieldEmits = InputNumberEmits & InputNumberAdjustEmits;
 
 const props = withDefaults(defineProps<InputNumberFieldProps>(), {
   clamp: true,
+  stepSnapping: false,
 });
 const emits = defineEmits<InputNumberFieldEmits>();
 defineSlots<InputNumberSlots>();
@@ -54,6 +70,7 @@ const inputProps = computed(() => {
   const {
     suffix: _suffix,
     clamp: _clamp,
+    width: _width,
     onAdjust: _onAdjust,
     ...rest
   } = forwarded.value;
@@ -64,12 +81,32 @@ const inputProps = computed(() => {
     ...numberStepperState(props.modelValue, bounds.value),
   };
 });
+const isCompact = computed(() => isCompactNumberInput(props));
 const { processI18n } = useTranslation();
 const { locale } = useI18n();
 
 // v2 number fields keep the value left-aligned with a compact caret stepper.
 const DEFAULT_ORIENTATION = "vertical";
 
+// The unit sits inside the box, before the stepper, so a field with a unit
+// is as wide as the fields around it: the value's end padding makes room for
+// the stepper (2rem, `end-8` below), a gap and the unit, sized in
+// characters (`ch` slightly overestimates a short unit, never clips it).
+const SUFFIX_BASE_CLASS = "pe-[calc(var(--dms-field-suffix-width)+2.375rem)]";
+const suffixText = computed(() =>
+  props.suffix ? processI18n(props.suffix) : "",
+);
+const suffixStyle = computed(() =>
+  suffixText.value
+    ? { "--dms-field-suffix-width": `${suffixText.value.length}ch` }
+    : undefined,
+);
+const fieldUi = computed(() =>
+  suffixText.value
+    ? { ...props.ui, base: [props.ui?.base, SUFFIX_BASE_CLASS] }
+    : props.ui,
+);
+
 // 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.
@@ -134,10 +171,9 @@ async function settle(event: Event): Promise<void> {
 </script>
 
 <template>
-  <!-- The unit sits after the field rather than inside it, where the
-    stepper already takes the end of the box. -->
   <div
-    :class="props.suffix ? 'flex items-center gap-2' : 'contents'"
+    :class="suffixText ? 'relative flex items-center' : 'contents'"
+    :style="suffixStyle"
     @beforeinput.capture="onIncomingText"
     @input="onTyped"
     @keydown.enter="settle"
@@ -146,17 +182,18 @@ async function settle(event: Event): Promise<void> {
       v-bind="{ ...inputProps, ...$attrs }"
       @blur="settle"
       @update:model-value="onSettledValue"
-      :class="props.suffix && 'min-w-0 flex-1'"
+      :class="[suffixText && 'min-w-0 flex-1', isCompact && 'sm:max-w-44']"
+      :ui="fieldUi"
       :orientation="props.orientation ?? DEFAULT_ORIENTATION"
       :increment="{ color: 'neutral' }"
       :decrement="{ color: 'neutral' }"
     />
     <span
-      v-if="props.suffix"
-      class="text-muted shrink-0 text-[13px]"
+      v-if="suffixText"
+      class="text-muted pointer-events-none absolute inset-y-0 end-8 flex items-center text-[13px] whitespace-nowrap"
       data-field-suffix
     >
-      {{ processI18n(props.suffix) }}
+      {{ suffixText }}
     </span>
   </div>
 </template>

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

@@ -4,10 +4,20 @@ import type {
   InputNumberEmits,
   InputNumberSlots,
 } from "@nuxt/ui";
+import { computed } from "vue";
+import {
+  type InputWidth,
+  isCompactNumberInput,
+} from "../../../build/utils/inputWidth";
+
+interface InputPercentageProps extends InputNumberProps {
+  /** As on `InputNumber`; left out, the 0-100 bounds make it compact. */
+  width?: InputWidth;
+}
 
 const PERCENTAGE_MULTIPLIER = 100;
 
-const props = defineProps<InputNumberProps>();
+const props = defineProps<InputPercentageProps>();
 const emits = defineEmits<InputNumberEmits>();
 defineSlots<InputNumberSlots>();
 
@@ -25,13 +35,23 @@ const displayValue = computed({
   },
 });
 
+const bounds = computed(() => ({
+  min: props.min ?? 0,
+  max: props.max ?? PERCENTAGE_MULTIPLIER,
+}));
+const isCompact = computed(() =>
+  isCompactNumberInput({ width: props.width, ...bounds.value }),
+);
+
 const forwardedProps = computed(() => {
+  const { width: _width, ...rest } = props;
   return {
-    ...props,
+    ...rest,
+    ...bounds.value,
     modelValue: displayValue.value,
-    min: props.min ?? 0,
-    max: props.max ?? PERCENTAGE_MULTIPLIER,
     step: props.step ?? 0.01,
+    // The step drives the steppers only: a stored 12.345 % stays as it is.
+    stepSnapping: props.stepSnapping ?? false,
     // The wrapper takes the caller's class, so the field fills it.
     class: "w-full",
     ui: { ...props.ui, base: ["pe-7", props.ui?.base] },
@@ -40,7 +60,10 @@ const forwardedProps = computed(() => {
 </script>
 
 <template>
-  <div class="relative inline-flex" :class="props.class">
+  <div
+    class="relative inline-flex"
+    :class="[props.class, isCompact && 'sm:max-w-44']"
+  >
     <UInputNumber
       v-bind="forwardedProps"
       @update:model-value="displayValue = $event"

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { pageRequestUrl } from "../../../build/composables/page/pageUrlValues";
 import { useConfirm } from "../../../composables/confirm/useConfirm";
+import { FORM_FIELD_SAVED_KEY } from "../../../composables/form/types/field-saved";
 import DmsCopyButton from "../../copy/CopyButton.vue";
 
 interface InputSecretProps {
@@ -23,6 +24,7 @@ const { t } = useI18n();
 const toast = useToast();
 const { confirm } = useConfirm();
 const { $authFetch } = useAuthFetch();
+const markFieldSaved = inject(FORM_FIELD_SAVED_KEY, null);
 
 // v2 .secret: the end of the value stays visible, so a reader can tell two
 // secrets apart without revealing either.
@@ -56,6 +58,9 @@ async function rotate(): Promise<void> {
         method: "POST",
       });
       model.value = response.value;
+      // The server stored the new secret already: it is not a change to
+      // save, and "Discard" must not bring the old one back.
+      if (props.id) markFieldSaved?.(props.id, response.value);
     },
   });
   if (confirmed) {

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

@@ -7,12 +7,23 @@ import type {
 import { computed } from "vue";
 import { useForwardPropsEmits } from "reka-ui";
 import { characterCountText } from "../../../build/utils/characterCount";
+import {
+  type InputWidth,
+  isCompactTextInput,
+} from "../../../build/utils/inputWidth";
 
 interface InputTextProps extends InputProps {
   /** Longest value accepted; the counter reads against it. */
   maxLength?: number;
   /** Shows the characters typed at the end of the field ("4 / 60"). */
   showCount?: boolean;
+  /**
+   * `"compact"` sizes the field for a short text from `sm` up, `"full"`
+   * fills the row; left out, a `maxLength` of 16 or less makes it compact.
+   */
+  width?: InputWidth;
+  /** How the value reads shown, not edited (a URL's image): not the input's. */
+  preview?: "avatar" | "image";
 }
 
 const props = defineProps<InputTextProps>();
@@ -21,16 +32,22 @@ defineSlots<InputSlots>();
 
 const forwarded = useForwardPropsEmits(props, emits);
 const inputProps = computed(() => {
-  const { showCount: _showCount, ...rest } = forwarded.value;
+  const {
+    showCount: _showCount,
+    width: _width,
+    preview: _preview,
+    ...rest
+  } = forwarded.value;
   return rest;
 });
+const isCompact = computed(() => isCompactTextInput(props));
 const countText = computed(() =>
   characterCountText(props.modelValue, props.maxLength),
 );
 </script>
 
 <template>
-  <UInput v-bind="inputProps">
+  <UInput v-bind="inputProps" :class="isCompact && 'sm:max-w-44'">
     <template v-if="props.showCount" #trailing>
       <span class="text-dimmed text-xs tabular-nums" data-character-count>
         {{ countText }}

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

@@ -10,6 +10,7 @@ interface InputTimeProps extends Omit<InputProps, "modelValue" | "type"> {
 
 const props = defineProps<InputTimeProps>();
 const { report } = useControlError();
+const { locale } = useI18n();
 const UNREADABLE_DURATION = "$dms.field_errors.invalid_duration";
 const emits = defineEmits<{
   "update:modelValue": [value: number | null];
@@ -21,7 +22,7 @@ const isUserTyping = ref(false);
 const updateDisplayValue = () => {
   if (isUserTyping.value) return;
   if (props.modelValue !== undefined && props.modelValue !== null) {
-    displayValue.value = formatTimeSpan(props.modelValue);
+    displayValue.value = formatDuration(props.modelValue, locale.value);
   } else {
     displayValue.value = "";
   }