nuxt-ui-tools 1.3.0 → 1.4.0

package/dist/runtime/form/utils/page.js

@@ -0,0 +1,107 @@
+import { createFormFieldInstance } from "./field-instance.js";
+import { getPathValue, isRecord } from "./path.js";
+import { isBoolean, isFunction, isNumber, isString } from "./predicate.js";
+import {
+  fieldPath,
+  getChildFields,
+  getSchemaFields,
+  isEmptyValue,
+  isFlatPassthroughField,
+  isObjectContainerField,
+  resolveRequired
+} from "./state.js";
+import { resolveFormText } from "./text.js";
+export function getFormPageSections(schema) {
+  if (!isRecord(schema) || !Array.isArray(schema.sections)) {
+    return [];
+  }
+  const cards = getSchemaFields(schema);
+  return schema.sections.filter(isFormPageSection).flatMap((section) => {
+    const card = cards.find((field) => field.key === section.key);
+    return card ? [{ card, section }] : [];
+  });
+}
+export function getFormPageNavigationTitle(schema) {
+  if (!isRecord(schema) || !isRecord(schema.navigation)) {
+    return void 0;
+  }
+  const { title } = schema.navigation;
+  return isFormText(title) ? resolveFormText(title) : void 0;
+}
+export function isFormPageSectionVisible(entry, runtime) {
+  return !hasCondition(entry.card) || runtime.shouldRender(entry.card, [entry.card.key]);
+}
+export function resolveFormPageSectionState(params) {
+  const { entry, runtime } = params;
+  const leaves = collectVisibleLeaves(entry.section.fields, [], runtime);
+  const paths = leaves.map((leaf) => leaf.path.join("."));
+  const contains = (candidate) => paths.some((path) => isPathWithin(candidate, path));
+  const dirtyPaths = runtime.dirtyPaths.value.filter(contains);
+  const invalid = runtime.errors.value.some((error) => contains(error.path));
+  const required = params.requiredEnforced ? leaves.filter((leaf) => isRequiredLeaf(leaf, runtime)) : [];
+  const missing = required.filter((leaf) => isEmptyValue(runtime.getValue(leaf.path))).length;
+  const optional = entry.section.optional === true || required.length === 0;
+  const filled = !optional || leaves.some((leaf) => isProvided(leaf, runtime, dirtyPaths, params.input));
+  return {
+    description: resolveFormText(entry.section.description),
+    dirty: dirtyPaths.length > 0,
+    dirtyPaths,
+    index: params.index,
+    key: entry.section.key,
+    label: resolveFormText(entry.section.label) ?? entry.section.key,
+    missing,
+    optional,
+    status: invalid ? "invalid" : missing === 0 && filled ? "complete" : "pending"
+  };
+}
+function collectVisibleLeaves(fields, parentPath, runtime) {
+  return fields.flatMap((field) => {
+    if (field.ignore === true) {
+      return [];
+    }
+    const path = fieldPath(parentPath, field);
+    if (hasCondition(field) && !runtime.shouldRender(field, path)) {
+      return [];
+    }
+    if (createFormFieldInstance(field).state.is("stateless")) {
+      return [];
+    }
+    if (isFlatPassthroughField(field)) {
+      return collectVisibleLeaves(getChildFields(field), parentPath, runtime);
+    }
+    if (isObjectContainerField(field)) {
+      return collectVisibleLeaves(getChildFields(field), path, runtime);
+    }
+    return [{ field, path }];
+  });
+}
+function isRequiredLeaf(leaf, runtime) {
+  const required = Object.getOwnPropertyDescriptor(leaf.field, "required")?.value;
+  if (isBoolean(required)) {
+    return required;
+  }
+  const validation = Object.getOwnPropertyDescriptor(leaf.field, "validation")?.value;
+  if (!isFunction(required) && !isRecord(validation)) {
+    return false;
+  }
+  return resolveRequired(leaf.field, runtime.getFieldCallbackParams(leaf.path, leaf.field)) === true;
+}
+function isProvided(leaf, runtime, dirtyPaths, input) {
+  if (isEmptyValue(runtime.getValue(leaf.path))) {
+    return false;
+  }
+  const path = leaf.path.join(".");
+  return dirtyPaths.some((dirtyPath) => isPathWithin(dirtyPath, path)) || !isEmptyValue(getPathValue(input ?? {}, leaf.path));
+}
+function hasCondition(field) {
+  return isFunction(Object.getOwnPropertyDescriptor(field, "condition")?.value);
+}
+function isPathWithin(path, scope) {
+  return path === scope || path.startsWith(`${scope}.`);
+}
+function isFormPageSection(value) {
+  return isRecord(value) && isString(value.key) && isFormText(value.label) && Array.isArray(value.fields);
+}
+function isFormText(value) {
+  return isString(value) || isNumber(value) || isFunction(value);
+}

package/dist/runtime/form/utils/state.d.ts

@@ -30,4 +30,6 @@ export declare function getMatrixRows(field: FormField): any[];
 export declare function resolveRequired(field: FormField, params: FormFieldCallbackParams): any;
 export declare function resolveRequiredMessage(field: FormField, fallback?: string): string;
 export declare function isEmptyValue(value: FormValue): boolean;
+/** Child fields of a container, with the fields of every tab for tabs. */
+export declare function getChildFields(field: FormField): FormField[];
 export declare function getArrayItemFields(field: FormField, item: FormObject): FormField[];

package/dist/runtime/form/utils/state.js

@@ -588,7 +588,7 @@ function isFormField(value) {
   const type = Object.getOwnPropertyDescriptor(value, "type")?.value;
   return isString(value.key) && isString(type) && isRegisteredFormFieldType(type);
 }
-function getChildFields(field) {
+export function getChildFields(field) {
   const tabs = Object.getOwnPropertyDescriptor(field, "tabs")?.value;
   if (Array.isArray(tabs)) {
     return tabs.flatMap((tab) => {

package/dist/runtime/form/utils/ui.js

@@ -39,6 +39,7 @@ function mergeFormUiPair(current, next) {
     group: mergePart(current.group, next.group),
     matrix: mergePart(current.matrix, next.matrix),
     modal: mergePart(current.modal, next.modal),
+    page: mergePart(current.page, next.page),
     root: mergePart(current.root, next.root),
     tree: mergePart(current.tree, next.tree),
     treeSelect: mergePart(current.treeSelect, next.treeSelect)

package/dist/runtime/i18n/locales/en.js

@@ -101,6 +101,24 @@ export default defineUiToolsLocale({
         resetButton: "Reset",
         submitButton: "Submit"
       },
+      page: {
+        complete: "Everything is ready.",
+        modifiedOne: "{count} modified.",
+        modifiedOther: "{count} modified.",
+        navigation: "Form sections",
+        optional: "optional",
+        remaining: "{count} left to complete.",
+        resetSection: "Reset",
+        sectionsOne: "{count} section",
+        sectionsOther: "{count} sections",
+        status: {
+          complete: "Complete",
+          invalid: "Has errors",
+          pending: "To complete"
+        },
+        unmodified: "No unsaved changes.",
+        unsavedChanges: "Unsaved changes"
+      },
       fields: {
         array: {
           addItem: "Add item",

package/dist/runtime/i18n/locales/fr.js

@@ -101,6 +101,24 @@ export default defineUiToolsLocale({
         resetButton: "R\xE9initialiser",
         submitButton: "Soumettre"
       },
+      page: {
+        complete: "Tout est pr\xEAt.",
+        modifiedOne: "{count} modifi\xE9e.",
+        modifiedOther: "{count} modifi\xE9es.",
+        navigation: "Sections du formulaire",
+        optional: "optionnel",
+        remaining: "{count} \xE0 compl\xE9ter.",
+        resetSection: "R\xE9initialiser",
+        sectionsOne: "{count} section",
+        sectionsOther: "{count} sections",
+        status: {
+          complete: "Compl\xE8te",
+          invalid: "Contient des erreurs",
+          pending: "\xC0 compl\xE9ter"
+        },
+        unmodified: "Aucune modification en cours.",
+        unsavedChanges: "Modifications non enregistr\xE9es"
+      },
       fields: {
         array: {
           addItem: "Ajouter un \xE9l\xE9ment",

package/dist/runtime/i18n/types.d.ts

@@ -275,6 +275,35 @@ export interface UiToolsFormMessages {
         cancelButton: string;
         resetButton: string;
     };
+    /** Form page chrome. Counts use `Intl.PluralRules`: `One` for "one", `Other` otherwise. */
+    page: {
+        /** Accessible name of the section navigation when the schema gives it no title. */
+        navigation: string;
+        /** Marks an optional section, in the navigation and on its card. */
+        optional: string;
+        /** Badge under the page title and name of a section's dirty marker. */
+        unsavedChanges: string;
+        /** Button of a modified section that puts its values back. */
+        resetSection: string;
+        /** Bold count inserted in `remaining` and `modified`: "{count} sections". */
+        sectionsOne: string;
+        sectionsOther: string;
+        /** Navigation summary while required sections are incomplete: "{count} to complete." */
+        remaining: string;
+        /** Navigation summary once every required section is complete. */
+        complete: string;
+        /** Navigation summary of a form with dirty checking: "{count} modified." */
+        modifiedOne: string;
+        modifiedOther: string;
+        /** Navigation summary of a form with dirty checking and no change. */
+        unmodified: string;
+        /** Accessible status of a navigation entry. */
+        status: {
+            complete: string;
+            pending: string;
+            invalid: string;
+        };
+    };
     states: {
         contextError: {
             title: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Nuxt module and runtime toolkit for UI-heavy Nuxt applications",
   "homepage": "https://github.com/ChronicStone/nuxt-ui-tools#readme",
   "bugs": "https://github.com/ChronicStone/nuxt-ui-tools/issues",