@antelopejs/dms 0.5.5 → 0.6.0

package/frontend-vue/layers/dms-ui/app/build/components/containers/modal/DynamicModal.vue

@@ -2,6 +2,10 @@
 import type { Component } from "vue";
 import { DialogDescription, DialogTitle, VisuallyHidden } from "reka-ui";
 import type { ModalSize } from "../../../../types/modal";
+import type { ContainerColor } from "../../../../composables/containers/types";
+import DmsIconWell from "../../../../components/icon-well/IconWell.vue";
+import { CONTAINER_SKELETON_FIELDS } from "../constants";
+import { DMS_CONTAINER_KEY } from "../../../composables/containers/context";
 
 interface DynamicModalProps {
   title: string;
@@ -10,15 +14,27 @@ interface DynamicModalProps {
   containerId: string;
   component: Component;
   componentOptions?: Record<string, unknown>;
+  /** Mounts the body component anew when it changes. */
+  componentKey?: string;
   headerComponent?: Component;
   headerComponentOptions?: Record<string, unknown>;
+  icon?: string;
+  color?: ContainerColor;
 }
 
 interface DynamicModalEmits {
   (e: "close", result?: unknown): void;
 }
 
-const props = defineProps<DynamicModalProps>();
+const props = withDefaults(defineProps<DynamicModalProps>(), {
+  description: undefined,
+  size: undefined,
+  componentOptions: undefined,
+  headerComponent: undefined,
+  headerComponentOptions: undefined,
+  icon: undefined,
+  color: "primary",
+});
 const emit = defineEmits<DynamicModalEmits>();
 
 // Let a DmsForm rendered in the body drop its DmsCard (the modal is the surface).
@@ -26,8 +42,18 @@ provide("dmsFormContainer", true);
 
 // UModal has no size variant, so map our ModalSize onto a max-width. Form
 // modals default wider than Nuxt UI's max-w-lg for breathing room.
-const SIZE_ORDER = ["sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl"];
-const SIZE_MAX_W: Record<string, string> = {
+const SIZE_ORDER: ModalSize[] = [
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl",
+  "4xl",
+  "5xl",
+  "full",
+];
+const SIZE_CONTENT: Record<ModalSize, string> = {
   sm: "sm:max-w-sm",
   md: "sm:max-w-md",
   lg: "sm:max-w-lg",
@@ -36,18 +62,28 @@ const SIZE_MAX_W: Record<string, string> = {
   "3xl": "sm:max-w-3xl",
   "4xl": "sm:max-w-4xl",
   "5xl": "sm:max-w-5xl",
+  full: "sm:max-w-5xl h-[calc(100dvh-4rem)]",
 };
 // Form modals shouldn't be narrower than this; callers asking for a bigger
 // size are still honored.
-const MIN_SIZE = "3xl";
-const contentClass = computed(() => {
+const MIN_SIZE: ModalSize = "3xl";
+
+const resolvedSize = computed(() => {
   const requested = props.size ?? MIN_SIZE;
-  const idx = SIZE_ORDER.indexOf(requested);
-  const minIdx = SIZE_ORDER.indexOf(MIN_SIZE);
-  const size = idx > minIdx ? requested : MIN_SIZE;
-  return SIZE_MAX_W[size] ?? "sm:max-w-3xl";
+  return SIZE_ORDER.indexOf(requested) > SIZE_ORDER.indexOf(MIN_SIZE)
+    ? requested
+    : MIN_SIZE;
 });
 
+// A divided head: the body below is a form, not a continuation of the title.
+const modalUi = computed(() => ({
+  content: SIZE_CONTENT[resolvedSize.value],
+  header: "border-b border-default pb-4 shrink-0",
+  // The body's bottom and side padding: a form's sticky footer sits flush
+  // with the modal's edges (see Form.vue).
+  body: "[--dms-form-foot-pb:1.25rem] [--dms-form-foot-px:1.25rem]",
+}));
+
 const { executeGuards, clearGuards } = useLeaveGuard();
 
 const isOpen = defineModel<boolean>("open", { default: true });
@@ -72,6 +108,22 @@ async function tryClose() {
   closePromise = null;
 }
 
+// A form in the body closes through the guards (its Cancel button) and
+// registers its own under this id, whatever component wraps it.
+provide(DMS_CONTAINER_KEY, { id: props.containerId, close: tryClose });
+
+// Another page (Back, a link): the modal belongs to the one left. Its
+// unsaved changes were already confirmed by the navigation guard.
+const route = useDmsRoute();
+watch(
+  () => route.path,
+  () => {
+    clearGuards(props.containerId);
+    isOpen.value = false;
+    emit("close");
+  },
+);
+
 function handleSuccess(result?: unknown) {
   clearGuards(props.containerId);
   isOpen.value = false;
@@ -93,12 +145,13 @@ function onContentResolve() {
     :description="description"
     :title="title"
     :dismissible="false"
-    :ui="{ content: contentClass }"
+    :ui="modalUi"
     @close:prevent="tryClose"
   >
     <template #header>
-      <div class="flex w-full items-center justify-between gap-4">
-        <div v-if="headerComponent" class="flex-1">
+      <div class="flex w-full items-start gap-3">
+        <DmsIconWell v-if="icon" :icon="icon" :tone="color" />
+        <div v-if="headerComponent" class="min-w-0 flex-1">
           <VisuallyHidden>
             <DialogTitle>{{ title }}</DialogTitle>
             <DialogDescription>{{ description }}</DialogDescription>
@@ -107,11 +160,17 @@ function onContentResolve() {
             <component :is="headerComponent" v-bind="headerComponentOptions" />
           </Suspense>
         </div>
-        <div v-else class="flex-1">
-          <DialogTitle as="h2" class="text-highlighted font-semibold">
+        <div v-else class="min-w-0 flex-1 self-center">
+          <DialogTitle
+            as="h2"
+            class="text-highlighted text-[17px] leading-[1.3] font-[650] tracking-[-0.02em]"
+          >
             {{ title }}
           </DialogTitle>
-          <DialogDescription v-if="description" class="text-muted text-sm">
+          <DialogDescription
+            v-if="description"
+            class="text-muted mt-1 text-[13px]"
+          >
             {{ description }}
           </DialogDescription>
           <VisuallyHidden v-else>
@@ -119,10 +178,13 @@ function onContentResolve() {
           </VisuallyHidden>
         </div>
         <UButton
-          icon="i-lucide-x"
+          icon="i-ph-x"
           color="neutral"
           variant="ghost"
+          size="sm"
+          square
           aria-label="Close"
+          :disabled="isContentLoading"
           @click="tryClose"
         />
       </div>
@@ -131,10 +193,23 @@ function onContentResolve() {
       <Suspense @pending="onContentPending" @resolve="onContentResolve">
         <component
           :is="component"
+          :key="componentKey"
           v-bind="componentOptions"
           :container-id="containerId"
           @success="handleSuccess"
         />
+        <template #fallback>
+          <div class="grid gap-4 sm:grid-cols-2" aria-busy="true">
+            <div
+              v-for="field in CONTAINER_SKELETON_FIELDS"
+              :key="field"
+              class="flex flex-col gap-2"
+            >
+              <USkeleton class="h-3 w-24" />
+              <USkeleton class="h-8 w-full" />
+            </div>
+          </div>
+        </template>
       </Suspense>
     </template>
   </UModal>

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

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { tv } from "tailwind-variants";
+
+// The one row of pill chips of the DMS (v2 .mc-cat): one pick among them
+// (a radio group: the modules' categories) or several (toggles with a check:
+// the roles of an invitation). Attributes (`id`, `aria-describedby`…) go to
+// the group.
+
+/** One chip: its value, its label and, optionally, a mono count after it. */
+export interface ChipGroupItem {
+  value: string;
+  label: string;
+  count?: number;
+}
+
+interface ChipGroupProps {
+  items: readonly ChipGroupItem[];
+  /** The picked values. */
+  selected: readonly string[];
+  /** Accessible name of the group. */
+  label: string;
+  /** Several chips can be picked, each toggled on its own. */
+  multiple?: boolean;
+  disabled?: boolean;
+  /** Rings the chips not picked in the error ink. */
+  invalid?: boolean;
+}
+
+const props = withDefaults(defineProps<ChipGroupProps>(), {
+  multiple: false,
+  disabled: false,
+  invalid: false,
+});
+
+const emit = defineEmits<{
+  /** A chip was pressed: picked, or toggled when `multiple`. */
+  pick: [value: string];
+}>();
+
+const CHECK_ICON = "i-ph-check";
+
+const theme = tv({
+  slots: {
+    chip: "focus-visible:outline-primary inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-full border px-[11px] text-xs font-medium whitespace-nowrap transition-colors focus-visible:outline-2 focus-visible:outline-offset-2",
+    count: "font-mono text-[10.5px] text-dimmed",
+  },
+  variants: {
+    picked: {
+      true: {
+        chip: "border-primary bg-primary/10 text-primary font-semibold",
+        count: "text-primary opacity-70",
+      },
+      false: {
+        chip: "border-accented text-toned hover:bg-elevated hover:text-highlighted",
+      },
+    },
+    invalid: { true: "" },
+    disabled: {
+      true: { chip: "cursor-not-allowed opacity-40" },
+    },
+  },
+  compoundVariants: [
+    { picked: false, invalid: true, class: { chip: "border-error" } },
+  ],
+});
+
+const pickedValues = computed(() => new Set(props.selected));
+const isPicked = (item: ChipGroupItem) => pickedValues.value.has(item.value);
+const ui = (item: ChipGroupItem) =>
+  theme({
+    picked: isPicked(item),
+    invalid: props.invalid,
+    disabled: props.disabled,
+  });
+
+// A single pick reads as radios, several as toggle buttons.
+const groupRole = computed(() => (props.multiple ? "group" : "radiogroup"));
+const chipAria = (item: ChipGroupItem) =>
+  props.multiple
+    ? { "aria-pressed": isPicked(item) }
+    : { role: "radio", "aria-checked": isPicked(item) };
+</script>
+
+<template>
+  <div
+    class="flex flex-wrap gap-1.5"
+    :role="groupRole"
+    :aria-label="props.label"
+    :aria-disabled="props.disabled || undefined"
+  >
+    <button
+      v-for="item in props.items"
+      :key="item.value"
+      type="button"
+      v-bind="chipAria(item)"
+      :data-value="item.value"
+      :disabled="props.disabled"
+      :class="ui(item).chip()"
+      @click="emit('pick', item.value)"
+    >
+      <UIcon
+        v-if="props.multiple && isPicked(item)"
+        :name="CHECK_ICON"
+        class="size-3"
+      />
+      {{ item.label }}
+      <span v-if="item.count !== undefined" :class="ui(item).count()">
+        {{ item.count }}
+      </span>
+    </button>
+  </div>
+</template>

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

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type {
+  FieldGroup,
+  FormFieldOrGroup,
+} 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 { combineSaveStates } from "#dms-layout/app/composables/layout/useInstantSaveHeader";
+import type { SaveStatusState } from "../../../components/save-bar/SaveStatus.vue";
+import DmsFormFieldControl from "./FormFieldControl.vue";
+import DmsFieldRow from "../../../components/field-row/FieldRow.vue";
+
+interface FormEntriesProps {
+  entries: FormFieldOrGroup[];
+  /** Rows of a section card: the card's inset, hairlines edge to edge. */
+  inSection?: boolean;
+}
+
+const props = defineProps<FormEntriesProps>();
+const context = inject(FORM_ENTRY_CONTEXT_KEY)!;
+
+const classes = computed(() => context.layoutClasses(props.inSection));
+
+function groupFieldsClass(group: FieldGroup): string {
+  return GROUP_FIELDS_CLASSES[
+    group.orientation === "vertical" ? "vertical" : "horizontal"
+  ];
+}
+
+function isGroupVisible(group: FieldGroup): boolean {
+  return group.fields.some((field) => !context.isFieldHidden(field));
+}
+
+function isGroupRequired(group: FieldGroup): boolean {
+  return group.fields.some(context.isFieldRequired);
+}
+
+/** The instant-save state a row shows: its field's, or its group's. */
+function saveStateOf(entry: FormFieldOrGroup): SaveStatusState {
+  if (!isFieldGroup(entry)) return context.fieldSaveState(entry.id);
+  return combineSaveStates(
+    entry.fields.map((field) => context.fieldSaveState(field.id)),
+  );
+}
+</script>
+
+<template>
+  <div :class="classes.rows">
+    <template v-for="entry in props.entries" :key="entry.id">
+      <template v-if="isFieldGroup(entry)">
+        <DmsFieldRow
+          v-if="isGroupVisible(entry)"
+          v-bind="classes.row"
+          :label="entry.label || ''"
+          :description="entry.description"
+          :required="isGroupRequired(entry)"
+        >
+          <template v-if="saveStateOf(entry) !== 'idle'" #details>
+            <DmsSaveStatus
+              :state="saveStateOf(entry)"
+              @retry="context.retrySave()"
+            />
+          </template>
+          <div :class="groupFieldsClass(entry)">
+            <template v-for="field in entry.fields" :key="field.id">
+              <DmsFormFieldControl
+                v-if="
+                  field.component.componentName && !context.isFieldHidden(field)
+                "
+                :field
+                class="min-w-0 flex-1"
+              />
+            </template>
+          </div>
+        </DmsFieldRow>
+      </template>
+
+      <DmsFieldRow
+        v-else-if="!context.isFieldHidden(entry)"
+        v-bind="classes.row"
+        :label="entry.label || ''"
+        :label-for="entry.id"
+        :description="entry.description"
+        :required="context.isFieldRequired(entry)"
+      >
+        <template v-if="saveStateOf(entry) !== 'idle'" #details>
+          <DmsSaveStatus
+            :state="saveStateOf(entry)"
+            @retry="context.retrySave()"
+          />
+        </template>
+        <DmsFormFieldControl
+          v-if="entry.component.componentName"
+          :field="entry"
+          class="min-w-0"
+        />
+      </DmsFieldRow>
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+/** An invalid field the summary links to. */
+export interface FormErrorSummaryItem {
+  /** The field id. */
+  id: string;
+  label: string;
+  /** Title of the section holding it, when the form has sections. */
+  section?: string;
+}
+
+interface FormErrorSummaryProps {
+  items: FormErrorSummaryItem[];
+}
+
+const props = defineProps<FormErrorSummaryProps>();
+const emit = defineEmits<{ select: [fieldId: string] }>();
+const { t } = useI18n();
+</script>
+
+<template>
+  <UAlert
+    color="error"
+    variant="subtle"
+    icon="i-ph-warning-circle"
+    role="alert"
+    :title="
+      t(
+        'dms.form.error_summary.title',
+        { count: props.items.length },
+        props.items.length,
+      )
+    "
+  >
+    <template #description>
+      <ul 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}`"
+            class="underline decoration-current/40 underline-offset-2 hover:decoration-current"
+            @click.prevent="emit('select', item.id)"
+          >
+            {{ item.label }}
+          </a>
+          <span v-if="item.section" class="opacity-70">
+            · {{ item.section }}
+          </span>
+        </li>
+      </ul>
+    </template>
+  </UAlert>
+</template>

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+interface FormErrorTextProps {
+  /** The message UFormField hands its `error` slot. */
+  error?: string | boolean;
+}
+
+const props = defineProps<FormErrorTextProps>();
+</script>
+
+<template>
+  <template v-if="props.error">
+    <UIcon name="i-ph-warning-circle" class="size-3.5 shrink-0" />
+    {{ props.error }}
+  </template>
+</template>

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

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type {
+  FormField,
+  FormFieldReadonly,
+} from "../../../composables/form/types/field";
+import {
+  FORM_ENTRY_CONTEXT_KEY,
+  fieldErrorPattern,
+} from "../../composables/form/formEntryContext";
+import { formErrorsInjectionKey } from "@nuxt/ui/composables/useFormField";
+import DmsFormErrorText from "./FormErrorText.vue";
+import DmsFormFieldNotes from "./FormFieldNotes.vue";
+
+interface FormFieldControlProps {
+  field: FormField;
+}
+
+const props = defineProps<FormFieldControlProps>();
+const context = inject(FORM_ENTRY_CONTEXT_KEY)!;
+const { state, initialValues, loading } = context;
+const { processI18n } = useTranslation();
+
+const isDisabled = computed(() => context.isFieldDisabled(props.field));
+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`).
+const hint = computed(() =>
+  props.field.hint ? 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.
+const formErrors = inject(formErrorsInjectionKey, null);
+const hasError = computed(() => {
+  const pattern = fieldErrorPattern(props.field.id);
+  return !!formErrors?.value.some((error) => pattern.test(error.name ?? ""));
+});
+// 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 : {},
+);
+</script>
+
+<template>
+  <div class="grid min-w-0 gap-1.5">
+    <DmsLocalizedField
+      v-if="field.localized"
+      v-model="state[field.id] as Record<string, string> | undefined"
+      :field
+      :initial-values="initialValues"
+      :loading
+      :component-id="context.componentId"
+      :page-id="context.pageId"
+    />
+
+    <UFormField
+      v-else
+      :name="field.id"
+      :error-pattern="fieldErrorPattern(field.id)"
+      :data-field="field.id"
+      :help="hint"
+    >
+      <div
+        v-if="isDisabled && !!field.type"
+        class="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1"
+      >
+        <DmsDisplay
+          :model-value="state[field.id]"
+          :type="field.type"
+          :loading
+          class="min-w-0"
+          v-bind="field.component.options || {}"
+        />
+        <DmsStatusPill
+          v-if="readonly.badge"
+          :tone="readonly.badge.tone"
+          :label="processI18n(readonly.badge.label)"
+        />
+        <DmsAutoLink
+          v-if="readonly.link"
+          :to="readonly.link.to"
+          class="text-primary ms-auto text-[12.5px] font-medium"
+        >
+          {{ processI18n(readonly.link.label) }}
+        </DmsAutoLink>
+      </div>
+      <Component
+        :is="component"
+        v-else
+        :id="field.id"
+        v-model="state[field.id]"
+        :initial-value="initialValues?.[field.id]"
+        :loading
+        :disabled="isDisabled"
+        :component-id="context.componentId"
+        :page-id="context.pageId"
+        :route-params="context.routeParams"
+        class="w-full"
+        v-bind="field.component.options || {}"
+      />
+      <template v-if="hasError" #error="{ error }">
+        <DmsFormErrorText :error />
+      </template>
+    </UFormField>
+
+    <DmsFormFieldNotes :field />
+  </div>
+</template>

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

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { isVNode, type VNodeChild } from "vue";
+import type { FormField } from "../../../composables/form/types/field";
+import {
+  isEmptyFormValue,
+  sameFormValue,
+} from "../../composables/unsaved-changes/formValue";
+import { FORM_ENTRY_CONTEXT_KEY } from "../../composables/form/formEntryContext";
+
+interface FormFieldNotesProps {
+  field: FormField;
+}
+
+const props = defineProps<FormFieldNotesProps>();
+const context = inject(FORM_ENTRY_CONTEXT_KEY)!;
+const { t, locale } = useI18n();
+const { getDataType } = useDataTypes();
+
+const value = computed(() => context.state.value[props.field.id]);
+const baseline = computed(() => context.baselineValue(props.field.id));
+const defaultValue = computed(() => props.field.defaultValue);
+
+// "Changed · was X" while a change waits for its save.
+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.
+const showsDefault = computed(
+  () =>
+    defaultValue.value !== undefined &&
+    !context.isFieldDisabled(props.field) &&
+    !sameFormValue(value.value, defaultValue.value) &&
+    !sameFormValue(baseline.value, defaultValue.value),
+);
+
+// Values that do not fit a line, or must not show: "Changed" alone.
+const UNWORDED_TYPES = new Set(["password", "code", "rich_text"]);
+
+/** A value as the field's type words it, or nothing when it cannot. */
+function wordValue(raw: unknown): VNodeChild | undefined {
+  if (UNWORDED_TYPES.has(props.field.type ?? "")) return undefined;
+  const dataType = props.field.type ? getDataType(props.field.type) : undefined;
+  if (dataType?.displayComponent && !dataType.formatter) return undefined;
+  const formatter = dataType?.formatter?.default;
+  if (formatter) {
+    const worded = formatter(raw, locale.value, props.field.component.options);
+    return isVNode(worded) || typeof worded === "string" ? worded : undefined;
+  }
+  if (typeof raw === "string" || typeof raw === "number") return String(raw);
+  return undefined;
+}
+
+const wordedBaseline = computed(() => wordValue(baseline.value));
+
+function useDefault(): void {
+  context.state.value[props.field.id] = JSON.parse(
+    JSON.stringify(defaultValue.value),
+  );
+}
+</script>
+
+<template>
+  <div v-if="showsChange || showsDefault" class="grid gap-0.5 text-xs">
+    <p
+      v-if="showsChange"
+      class="text-muted flex flex-wrap items-center gap-1.5"
+    >
+      <span class="bg-warning size-1.5 rounded-full" aria-hidden="true" />
+      {{ t("dms.form.field_notes.changed") }}
+      <template v-if="isEmptyFormValue(baseline)">
+        · {{ t("dms.form.field_notes.was_empty") }}
+      </template>
+      <template v-else-if="wordedBaseline !== undefined">
+        · {{ t("dms.form.field_notes.was") }}
+        <span><component :is="() => wordedBaseline" /></span>
+      </template>
+    </p>
+    <p
+      v-if="showsDefault"
+      class="text-muted flex flex-wrap items-center gap-1.5"
+    >
+      {{ t("dms.form.field_notes.default") }}
+      <span><component :is="() => wordValue(defaultValue)" /></span>
+      ·
+      <UButton
+        :label="t('dms.form.field_notes.use_default')"
+        color="primary"
+        variant="link"
+        size="xs"
+        class="p-0"
+        @click="useDefault"
+      />
+    </p>
+  </div>
+</template>

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

@@ -0,0 +1,6 @@
+<template>
+  <p class="text-dimmed text-xs">
+    <span class="text-error" aria-hidden="true">*</span>
+    {{ $t("dms.form.required_legend") }}
+  </p>
+</template>