@koumoul/vjsf 3.0.0-beta.2 → 3.0.0-beta.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.20",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest",
@@ -75,7 +75,7 @@
     "vuetify": "^3.4.9"
   },
   "dependencies": {
-    "@json-layout/core": "0.9.2",
+    "@json-layout/core": "0.16.4",
     "@vueuse/core": "^10.5.0",
     "debug": "^4.3.4",
     "ejs": "^3.1.9"

package/src/compat/v2.js

@@ -6,11 +6,36 @@ import { isPartialGetItemsObj } from '@json-layout/vocabulary'
 // @ts-ignore
 const Ajv = /** @type {typeof ajvModule.default} */ (ajvModule)
 
+/**
+ *
+ * @param {string} expression
+ * @returns {{type: 'js-eval' | undefined, expr: string, pure: boolean}}
+ */
+const fiexEvalExpression = (expression) => {
+  let expr = expression
+  let pure = true
+  if (expr.includes('rootData')) {
+    pure = false
+  }
+  if (expr.includes('parent.value')) {
+    pure = false
+    expr = expr.replace(/parent\.value/g, 'parentData')
+  }
+
+  return { type: 'js-eval', expr, pure }
+}
+
 const processFragment = (/** @type {import("ajv").SchemaObject} */schema) => {
   if (!schema.layout) {
     /** @type import('@json-layout/vocabulary').PartialCompObject */
     const layout = {}
 
+    if (schema.separator || schema['x-separator']) {
+      layout.separator = schema.separator || schema['x-separator']
+      delete schema.separator
+      delete schema['x-separator']
+    }
+
     if (schema['x-display'] === 'icon' && (schema.enum || schema.items?.enum)) {
       layout.getItems = { itemIcon: schema['x-itemIcon'] || 'data.value' }
       delete schema['x-display']
@@ -33,10 +58,15 @@ const processFragment = (/** @type {import("ajv").SchemaObject} */schema) => {
 
     if (schema['x-fromData']) {
       layout.comp = 'select'
-      layout.getItems = { expr: schema['x-fromData'] }
+      layout.getItems = fiexEvalExpression(schema['x-fromData'])
       delete schema['x-fromData']
     }
 
+    if (schema['x-if']) {
+      layout.if = fiexEvalExpression(schema['x-if'])
+      delete schema['x-if']
+    }
+
     if (schema['x-fromUrl']) {
       /** @type string */
       let url = schema['x-fromUrl']
@@ -66,21 +96,33 @@ const processFragment = (/** @type {import("ajv").SchemaObject} */schema) => {
     }
   }
 
-  if (schema.type === 'object') {
-    if (schema.properties) {
-      for (const propertyKey of Object.keys(schema.properties)) {
-        processFragment(schema.properties[propertyKey])
-      }
-    }
-    if (schema.allOf) {
-      for (const item of schema.allOf) processFragment(item)
+  if (schema.properties) {
+    for (const propertyKey of Object.keys(schema.properties)) {
+      processFragment(schema.properties[propertyKey])
     }
-    if (schema.oneOf) {
-      for (const item of schema.oneOf) processFragment(item)
-    }
-    if (schema.anyOf) {
-      for (const item of schema.anyOf) processFragment(item)
+  }
+
+  if (schema.allOf) {
+    for (const item of schema.allOf) processFragment(item)
+  }
+
+  if (schema.oneOf) {
+    if (!schema.oneOfLayout) {
+      const constPropertyKey = Object.keys(schema.oneOf[0]?.properties || {})
+        .find(key => !!schema.oneOf[0]?.properties[key].const)
+      if (constPropertyKey) {
+        const constProperty = schema.oneOf[0]?.properties[constPropertyKey]
+        if (constProperty?.title) schema.oneOfLayout = { label: constProperty.title }
+        if (schema.required && Array.isArray(schema.required)) {
+          schema.required = schema.required.filter(key => key !== constPropertyKey)
+        }
+      }
     }
+    for (const item of schema.oneOf) processFragment(item)
+  }
+
+  if (schema.anyOf) {
+    for (const item of schema.anyOf) processFragment(item)
   }
 
   if (schema.type === 'array' && schema.items) {

package/src/compile/index.js

@@ -37,10 +37,17 @@ function listComps (comps, layout) {
  * @param {object} schema
  * @param {import('../types.js').PartialVjsfCompileOptions} [options]
  * @param {string} [baseImport]
- * @returns {string}
+ * @returns {Promise<string>}
  */
-export function compile (schema, options = {}, baseImport = '@koumoul/vjsf') {
+export async function compile (schema, options = {}, baseImport = '@koumoul/vjsf') {
   const fullOptions = getFullOptions(options)
+  /** @type {Record<string, string>} */
+  const pluginsImportsByName = {}
+  for (const pluginImport of fullOptions.pluginsImports) {
+    const componentInfo = /** @type {import('@json-layout/vocabulary').ComponentInfo} */((await import(pluginImport + '/info.js')).default)
+    fullOptions.components[componentInfo.name] = componentInfo
+    pluginsImportsByName[componentInfo.name] = pluginImport
+  }
   const compiledLayout = compileLayout(schema, { ...fullOptions, code: true })
   const compiledLayoutCode = serializeCompiledLayout(compiledLayout)
   /** @type Set<string> */
@@ -50,9 +57,16 @@ export function compile (schema, options = {}, baseImport = '@koumoul/vjsf') {
   }
   comps.delete('none')
 
+  /** @type {Record<string, any>} */
+  const pluginsComponents = {}
+
   const compImports = [...comps].map(comp => {
     const compName = comp.replace(/-/g, '') + 'Node'
-    const compImport = fullOptions.nodeComponentImports[comp] ?? `${baseImport}/components/nodes/${comp}.vue`
+    let compImport = `${baseImport}/components/nodes/${comp}.vue`
+    if (pluginsImportsByName[comp]) {
+      compImport = `${pluginsImportsByName[comp]}/node.vue`
+      pluginsComponents[comp] = fullOptions.components[comp]
+    }
     return {
       comp,
       compName,
@@ -60,6 +74,6 @@ export function compile (schema, options = {}, baseImport = '@koumoul/vjsf') {
     }
   })
 
-  const code = ejs.render(template, { compiledLayoutCode, compImports, baseImport })
+  const code = ejs.render(template, { compiledLayoutCode, compImports, baseImport, pluginsComponents })
   return code
 }

package/src/compile/options.js

@@ -1,8 +1,7 @@
 /** @type import("../types.js").PartialVjsfCompileOptions */
 export const defaultOptions = {
-  nodeComponentImports: {
-    markdown: '@koumoul/vjsf-markdown/components/nodes/markdown.vue'
-  }
+  pluginsImports: ['@koumoul/vjsf-markdown'],
+  components: {}
 }
 
 /**
@@ -11,9 +10,6 @@ export const defaultOptions = {
  * @returns
  */
 export const getFullOptions = (options) => {
-  const fullOptions = {
-    ...defaultOptions,
-    nodeComponentImports: { ...defaultOptions.nodeComponentImports, ...options.nodeComponentImports }
-  }
+  const fullOptions = { ...defaultOptions }
   return /** @type import('../types.js').VjsfCompileOptions */ (fullOptions)
 }

package/src/compile/v-jsf-compiled.vue.ejs

@@ -39,7 +39,7 @@ const emit = defineEmits(emits)
 const { el, statefulLayout, stateTree } = useVjsf(
   null,
   computed(() => props.modelValue),
-  computed(() => props.options),
+  computed(() => ({...props.options, components: <%- JSON.stringify(pluginsComponents) %>})),
   nodeComponents,
   emit,
   null,

package/src/components/fragments/help-message.vue

@@ -4,15 +4,17 @@
       <v-alert
         v-show="show"
         color="info"
+        :density="node.options.density"
       >
         <div v-html="node.layout.help" />
       </v-alert>
     </v-slide-x-reverse-transition>
     <v-btn
       color="info"
-      class="vjsf-help-message-toggle"
+      :class="`vjsf-help-message-toggle vjsf-help-message-toggle-${node.options.density}`"
       :icon="show ? 'mdi-close-circle' : 'mdi-information'"
       density="compact"
+      :size="node.options.density !== 'default' ? 'small' : 'default'"
       :title="show ? '' : node.messages.showHelp"
       @click="show = !show"
     />
@@ -45,5 +47,13 @@ const show = ref(false)
   right: -4px;
   z-index: 1;
 }
+.vjsf-help-message-toggle-comfortable {
+  top: -4px;
+  right: -4px;
+}
+.vjsf-help-message-toggle-compact {
+  top: -4px;
+  right: -4px;
+}
 </style>
 ../../../types.js

package/src/components/fragments/section-header.vue

@@ -45,7 +45,7 @@ const titleClass = computed(() => {
     </p>
     <v-alert
       v-if="node.error && node.validated"
-      v-bind="node.options.errorAlertProps"
+      type="error"
       :class="`mt-${titleDepthBase - node.options.titleDepth}`"
       :density="node.options.density"
     >
@@ -53,4 +53,3 @@ const titleClass = computed(() => {
     </v-alert>
   </div>
 </template>
-../../../types.js

package/src/components/fragments/text-field-menu.vue

@@ -28,7 +28,7 @@ const fieldProps = computed(() => {
 })
 
 const menuProps = computed(() => {
-  const menuProps = getCompProps(props.modelValue, 'menu', false)
+  const menuProps = getCompProps(props.modelValue)
   menuProps.closeOnContentClick = false
   menuProps.disabled = true
   return menuProps

package/src/components/node.vue

@@ -35,7 +35,7 @@ const nodeClasses = computed(() => {
   return classes
 })
 
-if (!props.statefulLayout.options.nodeComponents[props.modelValue.layout.comp]) {
+if (props.modelValue.layout.comp !== 'none' && !props.statefulLayout.options.nodeComponents[props.modelValue.layout.comp]) {
   console.error(`vjsf: missing component to render vjsf node "${props.modelValue.layout.comp}", maybe you forgot to register a component from a plugin ?`)
 }
 
@@ -43,6 +43,7 @@ if (!props.statefulLayout.options.nodeComponents[props.modelValue.layout.comp])
 
 <template>
   <v-col
+    v-if="modelValue.layout.comp !== 'none'"
     :cols="modelValue.cols"
     :class="nodeClasses"
   >
@@ -56,7 +57,7 @@ if (!props.statefulLayout.options.nodeComponents[props.modelValue.layout.comp])
     />
 
     <help-message
-      v-if="modelValue.layout.help"
+      v-if="modelValue.layout.help && !modelValue.options.summary"
       :node="modelValue"
       :class="beforeAfterClasses[modelValue.options.density]"
     />
@@ -69,7 +70,7 @@ if (!props.statefulLayout.options.nodeComponents[props.modelValue.layout.comp])
     />
     <component
       :is="props.statefulLayout.options.nodeComponents[modelValue.layout.comp]"
-      v-else-if="modelValue.layout.comp !== 'none' "
+      v-else
       :model-value="modelValue"
       :stateful-layout="statefulLayout"
     />

package/src/components/nodes/checkbox.vue

@@ -16,7 +16,12 @@ const props = defineProps({
   }
 })
 
-const fieldProps = computed(() => getInputProps(props.modelValue, props.statefulLayout))
+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>

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

@@ -18,7 +18,8 @@ const props = defineProps({
 })
 
 const colorPickerProps = computed(() => {
-  const colorPickerProps = getCompProps(props.modelValue, 'colorPicker', true)
+  const colorPickerProps = getCompProps(props.modelValue, true)
+  colorPickerProps.modelValue = props.modelValue.data
   return colorPickerProps
 })
 </script>

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

@@ -21,7 +21,7 @@ const props = defineProps({
 const vDate = useDate()
 
 const datePickerProps = computed(() => {
-  const datePickerProps = getCompProps(props.modelValue, 'datePicker', true)
+  const datePickerProps = getCompProps(props.modelValue, true)
   datePickerProps.hideActions = true
   if (props.modelValue.data) datePickerProps.modelValue = new Date(props.modelValue.data)
   return datePickerProps

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

@@ -1,8 +1,10 @@
 <script setup>
-import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VContainer, VRow, VIcon } from 'vuetify/components'
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VContainer, VRow, VIcon } from 'vuetify/components'
+import { computed } from 'vue'
 import { isSection } from '@json-layout/core'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
+import { getCompProps } from '../../utils/index.js'
 
 defineProps({
   modelValue: {
@@ -21,7 +23,7 @@ defineProps({
 
 <template>
   <section-header :node="modelValue" />
-  <v-expansion-panels>
+  <v-expansion-panels v-bind="getCompProps(modelValue, true)">
     <v-expansion-panel
       v-for="(child, i) of modelValue.children"
       :key="child.key"
@@ -37,16 +39,24 @@ defineProps({
         </v-icon>
         {{ child.layout.title ?? child.layout.label }}
       </v-expansion-panel-title>
-      <v-container fluid>
-        <v-row>
-          <node
-            v-for="grandChild of isSection(child) ? child.children : [child]"
-            :key="grandChild.fullKey"
-            :model-value="/** @type import('../../types.js').VjsfNode */(grandChild)"
-            :stateful-layout="statefulLayout"
-          />
-        </v-row>
-      </v-container>
+      <v-expansion-panel-text>
+        <v-container fluid>
+          <v-row>
+            <node
+              v-for="grandChild of isSection(child) ? child.children : [child]"
+              :key="grandChild.fullKey"
+              :model-value="/** @type import('../../types.js').VjsfNode */(grandChild)"
+              :stateful-layout="statefulLayout"
+            />
+          </v-row>
+        </v-container>
+      </v-expansion-panel-text>
     </v-expansion-panel>
   </v-expansion-panels>
 </template>
+
+<style>
+.vjsf-node-expansion-panels .v-expansion-panel-text__wrapper {
+  padding: 0;
+}
+</style>

package/src/components/nodes/list.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { watch, computed, ref } from 'vue'
+import { useTheme } from 'vuetify'
 import { VList, VListItem, VListItemAction, VBtn, VMenu, VIcon, VSheet, VSpacer, VDivider, VRow, VListSubheader } from 'vuetify/components'
 import { isSection, clone } from '@json-layout/core'
 import Node from '../node.vue'
@@ -19,6 +20,8 @@ const props = defineProps({
   }
 })
 
+const theme = useTheme()
+
 /* 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))
@@ -48,10 +51,45 @@ const buttonDensity = computed(() => {
   return props.modelValue.options.density
 })
 
+const pushEmptyItem = () => {
+  const newData = (props.modelValue.data ?? []).concat([undefined])
+  props.statefulLayout.input(props.modelValue, newData)
+  props.statefulLayout.activateItem(props.modelValue, newData.length - 1)
+}
+
+/**
+ * @param {number} childIndex
+ */
+const deleteItem = (childIndex) => {
+  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)
+  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
+  return 'transparent'
+})
+
 </script>
 
 <template>
-  <v-sheet :elevation="1">
+  <v-sheet
+    :elevation="2"
+    rounded
+  >
     <v-list :density="modelValue.options.density">
       <v-list-subheader v-if="modelValue.layout.title">
         {{ modelValue.layout.title }}
@@ -64,7 +102,8 @@ const buttonDensity = computed(() => {
           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-row class="ma-0">
@@ -76,100 +115,110 @@ const buttonDensity = computed(() => {
             />
           </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'"
-              >
+              <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)"
-                />
-              </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="mdi-pencil"
+                    variant="text"
+                    color="primary"
+                    :density="buttonDensity"
+                    @click="statefulLayout.activateItem(modelValue, childIndex)"
+                  />
+                  <v-btn
+                    v-else
+                    :title="modelValue.messages.edit"
+                    icon="mdi-close"
+                    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="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 #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="deleteItem(childIndex)"
+                      >
+                        <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="duplicateItem(child, 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>
+              </template>
             </div>
           </template>
         </v-list-item>
@@ -180,7 +229,7 @@ const buttonDensity = computed(() => {
         <v-btn
           color="primary"
           :density="modelValue.options.density"
-          @click="statefulLayout.input(modelValue, (modelValue.data ?? []).concat([undefined]))"
+          @click="pushEmptyItem"
         >
           {{ modelValue.messages.addItem }}
         </v-btn>