@antelopejs/dms 0.11.0 → 0.12.0

package/frontend-vue/layers/dms-ui/app/build/composables/form/formRecordLoad.ts

@@ -53,7 +53,9 @@ export interface FormRecordLoad {
 }
 
 /** The failure a load error stands for; `null` when there is none. */
-export function formLoadFailure(error: unknown): FormLoadFailure | null {
+export function formLoadFailure(
+  error: FormLoadSource<never>["error"]["value"],
+): FormLoadFailure | null {
   if (!error) return null;
   const status = apiErrorStatus(error);
   if (status === HTTP_FORBIDDEN) return "forbidden";

package/frontend-vue/layers/dms-ui/app/build/composables/form/formState.ts

@@ -0,0 +1,241 @@
+import { onScopeDispose } from "vue";
+import type {
+  FormProps,
+  FormFetchResponse,
+  FormSubmitResponse,
+} from "../../../composables/form/types";
+import { FormEvents } from "../../../composables/form/types/events";
+import type { FormData } from "../../../composables/form/types/value";
+import type { FormFieldOrGroup } from "../../../composables/form/types/field";
+import { isFieldGroup } from "../../../composables/form/types/field";
+import { processFieldI18n } from "../../utils/fieldOptionsI18n";
+import { orderFormEntries } from "./formEntryOrder";
+import {
+  type ReplaceUrlVariablesContext,
+  resolveUrlVariables,
+} from "../../utils/urlVariables";
+import { apiErrorStatus } from "#dms-core/app/composables/useFieldErrors";
+import { HTTP_NOT_FOUND } from "#dms-core/app/utils/http-status";
+import { isString } from "#dms-core/app/utils/type-check";
+import { sameFormValue } from "../unsaved-changes/formValue";
+import {
+  type FieldValueComparer,
+  buildValidationSchema,
+  createBaseValidationSchema,
+  createFieldValueComparer,
+  flattenFields,
+  processBeforeStateMappers,
+  resolveSubmitDefaults,
+  watchFieldChanges,
+  withConditionFields,
+} from "./useFormModel";
+
+function createFormState(props: FormProps) {
+  const toast = useToast();
+  const { $authFetch } = useAuthFetch();
+  const { getDataType } = useDataTypes();
+  const isSameFieldValue = createFieldValueComparer(getDataType);
+  const { processI18n, processApiMessage } = useTranslation();
+  const route = useDmsRoute();
+
+  const { sendComponentEvent } = useComponentEvent(props.componentId);
+
+  const { execute: executeSubmit } = useEventedAction<FormSubmitResponse>({
+    componentId: props.componentId,
+    events: {
+      start: FormEvents.SUBMIT,
+      success: FormEvents.SUBMIT_SUCCESS,
+      error: FormEvents.SUBMIT_ERROR,
+    },
+  });
+
+  const { isLoading: loading, state } = useWatch(
+    props.watchActions || [],
+    props.componentId,
+    {
+      disabledFields: new Set<string>(),
+      hiddenFields: new Set<string>(),
+      requiredFields: new Set<string>(),
+    },
+  );
+  const initialValues = ref<FormData>({});
+  const submitSucceeded = ref(false);
+
+  const allFields = computed(() => flattenFields(props.fields));
+
+  const isStartingValue = (
+    fieldId: string,
+    value: Parameters<FieldValueComparer>[1],
+  ): boolean => {
+    const field = allFields.value.find((entry) => entry.id === fieldId);
+    const initial = initialValues.value[fieldId];
+    return field
+      ? isSameFieldValue(field, value, initial)
+      : sameFormValue(value, initial);
+  };
+
+  watchFieldChanges(
+    state,
+    props.componentId,
+    sendComponentEvent,
+    isStartingValue,
+  );
+
+  const lifecycle = { isApplyingSavedRecord: false, isDisposed: false };
+  onScopeDispose(() => {
+    lifecycle.isDisposed = true;
+  });
+  watch(
+    () => state.value,
+    () => {
+      if (lifecycle.isApplyingSavedRecord) return;
+      if (submitSucceeded.value) submitSucceeded.value = false;
+    },
+    { deep: true },
+  );
+
+  const inactiveFields = computed(() =>
+    withConditionFields(allFields.value, state.value, {
+      // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Watch actions own these sets but expose open state. Preserve the existing unchecked iterable behavior for malformed replacements rather than filtering them.
+      disabled: state.value.disabledFields as Set<string> | undefined,
+      // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Watch actions expose open state; keep malformed hidden-field replacements observable to the existing Set constructor.
+      hidden: state.value.hiddenFields as Set<string> | undefined,
+    }),
+  );
+  const disabledFields = computed(() => inactiveFields.value.disabled);
+  const hiddenFields = computed(() => inactiveFields.value.hidden);
+  const requiredFields = computed(
+    // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Watch actions expose open state; retaining this unchecked field preserves existing size/has behavior for malformed replacements.
+    () => state.value.requiredFields as Set<string> | undefined,
+  );
+
+  return {
+    props,
+    toast,
+    $authFetch,
+    getDataType,
+    isSameFieldValue,
+    processI18n,
+    processApiMessage,
+    route,
+    sendComponentEvent,
+    executeSubmit,
+    loading,
+    state,
+    initialValues,
+    submitSucceeded,
+    allFields,
+    lifecycle,
+    disabledFields,
+    hiddenFields,
+    requiredFields,
+  };
+}
+
+/** @internal */
+export function createFormFields(props: FormProps) {
+  const context = createFormState(props);
+  const {
+    toast,
+    $authFetch,
+    getDataType,
+    processI18n,
+    processApiMessage,
+    route,
+    initialValues,
+    disabledFields,
+    hiddenFields,
+    requiredFields,
+  } = context;
+
+  const fields = computed<FormFieldOrGroup[]>(() =>
+    orderFormEntries(props.fields).map((item) => {
+      if (isFieldGroup(item)) {
+        return {
+          ...item,
+          fields: item.fields.map((f) => processFieldI18n(f, processI18n)),
+        };
+      }
+      return processFieldI18n(item, processI18n);
+    }),
+  );
+
+  const buildUrlContext = (
+    response?: ReplaceUrlVariablesContext["response"],
+  ): ReplaceUrlVariablesContext => ({
+    routeParams: props.routeParams,
+    routeQuery: route.query,
+    response,
+  });
+  const effectiveSubmitDefaults = computed(() =>
+    resolveSubmitDefaults(props.submitDefaults, buildUrlContext()),
+  );
+  const resolvedFetchUrl = computed(() =>
+    resolveUrlVariables(props.fetchUrl, buildUrlContext()),
+  );
+  const isRecordUpdate = computed(
+    () => !!resolvedFetchUrl.value && props.submitUrlMethod !== HttpMethod.post,
+  );
+  const createsRecord = props.kind === "create";
+
+  /** Reads the record at fetchUrl and maps its values for the fields. */
+  const loadRecord = async () => {
+    if (!props.fetchUrl) return undefined;
+    const processedUrl = resolveUrlVariables(props.fetchUrl, buildUrlContext());
+    if (processedUrl === undefined) return undefined;
+    const fetchedData = await $authFetch<FormFetchResponse>(processedUrl, {
+      method: props.fetchUrlMethod || "GET",
+      headers: { [CONTENT_LANGUAGE_HEADER]: "*" },
+    });
+    initialValues.value = {
+      ...initialValues.value,
+      ...JSON.parse(JSON.stringify(fetchedData)),
+    };
+    return processBeforeStateMappers(fetchedData, props.fields, getDataType);
+  };
+
+  const fetchData = async () => {
+    try {
+      return await loadRecord();
+    } catch (error) {
+      if (!import.meta.env.SSR && apiErrorStatus(error) !== HTTP_NOT_FOUND)
+        showFetchErrorToast(error);
+      throw error;
+    }
+  };
+
+  const showFetchErrorToast = (error: Parameters<typeof apiErrorStatus>[0]) => {
+    // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Rejections are arbitrary; keep direct data access, primitive boxing and nullish throws rather than treating this unchecked error projection as validated.
+    const err = error as Error & { data?: string };
+    toast.add({
+      title: processI18n("$dms.form.fetch_error_title"),
+      description: isString(err.data)
+        ? processApiMessage(err.data)
+        : processI18n("$dms.form.fetch_error_unknown"),
+      color: Color.error,
+    });
+  };
+
+  const baseSchema = createBaseValidationSchema(props.schema);
+  const validationSchema = computed(() =>
+    buildValidationSchema(
+      baseSchema,
+      disabledFields.value,
+      hiddenFields.value,
+      requiredFields.value,
+    ),
+  );
+
+  return {
+    ...context,
+    fields,
+    buildUrlContext,
+    effectiveSubmitDefaults,
+    resolvedFetchUrl,
+    isRecordUpdate,
+    createsRecord,
+    loadRecord,
+    fetchData,
+    validationSchema,
+  };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/form/formValidation.ts

@@ -1,5 +1,6 @@
 import type { z } from "zod";
 import { isBlankValue } from "#dms-core/app/composables/useFormValidation";
+import { isObject } from "#dms-core/app/utils/type-check";
 
 /**
  * How the generic form validates its state on top of the schema the backend
@@ -43,8 +44,8 @@ export interface FormValidationIssue {
 }
 
 export type FormValidationResult =
-  | { value: Record<string, unknown> }
-  | { issues: FormValidationIssue[] };
+  // oxlint-disable-next-line anti-slop/no-unsafe-dictionary-type -- Server-supplied schemas permit arbitrary field values; the result must retain the schema's open object contract.
+  { value: Record<string, unknown> } | { issues: FormValidationIssue[] };
 
 export interface FormValidationContext {
   fields: readonly FormValidationField[];
@@ -71,17 +72,14 @@ function issueField(issue: { path: PropertyKey[] }): PropertyKey | undefined {
 /** Whether a localized value fills some language but not its fallback one. */
 function lacksFallbackLocale(
   field: FormValidationField,
-  value: unknown,
+  value: Parameters<typeof validateFormState>[1][string],
 ): boolean {
   if (!field.localized || !field.fallbackLocale) return false;
-  if (typeof value !== "object" || value === null) return false;
-  const languages = value as Record<string, unknown>;
-  const isAnyFilled = Object.values(languages).some(
+  if (!isObject(value) || value === null) return false;
+  const isAnyFilled = Object.values(value).some(
     (text) => !isBlankValue(text, field.type),
   );
-  return (
-    isAnyFilled && isBlankValue(languages[field.fallbackLocale], field.type)
-  );
+  return isAnyFilled && isBlankValue(value[field.fallbackLocale], field.type);
 }
 
 /** Where a localized field's required error goes: the language to fill. */
@@ -137,10 +135,11 @@ function emptyValueOf(field: FormValidationField): false | null {
  */
 export async function validateFormState(
   schema: z.ZodObject<Record<string, z.ZodTypeAny>>,
+  // oxlint-disable-next-line anti-slop/no-unsafe-dictionary-type -- This is the parsing boundary for a server-defined schema; malformed values must reach validation unchanged.
   state: Record<string, unknown>,
   context: FormValidationContext,
 ): Promise<FormValidationResult> {
-  const input: Record<string, unknown> = { ...state };
+  const input = { ...state };
   const missing = new Set<string>();
 
   const reported = context.controlErrors ?? new Map<string, string>();
@@ -199,7 +198,7 @@ export async function validateFormState(
   }
 
   if (issues.length === 0 && result.success) {
-    return { value: result.data as Record<string, unknown> };
+    return { value: result.data };
   }
 
   const order = new Map(
@@ -207,6 +206,6 @@ export async function validateFormState(
   );
   const rank = (issue: FormValidationIssue) =>
     order.get(String(issueField(issue))) ?? order.size;
-  // A stable sort: issues of one field keep the schema's order.
+
   return { issues: [...issues].sort((a, b) => rank(a) - rank(b)) };
 }

package/frontend-vue/layers/dms-ui/app/build/composables/form/keyValueRows.ts

@@ -16,19 +16,19 @@ const KEY_MISSING = "$dms.field_errors.key_missing";
 const KEY_DUPLICATE = "$dms.field_errors.key_duplicate";
 
 const nameOf = (row: KeyValueRow): string => (row.key ?? "").trim();
-const isBlank = (value: unknown): boolean =>
+const isBlank = (value: KeyValueRow["value"]): boolean =>
   value === undefined || value === null || value === "";
 const isUnfilled = (row: KeyValueRow): boolean =>
   !nameOf(row) && isBlank(row.value);
 
 /** The rows of a key-value object, in its order. */
 export function keyValueRows(
-  value: Record<string, unknown> | null | undefined,
+  value: Record<string, KeyValueRow["value"]> | null | undefined,
   toggleable: boolean | undefined,
 ): KeyValueRow[] {
   return Object.entries(value ?? {}).map(([key, entry]) => {
     if (!toggleable) return { key, value: entry };
-    const toggled = (entry ?? {}) as Partial<ToggledValue>;
+    const toggled: Partial<ToggledValue> = entry ?? {};
     return { key, value: toggled.value, enabled: toggled.enabled ?? true };
   });
 }
@@ -37,7 +37,7 @@ export function keyValueRows(
 export function keyValueObject(
   rows: readonly KeyValueRow[],
   toggleable: boolean | undefined,
-): Record<string, unknown> {
+): Record<string, KeyValueRow["value"]> {
   return Object.fromEntries(
     rows
       .filter((row) => !isUnfilled(row))

package/frontend-vue/layers/dms-ui/app/build/composables/form/numberRange.ts

@@ -1,3 +1,6 @@
+import type { InputNumberProps } from "@nuxt/ui/components/InputNumber.vue";
+import { isNumber } from "#dms-core/app/utils/type-check";
+
 /** The bounds a number field takes. */
 export interface NumberBounds {
   min?: number;
@@ -13,8 +16,8 @@ export interface NumberStepperState {
 export const BELOW_MIN_MESSAGE = "$dms.field_errors.too_small";
 export const ABOVE_MAX_MESSAGE = "$dms.field_errors.too_large";
 
-function isNumberValue(value: unknown): value is number {
-  return typeof value === "number" && !Number.isNaN(value);
+function isNumberValue(value: InputNumberProps["modelValue"]): value is number {
+  return isNumber(value) && !Number.isNaN(value);
 }
 
 /**
@@ -22,7 +25,7 @@ function isNumberValue(value: unknown): value is number {
  * typed instead of clamping it; `undefined` when it is in range or empty.
  */
 export function numberRangeError(
-  value: unknown,
+  value: InputNumberProps["modelValue"],
   bounds: NumberBounds,
 ): string | undefined {
   if (!isNumberValue(value)) return undefined;
@@ -36,7 +39,7 @@ export function numberRangeError(
  * stop at the bounds the input no longer knows of.
  */
 export function numberStepperState(
-  value: unknown,
+  value: InputNumberProps["modelValue"],
   bounds: NumberBounds,
 ): NumberStepperState {
   const current = isNumberValue(value) ? value : undefined;

package/frontend-vue/layers/dms-ui/app/build/composables/form/readonlyValue.ts

@@ -1,4 +1,7 @@
-import type { DataType } from "#dms-core/app/composables/data-types/useDataType";
+import type {
+  DataType,
+  DataTypeValueComparer,
+} from "#dms-core/app/composables/data-types/useDataType";
 
 /**
  * What a read-only field shows: for a type whose form state is mapped from
@@ -8,11 +11,11 @@ import type { DataType } from "#dms-core/app/composables/data-types/useDataType"
  * value, or one the form changed, is shown as the state holds it.
  */
 export function readonlyFieldValue(
-  value: unknown,
-  loaded: unknown,
+  value: Parameters<DataTypeValueComparer>[0],
+  loaded: Parameters<DataTypeValueComparer>[1],
   dataType: DataType | undefined,
-  options?: unknown,
-): unknown {
+  options?: Parameters<DataTypeValueComparer>[2],
+): Parameters<DataTypeValueComparer>[0] {
   if (!dataType?.beforeStateMapper || !dataType.isSameValue) return value;
   if (loaded === undefined || loaded === null) return value;
   return dataType.isSameValue(value, loaded, options) ? loaded : value;

package/frontend-vue/layers/dms-ui/app/build/composables/form/registerFormFunctions.ts

@@ -3,6 +3,7 @@ import {
   type SetFieldValueParams,
   resolveFieldValueWrite,
 } from "./fieldValueRule";
+import type { WatchActionFunction } from "#dms-core/app/types/watch";
 
 type FieldSetStateKey = "disabledFields" | "hiddenFields" | "requiredFields";
 
@@ -10,12 +11,14 @@ function createFieldSetMutator(stateKey: FieldSetStateKey, flagKey: string) {
   return (
     action: WatchAction,
     _eventData: ComponentEventData,
-    componentState: Ref<Record<string, unknown>>,
+    componentState: Parameters<WatchActionFunction>[2],
   ) => {
-    const params = action.params as Record<string, unknown> & {
+    // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- WatchAction permits absent or arbitrary params; neither inference nor the registration's function type proves targetField, so retain this unchecked action boundary.
+    const params = action.params as NonNullable<WatchAction["params"]> & {
       targetField: string;
     };
     const current =
+      // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Watch actions can replace these open state entries; preserve the existing unchecked iterable conversion and falsy fallback.
       (componentState.value[stateKey] as Set<string>) || new Set();
     const nextSet = new Set(current);
 
@@ -32,16 +35,18 @@ function createFieldSetMutator(stateKey: FieldSetStateKey, flagKey: string) {
 function setFieldValue(
   action: WatchAction,
   eventData: ComponentEventData,
-  componentState: Ref<Record<string, unknown>>,
+  componentState: Parameters<WatchActionFunction>[2],
 ) {
-  const params = action.params as unknown as SetFieldValueParams;
+  // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- WatchAction does not correlate the function ID with SetFieldValueParams; deriving the handler type still leaves this unchecked parameter handoff.
+  const params = action.params as NonNullable<WatchAction["params"]> &
+    SetFieldValueParams;
   const write = resolveFieldValueWrite(
     params,
+    // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Watch actions also receive arbitrary component events; FieldChangePayload's owner does not validate eventData.data, and filtering events would change behavior.
     eventData.data as FieldChangePayload | undefined,
   );
   if (!write) return;
-  // A copy: a map entry holding a list or an object is shared by every write
-  // (and may reach here as a reactive proxy, which structuredClone refuses).
+
   componentState.value[params.targetField] =
     write.value === undefined
       ? undefined

package/frontend-vue/layers/dms-ui/app/build/composables/form/repeaterTable.ts

@@ -1,5 +1,6 @@
 import type {
   DataType,
+  DataTypeFormatter,
   DataTypeSelectSource,
 } from "#dms-core/app/composables/data-types/useDataType";
 import type { RenderableColumn } from "../data-types/useColumnValueRenderer";
@@ -29,7 +30,8 @@ export function renderableColumn(
     id: column.type ?? "",
     compareModes: [],
     filterComponents: {},
-    // The column came from the form's JSON: its options are JSON values.
+
+    // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- ComponentInfo permits non-JSON options while RenderableColumn requires DataTypeConfig's JSON options; the formatter's unknown owner cannot prove that narrower handoff without changing its existing contract.
     inputComponent: column.component as ComponentInfo<ComponentOptionsData>,
   };
   return { id: column.id, type };
@@ -43,16 +45,17 @@ export function relationLabelSource(
   column: RepeaterTableColumn,
   dataType: Pick<DataType, "selectSource"> | undefined,
 ): RelationLabelSource | undefined {
-  const options = column.component.options as
-    | { multiple?: unknown }
-    | undefined;
+  const options: { multiple?: unknown } | undefined = column.component.options;
   const source = dataType?.selectSource?.(options);
   return source ? { ...source, multiple: !!options?.multiple } : undefined;
 }
 
 /** The rows a relation column's read answered, by value, and the ids it asked. */
 export interface RelationColumnRows {
-  rowsByValue: ReadonlyMap<unknown, Record<string, unknown>>;
+  rowsByValue: ReadonlyMap<
+    Parameters<DataTypeFormatter>[0],
+    NonNullable<Parameters<DataTypeFormatter>[3]>
+  >;
   readIds: ReadonlySet<string>;
 }
 
@@ -63,11 +66,11 @@ export interface RelationColumnRows {
  * the server already joined.
  */
 export function joinRelationValue(
-  value: unknown,
+  value: Parameters<DataTypeFormatter>[0],
   { rowsByValue, readIds }: RelationColumnRows,
   multiple: boolean,
-): unknown {
-  const join = (item: unknown) => {
+): ReturnType<DataTypeFormatter> {
+  const join = (item: Parameters<DataTypeFormatter>[0]) => {
     const row = rowsByValue.get(item);
     if (row) return row;
     const id = String(item);

package/frontend-vue/layers/dms-ui/app/build/composables/form/serverFieldErrors.ts

@@ -1,3 +1,5 @@
+import type { validateFormState } from "./formValidation";
+
 /**
  * A server error as UForm holds it once placed: on the field, or on the part
  * of it the error names (`address.street`).
@@ -15,14 +17,16 @@ export interface KeptServerError {
 }
 
 /** The value of a field as a kept error compares it. */
-export function serverErrorValue(value: unknown): string {
+export function serverErrorValue(
+  value: Parameters<typeof validateFormState>[1][string],
+): string {
   return JSON.stringify(value) ?? "";
 }
 
 /** The fields whose value moved off the one their kept error was raised against. */
 export function changedServerErrorFields(
   kept: ReadonlyMap<string, KeptServerError>,
-  state: Readonly<Record<string, unknown>>,
+  state: Readonly<Parameters<typeof validateFormState>[1]>,
 ): string[] {
   return [...kept]
     .filter(([name, entry]) => serverErrorValue(state[name]) !== entry.value)
@@ -39,7 +43,7 @@ export function changedServerErrorFields(
  */
 export function keptServerErrors(
   kept: ReadonlyMap<string, KeptServerError>,
-  state: Readonly<Record<string, unknown>>,
+  state: Readonly<Parameters<typeof validateFormState>[1]>,
   isSubmitting: boolean,
 ): PlacedServerError[] {
   if (isSubmitting) return [];

package/frontend-vue/layers/dms-ui/app/build/composables/form/tagValues.ts

@@ -8,7 +8,6 @@ export interface AddTagsOptions {
 
 const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
-// Addresses compare in lower case: "Ann@acme.io" is the one "ann@acme.io".
 const NORMALIZERS: Record<TagItemType, (item: string) => string> = {
   string: (item) => item.trim(),
   email: (item) => item.trim().toLowerCase(),

package/frontend-vue/layers/dms-ui/app/build/composables/form/toasterClearance.ts

@@ -44,7 +44,6 @@ export function toasterClearance(
 
 type BarElement = () => HTMLElement | null | undefined;
 
-// Only mounted, shown bars count, so a server render never adds to it.
 const shownBars = new Map<symbol, BarElement>();
 let frame = 0;
 
@@ -59,9 +58,6 @@ function applyClearance(): void {
   else style.removeProperty(TOASTER_CLEARANCE_VAR);
 }
 
-// A bar moves with the scroll (a sticky bar reaches the edge, a form's end
-// leaves it), the viewport, its own show transition and a drawer's opening
-// animation: one measure a frame.
 function scheduleClearance(): void {
   if (frame) return;
   frame = requestAnimationFrame(applyClearance);