@koumoul/vjsf 3.0.0-beta.36 → 3.0.0-beta.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.0.0-beta.36",
+  "version": "3.0.0-beta.38",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest",
@@ -76,7 +76,7 @@
     "vuetify": "^3.6.13"
   },
   "dependencies": {
-    "@json-layout/core": "0.29.0",
+    "@json-layout/core": "0.30.0",
     "@vueuse/core": "^10.5.0",
     "debug": "^4.3.4",
     "ejs": "^3.1.9"

package/src/components/fragments/text-field-menu.vue

@@ -40,7 +40,7 @@ const menuProps = computed(() => {
 })
 
 const textField = ref(null)
-const menuOpened = ref(false)
+const menuOpened = defineModel('menuOpened', { type: Boolean, default: false })
 
 </script>
 

package/src/components/nodes/autocomplete.vue

@@ -2,10 +2,8 @@
 import { VAutocomplete } from 'vuetify/components/VAutocomplete'
 import { useDefaults } from 'vuetify'
 import { defineComponent, computed, h } from 'vue'
-import { getInputProps, getCompSlots } from '../../utils/index.js'
+import { getSelectProps, getSelectSlots } from '../../utils/index.js'
 import useGetItems from '../../composables/use-get-items.js'
-import SelectItem from '../fragments/select-item.vue'
-import SelectSelection from '../fragments/select-selection.vue'
 
 export default defineComponent({
   props: {
@@ -22,42 +20,22 @@ export default defineComponent({
   },
   setup (props) {
     useDefaults({}, 'VjsfAutocomplete')
+
     const getItems = useGetItems(props)
 
     const fieldProps = computed(() => {
-      const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['multiple'])
-      if (props.modelValue.options.readOnly) fieldProps.menuProps = { modelValue: false }
+      const fieldProps = getSelectProps(props.modelValue, props.statefulLayout)
       fieldProps.noFilter = true
       fieldProps['onUpdate:search'] = (/** @type string */searchValue) => {
         getItems.search.value = searchValue
       }
       fieldProps.items = getItems.items.value
       fieldProps.loading = getItems.loading.value
-      fieldProps.clearable = fieldProps.clearable ?? !props.modelValue.skeleton.required
       return fieldProps
     })
 
-    const fieldSlots = computed(() => {
-      const slots = getCompSlots(props.modelValue, props.statefulLayout)
-      if (!slots.item) {
-        slots.item = (/** @type {any} */ context) => h(SelectItem, {
-          multiple: props.modelValue.layout.multiple,
-          itemProps: context.props,
-          item: context.item.raw
-        })
-      }
-      if (!slots.selection) {
-        slots.selection = (/** @type {any} */ context) => h(SelectSelection, {
-          multiple: props.modelValue.layout.multiple,
-          last: props.modelValue.layout.multiple && context.index === props.modelValue.data.length - 1,
-          item: getItems.prepareSelectedItem(context.item.raw, context.item.value)
-        })
-      }
-      return slots
-    })
-
     // @ts-ignore
-    return () => h(VAutocomplete, fieldProps.value, fieldSlots.value)
+    return () => h(VAutocomplete, fieldProps.value, getSelectSlots(props.modelValue, props.statefulLayout, getItems))
   }
 })
 

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

@@ -2,8 +2,8 @@
 import TextFieldMenu from '../fragments/text-field-menu.vue'
 import { VDatePicker } from 'vuetify/components/VDatePicker'
 import { useDate, useDefaults } from 'vuetify'
-import { computed } from 'vue'
-import { getCompProps, getDateTimeParts } from '../../utils/index.js'
+import { computed, ref } from 'vue'
+import { getCompProps, getDateTimeParts, getDateTimeWithOffset } from '../../utils/index.js'
 
 useDefaults({}, 'VjsfDatePicker')
 
@@ -22,25 +22,32 @@ const props = defineProps({
 
 const vDate = useDate()
 
+const menuOpened = ref(false)
+
 const datePickerProps = computed(() => {
   const datePickerProps = getCompProps(props.modelValue, true)
   datePickerProps.hideActions = true
   if (props.modelValue.data) datePickerProps.modelValue = new Date(props.modelValue.data)
+  datePickerProps['onUpdate:modelValue'] = (/** @type {Date} */value) => {
+    if (!value) return
+    if (props.modelValue.layout.format === 'date-time') {
+      props.statefulLayout.input(props.modelValue, getDateTimeWithOffset(value))
+    } else {
+      props.statefulLayout.input(props.modelValue, getDateTimeParts(/** @type Date */(/** @type unknown */(value)))[0])
+    }
+    menuOpened.value = false
+  }
   return datePickerProps
 })
 </script>
 
 <template>
   <text-field-menu
+    v-model:menu-opened="menuOpened"
     :model-value="modelValue"
     :stateful-layout="statefulLayout"
     :formatted-value="modelValue.data && vDate.format(modelValue.data, 'fullDateWithWeekday')"
   >
-    <template #default="{close}">
-      <v-date-picker
-        v-bind="datePickerProps"
-        @update:model-value="value => {statefulLayout.input(modelValue, value && getDateTimeParts(/** @type Date */(/** @type unknown */(value)))[0]); close()}"
-      />
-    </template>
+    <v-date-picker v-bind="datePickerProps" />
   </text-field-menu>
 </template>

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

@@ -1,11 +1,19 @@
 <script setup>
-import { useDefaults } from 'vuetify'
+import TextFieldMenu from '../fragments/text-field-menu.vue'
+import { VDatePicker } from 'vuetify/components/VDatePicker'
+import { VTimePicker } from 'vuetify/labs/VTimePicker'
+import { VTabs, VTab, VTabsWindow, VTabsWindowItem } from 'vuetify/components/VTabs'
+import { VIcon } from 'vuetify/components/VIcon'
+import { VSheet } from 'vuetify/components/VSheet'
+import { useDate, useDefaults } from 'vuetify'
+import { computed, ref, watch } from 'vue'
+import { getCompProps, getDateTimeParts, getLongTime, getDateTimeWithOffset, getShortTime } from '../../utils/index.js'
 
-useDefaults({}, 'VjsfDateTimePicker')
+useDefaults({}, 'VjsfDatePicker')
 
-defineProps({
+const props = defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../../types.js').VjsfDateTimePickerNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfDatePickerNode> */
     type: Object,
     required: true
   },
@@ -16,8 +24,74 @@ defineProps({
   }
 })
 
+const vDate = useDate()
+
+const tab = ref('date')
+const menuOpened = ref(false)
+watch(menuOpened, () => { tab.value = 'date' })
+
+const datePickerProps = computed(() => {
+  const datePickerProps = getCompProps(props.modelValue, false)
+  datePickerProps.hideActions = true
+  if (props.modelValue.data) datePickerProps.modelValue = new Date(props.modelValue.data)
+  datePickerProps['onUpdate:modelValue'] = (/** @type {Date} */value) => {
+    if (!value) return
+
+    if (props.modelValue.data) {
+      // replace date part of current value
+      const datePart = value && getDateTimeParts(/** @type Date */(/** @type unknown */(value)))[0]
+      props.statefulLayout.input(props.modelValue, datePart + props.modelValue.data.slice(10))
+    } else {
+      props.statefulLayout.input(props.modelValue, getDateTimeWithOffset(value))
+    }
+    tab.value = 'time'
+  }
+  return datePickerProps
+})
+
+const timePickerProps = computed(() => {
+  const timePickerProps = getCompProps(props.modelValue, false)
+  timePickerProps['ampm-in-title'] = true
+  if (props.modelValue.data) timePickerProps.modelValue = getShortTime(props.modelValue.data.slice(11))
+  timePickerProps['onUpdate:modelValue'] = (/** @type {string} */value) => {
+    if (!props.modelValue.data) return
+    console.log('set time', value, props.modelValue.data.slice(0, 10), props.modelValue.data.slice(15))
+    props.statefulLayout.input(props.modelValue, props.modelValue.data.slice(0, 11) + value + props.modelValue.data.slice(16))
+  }
+  return timePickerProps
+})
 </script>
 
 <template>
-  TODO date-time
+  <text-field-menu
+    v-model:menu-opened="menuOpened"
+    :model-value="modelValue"
+    :stateful-layout="statefulLayout"
+    :formatted-value="modelValue.data && vDate.format(modelValue.data, 'fullDateTime')"
+  >
+    <v-sheet style="width: 328px">
+      <v-tabs
+        v-model="tab"
+        align-tabs="center"
+      >
+        <v-tab value="date">
+          <v-icon>mdi-calendar</v-icon>
+        </v-tab>
+        <v-tab
+          value="time"
+          :disabled="!modelValue.data"
+        >
+          <v-icon>mdi-clock</v-icon>
+        </v-tab>
+      </v-tabs>
+      <v-tabs-window v-model="tab">
+        <v-tabs-window-item value="date">
+          <v-date-picker v-bind="datePickerProps" />
+        </v-tabs-window-item>
+        <v-tabs-window-item value="time">
+          <v-time-picker v-bind="timePickerProps" />
+        </v-tabs-window-item>
+      </v-tabs-window>
+    </v-sheet>
+  </text-field-menu>
 </template>

package/src/components/nodes/select.vue

@@ -1,10 +1,9 @@
 <script>
 import { VSelect } from 'vuetify/components/VSelect'
 import { defineComponent, h, computed } from 'vue'
-import { getInputProps, getCompSlots } from '../../utils/index.js'
+import { getSelectProps, getSelectSlots } from '../../utils/index.js'
 import useGetItems from '../../composables/use-get-items.js'
-import SelectItem from '../fragments/select-item.vue'
-import SelectSelection from '../fragments/select-selection.vue'
+
 import { useDefaults } from 'vuetify'
 
 export default defineComponent({
@@ -26,35 +25,14 @@ export default defineComponent({
     const getItems = useGetItems(props)
 
     const fieldProps = computed(() => {
-      const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['multiple'])
-      if (props.modelValue.options.readOnly) fieldProps.menuProps = { modelValue: false }
+      const fieldProps = getSelectProps(props.modelValue, props.statefulLayout)
       fieldProps.loading = getItems.loading.value
       fieldProps.items = getItems.items.value
-      fieldProps.clearable = fieldProps.clearable ?? !props.modelValue.skeleton.required
       return fieldProps
     })
 
-    const fieldSlots = computed(() => {
-      const slots = getCompSlots(props.modelValue, props.statefulLayout)
-      if (!slots.item) {
-        slots.item = (/** @type {any} */ context) => h(SelectItem, {
-          multiple: props.modelValue.layout.multiple,
-          itemProps: context.props,
-          item: context.item.raw
-        })
-      }
-      if (!slots.selection) {
-        slots.selection = (/** @type {any} */ context) => h(SelectSelection, {
-          multiple: props.modelValue.layout.multiple,
-          last: props.modelValue.layout.multiple && context.index === props.modelValue.data.length - 1,
-          item: getItems.prepareSelectedItem(context.item.raw, context.item.value)
-        })
-      }
-      return slots
-    })
-
     // @ts-ignore
-    return () => h(VSelect, fieldProps.value, fieldSlots.value)
+    return () => h(VSelect, fieldProps.value, getSelectSlots(props.modelValue, props.statefulLayout, getItems))
   }
 })
 

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

@@ -1,7 +1,44 @@
 <script setup>
+import TextFieldMenu from '../fragments/text-field-menu.vue'
+import { VTimePicker } from 'vuetify/labs/VTimePicker'
+import { useDate, useDefaults } from 'vuetify'
+import { computed } from 'vue'
+import { getCompProps, getShortTime, getLongTime } from '../../utils/index.js'
 
+useDefaults({}, 'VjsfDatePicker')
+
+const props = defineProps({
+  modelValue: {
+    /** @type import('vue').PropType<import('../../types.js').VjsfDatePickerNode> */
+    type: Object,
+    required: true
+  },
+  statefulLayout: {
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+    type: Object,
+    required: true
+  }
+})
+
+const vDate = useDate()
+
+const timePickerProps = computed(() => {
+  const timePickerProps = getCompProps(props.modelValue, true)
+  timePickerProps['ampm-in-title'] = true
+  if (props.modelValue.data) timePickerProps.modelValue = getShortTime(props.modelValue.data)
+  return timePickerProps
+})
 </script>
 
 <template>
-  TODO time
+  <text-field-menu
+    :model-value="modelValue"
+    :stateful-layout="statefulLayout"
+    :formatted-value="timePickerProps.modelValue && vDate.format('2010-04-13T' + timePickerProps.modelValue, 'fullTime')"
+  >
+    <v-time-picker
+      v-bind="timePickerProps"
+      @update:model-value="value => {statefulLayout.input(modelValue, value && getLongTime(value))}"
+    />
+  </text-field-menu>
 </template>

package/src/components/vjsf.vue

@@ -14,6 +14,7 @@ import NodeSwitch from './nodes/switch.vue'
 import NodeNumberField from './nodes/number-field.vue'
 import NodeSlider from './nodes/slider.vue'
 import NodeDatePicker from './nodes/date-picker.vue'
+import NodeTimePicker from './nodes/time-picker.vue'
 import NodeDateTimePicker from './nodes/date-time-picker.vue'
 import NodeColorPicker from './nodes/color-picker.vue'
 import NodeSelect from './nodes/select.vue'
@@ -42,6 +43,7 @@ const nodeComponents = {
   'number-field': NodeNumberField,
   slider: NodeSlider,
   'date-picker': NodeDatePicker,
+  'time-picker': NodeTimePicker,
   'date-time-picker': NodeDateTimePicker,
   'color-picker': NodeColorPicker,
   select: NodeSelect,

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

@@ -1,4 +1,4 @@
-import { watch, shallowRef, ref, computed } from 'vue'
+import { watch, shallowRef, ref } from 'vue'
 
 /**
  * @param {{modelValue: import('@json-layout/core').StateNode, statefulLayout: import('../types.js').VjsfStatefulLayout}} props

package/src/utils/props.js

@@ -100,3 +100,34 @@ export function getCompProps (node, isMainComp = true) {
   const fullProps = mergePropsLevels(propsLevels)
   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/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":";;;;;;;;;;6BAuIsC,GAAG;;;QACX,GAAG"}
+{"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"}

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":";;QAaI,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":";;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"}

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

@@ -1,8 +1,8 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    modelValue: import("../../types.js").VjsfDateTimePickerNode;
+    modelValue: import("../../types.js").VjsfDatePickerNode;
     statefulLayout: import("../../types.js").VjsfStatefulLayout;
     $props: {
-        readonly modelValue?: import("../../types.js").VjsfDateTimePickerNode | undefined;
+        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<{}>>, {}, {}>;

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

@@ -1 +1 @@
-{"version":3,"file":"select.vue.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/select.vue.js"],"names":[],"mappings":";;QAaI,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"}
+{"version":3,"file":"select.vue.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/select.vue.js"],"names":[],"mappings":";;QAYI,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/time-picker.vue.d.ts

@@ -1,3 +1,10 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<{}, {
+    modelValue: import("../../types.js").VjsfDatePickerNode;
+    statefulLayout: import("../../types.js").VjsfStatefulLayout;
+    $props: {
+        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<{}>>, {}, {}>;
 export default _default;
 //# sourceMappingURL=time-picker.vue.d.ts.map

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

@@ -1,13 +1,13 @@
 declare const _default: import("vue").DefineComponent<{}, {
     $emit: ((event: "update:modelValue", data: any) => void) & ((event: "update:state", state: import("../types.js").VjsfStatefulLayout) => void);
-    schema: Record<string, any>;
-    options: Partial<Omit<import("../types.js").VjsfOptions, "width" | "onData" | "onUpdate" | "onAutofocus" | "vjsfSlots">> | null;
     modelValue: any;
+    options: Partial<Omit<import("../types.js").VjsfOptions, "width" | "onData" | "onUpdate" | "onAutofocus" | "vjsfSlots">> | null;
+    schema: Record<string, any>;
     precompiledLayout: import("../../../node_modules/@json-layout/core/types/compile/types.js").CompiledLayout;
     $props: {
-        readonly schema?: Record<string, any> | undefined;
-        readonly options?: Partial<Omit<import("../types.js").VjsfOptions, "width" | "onData" | "onUpdate" | "onAutofocus" | "vjsfSlots">> | null | undefined;
         readonly modelValue?: any;
+        readonly options?: Partial<Omit<import("../types.js").VjsfOptions, "width" | "onData" | "onUpdate" | "onAutofocus" | "vjsfSlots">> | null | undefined;
+        readonly schema?: Record<string, any> | undefined;
         readonly precompiledLayout?: import("../../../node_modules/@json-layout/core/types/compile/types.js").CompiledLayout | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;

package/types/utils/props.d.ts

@@ -19,4 +19,11 @@ export function getInputProps(node: import('../types.js').VjsfNode, statefulLayo
  * @returns {Record<string, any>}
  */
 export function getCompProps(node: import('@json-layout/core').StateNode, isMainComp?: boolean): Record<string, any>;
+/**
+ * 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: import('../types.js').VjsfNode, statefulLayout: import('../types.js').VjsfStatefulLayout): Record<string, any>;
 //# sourceMappingURL=props.d.ts.map

package/types/utils/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/utils/props.js"],"names":[],"mappings":"AAcA;;;GAGG;AACH,8CAHW,CAAC,OAAO,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,CAAC,EAAE,GACjC,OAAO,MAAM,EAAE,GAAG,CAAC,GAAG;IAAC,KAAK,EAAE,MAAM,EAAE,CAAA;CAAC,CAqBnD;AAID;;;;;;GAMG;AACH,oCANW,OAAO,aAAa,EAAE,QAAQ,kBAC9B,OAAO,aAAa,EAAE,kBAAkB,iGAGtC,OAAO,MAAM,EAAE,GAAG,CAAC,CAwC/B;AAGD;;;;GAIG;AACH,mCAJW,OAAO,mBAAmB,EAAE,SAAS,eACrC,OAAO,GACL,OAAO,MAAM,EAAE,GAAG,CAAC,CAS/B"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/utils/props.js"],"names":[],"mappings":"AAcA;;;GAGG;AACH,8CAHW,CAAC,OAAO,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,CAAC,EAAE,GACjC,OAAO,MAAM,EAAE,GAAG,CAAC,GAAG;IAAC,KAAK,EAAE,MAAM,EAAE,CAAA;CAAC,CAqBnD;AAID;;;;;;GAMG;AACH,oCANW,OAAO,aAAa,EAAE,QAAQ,kBAC9B,OAAO,aAAa,EAAE,kBAAkB,iGAGtC,OAAO,MAAM,EAAE,GAAG,CAAC,CAwC/B;AAGD;;;;GAIG;AACH,mCAJW,OAAO,mBAAmB,EAAE,SAAS,eACrC,OAAO,GACL,OAAO,MAAM,EAAE,GAAG,CAAC,CAS/B;AAED;;;;;GAKG;AACH,qCAJW,OAAO,aAAa,EAAE,QAAQ,kBAC9B,OAAO,aAAa,EAAE,kBAAkB,GACtC,OAAO,MAAM,EAAE,GAAG,CAAC,CAyB/B"}

package/types/utils/slots.d.ts

@@ -4,4 +4,12 @@
  * @returns {Record<string, any>}
  */
 export function getCompSlots(node: import('../types.js').VjsfNode, statefulLayout: import('../types.js').VjsfStatefulLayout): Record<string, any>;
+/**
+ * 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: import('../types.js').VjsfSelectNode, statefulLayout: import('../types.js').VjsfStatefulLayout, getItems: any): Record<string, any>;
 //# sourceMappingURL=slots.d.ts.map

package/types/utils/slots.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slots.d.ts","sourceRoot":"","sources":["../../src/utils/slots.js"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,mCAJW,OAAO,aAAa,EAAE,QAAQ,kBAC9B,OAAO,aAAa,EAAE,kBAAkB,GACtC,OAAO,MAAM,EAAE,GAAG,CAAC,CAU/B"}
+{"version":3,"file":"slots.d.ts","sourceRoot":"","sources":["../../src/utils/slots.js"],"names":[],"mappings":"AAMA;;;;GAIG;AACH,mCAJW,OAAO,aAAa,EAAE,QAAQ,kBAC9B,OAAO,aAAa,EAAE,kBAAkB,GACtC,OAAO,MAAM,EAAE,GAAG,CAAC,CAU/B;AAED;;;;;;GAMG;AACH,qCALW,OAAO,aAAa,EAAE,cAAc,kBACpC,OAAO,aAAa,EAAE,kBAAkB,YACxC,GAAG,GACD,OAAO,MAAM,EAAE,GAAG,CAAC,CAmB/B"}

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

@@ -1,27 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    modelValue: {
-        /** @type import('vue').PropType<import('../../types.js').VjsfCheckboxGroupNode> */
-        type: import('vue').PropType<import('../../types.js').VjsfCheckboxGroupNode>;
-        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').VjsfCheckboxGroupNode> */
-        type: import('vue').PropType<import('../../types.js').VjsfCheckboxGroupNode>;
-        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=checkbox-group%20copy.vue.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"checkbox-group copy.vue.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/checkbox-group copy.vue.js"],"names":[],"mappings":";;QAQI,mFAAmF;cAAzE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,qBAAqB,CAAC;;;;QAKhF,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;;;;;QAL7E,mFAAmF;cAAzE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,qBAAqB,CAAC;;;;QAKhF,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC"}

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

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

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

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"global-register.d.ts","sourceRoot":"","sources":["../../src/utils/global-register.js"],"names":[],"mappings":"AAKA;;;GAGG;AACH,4CAHW,MAAM,aACN,OAAO,KAAK,EAAE,SAAS,QAKjC;AAVD,yEAAyE;AACzE,uCADW,OAAO,KAAK,EAAE,GAAG,CAAC,OAAO,MAAM,EAAE,OAAO,KAAK,EAAE,SAAS,CAAC,CAAC,CACtB"}