From a3a18c581f9f097db744031b5c9e1206afef1745 Mon Sep 17 00:00:00 2001
From: Marius Heine <m.heine@geprog.com>
Date: Tue, 19 Nov 2024 00:19:30 +0100
Subject: [PATCH 1/5] fix clearing values and validity flag when nodes are not
 shown anymore

---
 .../former/src/components/EditComponent.vue   |  4 --
 packages/former/src/components/FormNode.vue   | 56 +++++++++++++++----
 2 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/packages/former/src/components/EditComponent.vue b/packages/former/src/components/EditComponent.vue
index 6ebbcf4..7c76b45 100644
--- a/packages/former/src/components/EditComponent.vue
+++ b/packages/former/src/components/EditComponent.vue
@@ -41,10 +41,6 @@ const formId = inject('formId');
 function startDrag(e: DragEvent, nodeId: string) {
   setDragEventData(e, formId.value, 'node_id', nodeId);
 }
-
-onBeforeUnmount(() => {
-  modelValue.value = undefined;
-});
 </script>
 
 <style>
diff --git a/packages/former/src/components/FormNode.vue b/packages/former/src/components/FormNode.vue
index 7f77636..a1f274b 100644
--- a/packages/former/src/components/FormNode.vue
+++ b/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 { cloneDeep } from 'lodash';
 import { computed, onBeforeUnmount, ref, toRef, watch } from 'vue';
-import { inject } from '~/compositions/injectProvide';
+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,9 +79,18 @@ 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}`;
@@ -84,21 +98,39 @@ const nodeIdForValidation = computed(() => {
   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 },
 );

From 38c5b3d3242cce9c6630475033f982b638853b2f Mon Sep 17 00:00:00 2001
From: Marius Heine <m.heine@geprog.com>
Date: Tue, 19 Nov 2024 00:22:37 +0100
Subject: [PATCH 2/5] improve playground for show if demonstration

---
 packages/former/src/Playground.vue      |  9 ++++++++-
 packages/former/src/sample/Checkbox.vue | 10 +++++++---
 packages/former/src/sample/Select.vue   |  8 ++++++--
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/former/src/Playground.vue b/packages/former/src/Playground.vue
index 6c9f0ff..93b76e9 100644
--- a/packages/former/src/Playground.vue
+++ b/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', 'edit');
+const activateShowIf = ref(false);
 
 const options = [
   { label: 'edit', value: 'edit' },
@@ -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;
diff --git a/packages/former/src/sample/Checkbox.vue b/packages/former/src/sample/Checkbox.vue
index 3fbbc55..2f4ad40 100644
--- a/packages/former/src/sample/Checkbox.vue
+++ b/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>
diff --git a/packages/former/src/sample/Select.vue b/packages/former/src/sample/Select.vue
index 1501149..2782298 100644
--- a/packages/former/src/sample/Select.vue
+++ b/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>

From 15190b31d87f3030a368894a53d8ad56e18b1da8 Mon Sep 17 00:00:00 2001
From: Marius Heine <m.heine@geprog.com>
Date: Tue, 19 Nov 2024 00:23:32 +0100
Subject: [PATCH 3/5] do not minify for better troubleshooting

---
 packages/former/vite.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/former/vite.config.ts b/packages/former/vite.config.ts
index b3d10ab..1e95036 100644
--- a/packages/former/vite.config.ts
+++ b/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)

From 0583e906891e49e9df1e51146d73257e930fc2fd Mon Sep 17 00:00:00 2001
From: Marius Heine <m.heine@geprog.com>
Date: Tue, 19 Nov 2024 00:27:07 +0100
Subject: [PATCH 4/5] update version

---
 packages/former/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/former/package.json b/packages/former/package.json
index 3c33b92..e0361a7 100644
--- a/packages/former/package.json
+++ b/packages/former/package.json
@@ -1,7 +1,7 @@
 {
   "name": "former-ui",
   "type": "module",
-  "version": "0.0.11-next.55",
+  "version": "0.0.11-next.56",
   "license": "MIT",
   "repository": {
     "type": "git",

From d170a1e19f0b5ff62c378b39ebab7fd07454be8e Mon Sep 17 00:00:00 2001
From: Marius Heine <m.heine@geprog.com>
Date: Tue, 19 Nov 2024 19:44:57 +0100
Subject: [PATCH 5/5] fix linter errors

---
 packages/former/src/components/EditComponent.vue | 1 -
 packages/former/src/components/FormNode.vue      | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/former/src/components/EditComponent.vue b/packages/former/src/components/EditComponent.vue
index 7c76b45..e6f168e 100644
--- a/packages/former/src/components/EditComponent.vue
+++ b/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';
diff --git a/packages/former/src/components/FormNode.vue b/packages/former/src/components/FormNode.vue
index a1f274b..67ce767 100644
--- a/packages/former/src/components/FormNode.vue
+++ b/packages/former/src/components/FormNode.vue
@@ -19,7 +19,7 @@
 
 <script setup lang="ts">
 import { cloneDeep } from 'lodash';
-import { computed, onBeforeUnmount, ref, toRef, watch } from 'vue';
+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';