@antelopejs/dms 0.9.8 → 0.10.0

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

@@ -5,7 +5,12 @@ import type {
 } from "../../../composables/form/types/field";
 import { isFieldGroup } from "../../../composables/form/types/field";
 import { FORM_ENTRY_CONTEXT_KEY } from "../../composables/form/formEntryContext";
-import { GROUP_FIELDS_CLASSES } from "../../composables/form/formLayout";
+import {
+  GROUP_FIELDS_CLASSES,
+  entryFields,
+  entryRowLayout,
+  GROUP_MEMBER_CLASSES,
+} from "../../composables/form/formLayout";
 import { combineSaveStates } from "#dms-layout/app/composables/layout/useInstantSaveHeader";
 import type { SaveStatusState } from "../../../components/save-bar/SaveStatus.vue";
 import DmsFormFieldControl from "./FormFieldControl.vue";
@@ -19,9 +24,15 @@ interface FormEntriesProps {
 
 const props = defineProps<FormEntriesProps>();
 const context = inject(FORM_ENTRY_CONTEXT_KEY)!;
+const { processI18n } = useTranslation();
 
 const classes = computed(() => context.layoutClasses(props.inSection));
 
+/** The row's layout: a wide field takes the full width under its label. */
+function rowOf(entry: FormFieldOrGroup) {
+  return entryRowLayout(classes.value.row, entryFields(entry));
+}
+
 function groupFieldsClass(group: FieldGroup): string {
   return GROUP_FIELDS_CLASSES[
     group.orientation === "vertical" ? "vertical" : "horizontal"
@@ -32,6 +43,12 @@ function isGroupVisible(group: FieldGroup): boolean {
   return group.fields.some((field) => !context.isFieldHidden(field));
 }
 
+// A description tells how to fill the field ("Left empty, the default rate
+// applies"): a form where nothing can be changed shows only the values.
+function descriptionOf(entry: FormFieldOrGroup): string | undefined {
+  return context.isReadOnly.value ? undefined : entry.description;
+}
+
 function isGroupRequired(group: FieldGroup): boolean {
   return group.fields.some(context.isFieldRequired);
 }
@@ -51,9 +68,9 @@ function saveStateOf(entry: FormFieldOrGroup): SaveStatusState {
       <template v-if="isFieldGroup(entry)">
         <DmsFieldRow
           v-if="isGroupVisible(entry)"
-          v-bind="classes.row"
+          v-bind="rowOf(entry)"
           :label="entry.label || ''"
-          :description="entry.description"
+          :description="descriptionOf(entry)"
           :required="isGroupRequired(entry)"
         >
           <template v-if="saveStateOf(entry) !== 'idle'" #details>
@@ -63,14 +80,32 @@ function saveStateOf(entry: FormFieldOrGroup): SaveStatusState {
             />
           </template>
           <div :class="groupFieldsClass(entry)">
+            <!-- The group's label heads the cluster; each member keeps its
+                 own above its control, so a group can title a run of
+                 labelled fields. -->
             <template v-for="field in entry.fields" :key="field.id">
-              <DmsFormFieldControl
+              <div
                 v-if="
                   field.component.componentName && !context.isFieldHidden(field)
                 "
-                :field
-                class="min-w-0 flex-1"
-              />
+                :class="GROUP_MEMBER_CLASSES.root"
+              >
+                <label
+                  v-if="field.label"
+                  :for="field.id"
+                  :class="GROUP_MEMBER_CLASSES.label"
+                >
+                  {{ processI18n(field.label) }}
+                  <span
+                    v-if="context.isFieldRequired(field)"
+                    class="text-error"
+                    aria-hidden="true"
+                  >
+                    *
+                  </span>
+                </label>
+                <DmsFormFieldControl :field class="min-w-0" />
+              </div>
             </template>
           </div>
         </DmsFieldRow>
@@ -78,10 +113,10 @@ function saveStateOf(entry: FormFieldOrGroup): SaveStatusState {
 
       <DmsFieldRow
         v-else-if="!context.isFieldHidden(entry)"
-        v-bind="classes.row"
+        v-bind="rowOf(entry)"
         :label="entry.label || ''"
         :label-for="entry.id"
-        :description="entry.description"
+        :description="descriptionOf(entry)"
         :required="context.isFieldRequired(entry)"
       >
         <template v-if="saveStateOf(entry) !== 'idle'" #details>

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

@@ -15,14 +15,18 @@ interface FormErrorSummaryProps {
 const props = defineProps<FormErrorSummaryProps>();
 const emit = defineEmits<{ select: [fieldId: string] }>();
 const { t } = useI18n();
+
+// Every field fixed: the summary says so in place, on as many lines, rather
+// than leaving and moving the form up under the pointer.
+const isResolved = computed(() => props.items.length === 0);
 </script>
 
 <template>
   <UAlert
-    color="error"
+    :color="isResolved ? 'success' : 'error'"
     variant="subtle"
-    icon="i-ph-warning-circle"
-    role="alert"
+    :icon="isResolved ? 'i-ph-check-circle' : 'i-ph-warning-circle'"
+    :role="isResolved ? 'status' : 'alert'"
     :title="
       t(
         'dms.form.error_summary.title',
@@ -32,7 +36,10 @@ const { t } = useI18n();
     "
   >
     <template #description>
-      <ul class="mt-1 flex flex-wrap gap-x-4 gap-y-1">
+      <p v-if="isResolved" class="mt-1">
+        {{ t("dms.form.error_summary.resolved") }}
+      </p>
+      <ul v-else class="mt-1 flex flex-wrap gap-x-4 gap-y-1">
         <li v-for="item in props.items" :key="item.id">
           <a
             :href="`#${item.id}`"

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

@@ -11,6 +11,7 @@ import {
 import { formErrorsInjectionKey } from "@nuxt/ui/composables/useFormField";
 import DmsFormErrorText from "./FormErrorText.vue";
 import DmsFormFieldNotes from "./FormFieldNotes.vue";
+import { readonlyFieldValue } from "../../composables/form/readonlyValue";
 
 interface FormFieldControlProps {
   field: FormField;
@@ -22,13 +23,30 @@ const { state, initialValues, loading } = context;
 const { processI18n } = useTranslation();
 
 const isDisabled = computed(() => context.isFieldDisabled(props.field));
+// A list of rows reads best as its rows, its own control disabled: the
+// display of a cell only counts them. An empty one still reads "empty".
+const READS_AS_CONTROL = new Set(["array", "key_value"]);
+const hasRows = (value: unknown): boolean =>
+  !!value && typeof value === "object" && Object.keys(value).length > 0;
+const showsDisplay = computed(
+  () =>
+    isDisabled.value &&
+    !!props.field.type &&
+    !(
+      READS_AS_CONTROL.has(props.field.type) &&
+      hasRows(state.value[props.field.id])
+    ),
+);
 const component = computed(() => {
   const name = props.field.component.componentName;
   return name ? resolveDmsComponent(name) || name : null;
 });
-// The hint under the control, which describes it (`aria-describedby`).
+// The hint under the control, which describes it (`aria-describedby`): a
+// read-only field has no control to fill, and no hint telling how.
 const hint = computed(() =>
-  props.field.hint ? processI18n(props.field.hint) : undefined,
+  props.field.hint && !isDisabled.value
+    ? processI18n(props.field.hint)
+    : undefined,
 );
 // UFormField shows its error slot whenever one is given, in the hint's
 // place: it gets one only while the field holds an error.
@@ -37,6 +55,17 @@ const hasError = computed(() => {
   const pattern = fieldErrorPattern(props.field.id);
   return !!formErrors?.value.some((error) => pattern.test(error.name ?? ""));
 });
+// A read-only relation shows the row the server joined (its label, its
+// avatar), as a table cell does, rather than the id its state holds.
+const { getDataType } = useDataTypes();
+const readonlyValue = computed(() =>
+  readonlyFieldValue(
+    state.value[props.field.id],
+    initialValues.value?.[props.field.id],
+    props.field.type ? getDataType(props.field.type) : undefined,
+    props.field.component.options,
+  ),
+);
 // What a read-only field shows beside its value: a pill, a link.
 const readonly = computed<FormFieldReadonly>(() =>
   typeof props.field.readonly === "object" ? props.field.readonly : {},
@@ -44,7 +73,9 @@ const readonly = computed<FormFieldReadonly>(() =>
 </script>
 
 <template>
-  <div class="grid min-w-0 gap-1.5">
+  <!-- One explicit column (minmax(0, 1fr)): an implicit one grows to its
+       widest content, a long date or select label, past a narrow card. -->
+  <div class="grid min-w-0 grid-cols-1 gap-1.5">
     <DmsLocalizedField
       v-if="field.localized"
       v-model="state[field.id] as Record<string, string> | undefined"
@@ -63,13 +94,15 @@ const readonly = computed<FormFieldReadonly>(() =>
       :help="hint"
     >
       <div
-        v-if="isDisabled && !!field.type"
+        v-if="showsDisplay"
         class="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1"
       >
         <DmsDisplay
-          :model-value="state[field.id]"
+          :model-value="readonlyValue"
           :type="field.type"
           :loading
+          :label="field.label ? processI18n(field.label) : undefined"
+          :row="state"
           class="min-w-0"
           v-bind="field.component.options || {}"
         />

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

@@ -24,10 +24,12 @@ const defaultValue = computed(() => props.field.defaultValue);
 const showsChange = computed(
   () => context.showsChanges && context.isFieldChanged(props.field.id),
 );
-// "Module default · Use default" on a value that is not the default, unless
-// the change line already says what it was.
+// "Module default · Use default" on a value that is not the default, for a
+// field that offers it (a setting, not a record's initial value), unless the
+// change line already says what it was.
 const showsDefault = computed(
   () =>
+    !!props.field.offersDefault &&
     defaultValue.value !== undefined &&
     !context.isFieldDisabled(props.field) &&
     !sameFormValue(value.value, defaultValue.value) &&
@@ -51,7 +53,26 @@ function wordValue(raw: unknown): VNodeChild | undefined {
   return undefined;
 }
 
-const wordedBaseline = computed(() => wordValue(baseline.value));
+/**
+ * The baseline as the form loaded it. A type keeping less in the form than
+ * it reads (a relation keeps the ids of the rows the server joined) words
+ * the loaded value, its label, while that is still the baseline.
+ */
+const loadedBaseline = computed(() => {
+  const loaded = context.initialValues.value[props.field.id];
+  const dataType = props.field.type ? getDataType(props.field.type) : undefined;
+  if (!dataType?.beforeStateMapper || isEmptyFormValue(loaded)) {
+    return baseline.value;
+  }
+  const options = props.field.component.options;
+  const mapped = dataType.beforeStateMapper(loaded, options);
+  const isSame = dataType.isSameValue
+    ? dataType.isSameValue(mapped, baseline.value, options)
+    : sameFormValue(mapped, baseline.value);
+  return isSame ? loaded : baseline.value;
+});
+
+const wordedBaseline = computed(() => wordValue(loadedBaseline.value));
 
 function useDefault(): void {
   context.state.value[props.field.id] = JSON.parse(
@@ -61,7 +82,10 @@ function useDefault(): void {
 </script>
 
 <template>
-  <div v-if="showsChange || showsDefault" class="grid gap-0.5 text-xs">
+  <div
+    v-if="showsChange || showsDefault"
+    class="grid min-w-0 gap-0.5 text-xs break-words"
+  >
     <p
       v-if="showsChange"
       class="text-muted flex flex-wrap items-center gap-1.5"
@@ -88,7 +112,7 @@ function useDefault(): void {
         color="primary"
         variant="link"
         size="xs"
-        class="p-0"
+        class="p-0 text-start whitespace-normal"
         @click="useDefault"
       />
     </p>

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

@@ -63,8 +63,10 @@ const ITEM_CLASSES: Record<FormSectionNavVariant, string> = {
     "border-default text-muted hover:text-default flex h-7 shrink-0 items-center gap-1.5 rounded-full border px-3 text-[12.5px]",
 };
 
+// The current section carries a mark of its own, so the entry under the
+// pointer never reads as a second current one.
 const ACTIVE_CLASSES: Record<FormSectionNavVariant, string> = {
-  list: "bg-elevated text-highlighted font-[550]",
+  list: "bg-elevated text-highlighted font-[550] shadow-[inset_2px_0_0_var(--ui-primary)]",
   chips: "border-accented bg-elevated text-highlighted",
 };
 

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

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { FormSectionNav } from "../../../composables/form/types/field";
-import type {
-  FormSectionState,
-  FormSectionsLayout,
+import {
+  currentSectionId,
+  type FormSectionState,
+  type FormSectionsLayout,
 } from "../../composables/form/formSections";
 import DmsFormEntries from "./FormEntries.vue";
 import DmsFormSectionNav from "./FormSectionNav.vue";
+import { scrollParent, scrollWithin } from "../../utils/scrollWithin";
 
 interface FormSectionsProps {
   layout: FormSectionsLayout;
@@ -17,9 +19,15 @@ interface FormSectionsProps {
 
 const props = defineProps<FormSectionsProps>();
 
-// A section is current once its top passes this band near the top of the
-// viewport: the one being read, not the one merely peeking in at the bottom.
-const SPY_ROOT_MARGIN = "0px 0px -65% 0px";
+// A section is current once its top passes this line, a third of the way
+// down the visible area: the one being read, not the one merely peeking in
+// at the bottom.
+const READING_LINE_RATIO = 0.35;
+// A scroll this close to the end is at the end (subpixel rounding).
+const END_TOLERANCE_PX = 2;
+// A picked section stays current until the scroll it started has settled:
+// on its way, the smooth scroll passes the sections in between.
+const SCROLL_SETTLE_MS = 150;
 
 const activeId = ref(props.layout.sections[0]?.id);
 const sectionElements = useTemplateRef<HTMLElement[]>("sectionElements");
@@ -28,45 +36,116 @@ function anchorId(sectionId: string): string {
   return `${props.formId}-section-${sectionId}`;
 }
 
+let pickedTimer: ReturnType<typeof setTimeout> | undefined;
+let isPicked = false;
+
+function holdPicked(): void {
+  clearTimeout(pickedTimer);
+  pickedTimer = setTimeout(() => {
+    isPicked = false;
+  }, SCROLL_SETTLE_MS);
+}
+
 function scrollToSection(sectionId: string): void {
   activeId.value = sectionId;
-  document
-    .getElementById(anchorId(sectionId))
-    ?.scrollIntoView({ behavior: "smooth", block: "start" });
+  isPicked = true;
+  holdPicked();
+  const section = document.getElementById(anchorId(sectionId));
+  if (section) scrollWithin(section, { behavior: "smooth", block: "start" });
   history.replaceState(history.state, "", `#${anchorId(sectionId)}`);
 }
 
-let observer: IntersectionObserver | undefined;
-const visible = new Set<string>();
+interface SpyViewport {
+  top: number;
+  height: number;
+  isAtEnd: boolean;
+}
 
-function onIntersect(entries: IntersectionObserverEntry[]): void {
-  for (const entry of entries) {
-    const id = (entry.target as HTMLElement).dataset.section;
-    if (!id) continue;
-    if (entry.isIntersecting) visible.add(id);
-    else visible.delete(id);
+// Scrolled at all, and to the end: a form that fits never scrolls, and its
+// first section stays current.
+function isScrolledToEnd(
+  scrollTop: number,
+  height: number,
+  scrollHeight: number,
+): boolean {
+  return scrollTop > 0 && scrollTop + height >= scrollHeight - END_TOLERANCE_PX;
+}
+
+function spyViewport(scroller: HTMLElement | null): SpyViewport {
+  if (scroller) {
+    return {
+      top: scroller.getBoundingClientRect().top,
+      height: scroller.clientHeight,
+      isAtEnd: isScrolledToEnd(
+        scroller.scrollTop,
+        scroller.clientHeight,
+        scroller.scrollHeight,
+      ),
+    };
   }
-  const first = props.layout.sections.find((section) =>
-    visible.has(section.id),
-  );
-  if (first) activeId.value = first.id;
+  const root = document.documentElement;
+  return {
+    top: 0,
+    height: window.innerHeight,
+    isAtEnd: isScrolledToEnd(
+      window.scrollY,
+      window.innerHeight,
+      root.scrollHeight,
+    ),
+  };
 }
 
-onMounted(() => {
-  if (props.nav === "none" || typeof IntersectionObserver === "undefined") {
+function updateActiveSection(): void {
+  const elements = sectionElements.value ?? [];
+  const first = elements[0];
+  if (!first) return;
+  const viewport = spyViewport(scrollParent(first));
+  const id = currentSectionId({
+    sections: elements.map((element) => ({
+      id: element.dataset.section ?? "",
+      top: element.getBoundingClientRect().top - viewport.top,
+    })),
+    readingLine: viewport.height * READING_LINE_RATIO,
+    isAtEnd: viewport.isAtEnd,
+  });
+  if (id) activeId.value = id;
+}
+
+let frame: number | undefined;
+
+// Captured on the document: whichever container scrolls the form (the page
+// body, a drawer, the window) reports here, even one that only became
+// scrollable once the form loaded.
+function onScroll(): void {
+  if (isPicked) {
+    holdPicked();
     return;
   }
-  observer = new IntersectionObserver(onIntersect, {
-    rootMargin: SPY_ROOT_MARGIN,
+  if (frame !== undefined) return;
+  frame = requestAnimationFrame(() => {
+    frame = undefined;
+    updateActiveSection();
+  });
+}
+
+onMounted(() => {
+  if (props.nav === "none") return;
+  document.addEventListener("scroll", onScroll, {
+    capture: true,
+    passive: true,
   });
-  for (const element of sectionElements.value ?? []) observer.observe(element);
   const linked = props.layout.sections.find(
     (section) => location.hash === `#${anchorId(section.id)}`,
   );
   if (linked) scrollToSection(linked.id);
+  else updateActiveSection();
 });
 
-onBeforeUnmount(() => observer?.disconnect());
+onBeforeUnmount(() => {
+  document.removeEventListener("scroll", onScroll, { capture: true });
+  clearTimeout(pickedTimer);
+  if (frame !== undefined) cancelAnimationFrame(frame);
+});
 </script>
 
 <template>

package/frontend-vue/layers/dms-ui/app/build/components/table/Actions.vue

@@ -106,6 +106,10 @@ const theme = tv({
 
 interface TableActionsProps {
   canAddRow?: boolean;
+  /** The add action's configured label (`$`: i18n key); "New entry" without. */
+  addLabel?: string;
+  /** The add action's configured icon; the theme's plus without. */
+  addIcon?: string;
   /** Shows the archive mode toggle, bound to the `showArchived` model. */
   archiveToggle?: boolean;
   customButtons?: CustomButton[];
@@ -162,6 +166,10 @@ const appConfig = useDmsAppConfig() as DmsAppConfig & {
 
 const { t } = useI18n();
 const { processI18n } = useTranslation();
+const addRowLabel = computed(() =>
+  props.addLabel ? processI18n(props.addLabel) : t("dms.table.new_row"),
+);
+const addRowIcon = computed(() => props.addIcon ?? appConfig.ui.icons.plus);
 
 const searchActive = ref(false);
 const searchInputRef = ref<HTMLInputElement>();
@@ -625,16 +633,16 @@ const uiTableActions = computed(() => uiTableActionsVariant());
 
     <UButton
       v-if="canAddRow"
-      :label="t('dms.table.new_row')"
-      :icon="appConfig.ui.icons.plus"
+      :label="addRowLabel"
+      :icon="addRowIcon"
       :class="uiTableActions.add()"
       size="sm"
       @click="tableSharedData!.emits('add')"
     />
     <UButton
       v-if="canAddRow"
-      :aria-label="t('dms.table.new_row')"
-      :icon="appConfig.ui.icons.plus"
+      :aria-label="addRowLabel"
+      :icon="addRowIcon"
       :class="uiTableActions.addMobile()"
       size="sm"
       @click="tableSharedData!.emits('add')"

package/frontend-vue/layers/dms-ui/app/build/components/table/Empty.vue

@@ -211,10 +211,12 @@ const builtInActions = computed(() => {
     ];
   }
   if (props.canAddRow) {
+    const addLabel = tableSharedData.value?.addLabel;
+    const addIcon = tableSharedData.value?.addIcon;
     return [
       {
-        label: t("dms.table.new_row"),
-        icon: "i-ph-plus",
+        label: addLabel ? processI18n(addLabel) : t("dms.table.new_row"),
+        icon: addIcon ?? "i-ph-plus",
         color: "primary" as const,
         size: "md" as const,
         onClick: () => tableSharedData.value?.emits("add"),

package/frontend-vue/layers/dms-ui/app/build/components/table/FiltersRow.vue

@@ -13,7 +13,12 @@ import type {
 } from "./Table.vue";
 import TableMenuFilter from "./MenuFilter.vue";
 import { formatFilterValue } from "../../composables/table/utils/formatFilterValue";
+import { filterEditorValue } from "../../composables/table/utils/filterEditorValue";
 import { clearTableFiltersLabelKey } from "../../composables/table/utils/clearTableFilters";
+import {
+  type RelationFilterSource,
+  useRelationFilterLabels,
+} from "../../composables/table/useRelationFilterLabels";
 
 // v2 filters band: a muted strip of segmented chips (field │ mode │ value │ ×);
 // a chip opens its value editor in a popover.
@@ -155,6 +160,16 @@ const addFilterOpen = ref(false);
 const { locale } = useI18n();
 const { getDataType } = useDataTypes();
 
+// What a chip's editor holds: a view's text value read as its column's type.
+const editorValue = (filter: TableFilter): unknown => {
+  const typeId = getColumn(filter.accessorKey)?.type?.id;
+  return filterEditorValue(
+    typeId ? getDataType(typeId) : undefined,
+    filter.mode,
+    filter.value,
+  );
+};
+
 // Select-like filters show the option labels, not the raw stored values
 // (their formatter renders a pill, which a chip can't hold).
 const itemLabels = (filter: TableFilter): string | undefined => {
@@ -170,7 +185,29 @@ const itemLabels = (filter: TableFilter): string | undefined => {
   return labels.length ? labels.join(", ") : undefined;
 };
 
+// A relation filter holds the related rows' ids: its chip names the rows,
+// read from where the column's data type says they live (its `select` route).
+const relationSource = (
+  filter: TableFilter,
+): RelationFilterSource | undefined => {
+  const column = getColumn(filter.accessorKey);
+  const component = resolveFilterComponent(filter);
+  if (!column?.type || !component) return undefined;
+  const source = getDataType(column.type.id)?.selectSource?.(component.options);
+  return source ? { ...source, value: filter.value } : undefined;
+};
+
+const { labelsOf: relationLabels } = useRelationFilterLabels(() =>
+  [...urlFilters.value, ...filters.value].flatMap((filter) => {
+    const source = relationSource(filter);
+    return source ? [source] : [];
+  }),
+);
+
 const displayValue = (filter: TableFilter): string => {
+  const source = relationSource(filter);
+  const names = source ? relationLabels(source) : [];
+  if (names.length) return names.join(", ");
   const labels = itemLabels(filter);
   if (labels) return labels;
   const formatted = formatFilterValue(
@@ -251,7 +288,7 @@ const chipTitle = (filter: TableFilter, label?: string): string =>
                     )
                   "
                   v-if="resolveFilterComponent(filter)"
-                  :model-value="filter.value"
+                  :model-value="editorValue(filter)"
                   :class="ui.inputWrapper()"
                   v-bind="
                     JSON.parse(