@koumoul/vjsf 3.0.0-alpha.0 → 3.0.0-alpha.10

package/src/composables/use-vjsf.js

@@ -0,0 +1,122 @@
+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'
+import { registeredNodeComponents } from '../utils/index.js'
+
+export const emits = {
+  /**
+   * @arg {any} data
+  */
+  'update:modelValue': (data) => true,
+  /**
+   * @arg {import('../types.js').VjsfStatefulLayout} state
+  */
+  'update:state': (state) => true
+}
+
+/**
+ * @param {import('vue').Ref<Object>} schema
+ * @param {import('vue').Ref<any>} modelValue
+ * @param {import('vue').Ref<import("../types.js").PartialVjsfOptions | null>} options
+ * @param {Record<string, import('vue').Component>} nodeComponents
+ * @param {any} emit
+ * @param {typeof import('@json-layout/core').compile} [compile]
+ * @param {import('vue').Ref<import('@json-layout/core').CompiledLayout>} [precompiledLayout]
+ */
+export const useVjsf = (schema, modelValue, options, nodeComponents, emit, compile, precompiledLayout) => {
+  const el = ref(null)
+  const { width } = useElementSize(el)
+
+  /** @type import('vue').ShallowRef<import('../types.js').VjsfStatefulLayout | 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, { ...nodeComponents, ...toRaw(registeredNodeComponents.value) }))
+
+  const compiledLayout = computed(() => {
+    if (precompiledLayout?.value) return precompiledLayout?.value
+    if (!compile) throw new Error('compile function is not available')
+    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
+    // @ts-ignore
+    const _statefulLayout = /** @type {import('../types.js').VjsfStatefulLayout} */(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') ?? autofocusNodeElement.querySelector('textarea:not([style*="display: none"]')
+        if (autofocusInputElement) autofocusInputElement.focus()
+      }
+    })
+  }
+
+  watch(fullOptions, (newOptions) => {
+    // in case of runtime compilation the watch on compiledLayout will be triggered
+    if (!precompiledLayout?.value) return
+
+    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()
+  })
+
+  return { el, statefulLayout, stateTree }
+}

package/src/index.js

@@ -1,2 +1,4 @@
 import Vjsf from './components/vjsf.vue'
-export { Vjsf }
+import { defaultOptions } from './components/options.js'
+export { Vjsf, defaultOptions }
+export default Vjsf

package/src/styles/vjsf.css

@@ -0,0 +1,14 @@
+.vjsf {
+  overflow: hidden;
+}
+
+/* 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/{components/types.ts → types.ts}

@@ -1,4 +1,7 @@
+import { Component } from 'vue'
+
 import {
+  StatefulLayout,
   StatefulLayoutOptions,
   StateNode,
   CheckboxNode,
@@ -17,17 +20,22 @@ import {
   TextFieldNode,
   TextareaNode,
   VerticalTabsNode,
+  StepperNode,
+  ComboboxNode,
+  MarkdownNode,
+  FileInputNode,
   CompileOptions
 } from '@json-layout/core'
 
 export type Density = 'default' | 'comfortable' | 'compact'
 
-export type VjsfOptions = StatefulLayoutOptions & CompileOptions & {
+export type VjsfStatefulLayoutOptions = StatefulLayoutOptions & {
   density: Density,
   fieldProps: Record<string, unknown>,
   fieldPropsCompact: Record<string, unknown>,
   fieldPropsComfortable: Record<string, unknown>,
   fieldPropsReadOnly: Record<string, unknown>,
+  fieldPropsSummary: Record<string, unknown>,
   textfieldProps: Record<string, unknown>,
   textfieldPropsReadOnly: Record<string, unknown>,
   textareaProps: Record<string, unknown>,
@@ -38,8 +46,21 @@ export type VjsfOptions = StatefulLayoutOptions & CompileOptions & {
   switchPropsReadOnly: Record<string, unknown>,
   errorAlertProps: Record<string, unknown>,
   vjsfSlots: Record<string, () => unknown>,
+  easyMDEOptions: Record<string, unknown>,
+  nodeComponents: Record<string, Component>,
+}
+
+export type VjsfCompileOptions = CompileOptions & {
+  nodeComponentImports: Record<string, string>
 }
 
+export type VjsfOptions = VjsfCompileOptions & VjsfStatefulLayoutOptions
+
+export type VjsfStatefulLayout = Omit<StatefulLayout, 'options'> & {options: VjsfStatefulLayoutOptions}
+
+export type PartialVjsfCompileOptions = Partial<Omit<VjsfCompileOptions, 'width'>>
+export type PartialVjsfOptions = Partial<Omit<VjsfOptions, 'width'>>
+
 export type VjsfNode = Omit<StateNode, 'options'> & {options: VjsfOptions}
 export type VjsfTabsNode = Omit<TabsNode, 'options'> & {options: VjsfOptions}
 export type VjsfCheckboxNode = Omit<CheckboxNode, 'options'> & {options: VjsfOptions}
@@ -56,4 +77,8 @@ export type VjsfSliderNode = Omit<SliderNode, 'options'> & {options: VjsfOptions
 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 VjsfMarkdownNode = Omit<MarkdownNode, '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}
+export type VjsfFileInputNode = Omit<FileInputNode, 'options'> & {options: VjsfOptions}

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/build.js

@@ -0,0 +1 @@
+export { commonjsDeps } from '@json-layout/core/utils/build'

package/src/utils/global-register.js

@@ -0,0 +1,13 @@
+import { ref } from 'vue'
+
+/** @type {import('vue').Ref<Record<string, import('vue').Component>>} */
+export const registeredNodeComponents = ref({})
+
+/**
+ * @param {string} name
+ * @param {import('vue').Component} component
+ */
+export function registerNodeComponent (name, component) {
+  console.log('vjsf - register plugin node component', name)
+  registeredNodeComponents.value[name] = component
+}

package/src/utils/index.js

@@ -0,0 +1,5 @@
+export * from './arrays.js'
+export * from './dates.js'
+export * from './props.js'
+export * from './slots.js'
+export * from './global-register.js'

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]
+        }
       }
     }
   }
@@ -21,13 +29,14 @@ export function mergePropsLevels (propsLevels) {
 // 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.)
 /**
- * @param {import('@json-layout/core').StateNode} node
- * @param {import('@json-layout/core').StatefulLayout} statefulLayout
+ * @param {import('../types.js').VjsfNode} node
+ * @param {import('../types.js').VjsfStatefulLayout} statefulLayout
+ * @param {(string | [string, string])[]} [layoutPropsMap]
  * @param {boolean} isMainComp
  * @returns {Record<string, any>}
  */
-export function getInputProps (node, statefulLayout, isMainComp = true) {
-  const options = /** @type import('../components/types.js').VjsfOptions */(node.options)
+export function getInputProps (node, statefulLayout, layoutPropsMap, isMainComp = true) {
+  const options = node.options
   /** @type {(Record<string, any> | undefined)[]} */
   const propsLevels = [options.fieldProps]
   if (options.density === 'comfortable') propsLevels.push(options.fieldPropsComfortable)
@@ -48,7 +57,17 @@ export function getInputProps (node, statefulLayout, isMainComp = true) {
   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) {
+    for (const propMap of layoutPropsMap) {
+      if (typeof propMap === 'string') fullProps[propMap] = node.layout[propMap]
+      else fullProps[propMap[0]] = node.layout[propMap[1]]
+    }
   }
 
   if (isMainComp) {
@@ -67,7 +86,7 @@ export function getInputProps (node, statefulLayout, isMainComp = true) {
  * @returns {Record<string, any>}
  */
 export function getCompProps (node, comp, isMainComp = true) {
-  const options = /** @type import('../components/types.js').VjsfOptions */(node.options)
+  const options = /** @type import('../types.js').VjsfOptions */(node.options)
   /** @type {(Record<string, any> | undefined)[]} */
   const propsLevels = [{ density: options.density }]
   propsLevels.push(/** @type Record<string, any> | undefined */(options[`${comp}Props`]))

package/src/utils/slots.js

@@ -3,13 +3,12 @@ import NodeSlot from '../components/fragments/node-slot.vue'
 
 // calculate the slots of components
 /**
- * @param {import('@json-layout/core').StateNode} node
- * @param {import('@json-layout/core').StatefulLayout} statefulLayout
+ * @param {import('../types.js').VjsfNode} node
+ * @param {import('../types.js').VjsfStatefulLayout} statefulLayout
  * @returns {Record<string, any>}
  */
 export function getCompSlots (node, statefulLayout) {
   if (!node.layout.slots) return {}
-  // const options = /** @type import('../components/types.js').VjsfOptions */(node.options)
   /** @type {Record<string, any>} */
   const slots = {}
   for (const [key, layoutSlot] of Object.entries(node.layout.slots)) {

package/types/compat/v2.d.ts.map

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

package/types/compile/index.d.ts

@@ -1,7 +1,8 @@
 /**
  * @param {object} schema
- * @param {string} baseImport
+ * @param {import('../types.js').PartialVjsfCompileOptions} [options]
+ * @param {string} [baseImport]
  * @returns {string}
  */
-export function compile(schema: object, baseImport?: string): string;
+export function compile(schema: object, options?: Partial<Omit<import("../types.js").VjsfCompileOptions, "width">> | undefined, baseImport?: string | undefined): string;
 //# sourceMappingURL=index.d.ts.map

package/types/compile/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/compile/index.js"],"names":[],"mappings":"AAYA;;;;GAIG;AACH,gCAJW,MAAM,eACN,MAAM,GACJ,MAAM,CAgBlB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/compile/index.js"],"names":[],"mappings":"AAmCA;;;;;GAKG;AACH,gCALW,MAAM,4HAGJ,MAAM,CAyBlB"}

package/types/compile/options.d.ts

@@ -0,0 +1,4 @@
+/** @type import("../types.js").PartialVjsfCompileOptions */
+export const defaultOptions: import("../types.js").PartialVjsfCompileOptions;
+export function getFullOptions(options: import("../types.js").PartialVjsfCompileOptions): import("../types.js").VjsfCompileOptions;
+//# sourceMappingURL=options.d.ts.map

package/types/compile/options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../src/compile/options.js"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,6BADU,OAAO,aAAa,EAAE,yBAAyB,CAKxD;AAOM,wCAHI,OAAO,aAAa,EAAE,yBAAyB,4CASzD"}

package/types/components/fragments/help-message.vue.d.ts

@@ -0,0 +1,8 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    node: import("../../types.js").VjsfNode;
+    $props: {
+        readonly node?: import("../../types.js").VjsfNode | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;
+//# sourceMappingURL=help-message.vue.d.ts.map

package/types/components/fragments/help-message.vue.d.ts.map

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

package/types/components/fragments/node-slot.vue.d.ts

@@ -5,13 +5,13 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     node: {
-        /** @type import('vue').PropType<import('../types.js').VjsfNode> */
-        type: import('vue').PropType<import('../types.js').VjsfNode>;
+        /** @type import('vue').PropType<import('../../types.js').VjsfNode> */
+        type: import('vue').PropType<import('../../types.js').VjsfNode>;
         required: true;
     };
     statefulLayout: {
-        /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
-        type: import('vue').PropType<import('@json-layout/core').StatefulLayout>;
+        /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+        type: import('vue').PropType<import('../../types.js').VjsfStatefulLayout>;
         required: true;
     };
     tag: {
@@ -19,20 +19,20 @@ declare const _default: import("vue").DefineComponent<{
         type: import('vue').PropType<string>;
         default: null;
     };
-}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     layoutSlot: {
         /** @type import('vue').PropType<import('@json-layout/vocabulary').Slot> */
         type: import('vue').PropType<import('@json-layout/vocabulary').Slot>;
         required: true;
     };
     node: {
-        /** @type import('vue').PropType<import('../types.js').VjsfNode> */
-        type: import('vue').PropType<import('../types.js').VjsfNode>;
+        /** @type import('vue').PropType<import('../../types.js').VjsfNode> */
+        type: import('vue').PropType<import('../../types.js').VjsfNode>;
         required: true;
     };
     statefulLayout: {
-        /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
-        type: import('vue').PropType<import('@json-layout/core').StatefulLayout>;
+        /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+        type: import('vue').PropType<import('../../types.js').VjsfStatefulLayout>;
         required: true;
     };
     tag: {

package/types/components/fragments/node-slot.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"node-slot.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fragments/node-slot.vue.js"],"names":[],"mappings":";;QAUM,2EAA2E;cAAjE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,yBAAyB,EAAE,IAAI,CAAC;;;;QAKxE,mEAAmE;cAAzD,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,aAAa,EAAE,QAAQ,CAAC;;;;QAKhE,+EAA+E;cAArE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,mBAAmB,EAAE,cAAc,CAAC;;;;QAK5E,2CAA2C;cAAjC,OAAO,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC;;;;;QAfxC,2EAA2E;cAAjE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,yBAAyB,EAAE,IAAI,CAAC;;;;QAKxE,mEAAmE;cAAzD,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,aAAa,EAAE,QAAQ,CAAC;;;;QAKhE,+EAA+E;cAArE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,mBAAmB,EAAE,cAAc,CAAC;;;;QAK5E,2CAA2C;cAAjC,OAAO,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC"}
+{"version":3,"file":"node-slot.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fragments/node-slot.vue.js"],"names":[],"mappings":";;QAUM,2EAA2E;cAAjE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,yBAAyB,EAAE,IAAI,CAAC;;;;QAKxE,sEAAsE;cAA5D,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,QAAQ,CAAC;;;;QAKnE,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;;QAK7E,2CAA2C;cAAjC,OAAO,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC;;;;;QAfxC,2EAA2E;cAAjE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,yBAAyB,EAAE,IAAI,CAAC;;;;QAKxE,sEAAsE;cAA5D,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,QAAQ,CAAC;;;;QAKnE,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;;QAK7E,2CAA2C;cAAjC,OAAO,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC"}

package/types/components/fragments/section-header.vue.d.ts

@@ -1,8 +1,8 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    node: import("../types.js").VjsfNode;
+    node: import("../../types.js").VjsfNode;
     $props: {
-        readonly node?: import("../types.js").VjsfNode | undefined;
+        readonly node?: import("../../types.js").VjsfNode | undefined;
     };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;
 //# sourceMappingURL=section-header.vue.d.ts.map

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

@@ -0,0 +1,15 @@
+declare const _default: import("vue").DefineComponent<{
+    icon: {
+        type: StringConstructor;
+        required: true;
+    };
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}, {}>;
+export default _default;
+//# sourceMappingURL=select-item-icon.vue.d.ts.map

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

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

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

@@ -0,0 +1,12 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    multiple: boolean;
+    item: import("../../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem;
+    itemProps: Record<string, any>;
+    $props: {
+        readonly multiple?: boolean | 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;
+//# sourceMappingURL=select-item.vue.d.ts.map

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

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

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

@@ -0,0 +1,12 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    multiple: boolean;
+    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 last?: boolean | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;
+//# sourceMappingURL=select-selection.vue.d.ts.map

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

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

package/types/components/fragments/text-field-menu.vue.d.ts

@@ -1,13 +1,13 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
-    modelValue: import("../types.js").VjsfNode;
-    statefulLayout: import("@json-layout/core").StatefulLayout;
+    modelValue: import("../../types.js").VjsfNode;
+    statefulLayout: import("../../types.js").VjsfStatefulLayout;
     formattedValue: string | null;
     $props: {
-        readonly modelValue?: import("../types.js").VjsfNode | undefined;
-        readonly statefulLayout?: import("@json-layout/core").StatefulLayout | undefined;
+        readonly modelValue?: import("../../types.js").VjsfNode | undefined;
+        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
         readonly formattedValue?: string | null | undefined;
     };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
     "prepend-inner"?(_: {}): any;
     default?(_: {
         close: () => boolean;

package/types/components/fragments/text-field-menu.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field-menu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fragments/text-field-menu.vue.js"],"names":[],"mappings":";;;;;;;;;;6BAmIsC,GAAG;;;QACX,GAAG"}
+{"version":3,"file":"text-field-menu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fragments/text-field-menu.vue.js"],"names":[],"mappings":";;;;;;;;;;6BAkIsC,GAAG;;;QACX,GAAG"}

package/types/components/global-register.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @param {string} name
+ * @param {import('vue').Component} component
+ */
+export function registerNodeComponent(name: string, component: import('vue').Component): void;
+/** @type {Record<string, import('vue').Component>} */
+export const registeredNodeComponents: Record<string, import('vue').Component>;
+//# sourceMappingURL=global-register.d.ts.map

package/types/components/global-register.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-register.d.ts","sourceRoot":"","sources":["../../src/components/global-register.js"],"names":[],"mappings":"AAGA;;;GAGG;AACH,4CAHW,MAAM,aACN,OAAO,KAAK,EAAE,SAAS,QAIjC;AATD,sDAAsD;AACtD,uCADW,OAAO,MAAM,EAAE,OAAO,KAAK,EAAE,SAAS,CAAC,CACR"}

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

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

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

@@ -0,0 +1,27 @@
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        /** @type import('vue').PropType<import('../../types.js').VjsfSelectNode> */
+        type: import('vue').PropType<import('../../types.js').VjsfSelectNode>;
+        required: true;
+    };
+    statefulLayout: {
+        /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+        type: import('vue').PropType<import('../../types.js').VjsfStatefulLayout>;
+        required: true;
+    };
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        /** @type import('vue').PropType<import('../../types.js').VjsfSelectNode> */
+        type: import('vue').PropType<import('../../types.js').VjsfSelectNode>;
+        required: true;
+    };
+    statefulLayout: {
+        /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+        type: import('vue').PropType<import('../../types.js').VjsfStatefulLayout>;
+        required: true;
+    };
+}>>, {}, {}>;
+export default _default;
+//# sourceMappingURL=autocomplete.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.vue.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/autocomplete.vue.js"],"names":[],"mappings":";;QAWI,4EAA4E;cAAlE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,cAAc,CAAC;;;;QAKzE,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;;;;;QAL7E,4EAA4E;cAAlE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,cAAc,CAAC;;;;QAKzE,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC"}

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

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