@koumoul/vjsf 3.24.0 → 3.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.24.0",
+  "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.10.1",
+    "@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/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;