fix: value is deleted in last element when switching former mode

packages/former/src/Playground.vue

@@ -15,6 +15,9 @@
         </h1>
 
         <div class="flex items-center ml-auto space-x-4">
+          <Checkbox
+            v-model="activateShowIf" label="Activate Show-If"
+          />
           <div :class="{ 'text-red-500': !isValid }">
             Validity status: {{ isValid ? 'valid' : 'invalid' }}
           </div>
@@ -91,6 +94,7 @@ import Checkbox from './sample/Checkbox.vue';
 import Select from './sample/Select.vue';
 
 const mode = useStorage<Mode>('former:mode', 'build');
+const activateShowIf = ref(false);
 
 const options = [
   { label: 'build', value: 'build' },
@@ -247,7 +251,7 @@ const jsonSchema = computed<string>({
 
 const data = useStorage<FormData>('former:data', {});
 
-const showIfProp = { type: 'text', name: 'showIf', props: { label: 'Konditionale Bedingung', placeholder: 'If empty or "hello" then component is visible.' } };
+const showIfProp = { type: 'text', name: 'showIf', props: { label: 'Show if', placeholder: 'If empty or "hello" then component is visible.' } };
 
 const components: { [k: string]: FormFieldType } = {
   text: {
@@ -410,6 +414,9 @@ const components: { [k: string]: FormFieldType } = {
 };
 
 function showIf(node: SchemaNode, _data: FormData): boolean {
+  if (!activateShowIf.value) {
+    return true;
+  }
   if (!node.props)
     return true;
   const condition = node.props.showIf;

packages/former/src/components/EditComponent.vue

@@ -19,7 +19,6 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount } from 'vue';
 import { inject } from '~/compositions/injectProvide';
 import type { FieldData, FormData, InternalSchemaNode } from '~/types';
 import { setDragEventData } from '~/utils';
@@ -41,10 +40,6 @@ const formId = inject('formId');
 function startDrag(e: DragEvent, nodeId: string) {
   setDragEventData(e, formId.value, 'node_id', nodeId);
 }
-
-onBeforeUnmount(() => {
-  modelValue.value = undefined;
-});
 </script>
 
 <style>

packages/former/src/components/FormNode.vue

@@ -12,14 +12,15 @@
       :is="mode === 'build' ? EditComponent : FormComponent"
       v-model="modelValue"
       :node
-      @valid="isValid = $event"
+      @valid="isNodeValid = $event"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, ref, toRef, watch } from 'vue';
-import { inject } from '~/compositions/injectProvide';
+import { cloneDeep } from 'lodash';
+import { computed, ref, toRef, watch } from 'vue';
+import { inject, provide } from '~/compositions/injectProvide';
 import type { FieldData, FormData, InternalSchemaNode } from '~/types';
 import EditComponent from './EditComponent.vue';
 import FormComponent from './FormComponent.vue';
@@ -39,7 +40,11 @@ const showIf = inject('showIf', false);
 const mode = inject('mode');
 const components = inject('components');
 
-const isLayoutComponent = computed(() => !(components[node.value.type]?.propsSchema || []).some(prop => prop.name === '$name'));
+function isNodeLayoutComponent(node: InternalSchemaNode): boolean {
+  return !(components[node.type]?.propsSchema || []).some(prop => prop.name === '$name');
+}
+
+const isLayoutComponent = computed(() => isNodeLayoutComponent(node.value));
 
 const modelValue = computed({
   get() {
@@ -74,31 +79,58 @@ const isShown = computed(() => {
   return true;
 });
 
-const isValid = ref(false);
+const isNodeValid = ref(false);
 const validityMap = inject('validityMap');
 
+const childrenValidityMap = ref<Record<string, boolean | undefined>>({});
+provide('validityMap', childrenValidityMap);
+
+const areChildrenValid = computed(() => {
+  return Object.values(childrenValidityMap.value).every(
+    validFlag => validFlag !== false,
+  );
+});
+
 const nodeIdForValidation = computed(() => {
   if (repeatedFormIdentifier.value !== undefined) {
     return `${node.value._id}.${repeatedFormIdentifier.value}`;
   }
   return node.value._id;
 });
 
-onBeforeUnmount(() => {
-  delete validityMap.value[nodeIdForValidation.value];
-});
+function unsetDataOfNode(node: InternalSchemaNode, data: FormData): FormData {
+  if (node.name) {
+    return { ...data, [node.name]: undefined };
+  }
+  else if (isNodeLayoutComponent(node) && node.children) {
+    let children = node.children;
+    if (!Array.isArray(children)) {
+      children = Object.values(children).flatMap(childrenOfCategory => childrenOfCategory);
+    }
+    return children.reduce<FormData>((updatedData, child) => {
+      return unsetDataOfNode(child, updatedData);
+    }, data as FormData);
+  }
+  return data;
+}
 
-watch(isShown, (value, oldValue) => {
-  if (oldValue && !value) {
-    modelValue.value = undefined;
+const isValid = computed(() => !isShown.value || (isNodeValid.value && areChildrenValid.value));
+
+watch(isShown, () => {
+  if (!isShown.value) {
+    const newData = cloneDeep(data.value);
+    data.value = unsetDataOfNode(node.value, newData);
+    delete validityMap.value[nodeIdForValidation.value];
+  }
+  else {
+    validityMap.value[nodeIdForValidation.value] = isValid.value;
   }
 });
 
 watch(
   isValid,
   () => {
-    // emit('valid', !isShown.value || isValid.value);
-    validityMap.value[nodeIdForValidation.value] = !isShown.value || isValid.value;
+    validityMap.value[nodeIdForValidation.value] = isValid.value;
   },
   { immediate: true },
 );

packages/former/src/sample/Checkbox.vue

@@ -1,16 +1,20 @@
 <template>
   <div>
-    <input :id="node._id" v-model="modelValue" type="checkbox" class="p-1 rounded">
-    <label v-if="label" :for="node._id" class="p-1">{{ label }}</label>
+    <input :id="node?._id || fallbackNodeId" v-model="modelValue" type="checkbox" class="p-1 rounded">
+    <label v-if="label" :for="node?._id || fallbackNodeId" class="p-1">{{ label }}</label>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { FormerProps } from '~/types';
+import { nanoid } from '~/utils';
 
 defineProps<{
   label?: string;
-} & FormerProps>();
+} & Partial<FormerProps>>();
 
 const modelValue = defineModel<boolean>();
+
+// for when component is used outside Former
+const fallbackNodeId = nanoid();
 </script>

packages/former/src/sample/Select.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="flex flex-col">
-    <label v-if="label" :for="node?._id" class="p-1">{{ label }}</label>
+    <label v-if="label" :for="node?._id || fallbackNodeId" class="p-1">{{ label }}</label>
     <div class="border rounded">
-      <select :id="node?._id" v-model="modelValue" class="w-full p-1 rounded bg-[field]">
+      <select :id="node?._id || fallbackNodeId" v-model="modelValue" class="w-full p-1 rounded bg-[field]">
         <option v-for="(item, i) in options" :key="i" :value="item.value">
           {{ item.label }}
         </option>
@@ -13,6 +13,7 @@
 
 <script setup lang="ts">
 import type { FormerProps } from '~/types';
+import { nanoid } from '~/utils';
 
 defineProps<{
   label?: string;
@@ -21,4 +22,7 @@ defineProps<{
 } & Partial<FormerProps>>();
 
 const modelValue = defineModel<string>();
+
+// for when component is used outside Former
+const fallbackNodeId = nanoid();
 </script>

packages/former/vite.config.ts

@@ -27,6 +27,7 @@ export default defineConfig({
       entry: resolve(__dirname, 'src/index.ts'),
     },
     outDir: 'dist',
+    minify: false,
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
       // into your library (Vue)