@cwa/nuxt-edge 0.0.0-29699738.c20e607 → 0.0.0-29699908.de8da67

package/dist/runtime/api/fetcher/fetch-status-manager.js

@@ -66,20 +66,7 @@ export default class FetchStatusManager {
     }
     const isCurrent = this.fetcherStore.isCurrentFetchingToken(event.token);
     const fetchStatus = this.fetcherStore.fetches[event.token];
-    if (fetchStatus?.abort) {
-      this.resourcesStore.setResourceFetchError({
-        iri: event.resource,
-        error: createCwaResourceError(new Error(`Not Saved. Fetching token '${event.token}' has been aborted.`)),
-        isCurrent
-      });
-      return;
-    }
-    if (!isCurrent) {
-      this.resourcesStore.setResourceFetchError({
-        iri: event.resource,
-        error: createCwaResourceError(new Error(`Not Saved. Fetching token '${event.token}' is no longer current.`)),
-        isCurrent
-      });
+    if (fetchStatus?.abort || !isCurrent) {
       return;
     }
     const showErrorPage = this.finishFetchShowError(fetchStatus, event.resource);

package/dist/runtime/api/forms.d.ts

@@ -43,6 +43,7 @@ export default class Forms {
     private readonly _resourcesStore;
     private readonly _submitAttempted;
     private readonly _fieldValues;
+    private readonly _localEntries;
     constructor(resourcesStoreDefinition: ResourcesStore, cwaFetch: CwaFetch);
     isSubmitAttempted(iri: string): boolean;
     setSubmitAttempted(iri: string, attempted: boolean): void;
@@ -55,6 +56,8 @@ export default class Forms {
         success: boolean;
         formErrors?: string[];
     }>;
+    registerLocalEntry(iri: string, entry: Record<string, any>): string[];
+    unregisterLocalEntries(iri: string, keys: string[]): void;
     getForm(iri: string): ComputedRef<KeyedFormView | undefined>;
     getFormViewErrors(formIri: string, field: string): ComputedRef<string[] | undefined>;
     private get resourcesStore();

package/dist/runtime/api/forms.js

@@ -16,6 +16,23 @@ function bracketToNested(flat) {
   }
   return result;
 }
+function createFormViewObject(apiFormView) {
+  const structuredFormView = {
+    vars: Object.assign({}, apiFormView.vars)
+  };
+  if (apiFormView.prototype) {
+    structuredFormView.prototype = apiFormView.prototype;
+  }
+  let data = {};
+  if (apiFormView.children) {
+    for (const child of apiFormView.children) {
+      data = { ...data, ...createFormViewObject(child) };
+    }
+  }
+  const fullName = apiFormView.vars.multiple && apiFormView.vars.full_name?.endsWith("[]") ? apiFormView.vars.full_name.slice(0, -2) : apiFormView.vars.full_name;
+  data[fullName] = structuredFormView;
+  return data;
+}
 export default class Forms {
   constructor(resourcesStoreDefinition, cwaFetch) {
     this.cwaFetch = cwaFetch;
@@ -25,6 +42,7 @@ export default class Forms {
   _resourcesStore;
   _submitAttempted = reactive({});
   _fieldValues = reactive({});
+  _localEntries = reactive({});
   isSubmitAttempted(iri) {
     return this._submitAttempted[iri] ?? false;
   }
@@ -105,30 +123,28 @@ export default class Forms {
       return { success: false };
     }
   }
+  registerLocalEntry(iri, entry) {
+    if (!this._localEntries[iri]) {
+      this._localEntries[iri] = {};
+    }
+    const flat = createFormViewObject(entry);
+    Object.assign(this._localEntries[iri], flat);
+    return Object.keys(flat);
+  }
+  unregisterLocalEntries(iri, keys) {
+    if (!this._localEntries[iri]) return;
+    for (const key of keys) {
+      delete this._localEntries[iri][key];
+    }
+  }
   getForm(iri) {
     return computed(() => {
       const resource = this.resourcesStore.current.byId[iri];
       if (resource?.data?.["@type"] !== "Form") {
         return;
       }
-      const createFormViewObject = (apiFormView) => {
-        const structuredFormView = {
-          vars: Object.assign({}, apiFormView.vars)
-        };
-        if (apiFormView.prototype) {
-          structuredFormView.prototype = apiFormView.prototype;
-        }
-        let data = {
-          [apiFormView.vars.full_name]: structuredFormView
-        };
-        if (apiFormView.children) {
-          for (const child of apiFormView.children) {
-            data = { ...data, ...createFormViewObject(child) };
-          }
-        }
-        return data;
-      };
-      return createFormViewObject(resource.data.formView);
+      const apiData = createFormViewObject(resource.data.formView);
+      return { ...this._localEntries[iri] ?? {}, ...apiData };
     });
   }
   getFormViewErrors(formIri, field) {

package/dist/runtime/composables/cwa-form-collection.js

@@ -4,6 +4,9 @@ function replaceNameInTree(node, index) {
   if (typeof node?.vars?.full_name === "string") {
     node.vars.full_name = node.vars.full_name.replace(/__name__/g, index);
   }
+  if (typeof node?.vars?.label === "string" && node.vars.label.includes("__name__")) {
+    delete node.vars.label;
+  }
   if (Array.isArray(node?.children)) {
     for (const child of node.children) {
       replaceNameInTree(child, index);
@@ -19,18 +22,27 @@ export const useCwaFormCollection = (iri, collectionFullName) => {
   });
   const vars = computed(() => formEntry.value?.vars);
   const _entries = reactive([]);
+  const _entryKeys = /* @__PURE__ */ new Map();
   let _nextIndex = 0;
   const entries = computed(() => [..._entries]);
   const addEntry = () => {
     const prototype = formEntry.value?.prototype;
-    if (!prototype) return;
+    if (!prototype || !iri.value) return;
     const index = _nextIndex++;
     const cloned = replaceNameInTree(JSON.parse(JSON.stringify(prototype)), String(index));
+    const keys = $cwa.forms.registerLocalEntry(iri.value, cloned);
+    _entryKeys.set(cloned.vars.full_name, keys);
     _entries.push(cloned.vars.full_name);
   };
   const removeEntry = (fullName) => {
     const idx = _entries.indexOf(fullName);
-    if (idx !== -1) _entries.splice(idx, 1);
+    if (idx !== -1) {
+      _entries.splice(idx, 1);
+      if (iri.value) {
+        $cwa.forms.unregisterLocalEntries(iri.value, _entryKeys.get(fullName) ?? []);
+      }
+      _entryKeys.delete(fullName);
+    }
   };
   return { entries, addEntry, removeEntry, vars };
 };

package/dist/runtime/composables/cwa-form-input.js

@@ -10,7 +10,7 @@ export const useCwaFormInput = (iri, fullName, opts) => {
   const initValue = () => {
     const v = vars.value;
     if (v?.block_prefixes?.includes("checkbox")) {
-      return v.checked ? v.value ?? "1" : "";
+      return v.checked ? v.value ?? "1" : null;
     }
     return v?.value;
   };
@@ -36,16 +36,16 @@ export const useCwaFormInput = (iri, fullName, opts) => {
   });
   const hasBlurred = ref(false);
   const hasPreviouslyBeenValid = ref(false);
+  const validating = ref(false);
   watch(valid, (v) => {
     if (v === true) hasPreviouslyBeenValid.value = true;
   });
   const displayErrors = computed(
-    () => (opts?.blurTrigger !== void 0 ? opts.blurTrigger.value : hasBlurred.value) || hasPreviouslyBeenValid.value && valid.value === false || $cwa.forms.isSubmitAttempted(iri.value ?? "")
+    () => !validating.value && ((opts?.blurTrigger !== void 0 ? opts.blurTrigger.value : hasBlurred.value) || hasPreviouslyBeenValid.value && valid.value === false || $cwa.forms.isSubmitAttempted(iri.value ?? ""))
   );
   const onBlur = () => {
     hasBlurred.value = true;
   };
-  const validating = ref(false);
   const result = {
     vars,
     value,
@@ -57,7 +57,11 @@ export const useCwaFormInput = (iri, fullName, opts) => {
     validate: async (extraData) => {
       if (!iri.value || !vars.value) return;
       validating.value = true;
-      await $cwa.forms.validateField(`${iri.value}/submit`, { [fullName]: value.value, ...extraData });
+      await $cwa.forms.validateField(`${iri.value}/submit`, {
+        ...$cwa.forms.getFieldValues(iri.value),
+        [fullName]: value.value,
+        ...extraData
+      });
       validating.value = false;
     },
     onInput: null

package/dist/runtime/composables/cwa-form-repeated.d.ts

@@ -1,25 +1,25 @@
-import type { Ref } from 'vue';
+import type { ComputedRef, Ref } from 'vue';
 export declare const useCwaFormRepeated: (iri: Ref<string | undefined>, fullName: string) => {
     first: {
+        errors: ComputedRef<string[]>;
+        valid: ComputedRef<boolean | null>;
         onInput: import("lodash-es/debounce").DebouncedFunc<() => void>;
         onBlur: () => void;
-        vars: import("vue").ComputedRef<import("../api/forms.js").ViewVars | undefined>;
+        vars: ComputedRef<import("../api/forms.js").ViewVars | undefined>;
         value: Ref<any, any>;
-        errors: import("vue").ComputedRef<string[]>;
-        valid: import("vue").ComputedRef<boolean | null>;
         validating: Ref<boolean, boolean>;
-        displayErrors: import("vue").ComputedRef<boolean>;
+        displayErrors: ComputedRef<boolean>;
         validate: (extraData?: Record<string, any>) => Promise<void>;
     };
     second: {
+        errors: ComputedRef<string[]>;
+        valid: ComputedRef<boolean | null>;
         onInput: import("lodash-es/debounce").DebouncedFunc<() => void>;
         onBlur: () => void;
-        vars: import("vue").ComputedRef<import("../api/forms.js").ViewVars | undefined>;
+        vars: ComputedRef<import("../api/forms.js").ViewVars | undefined>;
         value: Ref<any, any>;
-        errors: import("vue").ComputedRef<string[]>;
-        valid: import("vue").ComputedRef<boolean | null>;
         validating: Ref<boolean, boolean>;
-        displayErrors: import("vue").ComputedRef<boolean>;
+        displayErrors: ComputedRef<boolean>;
         validate: (extraData?: Record<string, any>) => Promise<void>;
     };
 };

package/dist/runtime/composables/cwa-form-repeated.js

@@ -1,32 +1,83 @@
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import debounce from "lodash-es/debounce";
+import { useCwa } from "#cwa/composables/cwa";
 import { useCwaFormInput } from "#cwa/composables/cwa-form-input";
 export const useCwaFormRepeated = (iri, fullName) => {
+  const $cwa = useCwa();
   const firstFullName = `${fullName}[first]`;
   const secondFullName = `${fullName}[second]`;
   const bothBlurred = ref(false);
   let firstHasBlurred = false;
   let secondHasBlurred = false;
+  const lastTriggeredBy = ref(null);
   const first = useCwaFormInput(iri, firstFullName, { blurTrigger: bothBlurred });
   const second = useCwaFormInput(iri, secondFullName, { blurTrigger: bothBlurred });
+  const parentVars = computed(() => {
+    if (!iri.value) return void 0;
+    return $cwa.forms.getForm(iri.value).value?.[fullName]?.vars;
+  });
+  const parentValid = computed(() => {
+    if (!parentVars.value?.submitted) return null;
+    return parentVars.value?.valid ?? null;
+  });
+  const firstValid = computed(() => {
+    if (!first.value.value || !second.value.value) return null;
+    return parentValid.value;
+  });
+  const secondValid = computed(() => {
+    if (!first.value.value || !second.value.value) return null;
+    return parentValid.value;
+  });
+  const firstErrors = computed(() => {
+    if (lastTriggeredBy.value === "second") return [];
+    return first.errors.value;
+  });
+  const secondErrors = computed(() => {
+    const base = second.errors.value;
+    if (lastTriggeredBy.value === "second" && first.errors.value.length) {
+      const extra = first.errors.value.filter((e) => !base.includes(e));
+      return [...base, ...extra];
+    }
+    return base;
+  });
   const firstOnInput = debounce(() => {
-    first.validate({ [secondFullName]: second.value.value || "__FAKE__" });
+    lastTriggeredBy.value = "first";
+    const extra = second.value.value ? { [secondFullName]: second.value.value } : void 0;
+    first.validate(extra);
   }, 300);
   const secondOnInput = debounce(() => {
-    second.validate({ [firstFullName]: first.value.value || "__FAKE__" });
+    lastTriggeredBy.value = "second";
+    const extra = first.value.value ? { [firstFullName]: first.value.value } : void 0;
+    second.validate(extra);
   }, 300);
   const firstOnBlur = () => {
     firstHasBlurred = true;
     if (secondHasBlurred) bothBlurred.value = true;
-    first.validate({ [secondFullName]: second.value.value || "__FAKE__" });
+    lastTriggeredBy.value = "first";
+    const extra = second.value.value ? { [secondFullName]: second.value.value } : void 0;
+    first.validate(extra);
   };
   const secondOnBlur = () => {
     secondHasBlurred = true;
     if (firstHasBlurred) bothBlurred.value = true;
-    second.validate({ [firstFullName]: first.value.value || "__FAKE__" });
+    lastTriggeredBy.value = "second";
+    const extra = first.value.value ? { [firstFullName]: first.value.value } : void 0;
+    second.validate(extra);
   };
   return {
-    first: { ...first, onInput: firstOnInput, onBlur: firstOnBlur },
-    second: { ...second, onInput: secondOnInput, onBlur: secondOnBlur }
+    first: {
+      ...first,
+      errors: firstErrors,
+      valid: firstValid,
+      onInput: firstOnInput,
+      onBlur: firstOnBlur
+    },
+    second: {
+      ...second,
+      errors: secondErrors,
+      valid: secondValid,
+      onInput: secondOnInput,
+      onBlur: secondOnBlur
+    }
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cwa/nuxt-edge",
-  "version": "0.0.0-29699738.c20e607",
+  "version": "0.0.0-29699908.de8da67",
   "license": "MIT",
   "type": "module",
   "description": "Components Web Apps Nuxt Module. UI for creating component-driven web apps with the API Components Bundle",