feat: adapt to json-layout latest slot support

.zellij.kdl

@@ -26,6 +26,7 @@ layout {
       }
     }
     pane size=2 borderless=true {
-        plugin location="zellij:status-bar"
+      command "bash"
+        args "-ic" "echo -n -e \"Doc dev server available at \\e[1;96mhttp://localhost:3133\\033[0m\""
     }
 }

compiler/package.json

@@ -23,7 +23,7 @@
     }
   },
   "dependencies": {
-    "@json-layout/core": "~1.2.2",
+    "@json-layout/core": "~1.3.0",
     "debug": "^4.3.4",
     "ejs": "^3.1.9"
   },

compiler/src/index.js

@@ -4,7 +4,7 @@ import path from 'path'
 import ejs from 'ejs'
 import { compile as compileLayout } from '@json-layout/core'
 import { serialize as serializeCompiledLayout } from '@json-layout/core/src/compile/serialize'
-import { childIsCompObject, isCompObject, isSwitchStruct } from '@json-layout/vocabulary'
+import { childIsCompositeCompObject, isCompObject, isSwitchStruct } from '@json-layout/vocabulary'
 import { getFullOptions } from './options.js'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
@@ -21,7 +21,7 @@ function listComps (comps, layout) {
     comps.add(layout.comp)
     if (layout.children) {
       for (const child of /** @type {import('@json-layout/vocabulary').Children} */(layout.children)) {
-        if (childIsCompObject(child)) {
+        if (childIsCompositeCompObject(child)) {
           listComps(comps, child)
         }
       }

doc/components/vjsf-example.vue

@@ -259,7 +259,7 @@
                     />
                   </template>
                   <template #custom-message="{node}">
-                    This message is defined in a slot (key={{ node.key }})
+                    This message is defined in a slot (key={{ node.key }}, data={{ node.data }})
                   </template>
                 </vjsf>
               </slot>

doc/examples/merged/index.js

@@ -1,11 +1,10 @@
 // merge some info into the JSON layout standard examples
 
-import codeSlots from './code-slots.js'
 // import imgCropper from './img-cropper.js'
 
 /** @type {Record<string, import("@json-layout/examples").JSONLayoutExample[]>} */
 export const additionalExamples = {
-  slots: [codeSlots]
+  // slots: [codeSlots]
   // files: [imgCropper]
 }
 

doc/examples/slot-codes.js

@@ -11,7 +11,7 @@ const codes = {
   </template>`,
   'custom-message': `
   <template #custom-message="{node, statefulLayout}">
-    This message is defined in a slot (key={{ node.key }})
+    This message is defined in a slot (key={{ node.key }}, data={{ node.data }})
   </template>`
 }
 

doc/nuxt.config.js

@@ -18,6 +18,12 @@ export default defineNuxtConfig({
   ssr: false,
   css: ['vuetify/styles'],
 
+  app: {
+    header: {
+      link: [{ rel: 'icon', type: 'image/x-icon', href: targetURL.pathname + 'favicon.ico' }]
+    }
+  },
+
   vite: {
     vue: {
       template: {
@@ -92,4 +98,4 @@ export default defineNuxtConfig({
   },
 
   compatibilityDate: '2024-07-22'
-})
+})

doc/pages/editor.vue

@@ -112,7 +112,7 @@
                   />
                 </template>
                 <template #custom-message="{node}">
-                  This message is defined in a slot (key={{ node.key }})
+                  This message is defined in a slot (key={{ node.key }}, data={{ node.data }})
                 </template>
               </vjsf>
               <v-row class="ma-0">

lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.5.1",
+  "version": "3.6.0",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest",
@@ -70,7 +70,7 @@
     "vuetify": "^3.6.13"
   },
   "dependencies": {
-    "@json-layout/core": "~1.2.2",
+    "@json-layout/core": "~1.3.0",
     "@vueuse/core": "^10.5.0",
     "debug": "^4.3.4"
   },

lib/src/components/node.vue

@@ -50,7 +50,7 @@ const nodeClasses = computed(() => {
   return classes
 })
 
-if (props.modelValue.layout.comp !== 'none' && !props.statefulLayout.options.nodeComponents[props.modelValue.layout.comp]) {
+if (props.modelValue.layout.comp !== 'none' && !props.modelValue.slots?.component && !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 ?`)
 }
 
@@ -64,9 +64,9 @@ if (props.modelValue.layout.comp !== 'none' && !props.statefulLayout.options.nod
       :class="nodeClasses"
     >
       <node-slot
-        v-if="modelValue.layout.slots?.before"
+        v-if="modelValue.slots?.before"
         key="before"
-        :layout-slot="modelValue.layout.slots?.before"
+        :layout-slot="modelValue.slots?.before"
         :node="modelValue"
         :stateful-layout="statefulLayout"
         :class="beforeAfterClasses[modelValue.options.density]"
@@ -77,9 +77,9 @@ if (props.modelValue.layout.comp !== 'none' && !props.statefulLayout.options.nod
         :node="modelValue"
       />
       <node-slot
-        v-if="modelValue.layout.slots?.component"
+        v-if="modelValue.slots?.component"
         key="component"
-        :layout-slot="modelValue.layout.slots?.component"
+        :layout-slot="modelValue.slots?.component"
         :node="modelValue"
         :stateful-layout="statefulLayout"
       />
@@ -91,9 +91,9 @@ if (props.modelValue.layout.comp !== 'none' && !props.statefulLayout.options.nod
       />
 
       <node-slot
-        v-if="modelValue.layout.slots?.after"
+        v-if="modelValue.slots?.after"
         key="after"
-        :layout-slot="modelValue.layout.slots?.after"
+        :layout-slot="modelValue.slots?.after"
         :node="modelValue"
         :stateful-layout="statefulLayout"
         :class="beforeAfterClasses[modelValue.options.density]"