@koumoul/vjsf 3.0.0-beta.27 → 3.0.0-beta.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.0.0-beta.27",
+  "version": "3.0.0-beta.28",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest",
@@ -76,7 +76,7 @@
     "vuetify": "^3.6.8"
   },
   "dependencies": {
-    "@json-layout/core": "0.23.0",
+    "@json-layout/core": "0.24.0",
     "@vueuse/core": "^10.5.0",
     "debug": "^4.3.4",
     "ejs": "^3.1.9"

package/src/components/options.js

@@ -12,9 +12,12 @@ export const defaultOptions = {
  * @param {number} width
  * @param {import("vue").Slots} slots
  * @param {Record<string, import('vue').Component>} defaultNodeComponents
+ * @param {(data: any) => void} onData
+ * @param {(statefulLayout: import('@json-layout/core').StatefulLayout) => void} onUpdate
+ * @param {(key: string) => void} onAutofocus
  * @returns
  */
-export const getFullOptions = (options, form, width, slots, defaultNodeComponents) => {
+export const getFullOptions = (options, form, width, slots, defaultNodeComponents, onData, onUpdate, onAutofocus) => {
   const components = { ...options?.components }
   const nodeComponents = { ...defaultNodeComponents, ...options?.nodeComponents }
   if (options?.plugins) {
@@ -28,6 +31,9 @@ export const getFullOptions = (options, form, width, slots, defaultNodeComponent
     ...defaultOptions,
     readOnly: !!(form && (form.isDisabled.value || form.isReadonly.value)),
     ...options,
+    onData,
+    onUpdate,
+    onAutofocus,
     context: options?.context ? JSON.parse(JSON.stringify(options.context)) : {},
     width: Math.round(width ?? 0),
     vjsfSlots: { ...slots },

package/src/composables/use-vjsf.js

@@ -3,6 +3,9 @@ import { inject, toRaw, shallowRef, computed, ref, watch, useSlots } from 'vue'
 import { useElementSize } from '@vueuse/core'
 import { getFullOptions } from '../components/options.js'
 import { setAutoFreeze } from 'immer'
+import Debug from 'debug'
+
+const debug = Debug('vjsf:use-vjsf')
 
 // immer freezing is disabled because it is not compatible with Vue 3 reactivity
 setAutoFreeze(false)
@@ -54,60 +57,65 @@ export const useVjsf = (schema, modelValue, options, nodeComponents, emit, compi
 
   const slots = useSlots()
 
-  const fullOptions = computed(() => getFullOptions(options.value, form, width.value, slots, { ...nodeComponents }))
-
-  // do not use a simple computed here as we want to prevent recompiling the layout when the options are the same
-  /** @type {import('vue').Ref<import('@json-layout/core').PartialCompileOptions>} */
-  const compileOptions = ref({})
-  watch(fullOptions, (newOptions) => {
-    if (precompiledLayout?.value) return
-    const newCompileOptions = produceCompileOptions(compileOptions.value, newOptions)
-    if (newCompileOptions !== compileOptions.value) compileOptions.value = newCompileOptions
-  }, { immediate: true })
-
-  const compiledLayout = computed(() => {
-    if (precompiledLayout?.value) return precompiledLayout?.value
-    if (!compile) throw new Error('compile function is not available')
-    const compiledLayout = compile(schema.value, compileOptions.value)
-    return compiledLayout
-  })
-
-  const onStatefulLayoutUpdate = () => {
-    if (!statefulLayout.value) return
-    stateTree.value = statefulLayout.value.stateTree
-    emit('update:state', statefulLayout.value)
+  /* Callbacks from json layout stateful layout */
+  /**
+   * @param {import('../types.js').VjsfStatefulLayout} statefulLayout
+   */
+  const onStatefulLayoutUpdate = (statefulLayout) => {
+    debug('onStatefulLayoutUpdate', statefulLayout)
+    if (!statefulLayout) return
+    stateTree.value = statefulLayout.stateTree
+    debug('  -> emit update:state')
+    emit('update:state', statefulLayout)
     if (form) {
       // cf https://vuetifyjs.com/en/components/forms/#validation-state
-      if (statefulLayout.value.valid) form.update('vjsf', true, [])
-      else if (statefulLayout.value.hasHiddenError) form.update('vjsf', null, [])
+      if (statefulLayout.valid) form.update('vjsf', true, [])
+      else if (statefulLayout.hasHiddenError) form.update('vjsf', null, [])
       else form.update('vjsf', false, [])
     }
   }
-
-  const onDataUpdate = () => {
-    if (statefulLayout.value && modelValue !== statefulLayout.value.data) {
-      emit('update:modelValue', statefulLayout.value.data)
-    }
+  /**
+   * @param {any} data
+   */
+  const onDataUpdate = (data) => {
+    debug('onDataUpdate', data)
+    debug('  -> emit update:modelValue')
+    emit('update:modelValue', data)
   }
-
   const onAutofocus = () => {
     if (!el.value) return
     // @ts-ignore
     const autofocusNodeElement = el.value.querySelector('.vjsf-input--autofocus')
+    debug('onAutofocus', autofocusNodeElement)
     if (autofocusNodeElement) {
       const autofocusInputElement = autofocusNodeElement.querySelector('input') ?? autofocusNodeElement.querySelector('textarea:not([style*="display: none"]')
       if (autofocusInputElement) autofocusInputElement.focus()
     }
   }
 
-  const initStatefulLayout = () => {
-    if (!width.value) return
-    if (statefulLayout.value) {
-      statefulLayout.value.events.off('update', onStatefulLayoutUpdate)
-      statefulLayout.value.events.off('data', onDataUpdate)
-      statefulLayout.value.events.off('autofocus', onAutofocus)
+  const fullOptions = computed(() => getFullOptions(options.value, form, width.value, slots, { ...nodeComponents }, onDataUpdate, onStatefulLayoutUpdate, onAutofocus))
+
+  // do not use a simple computed here as we want to prevent recompiling the layout when the options are the same
+  /** @type {import('vue').Ref<import('@json-layout/core').PartialCompileOptions>} */
+  const compileOptions = ref({})
+  watch(fullOptions, (newOptions) => {
+    if (precompiledLayout?.value) return
+    const newCompileOptions = produceCompileOptions(compileOptions.value, newOptions)
+    if (newCompileOptions !== compileOptions.value) {
+      debug('new compileOptions', newCompileOptions)
+      compileOptions.value = newCompileOptions
     }
+  }, { immediate: true })
 
+  const compiledLayout = computed(() => {
+    if (precompiledLayout?.value) return precompiledLayout?.value
+    if (!compile) throw new Error('compile function is not available')
+    const compiledLayout = compile(schema.value, compileOptions.value)
+    return compiledLayout
+  })
+
+  const initStatefulLayout = () => {
+    if (!width.value) return
     // @ts-ignore
     statefulLayout.value = /** @type {import('../types.js').VjsfStatefulLayout} */(new StatefulLayout(
       toRaw(compiledLayout.value),
@@ -115,29 +123,34 @@ export const useVjsf = (schema, modelValue, options, nodeComponents, emit, compi
       toRaw(fullOptions.value),
       toRaw(modelValue.value)
     ))
-    onStatefulLayoutUpdate()
-    onDataUpdate()
-    statefulLayout.value.events.on('update', onStatefulLayoutUpdate)
-    statefulLayout.value.events.on('data', onDataUpdate)
-    statefulLayout.value.events.on('autofocus', onAutofocus)
   }
 
   // case where options are updated from outside
   watch(fullOptions, (newOptions) => {
+    debug('watch fullOptions', fullOptions)
     if (statefulLayout.value) {
+      debug('  -> update statefulLayout options')
       statefulLayout.value.options = newOptions
     } else {
+      debug('  -> init statefulLayout')
       initStatefulLayout()
     }
   })
 
   // case where data is updated from outside
   watch(modelValue, (newData) => {
-    if (statefulLayout.value && statefulLayout.value.data !== newData) statefulLayout.value.data = toRaw(newData)
+    const rawData = toRaw(newData)
+    if (statefulLayout.value && statefulLayout.value.data !== rawData) {
+      debug('modelValue changed from outside', rawData)
+      debug('  -> update statefulLayout data')
+      statefulLayout.value.data = toRaw(rawData)
+    }
   })
 
   // case where schema or compile options are updated from outside
   watch(compiledLayout, (newCompiledLayout) => {
+    debug('watch compiledLayout', newCompiledLayout)
+    debug('  -> init statefulLayout')
     initStatefulLayout()
   })
 

package/types/components/options.d.ts

@@ -1,4 +1,4 @@
 /** @type {import("../types.js").PartialVjsfOptions} */
 export const defaultOptions: import("../types.js").PartialVjsfOptions;
-export function getFullOptions(options: Partial<import("../types.js").VjsfOptions> | null, form: any, width: number, slots: import("vue").Slots, defaultNodeComponents: Record<string, import('vue').Component>): import("../types.js").VjsfOptions;
+export function getFullOptions(options: Partial<import("../types.js").VjsfOptions> | null, form: any, width: number, slots: import("vue").Slots, defaultNodeComponents: Record<string, import('vue').Component>, onData: (data: any) => void, onUpdate: (statefulLayout: import('@json-layout/core').StatefulLayout) => void, onAutofocus: (key: string) => void): import("../types.js").VjsfOptions;
 //# sourceMappingURL=options.d.ts.map

package/types/components/options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../src/components/options.js"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,6BADW,OAAO,aAAa,EAAE,kBAAkB,CAKlD;AAWM,wCAPI,QAAQ,OAAO,aAAa,EAAE,WAAW,CAAC,GAAG,IAAI,QACjD,GAAG,SACH,MAAM,SACN,OAAO,KAAK,EAAE,KAAK,yBACnB,OAAO,MAAM,EAAE,OAAO,KAAK,EAAE,SAAS,CAAC,qCAwBjD"}
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../src/components/options.js"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,6BADW,OAAO,aAAa,EAAE,kBAAkB,CAKlD;AAcM,wCAVI,QAAQ,OAAO,aAAa,EAAE,WAAW,CAAC,GAAG,IAAI,QACjD,GAAG,SACH,MAAM,SACN,OAAO,KAAK,EAAE,KAAK,yBACnB,OAAO,MAAM,EAAE,OAAO,KAAK,EAAE,SAAS,CAAC,iBAChC,GAAG,KAAK,IAAI,6BACF,OAAO,mBAAmB,EAAE,cAAc,KAAK,IAAI,qBAC9D,MAAM,KAAK,IAAI,qCA2B/B"}

package/types/components/vjsf.vue.d.ts

@@ -1,13 +1,13 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    $emit: ((event: "update:modelValue", data: any) => void) & ((event: "update:state", state: import("../types.js").VjsfStatefulLayout) => void);
+    $emit: ((event: "update:state", state: import("../types.js").VjsfStatefulLayout) => void) & ((event: "update:modelValue", data: any) => void);
+    options: Partial<Omit<import("../types.js").VjsfOptions, "width" | "vjsfSlots">> | null;
     schema: Record<string, any>;
     modelValue: any;
-    options: Partial<Omit<import("../types.js").VjsfOptions, "width" | "vjsfSlots">> | null;
     precompiledLayout: import("../../../node_modules/@json-layout/core/types/compile/types.js").CompiledLayout;
     $props: {
+        readonly options?: Partial<Omit<import("../types.js").VjsfOptions, "width" | "vjsfSlots">> | null | undefined;
         readonly schema?: Record<string, any> | undefined;
         readonly modelValue?: any;
-        readonly options?: Partial<Omit<import("../types.js").VjsfOptions, "width" | "vjsfSlots">> | null | undefined;
         readonly precompiledLayout?: import("../../../node_modules/@json-layout/core/types/compile/types.js").CompiledLayout | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;

package/types/composables/use-vjsf.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-vjsf.d.ts","sourceRoot":"","sources":["../../src/composables/use-vjsf.js"],"names":[],"mappings":"AASA;IACE;;MAEE;gCADO,GAAG;IAGZ;;MAEE;4BADO,OAAO,aAAa,EAAE,kBAAkB;EAGlD;AAWM,gCARI,OAAO,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,cACzB,OAAO,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC,WACtB,OAAO,KAAK,EAAE,GAAG,CAAC,OAAO,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC,kBAClE,OAAO,MAAM,EAAE,OAAO,KAAK,EAAE,SAAS,CAAC,QACvC,GAAG;;;;EAuHb"}
+{"version":3,"file":"use-vjsf.d.ts","sourceRoot":"","sources":["../../src/composables/use-vjsf.js"],"names":[],"mappings":"AAYA;IACE;;MAEE;gCADO,GAAG;IAGZ;;MAEE;4BADO,OAAO,aAAa,EAAE,kBAAkB;EAGlD;AAWM,gCARI,OAAO,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,cACzB,OAAO,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC,WACtB,OAAO,KAAK,EAAE,GAAG,CAAC,OAAO,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC,kBAClE,OAAO,MAAM,EAAE,OAAO,KAAK,EAAE,SAAS,CAAC,QACvC,GAAG;;;;EAiIb"}