@koumoul/vjsf 3.23.5 → 3.25.0

package/package.json

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

package/src/components/nodes/card.vue

@@ -3,11 +3,12 @@ import { VCard } from 'vuetify/components/VCard'
 import { VContainer, VRow } from 'vuetify/components/VGrid'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
+import { computed } from 'vue'
 import { useDefaults } from 'vuetify'
 
 useDefaults({}, 'VjsfCard')
 
-defineProps({
+const { modelValue, statefulLayout } = defineProps({
   modelValue: {
     /** @type import('vue').PropType<import('../../types.js').VjsfCardNode> */
     type: Object,
@@ -20,10 +21,17 @@ defineProps({
   }
 })
 
+const nodeProps = computed(() => {
+  return {
+    title: modelValue.layout.title || undefined,
+    ...modelValue.props,
+  }
+})
+
 </script>
 
 <template>
-  <v-card :title="modelValue.layout.title || undefined">
+  <v-card v-bind="nodeProps">
     <v-container fluid>
       <section-header
         :node="modelValue"

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

package/src/components/nodes/stepper.vue

@@ -25,6 +25,10 @@ const props = defineProps({
   }
 })
 
+const nodeProps = computed(() => {
+  return props.modelValue.props
+})
+
 const step = ref(0)
 
 const firstErrorIndex = computed(() => {
@@ -41,7 +45,10 @@ const goNext = () => {
 
 <template>
   <section-header :node="modelValue" />
-  <v-stepper v-model="step">
+  <v-stepper
+    v-model="step"
+    v-bind="nodeProps"
+  >
     <v-stepper-header>
       <template
         v-for="(child, i) of modelValue.children"

package/src/components/nodes/tabs.vue

@@ -5,7 +5,7 @@ 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 { ref, computed } from 'vue'
 import { isSection } from '@json-layout/core/state'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
@@ -15,7 +15,7 @@ import useCompDefaults from '../../composables/use-comp-defaults.js'
 useDefaults({}, 'VjsfTabs')
 const vSheetProps = useCompDefaults('VjsfTabs-VSheet', { border: true })
 
-defineProps({
+const { modelValue, statefulLayout } = defineProps({
   modelValue: {
     /** @type import('vue').PropType<import('../../types.js').VjsfTabsNode> */
     type: Object,
@@ -28,6 +28,13 @@ defineProps({
   }
 })
 
+const nodeProps = computed(() => {
+  return {
+    ...modelValue.props,
+    directory: 'horizontal'
+  }
+})
+
 const tab = ref(0)
 </script>
 
@@ -36,7 +43,7 @@ const tab = ref(0)
   <v-sheet v-bind="vSheetProps">
     <v-tabs
       v-model="tab"
-      direction="horizontal"
+      v-bind="nodeProps"
     >
       <v-tab
         v-for="(child, i) of modelValue.children"

package/src/components/nodes/vertical-tabs.vue

@@ -5,7 +5,7 @@ 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 { ref } from 'vue'
+import { ref, computed } from 'vue'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
 import ChildSubtitle from '../fragments/child-subtitle.vue'
@@ -15,7 +15,7 @@ import useCompDefaults from '../../composables/use-comp-defaults.js'
 useDefaults({}, 'VjsfVerticalTabs')
 const vSheetProps = useCompDefaults('VjsfVerticalTabs-VSheet', { border: true })
 
-defineProps({
+const { modelValue, statefulLayout } = defineProps({
   modelValue: {
     /** @type import('vue').PropType<import('../../types.js').VjsfVerticalTabsNode> */
     type: Object,
@@ -28,6 +28,13 @@ defineProps({
   }
 })
 
+const nodeProps = computed(() => {
+  return {
+    ...modelValue.props,
+    directory: 'vertical'
+  }
+})
+
 const tab = ref(0)
 </script>
 
@@ -37,7 +44,7 @@ const tab = ref(0)
     <div class="d-flex flex-row">
       <v-tabs
         v-model="tab"
-        direction="vertical"
+        v-bind="nodeProps"
       >
         <v-tab
           v-for="(child, i) of modelValue.children"

package/types/components/nodes/card.vue.d.ts

@@ -2,8 +2,8 @@ declare const _default: import("vue").DefineComponent<{}, {
     modelValue: import("../../types.js").VjsfCardNode;
     statefulLayout: import("../../types.js").VjsfStatefulLayout;
     $props: {
-        readonly modelValue?: import("../../types.js").VjsfCardNode | undefined;
-        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
+        modelValue?: import("../../types.js").VjsfCardNode | undefined;
+        statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/types/components/nodes/tabs.vue.d.ts

@@ -2,8 +2,8 @@ declare const _default: import("vue").DefineComponent<{}, {
     modelValue: import("../../types.js").VjsfTabsNode;
     statefulLayout: import("../../types.js").VjsfStatefulLayout;
     $props: {
-        readonly modelValue?: import("../../types.js").VjsfTabsNode | undefined;
-        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
+        modelValue?: import("../../types.js").VjsfTabsNode | undefined;
+        statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/types/components/nodes/vertical-tabs.vue.d.ts

@@ -2,8 +2,8 @@ declare const _default: import("vue").DefineComponent<{}, {
     modelValue: import("../../types.js").VjsfVerticalTabsNode;
     statefulLayout: import("../../types.js").VjsfStatefulLayout;
     $props: {
-        readonly modelValue?: import("../../types.js").VjsfVerticalTabsNode | undefined;
-        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
+        modelValue?: import("../../types.js").VjsfVerticalTabsNode | undefined;
+        statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;