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

package/package.json

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

package/src/compat/v2.js

@@ -1,6 +1,6 @@
 import ajvModule from 'ajv'
 import addFormats from 'ajv-formats'
-import { resolveRefs, clone } from '@json-layout/core'
+import { resolveLocaleRefs, clone } from '@json-layout/core'
 import { isPartialGetItemsObj } from '@json-layout/vocabulary'
 
 // @ts-ignore
@@ -59,7 +59,17 @@ const fixExpression = (expression, type = 'js-eval') => {
   return { type, expr, pure }
 }
 
-const processFragment = (/** @type {import("ajv").SchemaObject} */schema) => {
+/**
+ * 
+ * @param {import("ajv").SchemaObject} schema 
+ * @param {(schemaId: string, ref: string) => [any, string, string]} getJSONRef 
+ * @param {string} schemaId
+ */
+const processFragment = (schema, getJSONRef, schemaId) => {
+  if (schema.$ref) {
+    const [refFragment, refSchemaId] = getJSONRef(schemaId, schema.$ref)
+    processFragment(refFragment, getJSONRef, refSchemaId)
+  }
   if (!schema.layout) {
     /** @type import('@json-layout/vocabulary').PartialCompObject */
     const layout = {}
@@ -137,12 +147,12 @@ const processFragment = (/** @type {import("ajv").SchemaObject} */schema) => {
 
   if (schema.properties) {
     for (const propertyKey of Object.keys(schema.properties)) {
-      processFragment(schema.properties[propertyKey])
+      processFragment(schema.properties[propertyKey], getJSONRef, schemaId)
     }
   }
 
   if (schema.allOf) {
-    for (const item of schema.allOf) processFragment(item)
+    for (const item of schema.allOf) processFragment(item, getJSONRef, schemaId)
   }
 
   if (schema.oneOf) {
@@ -157,28 +167,28 @@ const processFragment = (/** @type {import("ajv").SchemaObject} */schema) => {
         }
       }
     }
-    for (const item of schema.oneOf) processFragment(item)
+    for (const item of schema.oneOf) processFragment(item, getJSONRef, schemaId)
   }
 
   if (schema.anyOf) {
-    for (const item of schema.anyOf) processFragment(item)
+    for (const item of schema.anyOf) processFragment(item, getJSONRef, schemaId)
   }
 
   if (schema.type === 'array' && schema.items) {
     if (Array.isArray(schema.items)) {
-      for (const item of schema.items) processFragment(item)
+      for (const item of schema.items) processFragment(item, getJSONRef, schemaId)
     } else {
-      processFragment(schema.items)
+      processFragment(schema.items, getJSONRef, schemaId)
     }
   }
   if (schema.dependencies) {
     for (const key of Object.keys(schema.dependencies)) {
-      processFragment(schema.dependencies[key])
+      processFragment(schema.dependencies[key], getJSONRef, schemaId)
     }
   }
   if (schema.if) {
-    if (schema.then) processFragment(schema.then)
-    if (schema.else) processFragment(schema.else)
+    if (schema.then) processFragment(schema.then, getJSONRef, schemaId)
+    if (schema.else) processFragment(schema.else, getJSONRef, schemaId)
   }
 }
 
@@ -201,7 +211,7 @@ export function v2compat (_schema, _ajv, lang = 'en') {
 
   const schema = /** @type {import("ajv").SchemaObject} */ (clone(_schema))
   schema.$id = schema.$id ?? '_jl'
-  resolveRefs(schema, ajv, lang)
-  processFragment(schema)
+  const getJSONRef = resolveLocaleRefs(schema, ajv, lang)
+  processFragment(schema, getJSONRef, schema.$id)
   return schema
 }

package/src/components/nodes/list.vue

@@ -30,7 +30,7 @@ watch(() => props.modelValue.children, (array) => { sortableArray.value = array
 
 /* manage hovered and edited items */
 const editedItem = computed(() => {
-  return props.statefulLayout.activeItems[props.modelValue.fullKey]
+  return props.statefulLayout.activatedItems[props.modelValue.fullKey]
 })
 const menuOpened = ref(-1)
 const activeItem = computed(() => {
@@ -54,7 +54,9 @@ const buttonDensity = computed(() => {
 const pushEmptyItem = () => {
   const newData = (props.modelValue.data ?? []).concat([undefined])
   props.statefulLayout.input(props.modelValue, newData)
-  props.statefulLayout.activateItem(props.modelValue, newData.length - 1)
+  if (props.modelValue.layout.listEditMode === 'inline-single') {
+    props.statefulLayout.activateItem(props.modelValue, newData.length - 1)
+  }
 }
 
 /**
@@ -73,13 +75,17 @@ const deleteItem = (childIndex) => {
 const duplicateItem = (child, childIndex) => {
   const newData = [...props.modelValue.data.slice(0, childIndex), clone(child.data), ...props.modelValue.data.slice(childIndex)]
   props.statefulLayout.input(props.modelValue, newData)
-  props.statefulLayout.activateItem(props.modelValue, childIndex + 1)
+  if (props.modelValue.layout.listEditMode === 'inline-single') {
+    props.statefulLayout.activateItem(props.modelValue, childIndex + 1)
+  }
   menuOpened.value = -1
 }
 
 const itemBorderColor = computed(() => (/** @type {import('@json-layout/core').StateNode} */child, /** @type {number} */childIndex) => {
   if (editedItem.value === childIndex) return theme.current.value.colors.primary
   if (child.validated && (child.error || child.childError)) return theme.current.value.colors.error
+  if (props.modelValue.options.readOnly) return 'transparent'
+  if (activeItem.value === childIndex) return theme.current.value.colors.primary
   return 'transparent'
 })
 

package/src/components/nodes/one-of-select.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { VSelect, VRow, VCol } from 'vuetify/components'
-import { shallowRef, watch, computed, h } from 'vue'
+import { ref, watch, computed, h } from 'vue'
 import { isSection } from '@json-layout/core'
 import { isCompObject } from '@json-layout/vocabulary'
 import { getInputProps } from '../../utils/index.js'
@@ -19,18 +19,19 @@ const props = defineProps({
   }
 })
 
-/** @type import('vue').ShallowRef<import('@json-layout/core').SkeletonTree | undefined> */
-const activeChildTree = shallowRef(undefined)
+/** @type import('vue').Ref<string | undefined> */
+const activeChildTree = ref(undefined)
 watch(() => props.modelValue, () => {
-  // we set the active oneOf child as the one whose schema validates on the current data
-  if (props.modelValue.fullKey in props.statefulLayout.activeItems) {
-    activeChildTree.value = props.modelValue.skeleton.childrenTrees?.[props.statefulLayout.activeItems[props.modelValue.fullKey]]
+  if (props.modelValue.children?.length === 1) {
+    if (typeof props.modelValue.children[0].key === 'number') {
+      activeChildTree.value = props.modelValue.skeleton.childrenTrees?.[props.modelValue.children[0].key]
+    }
   } else {
     activeChildTree.value = undefined
   }
 }, { immediate: true })
 
-const onChange = (/** @type import('@json-layout/core').SkeletonTree */childTree) => {
+const onChange = (/** @type {string} */childTree) => {
   if (!props.modelValue.skeleton.childrenTrees) return
   props.statefulLayout.activateItem(props.modelValue, props.modelValue.skeleton.childrenTrees.indexOf(childTree))
 }
@@ -39,9 +40,9 @@ const fieldProps = computed(() => {
   const fieldProps = getInputProps(props.modelValue, props.statefulLayout)
   fieldProps.modelValue = activeChildTree.value
   fieldProps['onUpdate:modelValue'] = onChange
-  fieldProps.returnObject = true
   const items = []
-  for (const childTree of props.modelValue.skeleton.childrenTrees || []) {
+  for (const childTreePointer of props.modelValue.skeleton.childrenTrees || []) {
+    const childTree = props.statefulLayout.compiledLayout.skeletonTrees[childTreePointer]
     const childLayout = props.statefulLayout.compiledLayout.normalizedLayouts[childTree.root.pointer]
     if (!isCompObject(childLayout) || !childLayout.if || !!props.statefulLayout.evalNodeExpression(props.modelValue, childLayout.if, props.modelValue.data)) {
       items.push(childTree)
@@ -49,6 +50,7 @@ const fieldProps = computed(() => {
   }
   fieldProps.items = items
   fieldProps.itemTitle = 'title'
+  fieldProps.itemValue = (/** @type {import('@json-layout/core').SkeletonTree} */childTree) => childTree.root.pointer
   return fieldProps
 })
 </script>

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.skeletonTree),
+      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/compat/v2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"v2.d.ts","sourceRoot":"","sources":["../../src/compat/v2.js"],"names":[],"mappings":"AAoLA;;;;;;GAMG;AACH,kCALW,MAAM,+CAEN,MAAM,0BAkBhB;sBA1MqB,KAAK"}
+{"version":3,"file":"v2.d.ts","sourceRoot":"","sources":["../../src/compat/v2.js"],"names":[],"mappings":"AAkMA;;;;;;GAMG;AACH,kCALW,MAAM,+CAEN,MAAM,0BAkBhB;sBAxNqB,KAAK"}

package/types/components/fragments/select-item.vue.d.ts

@@ -1,11 +1,11 @@
 declare const _default: import("vue").DefineComponent<{}, {
     multiple: boolean;
-    itemProps: Record<string, any>;
     item: import("../../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem;
+    itemProps: Record<string, any>;
     $props: {
         readonly multiple?: boolean | undefined;
-        readonly itemProps?: Record<string, any> | undefined;
         readonly item?: import("../../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem | undefined;
+        readonly itemProps?: Record<string, any> | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

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);
+    schema: Record<string, any>;
     modelValue: any;
     options: Partial<Omit<import("../types.js").VjsfOptions, "width" | "vjsfSlots">> | null;
-    schema: Record<string, any>;
     precompiledLayout: import("../../../node_modules/@json-layout/core/types/compile/types.js").CompiledLayout;
     $props: {
+        readonly schema?: Record<string, any> | undefined;
         readonly modelValue?: any;
         readonly options?: Partial<Omit<import("../types.js").VjsfOptions, "width" | "vjsfSlots">> | null | undefined;
-        readonly schema?: Record<string, any> | 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"}