@live-change/vue3-components 0.8.22 → 0.8.23

package/form/CommandForm.vue

@@ -1,6 +1,6 @@
 <template>
   <defined-form
-      v-if="actionDefinition && (state == 'ready' || state == 'working')"
+      v-if="actionDefinition && (state === 'ready' || state === 'working')"
       :tag="formTag"
       @submit="handleSubmitEvent"
       ref="defined"
@@ -13,10 +13,10 @@
       v-slot="{ data }">
     <slot v-bind="{ data, submit }"></slot>
   </defined-form>
-  <slot v-if="state == 'error'" name="error">
+  <slot v-if="state === 'error'" name="error">
     <div class="alert alert-danger" role="alert">error</div>
   </slot>
-  <slot v-if="state == 'done'" name="done">
+  <slot v-if="state === 'done'" name="done">
     <div class="alert alert-success" role="alert">success</div>
   </slot>
 </template>
@@ -94,14 +94,14 @@
         if(this.serviceDefinitionSource) {
           if(typeof this.servicesDefinitionSource == 'string') {
             const definition = this.$api.serviceDefinitions.value
-                .find(service => service.name == this.serviceDefinitionSource)
+                .find(service => service.name === this.serviceDefinitionSource)
             return definition
           } else {
             return this.serviceDefinitionSource
           }
         }
         if(!this.$api.servicesDefinitions.value) return
-        const definition = this.$api.servicesDefinitions.value.find(service => service.name == this.service)
+        const definition = this.$api.servicesDefinitions.value.find(service => service.name === this.service)
         return definition
       },
       actionDefinition() {
@@ -171,7 +171,7 @@
       removeValidator(name, validator) {
         let validators = this.getNode(name).validators
         let id = validators.indexOf(validator)
-        if(id == -1) throw new Error("validator not found")
+        if(id === -1) throw new Error("validator not found")
         validators.splice(id)
       },
       validateField(name) {
@@ -210,7 +210,7 @@
         this.$refs.defined.scrollToError()
       },
       async submit(additionalParameters) {
-        if(!(this.state == 'ready' || this.state == 'error')) return
+        if(!(this.state === 'ready' || this.state === 'error')) return
         this.state = 'working'
         this.workingTask = this.workingZone.started({ name: `service ${this.service} action ${this.action}` })
 
@@ -297,7 +297,7 @@
                 this.workingZone.failed(this.workingTask, error)
               }
             } else if(Array.isArray(this.ignoreError)) {
-              if(this.ignoreError.indexOf(error) != -1) {
+              if(this.ignoreError.indexOf(error) !== -1) {
                 this.state = 'ready'
                 this.workingZone.finished(this.workingTask)
               } else {
@@ -348,7 +348,7 @@
     },
     watch: {
       actionDefinition(def) {
-        if(def && this.state == 'loading') {
+        if(def && this.state === 'loading') {
           this.state = 'ready'
           if(this.loadingTask) {
             this.loadingZone.finished(this.loadingTask)
@@ -357,7 +357,7 @@
         }
       },
       loadingError(error) {
-        if(error && this.state == 'loading') {
+        if(error && this.state === 'loading') {
           this.state = 'loadingError'
           if(this.loadingTask) {
             this.loadingZone.failed(this.loadingTask, error)

package/form/DefinedForm.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-  import { reactive, computed, watch } from 'vue'
+  import { computed, watch } from 'vue'
   import { getElementPositionInDocument } from '../utils/dom.mjs'
 
   const errorSufix = 'Error'
@@ -78,7 +78,7 @@
             case "Object" : defaultValue = {}; break;
             case "Number" : defaultValue = 0; break;
             case "Array"  : defaultValue = []; break;
-            default: defaultValue = null
+            default: defaultValue = undefined
           }
         }
         this.setValue(initialValue ?? defaultValue)
@@ -101,7 +101,7 @@
       return Promise.all(promises).then(results => {
         for(let error of results) {
           if(error) {
-            if(this.data[this.property+errorSufix] == error) return error
+            if(this.data[this.property+errorSufix] === error) return error
             this.setError(error)
             return error
           }
@@ -133,7 +133,7 @@
       this.bindProperties(definition)
 
       this.unwatch = watch(() => this.data[this.property], () => {
-        if(this.object != 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)
@@ -145,10 +145,10 @@
       for(let propName in definition.properties) {
         let propDefn = definition.properties[propName]
 
-        if(propDefn.type == "Object") {
+        if(propDefn.type === "Object") {
           this.properties[propName] =
               new FormObject(definition.properties[propName], this.component, this.object, propName)
-        } else if(propDefn.type == 'Array') {
+        } else if(propDefn.type === 'Array') {
           this.properties[propName] =
               new FormArray(definition.properties[propName], this.component, this.object, propName)
         } else {
@@ -263,10 +263,10 @@
       const propDefn = JSON.parse(JSON.stringify(defn))
       this.definition.properties[propName] = propDefn
       const definition = this.definition
-      if(propDefn.type == "Object") {
+      if(propDefn.type === "Object") {
         this.properties[propName] =
             new FormObject(definition.properties[propName], this.component, this.object, propName)
-      } else if(propDefn.type == 'Array') {
+      } else if(propDefn.type === 'Array') {
         this.properties[propName] =
             new FormArray(definition.properties[propName], this.component, this.object, propName)
       } else {
@@ -287,7 +287,7 @@
       this.object = this.data[this.property]
       this.bindElements()
       this.unwatch = watch(() => this.data[this.property], () => {
-        if(this.object != 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 = []
@@ -311,7 +311,7 @@
       this.property = name
       this.object = this.data[this.property]
       this.unwatch = watch(() => this.data[this.property], () => {
-        if(this.object != 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 = []
@@ -327,9 +327,9 @@
     }
 
     newElement(index) {
-      if(this.elementDefinition.type == "Object") {
+      if(this.elementDefinition.type === "Object") {
         return new FormObject(this.elementDefinition, this.component, this.object, index)
-      } else if(this.elementDefinition.type == 'Array') {
+      } else if(this.elementDefinition.type === 'Array') {
         return new FormArray(this.elementDefinition, this.component, this.object, index)
       } else {
         return new FormValue(this.elementDefinition, this.component, this.object, index)
@@ -355,7 +355,7 @@
     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])
+        console.log("ELEMENT", i, this.elements[i].data[i] === this.object[i])
       }
     }
 
@@ -421,7 +421,7 @@
     }
 
     setValue(value) {
-      if(value != this.object) {
+      if(value !== this.object) {
         this.data[this.property] = value
         this.object = value
         this.elements = []
@@ -447,7 +447,7 @@
 
     updateElementIndices() {
       for(let i = 0; i < this.elements.length; i++) {
-        if(this.elements[i].property != i) {
+        if(this.elements[i].property !== i) {
           this.elements[i].setProperty(i)
         }
       }
@@ -523,7 +523,7 @@
           addBarrier: (propName, validator) => this.addBarrier(propName, validator),
           removeBarrier: (propName, validator) => this.removeBarrier(propName, validator),
           waitForFieldBarriers: (propName) => this.waitForFieldBarriers(propName),
-          waitForBarriers: (propName) => this.waitForBarriers(),
+          waitForBarriers: () => this.waitForBarriers(),
 
           addElementToArray: (propName, initialValue) => this.addElementToArray(propName, initialValue),
           removeElementFromArray: (propName, index) => this.removeElementFromArray(propName, index),
@@ -615,7 +615,7 @@
       removeValidator(name, validator) {
         let validators = this.getNode(name).validators
         let id = validators.indexOf(validator)
-        if(id == -1) throw new Error("validator not found")
+        if(id === -1) throw new Error("validator not found")
         validators.splice(id)
       },
       validateField(name, context) {
@@ -643,7 +643,7 @@
       removeBarrier(name, barrier) {
         let barriers = this.getNode(name).barriers
         let id = barriers.indexOf(barrier)
-        if(id == -1) throw new Error("barrier not found")
+        if(id === -1) throw new Error("barrier not found")
         barriers.splice(id)
       },
 

package/index.js

@@ -22,5 +22,5 @@ import { analytics, useAnalytics, installRouterAnalytics, synchronized, synchron
 export { analytics, useAnalytics, installRouterAnalytics, synchronized, synchronizedList }
 
 export {
-  useLocale, watchLocale, getLocale, getLocaleObservable, updateLocale, captureLocale, localTime, getOtherOwnerLocale
+  useLocale, Locale
 } from './logic/locale'

package/logic/locale.js

@@ -2,106 +2,110 @@ import { useApi } from '@live-change/vue3-ssr'
 import { ObservableValue } from '@live-change/dao'
 import { ref, computed, onUnmounted, getCurrentInstance } from 'vue'
 
-let localeObservable
-let localeRef = ref()
+export class Locale {
+  constructor(context) {
+    this.localeObservable
+    this.localeRef = ref()
+    this.context = context ?? getCurrentInstance().appContext
+    this.api = useApi(context)
+
+    this.language = computed(() =>
+      this.localeRef.value?.language ?? this.localeRef.value?.capturedLanguage
+      ?? (typeof navigator != 'undefined' && navigator.language)
+    )
+    this.currency = computed(() =>
+      nonEmptyObject(this.localeRef.value?.currency) ?? nonEmptyObject(this.localeRef.value?.capturedCurrency)
+      ?? 'usd'
+    )
+    this.dateTime = computed(() =>
+      nonEmptyObject(this.localeRef.value?.dateTime) ?? nonEmptyObject(this.localeRef.value?.capturedDateTime)
+      ?? new Intl.DateTimeFormat().resolvedOptions()
+    )
+    this.list = computed(() =>
+      nonEmptyObject(this.localeRef.value?.list) ?? nonEmptyObject(this.localeRef.value?.capturedList)
+      ?? new Intl.ListFormat().resolvedOptions()
+    )
+    this.number = computed(() =>
+      nonEmptyObject(this.localeRef.value?.number) ?? nonEmptyObject(this.localeRef.value?.capturedNumber)
+      ?? new Intl.NumberFormat().resolvedOptions()
+    )
+    this.plural = computed(() =>
+      nonEmptyObject(this.localeRef.value?.plural) ?? nonEmptyObject(this.localeRef.value?.capturedPlural)
+      ?? new Intl.PluralRules().resolvedOptions()
+    )
+    this.relativeTime = computed(() =>
+      nonEmptyObject(this.localeRef.value?.relativeTime) ??
+      nonEmptyObject(this.localeRef.value?.capturedRelativeTime)
+      ?? new Intl.RelativeTimeFormat().resolvedOptions()
+    )
+    this.timezoneOffset = computed(() => getTimeZoneOffset(new Date(), this.dateTime.value?.timeZone))
 
-export async function getOtherOwnerLocale(owner, context) {
-  if(localeObservable) localeObservable.unbindProperty(localeRef, 'value')
-  context = context ?? getCurrentInstance().appContext
-  const api = useApi(context)
-  if(typeof window === 'undefined') {
-    const value = await api.get(api.views.localeSettings.localeSettings(owner))
-    localeObservable = new ObservableValue(value)
-  } else {
-    localeObservable = api.observable(api.views.localeSettings.localeSettings(owner))
   }
-  localeObservable.bindProperty(localeRef, 'value')
-  localeObservable.wait()
-  return localeObservable.getValue()
-}
-
-export function getLocale(context) {
-  context = context ?? getCurrentInstance().appContext
-  return (async () => {
-    await getLocaleObservable(context)
-    await localeObservable.wait()
-    return localeObservable.getValue()
-  })()
-}
 
-export function getLocaleObservable(context) {
-  context = context ?? getCurrentInstance().appContext
-  return (async () => {
-    if(localeObservable) return localeObservable
-    const api = useApi(context)
+  async getOtherOwnerLocale(owner) {
+    if(this.localeObservable) this.localeObservable.unbindProperty(this.localeRef, 'value')
     if(typeof window === 'undefined') {
-      const value = await api.get(api.views.localeSettings.myLocaleSettings({}))
-      localeObservable = new ObservableValue(value)
+      const value = await this.api.get(this.api.views.localeSettings.localeSettings(owner))
+      this.localeObservable = new ObservableValue(value)
     } else {
-      localeObservable = api.observable(api.views.localeSettings.myLocaleSettings({}))
+      this.localeObservable = this.api.observable(this.api.views.localeSettings.localeSettings(owner))
     }
-    localeObservable.bindProperty(localeRef, 'value')
-    return localeObservable
-  })()
-}
+    this.localeObservable.bindProperty(this.localeRef, 'value')
+    this.localeObservable.wait()
+    return this.localeObservable.getValue()
+  }
 
-export function watchLocale(callback, context) {
-  context = context ?? getCurrentInstance().appContext
-  return (async () => {
-    const observable = await getLocaleObservable(context)
-    const observer = { set: callback }
-    observable.observe(observer)
-    onUnmounted(() => observable.unobserve(observer))
-    await observable.wait()
-    return observable.getValue()
-  })()
-}
+  async getLocale() {
+    return (async () => {
+      await this.getLocaleObservable()
+      await this.localeObservable.wait()
+      return this.localeObservable.getValue()
+    })()
+  }
 
-export function updateLocale(localSettingsUpdate, context) {
-  const api = useApi(context)
-  return api.actions.localeSettings.setOrUpdateMyLocaleSettings(localSettingsUpdate)
-}
-export function captureLocale(context) {
-  context = context || getCurrentInstance().appContext
-  if(typeof navigator === 'undefined') return
-  return (async () => {
-    const localeSettings = await getLocale(context)
-    //console.log("LOCALE SETTINGS", JSON.stringify(localeSettings, null, '  '))
-
-    const capturedLanguage = navigator.language
-    const capturedDateTime = new Intl.DateTimeFormat().resolvedOptions()
-    const capturedList = new Intl.ListFormat().resolvedOptions()
-    const capturedNumber = new Intl.NumberFormat().resolvedOptions()
-    const capturedPlural = new Intl.PluralRules().resolvedOptions()
-    const capturedRelativeTime = new Intl.RelativeTimeFormat().resolvedOptions()
-
-    const capturedLocaleSettings = {
-      capturedLanguage,
-      capturedDateTime,
-      capturedList,
-      capturedNumber,
-      capturedPlural,
-      capturedRelativeTime
-    }
+  async getLocaleObservable() {
+    return (async () => {
+      if(this.localeObservable) return this.localeObservable
+      if(typeof window === 'undefined') {
+        const value = await this.api.get(this.api.views.localeSettings.myLocaleSettings({}))
+        this.localeObservable = new ObservableValue(value)
+      } else {
+        this.localeObservable = this.api.observable(this.api.views.localeSettings.myLocaleSettings({}))
+      }
+      this.localeObservable.bindProperty(this.localeRef, 'value')
+      return this.localeObservable
+    })()
+  }
 
-    //console.log("CAPTURED LOCALE SETTINGS", JSON.stringify(capturedLocaleSettings, null, '  '))
-
-    /*console.log("language", localeSettings.capturedLanguage !== capturedLanguage)
-    console.log("dateTime", JSON.stringify(capturedDateTime) !== JSON.stringify(localeSettings.capturedDateTime))
-    console.log("list", JSON.stringify(capturedList) !== JSON.stringify(localeSettings.capturedList))
-    console.log("number", JSON.stringify(capturedNumber) !== JSON.stringify(localeSettings.capturedNumber))
-    console.log("plural", JSON.stringify(capturedPlural) !== JSON.stringify(localeSettings.capturedPlural))
-    console.log("relativeTime", JSON.stringify(capturedRelativeTime) !== JSON.stringify(localeSettings.capturedRelativeTime))
-*/
-    if(!localeSettings
-      || localeSettings.capturedLanguage !== capturedLanguage
-      || JSON.stringify(localeSettings.capturedDateTime) !== JSON.stringify(capturedDateTime)
-      || JSON.stringify(localeSettings.capturedList) !== JSON.stringify(capturedList)
-      || JSON.stringify(localeSettings.capturedNumber) !== JSON.stringify(capturedNumber)
-      || JSON.stringify(localeSettings.capturedPlural) !== JSON.stringify(capturedPlural)
-      || JSON.stringify(localeSettings.capturedRelativeTime) !== JSON.stringify(capturedRelativeTime)
-    ) {
-      const update = {
+  async watchLocale(callback) {
+    return (async () => {
+      const observable = await this.getLocaleObservable()
+      const observer = { set: callback }
+      observable.observe(observer)
+      onUnmounted(() => observable.unobserve(observer))
+      await observable.wait()
+      return observable.getValue()
+    })()
+  }
+
+  updateLocale(localSettingsUpdate) {
+    return this.api.actions.localeSettings.setOrUpdateMyLocaleSettings(localSettingsUpdate)
+  }
+
+  async captureLocale() {
+    if(typeof navigator === 'undefined') return
+    return (async () => {
+      const localeSettings = await this.getLocale()
+      //console.log("LOCALE SETTINGS", JSON.stringify(localeSettings, null, '  '))
+
+      const capturedLanguage = navigator.language
+      const capturedDateTime = new Intl.DateTimeFormat().resolvedOptions()
+      const capturedList = new Intl.ListFormat().resolvedOptions()
+      const capturedNumber = new Intl.NumberFormat().resolvedOptions()
+      const capturedPlural = new Intl.PluralRules().resolvedOptions()
+      const capturedRelativeTime = new Intl.RelativeTimeFormat().resolvedOptions()
+
+      const capturedLocaleSettings = {
         capturedLanguage,
         capturedDateTime,
         capturedList,
@@ -109,10 +113,42 @@ export function captureLocale(context) {
         capturedPlural,
         capturedRelativeTime
       }
-      console.log("UPDATE LOCALE SETTINGS", update)
-      await updateLocale(update, context)
-    }
-  })()
+
+      //console.log("CAPTURED LOCALE SETTINGS", JSON.stringify(capturedLocaleSettings, null, '  '))
+
+      /*console.log("language", localeSettings.capturedLanguage !== capturedLanguage)
+      console.log("dateTime", JSON.stringify(capturedDateTime) !== JSON.stringify(localeSettings.capturedDateTime))
+      console.log("list", JSON.stringify(capturedList) !== JSON.stringify(localeSettings.capturedList))
+      console.log("number", JSON.stringify(capturedNumber) !== JSON.stringify(localeSettings.capturedNumber))
+      console.log("plural", JSON.stringify(capturedPlural) !== JSON.stringify(localeSettings.capturedPlural))
+      console.log("relativeTime", JSON.stringify(capturedRelativeTime) !== JSON.stringify(localeSettings.capturedRelativeTime))
+  */
+      if(!localeSettings
+        || localeSettings.capturedLanguage !== capturedLanguage
+        || JSON.stringify(localeSettings.capturedDateTime) !== JSON.stringify(capturedDateTime)
+        || JSON.stringify(localeSettings.capturedList) !== JSON.stringify(capturedList)
+        || JSON.stringify(localeSettings.capturedNumber) !== JSON.stringify(capturedNumber)
+        || JSON.stringify(localeSettings.capturedPlural) !== JSON.stringify(capturedPlural)
+        || JSON.stringify(localeSettings.capturedRelativeTime) !== JSON.stringify(capturedRelativeTime)
+      ) {
+        const update = {
+          capturedLanguage,
+          capturedDateTime,
+          capturedList,
+          capturedNumber,
+          capturedPlural,
+          capturedRelativeTime
+        }
+        console.log("UPDATE LOCALE SETTINGS", update)
+        await this.updateLocale(update)
+      }
+    })()
+  }
+
+  localTime(date) {
+    return new Date(new Date(date).getTime() + this.timezoneOffset?.value)
+  }
+
 }
 
 function getTimeZoneOffset(d, tz) {
@@ -123,37 +159,18 @@ function getTimeZoneOffset(d, tz) {
   return (t2 - t1) / 60 / 1000
 }
 
-export const language = computed(() => localeRef.value?.language ?? localeRef.value?.capturedLanguage ??
-    (typeof navigator != 'undefined' && navigator.language))
-export const currency = computed(() => localeRef.value?.currency ?? localeRef.value?.capturedCurrency ?? 'usd')
-export const dateTime = computed(() => localeRef.value?.dateTime ?? localeRef.value?.capturedDateTime
-  ?? new Intl.DateTimeFormat().resolvedOptions())
-export const list = computed(() => localeRef.value?.list ?? localeRef.value?.capturedList
-  ?? new Intl.ListFormat().resolvedOptions())
-export const number = computed(() => localeRef.value?.number ?? localeRef.value?.capturedNumber
-  ?? new Intl.NumberFormat().resolvedOptions())
-export const plural = computed(() => localeRef.value?.plural ?? localeRef.value?.capturedPlural
-  ?? new Intl.PluralRules().resolvedOptions())
-export const relativeTime = computed(() => localeRef.value?.relativeTime ?? localeRef.value?.capturedRelativeTime
-  ?? new Intl.RelativeTimeFormat().resolvedOptions())
-
-export const timezoneOffset = computed(() => getTimeZoneOffset(new Date(), dateTime.value?.timeZone))
-
-export function localTime(date) {
-  return new Date(new Date(date).getTime() + timezoneOffset?.value)
+function nonEmptyObject(obj) { /// because command form can add empty objects on language change
+  if(!obj) return undefined
+  if(Object.keys(obj).length === 0) return undefined
+  return obj
 }
 
+
 export function useLocale(context) {
-  return {
-    language,
-    currency,
-    dateTime,
-    list,
-    number,
-    plural,
-    relativeTime,
-    timezoneOffset,
-    localTime
+  context = context ?? getCurrentInstance().appContext
+  if(!context.config.globalProperties.$locale) {
+    context.config.globalProperties.$locale = new Locale(context)
   }
+  return context = context.config.globalProperties.$locale
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/vue3-components",
-  "version": "0.8.22",
+  "version": "0.8.23",
   "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.22",
+    "@live-change/vue3-ssr": "^0.8.23",
     "debug": "^4.3.4",
     "mitt": "3.0.1",
     "vue": "^3.4.19"
   },
-  "gitHead": "70a56ac3dc54167a2d32ce47a00150e7a94bd04d"
+  "gitHead": "581260523149a1e596f08e878b5f4fabeaba26ea"
 }

package/view/RangeViewer.vue

@@ -15,6 +15,8 @@
 
     <slot v-if="loadingTop" name="loadingTop"></slot>
 
+    <slot v-if="frozen && buckets?.changed" name="changedTop"></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 }">
@@ -24,6 +26,8 @@
 
     </template>
 
+    <slot v-if="frozen && buckets?.changed" name="changedBottom"></slot>
+
     <slot v-if="loadingBottom" name="loadingBottom"></slot>
 
     <scroll-border placement="bottom"
@@ -115,18 +119,23 @@
     dropBottomDelay: {
       type: Number,
       default: 200
+    },
+    frozen: {
+      type: Boolean,
+      default: false
     }
   })
 
   const {
     pathFunction, bucketSize, initialPosition, softClose,
     loadTopSensorSize, loadBottomSensorSize, dropTopSensorSize, dropBottomSensorSize,
-    loadTopDelay, loadBottomDelay, dropTopDelay, dropBottomDelay,
+    loadTopDelay, loadBottomDelay, dropTopDelay, dropBottomDelay, frozen
   } = toRefs(props)
 
   const emit = defineEmits([
       'loadTop', 'loadBottom', 'loadedTop', 'loadedBottom',
-      'dropTop', 'dropBottom', 'droppedTop', 'droppedBottom'
+      'dropTop', 'dropBottom', 'droppedTop', 'droppedBottom',
+      'changed'
   ])
 
   const loadingTop = ref(false)
@@ -162,6 +171,15 @@
     throw new Error("Either buckets or pathFunction must be provided")
   }
 
+  watch(() => frozen.value, (frozen) => {
+    if(frozen) buckets.value.freeze()
+      else buckets.value.unfreeze()
+  }, { immediate: true })
+
+  watch(() => buckets.value?.changed, () => {
+    emit('changed')
+  })
+
   function canLoadBottom() {
     return props.canLoadBottom && buckets.value.canLoadBottom()
   }
@@ -221,6 +239,7 @@
     return result
   }
 
+
 </script>
 
 <style scoped>