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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.0.0-beta.26",
+  "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.22.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,10 +12,13 @@ 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) => {
-  const components = options?.components ?? {}
+export const getFullOptions = (options, form, width, slots, defaultNodeComponents, onData, onUpdate, onAutofocus) => {
+  const components = { ...options?.components }
   const nodeComponents = { ...defaultNodeComponents, ...options?.nodeComponents }
   if (options?.plugins) {
     for (const plugin of 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,7 +57,43 @@ export const useVjsf = (schema, modelValue, options, nodeComponents, emit, compi
 
   const slots = useSlots()
 
-  const fullOptions = computed(() => getFullOptions(options.value, form, width.value, slots, { ...nodeComponents }))
+  /* 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.valid) form.update('vjsf', true, [])
+      else if (statefulLayout.hasHiddenError) form.update('vjsf', null, [])
+      else form.update('vjsf', false, [])
+    }
+  }
+  /**
+   * @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 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>} */
@@ -62,7 +101,10 @@ export const useVjsf = (schema, modelValue, options, nodeComponents, emit, compi
   watch(fullOptions, (newOptions) => {
     if (precompiledLayout?.value) return
     const newCompileOptions = produceCompileOptions(compileOptions.value, newOptions)
-    if (newCompileOptions !== compileOptions.value) compileOptions.value = newCompileOptions
+    if (newCompileOptions !== compileOptions.value) {
+      debug('new compileOptions', newCompileOptions)
+      compileOptions.value = newCompileOptions
+    }
   }, { immediate: true })
 
   const compiledLayout = computed(() => {
@@ -72,71 +114,43 @@ export const useVjsf = (schema, modelValue, options, nodeComponents, emit, compi
     return compiledLayout
   })
 
-  const onStatefulLayoutUpdate = () => {
-    if (!statefulLayout.value) return
-    stateTree.value = statefulLayout.value.stateTree
-    emit('update:state', statefulLayout.value)
-    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, [])
-      else form.update('vjsf', false, [])
-    }
-  }
-
-  const onDataUpdate = () => {
-    if (statefulLayout.value && modelValue !== statefulLayout.value.data) {
-      emit('update:modelValue', statefulLayout.value.data)
-    }
-  }
-
   const initStatefulLayout = () => {
     if (!width.value) return
-
     // @ts-ignore
-    const _statefulLayout = /** @type {import('../types.js').VjsfStatefulLayout} */(new StatefulLayout(
+    statefulLayout.value = /** @type {import('../types.js').VjsfStatefulLayout} */(new StatefulLayout(
       toRaw(compiledLayout.value),
       toRaw(compiledLayout.value.skeletonTrees[compiledLayout.value.mainTree]),
       toRaw(fullOptions.value),
       toRaw(modelValue.value)
     ))
-    statefulLayout.value = _statefulLayout
-    onStatefulLayoutUpdate()
-    onDataUpdate()
-    _statefulLayout.events.on('update', () => {
-      onStatefulLayoutUpdate()
-    })
-    _statefulLayout.events.on('data', () => {
-      onDataUpdate()
-    })
-    emit('update:state', _statefulLayout)
-    _statefulLayout.events.on('autofocus', () => {
-      if (!el.value) return
-      // @ts-ignore
-      const autofocusNodeElement = el.value.querySelector('.vjsf-input--autofocus')
-      if (autofocusNodeElement) {
-        const autofocusInputElement = autofocusNodeElement.querySelector('input') ?? autofocusNodeElement.querySelector('textarea:not([style*="display: none"]')
-        if (autofocusInputElement) autofocusInputElement.focus()
-      }
-    })
   }
 
   // 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;
-    modelValue: any;
     schema: Record<string, any>;
+    modelValue: any;
     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 modelValue?: any;
         readonly schema?: Record<string, any> | undefined;
+        readonly modelValue?: any;
         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;;;;EAsHb"}
+{"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"}