@koumoul/vjsf 3.0.0-beta.8 → 3.0.0

package/src/components/nodes/expansion-panels.vue

@@ -1,12 +1,18 @@
 <script setup>
-import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VContainer, VRow, VIcon } from 'vuetify/components'
-import { computed } from 'vue'
+import { toRef } from 'vue'
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText } from 'vuetify/components/VExpansionPanel'
+import { VContainer, VRow } from 'vuetify/components/VGrid'
+import { VIcon } from 'vuetify/components/VIcon'
 import { isSection } from '@json-layout/core'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
-import { getCompProps } from '../../utils/index.js'
+import ChildSubtitle from '../fragments/child-subtitle.vue'
+import useNode from '../../composables/use-node.js'
+import { useDefaults } from 'vuetify'
 
-defineProps({
+useDefaults({}, 'VjsfExpansionPanels')
+
+const props = defineProps({
   modelValue: {
     /** @type import('vue').PropType<import('../../types.js').VjsfExpansionPanelsNode> */
     type: Object,
@@ -19,11 +25,13 @@ defineProps({
   }
 })
 
+const { compProps } = useNode(toRef(props, 'modelValue'), props.statefulLayout)
+
 </script>
 
 <template>
   <section-header :node="modelValue" />
-  <v-expansion-panels v-bind="getCompProps(modelValue, true)">
+  <v-expansion-panels v-bind="compProps">
     <v-expansion-panel
       v-for="(child, i) of modelValue.children"
       :key="child.key"
@@ -34,14 +42,14 @@ defineProps({
           v-if="child.validated && (child.error || child.childError)"
           color="error"
           class="mr-2"
-        >
-          mdi-alert
-        </v-icon>
+          :icon="statefulLayout.options.icons.alert"
+        />
         {{ child.layout.title ?? child.layout.label }}
       </v-expansion-panel-title>
       <v-expansion-panel-text>
         <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/file-input.vue

@@ -1,7 +1,8 @@
 <script>
-import { defineComponent, h, computed } from 'vue'
-import { VFileInput } from 'vuetify/components'
-import { getInputProps, getCompSlots } from '../../utils/index.js'
+import { defineComponent, h, computed, toRef } from 'vue'
+import { VFileInput } from 'vuetify/components/VFileInput'
+import useNode from '../../composables/use-node.js'
+import { useDefaults } from 'vuetify'
 
 export default defineComponent({
   props: {
@@ -17,20 +18,23 @@ export default defineComponent({
     }
   },
   setup (props) {
+    useDefaults({}, 'VjsfFileInput')
+
+    const { inputProps, localData, compSlots } = useNode(
+      toRef(props, 'modelValue'), props.statefulLayout, { layoutPropsMap: ['placeholder', 'accept', 'multiple'] }
+    )
+
     const fieldProps = computed(() => {
-      const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['placeholder', 'accept'])
-      if (props.modelValue.layout.multiple) {
-        fieldProps.multiple = true
-      } else {
-        fieldProps.modelValue = props.modelValue.data ? [props.modelValue.data] : props.modelValue.data
-        fieldProps['onUpdate:modelValue'] = (/** @type string */value) => props.statefulLayout.input(props.modelValue, Array.isArray(value) ? value[0] : value)
+      const fieldProps = { ...inputProps.value }
+      if (fieldProps.multiple) console.error('File input doesn\'t support multiple inputs yet')
+      fieldProps['onUpdate:modelValue'] = (/** @type {File} */value) => {
+        props.statefulLayout.input(props.modelValue, value)
       }
       return fieldProps
     })
-    const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
 
     // @ts-ignore
-    return () => h(VFileInput, fieldProps.value, fieldSlots.value)
+    return () => h(VFileInput, { ...fieldProps.value, modelValue: localData.value }, compSlots.value)
   }
 })
 

package/src/components/nodes/list.vue

@@ -1,10 +1,24 @@
 <script setup>
 import { watch, computed, ref } from 'vue'
-import { VList, VListItem, VListItemAction, VBtn, VMenu, VIcon, VSheet, VSpacer, VDivider, VRow, VListSubheader } from 'vuetify/components'
-import { isSection, clone } from '@json-layout/core'
+import { useDefaults, useTheme } from 'vuetify'
+import { VList, VListItem, VListItemAction, VListItemTitle, VListSubheader } from 'vuetify/components/VList'
+import { VRow } from 'vuetify/components/VGrid'
+import { VTextField } from 'vuetify/components/VTextField'
+import { VSheet } from 'vuetify/components/VSheet'
+import { VDivider } from 'vuetify/components/VDivider'
+import { VIcon } from 'vuetify/components/VIcon'
+import { VBtn } from 'vuetify/components/VBtn'
+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 { moveArrayItem } 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: {
@@ -19,21 +33,32 @@ const props = defineProps({
   }
 })
 
+// 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, () => {
-  props.statefulLayout.input(props.modelValue, sortableArray.value.map((child) => child.data))
+  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)
+  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.activeItems[props.modelValue.fullKey]
+  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
@@ -44,35 +69,101 @@ 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)
-  props.statefulLayout.activateItem(props.modelValue, newData.length - 1)
+  if (layout.value.listEditMode === 'inline-single') {
+    props.statefulLayout.activateItem(props.modelValue, newData.length - 1)
+  }
+}
+
+const newKey = ref('')
+/** @type {import('vue').Ref<InstanceType<typeof import('vuetify/components/VForm').VForm> | null>} */
+const newKeyForm = ref(null)
+const pushEmptyIndexedItem = () => {
+  if (!newKey.value) return
+  if (!newKeyForm.value) return
+  if (!newKeyForm.value.isValid) return
+  const newData = { ...(props.modelValue.data ?? {}), [newKey.value]: null }
+  props.statefulLayout.input(props.modelValue, newData)
+  if (layout.value.listEditMode === 'inline-single') {
+    props.statefulLayout.activateItem(props.modelValue, Object.keys(newData).length - 1)
+  }
+  newKey.value = ''
+  newKeyForm.value?.reset()
+}
+
+/**
+ * @param {number} childIndex
+ */
+const deleteItem = (childIndex) => {
+  if (layout.value.indexed) {
+    const oldData = /** @type {Record<string, any>} */(props.modelValue.data)
+    const keys = Object.keys(props.modelValue.data)
+    /** @type {Record<string, any>} */
+    const newData = {}
+    for (let i = 0; i < keys.length; i++) {
+      if (i !== childIndex) newData[keys[i]] = oldData[keys[i]]
+    }
+    props.statefulLayout.input(props.modelValue, newData)
+  } else {
+    const newData = [...props.modelValue.data.slice(0, childIndex), ...props.modelValue.data.slice(childIndex + 1)]
+    props.statefulLayout.input(props.modelValue, newData)
+  }
+
+  menuOpened.value = -1
+}
+
+/**
+ * @param {import('@json-layout/core').StateNode} child
+ * @param {number} 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 (layout.value.listEditMode === 'inline-single') {
+    props.statefulLayout.activateItem(props.modelValue, childIndex + 1)
+  }
+  menuOpened.value = -1
 }
 
+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 (options.value.readOnly) return 'transparent'
+  if (activeItem.value === childIndex) return theme.current.value.colors.primary
+  return 'transparent'
+})
+
 </script>
 
 <template>
-  <v-sheet :elevation="1">
-    <v-list :density="modelValue.options.density">
+  <v-sheet v-bind="vSheetProps">
+    <v-list class="py-0">
       <v-list-subheader v-if="modelValue.layout.title">
         {{ modelValue.layout.title }}
       </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)"
-          :density="modelValue.options.density"
           :draggable="draggable === childIndex"
-          :variant="editedItem === childIndex ? 'outlined' : 'flat'"
+          variant="flat"
+          :style="`border: 1px solid ${itemBorderColor(child, childIndex)}`"
           class="pa-1 vjsf-list-item"
         >
+          <v-list-item-title
+            v-if="modelValue.layout.indexed"
+            class="pl-4 pt-2"
+          >
+            {{ child.key }}
+          </v-list-item-title>
           <v-row class="ma-0">
             <node
               v-for="grandChild of isSection(child) ? child.children : [child]"
@@ -82,115 +173,152 @@ const pushEmptyItem = () => {
             />
           </v-row>
           <template
-            v-if="activeItem === childIndex"
+            v-if="!modelValue.options.readOnly && modelValue.layout.listActions.length"
             #append
           >
-            <div>
-              <v-list-item-action
-                v-if="modelValue.layout.listActions.includes('edit') && modelValue.layout.listEditMode === 'inline-single'"
-              >
+            <div class="vjsf-list-item-actions-wrapper">
+              <v-list-item-action v-if="activeItem !== childIndex">
                 <v-btn
-                  v-if="editedItem !== childIndex"
-                  :title="modelValue.messages.edit"
-                  icon="mdi-pencil"
+                  style="visibility:hidden"
                   variant="text"
-                  color="primary"
-                  :density="buttonDensity"
-                  @click="statefulLayout.activateItem(modelValue, childIndex)"
-                />
-                <v-btn
-                  v-else
-                  :title="modelValue.messages.edit"
-                  icon="mdi-pencil"
-                  variant="flat"
-                  color="primary"
                   :density="buttonDensity"
-                  @click="statefulLayout.deactivateItem(modelValue)"
+                  :icon="statefulLayout.options.icons.edit"
                 />
               </v-list-item-action>
-              <v-list-item-action
-                v-if="editedItem === undefined && modelValue.layout.listActions.includes('sort') && activeDnd"
-              >
-                <v-btn
-                  :title="modelValue.messages.sort"
-                  icon="mdi-arrow-up-down"
-                  variant="plain"
-                  :density="buttonDensity"
-                  v-bind="handleBind(childIndex)"
-                />
-              </v-list-item-action>
-              <v-list-item-action
-                v-if="editedItem === undefined && (modelValue.layout.listActions.includes('delete') || modelValue.layout.listActions.includes('duplicate') || modelValue.layout.listActions.includes('sort'))"
-              >
-                <v-menu
-                  location="bottom end"
-                  @update:model-value="value => {menuOpened = value ? childIndex : -1}"
+              <template v-else>
+                <v-list-item-action
+                  v-if="modelValue.layout.listActions.includes('edit') && modelValue.layout.listEditMode === 'inline-single'"
                 >
-                  <template #activator="{props: activatorProps}">
-                    <v-btn
-                      v-bind="activatorProps"
-                      icon="mdi-dots-vertical"
-                      variant="plain"
-                      slim
-                      :density="buttonDensity"
-                    />
-                  </template>
-                  <v-list :density="modelValue.options.density">
-                    <v-list-item
-                      v-if="modelValue.layout.listActions.includes('delete')"
-                      base-color="warning"
-                      @click="statefulLayout.input(modelValue, [...modelValue.data.slice(0, childIndex), ...modelValue.data.slice(childIndex + 1)])"
-                    >
-                      <template #prepend>
-                        <v-icon icon="mdi-delete" />
-                      </template>
-                      {{ modelValue.messages.delete }}
-                    </v-list-item>
-                    <v-list-item
-                      v-if="modelValue.layout.listActions.includes('duplicate')"
-                      @click="statefulLayout.input(modelValue, [...modelValue.data.slice(0, childIndex), clone(child.data), ...modelValue.data.slice(childIndex)])"
-                    >
-                      <template #prepend>
-                        <v-icon icon="mdi-content-duplicate" />
-                      </template>
-                      {{ modelValue.messages.duplicate }}
-                    </v-list-item>
-                    <v-list-item
-                      v-if="modelValue.layout.listActions.includes('sort')"
-                      @click="statefulLayout.input(modelValue, moveArrayItem(modelValue.data, childIndex, childIndex - 1))"
-                    >
-                      <template #prepend>
-                        <v-icon icon="mdi-arrow-up" />
-                      </template>
-                      {{ modelValue.messages.up }}
-                    </v-list-item>
-                    <v-list-item
-                      v-if="modelValue.layout.listActions.includes('sort')"
-                      @click="statefulLayout.input(modelValue, moveArrayItem(modelValue.data, childIndex, childIndex + 1))"
-                    >
-                      <template #prepend>
-                        <v-icon icon="mdi-arrow-down" />
-                      </template>
-                      {{ modelValue.messages.down }}
-                    </v-list-item>
-                  </v-list>
-                </v-menu>
-              </v-list-item-action>
+                  <v-btn
+                    v-if="editedItem !== childIndex"
+                    :title="modelValue.messages.edit"
+                    :icon="statefulLayout.options.icons.edit"
+                    variant="text"
+                    color="primary"
+                    :density="buttonDensity"
+                    @click="statefulLayout.activateItem(modelValue, childIndex)"
+                  />
+                  <v-btn
+                    v-else
+                    :title="modelValue.messages.close"
+                    :icon="statefulLayout.options.icons.edit"
+                    variant="flat"
+                    color="primary"
+                    :density="buttonDensity"
+                    @click="statefulLayout.deactivateItem(modelValue)"
+                  />
+                </v-list-item-action>
+                <v-list-item-action
+                  v-if="editedItem === undefined && modelValue.layout.listActions.includes('sort') && activeDnd"
+                >
+                  <v-btn
+                    :title="modelValue.messages.sort"
+                    :icon="statefulLayout.options.icons.sort"
+                    variant="plain"
+                    :density="buttonDensity"
+                    v-bind="handleBind(childIndex)"
+                  />
+                </v-list-item-action>
+                <v-list-item-action
+                  v-if="editedItem === undefined && (modelValue.layout.listActions.includes('delete') || modelValue.layout.listActions.includes('duplicate') || modelValue.layout.listActions.includes('sort'))"
+                >
+                  <v-menu
+                    location="bottom end"
+                    @update:model-value="value => {menuOpened = value ? childIndex : -1}"
+                  >
+                    <template #activator="{props: activatorProps}">
+                      <v-btn
+                        v-bind="activatorProps"
+                        :icon="statefulLayout.options.icons.menu"
+                        variant="plain"
+                        slim
+                        :density="buttonDensity"
+                      />
+                    </template>
+                    <v-list>
+                      <v-list-item
+                        v-if="modelValue.layout.listActions.includes('delete')"
+                        base-color="warning"
+                        @click="deleteItem(childIndex)"
+                      >
+                        <template #prepend>
+                          <v-icon :icon="statefulLayout.options.icons.delete" />
+                        </template>
+                        {{ modelValue.messages.delete }}
+                      </v-list-item>
+                      <v-list-item
+                        v-if="modelValue.layout.listActions.includes('duplicate')"
+                        @click="duplicateItem(child, childIndex)"
+                      >
+                        <template #prepend>
+                          <v-icon :icon="statefulLayout.options.icons.duplicate" />
+                        </template>
+                        {{ modelValue.messages.duplicate }}
+                      </v-list-item>
+                      <v-list-item
+                        v-if="modelValue.layout.listActions.includes('sort')"
+                        @click="statefulLayout.input(modelValue, moveDataItem(modelValue.data, childIndex, childIndex - 1))"
+                      >
+                        <template #prepend>
+                          <v-icon :icon="statefulLayout.options.icons.sortUp" />
+                        </template>
+                        {{ modelValue.messages.up }}
+                      </v-list-item>
+                      <v-list-item
+                        v-if="modelValue.layout.listActions.includes('sort')"
+                        @click="statefulLayout.input(modelValue, moveDataItem(modelValue.data, childIndex, childIndex + 1))"
+                      >
+                        <template #prepend>
+                          <v-icon :icon="statefulLayout.options.icons.sortDown" />
+                        </template>
+                        {{ modelValue.messages.down }}
+                      </v-list-item>
+                    </v-list>
+                  </v-menu>
+                </v-list-item-action>
+              </template>
             </div>
           </template>
         </v-list-item>
         <v-divider v-if="childIndex < modelValue.children.length - 1" />
       </template>
-      <v-list-item v-if="!modelValue.options.readOnly && modelValue.layout.listActions.includes('add')">
-        <v-spacer />
-        <v-btn
-          color="primary"
-          :density="modelValue.options.density"
-          @click="pushEmptyItem"
-        >
-          {{ modelValue.messages.addItem }}
-        </v-btn>
-        <v-spacer />
+      <v-list-item
+        v-if="!modelValue.options.readOnly && modelValue.layout.listActions.includes('add')"
+        class="py-2"
+      >
+        <template v-if="modelValue.layout.indexed">
+          <v-form
+            ref="newKeyForm"
+            style="max-width: 250px;"
+            @submit.prevent
+          >
+            <v-text-field
+              v-model="newKey"
+              variant="outlined"
+              :placeholder="modelValue.messages.addItem"
+              hide-details
+              :rules="[(/** @type {string} */v) => !modelValue.children.some(c => c.key === v), v => !v || !!modelValue.layout.indexed?.some(pattern => v.match(getRegexp(pattern)))]"
+              @keypress.enter="pushEmptyIndexedItem"
+            >
+              <template #append>
+                <v-icon
+                  color="primary"
+                  size="large"
+                  :icon="statefulLayout.options.icons.add"
+                  @click="pushEmptyIndexedItem"
+                />
+              </template>
+            </v-text-field>
+          </v-form>
+        </template>
+        <template v-else>
+          <v-btn
+            color="primary"
+            @click="pushEmptyItem"
+          >
+            {{ modelValue.messages.addItem }}
+          </v-btn>
+        </template>
       </v-list-item>
     </v-list>
   </v-sheet>
@@ -201,4 +329,10 @@ const pushEmptyItem = () => {
   height: 100%;
   align-items: start;
 }
+.vjsf-list-item .v-list-item__content {
+  padding-right: 4px;
+}
+.vjsf-list-item-actions-wrapper {
+  /*margin: -4px;*/
+}
 </style>

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

@@ -1,7 +1,9 @@
 <script>
-import { defineComponent, h, computed, shallowRef, ref } from 'vue'
-import { VCombobox } from 'vuetify/components'
-import { getInputProps, getCompSlots } from '../../utils/index.js'
+import { defineComponent, h, computed, toRef } from 'vue'
+import { VCombobox } from 'vuetify/components/VCombobox'
+import useNode from '../../composables/use-node.js'
+import useGetItems from '../../composables/use-get-items.js'
+import { useDefaults } from 'vuetify'
 
 export default defineComponent({
   props: {
@@ -17,55 +19,32 @@ export default defineComponent({
     }
   },
   setup (props) {
-    /** @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)
+    useDefaults({}, 'VjsfCombobox')
 
-    /** @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)
   }
 })