@live-change/vue3-components 0.2.31 → 0.2.33

package/form/DefinedForm.vue

@@ -130,6 +130,18 @@
       this.object = this.data[this.property]
       this.properties = {}
 
+      this.bindProperties(definition)
+
+      this.unwatch = watch(() => this.data[this.property], () => {
+        if(this.object != this.data[this.property]) {
+          this.object = this.data[this.property]
+          console.log("OBJECT OBJECT CHANGE", this.property)
+          this.bindProperties(definition)
+        }
+      }, { deep: true })
+    }
+
+    bindProperties(definition) {
       for(let propName in definition.properties) {
         let propDefn = definition.properties[propName]
 
@@ -264,7 +276,6 @@
       this.properties[propName].reset(oldData)
       this.object[propName] = this.properties[propName].getValue()
     }
-
   }
 
   class FormArray extends FormValue {
@@ -274,22 +285,37 @@
       this.elements = []
       if(!this.data[this.property]) this.data[this.property] = []
       this.object = this.data[this.property]
+      this.bindElements()
       this.unwatch = watch(() => this.data[this.property], () => {
-        this.object = this.data[this.property]
-        while(this.elements.length > this.object.length) {
-          this.elements.pop()
-        }
-        while(this.elements.length < this.object.length) {
-          this.elements.push(this.newElement(this.elements.length))
+        if(this.object != this.data[this.property]) {
+          //console.log("ARRAY OBJECT CHANGE", this.property)
+          this.object = this.data[this.property]
+          this.elements = []
         }
+        this.bindElements()
+        //this.check()
       }, { deep: true })
     }
 
+    bindElements() {
+      while(this.elements.length > this.object.length) {
+        this.elements.pop()
+      }
+      while(this.elements.length < this.object.length) {
+        this.elements.push(this.newElement(this.elements.length))
+      }
+    }
+
     setProperty(name) {
       if(this.unwatch) this.unwatch()
       this.property = name
       this.object = this.data[this.property]
       this.unwatch = watch(() => this.data[this.property], () => {
+        if(this.object != this.data[this.property]) {
+          //console.log("ARRAY OBJECT CHANGE", this.property)
+          this.object = this.data[this.property]
+          this.elements = []
+        }
         this.object = this.data[this.property]
         while(this.elements.length > this.object.length) {
           this.elements.pop()
@@ -313,13 +339,24 @@
     reset(initialValue) {
       initialValue = initialValue || this.definition.defaultValue || []
       this.data[this.property] = new Array(initialValue.length)
-      this.elements = this.data[this.property]
+      this.elements = new Array(this.object.length)
       for(let i = 0; i < initialValue.length; i++) {
-        let n = this.newElement(this.elements.length)
+        let n = this.newElement(i)
         n.reset(initialValue[i])
         this.elements[i] = n
       }
       super.setValue(initialValue)
+/*      if(this.property == 'query') {
+        this.check()
+        this.object.bzz = 1
+      }*/
+    }
+
+    check() {
+      console.log("ARRAY", this, JSON.stringify(this.data))
+      for(let i = 0; i < this.elements.length; i++) {
+        console.log("ELEMENT", i, this.elements[i].data[i] == this.object[i])
+      }
     }
 
     afterError(initialValue) {
@@ -384,18 +421,28 @@
     }
 
     setValue(value) {
-      this.data[this.property] = value
-      if(!value) return;
-      for(let i = 0; i < value.length; i++) {
-        if(this.elements[i]) {
-          this.elements[i].setValue(value[i])
-        } else {
-          let n = this.newElement()
+      if(value != this.object) {
+        this.data[this.property] = value
+        this.object = value
+        this.elements = []
+        if(!value) return;
+        for(let i = 0; i < value.length; i++) {
+          let n = this.newElement(i)
           n.reset(value[i])
           this.elements.push(n)
         }
+      } else {
+        for (let i = 0; i < value.length; i++) {
+          if (this.elements[i]) {
+            this.elements[i].setValue(value[i])
+          } else {
+            let n = this.newElement(i)
+            n.reset(value[i])
+            this.elements.push(n)
+          }
+        }
+        this.elements = this.elements.slice(0, value.length)
       }
-      this.elements = this.elements.slice(0, value.length)
     }
 
     updateElementIndices() {
@@ -464,6 +511,8 @@
           getValue: () => this.formRoot.getValue(),
           reset: () => this.reset(),
 
+          getNode: (name) => this.getNode(name),
+
           addValidator: (propName, validator) => this.addValidator(propName, validator),
           removeValidator: (propName, validator) => this.addValidator(propName, validator),
           validateField: (propName) => this.validateField(propName),
@@ -477,7 +526,11 @@
           waitForBarriers: (propName) => this.waitForBarriers(),
 
           addElementToArray: (propName, initialValue) => this.addElementToArray(propName, initialValue),
-          removeElementFromArray: (propName, index) => this.removeElementFromArray(propName, index)
+          removeElementFromArray: (propName, index) => this.removeElementFromArray(propName, index),
+
+          data: computed(() => this.data),
+          root: computed(() => this.formRoot),
+          state: computed(() => this.state),
         }
       }
     },
@@ -489,11 +542,6 @@
         formRoot: {}
       }
     },
-    computed: {
-      rootValue() {
-        return this.formRoot && this.formRoot.value
-      }
-    },
     methods: {
       getNode(name) {
         let np = name.split('.')
@@ -620,6 +668,8 @@
     created() {
       this.initForm()
       this.state = 'ready'
+
+      globalThis.form = this
     },
     unmounted() {
     },

package/form/FormBind.vue

@@ -22,7 +22,17 @@ export default {
     },
     value: {
       get() {
-        return this.form.getFieldValue(this.name)
+        let np = this.name.split('.')
+        let data = this.form.data.value
+        for(let p of np) {
+          if(!p) continue
+          data = data[p]
+        }
+        return data
+/*      const node = this.form.getNode(this.name)
+        console.log("RECOMPUTE VALUE OF", this.name, node.data[node.property])
+        return node.data[node.property]
+        //return this.form.getFieldValue(this.name)*/
       },
       set(value) {
         const filtered = this.valueFilter(value)

package/logic/analytics.js

@@ -8,6 +8,7 @@ function useAnalytics() {
 
 function installRouterAnalytics(router) {
   router.afterEach((to, from) => {
+    if(typeof window === 'undefined') return
     analytics.emit('pageView', { ...to })
   })
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/vue3-components",
-  "version": "0.2.31",
+  "version": "0.2.33",
   "description": "Live Change Framework - vue components",
   "main": "index.js",
   "scripts": {
@@ -21,10 +21,10 @@
   },
   "homepage": "https://github.com/live-change/live-change-framework-vue3",
   "dependencies": {
-    "@live-change/vue3-ssr": "^0.2.31",
+    "@live-change/vue3-ssr": "^0.2.33",
     "debug": "^4.3.4",
     "mitt": "3.0.0",
     "vue": "^3.2.47"
   },
-  "gitHead": "5a36954b2ff7c5ec81fbbddb4d017d9127488540"
+  "gitHead": "cd48bb411965818bb6716798f9cc33af33dae96d"
 }

package/view/VisibleArea.vue

@@ -91,7 +91,7 @@
       }
       this.compute('started')
     },
-    beforeDestroy() {
+    beforeUnmount() {
       if(this.resizeObserver) this.resizeObserver.disconnect()
       clearInterval(this.checkInt)
       window.removeEventListener('scroll', this.recomputeListenerScroll)