@antelopejs/dms 0.5.5 → 0.6.0

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

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { useConfirm } from "../../../composables/confirm/useConfirm";
+import DmsCopyButton from "../../copy/CopyButton.vue";
+
+interface InputSecretProps {
+  id?: string;
+  revealable?: boolean;
+  copyable?: boolean;
+  /** POSTed after a confirmation; answers `{ value }`, the new secret. */
+  rotateUrl?: string;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+interface RotateResponse {
+  value: string;
+}
+
+const props = defineProps<InputSecretProps>();
+const model = defineModel<string | null | undefined>();
+const { t } = useI18n();
+const toast = useToast();
+const { confirm } = useConfirm();
+const { $authFetch } = useAuthFetch();
+
+// v2 .secret: the end of the value stays visible, so a reader can tell two
+// secrets apart without revealing either.
+const VISIBLE_TAIL = 4;
+const MASK_LENGTH = 22;
+const MASK = "•";
+
+const isRevealed = ref(false);
+const value = computed(() => model.value ?? "");
+// An empty secret is typed in plainly: there is nothing to hide yet.
+const isMasked = computed(() => !isRevealed.value && value.value !== "");
+const masked = computed(() => {
+  const tail = value.value.slice(-VISIBLE_TAIL);
+  const length = Math.min(
+    MASK_LENGTH,
+    Math.max(value.value.length - tail.length, VISIBLE_TAIL),
+  );
+  return `${MASK.repeat(length)}${tail}`;
+});
+
+async function rotate(): Promise<void> {
+  const url = props.rotateUrl;
+  if (!url) return;
+  const confirmed = await confirm({
+    title: t("dms.form.secret.rotate_title"),
+    description: t("dms.form.secret.rotate_description"),
+    confirmLabel: t("dms.form.secret.rotate_confirm"),
+    color: "warning",
+    onConfirm: async () => {
+      const response = await $authFetch<RotateResponse>(url, {
+        method: "POST",
+      });
+      model.value = response.value;
+    },
+  });
+  if (confirmed) {
+    toast.add({ color: "success", title: t("dms.form.secret.rotated") });
+  }
+}
+</script>
+
+<template>
+  <div class="flex min-w-0 items-center gap-2">
+    <UInput
+      :id="props.id"
+      :model-value="isMasked ? masked : value"
+      :readonly="isMasked"
+      :placeholder="props.placeholder"
+      :disabled="props.disabled"
+      icon="i-ph-key"
+      autocomplete="off"
+      spellcheck="false"
+      class="min-w-0 flex-1"
+      :ui="{ base: 'font-mono text-[12.5px]' }"
+      @update:model-value="model = String($event ?? '')"
+    >
+      <template v-if="props.revealable && value" #trailing>
+        <UButton
+          :icon="isRevealed ? 'i-ph-eye-slash' : 'i-ph-eye'"
+          :label="
+            isRevealed ? t('dms.form.secret.hide') : t('dms.form.secret.show')
+          "
+          :aria-pressed="isRevealed"
+          :aria-controls="props.id"
+          color="neutral"
+          variant="link"
+          size="xs"
+          @click="isRevealed = !isRevealed"
+        />
+      </template>
+    </UInput>
+    <DmsCopyButton v-if="props.copyable && value" :value="value" />
+    <UButton
+      v-if="props.rotateUrl"
+      icon="i-ph-arrows-clockwise"
+      :label="t('dms.form.secret.rotate')"
+      color="neutral"
+      variant="outline"
+      :disabled="props.disabled"
+      @click="rotate"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import {
+  formErrorsInjectionKey,
+  formFieldInjectionKey,
+} from "@nuxt/ui/composables/useFormField";
+import { useControlError } from "../../../build/composables/form/useControlError";
+import {
+  addTags,
+  invalidTags,
+  type TagItemType,
+} from "../../../build/composables/form/tagValues";
+
+interface InputTagsProps {
+  id?: string;
+  /** `email`: an item that is no address shows red and blocks the submit. */
+  itemType?: TagItemType;
+  max?: number;
+  /** Offered as the user types. */
+  suggestions?: string[];
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+/** A form error naming some of the items (`values`), as the form keeps it. */
+interface ItemsError {
+  name?: string;
+  values?: unknown;
+}
+
+const props = defineProps<InputTagsProps>();
+const model = defineModel<string[] | null | undefined>();
+const { t } = useI18n();
+const { report } = useControlError();
+const formField = inject(formFieldInjectionKey, undefined);
+const formErrors = inject(formErrorsInjectionKey, undefined);
+
+// Commas, semicolons and whitespace end an item, typed or pasted.
+const DELIMITER = /[\s,;]+/;
+
+const tags = computed(() => model.value ?? []);
+const isFull = computed(
+  () => props.max !== undefined && tags.value.length >= props.max,
+);
+const suggestionsId = computed(() => `${props.id ?? "tags"}-suggestions`);
+
+const invalid = computed(
+  () => new Set(invalidTags(tags.value, props.itemType)),
+);
+// Items a server refused (an address already a member): its error names them.
+const refused = computed(() => {
+  const name = formField?.value?.name;
+  const error = (formErrors?.value as ItemsError[] | undefined)?.find(
+    (entry) => entry.name === name,
+  );
+  return new Set(
+    Array.isArray(error?.values)
+      ? error.values.map((value) => String(value).toLowerCase())
+      : [],
+  );
+});
+
+function isFlagged(item: string): boolean {
+  return invalid.value.has(item) || refused.value.has(item.toLowerCase());
+}
+
+watch(
+  invalid,
+  (items) => {
+    const list = [...items];
+    report(
+      list.length
+        ? t(
+            "dms.form.tags.invalid_email",
+            { value: list.join(", ") },
+            list.length,
+          )
+        : undefined,
+    );
+  },
+  { immediate: true },
+);
+
+function onTags(next: string[] | null | undefined): void {
+  model.value = addTags([], next ?? [], {
+    itemType: props.itemType,
+    max: props.max,
+  });
+}
+</script>
+
+<template>
+  <div>
+    <UInputTags
+      :id="props.id"
+      :model-value="tags"
+      :placeholder="isFull ? undefined : props.placeholder"
+      :disabled="props.disabled"
+      :max="props.max"
+      :delimiter="DELIMITER"
+      :list="props.suggestions?.length ? suggestionsId : undefined"
+      add-on-paste
+      add-on-blur
+      add-on-tab
+      class="w-full"
+      :ui="{
+        item: 'has-[[data-flagged]]:border-error/50 has-[[data-flagged]]:bg-error/10 has-[[data-flagged]]:text-error',
+      }"
+      @update:model-value="onTags"
+    >
+      <template #item-text="{ item }">
+        <span
+          class="inline-flex items-center gap-1"
+          :data-flagged="isFlagged(String(item)) || undefined"
+        >
+          <UIcon
+            v-if="isFlagged(String(item))"
+            name="i-ph-warning-circle"
+            class="size-3.5 shrink-0"
+          />
+          {{ item }}
+        </span>
+      </template>
+    </UInputTags>
+    <datalist v-if="props.suggestions?.length" :id="suggestionsId">
+      <option
+        v-for="suggestion in props.suggestions"
+        :key="suggestion"
+        :value="suggestion"
+      />
+    </datalist>
+  </div>
+</template>

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

@@ -1,15 +1,18 @@
 <script setup lang="ts">
 import type { InputProps } from "@nuxt/ui/components/Input.vue";
+import { useControlError } from "../../../build/composables/form/useControlError";
 
 interface InputTimeProps extends Omit<InputProps, "modelValue" | "type"> {
-  modelValue?: number;
+  modelValue?: number | null;
   min?: number;
   max?: number;
 }
 
 const props = defineProps<InputTimeProps>();
+const { report } = useControlError();
+const UNREADABLE_DURATION = "$dms.field_errors.invalid_duration";
 const emits = defineEmits<{
-  "update:modelValue": [value: number];
+  "update:modelValue": [value: number | null];
 }>();
 
 const displayValue = ref("");
@@ -34,7 +37,14 @@ const handleInput = (value: string | number | bigint | boolean | null) => {
 const handleBlur = () => {
   isUserTyping.value = false;
   if (displayValue.value) {
-    const parsed = parseTimeSpan(displayValue.value);
+    const parsed = readTimeSpan(displayValue.value);
+    // An unreadable duration is no duration: kept on screen for its author
+    // to fix, and refused by the form until then.
+    report(parsed === undefined ? UNREADABLE_DURATION : undefined);
+    if (parsed === undefined) {
+      emits("update:modelValue", null);
+      return;
+    }
     if (props.min !== undefined && parsed < props.min) {
       emits("update:modelValue", props.min);
     } else if (props.max !== undefined && parsed > props.max) {
@@ -43,7 +53,9 @@ const handleBlur = () => {
       emits("update:modelValue", parsed);
     }
   } else {
-    emits("update:modelValue", 0);
+    // A cleared time is no time, not midnight: a required one stays missing.
+    report(undefined);
+    emits("update:modelValue", null);
   }
   updateDisplayValue();
 };

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

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { useControlError } from "../../../build/composables/form/useControlError";
+import {
+  type KeyValueRow,
+  keyValueProblem,
+  keyValueRows,
+  keyValueObject,
+} from "../../../build/composables/form/keyValueRows";
+import DmsRepeater from "./Repeater.vue";
+
+interface KeyValueColumn {
+  type?: string;
+  component: ComponentInfo;
+}
+
+interface KeyValueProps {
+  id?: string;
+  value: KeyValueColumn;
+  toggleable?: boolean;
+  addLabel?: string;
+  keyLabel?: string;
+  valueLabel?: string;
+  disabled?: boolean;
+}
+
+const props = defineProps<KeyValueProps>();
+const model = defineModel<Record<string, unknown> | null | undefined>();
+const { t } = useI18n();
+const { report } = useControlError();
+
+const KEY_COMPONENT = { componentName: "dms-input-text" };
+const TOGGLE_COMPONENT = { componentName: "dms-checkbox" };
+
+const columns = computed(() => [
+  ...(props.toggleable
+    ? [{ id: "enabled", type: "boolean", component: TOGGLE_COMPONENT }]
+    : []),
+  {
+    id: "key",
+    label: props.keyLabel || t("dms.form.key_value.key"),
+    type: "string",
+    component: KEY_COMPONENT,
+  },
+  {
+    id: "value",
+    label: props.valueLabel || t("dms.form.key_value.value"),
+    type: props.value.type,
+    component: props.value.component,
+  },
+]);
+
+// The rows are the editor's own: an object cannot hold a row still without
+// a name, nor two rows of one name while the user fixes it. The object the
+// field holds follows them, and they follow the object when it changes from
+// elsewhere (loaded, reset).
+const rows = ref<KeyValueRow[]>(keyValueRows(model.value, props.toggleable));
+let emitted = JSON.stringify(model.value ?? {});
+
+watch(model, (value) => {
+  if (JSON.stringify(value ?? {}) === emitted) return;
+  rows.value = keyValueRows(value, props.toggleable);
+  emitted = JSON.stringify(value ?? {});
+});
+
+function onRows(next: KeyValueRow[] | null | undefined): void {
+  rows.value = next ?? [];
+  const problem = keyValueProblem(rows.value);
+  report(problem);
+  if (problem) return;
+  const value = keyValueObject(rows.value, props.toggleable);
+  emitted = JSON.stringify(value);
+  model.value = value;
+}
+</script>
+
+<template>
+  <DmsRepeater
+    :id="props.id"
+    :model-value="rows"
+    :columns="columns"
+    :add-label="props.addLabel"
+    :disabled="props.disabled"
+    @update:model-value="onRows($event as KeyValueRow[] | null | undefined)"
+  />
+</template>

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

@@ -15,11 +15,18 @@ import type { ArrayOrNested } from "@nuxt/ui/runtime/types/utils.js";
 
 import { refDebounced } from "@vueuse/core";
 import DmsForm from "../Form.vue";
+import { FIELD_TRIGGER_ICON } from "../../../build/utils/fieldTrigger";
 import type { FormProps } from "../../../composables/form/types";
 
 const SEARCH_DEBOUNCE_MS = 200;
 const ADD_NEW_VALUE = "__dms_relation_add_new__";
 
+/** Title and description of the drawer a relation picker's "add" opens. */
+interface RelationAddFormTexts {
+  displayName?: string;
+  description?: string;
+}
+
 interface RelationProps extends SelectMenuProps<T, "value", M> {
   searchUrl: string;
   initialValue?: unknown;
@@ -32,6 +39,11 @@ interface RelationProps extends SelectMenuProps<T, "value", M> {
   };
   addForm?: { componentName: string; options?: FormProps };
   addPermissionIds?: string[];
+  /**
+   * Title and description of the drawer the "add" entry opens; default to
+   * "New entry".
+   */
+  addFormTexts?: RelationAddFormTexts;
 }
 
 const props = withDefaults(defineProps<RelationProps>(), {
@@ -49,6 +61,7 @@ const forwardedProps = computed(() => {
     modelValue: _____,
     addForm: ______,
     addPermissionIds: _______,
+    addFormTexts: ________,
     ...rest
   } = props;
   return rest as SelectMenuProps<T, "value", M>;
@@ -92,6 +105,7 @@ const searchTermDebounced = refDebounced(searchTerm, SEARCH_DEBOUNCE_MS);
 const { $authFetch } = useAuthFetch();
 const toast = useToast();
 const { t } = useI18n();
+const { processI18n } = useTranslation();
 const { hasPermission, isLoaded, fetchPermissions } = usePermissions();
 const { open: openDrawer } = useDrawer();
 const { clearGuards } = useLeaveGuard();
@@ -319,8 +333,12 @@ function openAddDrawer() {
   const formOptions = addFormOptions.value;
   if (!formOptions) return;
   const drawer = openDrawer({
-    title: t("dms.table.new_item"),
-    description: t("dms.table.new_item_description"),
+    title: props.addFormTexts?.displayName
+      ? processI18n(props.addFormTexts.displayName)
+      : t("dms.table.new_item"),
+    description: props.addFormTexts?.description
+      ? processI18n(props.addFormTexts.description)
+      : t("dms.table.new_item_description"),
     direction: "bottom",
     containerId: addContainerId,
     component: DmsForm,
@@ -405,6 +423,7 @@ const addFormOptions = computed(() => {
   <USelectMenu
     v-bind="forwarded"
     v-model:search-term="searchTerm"
+    :trailing-icon="props.trailingIcon ?? FIELD_TRIGGER_ICON"
     :model-value="props.modelValue"
     :items="displayItems as T"
     :loading="status === 'pending'"

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

@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import { EYEBROW_CLASS } from "../../../build/utils/eyebrow";
+import {
+  formErrorsInjectionKey,
+  formInputsInjectionKey,
+  useFormField,
+} from "@nuxt/ui/composables/useFormField";
+import { resolveDmsComponent } from "../../../composables/resolveDmsComponent";
+
+/** A field of the rows: one column. */
+interface RepeaterColumn {
+  id: string;
+  label?: string;
+  type?: string;
+  component: ComponentInfo;
+  required?: boolean;
+}
+
+type RepeaterRow = Record<string, unknown>;
+
+interface RepeaterProps {
+  id?: string;
+  columns: RepeaterColumn[];
+  sortable?: boolean;
+  min?: number;
+  max?: number;
+  /** Label of the "+ Add …" button; a generic one by default. */
+  addLabel?: string;
+  /** Grey help line under the rows. */
+  hint?: string;
+  disabled?: boolean;
+}
+
+const props = defineProps<RepeaterProps>();
+const model = defineModel<RepeaterRow[] | null | undefined>();
+const { t } = useI18n();
+
+// Taken here so the inputs of the rows do not each pick up the whole
+// field's error: each cell shows its own (`<field>.<row>.<column>`).
+const { name: fieldName, emitFormChange } = useFormField();
+const formErrors = inject(formErrorsInjectionKey, null);
+const formInputs = inject(formInputsInjectionKey, null);
+
+const rows = computed<RepeaterRow[]>(() =>
+  Array.isArray(model.value) ? model.value : [],
+);
+
+// Stable keys for the rows, kept in step with the list: a row keeps its
+// inputs (and their focus) while another is added, removed or moved.
+let nextKey = 0;
+const rowKeys = ref<number[]>([]);
+watch(
+  () => rows.value.length,
+  (length) => {
+    while (rowKeys.value.length < length) rowKeys.value.push(nextKey++);
+    rowKeys.value.length = length;
+  },
+  { immediate: true },
+);
+
+const canAdd = computed(
+  () =>
+    !props.disabled &&
+    (props.max === undefined || rows.value.length < props.max),
+);
+const canRemove = computed(
+  () => !props.disabled && rows.value.length > (props.min ?? 0),
+);
+// A box to tick takes its own width; any other field shares the row. The
+// drag handle and the remove button have their own narrow columns.
+const FLUID_COLUMN = "minmax(0,1fr)";
+const COLUMN_WIDTHS: Record<string, string> = { boolean: "20px" };
+const HANDLE_COLUMN = "20px";
+const REMOVE_COLUMN = "28px";
+const gridTemplate = computed(() => ({
+  gridTemplateColumns: [
+    props.sortable ? HANDLE_COLUMN : "",
+    ...props.columns.map(
+      (column) => COLUMN_WIDTHS[column.type ?? ""] ?? FLUID_COLUMN,
+    ),
+    REMOVE_COLUMN,
+  ]
+    .filter(Boolean)
+    .join(" "),
+}));
+
+function emitRows(next: RepeaterRow[]): void {
+  model.value = next;
+  emitFormChange();
+}
+
+function setCell(index: number, column: string, value: unknown): void {
+  emitRows(
+    rows.value.map((row, at) =>
+      at === index ? { ...row, [column]: value } : row,
+    ),
+  );
+}
+
+function addRow(): void {
+  rowKeys.value.push(nextKey++);
+  emitRows([...rows.value, {}]);
+}
+
+function removeRow(index: number): void {
+  rowKeys.value.splice(index, 1);
+  emitRows(rows.value.filter((_, at) => at !== index));
+}
+
+function moveRow(from: number, to: number): void {
+  if (to < 0 || to >= rows.value.length || from === to) return;
+  const next = [...rows.value];
+  const [row] = next.splice(from, 1);
+  next.splice(to, 0, row!);
+  const [key] = rowKeys.value.splice(from, 1);
+  rowKeys.value.splice(to, 0, key!);
+  emitRows(next);
+}
+
+const MOVE_KEYS: Record<string, number> = { ArrowUp: -1, ArrowDown: 1 };
+
+function onHandleKeydown(event: KeyboardEvent, index: number): void {
+  const step = MOVE_KEYS[event.key];
+  if (step === undefined) return;
+  event.preventDefault();
+  moveRow(index, index + step);
+}
+
+const draggedIndex = ref<number | null>(null);
+
+function onDrop(index: number): void {
+  if (draggedIndex.value !== null) moveRow(draggedIndex.value, index);
+  draggedIndex.value = null;
+}
+
+/** The name a cell's errors go under, and the id of its control. */
+function cellName(index: number, column: string): string {
+  return `${fieldName.value ?? props.id ?? "rows"}.${index}.${column}`;
+}
+
+function isCellInvalid(index: number, column: string): boolean {
+  const name = cellName(index, column);
+  return !!formErrors?.value.some((error) => error.name === name);
+}
+
+// Each cell is an input of the form, so an error a server raises on one
+// (`headers.1.value`) lands on it rather than being dropped.
+function cellNames(length: number): string[] {
+  return Array.from({ length }, (_, index) =>
+    props.columns.map((column) => cellName(index, column.id)),
+  ).flat();
+}
+
+function unregisterCells(names: readonly string[]): void {
+  for (const name of names) delete formInputs?.value[name];
+}
+
+let registered: string[] = [];
+watch(
+  () => [fieldName.value, rows.value.length] as const,
+  ([name, length]) => {
+    unregisterCells(registered);
+    registered = name && formInputs ? cellNames(length) : [];
+    for (const cell of registered) formInputs!.value[cell] = { id: cell };
+  },
+  { immediate: true },
+);
+onBeforeUnmount(() => unregisterCells(registered));
+
+function cellComponent(column: RepeaterColumn) {
+  const name = column.component.componentName;
+  return name ? resolveDmsComponent(name) || name : null;
+}
+
+const hasHeaders = computed(() => props.columns.some((column) => column.label));
+</script>
+
+<template>
+  <div :id="props.id" class="grid gap-1.5" role="group">
+    <div
+      v-if="hasHeaders && rows.length"
+      :class="[EYEBROW_CLASS, 'text-dimmed grid items-end gap-2']"
+      :style="gridTemplate"
+      aria-hidden="true"
+    >
+      <span v-if="props.sortable" />
+      <span v-for="column in props.columns" :key="column.id" class="truncate">
+        {{ column.label }}
+      </span>
+      <span />
+    </div>
+
+    <div
+      v-for="(row, index) in rows"
+      :key="rowKeys[index]"
+      class="grid items-center gap-2"
+      :class="draggedIndex === index && 'opacity-50'"
+      :style="gridTemplate"
+      @dragover.prevent
+      @drop.prevent="onDrop(index)"
+    >
+      <button
+        v-if="props.sortable"
+        type="button"
+        class="text-dimmed hover:text-default grid h-8 cursor-grab place-items-center rounded-md"
+        :draggable="!props.disabled"
+        :disabled="props.disabled"
+        :aria-label="t('dms.form.repeater.move', { row: index + 1 })"
+        @dragstart="draggedIndex = index"
+        @dragend="draggedIndex = null"
+        @keydown="onHandleKeydown($event, index)"
+      >
+        <UIcon name="i-ph-dots-six-vertical" class="size-4" />
+      </button>
+      <Component
+        :is="cellComponent(column)"
+        v-for="column in props.columns"
+        :id="cellName(index, column.id)"
+        :key="column.id"
+        :model-value="row[column.id]"
+        size="sm"
+        class="w-full min-w-0"
+        :disabled="props.disabled"
+        :aria-label="column.label"
+        :aria-invalid="isCellInvalid(index, column.id) || undefined"
+        :color="isCellInvalid(index, column.id) ? 'error' : undefined"
+        :highlight="isCellInvalid(index, column.id) || undefined"
+        v-bind="column.component.options || {}"
+        @update:model-value="setCell(index, column.id, $event)"
+      />
+      <UButton
+        icon="i-ph-x"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        class="text-dimmed"
+        :disabled="!canRemove"
+        :aria-label="t('dms.form.repeater.remove', { row: index + 1 })"
+        @click="removeRow(index)"
+      />
+    </div>
+
+    <p v-if="props.hint" class="text-dimmed text-xs">{{ props.hint }}</p>
+
+    <div>
+      <UButton
+        v-if="canAdd"
+        icon="i-ph-plus"
+        :label="props.addLabel || t('dms.form.repeater.add')"
+        color="primary"
+        variant="link"
+        size="sm"
+        class="px-0"
+        @click="addRow"
+      />
+    </div>
+  </div>
+</template>