@koumoul/vjsf 3.0.0-beta.44 → 3.0.0-beta.45

package/src/components/nodes/list.vue

@@ -12,12 +12,13 @@ import { VMenu } from 'vuetify/components/VMenu'
 import { VForm } from 'vuetify/components/VForm'
 import { isSection, clone, getRegexp } from '@json-layout/core'
 import Node from '../node.vue'
-import { moveDataItem } from '../../utils/index.js'
+import { moveDataItem } from '../../utils/arrays.js'
 import useDnd from '../../composables/use-dnd.js'
 import useCompDefaults from '../../composables/use-comp-defaults.js'
 
 useDefaults({}, 'VjsfList')
 const vSheetProps = useCompDefaults('VjsfList-VSheet', { border: true })
+const theme = useTheme()
 
 const props = defineProps({
   modelValue: {
@@ -32,27 +33,32 @@ const props = defineProps({
   }
 })
 
-const theme = useTheme()
+// we access vjsfNode properties through computeds so that the parts without mutations do not trigger reactivity
+// this is to leverage the immutability provided by immer in json-layout
+const options = computed(() => props.modelValue.options)
+const layout = computed(() => props.modelValue.layout)
+const children = computed(() => props.modelValue.children)
 
 /* use composable for drag and drop */
 const { activeDnd, sortableArray, draggable, hovered, dragging, itemBind, handleBind } = useDnd(props.modelValue.children, () => {
-  const newData = props.modelValue.layout.indexed
+  const newData = layout.value.indexed
     ? sortableArray.value.reduce((a, child) => { a[child.key] = child.data; return a }, /** @type {Record<string, any>} */({}))
     : sortableArray.value.map((child) => child.data)
-  console.log(newData)
   props.statefulLayout.input(props.modelValue, newData)
 })
-watch(() => props.modelValue.children, (array) => { sortableArray.value = array })
+watch(children, (array) => { sortableArray.value = array })
 
 /* manage hovered and edited items */
+// const editedItem = computed(() => activatedItems.value[fullKey.value])
 const editedItem = computed(() => {
   return props.statefulLayout.activatedItems[props.modelValue.fullKey]
 })
+
 const menuOpened = ref(-1)
 const activeItem = computed(() => {
   if (
-    props.modelValue.layout.listActions.includes('edit') &&
-    props.modelValue.layout.listEditMode === 'inline-single' &&
+    layout.value.listActions.includes('edit') &&
+    layout.value.listEditMode === 'inline-single' &&
     editedItem.value !== undefined
   ) {
     return editedItem.value
@@ -63,14 +69,14 @@ const activeItem = computed(() => {
 })
 
 const buttonDensity = computed(() => {
-  if (props.modelValue.options.density === 'default') return 'comfortable'
-  return props.modelValue.options.density
+  if (options.value.density === 'default') return 'comfortable'
+  return options.value.density
 })
 
 const pushEmptyItem = () => {
   const newData = (props.modelValue.data ?? []).concat([undefined])
   props.statefulLayout.input(props.modelValue, newData)
-  if (props.modelValue.layout.listEditMode === 'inline-single') {
+  if (layout.value.listEditMode === 'inline-single') {
     props.statefulLayout.activateItem(props.modelValue, newData.length - 1)
   }
 }
@@ -84,7 +90,7 @@ const pushEmptyIndexedItem = () => {
   if (!newKeyForm.value.isValid) return
   const newData = { ...(props.modelValue.data ?? {}), [newKey.value]: null }
   props.statefulLayout.input(props.modelValue, newData)
-  if (props.modelValue.layout.listEditMode === 'inline-single') {
+  if (layout.value.listEditMode === 'inline-single') {
     props.statefulLayout.activateItem(props.modelValue, Object.keys(newData).length - 1)
   }
   newKey.value = ''
@@ -95,7 +101,7 @@ const pushEmptyIndexedItem = () => {
  * @param {number} childIndex
  */
 const deleteItem = (childIndex) => {
-  if (props.modelValue.layout.indexed) {
+  if (layout.value.indexed) {
     const oldData = /** @type {Record<string, any>} */(props.modelValue.data)
     const keys = Object.keys(props.modelValue.data)
     /** @type {Record<string, any>} */
@@ -119,7 +125,7 @@ const deleteItem = (childIndex) => {
 const duplicateItem = (child, childIndex) => {
   const newData = [...props.modelValue.data.slice(0, childIndex), clone(child.data), ...props.modelValue.data.slice(childIndex)]
   props.statefulLayout.input(props.modelValue, newData)
-  if (props.modelValue.layout.listEditMode === 'inline-single') {
+  if (layout.value.listEditMode === 'inline-single') {
     props.statefulLayout.activateItem(props.modelValue, childIndex + 1)
   }
   menuOpened.value = -1
@@ -128,7 +134,7 @@ const duplicateItem = (child, childIndex) => {
 const itemBorderColor = computed(() => (/** @type {import('@json-layout/core').StateNode} */child, /** @type {number} */childIndex) => {
   if (editedItem.value === childIndex) return theme.current.value.colors.primary
   if (child.validated && (child.error || child.childError)) return theme.current.value.colors.error
-  if (props.modelValue.options.readOnly) return 'transparent'
+  if (options.value.readOnly) return 'transparent'
   if (activeItem.value === childIndex) return theme.current.value.colors.primary
   return 'transparent'
 })
@@ -143,7 +149,7 @@ const itemBorderColor = computed(() => (/** @type {import('@json-layout/core').S
       </v-list-subheader>
       <template
         v-for="(child, childIndex) of sortableArray"
-        :key="props.modelValue.children.findIndex(c => c === child)"
+        :key="children.findIndex(c => c === child)"
       >
         <v-list-item
           v-bind="itemBind(childIndex)"

package/src/components/nodes/number-combobox.vue

@@ -1,7 +1,8 @@
 <script>
-import { defineComponent, h, computed, shallowRef, ref } from 'vue'
+import { defineComponent, h, computed, toRef } from 'vue'
 import { VCombobox } from 'vuetify/components/VCombobox'
-import { getInputProps, getCompSlots } from '../../utils/index.js'
+import useNode from '../../composables/use-node.js'
+import useGetItems from '../../composables/use-get-items.js'
 import { useDefaults } from 'vuetify'
 
 export default defineComponent({
@@ -18,57 +19,32 @@ export default defineComponent({
     }
   },
   setup (props) {
-    useDefaults({}, 'VjsfNumberCombobox')
+    useDefaults({}, 'VjsfCombobox')
 
-    /** @type import('vue').Ref<import('@json-layout/vocabulary').SelectItems> */
-    const items = shallowRef(props.modelValue.layout.items ?? [])
-    /** @type import('vue').Ref<boolean> */
-    const loading = ref(false)
-
-    /** @type import('@json-layout/core').StateTree | null */
-    let lastStateTree = null
-    /** @type Record<string, any> | null */
-    let lastContext = null
-
-    const hasItems = computed(() => {
-      return !!(props.modelValue.layout.items || props.modelValue.layout.getItems)
-    })
-
-    const refresh = async () => {
-      if (props.modelValue.layout.items) return
-      if (props.statefulLayout.stateTree === lastStateTree && props.statefulLayout.options.context === lastContext) return
-      lastStateTree = props.statefulLayout.stateTree
-      lastContext = props.statefulLayout.options.context ?? null
-      if (hasItems.value) {
-        loading.value = true
-        items.value = await props.statefulLayout.getItems(props.modelValue)
-        loading.value = false
-      }
-    }
-
-    if (!props.modelValue.layout.items) {
-      refresh()
-    }
+    const nodeRef = toRef(props, 'modelValue')
+    const getItems = useGetItems(nodeRef, props.statefulLayout)
+    const { inputProps, compSlots, localData, layout, options } = useNode(nodeRef, props.statefulLayout, { bindData: false, layoutPropsMap: ['step', 'min', 'max'] })
 
     const fieldProps = computed(() => {
-      const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['step', 'min', 'max'])
+      const fieldProps = { ...inputProps.value }
       fieldProps.type = 'number'
-      fieldProps.loading = loading.value
-      if (hasItems.value) fieldProps.items = items.value
-      if (props.modelValue.options.readOnly) fieldProps.menuProps = { modelValue: false }
-      if (props.modelValue.layout.multiple) {
+      fieldProps.returnObject = false
+      if (options.value.readOnly) fieldProps.menuProps = { modelValue: false }
+      if (getItems.hasItems.value) {
+        fieldProps.items = getItems.items.value
+        fieldProps.loading = getItems.loading.value
+      }
+      if (layout.value.multiple) {
         fieldProps.multiple = true
         fieldProps.chips = true
         fieldProps.closableChips = true
       }
-      fieldProps['onUpdate:menu'] = () => refresh()
       fieldProps['onUpdate:modelValue'] = (/** @type string[] */value) => props.statefulLayout.input(props.modelValue, value && value.map(Number))
       return fieldProps
     })
-    const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
 
     // @ts-ignore
-    return () => h(VCombobox, fieldProps.value, fieldSlots.value)
+    return () => h(VCombobox, { ...fieldProps.value, modelValue: localData.value }, compSlots.value)
   }
 })
 

package/src/components/nodes/number-field.vue

@@ -1,7 +1,7 @@
 <script>
-import { defineComponent, h, computed } from 'vue'
+import { defineComponent, h, computed, toRef } from 'vue'
 import { VTextField } from 'vuetify/components/VTextField'
-import { getInputProps, getCompSlots } from '../../utils/index.js'
+import useNode from '../../composables/use-node.js'
 import { useDefaults } from 'vuetify'
 
 export default defineComponent({
@@ -20,16 +20,19 @@ export default defineComponent({
   setup (props) {
     useDefaults({}, 'VjsfNumberField')
 
-    const fieldProps = computed(() => {
-      const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['step', 'min', 'max', 'placeholder'])
-      fieldProps.type = 'number'
-      fieldProps['onUpdate:modelValue'] = (/** @type string */value) => props.statefulLayout.input(props.modelValue, value && Number(value))
-      return fieldProps
+    const { inputProps, localData, compSlots } = useNode(
+      toRef(props, 'modelValue'), props.statefulLayout, { layoutPropsMap: ['step', 'min', 'max', 'placeholder'], bindData: false }
+    )
+
+    const fullProps = computed(() => {
+      const fullProps = { ...inputProps.value }
+      fullProps.type = 'number'
+      fullProps['onUpdate:modelValue'] = (/** @type string */value) => props.statefulLayout.input(props.modelValue, value && Number(value))
+      fullProps.modelValue = localData.value
+      return fullProps
     })
-    const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
 
-    // @ts-ignore
-    return () => h(VTextField, fieldProps.value, fieldSlots.value)
+    return () => h(VTextField, fullProps.value, compSlots.value)
   }
 })
 

package/src/components/nodes/one-of-select.vue

@@ -1,10 +1,10 @@
 <script setup>
 import { VRow, VCol } from 'vuetify/components/VGrid'
 import { VSelect } from 'vuetify/components/VSelect'
-import { ref, watch, computed, h } from 'vue'
+import { ref, watch, computed, toRef } from 'vue'
 import { isSection } from '@json-layout/core'
 import { isCompObject } from '@json-layout/vocabulary'
-import { getInputProps } from '../../utils/index.js'
+import useNode from '../../composables/use-node.js'
 import Node from '../node.vue'
 import { useDefaults } from 'vuetify'
 
@@ -23,12 +23,16 @@ const props = defineProps({
   }
 })
 
+const { inputProps, localData, skeleton, children } = useNode(
+  toRef(props, 'modelValue'), props.statefulLayout, { bindData: false }
+)
+
 /** @type import('vue').Ref<string | undefined> */
 const activeChildTree = ref(undefined)
-watch(() => props.modelValue, () => {
+watch(() => children.value?.[0]?.key, () => {
   if (props.modelValue.children?.length === 1) {
     if (typeof props.modelValue.children[0].key === 'number') {
-      activeChildTree.value = props.modelValue.skeleton.childrenTrees?.[props.modelValue.children[0].key]
+      activeChildTree.value = skeleton.value.childrenTrees?.[props.modelValue.children[0].key]
     }
   } else {
     activeChildTree.value = undefined
@@ -36,19 +40,18 @@ watch(() => props.modelValue, () => {
 }, { immediate: true })
 
 const onChange = (/** @type {string} */childTree) => {
-  if (!props.modelValue.skeleton.childrenTrees) return
-  props.statefulLayout.activateItem(props.modelValue, props.modelValue.skeleton.childrenTrees.indexOf(childTree))
+  if (!skeleton.value.childrenTrees) return
+  props.statefulLayout.activateItem(props.modelValue, skeleton.value.childrenTrees.indexOf(childTree))
 }
 
 const fieldProps = computed(() => {
-  const fieldProps = getInputProps(props.modelValue, props.statefulLayout)
-  fieldProps.modelValue = activeChildTree.value
+  const fieldProps = { ...inputProps.value }
   fieldProps['onUpdate:modelValue'] = onChange
   const items = []
-  for (const childTreePointer of props.modelValue.skeleton.childrenTrees || []) {
+  for (const childTreePointer of skeleton.value.childrenTrees || []) {
     const childTree = props.statefulLayout.compiledLayout.skeletonTrees[childTreePointer]
     const childLayout = props.statefulLayout.compiledLayout.normalizedLayouts[childTree.root]
-    if (!isCompObject(childLayout) || !childLayout.if || !!props.statefulLayout.evalNodeExpression(props.modelValue, childLayout.if, props.modelValue.data)) {
+    if (!isCompObject(childLayout) || !childLayout.if || !!props.statefulLayout.evalNodeExpression(props.modelValue, childLayout.if, localData.value)) {
       items.push(childTree)
     }
   }
@@ -64,6 +67,7 @@ const fieldProps = computed(() => {
     <v-col v-if="modelValue.skeleton.childrenTrees">
       <v-select
         v-bind="fieldProps"
+        :model-value="activeChildTree"
       />
     </v-col>
     <template v-if="modelValue.children?.[0]">

package/src/components/nodes/radio-group.vue

@@ -2,8 +2,8 @@
 import { VRadio } from 'vuetify/components/VRadio'
 import { VRadioGroup } from 'vuetify/components/VRadioGroup'
 import { VSkeletonLoader } from 'vuetify/components/VSkeletonLoader'
-import { defineComponent, h, computed } from 'vue'
-import { getInputProps, getCompSlots } from '../../utils/index.js'
+import { defineComponent, h, computed, toRef } from 'vue'
+import useNode from '../../composables/use-node.js'
 import useGetItems from '../../composables/use-get-items.js'
 import { useDefaults } from 'vuetify'
 
@@ -23,15 +23,18 @@ export default defineComponent({
   setup (props) {
     useDefaults({}, 'VjsfRadioGroup')
 
-    const getItems = useGetItems(props)
+    const nodeRef = toRef(props, 'modelValue')
+    const getItems = useGetItems(nodeRef, props.statefulLayout)
+    const { inputProps, compSlots, localData } = useNode(nodeRef, props.statefulLayout)
 
     const fieldProps = computed(() => {
-      const fieldProps = getInputProps(props.modelValue, props.statefulLayout)
+      const fieldProps = { ...inputProps.value }
+      fieldProps.modelValue = localData.value
       return fieldProps
     })
 
     const fieldSlots = computed(() => {
-      const slots = getCompSlots(props.modelValue, props.statefulLayout)
+      const slots = { ...compSlots.value }
       /** @type {import('vue').VNode[]} */
       const children = []
       if (getItems.loading.value) {

package/src/components/nodes/select.vue

@@ -1,20 +1,19 @@
 <script>
 import { VSelect } from 'vuetify/components/VSelect'
-import { defineComponent, h, computed } from 'vue'
-import { getSelectProps, getSelectSlots } from '../../utils/index.js'
-import useGetItems from '../../composables/use-get-items.js'
+import { defineComponent, h, computed, toRef } from 'vue'
+import useSelectNode from '../../composables/use-select-node.js'
 
 import { useDefaults } from 'vuetify'
 
 export default defineComponent({
   props: {
     modelValue: {
-    /** @type import('vue').PropType<import('../../types.js').VjsfSelectNode> */
+      /** @type import('vue').PropType<import('../../types.js').VjsfSelectNode> */
       type: Object,
       required: true
     },
     statefulLayout: {
-    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+      /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
       type: Object,
       required: true
     }
@@ -22,17 +21,18 @@ export default defineComponent({
   setup (props) {
     useDefaults({}, 'VjsfSelect')
 
-    const getItems = useGetItems(props)
+    const { getItems, selectProps, selectSlots, localData } = useSelectNode(toRef(props, 'modelValue'), props.statefulLayout)
 
     const fieldProps = computed(() => {
-      const fieldProps = getSelectProps(props.modelValue, props.statefulLayout)
+      const fieldProps = { ...selectProps.value }
       fieldProps.loading = getItems.loading.value
       fieldProps.items = getItems.items.value
+      fieldProps.modelValue = localData.value
       return fieldProps
     })
 
     // @ts-ignore
-    return () => h(VSelect, fieldProps.value, getSelectSlots(props.modelValue, props.statefulLayout, getItems))
+    return () => h(VSelect, fieldProps.value, selectSlots.value)
   }
 })
 

package/src/components/nodes/slider.vue

@@ -1,37 +1,37 @@
-<script setup>
+<script>
 import { VSlider } from 'vuetify/components/VSlider'
-import { computed } from 'vue'
-import { getInputProps } from '../../utils/index.js'
+import { defineComponent, computed, toRef, h } from 'vue'
+import useNode from '../../composables/use-node.js'
 import { useDefaults } from 'vuetify'
 
-useDefaults({}, 'VjsfSlider')
-
-const props = defineProps({
-  modelValue: {
-    /** @type import('vue').PropType<import('../../types.js').VjsfSliderNode> */
-    type: Object,
-    required: true
+export default defineComponent({
+  props: {
+    modelValue: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfSliderNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+      type: Object,
+      required: true
+    }
   },
-  statefulLayout: {
-    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
-    type: Object,
-    required: true
-  }
-})
+  setup (props) {
+    useDefaults({}, 'VjsfSlider')
+
+    const { inputProps, localData, compSlots } = useNode(
+      toRef(props, 'modelValue'), props.statefulLayout, { layoutPropsMap: ['step', 'min', 'max'] }
+    )
 
-const fieldProps = computed(() => {
-  const fieldProps = getInputProps(props.modelValue, props.statefulLayout)
-  if ('step' in props.modelValue.layout) fieldProps.step = props.modelValue.layout.step
-  fieldProps.min = props.modelValue.layout.min
-  fieldProps.max = props.modelValue.layout.max
-  return fieldProps
+    const fullProps = computed(() => {
+      const fullProps = { ...inputProps.value }
+      fullProps.modelValue = localData.value
+      fullProps['onUpdate:modelValue'] = (/** @type string */value) => props.statefulLayout.input(props.modelValue, value && Number(value))
+      return fullProps
+    })
+
+    return () => h(VSlider, fullProps.value, compSlots.value)
+  }
 })
 </script>
-
-<template>
-  <v-slider
-    type="number"
-    v-bind="fieldProps"
-    @update:model-value="value => statefulLayout.input(modelValue, value && Number(value))"
-  />
-</template>

package/src/components/nodes/switch.vue

@@ -1,35 +1,37 @@
-<script setup>
+<script>
+import { defineComponent, h, computed, toRef } from 'vue'
 import { VSwitch } from 'vuetify/components/VSwitch'
-import { computed } from 'vue'
-import { getInputProps } from '../../utils/index.js'
+import useNode from '../../composables/use-node.js'
 import { useDefaults } from 'vuetify'
 
-useDefaults({}, 'VjsfSwitch')
-
-const props = defineProps({
-  modelValue: {
-    /** @type import('vue').PropType<import('../../types.js').VjsfSwitchNode> */
-    type: Object,
-    required: true
+export default defineComponent({
+  props: {
+    modelValue: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfSwitchNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+      type: Object,
+      required: true
+    }
   },
-  statefulLayout: {
-    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
-    type: Object,
-    required: true
+  setup (props) {
+    useDefaults({}, 'VjsfSwitch')
+
+    const { inputProps, localData, compSlots } = useNode(toRef(props, 'modelValue'), props.statefulLayout)
+
+    const fullProps = computed(() => {
+      const fullProps = { ...inputProps.value }
+      // it is not very common to show an error below checkboxes and switches and without hide-details=auto they take a lot of space
+      if (!('hideDetails' in inputProps)) fullProps.hideDetails = 'auto'
+      fullProps.modelValue = localData.value
+      return fullProps
+    })
+
+    return () => h(VSwitch, fullProps.value, compSlots.value)
   }
 })
 
-const fieldProps = computed(() => {
-  const inputProps = getInputProps(props.modelValue, props.statefulLayout)
-  // it is not very common to show an error below checkboxes and switches and without hide-details=auto they take a lot of space
-  if (!('hideDetails' in inputProps)) inputProps.hideDetails = 'auto'
-  return inputProps
-})
 </script>
-
-<template>
-  <v-switch
-    v-bind="fieldProps"
-    @update:model-value="value => statefulLayout.input(modelValue, value)"
-  />
-</template>

package/src/components/nodes/text-field.vue

@@ -1,7 +1,7 @@
 <script>
-import { defineComponent, h, computed } from 'vue'
+import { defineComponent, h, toRef } from 'vue'
 import { VTextField } from 'vuetify/components/VTextField'
-import { getInputProps, getCompSlots } from '../../utils/index.js'
+import useNode from '../../composables/use-node.js'
 import { useDefaults } from 'vuetify'
 
 export default defineComponent({
@@ -20,11 +20,11 @@ export default defineComponent({
   setup (props) {
     useDefaults({}, 'VjsfTextField')
 
-    const fieldProps = computed(() => getInputProps(props.modelValue, props.statefulLayout, ['placeholder']))
-    const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
+    const { inputProps, localData, compSlots } = useNode(
+      toRef(props, 'modelValue'), props.statefulLayout, { layoutPropsMap: ['placeholder'] }
+    )
 
-    // @ts-ignore
-    return () => h(VTextField, fieldProps.value, fieldSlots.value)
+    return () => h(VTextField, { ...inputProps.value, modelValue: localData.value }, compSlots.value)
   }
 })
 

package/src/components/nodes/textarea.vue

@@ -1,7 +1,7 @@
 <script>
-import { defineComponent, h, computed, ref, watch } from 'vue'
+import { defineComponent, h, computed, ref, watch, toRef } from 'vue'
 import { VTextarea } from 'vuetify/components/VTextarea'
-import { getInputProps, getCompSlots } from '../../utils/index.js'
+import useNode from '../../composables/use-node.js'
 import { useDefaults } from 'vuetify'
 
 export default defineComponent({
@@ -23,22 +23,27 @@ export default defineComponent({
     /** @type {import('vue').Ref<null | HTMLElement>} */
     const textarea = ref(null)
 
-    const fieldProps = computed(() => {
-      const inputProps = getInputProps(props.modelValue, props.statefulLayout, ['placeholder'])
-      inputProps.ref = textarea
-      if (props.modelValue.options.readOnly && props.modelValue.options.summary) inputProps.rows = 3
-      return inputProps
+    const { inputProps, localData, compSlots, options } = useNode(
+      toRef(props, 'modelValue'), props.statefulLayout, { layoutPropsMap: ['placeholder'] }
+    )
+
+    const rows = computed(() => options.value.readOnly && options.value.summary ? 3 : undefined)
+
+    const fullProps = computed(() => {
+      const fullProps = { ...inputProps.value }
+      fullProps.ref = textarea
+      fullProps.rows = rows.value
+      fullProps.modelValue = localData.value
+      return fullProps
     })
-    const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
 
-    watch(() => props.modelValue.options.readOnly, (readOnly) => {
+    watch(() => options.value.readOnly, (readOnly) => {
       if (readOnly && textarea.value) {
         textarea.value.scrollTop = 0
       }
     })
 
-    // @ts-ignore
-    return () => h(VTextarea, fieldProps.value, fieldSlots.value)
+    return () => h(VTextarea, fullProps.value, compSlots.value)
   }
 })
 

package/src/components/nodes/time-picker.vue

@@ -2,8 +2,9 @@
 import TextFieldMenu from '../fragments/text-field-menu.vue'
 import { VTimePicker } from 'vuetify/labs/VTimePicker'
 import { useDate, useDefaults } from 'vuetify'
-import { computed } from 'vue'
-import { getCompProps, getShortTime, getLongTime } from '../../utils/index.js'
+import { computed, toRef } from 'vue'
+import { getShortTime, getLongTime } from '../../utils/dates.js'
+import useNode from '../../composables/use-node.js'
 
 useDefaults({}, 'VjsfDatePicker')
 
@@ -22,23 +23,25 @@ const props = defineProps({
 
 const vDate = useDate()
 
+const { compProps, localData } = useNode(toRef(props, 'modelValue'), props.statefulLayout)
+
 const timePickerProps = computed(() => {
-  const timePickerProps = getCompProps(props.modelValue, true)
+  const timePickerProps = { ...compProps.value }
   timePickerProps['ampm-in-title'] = true
-  if (props.modelValue.data) timePickerProps.modelValue = getShortTime(props.modelValue.data)
+  if (localData.value) timePickerProps.modelValue = getShortTime(localData.value)
   return timePickerProps
 })
 </script>
 
 <template>
   <text-field-menu
-    :model-value="modelValue"
+    :model-value="props.modelValue"
     :stateful-layout="statefulLayout"
     :formatted-value="timePickerProps.modelValue && vDate.format('2010-04-13T' + timePickerProps.modelValue, 'fullTime')"
   >
     <v-time-picker
       v-bind="timePickerProps"
-      @update:model-value="value => {statefulLayout.input(modelValue, value && getLongTime(value))}"
+      @update:model-value="value => {statefulLayout.input(props.modelValue, value && getLongTime(value))}"
     />
   </text-field-menu>
 </template>

package/src/composables/use-dnd.js

@@ -1,5 +1,5 @@
 import { shallowRef, ref, computed } from 'vue'
-import { moveArrayItem } from '../utils/index.js'
+import { moveArrayItem } from '../utils/arrays.js'
 
 /**
  * @template T