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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.0.0-beta.43",
+  "version": "3.0.0-beta.45",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest",
@@ -29,28 +29,22 @@
         "default": "./src/types.js"
       }
     },
-    "./components/*": {
+    "./components/vjsf.vue": {
       "import": {
-        "types": "./types/components/*.d.ts",
-        "default": "./src/components/*"
+        "types": "./types/components/vjsf.d.ts",
+        "default": "./src/components/vjs.vue"
       }
     },
-    "./composables/*": {
+    "./utils/build.js": {
       "import": {
-        "types": "./types/composables/*.d.ts",
-        "default": "./src/composables/*"
+        "types": "./types/utils/build.d.ts",
+        "default": "./src/utils/build.js"
       }
     },
-    "./utils": {
+    "./composables/use-node": {
       "import": {
-        "types": "./types/utils/index.d.ts",
-        "default": "./src/utils/index.js"
-      }
-    },
-    "./utils/*": {
-      "import": {
-        "types": "./types/utils/*.d.ts",
-        "default": "./src/utils/*"
+        "types": "./types/composables/use-node.d.ts",
+        "default": "./src/composables/use-node.js"
       }
     },
     "./styles/*": {
@@ -76,7 +70,7 @@
     "vuetify": "^3.6.13"
   },
   "dependencies": {
-    "@json-layout/core": "0.31.2",
+    "@json-layout/core": "0.32.1",
     "@vueuse/core": "^10.5.0",
     "debug": "^4.3.4",
     "ejs": "^3.1.9"
@@ -85,7 +79,7 @@
     "@types/debug": "^4.1.8",
     "@types/ejs": "^3.1.2",
     "vitest": "^1.1.1",
-    "vue": "^3.4.3",
+    "vue": "^3.5.6",
     "vue-tsc": "^1.8.27"
   }
 }

package/src/components/fragments/selection-group.vue

@@ -4,8 +4,8 @@ import { VInput } from 'vuetify/components/VInput'
 import { VLabel } from 'vuetify/components/VLabel'
 import { VCheckbox } from 'vuetify/components/VCheckbox'
 import { VSwitch } from 'vuetify/components/VSwitch'
-import { defineComponent, h, computed } from 'vue'
-import { getInputProps, getCompSlots } from '../../utils/index.js'
+import { defineComponent, h, computed, toRef } from 'vue'
+import useField from '../../composables/use-node.js'
 import useGetItems from '../../composables/use-get-items.js'
 
 export default defineComponent({
@@ -26,17 +26,19 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const getItems = useGetItems(props)
+    const nodeRef = toRef(props, 'modelValue')
+    const getItems = useGetItems(nodeRef, props.statefulLayout)
+    const { inputProps, compSlots, localData, layout } = useField(nodeRef, props.statefulLayout, { bindData: false })
 
     const fieldProps = computed(() => {
-      const fieldProps = getInputProps(props.modelValue, props.statefulLayout)
+      const fieldProps = { ...inputProps.value }
       fieldProps.class.push('v-radio-group') // reuse some styles from radio-group
       fieldProps.class.push('vjsf-selection-group')
       return fieldProps
     })
 
     const fieldSlots = computed(() => {
-      const slots = getCompSlots(props.modelValue, props.statefulLayout)
+      const slots = { ...compSlots.value }
 
       if (!slots.default) {
         slots.default = () => {
@@ -49,10 +51,10 @@ export default defineComponent({
             const checkboxes = []
             for (const item of getItems.items.value) {
               let modelValue = false
-              if (props.modelValue.layout.multiple) {
-                modelValue = props.modelValue.data?.includes(item.value)
+              if (layout.value.multiple) {
+                modelValue = localData.value?.includes(item.value)
               } else {
-                modelValue = props.modelValue.data === item.value
+                modelValue = localData.value === item.value
               }
               checkboxes.push(h(props.type === 'switch' ? VSwitch : VCheckbox, {
                 label: item.title,
@@ -61,7 +63,7 @@ export default defineComponent({
                 modelValue,
                 onClick: () => {
                   let newValue
-                  if (props.modelValue.layout.multiple) {
+                  if (layout.value.multiple) {
                     newValue = props.modelValue.data ? [...props.modelValue.data] : []
                     if (newValue.includes(item.value)) {
                       newValue = newValue.filter((/** @type {any} */v) => v !== item.value)
@@ -88,7 +90,6 @@ export default defineComponent({
       return slots
     })
 
-    // @ts-ignore
     return () => {
       return h(VInput, fieldProps.value, fieldSlots.value)
     }

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

@@ -1,8 +1,8 @@
 <script setup>
 import { VMenu } from 'vuetify/components/VMenu'
 import { VTextField } from 'vuetify/components/VTextField'
-import { computed, ref } from 'vue'
-import { getCompProps, getInputProps } from '../../utils/index.js'
+import { computed, ref, toRef } from 'vue'
+import useField from '../../composables/use-node.js'
 
 const props = defineProps({
   modelValue: {
@@ -22,10 +22,14 @@ const props = defineProps({
   }
 })
 
+const { inputProps, skeleton, compProps, data } = useField(
+  toRef(props, 'modelValue'), props.statefulLayout, { isMainComp: false, bindData: false }
+)
+
 const fieldProps = computed(() => {
-  const fieldProps = getInputProps(props.modelValue, props.statefulLayout, [], false)
+  const fieldProps = { ...inputProps.value }
   fieldProps.readonly = true
-  fieldProps.clearable = fieldProps.clearable ?? !props.modelValue.skeleton.required
+  fieldProps.clearable = fieldProps.clearable ?? !skeleton.value.required
   fieldProps['onClick:clear'] = () => {
     props.statefulLayout.input(props.modelValue, null)
   }
@@ -33,7 +37,7 @@ const fieldProps = computed(() => {
 })
 
 const menuProps = computed(() => {
-  const menuProps = getCompProps(props.modelValue)
+  const menuProps = { ...compProps.value }
   menuProps.closeOnContentClick = false
   menuProps.disabled = true
   return menuProps
@@ -48,7 +52,7 @@ const menuOpened = defineModel('menuOpened', { type: Boolean, default: false })
   <v-text-field
     ref="textField"
     v-bind="fieldProps"
-    :model-value="formattedValue ?? modelValue.data"
+    :model-value="formattedValue ?? data"
     @click:control="e => {menuOpened = !menuOpened; e.stopPropagation()}"
   >
     <template #prepend-inner>

package/src/components/nodes/autocomplete.vue

@@ -1,9 +1,8 @@
 <script>
 import { VAutocomplete } from 'vuetify/components/VAutocomplete'
 import { useDefaults } from 'vuetify'
-import { defineComponent, computed, h } from 'vue'
-import { getSelectProps, getSelectSlots } from '../../utils/index.js'
-import useGetItems from '../../composables/use-get-items.js'
+import { defineComponent, computed, h, toRef } from 'vue'
+import useSelectNode from '../../composables/use-select-node.js'
 
 export default defineComponent({
   props: {
@@ -21,21 +20,22 @@ export default defineComponent({
   setup (props) {
     useDefaults({}, 'VjsfAutocomplete')
 
-    const getItems = useGetItems(props)
+    const { getItems, selectProps, selectSlots, localData } = useSelectNode(toRef(props, 'modelValue'), props.statefulLayout)
 
     const fieldProps = computed(() => {
-      const fieldProps = getSelectProps(props.modelValue, props.statefulLayout)
+      const fieldProps = { ...selectProps.value }
       fieldProps.noFilter = true
       fieldProps['onUpdate:search'] = (/** @type string */searchValue) => {
         getItems.search.value = searchValue
       }
       fieldProps.items = getItems.items.value
       fieldProps.loading = getItems.loading.value
+      fieldProps.modelValue = localData.value
       return fieldProps
     })
 
     // @ts-ignore
-    return () => h(VAutocomplete, fieldProps.value, getSelectSlots(props.modelValue, props.statefulLayout, getItems))
+    return () => h(VAutocomplete, fieldProps.value, selectSlots.value)
   }
 })
 

package/src/components/nodes/checkbox.vue

@@ -1,35 +1,37 @@
-<script setup>
+<script>
+import { defineComponent, h, computed, toRef } from 'vue'
 import { VCheckbox } from 'vuetify/components/VCheckbox'
-import { computed } from 'vue'
-import { getInputProps } from '../../utils/index.js'
+import useNode from '../../composables/use-node.js'
 import { useDefaults } from 'vuetify'
 
-useDefaults({}, 'VjsfCheckbox')
-
-const props = defineProps({
-  modelValue: {
-    /** @type import('vue').PropType<import('../../types.js').VjsfCheckboxNode> */
-    type: Object,
-    required: true
+export default defineComponent({
+  props: {
+    modelValue: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfCheckboxNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+      type: Object,
+      required: true
+    }
   },
-  statefulLayout: {
-    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
-    type: Object,
-    required: true
+  setup (props) {
+    useDefaults({}, 'VjsfCheckbox')
+
+    const { inputProps, localData, compSlots } = useNode(toRef(props, 'modelValue'), props.statefulLayout)
+
+    const fullProps = computed(() => {
+      const fullProps = { ...inputProps.value }
+      // it is not very common to show an error below checkboxes and switches and without hide-details=auto they take a lot of space
+      if (!('hideDetails' in inputProps)) fullProps.hideDetails = 'auto'
+      fullProps.modelValue = localData.value
+      return fullProps
+    })
+
+    return () => h(VCheckbox, fullProps.value, compSlots.value)
   }
 })
 
-const fieldProps = computed(() => {
-  const inputProps = getInputProps(props.modelValue, props.statefulLayout)
-  // it is not very common to show an error below checkboxes and switches and without hide-details=auto they take a lot of space
-  if (!('hideDetails' in inputProps)) inputProps.hideDetails = 'auto'
-  return inputProps
-})
 </script>
-
-<template>
-  <v-checkbox
-    v-bind="fieldProps"
-    @update:model-value="value => statefulLayout.input(modelValue, value)"
-  />
-</template>

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

@@ -1,8 +1,8 @@
 <script setup>
 import TextFieldMenu from '../fragments/text-field-menu.vue'
 import { VColorPicker } from 'vuetify/components/VColorPicker'
-import { computed } from 'vue'
-import { getCompProps } from '../../utils/index.js'
+import { computed, toRef } from 'vue'
+import useNode from '../../composables/use-node.js'
 import { useDefaults } from 'vuetify'
 
 useDefaults({}, 'VjsfColorPicker')
@@ -20,9 +20,11 @@ const props = defineProps({
   }
 })
 
+const { compProps, localData } = useNode(toRef(props, 'modelValue'), props.statefulLayout)
+
 const colorPickerProps = computed(() => {
-  const colorPickerProps = getCompProps(props.modelValue, true)
-  colorPickerProps.modelValue = props.modelValue.data
+  const colorPickerProps = { ...compProps.value }
+  colorPickerProps.modelValue = localData.value
   return colorPickerProps
 })
 </script>

package/src/components/nodes/combobox.vue

@@ -1,7 +1,8 @@
 <script>
-import { defineComponent, h, computed, shallowRef, ref } from 'vue'
+import { defineComponent, h, computed, toRef } from 'vue'
 import { VCombobox } from 'vuetify/components/VCombobox'
-import { getInputProps, getCompSlots } from '../../utils/index.js'
+import useNode from '../../composables/use-node.js'
+import useGetItems from '../../composables/use-get-items.js'
 import { useDefaults } from 'vuetify'
 
 export default defineComponent({
@@ -20,55 +21,28 @@ export default defineComponent({
   setup (props) {
     useDefaults({}, 'VjsfCombobox')
 
-    /** @type import('vue').Ref<import('@json-layout/vocabulary').SelectItems> */
-    const items = shallowRef(props.modelValue.layout.items ?? [])
-    /** @type import('vue').Ref<boolean> */
-    const loading = ref(false)
-
-    /** @type import('@json-layout/core').StateTree | null */
-    let lastStateTree = null
-    /** @type Record<string, any> | null */
-    let lastContext = null
-
-    const hasItems = computed(() => {
-      return !!(props.modelValue.layout.items || props.modelValue.layout.getItems)
-    })
-
-    const refresh = async () => {
-      if (props.modelValue.layout.items) return
-      if (props.statefulLayout.stateTree === lastStateTree && props.statefulLayout.options.context === lastContext) return
-      lastStateTree = props.statefulLayout.stateTree
-      lastContext = props.statefulLayout.options.context ?? null
-      if (hasItems.value) {
-        loading.value = true
-        items.value = await props.statefulLayout.getItems(props.modelValue)
-        loading.value = false
-      }
-    }
-
-    if (!props.modelValue.layout.items) {
-      refresh()
-    }
+    const nodeRef = toRef(props, 'modelValue')
+    const getItems = useGetItems(nodeRef, props.statefulLayout)
+    const { inputProps, compSlots, localData, layout, options } = useNode(nodeRef, props.statefulLayout)
 
     const fieldProps = computed(() => {
-      const fieldProps = getInputProps(props.modelValue, props.statefulLayout)
-      fieldProps.loading = loading.value
+      const fieldProps = { ...inputProps.value }
       fieldProps.returnObject = false
-      if (hasItems.value) fieldProps.items = items.value
-      if (props.modelValue.options.readOnly) fieldProps.menuProps = { modelValue: false }
-      if (props.modelValue.layout.multiple) {
+      if (options.value.readOnly) fieldProps.menuProps = { modelValue: false }
+      if (getItems.hasItems.value) {
+        fieldProps.items = getItems.items.value
+        fieldProps.loading = getItems.loading.value
+      }
+      if (layout.value.multiple) {
         fieldProps.multiple = true
         fieldProps.chips = true
         fieldProps.closableChips = true
       }
-      fieldProps['onUpdate:menu'] = () => refresh()
       return fieldProps
     })
 
-    const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
-
     // @ts-ignore
-    return () => h(VCombobox, fieldProps.value, fieldSlots.value)
+    return () => h(VCombobox, { ...fieldProps.value, modelValue: localData.value }, compSlots.value)
   }
 })
 

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

@@ -2,8 +2,9 @@
 import TextFieldMenu from '../fragments/text-field-menu.vue'
 import { VDatePicker } from 'vuetify/components/VDatePicker'
 import { useDate, useDefaults } from 'vuetify'
-import { computed, ref } from 'vue'
-import { getCompProps, getDateTimeParts, getDateTimeWithOffset } from '../../utils/index.js'
+import { computed, ref, toRef } from 'vue'
+import { getDateTimeParts, getDateTimeWithOffset } from '../../utils/dates.js'
+import useNode from '../../composables/use-node.js'
 
 useDefaults({}, 'VjsfDatePicker')
 
@@ -24,10 +25,12 @@ const vDate = useDate()
 
 const menuOpened = ref(false)
 
+const { compProps, localData } = useNode(toRef(props, 'modelValue'), props.statefulLayout)
+
 const datePickerProps = computed(() => {
-  const datePickerProps = getCompProps(props.modelValue, true)
+  const datePickerProps = { ...compProps.value }
   datePickerProps.hideActions = true
-  if (props.modelValue.data) datePickerProps.modelValue = new Date(props.modelValue.data)
+  if (localData.value) datePickerProps.modelValue = new Date(/** @type {string} */(localData.value))
   datePickerProps['onUpdate:modelValue'] = (/** @type {Date} */value) => {
     if (!value) return
     if (props.modelValue.layout.format === 'date-time') {
@@ -39,14 +42,19 @@ const datePickerProps = computed(() => {
   }
   return datePickerProps
 })
+
+const formattedValue = computed(() => {
+  return localData.value ? vDate.format(/** @type {string} */(localData.value), 'fullDateWithWeekday') : null
+})
+
 </script>
 
 <template>
   <text-field-menu
     v-model:menu-opened="menuOpened"
-    :model-value="modelValue"
+    :model-value="props.modelValue"
     :stateful-layout="statefulLayout"
-    :formatted-value="modelValue.data && vDate.format(modelValue.data, 'fullDateWithWeekday')"
+    :formatted-value="formattedValue"
   >
     <v-date-picker v-bind="datePickerProps" />
   </text-field-menu>

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

@@ -6,8 +6,9 @@ import { VTabs, VTab, VTabsWindow, VTabsWindowItem } from 'vuetify/components/VT
 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, getDateTimeWithOffset, getShortTime } from '../../utils/index.js'
+import { computed, ref, watch, toRef } from 'vue'
+import { getDateTimeParts, getDateTimeWithOffset, getShortTime } from '../../utils/dates.js'
+import useNode from '../../composables/use-node.js'
 
 useDefaults({}, 'VjsfDatePicker')
 
@@ -30,17 +31,19 @@ const tab = ref('date')
 const menuOpened = ref(false)
 watch(menuOpened, () => { tab.value = 'date' })
 
+const { compProps, localData } = useNode(toRef(props, 'modelValue'), props.statefulLayout)
+
 const datePickerProps = computed(() => {
-  const datePickerProps = getCompProps(props.modelValue, false)
+  const datePickerProps = { ...compProps.value }
   datePickerProps.hideActions = true
-  if (props.modelValue.data) datePickerProps.modelValue = new Date(props.modelValue.data)
+  if (localData.value) datePickerProps.modelValue = new Date(localData.value)
   datePickerProps['onUpdate:modelValue'] = (/** @type {Date} */value) => {
     if (!value) return
 
-    if (props.modelValue.data) {
+    if (localData.value) {
       // 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))
+      props.statefulLayout.input(props.modelValue, datePart + localData.value.slice(10))
     } else {
       props.statefulLayout.input(props.modelValue, getDateTimeWithOffset(value))
     }
@@ -50,13 +53,13 @@ const datePickerProps = computed(() => {
 })
 
 const timePickerProps = computed(() => {
-  const timePickerProps = getCompProps(props.modelValue, false)
+  const timePickerProps = { ...compProps.value }
   timePickerProps['ampm-in-title'] = true
-  if (props.modelValue.data) timePickerProps.modelValue = getShortTime(props.modelValue.data.slice(11))
+  if (localData.value) timePickerProps.modelValue = getShortTime(localData.value.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))
+    if (!localData.value) return
+    console.log('set time', value, localData.value.slice(0, 10), localData.value.slice(15))
+    props.statefulLayout.input(props.modelValue, localData.value.slice(0, 11) + value + localData.value.slice(16))
   }
   return timePickerProps
 })

package/src/components/nodes/expansion-panels.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { toRef } from 'vue'
 import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText } from 'vuetify/components/VExpansionPanel'
 import { VContainer, VRow } from 'vuetify/components/VGrid'
 import { VIcon } from 'vuetify/components/VIcon'
@@ -6,12 +7,12 @@ import { isSection } from '@json-layout/core'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
 import ChildSubtitle from '../fragments/child-subtitle.vue'
-import { getCompProps } from '../../utils/index.js'
+import useNode from '../../composables/use-node.js'
 import { useDefaults } from 'vuetify'
 
 useDefaults({}, 'VjsfExpansionPanels')
 
-defineProps({
+const props = defineProps({
   modelValue: {
     /** @type import('vue').PropType<import('../../types.js').VjsfExpansionPanelsNode> */
     type: Object,
@@ -24,11 +25,13 @@ defineProps({
   }
 })
 
+const { compProps } = useNode(toRef(props, 'modelValue'), props.statefulLayout)
+
 </script>
 
 <template>
   <section-header :node="modelValue" />
-  <v-expansion-panels v-bind="getCompProps(modelValue, true)">
+  <v-expansion-panels v-bind="compProps">
     <v-expansion-panel
       v-for="(child, i) of modelValue.children"
       :key="child.key"

package/src/components/nodes/file-input.vue

@@ -1,7 +1,7 @@
 <script>
-import { defineComponent, h, computed } from 'vue'
+import { defineComponent, h, computed, toRef } from 'vue'
 import { VFileInput } from 'vuetify/components/VFileInput'
-import { getInputProps, getCompSlots } from '../../utils/index.js'
+import useNode from '../../composables/use-node.js'
 import { useDefaults } from 'vuetify'
 
 export default defineComponent({
@@ -20,20 +20,21 @@ export default defineComponent({
   setup (props) {
     useDefaults({}, 'VjsfFileInput')
 
+    const { inputProps, localData, compSlots } = useNode(
+      toRef(props, 'modelValue'), props.statefulLayout, { layoutPropsMap: ['placeholder', 'accept', 'multiple'] }
+    )
+
     const fieldProps = computed(() => {
-      const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['placeholder', 'accept'])
-      if (props.modelValue.layout.multiple) {
-        fieldProps.multiple = true
-      } else {
-        fieldProps.modelValue = props.modelValue.data ? [props.modelValue.data] : props.modelValue.data
-        fieldProps['onUpdate:modelValue'] = (/** @type string */value) => props.statefulLayout.input(props.modelValue, Array.isArray(value) ? value[0] : value)
+      const fieldProps = { ...inputProps.value }
+      if (fieldProps.multiple) console.error('File input doesn\'t support multiple inputs yet')
+      fieldProps['onUpdate:modelValue'] = (/** @type {File} */value) => {
+        props.statefulLayout.input(props.modelValue, value)
       }
       return fieldProps
     })
-    const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
 
     // @ts-ignore
-    return () => h(VFileInput, fieldProps.value, fieldSlots.value)
+    return () => h(VFileInput, { ...fieldProps.value, modelValue: localData.value }, compSlots.value)
   }
 })