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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.0.0-beta.26",
+  "version": "3.0.0-beta.27",
   "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.23.0",
     "@vueuse/core": "^10.5.0",
     "debug": "^4.3.4",
     "ejs": "^3.1.9"

package/src/components/options.js

@@ -15,7 +15,7 @@ export const defaultOptions = {
  * @returns
  */
 export const getFullOptions = (options, form, width, slots, defaultNodeComponents) => {
-  const components = options?.components ?? {}
+  const components = { ...options?.components }
   const nodeComponents = { ...defaultNodeComponents, ...options?.nodeComponents }
   if (options?.plugins) {
     for (const plugin of options.plugins) {

package/src/composables/use-vjsf.js

@@ -90,35 +90,36 @@ export const useVjsf = (schema, modelValue, options, nodeComponents, emit, compi
     }
   }
 
+  const onAutofocus = () => {
+    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()
+    }
+  }
+
   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)
+    }
 
     // @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()
-      }
-    })
+    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

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);
-    options: Partial<Omit<import("../types.js").VjsfOptions, "width" | "vjsfSlots">> | null;
-    modelValue: any;
     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 modelValue?: any;
         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;;;;EAsHb"}
+{"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"}