@koumoul/vjsf 3.23.4 → 3.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.23.4",
+  "version": "3.24.0",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test-tz1": "TZ=Europe/Paris vitest run",
@@ -73,7 +73,7 @@
   },
   "dependencies": {
     "@json-layout/core": "~2.2.1",
-    "@json-layout/vocabulary": "~2.9.3",
+    "@json-layout/vocabulary": "~2.10.1",
     "@vueuse/core": "^12.5.0",
     "debug": "^4.3.4"
   },

package/src/components/nodes/list.vue

@@ -223,6 +223,9 @@ const indexedListRules = computed(() => {
   return [(/** @type {string} */v) => !props.modelValue.children.some(c => c.key === v), (/** @type {string} */v) => !v || !!props.modelValue.layout.indexed?.some(pattern => v.match(getRegexp(pattern)))]
 })
 
+const toggleDialog = (/** @type {boolean} */value) => {
+  if (!value) props.statefulLayout.deactivateItem(props.modelValue)
+}
 </script>
 
 <template>
@@ -522,31 +525,35 @@ const indexedListRules = computed(() => {
         v-bind="vEditDialogProps"
         :z-index="zIndex"
         class="vjsf-list-dialog"
+        @update:model-value="toggleDialog"
       >
-        <v-sheet v-bind="vEditDialogVSheetProps">
-          <v-toolbar
-            density="compact"
-            color="surface"
-          >
-            <v-spacer />
-            <v-btn
-              :title="modelValue.messages.close"
-              :icon="options.icons.close"
-              variant="flat"
-              density="comfortable"
-              :disabled="modelValue.loading"
-              @click="statefulLayout.deactivateItem(modelValue)"
-            />
-          </v-toolbar>
-          <v-row class="ma-0">
-            <node
-              v-for="grandChild of isSection(children[children.length - 1]) ? children[children.length - 1].children : [children[children.length - 1]]"
-              :key="grandChild.fullKey"
-              :model-value="/** @type import('../../types.js').VjsfNode */(grandChild)"
-              :stateful-layout="statefulLayout"
-            />
-          </v-row>
-        </v-sheet>
+        <template #default="{ isActive }">
+          <v-sheet v-bind="vEditDialogVSheetProps">
+            <v-toolbar
+              density="compact"
+              color="surface"
+              class="vjsf-list-dialog-toolbar"
+            >
+              <v-spacer />
+              <v-btn
+                :title="modelValue.messages.close"
+                :icon="options.icons.close"
+                variant="flat"
+                density="comfortable"
+                :disabled="modelValue.loading"
+                @click="isActive.value = false"
+              />
+            </v-toolbar>
+            <v-row class="ma-0">
+              <node
+                v-for="grandChild of isSection(children[children.length - 1]) ? children[children.length - 1].children : [children[children.length - 1]]"
+                :key="grandChild.fullKey"
+                :model-value="/** @type import('../../types.js').VjsfNode */(grandChild)"
+                :stateful-layout="statefulLayout"
+              />
+            </v-row>
+          </v-sheet>
+        </template>
       </v-dialog>
     </v-list>
   </v-card>

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

@@ -3,13 +3,17 @@ 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/state'
-import { isCompObject } from '@json-layout/vocabulary'
+import { isCompObject, isOneOfItemHeader, isOneOfItemChild } from '@json-layout/vocabulary'
 import useNode from '../../composables/use-node.js'
 import useZIndexStack from '../../composables/use-z-index-stack.js'
 import Node from '../node.vue'
 import { useDefaults } from 'vuetify'
+import { VListSubheader, VListItem } from 'vuetify/components/VList'
+import VSelectItemIcon from '../fragments/select-item-icon.vue'
+import useCompDefaults from '../../composables/use-comp-defaults.js'
 
 useDefaults({}, 'VjsfOneOfSelect')
+const avatarProps = useCompDefaults('VjsfOneOfSelect-VAvatar', { rounded: false, size: 'small' })
 
 const props = defineProps({
   modelValue: {
@@ -53,16 +57,22 @@ const fieldProps = computed(() => {
     fieldProps.menuProps = { zIndex }
   }
   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)
+  for (const oneOfItem of props.modelValue.layout.oneOfItems) {
+    if (isOneOfItemHeader(oneOfItem)) {
+      items.push(oneOfItem)
+    } else if (isOneOfItemChild(oneOfItem)) {
+      const childTreePointer = (skeleton.value.childrenTrees || [])[oneOfItem.key]
+      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({ ...oneOfItem, value: childTree })
+      }
     }
   }
   fieldProps.items = items
-  fieldProps.itemTitle = 'title'
-  fieldProps.itemValue = (/** @type {import('@json-layout/core').SkeletonTree} */childTree) => childTree.root
+  fieldProps.itemValue = (/** @type {{value: import('@json-layout/core').SkeletonTree}} */item) => {
+    return item.value?.root
+  }
   return fieldProps
 })
 </script>
@@ -76,7 +86,33 @@ const fieldProps = computed(() => {
       <v-select
         v-bind="fieldProps"
         :model-value="activeChildTree"
-      />
+      >
+        <template #item="context">
+          <v-list-subheader v-if="context.item.raw.header">
+            <v-select-item-icon
+              v-if="typeof context.item.raw.icon === 'string'"
+              :icon="context.item.raw.icon"
+              :avatar-props="avatarProps"
+            />
+            {{ context.item.raw.title }}
+          </v-list-subheader>
+          <v-list-item
+            v-else
+            v-bind="context.props"
+          >
+            <template
+              v-if="context.item.raw.icon"
+              #prepend
+            >
+              <v-select-item-icon
+                v-if="typeof context.item.raw.icon === 'string'"
+                :icon="context.item.raw.icon"
+                :avatar-props="avatarProps"
+              />
+            </template>
+          </v-list-item>
+        </template>
+      </v-select>
     </v-col>
     <template v-if="modelValue.children?.[0]">
       <node