@antelopejs/dms 0.5.6 → 0.6.1

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

@@ -1,6 +1,9 @@
 <script setup lang="ts">
+import { formErrorsInjectionKey } from "@nuxt/ui/composables/useFormField";
 import type { FormField } from "../../composables/form/types";
 import { resolveDmsComponent } from "../../composables/resolveDmsComponent";
+import { escapeRegExp } from "../../build/composables/form/formEntryContext";
+import DmsFormErrorText from "../../build/components/form/FormErrorText.vue";
 
 interface LocalizedFieldProps {
   field: FormField;
@@ -15,6 +18,7 @@ const props = defineProps<LocalizedFieldProps>();
 const fieldValue = defineModel<Record<string, string> | undefined>();
 
 const { locale, locales } = useI18n();
+const { processI18n } = useTranslation();
 
 const isExpanded = ref(false);
 
@@ -44,6 +48,26 @@ watch(
   { immediate: true },
 );
 
+// The values the inputs show. Until the form hands a per-locale object back
+// (the watcher above fills it in, but the server render and the hydration
+// pass run before that answer), every locale reads empty, so the inputs are
+// in the markup from the first paint instead of popping in at hydration.
+const EMPTY_TEXT = "";
+const localeValues = computed<Record<string, string>>(() =>
+  fieldValue.value && typeof fieldValue.value === "object"
+    ? fieldValue.value
+    : {},
+);
+
+function setLocaleValue(code: string, value: string): void {
+  const current = fieldValue.value;
+  if (current && typeof current === "object") {
+    current[code] = value;
+    return;
+  }
+  fieldValue.value = { ...withAllLocales({}), [code]: value };
+}
+
 const toggleTranslations = () => {
   isExpanded.value = !isExpanded.value;
 };
@@ -51,40 +75,86 @@ const toggleTranslations = () => {
 const showDisplay = computed(
   () => !!props.field.disabled && !!props.field.type,
 );
+
+// The control shown in the reader's language is the field: its errors (and
+// those of the field as a whole, a server's) show under it. The panel lists
+// the other languages, each with its own.
+const otherLocales = computed(() =>
+  locales.value.filter((lang) => lang.code !== locale.value),
+);
+const mainErrorPattern = computed(
+  () =>
+    new RegExp(
+      `^${escapeRegExp(props.field.id)}(\\.${escapeRegExp(locale.value)})?$`,
+    ),
+);
+
+// A translation refused while the panel is closed opens it: its error shows
+// on its own line.
+const formErrors = inject(formErrorsInjectionKey, null);
+// The error slot replaces the hint under the field: given only while the
+// field holds an error.
+const hasMainError = computed(
+  () =>
+    !!formErrors?.value.some((error) =>
+      mainErrorPattern.value.test(error.name ?? ""),
+    ),
+);
+watch(
+  () => formErrors?.value ?? [],
+  (errors) => {
+    const isTranslationInvalid = otherLocales.value.some((lang) =>
+      errors.some((error) => error.name === `${props.field.id}.${lang.code}`),
+    );
+    if (isTranslationInvalid) isExpanded.value = true;
+  },
+);
 </script>
 
 <template>
   <div class="w-full space-y-2">
-    <UFormField :name="`${field.id}.${locale}`" class="relative">
-      <DmsDisplay
-        v-if="showDisplay && fieldValue"
-        :model-value="fieldValue[locale]"
-        :type="field.type"
-        :loading
-        class="w-full"
-        v-bind="field.component.options || {}"
-      />
-      <Component
-        :is="
-          resolveDmsComponent(field.component.componentName) ||
-          field.component.componentName
-        "
-        v-else-if="field.component.componentName && fieldValue"
-        :id="field.id"
-        v-model="fieldValue[locale]"
-        :initial-value="
-          (initialValues?.[field.id] as Record<string, unknown> | undefined)?.[
-            locale
-          ]
-        "
-        :loading
-        :disabled="field.disabled"
-        :component-id="props.componentId"
-        :page-id="props.pageId"
-        class="w-full"
-        :class="{ 'opacity-75': field.disabled }"
-        v-bind="field.component.options || {}"
-      />
+    <!-- The error sits right under the control, above the toggle. -->
+    <div class="relative">
+      <UFormField
+        :name="field.id"
+        :error-pattern="mainErrorPattern"
+        :data-field="field.id"
+        :help="field.hint ? processI18n(field.hint) : undefined"
+      >
+        <DmsDisplay
+          v-if="showDisplay"
+          :model-value="localeValues[locale]"
+          :type="field.type"
+          :loading
+          class="w-full"
+          v-bind="field.component.options || {}"
+        />
+        <Component
+          :is="
+            resolveDmsComponent(field.component.componentName) ||
+            field.component.componentName
+          "
+          v-else-if="field.component.componentName"
+          :id="field.id"
+          :model-value="localeValues[locale] ?? EMPTY_TEXT"
+          :initial-value="
+            (
+              initialValues?.[field.id] as Record<string, unknown> | undefined
+            )?.[locale]
+          "
+          :loading
+          :disabled="field.disabled"
+          :component-id="props.componentId"
+          :page-id="props.pageId"
+          class="w-full"
+          :class="{ 'opacity-75': field.disabled }"
+          v-bind="field.component.options || {}"
+          @update:model-value="setLocaleValue(locale, $event)"
+        />
+        <template v-if="hasMainError" #error="{ error }">
+          <DmsFormErrorText :error />
+        </template>
+      </UFormField>
       <div class="mt-1 flex justify-end">
         <UButton
           :label="$t('dms.form.localized.toggle_translations')"
@@ -97,14 +167,14 @@ const showDisplay = computed(
           @click="toggleTranslations"
         />
       </div>
-    </UFormField>
+    </div>
 
     <UCollapsible v-model:open="isExpanded" :ui="{ content: 'p-0.5' }">
       <template #content>
         <UCard :ui="{ body: 'sm:p-4' }">
           <div class="space-y-4">
             <div
-              v-for="lang in locales"
+              v-for="lang in otherLocales"
               :key="lang.code"
               class="flex items-start gap-3"
             >
@@ -115,10 +185,13 @@ const showDisplay = computed(
               </div>
 
               <div class="flex-1">
-                <UFormField :name="`${field.id}.${lang.code}`">
+                <UFormField
+                  :name="`${field.id}.${lang.code}`"
+                  :data-field="`${field.id}.${lang.code}`"
+                >
                   <DmsDisplay
-                    v-if="showDisplay && fieldValue"
-                    :model-value="fieldValue[lang.code]"
+                    v-if="showDisplay"
+                    :model-value="localeValues[lang.code]"
                     :type="field.type"
                     :loading
                     class="w-full"
@@ -129,9 +202,9 @@ const showDisplay = computed(
                       resolveDmsComponent(field.component.componentName) ||
                       field.component.componentName
                     "
-                    v-else-if="field.component.componentName && fieldValue"
+                    v-else-if="field.component.componentName"
                     :id="`${field.id}_${lang.code}`"
-                    v-model="fieldValue[lang.code]"
+                    :model-value="localeValues[lang.code] ?? EMPTY_TEXT"
                     :loading
                     :disabled="field.disabled"
                     :component-id="props.componentId"
@@ -139,7 +212,11 @@ const showDisplay = computed(
                     class="w-full"
                     :class="{ 'opacity-75': field.disabled }"
                     v-bind="field.component.options || {}"
+                    @update:model-value="setLocaleValue(lang.code, $event)"
                   />
+                  <template #error="{ error }">
+                    <DmsFormErrorText :error />
+                  </template>
                 </UFormField>
               </div>
             </div>

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

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+interface BooleanCardProps {
+  id?: string;
+  /** Icon in a well at the start of the card. */
+  icon?: string;
+  /** Title of the card. */
+  label?: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+const props = defineProps<BooleanCardProps>();
+const model = defineModel<boolean | null | undefined>();
+
+const isOn = computed({
+  get: () => model.value === true,
+  set: (value: boolean) => (model.value = value),
+});
+</script>
+
+<template>
+  <!-- A choice that deserves more than a bare switch: a bordered row with
+    its own title and explanation. -->
+  <div
+    class="border-default flex items-start gap-3 rounded-md border bg-(--dms-bg-muted) px-3.5 py-3"
+  >
+    <!-- No icon on phones: it left the text a narrow column. -->
+    <span
+      v-if="props.icon"
+      class="border-default bg-default text-muted grid size-[34px] shrink-0 place-items-center rounded-[9px] border max-sm:hidden"
+    >
+      <UIcon :name="props.icon" class="size-[18px]" />
+    </span>
+    <label :for="props.id" class="min-w-0 flex-1 cursor-pointer">
+      <b
+        v-if="props.label"
+        class="text-highlighted block text-[13px] font-semibold"
+      >
+        {{ props.label }}
+      </b>
+      <span
+        v-if="props.description"
+        class="text-muted mt-0.5 block text-[12.5px]/normal"
+      >
+        {{ props.description }}
+      </span>
+    </label>
+    <USwitch
+      :id="props.id"
+      v-model="isOn"
+      :disabled="props.disabled"
+      class="mt-0.5"
+    />
+  </div>
+</template>

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

@@ -4,6 +4,9 @@ import type {
   CalendarSlots,
 } from "@nuxt/ui/components/Calendar.vue";
 import { useForwardPropsEmits } from "reka-ui";
+import { useUserRegionalPreferences } from "#dms-core/app/composables/user/useUserRegionalPreferences";
+import { useFormField } from "@nuxt/ui/composables/useFormField";
+import { FIELD_RING_INVALID_CLASS } from "../../../build/utils/fieldTrigger";
 import {
   parseDate,
   fromDate,
@@ -35,7 +38,14 @@ type DateValue =
   | null
   | undefined;
 
-const props = defineProps<CalendarProps<R, M>>();
+interface DmsCalendarProps extends CalendarProps<R, M> {
+  /** Earliest day that can be picked (ISO date). */
+  minDate?: string;
+  /** Latest day that can be picked (ISO date). */
+  maxDate?: string;
+}
+
+const props = defineProps<DmsCalendarProps>();
 const emits = defineEmits<{
   "update:modelValue": [
     value:
@@ -50,6 +60,8 @@ const emits = defineEmits<{
 }>();
 defineSlots<CalendarSlots>();
 
+const { weekStartsOn } = useUserRegionalPreferences();
+
 function convertIsoStringToCalendarDate(value: string): CalendarDate {
   return parseDate(value.split("T")[0]!);
 }
@@ -96,15 +108,49 @@ function convertModelValue(value: DateValue): DateValue {
   return value;
 }
 
-const convertedProps = computed(() => ({
-  ...props,
-  modelValue: convertModelValue(props.modelValue as DateValue),
-}));
+// An inline calendar has no border: an invalid field rings it.
+const {
+  color: fieldColor,
+  ariaAttrs,
+  emitFormChange,
+} = useFormField(
+  // Its props typing knows only Nuxt UI colours and sizes; it reads `id`,
+  // `color` and `disabled` from these.
+  props as Parameters<typeof useFormField>[0],
+);
+const invalid = computed(() => fieldColor.value === "error");
+
+function toBoundDate(value: string | undefined): CalendarDate | undefined {
+  return value ? convertIsoStringToCalendarDate(value) : undefined;
+}
+
+const convertedProps = computed(() => {
+  const { minDate: _minDate, maxDate: _maxDate, ...calendarProps } = props;
+  return {
+    ...calendarProps,
+    color:
+      (calendarProps.color as string) === "error"
+        ? undefined
+        : calendarProps.color,
+    modelValue: convertModelValue(calendarProps.modelValue as DateValue),
+  };
+});
+
+// Bound on the calendar itself: forwarding only passes props this component
+// was given, and the bounds arrive as `minDate` / `maxDate`.
+const minValue = computed(() => props.minValue ?? toBoundDate(props.minDate));
+const maxValue = computed(() => props.maxValue ?? toBoundDate(props.maxDate));
 
 type EmitEvent = string;
 type EmitValue = unknown;
 
 const wrappedEmits = (event: EmitEvent, value: EmitValue) => {
+  forwardEmit(event, value);
+  // After the update: the field re-validates its new value.
+  if (event === "update:modelValue") emitFormChange();
+};
+
+function forwardEmit(event: EmitEvent, value: EmitValue): void {
   if (event === "update:modelValue" && value) {
     if (Array.isArray(value)) {
       const isoStrings = (value as CalendarDate[]).map((date) =>
@@ -131,7 +177,7 @@ const wrappedEmits = (event: EmitEvent, value: EmitValue) => {
     const forwardEvent = emits as (event: string, ...args: unknown[]) => void;
     forwardEvent(event, value);
   }
-};
+}
 
 const forwarded = useForwardPropsEmits(
   convertedProps,
@@ -140,5 +186,11 @@ const forwarded = useForwardPropsEmits(
 </script>
 
 <template>
-  <UCalendar v-bind="forwarded" />
+  <UCalendar
+    v-bind="{ ...forwarded, ...ariaAttrs }"
+    :week-starts-on="props.weekStartsOn ?? weekStartsOn"
+    :min-value="minValue"
+    :max-value="maxValue"
+    :class="invalid && FIELD_RING_INVALID_CLASS"
+  />
 </template>

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

@@ -10,6 +10,13 @@ import {
   type CascaderKeyMapping,
   type CascaderNode,
 } from "../../../utils/cascader";
+import { useFormField } from "@nuxt/ui/composables/useFormField";
+import {
+  FIELD_TRIGGER_CLASS,
+  FIELD_TRIGGER_ICON,
+  FIELD_TRIGGER_INVALID_CLASS,
+  FIELD_TRIGGER_UI,
+} from "../../../build/utils/fieldTrigger";
 
 interface CascaderProps {
   searchUrl: string;
@@ -38,6 +45,16 @@ const emit = defineEmits<{
   "update:modelValue": [value: string | string[] | undefined];
 }>();
 
+// The field state UFormField hands its control: the error border and aria
+// attributes go on the trigger (not on the search input of the panel).
+const {
+  color: fieldColor,
+  ariaAttrs,
+  emitFormBlur,
+  emitFormChange,
+} = useFormField(props);
+const invalid = computed(() => fieldColor.value === "error");
+
 const instanceId = useId();
 const { $authFetch } = useAuthFetch();
 const toast = useToast();
@@ -146,11 +163,13 @@ function selectNode(node: CascaderNode) {
       ? selectedValues.value.filter((value) => value !== node.value)
       : [...selectedValues.value, node.value];
     emit("update:modelValue", next);
+    emitFormChange();
     return;
   }
   const isDeselect =
     props.deselectable && selectedValues.value[0] === node.value;
   emit("update:modelValue", isDeselect ? undefined : node.value);
+  emitFormChange();
   if (!isDeselect && node.children.length === 0) {
     open.value = false;
   }
@@ -295,7 +314,10 @@ function syncActivePathToSelection() {
 }
 
 function handleOpenChange(isOpen: boolean) {
-  if (!isOpen) return;
+  if (!isOpen) {
+    emitFormBlur();
+    return;
+  }
   searchTerm.value = "";
   if (rows.value.length === 0) {
     void execute();
@@ -346,9 +368,15 @@ function nodeClasses(node: CascaderNode, isHighlighted: boolean): string[] {
         color="neutral"
         variant="outline"
         :disabled="props.disabled"
-        trailing-icon="i-ph-caret-up-down"
-        class="w-full justify-between font-normal"
+        :trailing-icon="FIELD_TRIGGER_ICON"
+        :ui="FIELD_TRIGGER_UI"
+        :class="[
+          'w-full justify-between',
+          FIELD_TRIGGER_CLASS,
+          invalid && FIELD_TRIGGER_INVALID_CLASS,
+        ]"
         :aria-label="placeholderLabel"
+        v-bind="ariaAttrs"
       >
         <span v-if="triggerLabel" class="truncate">{{ triggerLabel }}</span>
         <span v-else class="text-dimmed truncate">{{ placeholderLabel }}</span>
@@ -381,7 +409,7 @@ function nodeClasses(node: CascaderNode, isHighlighted: boolean): string[] {
             v-else-if="rows.length === 0"
             class="text-muted w-52 px-2 py-6 text-center text-sm"
           >
-            {{ t("dms.tree.no_entries") }}
+            {{ t("dms.form.cascader.no_entries") }}
           </div>
 
           <div

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

@@ -11,8 +11,16 @@ const emits = defineEmits<CheckboxEmits>();
 defineSlots<CheckboxSlots>();
 
 const forwarded = useForwardPropsEmits(props, emits);
+
+// The app-wide light icon weight is too thin inside a 16px box.
+const CHECK_ICON = "i-ph-check-bold";
+const INDETERMINATE_ICON = "i-ph-minus-bold";
 </script>
 
 <template>
-  <UCheckbox v-bind="forwarded" />
+  <UCheckbox
+    v-bind="forwarded"
+    :icon="props.icon ?? CHECK_ICON"
+    :indeterminate-icon="props.indeterminateIcon ?? INDETERMINATE_ICON"
+  />
 </template>

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

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { RadioGroupItem } from "@nuxt/ui/components/RadioGroup.vue";
+
+type ChoiceValue = string | number;
+
+interface ChoiceCardItem {
+  label: string;
+  value: ChoiceValue;
+  description?: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+interface ChoiceCardsProps {
+  id?: string;
+  items: ChoiceCardItem[];
+  /** Several cards picked: the value is the list of theirs. */
+  multiple?: boolean;
+  disabled?: boolean;
+}
+
+const props = defineProps<ChoiceCardsProps>();
+const model = defineModel<ChoiceValue | ChoiceValue[] | null | undefined>();
+
+// Nuxt UI's choice cards, as the v2 theme draws them: the options side by
+// side, wrapping, each with its description.
+const CARDS_UI = {
+  fieldset: "grid gap-2.5 @min-[480px]:grid-cols-2",
+};
+
+const items = computed(() => props.items as unknown as RadioGroupItem[]);
+const pickedMany = computed<ChoiceValue[]>({
+  get: () => (Array.isArray(model.value) ? model.value : []),
+  set: (value) => (model.value = value),
+});
+const pickedOne = computed<ChoiceValue | undefined>({
+  get: () =>
+    Array.isArray(model.value) ? undefined : (model.value ?? undefined),
+  set: (value) => (model.value = value),
+});
+</script>
+
+<template>
+  <div class="@container">
+    <UCheckboxGroup
+      v-if="props.multiple"
+      :id="props.id"
+      v-model="pickedMany"
+      :items="items"
+      :disabled="props.disabled"
+      variant="card"
+      :ui="CARDS_UI"
+    />
+    <URadioGroup
+      v-else
+      :id="props.id"
+      v-model="pickedOne"
+      :items="items"
+      :disabled="props.disabled"
+      variant="card"
+      :ui="CARDS_UI"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import DmsCopyButton from "../../copy/CopyButton.vue";
+
+interface CopyableTextProps {
+  id?: string;
+  placeholder?: string;
+}
+
+const props = defineProps<CopyableTextProps>();
+const model = defineModel<string | null | undefined>();
+</script>
+
+<template>
+  <!-- A value to read and copy (a webhook URL): never edited here. -->
+  <div class="flex min-w-0 items-center gap-2">
+    <UInput
+      :id="props.id"
+      :model-value="model ?? ''"
+      :placeholder="props.placeholder"
+      readonly
+      class="min-w-0 flex-1"
+      :ui="{ base: 'font-mono text-[12.5px]' }"
+    />
+    <DmsCopyButton v-if="model" :value="model" />
+  </div>
+</template>