@antelopejs/dms 0.10.0 → 0.11.0

package/frontend-vue/layers/dms-ui/app/build/utils/streamHighlight.ts

@@ -0,0 +1,90 @@
+// A CodeMirror stream parser (a language written as a line tokenizer, like
+// the shell's) run for read-only highlighting. `StreamLanguage` would do it
+// inside an editor state, and so pull CodeMirror's view and state into every
+// page showing a snippet: this drives the parser the same way, line by line
+// over `StringStream`, and names its tokens' tags the same way.
+import { type StreamParser, StringStream } from "@codemirror/streamparser";
+import { type Highlighter, type Tag, tags } from "@lezer/highlight";
+
+/** Receives one styled range of the code: its offsets and its classes. */
+export type HighlightedRange = (
+  from: number,
+  to: number,
+  classes: string,
+) => void;
+
+// CodeMirror's defaults, which `StreamLanguage` hands every stream.
+const TAB_SIZE = 4;
+const INDENT_UNIT = 2;
+// Zero-length tokens a parser may return in a row (each one changing its
+// state) before the stream moves on by itself, as `StreamLanguage` allows.
+const MAX_EMPTY_TOKENS = 10;
+
+type TagValue = Tag | readonly Tag[] | ((tag: Tag) => Tag);
+const TAG_TABLE = tags as unknown as Record<string, TagValue | undefined>;
+const tagsByName = new Map<string, Tag[]>();
+
+// A token type names tags the way `StreamLanguage` reads them: space
+// separated, each a tag followed by its modifiers (`variableName.special`).
+function tagsOf(type: string): Tag[] {
+  const cached = tagsByName.get(type);
+  if (cached) return cached;
+  const resolved = type.split(" ").flatMap((name) => {
+    let found: Tag[] = [];
+    for (const part of name.split(".")) {
+      const value = TAG_TABLE[part];
+      if (typeof value === "function") found = found.map(value);
+      else if (value && !found.length)
+        found = Array.isArray(value) ? [...value] : [value as Tag];
+    }
+    return found;
+  });
+  tagsByName.set(type, resolved);
+  return resolved;
+}
+
+/**
+ * Tokenizes `code` with `parser` and calls `put` for each range its
+ * highlighter styles, adjacent ranges of one style merged, as
+ * `highlightTree` reports a parsed tree.
+ */
+export function highlightStream<State>(
+  parser: StreamParser<State>,
+  code: string,
+  highlighter: Highlighter,
+  put: HighlightedRange,
+): void {
+  const state = parser.startState?.(INDENT_UNIT) ?? (true as State);
+  let pending: { from: number; to: number; classes: string } | null = null;
+  const flush = () => {
+    if (pending) put(pending.from, pending.to, pending.classes);
+    pending = null;
+  };
+  const add = (from: number, to: number, classes: string | null) => {
+    if (pending && (pending.to !== from || pending.classes !== classes))
+      flush();
+    if (!classes) return;
+    if (pending) pending.to = to;
+    else pending = { from, to, classes };
+  };
+
+  let lineStart = 0;
+  for (const line of code.split("\n")) {
+    if (!line) parser.blankLine?.(state, INDENT_UNIT);
+    const stream = new StringStream(line, TAB_SIZE, INDENT_UNIT);
+    let emptyTokens = 0;
+    while (!stream.eol()) {
+      stream.start = stream.pos;
+      const type = parser.token(stream, state);
+      if (stream.pos === stream.start) {
+        if (++emptyTokens < MAX_EMPTY_TOKENS) continue;
+        stream.next();
+      }
+      emptyTokens = 0;
+      const classes = type ? highlighter.style(tagsOf(type)) : null;
+      add(lineStart + stream.start, lineStart + stream.pos, classes);
+    }
+    lineStart += line.length + 1;
+  }
+  flush();
+}

package/frontend-vue/layers/dms-ui/app/components/code-snippet/CodeSnippet.vue

@@ -1,18 +1,21 @@
 <script setup lang="ts">
-import { computed, onMounted, shallowRef } from "vue";
+import { computed, onMounted, shallowRef, watch } from "vue";
 import DmsCopyButton from "../copy/CopyButton.vue";
 import {
   codeLanguageLabel,
   PLAIN_CODE_LANGUAGE,
   resolveCodeLanguage,
 } from "../../build/utils/codeLanguages";
-import type { CodeToken, highlightCode } from "../../build/utils/codeHighlight";
+import type {
+  CodeHighlighter,
+  CodeToken,
+} from "../../build/utils/codeHighlight";
 
 // Read-only code in the editor's look: a head with the title, the language
 // and a copy button, then the code highlighted by the editor's languages.
 // Without a title or a language there is no head: the copy button floats in
-// the code's corner. Until the highlighter loads (and on the server) the
-// code shows as is.
+// the code's corner. Until its language's grammar loads (and on the server)
+// the code shows as is.
 
 /**
  * How long lines break: `false` scrolls them sideways, `true` wraps them
@@ -63,7 +66,7 @@ const WRAP_CLASSES: Record<"false" | "true" | "anywhere", string> = {
   anywhere: "whitespace-pre-wrap [overflow-wrap:anywhere]",
 };
 
-const highlight = shallowRef<typeof highlightCode | null>(null);
+const highlight = shallowRef<CodeHighlighter | null>(null);
 
 const language = computed(() => resolveCodeLanguage(props.language));
 // A language given, even `text`, is named in a head; without a title either,
@@ -79,9 +82,7 @@ const wrapClass = computed(
   () => WRAP_CLASSES[String(props.wrap) as keyof typeof WRAP_CLASSES],
 );
 const tokens = computed<CodeToken[]>(() =>
-  highlight.value
-    ? highlight.value(props.code, language.value)
-    : [{ text: props.code }],
+  highlight.value ? highlight.value(props.code) : [{ text: props.code }],
 );
 const sizeStyle = computed(() => {
   if (props.maxLines)
@@ -91,10 +92,20 @@ const sizeStyle = computed(() => {
   return props.maxHeight ? { maxHeight: props.maxHeight } : undefined;
 });
 
-onMounted(async () => {
-  const module = await import("../../build/utils/codeHighlight");
-  highlight.value = module.highlightCode;
-});
+// Only the grammar of the language shown loads. A language changed while
+// one loads drops it: the code stays plain until its own grammar is in.
+async function loadHighlighter(): Promise<void> {
+  const requested = language.value;
+  highlight.value = null;
+  const { loadCodeHighlighter } = await import(
+    "../../build/utils/codeHighlight"
+  );
+  const highlighter = await loadCodeHighlighter(requested);
+  if (language.value === requested) highlight.value = highlighter;
+}
+
+onMounted(loadHighlighter);
+watch(language, loadHighlighter);
 </script>
 
 <template>

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

@@ -326,6 +326,7 @@ const localizedSchema = computed(() => {
     id: field.id,
     type: field.type,
     localized: field.localized,
+    fallbackLocale: field.fallbackLocale,
     required: isFieldRequired(field),
     acceptance: isAcceptanceField(field),
   }));

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

@@ -6,7 +6,10 @@ import {
   findCascaderNode,
   formatCascaderPath,
   isCascaderNodeSelectable,
+  readCascaderAncestry,
   resolveCascaderKeyMapping,
+  buildCascaderPathLabels,
+  CASCADER_PATH_SEPARATOR,
   searchCascaderTree,
   type CascaderKeyMapping,
   type CascaderNode,
@@ -18,6 +21,7 @@ import {
   FIELD_TRIGGER_INVALID_CLASS,
   FIELD_TRIGGER_UI,
 } from "../../../build/utils/fieldTrigger";
+import { useRelationRows } from "../../../build/composables/data-types/relationRows";
 
 interface CascaderProps {
   searchUrl: string;
@@ -88,6 +92,36 @@ const { data, status, execute } = await useDmsAsyncData(
 );
 
 const keyMapping = computed(() => resolveCascaderKeyMapping(props.keyMapping));
+const selectedValues = computed<string[]>(() => {
+  if (Array.isArray(props.modelValue)) {
+    return props.modelValue.map(String);
+  }
+  return props.modelValue ? [String(props.modelValue)] : [];
+});
+
+// The picked rows and their ancestors, read by `?ids=` level by level: the
+// field names its value before the menu is opened, whatever the tree's size.
+const { readRelationRows } = useRelationRows();
+const { data: ancestry } = await useDmsAsyncData(
+  () => `cascader-value-${instanceId}-${selectedValues.value.join(",")}`,
+  () =>
+    selectedValues.value.length > 0
+      ? readCascaderAncestry(
+          (ids) =>
+            readRelationRows(
+              {
+                searchUrl: props.searchUrl,
+                keyMapping: { value: keyMapping.value.value },
+              },
+              ids,
+            ),
+          keyMapping.value,
+          selectedValues.value,
+        )
+      : Promise.resolve(undefined),
+  // The field's label, not the page's data.
+  { lazy: true, refreshOnPageRefresh: false },
+);
 const rows = computed(() => data.value?.results ?? []);
 const isPartial = computed(
   () => (data.value?.total ?? 0) > rows.value.length && rows.value.length > 0,
@@ -100,12 +134,6 @@ const selectionRules = computed(() => ({
   maxDepth: props.maxDepth,
 }));
 
-const selectedValues = computed<string[]>(() => {
-  if (Array.isArray(props.modelValue)) {
-    return props.modelValue.map(String);
-  }
-  return props.modelValue ? [String(props.modelValue)] : [];
-});
 const selectedSet = computed(() => new Set(selectedValues.value));
 
 const open = ref(false);
@@ -134,14 +162,11 @@ const columns = computed<CascaderNode[][]>(() => {
   return result;
 });
 
-function initialValueLabel(): string | undefined {
-  const source = Array.isArray(props.initialValue)
-    ? props.initialValue[0]
-    : props.initialValue;
-  if (!source || typeof source !== "object") return undefined;
-  const label = (source as Record<string, unknown>)[keyMapping.value.label];
-  return label === undefined || label === null ? undefined : String(label);
-}
+/** The picked id no row answers (deleted, out of reach), if it is one. */
+const notFoundValue = computed(() => {
+  const value = selectedValues.value[0];
+  return value && ancestry.value?.notFound.includes(value) ? value : undefined;
+});
 
 const triggerLabel = computed(() => {
   if (selectedValues.value.length === 0) return "";
@@ -151,9 +176,15 @@ const triggerLabel = computed(() => {
     });
   }
   const value = selectedValues.value[0]!;
+  if (notFoundValue.value) return t("dms.form.relation.not_found");
   const node = findCascaderNode(roots.value, value);
   if (node) return formatCascaderPath(node);
-  return initialValueLabel() ?? value;
+  const path = buildCascaderPathLabels(
+    ancestry.value?.rows ?? [],
+    keyMapping.value,
+    value,
+  );
+  return path.length > 0 ? path.join(CASCADER_PATH_SEPARATOR) : value;
 });
 
 const placeholderLabel = computed(() =>
@@ -339,12 +370,6 @@ watch(searchTerm, () => {
   };
 });
 
-onMounted(() => {
-  if (selectedValues.value.length > 0 || props.initialValue) {
-    void execute();
-  }
-});
-
 function nodeClasses(node: CascaderNode, isHighlighted: boolean): string[] {
   return [
     "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm",
@@ -383,7 +408,13 @@ function nodeClasses(node: CascaderNode, isHighlighted: boolean): string[] {
         :aria-label="placeholderLabel"
         v-bind="ariaAttrs"
       >
-        <span v-if="triggerLabel" class="truncate">{{ triggerLabel }}</span>
+        <span
+          v-if="triggerLabel"
+          :class="['truncate', notFoundValue && 'text-muted']"
+          :title="notFoundValue ?? triggerLabel"
+        >
+          {{ triggerLabel }}
+        </span>
         <span v-else class="text-dimmed truncate">{{ placeholderLabel }}</span>
       </UButton>
 

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

@@ -19,7 +19,10 @@ import DmsForm from "../Form.vue";
 import { dmsOwnDrawer } from "../../../build/composables/containers/context";
 import { FIELD_TRIGGER_ICON } from "../../../build/utils/fieldTrigger";
 import { unlabeledRelationIds } from "../../../build/composables/data-types/relationValue";
-import { useRelationRows } from "../../../build/composables/data-types/relationRows";
+import {
+  notFoundRelationIds,
+  useRelationRows,
+} from "../../../build/composables/data-types/relationRows";
 import type { FormProps } from "../../../composables/form/types";
 import { sameFormValue } from "../../../build/composables/unsaved-changes/formValue";
 import { FORM_ENTRY_CONTEXT_KEY } from "../../../build/composables/form/formEntryContext";
@@ -385,19 +388,36 @@ const labeledIds = computed(
 // keeps showing as is rather than being asked again.
 const requestedIds = new Set<string>();
 
+// The ids the route did not answer (deleted, out of reach), shown as "Not
+// found" with the id on hover.
+const notFoundIds: Ref<ReadonlySet<string>> = shallowRef(new Set());
+
 async function loadValueItems(ids: string[]) {
   for (const id of ids) requestedIds.add(id);
-  const rows = await readRelationRows(
-    { searchUrl: props.searchUrl, keyMapping: props.keyMapping },
-    ids,
-  );
-  if (!rows.length) return;
+  const source = { searchUrl: props.searchUrl, keyMapping: props.keyMapping };
+  const rows = await readRelationRows(source, ids);
+  const missing = notFoundRelationIds(source, ids, rows);
+  if (!rows.length && !missing.length) return;
+  notFoundIds.value = new Set([...notFoundIds.value, ...missing]);
   valueItems.value = [
     ...valueItems.value,
     ...rows.map((item) => mapData(item as Record<string, string>)),
+    // Kept pickable, so the value can still be deselected.
+    ...missing.map((id) => ({
+      label: t("dms.form.relation.not_found"),
+      value: id,
+    })),
   ];
 }
 
+const notFoundTitle = computed(() => {
+  const ids = [props.modelValue]
+    .flat()
+    .map(String)
+    .filter((id) => notFoundIds.value.has(id));
+  return ids.length ? ids.join(", ") : undefined;
+});
+
 // The picker shows a value through its item: an id no item carries yet is
 // labelled (and given its avatar) from its row before the picker is opened.
 onMounted(() => {
@@ -558,6 +578,7 @@ const addFormOptions = computed(() => {
     :ignore-filter="true"
     :ui="{ content: 'z-50' }"
     :aria-label="t('dms.a11y.show_options')"
+    :title="notFoundTitle"
     @update:open="onOpen"
     @update:model-value="handleUpdateModelValue"
   >

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

@@ -11,6 +11,7 @@ import {
   useColumnValueRenderer,
 } from "../../../build/composables/data-types/useColumnValueRenderer";
 import {
+  type RelationColumnRows,
   type RelationLabelSource,
   type RepeaterTableColumn,
   joinRelationValue,
@@ -53,16 +54,22 @@ function useColumnRelationRows(columnId: string, source: RelationLabelSource) {
   );
   const { data } = useDmsAsyncData(
     `repeater-table-relation-${instanceId}-${columnId}`,
-    () => readRelationRows(source, ids.value),
+    async () => {
+      const readIds = ids.value;
+      return { readIds, rows: await readRelationRows(source, readIds) };
+    },
     // Names for the cells, not the page's data.
     { lazy: true, refreshOnPageRefresh: false, watch: [ids] },
   );
-  return computed(
-    () =>
-      new Map(
-        (data.value ?? []).map((row) => [relationRowValue(source, row), row]),
-      ),
-  );
+  return computed<RelationColumnRows>(() => ({
+    rowsByValue: new Map(
+      (data.value?.rows ?? []).map((row) => [
+        relationRowValue(source, row),
+        row,
+      ]),
+    ),
+    readIds: new Set(data.value?.readIds),
+  }));
 }
 
 const NO_LABELS: ReadonlySet<string> = new Set();

package/frontend-vue/layers/dms-ui/app/components/table-view/CascaderPath.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import {
-  CASCADER_FETCH_LIMIT,
   CASCADER_PATH_SEPARATOR,
+  cascaderValueId,
   cascaderValuePath,
+  cascaderValueReads,
+  readCascaderAncestry,
   resolveCascaderKeyMapping,
   type CascaderKeyMapping,
 } from "../../utils/cascader";
 import { MAX_RELATION_BADGES } from "../../build/composables/data-types/relationBadges";
+import { useRelationRows } from "../../build/composables/data-types/relationRows";
 
 const DEFAULT_VALUE_KEY = "_id";
 
@@ -17,20 +20,20 @@ interface CascaderPathProps {
   keyMapping?: Partial<CascaderKeyMapping>;
 }
 
-/** A picked value of a multiple cascader: its name, its path on hover. */
+/**
+ * A picked value as the cell names it: its path, or "Not found" with its id
+ * on hover when its row is gone or out of reach.
+ */
 interface CascaderBadge {
   label: string;
   title: string;
+  isNotFound: boolean;
 }
 
 const props = defineProps<CascaderPathProps>();
 
-const { $authFetch } = useAuthFetch();
-
-interface CascaderResponse {
-  results: Record<string, unknown>[];
-  total: number;
-}
+const { t } = useI18n();
+const { readRelationRows } = useRelationRows();
 
 const keyMapping = computed(() =>
   resolveCascaderKeyMapping({
@@ -39,33 +42,72 @@ const keyMapping = computed(() =>
   }),
 );
 
+const values = computed<unknown[]>(() =>
+  Array.isArray(props.value) ? props.value : [props.value],
+);
+const reads = computed(() =>
+  cascaderValueReads(values.value, keyMapping.value),
+);
+const ids = computed(() => reads.value.idsToRead);
+
+// The ids a list did not join (and the parents of those it did), with their
+// ancestors, read by `?ids=` level by level.
 const { data } = await useDmsAsyncData(
-  `cascader-path-${props.searchUrl}`,
+  () => `cascader-path-${props.searchUrl}-${ids.value.join(",")}`,
   () =>
-    props.searchUrl
-      ? $authFetch<CascaderResponse>(props.searchUrl, {
-          params: { limit: CASCADER_FETCH_LIMIT },
-        })
+    props.searchUrl && ids.value.length > 0
+      ? readCascaderAncestry(
+          (pending) =>
+            readRelationRows(
+              {
+                searchUrl: props.searchUrl!,
+                keyMapping: { value: keyMapping.value.value },
+              },
+              pending,
+            ),
+          keyMapping.value,
+          ids.value,
+        )
       : Promise.resolve(undefined),
   // The labels of a path, not the page's data.
   { lazy: true, refreshOnPageRefresh: false },
 );
 
-const pathOf = (item: unknown): string[] =>
-  cascaderValuePath(item, keyMapping.value, data.value?.results);
+const pathRows = computed(() => [
+  ...reads.value.joinedRows,
+  ...(data.value?.rows ?? []),
+]);
 
-const pathLabel = computed(() =>
-  pathOf(props.value).join(CASCADER_PATH_SEPARATOR),
-);
+const notFound = computed(() => new Set(data.value?.notFound));
+
+function badgeOf(item: unknown): CascaderBadge | undefined {
+  const id = cascaderValueId(item, keyMapping.value);
+  if (id !== undefined && notFound.value.has(id)) {
+    return {
+      label: t("dms.form.relation.not_found"),
+      title: id,
+      isNotFound: true,
+    };
+  }
+  const path = cascaderValuePath(item, keyMapping.value, pathRows.value);
+  if (path.length === 0) return undefined;
+  return {
+    label: path.at(-1) ?? "",
+    title: path.join(CASCADER_PATH_SEPARATOR),
+    isNotFound: false,
+  };
+}
+
+const single = computed(() => {
+  const badge = badgeOf(props.value);
+  if (!badge || badge.isNotFound) return badge;
+  return { ...badge, label: badge.title };
+});
 
 const badges = computed<CascaderBadge[]>(() =>
   (Array.isArray(props.value) ? props.value : [])
-    .map(pathOf)
-    .filter((path) => path.length > 0)
-    .map((path) => ({
-      label: path.at(-1) ?? "",
-      title: path.join(CASCADER_PATH_SEPARATOR),
-    })),
+    .map(badgeOf)
+    .filter((badge): badge is CascaderBadge => !!badge),
 );
 const visibleBadges = computed(() =>
   badges.value.slice(0, MAX_RELATION_BADGES),
@@ -82,6 +124,7 @@ const hiddenBadges = computed(() => badges.value.slice(MAX_RELATION_BADGES));
       v-for="badge in visibleBadges"
       :key="badge.title"
       :label="badge.label"
+      :class="badge.isNotFound && 'text-muted'"
       :title="badge.title"
       color="neutral"
       variant="subtle"
@@ -97,5 +140,11 @@ const hiddenBadges = computed(() => badges.value.slice(MAX_RELATION_BADGES));
       size="sm"
     />
   </span>
-  <span v-else class="truncate" :title="pathLabel">{{ pathLabel }}</span>
+  <span
+    v-else-if="single"
+    :class="['truncate', single.isNotFound && 'text-muted']"
+    :title="single.title"
+  >
+    {{ single.label }}
+  </span>
 </template>

package/frontend-vue/layers/dms-ui/app/components/table-view/KanbanBoard.vue

@@ -23,6 +23,7 @@ import {
 import { readSubline } from "../../build/composables/data-types/cellHelpers";
 import { useComposedText } from "#dms-core/app/composables/translation/useComposedText";
 import { useCardFields } from "../../build/composables/table-view/useCardFields";
+import { describeTableWriteError } from "../../build/composables/table-view/utils/writeError";
 
 const DEFAULT_COLUMN_PAGE_SIZE = 10;
 const DEFAULT_COLUMN_MAX_HEIGHT = "60vh";
@@ -83,7 +84,7 @@ const emit = defineEmits<{
 const groupByField = defineModel<string>("groupByField", { required: true });
 
 const { $authFetch } = useAuthFetch();
-const { processI18n, processApiMessage } = useTranslation();
+const { processI18n } = useTranslation();
 const { getDataType } = useDataTypes();
 const { t } = useI18n();
 const { processText } = useComposedText();
@@ -321,18 +322,11 @@ const awaitNewerMoves = async (itemId: string, current: Promise<void>) => {
   }
 };
 
-interface MoveErrorPayload {
-  data?: { message?: string };
-  message?: string;
-}
-
 const notifyMoveError = (error: unknown) => {
-  const err = error as MoveErrorPayload;
-  const message = err?.data?.message || err?.message;
   toast.add({
     color: Color.error,
     title: t("dms.table.kanban.move_error"),
-    description: message ? processApiMessage(message) : undefined,
+    description: describeTableWriteError(error, t, props.columns, processI18n),
   });
 };
 

package/frontend-vue/layers/dms-ui/app/components/table-view/TableView.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts" generic="T extends Data">
 import { get } from "@nuxt/ui/runtime/utils/index.js";
+import DmsBlockStatus from "../../build/components/blocks/BlockStatus.vue";
+import { readFetchNotFound } from "../../build/utils/fetchNotFound";
 import type {
   ColumnSizingState,
   ExpandedState,
@@ -53,6 +55,7 @@ import {
   KANBAN_DISPLAY_BRIDGE_KEY,
 } from "../../composables/table-view/kanban";
 import { useTableRowActions } from "../../build/composables/table-view/useTableViewRowActions";
+import { describeTableWriteError } from "../../build/composables/table-view/utils/writeError";
 import {
   buildTableQuery,
   isFilterEffective,
@@ -1064,6 +1067,11 @@ const listLoadError = computed(() => {
     : "error.500";
 });
 
+// A list answering 404 names a resource that does not exist (the workspace
+// its rows belong to was deleted): no retry fixes it, so the table gives way
+// to the not-found state blocks show, with what the 404 said.
+const listNotFound = computed(() => readFetchNotFound(settledError.value));
+
 // useDmsAsyncData keeps the previous result when a refetch fails, so rows kept
 // on screen would masquerade as the newly requested page/filter. Hide them
 // while the latest query is in error; the error panel takes their place.
@@ -1384,7 +1392,7 @@ const { reorderState } = useTableReorder<T>({
   onError: (failure) =>
     toast.add({
       title: t("dms.table.reorder.error"),
-      description: resolveApiErrorMessage(failure),
+      description: describeTableWriteError(failure, t, allColumns, processI18n),
       color: Color.error,
       icon: "i-ph-warning-circle",
     }),
@@ -1569,6 +1577,7 @@ const {
 } = useTableRowActions<T>({
   api: $authFetch,
   location,
+  columns: allColumns,
   caption,
   labelKey,
   rowIdKey: props.rowIdKey,
@@ -2391,7 +2400,13 @@ onMounted(() => {
 </script>
 
 <template>
+  <DmsBlockStatus
+    v-if="listNotFound"
+    state="not-found"
+    :not-found="listNotFound"
+  />
   <UTable
+    v-else
     ref="tableRoot"
     v-bind="tableProps"
     v-model:pagination="paginationState"

package/frontend-vue/layers/dms-ui/app/composables/form/types/field.ts

@@ -18,6 +18,12 @@ export interface FormFieldReadonly {
   link?: FormFieldLink;
 }
 
+/** Holds while the field `field` holds one of the values `in` lists. */
+export interface FieldCondition {
+  field: string;
+  in: unknown[];
+}
+
 export interface FormField {
   id: string;
   label?: string;
@@ -36,6 +42,12 @@ export interface FormField {
   /** "Module default · Use default" while it holds something else. */
   offersDefault?: boolean;
   localized?: boolean;
+  /** Shown only while the condition holds: hidden, neither required nor sent. */
+  visibleWhen?: FieldCondition;
+  /** Read-only while the condition holds: its value is not sent. */
+  disabledWhen?: FieldCondition;
+  /** A localized field's fallback language: filled whenever any language is. */
+  fallbackLocale?: string;
 }
 
 export interface FieldGroup {