@koumoul/vjsf 3.0.0-beta.9 → 3.0.1

package/src/components/nodes/time-picker.vue

@@ -1,7 +1,51 @@
 <script setup>
+import TextFieldMenu from '../fragments/text-field-menu.vue'
+import { VTimePicker } from 'vuetify/labs/VTimePicker'
+import { VIcon } from 'vuetify/components/VIcon'
+import { useDate, useDefaults } from 'vuetify'
+import { computed, toRef } from 'vue'
+import { getShortTime, getLongTime } from '../../utils/dates.js'
+import useNode from '../../composables/use-node.js'
 
+useDefaults({}, 'VjsfDatePicker')
+
+const props = defineProps({
+  modelValue: {
+    /** @type import('vue').PropType<import('../../types.js').VjsfDatePickerNode> */
+    type: Object,
+    required: true
+  },
+  statefulLayout: {
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+    type: Object,
+    required: true
+  }
+})
+
+const vDate = useDate()
+
+const { compProps, localData } = useNode(toRef(props, 'modelValue'), props.statefulLayout)
+
+const timePickerProps = computed(() => {
+  const timePickerProps = { ...compProps.value }
+  timePickerProps['ampm-in-title'] = true
+  if (localData.value) timePickerProps.modelValue = getShortTime(localData.value)
+  return timePickerProps
+})
 </script>
 
 <template>
-  TODO time
+  <text-field-menu
+    :model-value="props.modelValue"
+    :stateful-layout="statefulLayout"
+    :formatted-value="timePickerProps.modelValue && vDate.format('2010-04-13T' + timePickerProps.modelValue, 'fullTime')"
+  >
+    <template #prepend-inner>
+      <v-icon :icon="statefulLayout.options.icons.clock" />
+    </template>
+    <v-time-picker
+      v-bind="timePickerProps"
+      @update:model-value="value => {statefulLayout.input(props.modelValue, value && getLongTime(value))}"
+    />
+  </text-field-menu>
 </template>

package/src/components/nodes/vertical-tabs.vue

@@ -1,9 +1,19 @@
 <script setup>
 import { isSection } from '@json-layout/core'
-import { VTabs, VTab, VContainer, VSheet, VWindow, VWindowItem, VRow, VIcon } from 'vuetify/components'
+import { VTabs, VTab } from 'vuetify/components/VTabs'
+import { VContainer, VRow } from 'vuetify/components/VGrid'
+import { VIcon } from 'vuetify/components/VIcon'
+import { VSheet } from 'vuetify/components/VSheet'
+import { VWindow, VWindowItem } from 'vuetify/components/VWindow'
 import { ref } from 'vue'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
+import ChildSubtitle from '../fragments/child-subtitle.vue'
+import { useDefaults } from 'vuetify'
+import useCompDefaults from '../../composables/use-comp-defaults.js'
+
+useDefaults({}, 'VjsfVerticalTabs')
+const vSheetProps = useCompDefaults('VjsfVerticalTabs-VSheet', { border: true })
 
 defineProps({
   modelValue: {
@@ -23,7 +33,7 @@ const tab = ref(0)
 
 <template>
   <section-header :node="modelValue" />
-  <v-sheet border>
+  <v-sheet v-bind="vSheetProps">
     <div class="d-flex flex-row">
       <v-tabs
         v-model="tab"
@@ -38,9 +48,8 @@ const tab = ref(0)
           <v-icon
             v-if="child.validated && (child.error || child.childError)"
             color="error"
-          >
-            mdi-alert
-          </v-icon>
+            :icon="statefulLayout.options.icons.alert"
+          />
           {{ child.layout.title ?? child.layout.label }}
         </v-tab>
       </v-tabs>
@@ -54,7 +63,8 @@ const tab = ref(0)
           :value="i"
         >
           <v-container fluid>
-            <v-row>
+            <child-subtitle :model-value="child" />
+            <v-row :dense="modelValue.options?.density === 'compact' || modelValue.options?.density === 'comfortable'">
               <node
                 v-for="grandChild of isSection(child) ? child.children : [child]"
                 :key="grandChild.fullKey"

package/src/components/tree.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { VRow } from 'vuetify/components'
+import { VRow } from 'vuetify/components/VGrid'
 import Node from './node.vue'
 
 defineProps({

package/src/components/vjsf.vue

@@ -14,10 +14,14 @@ import NodeSwitch from './nodes/switch.vue'
 import NodeNumberField from './nodes/number-field.vue'
 import NodeSlider from './nodes/slider.vue'
 import NodeDatePicker from './nodes/date-picker.vue'
+import NodeTimePicker from './nodes/time-picker.vue'
 import NodeDateTimePicker from './nodes/date-time-picker.vue'
 import NodeColorPicker from './nodes/color-picker.vue'
 import NodeSelect from './nodes/select.vue'
 import NodeAutocomplete from './nodes/autocomplete.vue'
+import NodeRadioGroup from './nodes/radio-group.vue'
+import NodeCheckboxGroup from './nodes/checkbox-group.vue'
+import NodeSwitchGroup from './nodes/switch-group.vue'
 import NodeOneOfSelect from './nodes/one-of-select.vue'
 import NodeTabs from './nodes/tabs.vue'
 import NodeVerticalTabs from './nodes/vertical-tabs.vue'
@@ -27,6 +31,7 @@ import NodeExpansionPanels from './nodes/expansion-panels.vue'
 import NodeStepper from './nodes/stepper.vue'
 import NodeList from './nodes/list.vue'
 import NodeFileInput from './nodes/file-input.vue'
+import NodeCard from './nodes/card.vue'
 
 /** @type {Record<string, import('vue').Component>} */
 const nodeComponents = {
@@ -38,10 +43,14 @@ const nodeComponents = {
   'number-field': NodeNumberField,
   slider: NodeSlider,
   'date-picker': NodeDatePicker,
+  'time-picker': NodeTimePicker,
   'date-time-picker': NodeDateTimePicker,
   'color-picker': NodeColorPicker,
   select: NodeSelect,
   autocomplete: NodeAutocomplete,
+  'radio-group': NodeRadioGroup,
+  'checkbox-group': NodeCheckboxGroup,
+  'switch-group': NodeSwitchGroup,
   'one-of-select': NodeOneOfSelect,
   tabs: NodeTabs,
   'vertical-tabs': NodeVerticalTabs,
@@ -50,7 +59,8 @@ const nodeComponents = {
   list: NodeList,
   combobox: NodeCombobox,
   'number-combobox': NodeNumberCombobox,
-  'file-input': NodeFileInput
+  'file-input': NodeFileInput,
+  card: NodeCard
 }
 
 const props = defineProps({

package/src/composables/use-comp-defaults.js

@@ -0,0 +1,19 @@
+import { inject, computed } from 'vue'
+
+// inspired by https://github.com/vuetifyjs/vuetify/blob/27b4b1e52060b6bee13a290a4829f935f1bd9c05/packages/vuetify/src/composables/defaults.ts#L92
+/**
+ *
+ * @param {string} name
+ * @param {Record<string, any> | null} [localDefaults]
+ * @returns {import('vue').ComputedRef<Record<string, any>>}
+ */
+export default function useCompDefaultProps (name, localDefaults = null) {
+  /** @type {import('vue').Ref<import('vuetify').DefaultsInstance> | undefined} */
+  const defaults = inject(Symbol.for('vuetify:defaults'))
+  if (!defaults) throw new Error('[vjsf] Could not find defaults instance')
+  return computed(() => {
+    const componentDefaults = defaults.value?.[name] ?? {}
+    if (!localDefaults) return componentDefaults
+    return { ...componentDefaults, ...localDefaults }
+  })
+}

package/src/composables/use-dnd.js

@@ -1,5 +1,5 @@
 import { shallowRef, ref, computed } from 'vue'
-import { moveArrayItem } from '../utils/index.js'
+import { moveArrayItem } from '../utils/arrays.js'
 
 /**
  * @template T
@@ -42,6 +42,7 @@ export default function useDnd (array, callback) {
       dragging.value = itemIndex
     },
     onDragend: () => {
+      hovered.value = itemIndex
       dragging.value = -1
       callback()
     }

package/src/composables/use-get-items.js

@@ -0,0 +1,53 @@
+import { watch, shallowRef, ref, computed } from 'vue'
+
+/**
+ * @param {import('vue').Ref<import('../types.js').VjsfNode>} nodeRef
+ * @param {import('../types.js').VjsfStatefulLayout} statefulLayout
+ */
+export default function (nodeRef, statefulLayout) {
+  /** @type import('vue').Ref<import('@json-layout/vocabulary').SelectItems> */
+  const items = shallowRef([])
+  /** @type import('vue').Ref<boolean> */
+  const loading = ref(false)
+  /** @type import('vue').Ref<string> */
+  const search = ref('')
+
+  const hasItems = computed(() => {
+    return !!(nodeRef.value.layout.items || nodeRef.value.layout.getItems)
+  })
+
+  const fetchItems = async () => {
+    loading.value = true
+    items.value = await statefulLayout.getItems(nodeRef.value, search.value)
+    loading.value = false
+  }
+
+  watch(() => nodeRef.value.itemsCacheKey, (newValue, oldValue) => {
+    if (newValue === oldValue) return
+    fetchItems()
+  }, { immediate: true })
+
+  watch(search, () => {
+    fetchItems()
+  })
+
+  /**
+   * @param {any} selectedItem
+   * @param {any} itemValue
+   */
+  const prepareSelectedItem = (selectedItem, itemValue) => {
+    let item = selectedItem
+    // item and value are the same when the selection is not found in items list
+    if (selectedItem === itemValue) {
+      try {
+        item = statefulLayout.prepareSelectItem(nodeRef.value, selectedItem)
+        if (item.value === undefined) item.value = itemValue
+      } catch (e) {
+        item = { value: itemValue }
+      }
+    }
+    return item
+  }
+
+  return { hasItems, items, loading, search, prepareSelectedItem }
+}

package/src/composables/use-node.js

@@ -0,0 +1,136 @@
+import NodeSlot from '../components/fragments/node-slot.vue'
+import { computed, camelize, watch, ref, h } from 'vue'
+
+// NOTE: in a previous draft we used to have this in options,
+// but it was not very flexible and not very easy to use, user defined props should be managed
+// by a combination of layout.props, layout.getProps and vuetify defaults provider (https://vuetifyjs.com/en/components/defaults-providers/#usage)
+const defaultProps = {
+  fieldPropsCompact: {
+    hideDetails: 'auto'
+  },
+  fieldPropsReadOnly: { hideDetails: 'auto', variant: 'plain' },
+  fieldPropsSummary: { hideDetails: true }
+}
+
+/**
+ * @param {(Record<string, any> | undefined)[]} propsLevels
+ * @returns {Record<string, any> & {class: string[]}}
+ */
+export function mergePropsLevels (propsLevels) {
+  /** @type {Record<string, any> & {class: string[]}} */
+  const fullProps = { class: [] }
+  for (const propsLevel of propsLevels) {
+    if (propsLevel) {
+      for (const key of Object.keys(propsLevel)) {
+        if (key === 'class') {
+          // a small convention for merging/overwriting classes:
+          // a class defined as a simple string overwrites the previous ones
+          // a class defined as an array is merged with the previous ones
+          if (Array.isArray(propsLevel.class)) fullProps.class = fullProps.class.concat(propsLevel.class)
+          else fullProps.class = [propsLevel.class]
+        } else {
+          fullProps[camelize(key)] = propsLevel[key]
+        }
+      }
+    }
+  }
+  return fullProps
+}
+
+/**
+ * @param {import('vue').Ref<import('../types.js').VjsfNode>} nodeRef
+ * @param {import('../types.js').VjsfStatefulLayout} statefulLayout
+ * @param {{isMainComp?: boolean, bindData?: boolean, layoutPropsMap?: (string | [string, string])[]}} [opts]
+ */
+export default function (nodeRef, statefulLayout, opts = {}) {
+  if (opts.bindData === undefined) opts.bindData = true
+  if (opts.isMainComp === undefined) opts.isMainComp = true
+
+  // we access vjsfNode properties through computeds so that the parts without mutations do not trigger reactivity
+  // this is to leverage the immutability provided by immer in json-layout
+  const options = computed(() => nodeRef.value.options)
+  const skeleton = computed(() => nodeRef.value.skeleton)
+  const layout = computed(() => nodeRef.value.layout)
+  const data = computed(() => nodeRef.value.data)
+  const error = computed(() => nodeRef.value.error)
+  const validated = computed(() => nodeRef.value.validated)
+  const nodeProps = computed(() => nodeRef.value.props)
+  const autofocus = computed(() => nodeRef.value.autofocus)
+  const children = computed(() => nodeRef.value.children)
+
+  const preparedData = computed(() => {
+    return (typeof data.value === 'string' && layout.value.separator) ? data.value.split(/** @type {string} */(layout.value.separator)) : data.value
+  })
+
+  // modelValue is not a straight computed, but is separated in a ref because the change in json-layout can be delayed
+  // depending on the debounceInputMs option
+  const localData = ref()
+  watch(preparedData, (data) => { localData.value = data }, { immediate: true })
+
+  // calculate the props of a field/input type component (text fields, etc)
+  // isMainComp is used to determine if this input component is also the main rendered component or if is mostly a wrapper (date picker, etc.)
+  const inputProps = computed(() => {
+    /** @type {(Record<string, any> | undefined)[]} */
+    const propsLevels = []
+    if (options.value.density === 'compact') propsLevels.push(defaultProps.fieldPropsCompact)
+    if (options.value.readOnly) propsLevels.push(defaultProps.fieldPropsReadOnly)
+    if (opts.isMainComp && nodeProps.value) propsLevels.push(nodeProps.value)
+
+    const fullProps = mergePropsLevels(propsLevels)
+
+    fullProps.label = layout.value.label
+    if (error.value && validated.value) {
+      fullProps.errorMessages = error.value
+    }
+    if (options.value.readOnly) {
+      fullProps.disabled = true
+      fullProps.class.push('vjsf-input--readonly')
+    }
+    if (autofocus.value) {
+      fullProps.class.push('vjsf-input--autofocus')
+    }
+
+    if (opts.layoutPropsMap) {
+      for (const propMap of opts.layoutPropsMap) {
+        if (typeof propMap === 'string') {
+          if (propMap in layout.value) fullProps[propMap] = layout.value[propMap]
+        } else {
+          if (propMap[1] in layout.value) fullProps[propMap[0]] = layout.value[propMap[1]]
+        }
+      }
+    }
+
+    if (opts.bindData) {
+      fullProps['onUpdate:modelValue'] = (/** @type string */value) => {
+        const newData = (Array.isArray(value) && layout.value.separator) ? value.join(/** @type {string} */(layout.value.separator)) : value
+        localData.value = newData
+        return statefulLayout.input(nodeRef.value, newData)
+      }
+    }
+    fullProps.onBlur = () => statefulLayout.blur(nodeRef.value)
+
+    return fullProps
+  })
+
+  // calculate the props of components that are not of the field category
+  const compProps = computed(() => {
+    /** @type {(Record<string, any> | undefined)[]} */
+    const propsLevels = [{ density: options.value.density }]
+    if (opts.isMainComp) propsLevels.push(layout.value.props)
+    const fullProps = mergePropsLevels(propsLevels)
+    return fullProps
+  })
+
+  // calculate the slots of components
+  const compSlots = computed(() => {
+    if (!layout.value.slots) return {}
+    /** @type {Record<string, any>} */
+    const slots = {}
+    for (const [key, layoutSlot] of Object.entries(layout.value.slots)) {
+      slots[key] = () => h(NodeSlot, { layoutSlot, node: nodeRef.value, statefulLayout })
+    }
+    return slots
+  })
+
+  return { localData, inputProps, compProps, compSlots, options, skeleton, layout, data, children }
+}

package/src/composables/use-select-node.js

@@ -0,0 +1,67 @@
+import { computed, h } from 'vue'
+import useField from './use-node.js'
+import useGetItems from './use-get-items.js'
+import SelectItem from '../components/fragments/select-item.vue'
+import SelectSelection from '../components/fragments/select-selection.vue'
+
+/**
+ * specialized use of useFieldProps shared between select and autocomplete components
+ * @param {import('vue').Ref<import('../types.js').VjsfSelectNode>} nodeRef
+ * @param {import('../types.js').VjsfStatefulLayout} statefulLayout
+ */
+export default function (nodeRef, statefulLayout) {
+  const layout = computed(() => nodeRef.value.layout)
+
+  const { inputProps, options, skeleton, localData, compSlots } = useField(nodeRef, statefulLayout, { layoutPropsMap: ['multiple'], bindData: false })
+  const getItems = useGetItems(nodeRef, statefulLayout)
+
+  const selectProps = computed(() => {
+    const props = { ...inputProps.value }
+
+    if (options.value.readOnly) props.menuProps = { modelValue: false }
+    props.clearable = props.clearable ?? !skeleton.value.required
+    props.valueComparator = (/** @type {any} */a, /** @type {any} */b) => {
+      const aKey = typeof a === 'object' ? statefulLayout.prepareSelectItem(nodeRef.value, a).key : a
+      const bKey = typeof b === 'object' ? statefulLayout.prepareSelectItem(nodeRef.value, b).key : b
+      return aKey === bKey
+    }
+    props['onUpdate:modelValue'] = (/** @type string */value) => {
+      // fix some weird case where vuetify only keep the title property of an unknown item
+      if (Array.isArray(value) && Array.isArray(nodeRef.value.data)) {
+        for (let i = 0; i < nodeRef.value.data.length; i++) {
+          if (typeof nodeRef.value.data[i] === 'object' && typeof value[i] === 'string') {
+            value[i] = nodeRef.value.data[i]
+          }
+        }
+      }
+
+      const newData = (Array.isArray(value) && nodeRef.value.layout.separator) ? value.join(/** @type {string} */(nodeRef.value.layout.separator)) : value
+      localData.value = newData
+      return statefulLayout.input(nodeRef.value, newData)
+    }
+    props.onBlur = () => statefulLayout.blur(nodeRef.value)
+    return props
+  })
+
+  // shared between select and autocomplete components
+  const selectSlots = computed(() => {
+    const slots = { ...compSlots.value }
+    if (!slots.item) {
+      slots.item = (/** @type {any} */ context) => h(SelectItem, {
+        multiple: layout.value.multiple,
+        itemProps: context.props,
+        item: context.item.raw
+      })
+    }
+    if (!slots.selection) {
+      slots.selection = (/** @type {any} */ context) => h(SelectSelection, {
+        multiple: layout.value.multiple,
+        last: layout.value.multiple && context.index === nodeRef.value.data.length - 1,
+        item: getItems.prepareSelectedItem(context.item.raw, context.item.value)
+      })
+    }
+    return slots
+  })
+
+  return { localData, inputProps, selectProps, compSlots, selectSlots, getItems }
+}

package/src/composables/use-vjsf.js

@@ -1,9 +1,12 @@
+import { useDefaults } from 'vuetify'
 import { StatefulLayout, produceCompileOptions } from '@json-layout/core'
-import { inject, toRaw, shallowRef, computed, ref, watch, useSlots } from 'vue'
+import { inject, toRaw, shallowRef, computed, ref, watch, useSlots, getCurrentInstance } from 'vue'
 import { useElementSize } from '@vueuse/core'
-import { getFullOptions } from '../components/options.js'
-import { registeredNodeComponents } from '../utils/index.js'
+import { getFullOptions } from '../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)
@@ -31,6 +34,11 @@ export const emits = {
 export const useVjsf = (schema, modelValue, options, nodeComponents, emit, compile, precompiledLayout) => {
   const el = ref(null)
 
+  useDefaults({}, 'Vjsf')
+  /** @type {import('vuetify').DefaultsInstance} */
+  const defaults = (inject(Symbol.for('vuetify:defaults')))?.value
+  debug('provided defaults', defaults)
+
   // TODO: apply a debounce to width ?
   const { width } = useElementSize(el)
 
@@ -40,22 +48,60 @@ export const useVjsf = (schema, modelValue, options, nodeComponents, emit, compi
   const stateTree = shallowRef(null)
 
   // cf https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/form.ts
-  const form = inject(Symbol.for('vuetify:form'))
+  /** @type {any | null} */
+  const form = inject(Symbol.for('vuetify:form'), null)
   if (form) {
     form.register({
-      id: 'vjsf', // TODO: a unique random id ?
+      id: `vjsf-${Math.random().toString(36).substring(2, 9)}`,
       validate: () => {
         statefulLayout.value?.validate()
-        return statefulLayout.value?.errors
+        return statefulLayout.value?.errors || []
       },
       reset: () => statefulLayout.value?.resetValidation(), // TODO: also empty the data ?
-      resetValidation: () => statefulLayout.value?.resetValidation()
+      resetValidation: () => statefulLayout.value?.resetValidation(),
+      vm: getCurrentInstance()
     })
   }
 
   const slots = useSlots()
 
-  const fullOptions = computed(() => getFullOptions(options.value, form, width.value, slots, { ...nodeComponents, ...toRaw(registeredNodeComponents.value) }))
+  /* Callbacks from json layout stateful layout */
+  /**
+   * @param {import('@json-layout/core').StatefulLayout} 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, defaults?.global, 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>} */
@@ -63,7 +109,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(() => {
@@ -73,71 +122,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.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()
-      }
-    })
   }
 
   // case where options are updated from outside
   watch(fullOptions, (newOptions) => {
+    debug('watch fullOptions', fullOptions)
     if (statefulLayout.value) {
-      statefulLayout.value.options = newOptions
+      debug('  -> update statefulLayout options')
+      statefulLayout.value.options = toRaw(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/src/index.js

@@ -1,4 +1,7 @@
 import Vjsf from './components/vjsf.vue'
-import { defaultOptions } from './components/options.js'
-export { Vjsf, defaultOptions }
+import { defaultOptions, defaultIcons } from './options.js'
+export { Vjsf, defaultOptions, defaultIcons }
 export default Vjsf
+
+/** @typedef {import('./types.js').PartialVjsfOptions} Options */
+/** @typedef {import('./types.js').PartialVjsfCompileOptions} CompileOptions */