@live-change/vue3-components 0.2.30 → 0.2.32

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/logic/synchronized.js

@@ -1,5 +1,5 @@
 import { computed, ref, watch } from "vue"
-import { useThrottleFn } from "@vueuse/core"
+import { useThrottleFn, useDebounceFn } from "@vueuse/core"
 
 function copy(value) {
   let res = JSON.parse(JSON.stringify(value || {}))
@@ -23,7 +23,8 @@ function synchronized(options) {
     onSaveError = (e) => { console.error("SAVE ERROR", e) },
     resetOnError = true,
     recursive = false,
-    throttle = 300,
+    throttle = 0,
+    debounce = 300,
     autoSave = true
   } = options
   if(!source) throw new Error('source must be defined')
@@ -61,11 +62,16 @@ function synchronized(options) {
       }
       return true
     }
-    const throttledSave = throttle ? useThrottleFn(save, throttle) : save
+    const throttledSave = debounce ? () => {} : (throttle ? useThrottleFn(save, throttle) : save)
+    const debouncedSave = debounce ? useDebounceFn(save, throttle)
+        : (throttle ? useDebounceFn(save, throttle) : () => {}) // debounce after throttle
     watch(() => synchronizedJSON.value, json => {
       lastLocalUpdate.value = timeSource()
       onChange()
-      if(autoSave) throttledSave()
+      if(autoSave) {
+        throttledSave()
+        debouncedSave()
+      }
     })
     //console.log("WATCH SOURCE VALUE", source.value)
     watch(() => JSON.stringify(source.value), sourceJson => {
@@ -101,7 +107,9 @@ function synchronized(options) {
       }
       return true
     }
-    const throttledSave = throttle ? useThrottleFn(save, throttle) : save
+    const throttledSave = debounce ? () => {} : (throttle ? useThrottleFn(save, throttle) : save)
+    const debouncedSave = debounce ? useDebounceFn(save, throttle)
+        : (throttle ? useDebounceFn(save, throttle) : () => {}) // debounce after throttle
     const synchronizedComputed = computed({
       get: () => {
         const localTime = ((local.value && local.value[timeField]) ?? '')
@@ -111,7 +119,10 @@ function synchronized(options) {
       set: newValue => {
         local.value = { ...newValue, [timeField]: timeSource() }
         onChange()
-        if(autoSave) throttledSave()
+        if(autoSave) {
+          throttledSave()
+          debouncedSave()
+        }
       }
     })
     return { value: synchronizedComputed, save, changed }

package/logic/synchronizedList.js

@@ -45,6 +45,7 @@ function synchronizedList(options) {
     move: moveAction,
     identifiers = {},
     objectIdentifiers = object => ({ id: object.id }),
+    prefix = '',
     timeField = 'lastUpdate',
     timeSource = () => (new Date()).toISOString(),
     onChange = () => {},
@@ -114,14 +115,15 @@ function synchronizedList(options) {
           return createSynchronizedElement(locallyAddedElement)
         }
       }, synchronizedList.value, source.value || [], locallyAdded.value, locallyDeleted.value)
-    if(obsoleteLocallyAdded.length > 0) {
+    console.log("OBSOLETE", obsoleteLocallyAdded, obsoleteLocallyDeleted)
+    if(obsoleteLocallyAdded.size > 0) {
       locallyAdded.value = locallyAdded.value.filter(
-        locallyAddedElement => obsoleteLocallyAdded.has(locallyAddedElement.id)
+        locallyAddedElement => !obsoleteLocallyAdded.has(locallyAddedElement.id)
       )
     }
-    if(obsoleteLocallyDeleted.length > 0) {
+    if(obsoleteLocallyDeleted.size > 0) {
       locallyDeleted.value = locallyDeleted.value.filter(
-        locallyDeletedElement => obsoleteLocallyDeleted.has(locallyDeletedElement.id)
+        locallyDeletedElement => !obsoleteLocallyDeleted.has(locallyDeletedElement.id)
       )
     }
     synchronizedList.value = newSynchronized
@@ -142,8 +144,12 @@ function synchronizedList(options) {
   }
 
   async function insert(element) {
-    locallyAdded.value.push(element)
-    await insertAction({ ...element, [timeField]: timeSource(), ...identifiers })
+    locallyAdded.value.push({
+      ...element,
+      to: element.id,
+      id: prefix + element.id
+    })
+    await insertAction({ ...element, [timeField]: timeSource(), ...identifiers, ...objectIdentifiers(element) })
   }
 
   async function deleteElement(element) {
@@ -157,7 +163,7 @@ function synchronizedList(options) {
   }
 
   const synchronizedValue = computed(() => synchronizedList.value.map(synchronizedElement => synchronizedElement.value))
-  return { value: synchronizedValue, save, changed, insert, delete: deleteElement, move }
+  return { value: synchronizedValue, save, changed, insert, delete: deleteElement, move, locallyAdded }
 }
 
 export default synchronizedList

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/vue3-components",
-  "version": "0.2.30",
+  "version": "0.2.32",
   "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.30",
+    "@live-change/vue3-ssr": "^0.2.32",
     "debug": "^4.3.4",
     "mitt": "3.0.0",
     "vue": "^3.2.47"
   },
-  "gitHead": "623e5d40a7457b5a2a3f55783c59360396161ca8"
+  "gitHead": "d8c0b754ac74a94f586cc1cd872ae9a2c60c86a7"
 }