@koumoul/vjsf 3.0.0-beta.44 → 3.0.0-beta.45

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

@@ -1,9 +1,10 @@
-import { watch, shallowRef, ref } from 'vue'
+import { watch, shallowRef, ref, computed } from 'vue'
 
 /**
- * @param {{modelValue: import('@json-layout/core').StateNode, statefulLayout: import('../types.js').VjsfStatefulLayout}} props
+ * @param {import('vue').Ref<import('../types.js').VjsfNode>} nodeRef
+ * @param {import('../types.js').VjsfStatefulLayout} statefulLayout
  */
-export default function (props) {
+export default function (nodeRef, statefulLayout) {
   /** @type import('vue').Ref<import('@json-layout/vocabulary').SelectItems> */
   const items = shallowRef([])
   /** @type import('vue').Ref<boolean> */
@@ -11,13 +12,17 @@ export default function (props) {
   /** @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 props.statefulLayout.getItems(props.modelValue, search.value)
+    items.value = await statefulLayout.getItems(nodeRef.value, search.value)
     loading.value = false
   }
 
-  watch(() => props.modelValue.itemsCacheKey, (newValue, oldValue) => {
+  watch(() => nodeRef.value.itemsCacheKey, (newValue, oldValue) => {
     if (newValue === oldValue) return
     fetchItems()
   }, { immediate: true })
@@ -35,7 +40,7 @@ export default function (props) {
     // item and value are the same when the selection is not found in items list
     if (selectedItem === itemValue) {
       try {
-        item = props.statefulLayout.prepareSelectItem(props.modelValue, selectedItem)
+        item = statefulLayout.prepareSelectItem(nodeRef.value, selectedItem)
         if (item.value === undefined) item.value = itemValue
       } catch (e) {
         item = { value: itemValue }
@@ -44,5 +49,5 @@ export default function (props) {
     return item
   }
 
-  return { items, loading, search, prepareSelectedItem }
+  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,5 +1,5 @@
 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 { setAutoFreeze } from 'immer'
@@ -52,7 +52,8 @@ export const useVjsf = (schema, modelValue, options, nodeComponents, emit, compi
         return statefulLayout.value?.errors
       },
       reset: () => statefulLayout.value?.resetValidation(), // TODO: also empty the data ?
-      resetValidation: () => statefulLayout.value?.resetValidation()
+      resetValidation: () => statefulLayout.value?.resetValidation(),
+      vm: getCurrentInstance()
     })
   }
 

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

@@ -3,6 +3,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     $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<{}>>, {}, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=child-subtitle.vue.d.ts.map

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

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

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

@@ -1,4 +1,4 @@
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     layoutSlot: {
         /** @type import('vue').PropType<import('@json-layout/vocabulary').Slot> */
         type: import('vue').PropType<import('@json-layout/vocabulary').Slot>;
@@ -19,7 +19,7 @@ declare const _default: import("vue").DefineComponent<{
         type: import('vue').PropType<string>;
         default: null;
     };
-}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, 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>;
@@ -40,8 +40,8 @@ declare const _default: import("vue").DefineComponent<{
         type: import('vue').PropType<string>;
         default: null;
     };
-}>>, {
+}>> & Readonly<{}>, {
     tag: string;
-}, {}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=node-slot.vue.d.ts.map

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

@@ -5,6 +5,6 @@ declare const _default: import("vue").DefineComponent<{}, {
         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<{}>>, {}, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=section-header.vue.d.ts.map

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

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

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

@@ -1,12 +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;
+    itemProps: Record<string, any>;
     $props: {
         readonly multiple?: boolean | undefined;
-        readonly itemProps?: Record<string, any> | undefined;
         readonly item?: import("../../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem | undefined;
+        readonly itemProps?: Record<string, any> | undefined;
     };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=select-item.vue.d.ts.map

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

@@ -7,6 +7,6 @@ declare const _default: import("vue").DefineComponent<{}, {
         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<{}>>, {}, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=select-selection.vue.d.ts.map

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

@@ -1,4 +1,4 @@
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
         /** @type import('vue').PropType<import('../../types.js').VjsfCheckboxGroupNode> */
         type: import('vue').PropType<import('../../types.js').VjsfCheckboxGroupNode>;
@@ -13,9 +13,9 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}>, () => 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<{
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         /** @type import('vue').PropType<import('../../types.js').VjsfCheckboxGroupNode> */
         type: import('vue').PropType<import('../../types.js').VjsfCheckboxGroupNode>;
@@ -30,6 +30,6 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
-}>>, {}, {}>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=selection-group.vue.d.ts.map

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

@@ -7,7 +7,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}
         readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
         readonly formattedValue?: string | null | undefined;
     };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     "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":";;;;;;;;;;6BA0IsC,GAAG;;;QACX,GAAG"}
+{"version":3,"file":"text-field-menu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fragments/text-field-menu.vue.js"],"names":[],"mappings":";;;;;;;;;;6BA8IsC,GAAG;;;QACX,GAAG"}

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

@@ -5,6 +5,6 @@ declare const _default: import("vue").DefineComponent<{}, {
         readonly modelValue?: import("../types.js").VjsfNode | undefined;
         readonly statefulLayout?: import("../types.js").VjsfStatefulLayout | undefined;
     };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=node.vue.d.ts.map

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

@@ -1,4 +1,4 @@
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
         /** @type import('vue').PropType<import('../../types.js').VjsfSelectNode> */
         type: import('vue').PropType<import('../../types.js').VjsfSelectNode>;
@@ -9,9 +9,9 @@ declare const _default: import("vue").DefineComponent<{
         type: import('vue').PropType<import('../../types.js').VjsfStatefulLayout>;
         required: true;
     };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}>, () => 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<{
+}>, {}, {}, {}, 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>;
@@ -22,6 +22,6 @@ declare const _default: import("vue").DefineComponent<{
         type: import('vue').PropType<import('../../types.js').VjsfStatefulLayout>;
         required: true;
     };
-}>>, {}, {}>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=autocomplete.vue.d.ts.map

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

@@ -1 +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;;;;QAKvE,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;;;;;QAL/E,4EAA4E;cAAlE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,cAAc,CAAC;;;;QAKvE,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC"}
+{"version":3,"file":"autocomplete.vue.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/autocomplete.vue.js"],"names":[],"mappings":";;QAUI,4EAA4E;cAAlE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,cAAc,CAAC;;;;QAKvE,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;;;;;QAL/E,4EAA4E;cAAlE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,cAAc,CAAC;;;;QAKvE,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC"}

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

@@ -5,6 +5,6 @@ declare const _default: import("vue").DefineComponent<{}, {
         readonly modelValue?: import("../../types.js").VjsfCardNode | undefined;
         readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
     };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=card.vue.d.ts.map

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

@@ -1,4 +1,4 @@
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
         /** @type import('vue').PropType<import('../../types.js').VjsfCheckboxGroupNode> */
         type: import('vue').PropType<import('../../types.js').VjsfCheckboxGroupNode>;
@@ -9,9 +9,9 @@ declare const _default: import("vue").DefineComponent<{
         type: import('vue').PropType<import('../../types.js').VjsfStatefulLayout>;
         required: true;
     };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}>, () => 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<{
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         /** @type import('vue').PropType<import('../../types.js').VjsfCheckboxGroupNode> */
         type: import('vue').PropType<import('../../types.js').VjsfCheckboxGroupNode>;
@@ -22,6 +22,6 @@ declare const _default: import("vue").DefineComponent<{
         type: import('vue').PropType<import('../../types.js').VjsfStatefulLayout>;
         required: true;
     };
-}>>, {}, {}>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=checkbox-group.vue.d.ts.map

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

@@ -1,10 +1,27 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    modelValue: import("../../types.js").VjsfCheckboxNode;
-    statefulLayout: import("../../types.js").VjsfStatefulLayout;
-    $props: {
-        readonly modelValue?: import("../../types.js").VjsfCheckboxNode | undefined;
-        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
-    };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        /** @type import('vue').PropType<import('../../types.js').VjsfCheckboxNode> */
+        type: import('vue').PropType<import('../../types.js').VjsfCheckboxNode>;
+        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;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        /** @type import('vue').PropType<import('../../types.js').VjsfCheckboxNode> */
+        type: import('vue').PropType<import('../../types.js').VjsfCheckboxNode>;
+        required: true;
+    };
+    statefulLayout: {
+        /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+        type: import('vue').PropType<import('../../types.js').VjsfStatefulLayout>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=checkbox.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/checkbox.vue.js"],"names":[],"mappings":""}
+{"version":3,"file":"checkbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/checkbox.vue.js"],"names":[],"mappings":";;QAUM,8EAA8E;cAApE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,gBAAgB,CAAC;;;;QAK3E,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;;;;;QAL7E,8EAA8E;cAApE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,gBAAgB,CAAC;;;;QAK3E,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC"}

package/types/components/nodes/color-picker.vue.d.ts

@@ -5,6 +5,6 @@ declare const _default: import("vue").DefineComponent<{}, {
         readonly modelValue?: import("../../types.js").VjsfColorPickerNode | undefined;
         readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
     };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=color-picker.vue.d.ts.map

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

@@ -1,4 +1,4 @@
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
         /** @type import('vue').PropType<import('../../types.js').VjsfComboboxNode> */
         type: import('vue').PropType<import('../../types.js').VjsfComboboxNode>;
@@ -9,9 +9,9 @@ declare const _default: import("vue").DefineComponent<{
         type: import('vue').PropType<import('../../types.js').VjsfStatefulLayout>;
         required: true;
     };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}>, () => 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<{
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         /** @type import('vue').PropType<import('../../types.js').VjsfComboboxNode> */
         type: import('vue').PropType<import('../../types.js').VjsfComboboxNode>;
@@ -22,6 +22,6 @@ declare const _default: import("vue").DefineComponent<{
         type: import('vue').PropType<import('../../types.js').VjsfStatefulLayout>;
         required: true;
     };
-}>>, {}, {}>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=combobox.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"combobox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/combobox.vue.js"],"names":[],"mappings":";;QAUM,8EAA8E;cAApE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,gBAAgB,CAAC;;;;QAK3E,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;;;;;QAL7E,8EAA8E;cAApE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,gBAAgB,CAAC;;;;QAK3E,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC"}
+{"version":3,"file":"combobox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/combobox.vue.js"],"names":[],"mappings":";;QAWM,8EAA8E;cAApE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,gBAAgB,CAAC;;;;QAK3E,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;;;;;QAL7E,8EAA8E;cAApE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,gBAAgB,CAAC;;;;QAK3E,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC"}

package/types/components/nodes/date-picker.vue.d.ts

@@ -5,6 +5,6 @@ declare const _default: import("vue").DefineComponent<{}, {
         readonly modelValue?: import("../../types.js").VjsfDatePickerNode | undefined;
         readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
     };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=date-picker.vue.d.ts.map

package/types/components/nodes/date-time-picker.vue.d.ts

@@ -5,6 +5,6 @@ declare const _default: import("vue").DefineComponent<{}, {
         readonly modelValue?: import("../../types.js").VjsfDatePickerNode | undefined;
         readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
     };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=date-time-picker.vue.d.ts.map

package/types/components/nodes/expansion-panels.vue.d.ts

@@ -5,6 +5,6 @@ declare const _default: import("vue").DefineComponent<{}, {
         readonly modelValue?: import("../../types.js").VjsfExpansionPanelsNode | undefined;
         readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
     };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=expansion-panels.vue.d.ts.map