@antelopejs/dms 0.5.6 → 0.6.0

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

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import type { SelectMenuItem } from "@nuxt/ui";
 import { refDebounced } from "@vueuse/core";
+import {
+  formErrorsInjectionKey,
+  formInputsInjectionKey,
+  useFormField,
+} from "@nuxt/ui/composables/useFormField";
 
 const SEARCH_DEBOUNCE_MS = 200;
 const MIN_QUERY_LENGTH = 3;
@@ -32,6 +37,8 @@ interface AddressAutocompleteConfig {
 }
 
 interface AddressProps {
+  /** Id of the street input, the first part: what the field's label names. */
+  id?: string;
   placeholder?: Partial<Record<keyof AddressValue, string>>;
   autocomplete?: AddressAutocompleteConfig;
   disabled?: boolean;
@@ -62,6 +69,93 @@ const defaultAddress: AddressValue = {
 
 const safeModelValue = computed(() => modelValue.value ?? defaultAddress);
 
+/* -------------------------------------------------------------------------- */
+/* Field state: which parts show the field's error                            */
+/* -------------------------------------------------------------------------- */
+
+// The parts the address type requires (see AddressType in interface-dms).
+const REQUIRED_PARTS = new Set<keyof AddressValue>([
+  "streetName",
+  "postalCode",
+  "city",
+  "countryCode",
+]);
+
+// Taken here so the sub-inputs do not each pick up the whole field's error:
+// each part shows its own.
+const {
+  name: fieldName,
+  ariaAttrs,
+  emitFormBlur,
+  emitFormInput,
+} = useFormField();
+const formErrors = inject(formErrorsInjectionKey, null);
+const formInputs = inject(formInputsInjectionKey, null);
+
+const PARTS = Object.keys(defaultAddress) as Array<keyof AddressValue>;
+const FIRST_PART: keyof AddressValue = "streetName";
+
+/**
+ * The id of a part's control: the street takes the field's, which its label
+ * names, the others `<field>.<part>`, the name their errors go under.
+ */
+function partId(part: keyof AddressValue): string | undefined {
+  const base = props.id ?? fieldName.value;
+  if (!base) return undefined;
+  return part === FIRST_PART ? base : `${base}.${part}`;
+}
+
+// Each part is an input of the form, so an error a server raises on one
+// (`address.postalCode`) lands on it rather than being dropped.
+onMounted(() => {
+  const name = fieldName.value;
+  if (!name || !formInputs) return;
+  for (const part of PARTS) {
+    formInputs.value[`${name}.${part}`] = { id: partId(part) };
+  }
+});
+onBeforeUnmount(() => {
+  const name = fieldName.value;
+  if (!name || !formInputs) return;
+  for (const part of PARTS) delete formInputs.value[`${name}.${part}`];
+});
+
+/** Whether a required part is still empty. */
+function isPartMissing(part: keyof AddressValue): boolean {
+  return REQUIRED_PARTS.has(part) && !safeModelValue.value[part]?.trim();
+}
+
+/**
+ * Whether a part shows the error border: it has an error of its own
+ * (`<field>.<part>`), or the address as a whole was refused: left empty
+ * while required, the required parts still empty; refused as it is (a
+ * server's verdict), every part.
+ */
+function isPartInvalid(part: keyof AddressValue): boolean {
+  const name = fieldName.value;
+  if (!name || !formErrors?.value.length) return false;
+  const errorNames = new Set(formErrors.value.map((error) => error.name));
+  if (errorNames.has(`${name}.${part}`)) return true;
+  if (!errorNames.has(name)) return false;
+  return PARTS.some(isPartMissing) ? isPartMissing(part) : true;
+}
+
+/** The props marking one part invalid, as UFormField marks an input. */
+function partState(part: keyof AddressValue) {
+  if (!isPartInvalid(part)) return {};
+  return { color: "error" as const, highlight: true, ...ariaAttrs.value };
+}
+
+const root = useTemplateRef<HTMLElement>("root");
+
+// The address is left when focus leaves all of its parts, not each one: a
+// part left for the next must not flag the parts not reached yet.
+function onFocusOut(event: FocusEvent) {
+  const next = event.relatedTarget as Node | null;
+  if (next && root.value?.contains(next)) return;
+  emitFormBlur();
+}
+
 const updateField = <K extends keyof AddressValue>(
   field: K,
   value: AddressValue[K],
@@ -70,6 +164,7 @@ const updateField = <K extends keyof AddressValue>(
     ...safeModelValue.value,
     [field]: value,
   };
+  emitFormInput();
 };
 
 const patchFields = (patch: Partial<AddressValue>) => {
@@ -77,6 +172,7 @@ const patchFields = (patch: Partial<AddressValue>) => {
     ...safeModelValue.value,
     ...patch,
   };
+  emitFormInput();
 };
 
 /* -------------------------------------------------------------------------- */
@@ -418,10 +514,12 @@ const streetPlaceholder = computed(() => {
 </script>
 
 <template>
-  <div class="grid gap-3">
+  <div ref="root" class="grid gap-3" @focusout="onFocusOut">
     <div class="relative grid gap-1.5">
       <UInput
         v-model="streetModel"
+        v-bind="partState('streetName')"
+        :id="partId('streetName')"
         :icon="autocompleteEnabled ? 'i-ph-magnifying-glass' : undefined"
         :placeholder="streetPlaceholder"
         :disabled="props.disabled"
@@ -450,6 +548,8 @@ const streetPlaceholder = computed(() => {
       <div class="grid gap-1.5">
         <UInput
           :model-value="safeModelValue.houseNumber"
+          v-bind="partState('houseNumber')"
+          :id="partId('houseNumber')"
           :placeholder="placeholders.houseNumber"
           :disabled="props.disabled"
           @update:model-value="updateField('houseNumber', $event)"
@@ -458,6 +558,8 @@ const streetPlaceholder = computed(() => {
       <div class="grid gap-1.5">
         <UInput
           :model-value="safeModelValue.boxNumber"
+          v-bind="partState('boxNumber')"
+          :id="partId('boxNumber')"
           :placeholder="placeholders.boxNumber"
           :disabled="props.disabled"
           @update:model-value="updateField('boxNumber', $event)"
@@ -468,6 +570,8 @@ const streetPlaceholder = computed(() => {
     <div class="grid gap-1.5">
       <UInput
         :model-value="safeModelValue.addressLine2"
+        v-bind="partState('addressLine2')"
+        :id="partId('addressLine2')"
         :placeholder="placeholders.addressLine2"
         :disabled="props.disabled"
         @update:model-value="updateField('addressLine2', $event)"
@@ -478,6 +582,8 @@ const streetPlaceholder = computed(() => {
       <div class="grid gap-1.5">
         <UInput
           :model-value="safeModelValue.postalCode"
+          v-bind="partState('postalCode')"
+          :id="partId('postalCode')"
           :placeholder="placeholders.postalCode"
           :disabled="props.disabled"
           @update:model-value="updateField('postalCode', $event)"
@@ -486,6 +592,8 @@ const streetPlaceholder = computed(() => {
       <div class="grid gap-1.5">
         <UInput
           :model-value="safeModelValue.city"
+          v-bind="partState('city')"
+          :id="partId('city')"
           :placeholder="placeholders.city"
           :disabled="props.disabled"
           @update:model-value="updateField('city', $event)"
@@ -496,6 +604,8 @@ const streetPlaceholder = computed(() => {
     <div class="grid gap-1.5">
       <UInput
         :model-value="safeModelValue.countrySubdivision"
+        v-bind="partState('countrySubdivision')"
+        :id="partId('countrySubdivision')"
         :placeholder="placeholders.countrySubdivision"
         :disabled="props.disabled"
         @update:model-value="updateField('countrySubdivision', $event)"
@@ -506,6 +616,8 @@ const streetPlaceholder = computed(() => {
       <USelectMenu
         v-model:search-term="countrySearchTerm"
         :model-value="safeModelValue.countryCode"
+        v-bind="partState('countryCode')"
+        :id="partId('countryCode')"
         :items="countryOptions"
         :placeholder="placeholders.countryCode"
         :disabled="props.disabled"

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

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import { getCurrentInstance, h, render } from "vue";
+import { useFormField } from "@nuxt/ui/composables/useFormField";
+import UIcon from "@nuxt/ui/runtime/vue/components/Icon.vue";
+import { useControlError } from "../../../build/composables/form/useControlError";
+import type {
+  CodeEditor,
+  CodeEditorCompletion,
+  CodeEditorPosition,
+} from "../../../build/utils/codeEditor";
+
+interface InputCodeProps {
+  id?: string;
+  language: string;
+  lineNumbers?: boolean;
+  minLines?: number;
+  maxLines?: number;
+  completionsUrl?: string;
+  completions?: CodeEditorCompletion[];
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+interface CompletionsResponse {
+  items?: CodeEditorCompletion[];
+}
+
+const props = withDefaults(defineProps<InputCodeProps>(), {
+  lineNumbers: true,
+  minLines: 6,
+  maxLines: 20,
+  completionsUrl: undefined,
+  completions: undefined,
+  placeholder: undefined,
+  id: undefined,
+});
+const model = defineModel<string | null | undefined>();
+const { t } = useI18n();
+const { $authFetch } = useAuthFetch();
+const { report } = useControlError();
+// The field state UFormField hands its control: the error border and aria
+// attributes go on the editor, an edit re-validates the field.
+const { color, ariaAttrs, emitFormInput, emitFormBlur } = useFormField();
+const isInvalid = computed(() => color.value === "error");
+
+const LINE_HEIGHT_PX = 19;
+// The editor's top and bottom padding, around its lines.
+const EDITOR_PADDING_PX = 16;
+const INVALID_JSON = "$dms.field_errors.invalid_json";
+const LANGUAGE_LABELS: Record<string, string> = {
+  json: "JSON",
+  sql: "SQL",
+  html: "HTML",
+  javascript: "JavaScript",
+  text: "Text",
+};
+
+const host = useTemplateRef<HTMLElement>("host");
+const position = ref<CodeEditorPosition>({ line: 1, column: 1 });
+const isReady = ref(false);
+let editor: CodeEditor | null = null;
+const appContext = getCurrentInstance()?.appContext ?? null;
+
+const sizeStyle = computed(() => ({
+  "--dms-code-min-height": `${props.minLines * LINE_HEIGHT_PX + EDITOR_PADDING_PX}px`,
+  "--dms-code-max-height": `${props.maxLines * LINE_HEIGHT_PX + EDITOR_PADDING_PX}px`,
+}));
+
+const contentAttributes = computed<Record<string, string>>(() => {
+  const attributes: Record<string, string> = {};
+  if (props.id) attributes.id = props.id;
+  const aria = ariaAttrs.value ?? {};
+  if (aria["aria-invalid"]) attributes["aria-invalid"] = "true";
+  if (aria["aria-describedby"]) {
+    attributes["aria-describedby"] = String(aria["aria-describedby"]);
+  }
+  return attributes;
+});
+
+/** JSON that does not parse says so under the field, and blocks the submit. */
+function checkSyntax(text: string): void {
+  if (props.language !== "json") return;
+  try {
+    if (text.trim()) JSON.parse(text);
+    report(undefined);
+  } catch {
+    report(INVALID_JSON);
+  }
+}
+
+async function loadCompletions(): Promise<CodeEditorCompletion[]> {
+  const fixed = props.completions ?? [];
+  if (!props.completionsUrl) return fixed;
+  const response = await $authFetch<
+    CodeEditorCompletion[] | CompletionsResponse
+  >(props.completionsUrl).catch(() => []);
+  const fetched = Array.isArray(response) ? response : (response.items ?? []);
+  return [...fixed, ...fetched];
+}
+
+// The icons drawn into the autocomplete popup, unmounted with the editor.
+const iconElements = new Set<HTMLElement>();
+
+function renderIcon(icon: string): HTMLElement {
+  const element = document.createElement("span");
+  iconElements.add(element);
+  element.className = "inline-flex shrink-0 text-dimmed";
+  const vnode = h(UIcon, { name: icon, class: "size-4" });
+  vnode.appContext = appContext;
+  render(vnode, element);
+  return element;
+}
+
+function onChange(text: string): void {
+  model.value = text;
+  checkSyntax(text);
+  emitFormInput();
+}
+
+onMounted(async () => {
+  const { createCodeEditor } = await import("../../../build/utils/codeEditor");
+  if (!host.value) return;
+  editor = createCodeEditor({
+    parent: host.value,
+    value: model.value ?? "",
+    language: props.language,
+    lineNumbers: props.lineNumbers,
+    placeholder: props.placeholder,
+    readOnly: props.disabled,
+    contentAttributes: contentAttributes.value,
+    completions:
+      props.completions?.length || props.completionsUrl
+        ? loadCompletions
+        : undefined,
+    renderIcon,
+    completionFooter: t("dms.form.code.completion_footer"),
+    onChange,
+    onPosition: (next) => (position.value = next),
+  });
+  isReady.value = true;
+});
+
+watch(model, (value) => editor?.setValue(value ?? ""));
+watch(
+  () => props.disabled,
+  (disabled) => editor?.setReadOnly(!!disabled),
+);
+watch(contentAttributes, (attributes) =>
+  editor?.setContentAttributes(attributes),
+);
+onBeforeUnmount(() => {
+  editor?.destroy();
+  for (const element of iconElements) render(null, element);
+  iconElements.clear();
+});
+</script>
+
+<template>
+  <div
+    class="border-accented overflow-hidden 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'
+    "
+    :style="sizeStyle"
+    @focusout="emitFormBlur"
+  >
+    <!-- Until the editor loads (and on the server), the code shows as is,
+      at the editor's size: nothing moves when it takes over. -->
+    <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"
+      >{{ model }}</pre
+    >
+    <div
+      ref="host"
+      class="[&_.cm-content]:min-h-(--dms-code-min-height) [&_.cm-scroller]:max-h-(--dms-code-max-height) [&_.cm-scroller]:overflow-auto"
+    />
+    <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]"
+    >
+      <span
+        v-if="isReady && (props.completions?.length || props.completionsUrl)"
+      >
+        <UKbd value="ctrl" size="sm" />
+        <UKbd value="Space" size="sm" />
+        {{ t("dms.form.code.complete") }}
+      </span>
+      <span class="ms-auto">
+        {{ LANGUAGE_LABELS[props.language] ?? props.language }} ·
+        {{ t("dms.form.code.position", position) }}
+      </span>
+    </div>
+  </div>
+</template>

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

@@ -1,42 +1,66 @@
 <script setup lang="ts">
 interface InputColorProps {
+  id?: string;
   placeholder?: string;
   disabled?: boolean;
 }
 
 const props = defineProps<InputColorProps>();
+
+// The field state UFormField hands its control: the swatch and the hex input
+// both show the error border, the input carries the aria attributes.
+const {
+  color,
+  highlight,
+  ariaAttrs,
+  emitFormBlur,
+  emitFormChange,
+  emitFormInput,
+} = useFormField(props);
+const invalid = computed(() => color.value === "error");
 const modelValue = defineModel<string | null | undefined>();
 
 const HEX_PATTERN = /^#[0-9a-fA-F]{6}$/;
 const FALLBACK_COLOR = "#000000";
 
+const hasColor = computed(
+  () => !!modelValue.value && HEX_PATTERN.test(modelValue.value),
+);
+// The native picker opens on black; the swatch shows no colour until one is
+// picked, rather than a black one reading as a value.
 const swatchValue = computed(() =>
-  modelValue.value && HEX_PATTERN.test(modelValue.value)
-    ? modelValue.value
-    : FALLBACK_COLOR,
+  hasColor.value ? modelValue.value! : FALLBACK_COLOR,
 );
 
 const handlePickerInput = (event: Event) => {
   const target = event.target as HTMLInputElement;
   modelValue.value = target.value;
+  emitFormChange();
 };
 
 const handleTextInput = (value: string | number) => {
   const next = String(value).trim();
   modelValue.value = next === "" ? undefined : next;
+  emitFormInput();
 };
 </script>
 
 <template>
   <div class="flex items-center gap-2">
     <label
-      class="border-default relative inline-flex size-9 shrink-0 cursor-pointer overflow-hidden rounded-md border"
-      :class="{ 'cursor-not-allowed opacity-60': props.disabled }"
+      class="relative inline-flex size-8 shrink-0 cursor-pointer overflow-hidden rounded-md border bg-(--dms-bg-field) p-0.5 shadow-(--shadow-xs) has-focus-visible:outline-3"
+      :class="[
+        invalid
+          ? 'border-error has-focus-visible:border-error has-focus-visible:outline-(--dms-error-tint)'
+          : 'border-accented has-focus-visible:border-primary has-focus-visible:outline-(--dms-accent-tint-strong)',
+        { 'cursor-not-allowed opacity-50': props.disabled },
+      ]"
     >
       <span
         aria-hidden="true"
-        class="size-full"
-        :style="{ backgroundColor: swatchValue }"
+        class="size-full rounded-[5px]"
+        :class="!hasColor && 'border-accented border border-dashed'"
+        :style="hasColor ? { backgroundColor: swatchValue } : undefined"
       />
       <input
         type="color"
@@ -47,11 +71,17 @@ const handleTextInput = (value: string | number) => {
       />
     </label>
     <UInput
+      :id="props.id"
       :model-value="modelValue ?? ''"
+      :color="color"
+      :highlight="highlight"
+      v-bind="ariaAttrs"
       :placeholder="props.placeholder ?? '#000000'"
       :disabled="props.disabled"
       class="flex-1"
+      :ui="{ base: 'font-mono' }"
       @update:model-value="handleTextInput"
+      @blur="emitFormBlur"
     />
   </div>
 </template>

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

@@ -5,18 +5,40 @@ import type {
   InputNumberSlots,
 } from "@nuxt/ui/components/InputNumber.vue";
 import { useForwardPropsEmits } from "reka-ui";
+import { useControlError } from "../../../build/composables/form/useControlError";
+
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps<InputNumberProps>();
 const emits = defineEmits<InputNumberEmits>();
 defineSlots<InputNumberSlots>();
 
 const forwarded = useForwardPropsEmits(props, emits);
+
+// v2 number fields keep the value left-aligned with a compact caret stepper.
+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 {
+  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);
+}
 </script>
 
 <template>
-  <UInputNumber
-    v-bind="forwarded"
-    :increment="{ color: 'neutral' }"
-    :decrement="{ color: 'neutral' }"
-  />
+  <div class="contents" @beforeinput.capture="onIncomingText">
+    <UInputNumber
+      v-bind="{ ...forwarded, ...$attrs }"
+      :orientation="props.orientation ?? DEFAULT_ORIENTATION"
+      :increment="{ color: 'neutral' }"
+      :decrement="{ color: 'neutral' }"
+    />
+  </div>
 </template>

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

@@ -6,6 +6,7 @@ import type {
 } from "@nuxt/ui/components/Input.vue";
 import { useForwardPropsEmits } from "reka-ui";
 import { FORM_VALIDATOR_KEY } from "../../../composables/form/types/validation";
+import DmsPasswordInput from "../../../build/components/form/PasswordInput.vue";
 
 const props = defineProps<
   InputProps & {
@@ -17,6 +18,17 @@ const emits = defineEmits<InputEmits>();
 defineSlots<InputSlots>();
 
 const forwarded = useForwardPropsEmits(props, emits);
+// The value goes out through `updateValue`: the password input types its
+// model as possibly `undefined`, which UInput never emits (cleared is "").
+const passwordBindings = computed(() => {
+  const { "onUpdate:modelValue": _onUpdate, ...rest } = forwarded.value;
+  return rest;
+});
+
+function updateValue(value: InputProps["modelValue"]): void {
+  if (value !== undefined) emits("update:modelValue", value);
+}
+
 const { processI18n } = useTranslation();
 
 const passwordVisibility = ref(false);
@@ -54,54 +66,24 @@ if (registerValidator) {
 
 <template>
   <div class="grid gap-2">
-    <UInput v-bind="forwarded" :type="passwordVisibility ? 'text' : 'password'">
-      <template #trailing>
-        <UButton
-          color="neutral"
-          variant="link"
-          size="sm"
-          :icon="passwordVisibility ? 'i-lucide-eye-off' : 'i-lucide-eye'"
-          :aria-label="
-            passwordVisibility
-              ? $t('dms.form.input.hide_password')
-              : $t('dms.form.input.show_password')
-          "
-          :aria-pressed="passwordVisibility"
-          :aria-controls="props.id"
-          @click="passwordVisibility = !passwordVisibility"
-        />
-      </template>
-    </UInput>
+    <DmsPasswordInput
+      v-bind="passwordBindings"
+      v-model:visible="passwordVisibility"
+      @update:model-value="updateValue"
+    />
     <template v-if="props.confirmPassword">
-      <UInput
+      <DmsPasswordInput
         :id="confirmInputId"
         v-bind="confirmPropsFiltered"
         v-model="confirmValue"
+        v-model:visible="passwordVisibility"
         :placeholder="
           props.confirmPlaceholder
             ? processI18n(props.confirmPlaceholder)
             : undefined
         "
-        :type="passwordVisibility ? 'text' : 'password'"
-        :color="hasMismatch ? 'error' : undefined"
-      >
-        <template #trailing>
-          <UButton
-            color="neutral"
-            variant="link"
-            size="sm"
-            :icon="passwordVisibility ? 'i-lucide-eye-off' : 'i-lucide-eye'"
-            :aria-label="
-              passwordVisibility
-                ? $t('dms.form.input.hide_password')
-                : $t('dms.form.input.show_password')
-            "
-            :aria-pressed="passwordVisibility"
-            :aria-controls="confirmInputId"
-            @click="passwordVisibility = !passwordVisibility"
-          />
-        </template>
-      </UInput>
+        :invalid="hasMismatch"
+      />
       <p v-if="hasMismatch" class="text-error text-sm">
         {{ $t("dms.form.validation.password_mismatch") }}
       </p>

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

@@ -32,17 +32,25 @@ const forwardedProps = computed(() => {
     min: props.min ?? 0,
     max: props.max ?? PERCENTAGE_MULTIPLIER,
     step: props.step ?? 0.01,
+    // The wrapper takes the caller's class, so the field fills it.
+    class: "w-full",
+    ui: { ...props.ui, base: ["pe-7", props.ui?.base] },
   };
 });
 </script>
 
 <template>
-  <UInputNumber
-    v-bind="forwardedProps"
-    @update:model-value="displayValue = $event"
-  >
-    <template #trailing>
-      <span class="text-dimmed text-sm">%</span>
-    </template>
-  </UInputNumber>
+  <div class="relative inline-flex" :class="props.class">
+    <UInputNumber
+      v-bind="forwardedProps"
+      @update:model-value="displayValue = $event"
+    />
+    <!-- UInputNumber has no trailing slot. -->
+    <span
+      class="text-dimmed pointer-events-none absolute inset-y-0 end-2.5 flex items-center text-[13px]"
+      aria-hidden="true"
+    >
+      %
+    </span>
+  </div>
 </template>