@koumoul/vjsf 3.0.0-beta.8 → 3.0.0

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

@@ -1,7 +1,8 @@
 <script>
-import { defineComponent, h, computed } from 'vue'
-import { VTextField } from 'vuetify/components'
-import { getInputProps, getCompSlots } from '../../utils/index.js'
+import { defineComponent, h, computed, toRef } from 'vue'
+import { VTextField } from 'vuetify/components/VTextField'
+import useNode from '../../composables/use-node.js'
+import { useDefaults } from 'vuetify'
 
 export default defineComponent({
   props: {
@@ -17,16 +18,21 @@ export default defineComponent({
     }
   },
   setup (props) {
-    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
+    useDefaults({}, 'VjsfNumberField')
+
+    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,8 +1,14 @@
 <script setup>
-import { VSelect, VRow } from 'vuetify/components'
-import { shallowRef, watch } from 'vue'
+import { VRow, VCol } from 'vuetify/components/VGrid'
+import { VSelect } from 'vuetify/components/VSelect'
+import { ref, watch, computed, toRef } from 'vue'
 import { isSection } from '@json-layout/core'
+import { isCompObject } from '@json-layout/vocabulary'
+import useNode from '../../composables/use-node.js'
 import Node from '../node.vue'
+import { useDefaults } from 'vuetify'
+
+useDefaults({}, 'VjsfOneOfSelect')
 
 const props = defineProps({
   modelValue: {
@@ -17,40 +23,60 @@ const props = defineProps({
   }
 })
 
-/** @type import('vue').ShallowRef<import('@json-layout/core').SkeletonTree | undefined> */
-const activeChildTree = shallowRef(undefined)
-watch(() => props.modelValue, () => {
-  // we set the active oneOf child as the one whose schema validates on the current data
-  if (props.modelValue.fullKey in props.statefulLayout.activeItems) {
-    activeChildTree.value = props.modelValue.skeleton.childrenTrees?.[props.statefulLayout.activeItems[props.modelValue.fullKey]]
+const { inputProps, localData, skeleton, children } = useNode(
+  toRef(props, 'modelValue'), props.statefulLayout, { bindData: false }
+)
+
+/** @type import('vue').Ref<string | undefined> */
+const activeChildTree = ref(undefined)
+watch(() => children.value?.[0]?.key, () => {
+  if (props.modelValue.children?.length === 1) {
+    if (typeof props.modelValue.children[0].key === 'number') {
+      activeChildTree.value = skeleton.value.childrenTrees?.[props.modelValue.children[0].key]
+    }
   } else {
     activeChildTree.value = undefined
   }
 }, { immediate: true })
 
-const onChange = (/** @type import('@json-layout/core').SkeletonTree */childTree) => {
-  if (!props.modelValue.skeleton.childrenTrees) return
-  props.statefulLayout.activateItem(props.modelValue, props.modelValue.skeleton.childrenTrees.indexOf(childTree))
+const onChange = (/** @type {string} */childTree) => {
+  if (!skeleton.value.childrenTrees) return
+  props.statefulLayout.activateItem(props.modelValue, skeleton.value.childrenTrees.indexOf(childTree))
 }
 
+const fieldProps = computed(() => {
+  const fieldProps = { ...inputProps.value }
+  fieldProps['onUpdate:modelValue'] = onChange
+  const items = []
+  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, localData.value)) {
+      items.push(childTree)
+    }
+  }
+  fieldProps.items = items
+  fieldProps.itemTitle = 'title'
+  fieldProps.itemValue = (/** @type {import('@json-layout/core').SkeletonTree} */childTree) => childTree.root
+  return fieldProps
+})
 </script>
 
 <template>
-  <v-select
-    v-if="modelValue.skeleton.childrenTrees"
-    v-model="activeChildTree"
-    :items="modelValue.skeleton.childrenTrees"
-    item-title="title"
-    return-object
-    :error-messages="modelValue.validated ? modelValue.error : null"
-    @update:model-value="onChange"
-  />
-  <v-row v-if="modelValue.children?.[0]">
-    <node
-      v-for="grandChild of isSection(modelValue.children?.[0]) ? modelValue.children?.[0].children : modelValue.children"
-      :key="grandChild.fullKey"
-      :model-value="/** @type import('../../types.js').VjsfNode */(grandChild)"
-      :stateful-layout="statefulLayout"
-    />
+  <v-row>
+    <v-col v-if="modelValue.skeleton.childrenTrees">
+      <v-select
+        v-bind="fieldProps"
+        :model-value="activeChildTree"
+      />
+    </v-col>
+    <template v-if="modelValue.children?.[0]">
+      <node
+        v-for="grandChild of isSection(modelValue.children?.[0]) ? modelValue.children?.[0].children : modelValue.children"
+        :key="grandChild.fullKey"
+        :model-value="/** @type import('../../types.js').VjsfNode */(grandChild)"
+        :stateful-layout="statefulLayout"
+      />
+    </template>
   </v-row>
 </template>

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

@@ -0,0 +1,58 @@
+<script>
+import { VRadio } from 'vuetify/components/VRadio'
+import { VRadioGroup } from 'vuetify/components/VRadioGroup'
+import { VSkeletonLoader } from 'vuetify/components/VSkeletonLoader'
+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'
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfRadioGroupNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+      type: Object,
+      required: true
+    }
+  },
+  setup (props) {
+    useDefaults({}, 'VjsfRadioGroup')
+
+    const nodeRef = toRef(props, 'modelValue')
+    const getItems = useGetItems(nodeRef, props.statefulLayout)
+    const { inputProps, compSlots, localData } = useNode(nodeRef, props.statefulLayout)
+
+    const fieldProps = computed(() => {
+      const fieldProps = { ...inputProps.value }
+      fieldProps.modelValue = localData.value
+      return fieldProps
+    })
+
+    const fieldSlots = computed(() => {
+      const slots = { ...compSlots.value }
+      /** @type {import('vue').VNode[]} */
+      const children = []
+      if (getItems.loading.value) {
+        children.push(h(VSkeletonLoader, { type: 'chip' }))
+      } else {
+        for (const item of getItems.items.value) {
+          children.push(h(VRadio, { label: item.title, value: item.value }))
+        }
+      }
+      slots.default = () => children
+      return slots
+    })
+
+    // @ts-ignore
+    return () => {
+      return h(VRadioGroup, fieldProps.value, fieldSlots.value)
+    }
+  }
+})
+
+</script>

package/src/components/nodes/section.vue

@@ -1,7 +1,10 @@
 <script setup>
-import { VRow } from 'vuetify/components'
+import { VRow } from 'vuetify/components/VGrid'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
+import { useDefaults } from 'vuetify'
+
+useDefaults({}, 'VjsfSection')
 
 defineProps({
   modelValue: {

package/src/components/nodes/select.vue

@@ -1,77 +1,38 @@
 <script>
-import { VSelect } from 'vuetify/components'
-import { defineComponent, h, computed, ref, shallowRef } from 'vue'
-import { getInputProps, getCompSlots } from '../../utils/index.js'
-import SelectItem from '../fragments/select-item.vue'
-import SelectSelection from '../fragments/select-selection.vue'
+import { VSelect } from 'vuetify/components/VSelect'
+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
     }
   },
   setup (props) {
-    /** @type import('vue').Ref<import('@json-layout/vocabulary').SelectItems> */
-    const items = shallowRef([])
-    /** @type import('vue').Ref<boolean> */
-    const loading = ref(false)
+    useDefaults({}, 'VjsfSelect')
+
+    const { getItems, selectProps, selectSlots, localData } = useSelectNode(toRef(props, 'modelValue'), props.statefulLayout)
 
     const fieldProps = computed(() => {
-      const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['multiple'])
-      if (props.modelValue.options.readOnly) fieldProps.menuProps = { modelValue: false }
-      fieldProps.loading = loading.value
-      fieldProps.items = items.value
-      fieldProps['onUpdate:menu'] = refresh
+      const fieldProps = { ...selectProps.value }
+      fieldProps.loading = getItems.loading.value
+      fieldProps.items = getItems.items.value
+      fieldProps.modelValue = localData.value
       return fieldProps
     })
 
-    /** @type import('@json-layout/core').StateTree | null */
-    let lastStateTree = null
-    /** @type Record<string, any> | null */
-    let lastContext = null
-
-    const refresh = async () => {
-      if (props.statefulLayout.stateTree === lastStateTree && props.statefulLayout.options.context === lastContext) return
-      lastStateTree = props.statefulLayout.stateTree
-      lastContext = props.statefulLayout.options.context ?? null
-      loading.value = true
-      items.value = await props.statefulLayout.getItems(props.modelValue)
-      loading.value = false
-    }
-
-    if (!props.modelValue.layout.items) {
-      refresh()
-    }
-
-    const fieldSlots = computed(() => {
-      const slots = getCompSlots(props.modelValue, props.statefulLayout)
-      if (!slots.item) {
-        slots.item = (/** @type {any} */ context) => h(SelectItem, {
-          multiple: props.modelValue.layout.multiple,
-          itemProps: context.props,
-          item: context.item.raw
-        })
-      }
-      if (!slots.selection) {
-        slots.selection = (/** @type {any} */ context) => h(SelectSelection, {
-          multiple: props.modelValue.layout.multiple,
-          last: props.modelValue.layout.multiple && context.index === props.modelValue.data.length - 1,
-          item: context.item.raw
-        })
-      }
-      return slots
-    })
-
     // @ts-ignore
-    return () => h(VSelect, fieldProps.value, fieldSlots.value)
+    return () => h(VSelect, fieldProps.value, selectSlots.value)
   }
 })
 

package/src/components/nodes/slider.vue

@@ -1,34 +1,37 @@
-<script setup>
-import { VSlider } from 'vuetify/components'
-import { computed } from 'vue'
-import { getInputProps } from '../../utils/index.js'
+<script>
+import { VSlider } from 'vuetify/components/VSlider'
+import { defineComponent, computed, toRef, h } from 'vue'
+import useNode from '../../composables/use-node.js'
+import { useDefaults } from 'vuetify'
 
-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/stepper.vue

@@ -1,9 +1,16 @@
 <script setup>
 import { ref, computed } from 'vue'
-import { VStepper, VStepperHeader, VStepperItem, VStepperWindow, VStepperWindowItem, VStepperActions, VContainer, VRow, VSpacer, VBtn, VDivider } from 'vuetify/components'
+import { VStepper, VStepperHeader, VStepperItem, VStepperWindow, VStepperWindowItem, VStepperActions } from 'vuetify/components/VStepper'
+import { VContainer, VRow, VSpacer } from 'vuetify/components/VGrid'
+import { VBtn } from 'vuetify/components/VBtn'
+import { VDivider } from 'vuetify/components/VDivider'
 import { isSection } from '@json-layout/core'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
+import ChildSubtitle from '../fragments/child-subtitle.vue'
+import { useDefaults } from 'vuetify'
+
+useDefaults({}, 'VjsfStepper')
 
 const props = defineProps({
   modelValue: {
@@ -59,7 +66,8 @@ const goNext = () => {
           fluid
           class="pa-0"
         >
-          <v-row>
+          <child-subtitle :model-value="child" />
+          <v-row :dense="modelValue.options?.density === 'compact' || modelValue.options?.density === 'comfortable'">
             <node
               v-for="grandChild of isSection(child) ? child.children : [child]"
               :key="grandChild.fullKey"

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

@@ -0,0 +1,39 @@
+<script>
+import { useDefaults } from 'vuetify'
+import SelectionGroup from '../fragments/selection-group.vue'
+import { defineComponent, h } from 'vue'
+
+export default defineComponent({
+  props: {
+    modelValue: {
+    /** @type import('vue').PropType<import('../../types.js').VjsfCheckboxGroupNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+      type: Object,
+      required: true
+    }
+  },
+  setup (props) {
+    useDefaults({}, 'VjsfSwitchGroup')
+
+    // @ts-ignore
+    return () => {
+      return h(SelectionGroup, {
+        modelValue: props.modelValue,
+        statefulLayout: props.statefulLayout,
+        type: 'switch'
+      })
+    }
+  }
+})
+
+</script>
+
+<style>
+.vjsf-node-checkbox-group .v-selection-control-group .v-checkbox .v-selection-control {
+  min-height: auto;
+}
+</style>

package/src/components/nodes/switch.vue

@@ -1,32 +1,37 @@
-<script setup>
-import { VSwitch } from 'vuetify/components'
-import { computed } from 'vue'
-import { getInputProps } from '../../utils/index.js'
+<script>
+import { defineComponent, h, computed, toRef } from 'vue'
+import { VSwitch } from 'vuetify/components/VSwitch'
+import useNode from '../../composables/use-node.js'
+import { useDefaults } from 'vuetify'
 
-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/tabs.vue

@@ -1,9 +1,19 @@
 <script setup>
-import { VTabs, VTab, VContainer, VSheet, VWindow, VWindowItem, VRow, VIcon } from 'vuetify/components'
+import { VTabs, VTab } from 'vuetify/components/VTabs'
+import { VContainer, VRow } from 'vuetify/components/VGrid'
+import { VIcon } from 'vuetify/components/VIcon'
+import { VSheet } from 'vuetify/components/VSheet'
+import { VWindow, VWindowItem } from 'vuetify/components/VWindow'
+import { useDefaults } from 'vuetify'
 import { ref } from 'vue'
 import { isSection } from '@json-layout/core'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
+import ChildSubtitle from '../fragments/child-subtitle.vue'
+import useCompDefaults from '../../composables/use-comp-defaults.js'
+
+useDefaults({}, 'VjsfTabs')
+const vSheetProps = useCompDefaults('VjsfTabs-VSheet', { border: true })
 
 defineProps({
   modelValue: {
@@ -23,21 +33,22 @@ const tab = ref(0)
 
 <template>
   <section-header :node="modelValue" />
-  <v-sheet border>
-    <v-tabs v-model="tab">
+  <v-sheet v-bind="vSheetProps">
+    <v-tabs
+      v-model="tab"
+      direction="horizontal"
+    >
       <v-tab
         v-for="(child, i) of modelValue.children"
         :key="child.key"
         :value="i"
-        :density="modelValue.options.density"
         :color="child.validated && (child.error || child.childError) ? 'error' : undefined"
       >
         <v-icon
           v-if="child.validated && (child.error || child.childError)"
           color="error"
-        >
-          mdi-alert
-        </v-icon>
+          :icon="statefulLayout.options.icons.alert"
+        />
         {{ child.layout.title ?? child.layout.label }}
       </v-tab>
     </v-tabs>
@@ -48,7 +59,8 @@ const tab = ref(0)
         :value="i"
       >
         <v-container fluid>
-          <v-row>
+          <child-subtitle :model-value="child" />
+          <v-row :dense="modelValue.options?.density === 'compact' || modelValue.options?.density === 'comfortable'">
             <node
               v-for="grandChild of isSection(child) ? child.children : [child]"
               :key="grandChild.fullKey"

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

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

package/src/components/nodes/textarea.vue

@@ -1,7 +1,8 @@
 <script>
-import { defineComponent, h, computed, ref, watch } from 'vue'
-import { VTextarea } from 'vuetify/components'
-import { getInputProps, getCompSlots } from '../../utils/index.js'
+import { defineComponent, h, computed, ref, watch, toRef } from 'vue'
+import { VTextarea } from 'vuetify/components/VTextarea'
+import useNode from '../../composables/use-node.js'
+import { useDefaults } from 'vuetify'
 
 export default defineComponent({
   props: {
@@ -17,25 +18,32 @@ export default defineComponent({
     }
   },
   setup (props) {
+    useDefaults({}, 'VjsfTextArea')
+
     /** @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)
   }
 })