@live-change/vue3-components 0.8.50 → 0.8.51

package/logic/data.js

@@ -18,7 +18,8 @@ export function defaultData(definition, otherSrc) {
 }
 
 export function validateData(definition, data, validationType = 'validation',
-                             context = undefined, propName = '', props = data) {
+                             context = undefined, propName = '', props = data,
+                             outputValidatorParams = false) {
   context = context || getCurrentInstance().appContext
   //console.log("VALIDATIE DATA", definition, data, validationType, context, propName, props)
   if(!context) throw new Error("No context")
@@ -34,7 +35,11 @@ export function validateData(definition, data, validationType = 'validation',
         : validators[validation.name](validation.params, validationContext)
       if(!validator) throw new Error(`Validator ${validation.name || validation} not found`)
       const error = validator(data, context)
-      if(error) return error
+      if(error) {
+        if(outputValidatorParams) {
+          return { error, validator: validation.params }
+        } else return error
+      }
     }
   }
   if(!data) return undefined // No data, no errors, nonEmpty validator was already checked
@@ -42,7 +47,7 @@ export function validateData(definition, data, validationType = 'validation',
     const propertyErrors = {}
     for(let name in definition.properties) {
       const error = validateData(definition.properties[name], data?.[name], validationType, context,
-        propName ? propName + '.' + name: name, props)
+        propName ? propName + '.' + name: name, props, outputValidatorParams)
       if(error) {
         if(error.propertyErrors) {
           for(let internalName in error.propertyErrors) {
@@ -54,11 +59,11 @@ export function validateData(definition, data, validationType = 'validation',
       }
     }
     if(Object.keys(propertyErrors).length > 0) return { propertyErrors }
-  } else if(definition.type == 'Array') {
+  } else if(definition.type === 'Array') {
     const propertyErrors = {}
     for(let i = 0; i < data.length; i++) {
       const error = validateData(definition.of, data[i], validationType, context,
-        propName ? propName + '.' + i : i, props)
+        propName ? propName + '.' + i : i, props, outputValidatorParams)
       const name = '' + i
       if(error) {
         if(error.propertyErrors) {

package/logic/synchronized.js

@@ -36,16 +36,20 @@ function synchronized(options) {
 
     let lastSavedUpdate = lastLocalUpdate.value
 
-    const changed = computed(() => (JSON.stringify(source.value) != synchronizedJSON.value)
+    const changed = computed(() => (JSON.stringify(source.value) !== synchronizedJSON.value)
                                 && (lastLocalUpdate.value > ((source.value && source.value[timeField]) ?? '')))
+
+    const saving = ref(false)
+
     async function save() {
-      if((JSON.stringify(source.value) == JSON.stringify(synchronizedValue.value))
+      if((JSON.stringify(source.value) === JSON.stringify(synchronizedValue.value))
          || (lastLocalUpdate.value <= ((source.value && source.value[timeField]) ?? ''))) {
         return false // identical, no need to save
       }
-      if(lastSavedUpdate == lastLocalUpdate.value) {
+      if(lastSavedUpdate === lastLocalUpdate.value) {
         return false // duplicated save action
       }
+      saving.value = true
       lastSavedUpdate = lastLocalUpdate.value
       const data = JSON.parse(synchronizedJSON.value)
       // console.log("LAST LOCAL UPDATE", lastLocalUpdate.value)
@@ -60,10 +64,11 @@ function synchronized(options) {
         console.error("SAVE ERROR", e)
         onSaveError(e)
       }
+      saving.value = false
       return true
     }
     const throttledSave = debounce ? () => {} : (throttle ? useThrottleFn(save, throttle) : save)
-    const debouncedSave = debounce ? useDebounceFn(save, throttle)
+    const debouncedSave = debounce ? useDebounceFn(save, debounce)
         : (throttle ? useDebounceFn(save, throttle) : () => {}) // debounce after throttle
     watch(() => synchronizedJSON.value, json => {
       lastLocalUpdate.value = timeSource()
@@ -89,11 +94,11 @@ function synchronized(options) {
     return { value: synchronizedValue, save, changed }
   } else {
     const local = ref(source.value)
-    const changed = computed(() => (JSON.stringify(source.value) != JSON.stringify(local.value))
+    const changed = computed(() => (JSON.stringify(source.value) !== JSON.stringify(local.value))
                                 && ( ((local.value && local.value[timeField]) ?? '')
                                    > ((source.value && source.value[timeField]) ?? '')))
     async function save() {
-      if((JSON.stringify(source.value) == JSON.stringify(local.value))
+      if((JSON.stringify(source.value) === JSON.stringify(local.value))
          || ( ((local.value && local.value[timeField]) ?? '')
            <= ((source.value && source.value[timeField]) ?? ''))) return false // identical, no need to save
       const data = JSON.parse(JSON.stringify(local.value))
@@ -125,7 +130,7 @@ function synchronized(options) {
         }
       }
     })
-    return { value: synchronizedComputed, save, changed }
+    return { value: synchronizedComputed, save, changed, saving }
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/vue3-components",
-  "version": "0.8.50",
+  "version": "0.8.51",
   "description": "Live Change Framework - vue components",
   "main": "index.js",
   "scripts": {
@@ -21,10 +21,10 @@
   },
   "homepage": "https://github.com/live-change/live-change-stack",
   "dependencies": {
-    "@live-change/vue3-ssr": "^0.8.50",
+    "@live-change/vue3-ssr": "^0.8.51",
     "debug": "^4.3.4",
     "mitt": "3.0.1",
     "vue": "^3.4.29"
   },
-  "gitHead": "c967d5304bdac5150a6272c8d7cbe8974d7c25e6"
+  "gitHead": "ba8da813894eeb717223aa8d5e364649e4ac0347"
 }

package/view/RangeViewer.vue

@@ -17,6 +17,8 @@
 
     <slot v-if="frozen && buckets?.changed" name="changedTop"></slot>
 
+    <slot v-if="itemsCount === 0" name="empty"></slot>
+
     <template v-for="(bucket, bucketIndex) in buckets.buckets" :key="bucket.id">
 
       <slot v-for="(item, itemIndex) in bucket.data" v-bind="{ item, bucket, itemIndex, bucketIndex }">
@@ -48,7 +50,7 @@
 <script setup>
 
   import ScrollBorder from 'vue3-scroll-border'
-  import { ref, toRefs, defineProps, defineEmits, watch } from 'vue'
+  import { ref, toRefs, defineProps, defineEmits, watch, computed } from 'vue'
   import { rangeBuckets } from '@live-change/vue3-ssr'
 
   const props = defineProps({
@@ -154,6 +156,11 @@
 
   const buckets = ref()
 
+  const itemsCount = computed(() => {
+    if(!buckets.value) return 0
+    return buckets.value.buckets.reduce((acc, b) => acc + b.data.length, 0)
+  })
+
   if(props.buckets) {
     buckets.value = props.buckets
   } else if(props.pathFunction) {