@koumoul/vjsf 3.0.0-beta.4 → 3.0.0-beta.41

package/src/composables/use-vjsf.js

@@ -1,8 +1,14 @@
-import { StatefulLayout } from '@json-layout/core'
+import { StatefulLayout, produceCompileOptions } 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'
+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)
 
 export const emits = {
   /**
@@ -26,6 +32,8 @@ export const emits = {
  */
 export const useVjsf = (schema, modelValue, options, nodeComponents, emit, compile, precompiledLayout) => {
   const el = ref(null)
+
+  // TODO: apply a debounce to width ?
   const { width } = useElementSize(el)
 
   /** @type import('vue').ShallowRef<import('../types.js').VjsfStatefulLayout | null> */
@@ -49,72 +57,100 @@ export const useVjsf = (schema, modelValue, options, nodeComponents, emit, compi
 
   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, 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>} */
+  const compileOptions = ref({})
+  watch(fullOptions, (newOptions) => {
+    if (precompiledLayout?.value) return
+    const newCompileOptions = produceCompileOptions(compileOptions.value, newOptions)
+    if (newCompileOptions !== compileOptions.value) {
+      debug('new compileOptions', newCompileOptions)
+      compileOptions.value = newCompileOptions
+    }
+  }, { immediate: true })
 
   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)
+    const compiledLayout = compile(schema.value, compileOptions.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(
+    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()
-    _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()
-      }
-    })
   }
 
+  // case where options are updated from outside
   watch(fullOptions, (newOptions) => {
-    // in case of runtime compilation the watch on compiledLayout will be triggered
-    if (!precompiledLayout?.value) return
-
+    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 is updated from outside
+  // 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

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

package/src/types.ts

@@ -1,5 +1,7 @@
 import { Component } from 'vue'
 
+import { ComponentInfo } from '@json-layout/vocabulary'
+
 import {
   StatefulLayout,
   StatefulLayoutOptions,
@@ -15,6 +17,9 @@ import {
   OneOfSelectNode,
   SectionNode,
   SelectNode,
+  RadioGroupNode,
+  CheckboxGroupNode,
+  SwitchGroupNode,
   SliderNode,
   SwitchNode,
   TextFieldNode,
@@ -22,32 +27,38 @@ import {
   VerticalTabsNode,
   StepperNode,
   ComboboxNode,
-  MarkdownNode,
   FileInputNode,
+  CardNode,
   CompileOptions
 } from '@json-layout/core'
 
 export type Density = 'default' | 'comfortable' | 'compact'
 
+export type Plugin = {
+  info: ComponentInfo,
+  nodeComponent: Component
+}
+
 // these options used to contain many possibilities to override props in various components
 // this was unmaintainable and has been removed, customization of components should be done via slots
-// and vuetify defaults providers
+// and defaults providers
 export type VjsfStatefulLayoutOptions = StatefulLayoutOptions & {
   vjsfSlots: Record<string, () => unknown>,
   nodeComponents: Record<string, Component>,
-  plugins: Record<string, unknown>
+  plugins: Plugin[],
+  pluginsOptions: Record<string, unknown>
 }
 
 export type VjsfCompileOptions = CompileOptions & {
-  nodeComponentImports: Record<string, string>
+  pluginsImports: 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 PartialVjsfCompileOptions = Partial<VjsfCompileOptions>
+export type PartialVjsfOptions = Partial<Omit<VjsfOptions, 'width' | 'vjsfSlots' | 'onData' | 'onUpdate' | 'onAutofocus'>>
 
 export type VjsfNode = Omit<StateNode, 'options'> & {options: VjsfOptions}
 export type VjsfTabsNode = Omit<TabsNode, 'options'> & {options: VjsfOptions}
@@ -61,12 +72,15 @@ export type VjsfNumberFieldNode = Omit<NumberFieldNode, 'options'> & {options: V
 export type VjsfOneOfSelectNode = Omit<OneOfSelectNode, 'options'> & {options: VjsfOptions}
 export type VjsfSectionNode = Omit<SectionNode, 'options'> & {options: VjsfOptions}
 export type VjsfSelectNode = Omit<SelectNode, 'options'> & {options: VjsfOptions}
+export type VjsfRadioGroupNode = Omit<RadioGroupNode, 'options'> & {options: VjsfOptions}
+export type VjsfCheckboxGroupNode = Omit<CheckboxGroupNode, 'options'> & {options: VjsfOptions}
+export type VjsfSwitchGroupNode = Omit<SwitchGroupNode, 'options'> & {options: VjsfOptions}
 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}
+export type VjsfCardNode = Omit<CardNode, 'options'> & {options: VjsfOptions}

package/src/utils/arrays.js

@@ -1,15 +1,46 @@
 /**
- * @template T
- * @param {T[]} array
+ * @param {any[] | Record<string, any>} data
  * @param {number} fromIndex
  * @param {number} toIndex
- * @return {T[]}
+ * @return {any[] | Record<string, any>}
  */
-export function moveArrayItem (array, fromIndex, toIndex) {
-  if (fromIndex === toIndex || fromIndex === -1 || toIndex === -1) return array
-  const newArray = [...array]
+export function moveDataItem (data, fromIndex, toIndex) {
+  if (fromIndex === toIndex || fromIndex === -1 || toIndex === -1) return data
+  if (!Array.isArray(data) && typeof data === 'object') return moveObjectItem(data, fromIndex, toIndex)
+  return moveArrayItem(data, fromIndex, toIndex)
+}
+
+/**
+ * @param {any[]} data
+ * @param {number} fromIndex
+ * @param {number} toIndex
+ * @return {any[]}
+ */
+export function moveArrayItem (data, fromIndex, toIndex) {
+  if (fromIndex === toIndex || fromIndex === -1 || toIndex === -1) return data
+  // @ts-ignore
+  if (!Array.isArray(data) && typeof data === 'object') return moveObjectItem(data, fromIndex, toIndex)
+  const newArray = [...data]
   const element = newArray[fromIndex]
   newArray.splice(fromIndex, 1)
   newArray.splice(toIndex, 0, element)
   return newArray
 }
+
+/**
+ * @param {Record<string, any>} data
+ * @param {number} fromIndex
+ * @param {number} toIndex
+ * @return {Record<string, any>}
+ */
+export function moveObjectItem (data, fromIndex, toIndex) {
+  if (fromIndex === toIndex || fromIndex === -1 || toIndex === -1) return data
+  const newKeys = /** @type {string[] } */(moveArrayItem(Object.keys(data), fromIndex, toIndex))
+  /** @type {Record<string, any>} */
+  const newData = {}
+  for (const key of newKeys) {
+    newData[key] = data[key]
+  }
+  console.log(newData)
+  return newData
+}

package/src/utils/build.js

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

package/src/utils/index.js

@@ -2,4 +2,3 @@ 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

@@ -6,12 +6,8 @@ import { camelize } from 'vue'
 // by a combination of layout.props, layout.getProps and vuetify defaults provider (https://vuetifyjs.com/en/components/defaults-providers/#usage)
 const defaultProps = {
   fieldPropsCompact: {
-    density: 'compact',
     hideDetails: 'auto'
   },
-  fieldPropsComfortable: {
-    density: 'comfortable'
-  },
   fieldPropsReadOnly: { hideDetails: 'auto', variant: 'plain' },
   fieldPropsSummary: { hideDetails: true }
 }
@@ -54,7 +50,6 @@ export function getInputProps (node, statefulLayout, layoutPropsMap, isMainComp
   const options = node.options
   /** @type {(Record<string, any> | undefined)[]} */
   const propsLevels = []
-  if (options.density === 'comfortable') propsLevels.push(defaultProps.fieldPropsComfortable)
   if (options.density === 'compact') propsLevels.push(defaultProps.fieldPropsCompact)
   if (node.options.readOnly) propsLevels.push(defaultProps.fieldPropsReadOnly)
   if (isMainComp && node.props) propsLevels.push(node.props)
@@ -65,7 +60,7 @@ export function getInputProps (node, statefulLayout, layoutPropsMap, isMainComp
   if (node.error && node.validated) {
     fullProps.errorMessages = node.error
   }
-  fullProps.modelValue = node.data
+  fullProps.modelValue = (typeof node.data === 'string' && node.layout.separator) ? node.data.split(/** @type {string} */(node.layout.separator)) : node.data
   if (node.options.readOnly) {
     fullProps.disabled = true
     fullProps.class.push('vjsf-input--readonly')
@@ -82,7 +77,9 @@ export function getInputProps (node, statefulLayout, layoutPropsMap, isMainComp
   }
 
   if (isMainComp) {
-    fullProps['onUpdate:modelValue'] = (/** @type string */value) => statefulLayout.input(node, value)
+    fullProps['onUpdate:modelValue'] = (/** @type string */value) => {
+      return statefulLayout.input(node, (Array.isArray(value) && node.layout.separator) ? value.join(/** @type {string} */(node.layout.separator)) : value)
+    }
     fullProps.onBlur = () => statefulLayout.blur(node)
   }
 
@@ -92,18 +89,45 @@ export function getInputProps (node, statefulLayout, layoutPropsMap, isMainComp
 // calculate the props of components that are not of the field category
 /**
  * @param {import('@json-layout/core').StateNode} node
- * @param {string} comp
  * @param {boolean} isMainComp
  * @returns {Record<string, any>}
  */
-export function getCompProps (node, comp, isMainComp = true) {
+export function getCompProps (node, isMainComp = true) {
   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`]))
-  if (node.options.readOnly) propsLevels.push(/** @type Record<string, any> | undefined */(options[`${comp}PropsReadOnly`]))
   if (isMainComp) propsLevels.push(node.layout.props)
   const fullProps = mergePropsLevels(propsLevels)
-  if (isMainComp) fullProps.modelValue = node.data
+  return fullProps
+}
+
+/**
+ * shared between select and autocomplete components
+ * @param {import('../types.js').VjsfNode} node
+ * @param {import('../types.js').VjsfStatefulLayout} statefulLayout
+ * @returns {Record<string, any>}
+ */
+export function getSelectProps (node, statefulLayout) {
+  const fullProps = getInputProps(node, statefulLayout, ['multiple'], false)
+  if (node.options.readOnly) fullProps.menuProps = { modelValue: false }
+  fullProps.clearable = fullProps.clearable ?? !node.skeleton.required
+  fullProps.valueComparator = (/** @type {any} */a, /** @type {any} */b) => {
+    const aKey = typeof a === 'object' ? statefulLayout.prepareSelectItem(node, a).key : a
+    const bKey = typeof b === 'object' ? statefulLayout.prepareSelectItem(node, b).key : b
+    return aKey === bKey
+  }
+  fullProps['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(node.data)) {
+      for (let i = 0; i < node.data.length; i++) {
+        if (typeof node.data[i] === 'object' && typeof value[i] === 'string') {
+          value[i] = node.data[i]
+        }
+      }
+    }
+
+    return statefulLayout.input(node, (Array.isArray(value) && node.layout.separator) ? value.join(/** @type {string} */(node.layout.separator)) : value)
+  }
+  fullProps.onBlur = () => statefulLayout.blur(node)
   return fullProps
 }

package/src/utils/slots.js

@@ -1,5 +1,7 @@
 import { h } from 'vue'
 import NodeSlot from '../components/fragments/node-slot.vue'
+import SelectItem from '../components/fragments/select-item.vue'
+import SelectSelection from '../components/fragments/select-selection.vue'
 
 // calculate the slots of components
 /**
@@ -16,3 +18,29 @@ export function getCompSlots (node, statefulLayout) {
   }
   return slots
 }
+
+/**
+ * shared between select and autocomplete components
+ * @param {import('../types.js').VjsfSelectNode} node
+ * @param {import('../types.js').VjsfStatefulLayout} statefulLayout
+ * @param {any} getItems
+ * @returns {Record<string, any>}
+ */
+export function getSelectSlots (node, statefulLayout, getItems) {
+  const slots = getCompSlots(node, statefulLayout)
+  if (!slots.item) {
+    slots.item = (/** @type {any} */ context) => h(SelectItem, {
+      multiple: node.layout.multiple,
+      itemProps: context.props,
+      item: context.item.raw
+    })
+  }
+  if (!slots.selection) {
+    slots.selection = (/** @type {any} */ context) => h(SelectSelection, {
+      multiple: node.layout.multiple,
+      last: node.layout.multiple && context.index === node.data.length - 1,
+      item: getItems.prepareSelectedItem(context.item.raw, context.item.value)
+    })
+  }
+  return slots
+}

package/types/compat/v2.d.ts

@@ -0,0 +1,10 @@
+/**
+ *
+ * @param {object} _schema
+ * @param {import("ajv").default} [_ajv]
+ * @param {string} lang
+ * @returns
+ */
+export function v2compat(_schema: object, _ajv?: ajvModule.default | undefined, lang?: string): ajvModule.SchemaObject;
+import ajvModule from 'ajv';
+//# sourceMappingURL=v2.d.ts.map

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

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

package/types/compile/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/compile/index.js"],"names":[],"mappings":"AAmCA;;;;;GAKG;AACH,gCALW,MAAM,6GAGJ,QAAQ,MAAM,CAAC,CAuC3B"}

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,CAIxD;AAOM,wCAHI,OAAO,aAAa,EAAE,yBAAyB,4CAMzD"}

package/types/components/fragments/child-subtitle.vue.d.ts

@@ -0,0 +1,8 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    modelValue: import("../../../../node_modules/@json-layout/core/types/state/types.js").StateNode;
+    $props: {
+        modelValue?: import("../../../../node_modules/@json-layout/core/types/state/types.js").StateNode | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;
+//# sourceMappingURL=child-subtitle.vue.d.ts.map

package/types/components/fragments/child-subtitle.vue.d.ts.map

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

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

@@ -0,0 +1,47 @@
+declare const _default: import("vue").DefineComponent<{
+    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>;
+        required: true;
+    };
+    statefulLayout: {
+        /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+        type: import('vue').PropType<import('../../types.js').VjsfStatefulLayout>;
+        required: true;
+    };
+    tag: {
+        /** @type import('vue').PropType<string> */
+        type: import('vue').PropType<string>;
+        default: null;
+    };
+}, 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>;
+        required: true;
+    };
+    statefulLayout: {
+        /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+        type: import('vue').PropType<import('../../types.js').VjsfStatefulLayout>;
+        required: true;
+    };
+    tag: {
+        /** @type import('vue').PropType<string> */
+        type: import('vue').PropType<string>;
+        default: null;
+    };
+}>>, {
+    tag: string;
+}, {}>;
+export default _default;
+//# sourceMappingURL=node-slot.vue.d.ts.map

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

@@ -0,0 +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,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

@@ -0,0 +1,10 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    node: import("../../types.js").VjsfNode;
+    hideTitle: boolean;
+    $props: {
+        readonly node?: import("../../types.js").VjsfNode | undefined;
+        readonly hideTitle?: boolean | undefined;
+    };
+}, {}, {}, {}, 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/section-header.vue.d.ts.map

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

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;
+    itemProps: Record<string, any>;
+    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;
+    };
+}, {}, {}, {}, 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":""}