@koumoul/vjsf 3.0.0-alpha.1 → 3.0.0-alpha.2

package/src/components/nodes/stepper.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { VStepper, VStepperHeader, VStepperItem, VContainer } from 'vuetify/components'
+import { isSection } from '@json-layout/core'
+import Node from '../node.vue'
+import SectionHeader from '../fragments/section-header.vue'
+
+const props = defineProps({
+  modelValue: {
+    /** @type import('vue').PropType<import('../types.js').VjsfStepperNode> */
+    type: Object,
+    required: true
+  },
+  statefulLayout: {
+    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    type: Object,
+    required: true
+  }
+})
+
+const step = ref(0)
+
+const firstErrorIndex = computed(() => {
+  const index = props.modelValue.children.findIndex(child => child.validated && !!(child.error || child.childError))
+  return index === -1 ? props.modelValue.children.length : index
+})
+
+const goNext = () => {
+  console.log(props.statefulLayout.validationState)
+  const child = props.modelValue.children[step.value]
+  props.statefulLayout.validateNodeRecurse(child)
+  console.log(props.statefulLayout.validationState)
+  if (!(child.error || child.childError)) step.value++
+}
+</script>
+
+<template>
+  <section-header :node="modelValue" />
+  <v-stepper v-model="step">
+    <v-stepper-header>
+      <template
+        v-for="(child, i) of modelValue.children"
+        :key="child.key"
+      >
+        <v-stepper-item
+          :value="i"
+          :title="/** @type {string | undefined} */(child.layout.title ?? child.layout.label)"
+          :error="child.validated && !!(child.error || child.childError)"
+          :complete="child.validated && !(child.error || child.childError)"
+          :editable="i <= firstErrorIndex"
+        />
+        <v-divider />
+      </template>
+    </v-stepper-header>
+    <v-stepper-window>
+      <v-stepper-window-item
+        v-for="(child) of modelValue.children"
+        :key="child.key"
+      >
+        <v-container
+          fluid
+          class="pa-0"
+        >
+          <v-row>
+            <node
+              v-for="grandChild of isSection(child) ? child.children : [child]"
+              :key="grandChild.fullKey"
+              :model-value="/** @type import('../types.js').VjsfNode */(grandChild)"
+              :stateful-layout="statefulLayout"
+            />
+          </v-row>
+        </v-container>
+      </v-stepper-window-item>
+    </v-stepper-window>
+    <v-stepper-actions>
+      <template #prev>
+        <v-btn
+          v-if="step > 0"
+          variant="text"
+          @click="step--"
+        >
+          Back
+        </v-btn>
+      </template>
+      <template #next>
+        <v-spacer />
+        <v-btn
+          v-if="step < modelValue.children.length - 1"
+          variant="flat"
+          color="primary"
+          @click="goNext"
+        >
+          Next
+        </v-btn>
+      </template>
+    </v-stepper-actions>
+  </v-stepper>
+</template>

package/src/components/nodes/text-field.vue

@@ -18,7 +18,7 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const fieldProps = computed(() => getInputProps(props.modelValue, props.statefulLayout))
+    const fieldProps = computed(() => getInputProps(props.modelValue, props.statefulLayout, ['placeholder']))
     const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
 
     // @ts-ignore

package/src/components/nodes/textarea.vue

@@ -18,7 +18,7 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const fieldProps = computed(() => getInputProps(props.modelValue, props.statefulLayout))
+    const fieldProps = computed(() => getInputProps(props.modelValue, props.statefulLayout, ['placeholder']))
     const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
 
     // @ts-ignore

package/src/components/options.js

@@ -21,5 +21,26 @@ export const defaultOptions = {
   checkboxPropsReadOnly: {},
   switchProps: { hideDetails: 'auto' },
   switchPropsReadOnly: {},
-  errorAlertProps: { type: 'error', variant: 'tonal' }
+  errorAlertProps: { type: 'error', variant: 'tonal' },
+  easyMDEOptions: {}
+}
+
+/**
+ *
+ * @param {Partial<import("./types.js").VjsfOptions>} options
+ * @param {any} form
+ * @param {number} width
+ * @param {import("vue").Slots} slots
+ * @returns
+ */
+export const getFullOptions = (options, form, width, slots) => {
+  const fullOptions = {
+    ...defaultOptions,
+    readOnly: !!(form && (form.isDisabled.value || form.isReadonly.value)),
+    ...options,
+    context: options.context ? JSON.parse(JSON.stringify(options.context)) : {},
+    width: Math.round(width ?? 0),
+    vjsfSlots: { ...slots }
+  }
+  return /** @type import('./types.js').VjsfOptions */ (fullOptions)
 }

package/src/components/types.ts

@@ -17,6 +17,7 @@ import {
   TextFieldNode,
   TextareaNode,
   VerticalTabsNode,
+  StepperNode,
   ComboboxNode,
   CompileOptions
 } from '@json-layout/core'
@@ -39,6 +40,7 @@ export type VjsfOptions = StatefulLayoutOptions & CompileOptions & {
   switchPropsReadOnly: Record<string, unknown>,
   errorAlertProps: Record<string, unknown>,
   vjsfSlots: Record<string, () => unknown>,
+  easyMDEOptions: Record<string, unknown>,
 }
 
 export type PartialVjsfOptions = Partial<Omit<VjsfOptions, 'width'>>
@@ -60,4 +62,6 @@ export type VjsfSwitchNode = Omit<SwitchNode, 'options'> & {options: VjsfOptions
 export type VjsfTextFieldNode = Omit<TextFieldNode, 'options'> & {options: VjsfOptions}
 export type VjsfTextareaNode = Omit<TextareaNode, 'options'> & {options: VjsfOptions}
 export type VjsfVerticalTabsNode = Omit<VerticalTabsNode, 'options'> & {options: VjsfOptions}
+export type VjsfStepperNode = Omit<StepperNode, 'options'> & {options: VjsfOptions}
+
 export type VjsfComboboxNode = Omit<ComboboxNode, 'options'> & {options: VjsfOptions}

package/src/components/vjsf.vue

@@ -1,8 +1,10 @@
 <script setup>
-import { ref, shallowRef, computed, getCurrentInstance, watch, useSlots, inject, toRaw } from 'vue'
-import { useElementSize } from '@vueuse/core'
-import { StatefulLayout, compile } from '@json-layout/core'
+import { computed, getCurrentInstance } from 'vue'
+
+import { compile } from '@json-layout/core'
 import Tree from './tree.vue'
+import { useVjsf, emits } from '../composables/use-vjsf.js'
+import '../styles/vjsf.css'
 
 import NodeSection from './nodes/section.vue'
 import NodeTextField from './nodes/text-field.vue'
@@ -22,8 +24,9 @@ import NodeVerticalTabs from './nodes/vertical-tabs.vue'
 import NodeCombobox from './nodes/combobox.vue'
 import NodeNumberCombobox from './nodes/number-combobox.vue'
 import NodeExpansionPanels from './nodes/expansion-panels.vue'
+import NodeStepper from './nodes/stepper.vue'
 import NodeList from './nodes/list.vue'
-import { defaultOptions } from './options.js'
+import NodeMarkdown from './nodes/markdown.vue'
 
 const comps = {
   section: NodeSection,
@@ -42,9 +45,11 @@ const comps = {
   tabs: NodeTabs,
   'vertical-tabs': NodeVerticalTabs,
   'expansion-panels': NodeExpansionPanels,
+  stepper: NodeStepper,
   list: NodeList,
   combobox: NodeCombobox,
-  'number-combobox': NodeNumberCombobox
+  'number-combobox': NodeNumberCombobox,
+  markdown: NodeMarkdown
 }
 
 const instance = getCurrentInstance()
@@ -65,7 +70,7 @@ const props = defineProps({
     default: null
   },
   modelValue: {
-    type: [Object, String, Number, Boolean],
+    type: null,
     default: null
   },
   options: {
@@ -75,95 +80,16 @@ const props = defineProps({
   }
 })
 
-// const emit = defineEmits(['update:modelValue', 'update:state'])
-const emit = defineEmits({
-  /**
-   * @arg {any} data
-  */
-  'update:modelValue': (data) => true,
-  /**
-   * @arg {StatefulLayout} state
-  */
-  'update:state': (state) => true
-})
-
-/** @type import('vue').ShallowRef<StatefulLayout | null> */
-const statefulLayout = shallowRef(null)
-/** @type import('vue').ShallowRef<import('@json-layout/core').StateTree | null> */
-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'))
-if (form) {
-  form.register({
-    id: 'vjsf', // TODO: a unique random id ?
-    validate: () => statefulLayout.value?.validate(),
-    reset: () => statefulLayout.value?.resetValidation(), // TODO: also empty the data ?
-    resetValidation: () => statefulLayout.value?.resetValidation()
-  })
-}
-
-const el = ref(null)
-const { width } = useElementSize(el)
-
-const slots = useSlots()
-
-const fullOptions = computed(() => {
-  const options = {
-    ...defaultOptions,
-    readOnly: !!(form && (form.isDisabled.value || form.isReadonly.value)),
-    ...props.options,
-    context: props.options.context ? JSON.parse(JSON.stringify(props.options.context)) : {},
-    width: Math.round(width.value ?? 0),
-    vjsfSlots: { ...slots }
-  }
-  return /** @type import('./types.js').VjsfOptions */ (options)
-})
-
-const compiledLayout = computed(() => {
-  if (props.precompiledLayout) return props.precompiledLayout
-  return compile(props.schema, fullOptions.value)
-})
-
-const onStatefulLayoutUpdate = () => {
-  if (!statefulLayout.value) return
-  stateTree.value = statefulLayout.value.stateTree
-  emit('update:modelValue', statefulLayout.value.data)
-  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 initStatefulLayout = () => {
-  if (!width.value) return
-  const _statefulLayout = new StatefulLayout(toRaw(compiledLayout.value), toRaw(compiledLayout.value.skeletonTree), toRaw(fullOptions.value), toRaw(props.modelValue))
-  statefulLayout.value = _statefulLayout
-  onStatefulLayoutUpdate()
-  _statefulLayout.events.on('update', () => {
-    onStatefulLayoutUpdate()
-  })
-  emit('update:state', _statefulLayout)
-}
-
-watch(fullOptions, (newOptions) => {
-  if (statefulLayout.value) {
-    statefulLayout.value.options = newOptions
-  } else {
-    initStatefulLayout()
-  }
-})
-
-// case where data is updated from outside
-watch(() => props.modelValue, (newData) => {
-  if (statefulLayout.value && statefulLayout.value.data !== newData) statefulLayout.value.data = newData
-})
+const emit = defineEmits(emits)
 
-// case where schema is updated from outside
-watch(compiledLayout, (newCompiledLayout) => initStatefulLayout())
+const { el, statefulLayout, stateTree } = useVjsf(
+  computed(() => props.schema),
+  computed(() => props.modelValue),
+  computed(() => props.options),
+  emit,
+  compile,
+  props.precompiledLayout
+)
 
 </script>
 
@@ -182,14 +108,5 @@ watch(compiledLayout, (newCompiledLayout) => initStatefulLayout())
 </template>
 
 <style lang="css">
-/* override vuetify styles to manage readOnly fields more usable than the default disabled fields */
-.vjsf-input--readonly.v-input--disabled.v-text-field  .v-field--disabled input {
-  pointer-events: auto;
-}
-.vjsf-input--readonly.v-input--disabled .v-field--disabled,
-.vjsf-input--readonly.v-input--disabled .v-input__details,
-.vjsf-input--readonly.v-input--disabled .v-input__append,
-.vjsf-input--readonly.v-input--disabled .v-input__prepend {
-  opacity: inherit;
-}
+/* nothing here, use ../styles/vjsf.css */
 </style>

package/src/composables/use-dnd.js

@@ -0,0 +1,54 @@
+import { shallowRef, ref, computed } from 'vue'
+import { moveArrayItem } from '../utils/arrays.js'
+
+/**
+ * @template T
+ * @param {T[]} array
+ * @param {() => void} callback
+ * @returns
+ */
+export default function useDnd (array, callback) {
+  const activeDnd = computed(() => {
+    // cf https://ultimatecourses.com/blog/feature-detect-javascript-drag-drop-api
+    if (!('draggable' in document.createElement('div'))) return false
+    // cf https://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript
+    if (window.matchMedia('(pointer: coarse)').matches) return false
+    return true
+  })
+
+  const sortableArray = shallowRef(array)
+
+  const draggable = ref(-1)
+  const dragging = ref(-1)
+
+  const itemBind = (/** @type {number} */itemIndex) => ({
+    onDragstart: () => {
+      dragging.value = itemIndex
+    },
+    onDragover: () => {
+      sortableArray.value = moveArrayItem(sortableArray.value, dragging.value, itemIndex)
+      dragging.value = itemIndex
+    },
+    onDragend: () => {
+      dragging.value = -1
+      callback()
+    }
+  })
+
+  const handleBind = (/** @type {number} */itemIndex) => ({
+    onMouseover () {
+      draggable.value = itemIndex
+    },
+    onMouseout () {
+      draggable.value = -1
+    }
+  })
+
+  return {
+    activeDnd,
+    sortableArray,
+    draggable,
+    itemBind,
+    handleBind
+  }
+}

package/src/composables/use-vjsf.js

@@ -0,0 +1,115 @@
+import { StatefulLayout } from '@json-layout/core'
+import { inject, toRaw, shallowRef, computed, ref, watch, useSlots } from 'vue'
+import { useElementSize } from '@vueuse/core'
+import { getFullOptions } from '../components/options.js'
+
+export const emits = {
+  /**
+   * @arg {any} data
+  */
+  'update:modelValue': (data) => true,
+  /**
+   * @arg {StatefulLayout} state
+  */
+  'update:state': (state) => true
+}
+
+/**
+ * @param {import('vue').Ref<Object>} schema
+ * @param {import('vue').Ref<any>} modelValue
+ * @param {import('vue').Ref<import("../components/types.js").PartialVjsfOptions>} options
+ * @param {any} emit
+ * @param {typeof import('@json-layout/core').compile} compile
+ * @param {import('@json-layout/core').CompiledLayout} [precompiledLayout]
+ */
+export const useVjsf = (schema, modelValue, options, emit, compile, precompiledLayout) => {
+  const el = ref(null)
+  const { width } = useElementSize(el)
+
+  /** @type import('vue').ShallowRef<StatefulLayout | null> */
+  const statefulLayout = shallowRef(null)
+  /** @type import('vue').ShallowRef<import('@json-layout/core').StateTree | null> */
+  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'))
+  if (form) {
+    form.register({
+      id: 'vjsf', // TODO: a unique random id ?
+      validate: () => {
+        statefulLayout.value?.validate()
+        return statefulLayout.value?.errors
+      },
+      reset: () => statefulLayout.value?.resetValidation(), // TODO: also empty the data ?
+      resetValidation: () => statefulLayout.value?.resetValidation()
+    })
+  }
+
+  const slots = useSlots()
+
+  const fullOptions = computed(() => getFullOptions(options.value, form, width.value, slots))
+
+  const compiledLayout = computed(() => {
+    if (precompiledLayout) return precompiledLayout
+    const compiledLayout = compile(schema.value, fullOptions.value)
+    return compiledLayout
+  })
+
+  const onStatefulLayoutUpdate = () => {
+    if (!statefulLayout.value) return
+    stateTree.value = statefulLayout.value.stateTree
+    emit('update:modelValue', statefulLayout.value.data)
+    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 initStatefulLayout = () => {
+    if (!width.value) return
+    const _statefulLayout = new StatefulLayout(
+      toRaw(compiledLayout.value),
+      toRaw(compiledLayout.value.skeletonTree),
+      toRaw(fullOptions.value),
+      toRaw(modelValue.value)
+    )
+    statefulLayout.value = _statefulLayout
+    onStatefulLayoutUpdate()
+    _statefulLayout.events.on('update', () => {
+      onStatefulLayoutUpdate()
+    })
+    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')
+        if (autofocusInputElement) autofocusInputElement.focus()
+      }
+    })
+  }
+
+  watch(fullOptions, (newOptions) => {
+    if (statefulLayout.value) {
+      statefulLayout.value.options = newOptions
+    } else {
+      initStatefulLayout()
+    }
+  })
+
+  // case where data is updated from outside
+  watch(modelValue, (newData) => {
+    if (statefulLayout.value && statefulLayout.value.data !== newData) statefulLayout.value.data = toRaw(newData)
+  })
+
+  // case where schema is updated from outside
+  watch(compiledLayout, (newCompiledLayout) => {
+    initStatefulLayout()
+  }, { immediate: true })
+
+  return { el, statefulLayout, stateTree }
+}

package/src/styles/vjsf.css

@@ -0,0 +1,10 @@
+/* override vuetify styles to manage readOnly fields more usable than the default disabled fields */
+.vjsf-input--readonly.v-input--disabled.v-text-field  .v-field--disabled input {
+  pointer-events: auto;
+}
+.vjsf-input--readonly.v-input--disabled .v-field--disabled,
+.vjsf-input--readonly.v-input--disabled .v-input__details,
+.vjsf-input--readonly.v-input--disabled .v-input__append,
+.vjsf-input--readonly.v-input--disabled .v-input__prepend {
+  opacity: inherit;
+}

package/src/utils/arrays.js

@@ -0,0 +1,15 @@
+/**
+ * @template T
+ * @param {T[]} array
+ * @param {number} fromIndex
+ * @param {number} toIndex
+ * @return {T[]}
+ */
+export function moveArrayItem (array, fromIndex, toIndex) {
+  if (fromIndex === toIndex || fromIndex === -1 || toIndex === -1) return array
+  const newArray = [...array]
+  const element = newArray[fromIndex]
+  newArray.splice(fromIndex, 1)
+  newArray.splice(toIndex, 0, element)
+  return newArray
+}

package/src/utils/props.js

@@ -3,15 +3,23 @@ import { camelize } from 'vue'
 
 /**
  * @param {(Record<string, any> | undefined)[]} propsLevels
- * @returns Record<string, any>
+ * @returns {Record<string, any> & {class: string[]}}
  */
 export function mergePropsLevels (propsLevels) {
-  /** @type Record<string, any> */
-  const fullProps = {}
+  /** @type {Record<string, any> & {class: string[]}} */
+  const fullProps = { class: [] }
   for (const propsLevel of propsLevels) {
     if (propsLevel) {
       for (const key of Object.keys(propsLevel)) {
-        fullProps[camelize(key)] = propsLevel[key]
+        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]
+        }
       }
     }
   }
@@ -49,7 +57,10 @@ export function getInputProps (node, statefulLayout, layoutPropsMap, isMainComp
   fullProps.modelValue = node.data
   if (node.options.readOnly) {
     fullProps.disabled = true
-    fullProps.class = 'vjsf-input--readonly'
+    fullProps.class.push('vjsf-input--readonly')
+  }
+  if (node.autofocus) {
+    fullProps.class.push('vjsf-input--autofocus')
   }
 
   if (layoutPropsMap) {

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;
+    item: import("../../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem;
     $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 item?: import("../../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

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

@@ -1,10 +1,10 @@
 declare const _default: import("vue").DefineComponent<{}, {
     multiple: boolean;
-    item: import("../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem;
+    item: import("../../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem;
     last: boolean;
     $props: {
         readonly multiple?: boolean | undefined;
-        readonly item?: import("../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem | undefined;
+        readonly item?: import("../../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem | undefined;
         readonly last?: boolean | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;

package/types/components/nodes/markdown.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/markdown.vue.js"],"names":[],"mappings":";;QAUM,2EAA2E;cAAjE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,aAAa,EAAE,gBAAgB,CAAC;;;;QAKxE,+EAA+E;cAArE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,mBAAmB,EAAE,cAAc,CAAC;;;;;;;QAL5E,2EAA2E;cAAjE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,aAAa,EAAE,gBAAgB,CAAC;;;;QAKxE,+EAA+E;cAArE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,mBAAmB,EAAE,cAAc,CAAC"}
+{"version":3,"file":"markdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/markdown.vue.js"],"names":[],"mappings":";;QAYM,2EAA2E;cAAjE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,aAAa,EAAE,gBAAgB,CAAC;;;;QAKxE,+EAA+E;cAArE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,mBAAmB,EAAE,cAAc,CAAC;;;;;;;QAL5E,2EAA2E;cAAjE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,aAAa,EAAE,gBAAgB,CAAC;;;;QAKxE,+EAA+E;cAArE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,mBAAmB,EAAE,cAAc,CAAC"}

package/types/components/nodes/stepper.vue.d.ts

@@ -0,0 +1,10 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    modelValue: import("../types.js").VjsfStepperNode;
+    statefulLayout: import("@json-layout/core").StatefulLayout;
+    $props: {
+        readonly modelValue?: import("../types.js").VjsfStepperNode | undefined;
+        readonly statefulLayout?: import("@json-layout/core").StatefulLayout | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;
+//# sourceMappingURL=stepper.vue.d.ts.map

package/types/components/nodes/stepper.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.vue.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/stepper.vue.js"],"names":[],"mappings":""}

package/types/components/options.d.ts

@@ -1,3 +1,4 @@
 /** @type import("./types.js").PartialVjsfOptions */
 export const defaultOptions: import("./types.js").PartialVjsfOptions;
+export function getFullOptions(options: Partial<import("./types.js").VjsfOptions>, form: any, width: number, slots: import("vue").Slots): 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,oDAAoD;AACpD,6BADU,OAAO,YAAY,EAAE,kBAAkB,CAwBhD"}
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../src/components/options.js"],"names":[],"mappings":"AAAA,oDAAoD;AACpD,6BADU,OAAO,YAAY,EAAE,kBAAkB,CAyBhD;AAUM,wCANI,QAAQ,OAAO,YAAY,EAAE,WAAW,CAAC,QACzC,GAAG,SACH,MAAM,SACN,OAAO,KAAK,EAAE,KAAK,oCAa7B"}

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

@@ -1,8 +1,8 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    modelValue: import("../../node_modules/@json-layout/core/types/state/types.js").StateTree;
+    modelValue: import("../../../node_modules/@json-layout/core/types/state/types.js").StateTree;
     statefulLayout: import("@json-layout/core").StatefulLayout;
     $props: {
-        readonly modelValue?: import("../../node_modules/@json-layout/core/types/state/types.js").StateTree | undefined;
+        readonly modelValue?: import("../../../node_modules/@json-layout/core/types/state/types.js").StateTree | undefined;
         readonly statefulLayout?: import("@json-layout/core").StatefulLayout | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;