@koumoul/vjsf 3.0.0-alpha.5 → 3.0.0-alpha.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.0.0-alpha.5",
+  "version": "3.0.0-alpha.7",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest",

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

@@ -9,7 +9,6 @@ import { defaultOptions } from '<%- baseImport %>/components/options.js'
 import Tree from '<%- baseImport %>/components/tree.vue'
 import { useVjsf, emits } from '<%- baseImport %>/composables/use-vjsf.js'
 import '<%- baseImport %>/styles/vjsf.css'
-import { registeredNodeComponents } from '<%- baseImport %>/utils'
 
 <% compImports.forEach(function({compName, compImport}){ %>
 import <%= compName %> from '<%- compImport %>'
@@ -21,7 +20,6 @@ const nodeComponents = {
   <% compImports.forEach(function({comp, compName}){ %>
   "<%= comp %>": <%= compName %>,
   <% }); %>  
-  ...registeredNodeComponents
 }
 
 const props = defineProps({

package/src/components/vjsf.vue

@@ -5,7 +5,6 @@ import { compile } from '@json-layout/core'
 import Tree from './tree.vue'
 import { useVjsf, emits } from '../composables/use-vjsf.js'
 import '../styles/vjsf.css'
-import { registeredNodeComponents } from '../utils/index.js'
 
 import NodeSection from './nodes/section.vue'
 import NodeTextField from './nodes/text-field.vue'
@@ -51,8 +50,7 @@ const nodeComponents = {
   list: NodeList,
   combobox: NodeCombobox,
   'number-combobox': NodeNumberCombobox,
-  'file-input': NodeFileInput,
-  ...registeredNodeComponents
+  'file-input': NodeFileInput
 }
 
 const props = defineProps({

package/src/composables/use-vjsf.js

@@ -2,6 +2,7 @@ import { StatefulLayout } from '@json-layout/core'
 import { inject, toRaw, shallowRef, computed, ref, watch, useSlots } from 'vue'
 import { useElementSize } from '@vueuse/core'
 import { getFullOptions } from '../components/options.js'
+import { registeredNodeComponents } from '../utils/index.js'
 
 export const emits = {
   /**
@@ -48,7 +49,7 @@ export const useVjsf = (schema, modelValue, options, nodeComponents, emit, compi
 
   const slots = useSlots()
 
-  const fullOptions = computed(() => getFullOptions(options.value, form, width.value, slots, nodeComponents))
+  const fullOptions = computed(() => getFullOptions(options.value, form, width.value, slots, { ...nodeComponents, ...toRaw(registeredNodeComponents.value) }))
 
   const compiledLayout = computed(() => {
     if (precompiledLayout?.value) return precompiledLayout?.value

package/src/utils/global-register.js

@@ -1,10 +1,12 @@
-/** @type {Record<string, import('vue').Component>} */
-export const registeredNodeComponents = {}
+import { ref } from 'vue'
+
+/** @type {import('vue').Ref<Record<string, import('vue').Component>>} */
+export const registeredNodeComponents = ref({})
 
 /**
  * @param {string} name
  * @param {import('vue').Component} component
  */
 export function registerNodeComponent (name, component) {
-  registeredNodeComponents[name] = component
+  registeredNodeComponents.value[name] = component
 }