@koumoul/vjsf 3.0.0-beta.5 → 3.0.0-beta.51

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

@@ -0,0 +1,105 @@
+<script>
+import { VSkeletonLoader } from 'vuetify/components/VSkeletonLoader'
+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, toRef } from 'vue'
+import useField from '../../composables/use-node.js'
+import useGetItems from '../../composables/use-get-items.js'
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfCheckboxGroupNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+      type: Object,
+      required: true
+    },
+    type: {
+      type: String,
+      required: true
+    }
+  },
+  setup (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 = { ...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 = { ...compSlots.value }
+
+      if (!slots.default) {
+        slots.default = () => {
+          /** @type {import('vue').VNode[]} */
+          const children = [h(VLabel, { text: fieldProps.value.label })]
+          if (getItems.loading.value) {
+            children.push(h(VSkeletonLoader, { type: 'chip' }))
+          } else {
+            /** @type {import('vue').VNode[]} */
+            const checkboxes = []
+            for (const item of getItems.items.value) {
+              let modelValue = false
+              if (layout.value.multiple) {
+                modelValue = localData.value?.includes(item.value)
+              } else {
+                modelValue = localData.value === item.value
+              }
+              checkboxes.push(h(props.type === 'switch' ? VSwitch : VCheckbox, {
+                label: item.title,
+                hideDetails: true,
+                key: item.key,
+                modelValue,
+                onClick: () => {
+                  let newValue
+                  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)
+                    } else {
+                      newValue.push(item.value)
+                    }
+                  } else {
+                    if (props.modelValue.data === item.value) {
+                      newValue = undefined
+                    } else {
+                      newValue = item.value
+                    }
+                  }
+                  props.statefulLayout.input(props.modelValue, newValue)
+                }
+              }))
+            }
+            children.push(h('div', { class: 'v-selection-control-group' }, checkboxes))
+          }
+          return children
+        }
+      }
+
+      return slots
+    })
+
+    return () => {
+      return h(VInput, fieldProps.value, fieldSlots.value)
+    }
+  }
+})
+
+</script>
+
+<style>
+.vjsf-selection-group .v-selection-control-group>.v-input .v-selection-control {
+  min-height: auto;
+}
+</style>

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

@@ -1,7 +1,8 @@
 <script setup>
-import { VMenu, VTextField } from 'vuetify/components'
-import { computed, ref } from 'vue'
-import { getCompProps, getInputProps } from '../../utils/index.js'
+import { VMenu } from 'vuetify/components/VMenu'
+import { VTextField } from 'vuetify/components/VTextField'
+import { computed, ref, toRef } from 'vue'
+import useField from '../../composables/use-node.js'
 
 const props = defineProps({
   modelValue: {
@@ -21,21 +22,29 @@ 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 ?? !skeleton.value.required
+  fieldProps['onClick:clear'] = () => {
+    props.statefulLayout.input(props.modelValue, null)
+  }
   return fieldProps
 })
 
 const menuProps = computed(() => {
-  const menuProps = getCompProps(props.modelValue, 'menu', false)
+  const menuProps = { ...compProps.value }
   menuProps.closeOnContentClick = false
   menuProps.disabled = true
   return menuProps
 })
 
 const textField = ref(null)
-const menuOpened = ref(false)
+const menuOpened = defineModel('menuOpened', { type: Boolean, default: false })
 
 </script>
 
@@ -43,7 +52,7 @@ const menuOpened = ref(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/node.vue

@@ -1,10 +1,13 @@
 <script setup>
 import { computed } from 'vue'
-import { useTheme } from 'vuetify'
-import { VCol } from 'vuetify/components'
+import { useTheme, useDefaults } from 'vuetify'
+import { VCol } from 'vuetify/components/VGrid'
+import { VDefaultsProvider } from 'vuetify/components/VDefaultsProvider'
 import NodeSlot from './fragments/node-slot.vue'
 import HelpMessage from './fragments/help-message.vue'
 
+useDefaults({}, 'VjsfNode')
+
 const props = defineProps({
   modelValue: {
     /** @type import('vue').PropType<import('../types.js').VjsfNode> */
@@ -27,11 +30,23 @@ const beforeAfterClasses = {
 
 const theme = useTheme()
 
+const indent = computed(() => {
+  if (props.modelValue.parentFullKey === null) return 0
+  if (!props.modelValue.options.indent) return 0
+  if (props.modelValue.layout.comp !== 'section') return 0
+  if (!props.modelValue.layout.title) return 0
+  if (typeof props.modelValue.options.indent === 'number') return props.modelValue.options.indent
+  if (props.modelValue.options.density === 'compact') return 2
+  if (props.modelValue.options.density === 'comfortable') return 4
+  return 6
+})
+
 const nodeClasses = computed(() => {
   let classes = `vjsf-node vjsf-node-${props.modelValue.layout.comp} vjsf-density-${props.modelValue.options.density}`
   if (props.modelValue.options.readOnly) classes += ' vjsf-readonly'
   if (props.modelValue.options.summary) classes += ' vjsf-summary'
   if (theme.current.value.dark) classes += ' vjsf-dark'
+  if (indent.value) classes += ' ml-' + indent.value
   return classes
 })
 
@@ -42,45 +57,47 @@ if (props.modelValue.layout.comp !== 'none' && !props.statefulLayout.options.nod
 </script>
 
 <template>
-  <v-col
-    :cols="modelValue.cols"
-    :class="nodeClasses"
-  >
-    <node-slot
-      v-if="modelValue.layout.slots?.before"
-      key="before"
-      :layout-slot="modelValue.layout.slots?.before"
-      :node="modelValue"
-      :stateful-layout="statefulLayout"
-      :class="beforeAfterClasses[modelValue.options.density]"
-    />
+  <v-defaults-provider :defaults="{global: { density: props.modelValue.options.density }}">
+    <v-col
+      v-if="modelValue.layout.comp !== 'none'"
+      :cols="modelValue.cols"
+      :class="nodeClasses"
+    >
+      <node-slot
+        v-if="modelValue.layout.slots?.before"
+        key="before"
+        :layout-slot="modelValue.layout.slots?.before"
+        :node="modelValue"
+        :stateful-layout="statefulLayout"
+        :class="beforeAfterClasses[modelValue.options.density]"
+      />
 
-    <help-message
-      v-if="modelValue.layout.help"
-      :node="modelValue"
-      :class="beforeAfterClasses[modelValue.options.density]"
-    />
-    <node-slot
-      v-if="modelValue.layout.slots?.component"
-      key="component"
-      :layout-slot="modelValue.layout.slots?.component"
-      :node="modelValue"
-      :stateful-layout="statefulLayout"
-    />
-    <component
-      :is="props.statefulLayout.options.nodeComponents[modelValue.layout.comp]"
-      v-else-if="modelValue.layout.comp !== 'none' "
-      :model-value="modelValue"
-      :stateful-layout="statefulLayout"
-    />
+      <help-message
+        v-if="modelValue.layout.help && !modelValue.options.summary"
+        :node="modelValue"
+      />
+      <node-slot
+        v-if="modelValue.layout.slots?.component"
+        key="component"
+        :layout-slot="modelValue.layout.slots?.component"
+        :node="modelValue"
+        :stateful-layout="statefulLayout"
+      />
+      <component
+        :is="props.statefulLayout.options.nodeComponents[modelValue.layout.comp]"
+        v-else
+        :model-value="modelValue"
+        :stateful-layout="statefulLayout"
+      />
 
-    <node-slot
-      v-if="modelValue.layout.slots?.after"
-      key="after"
-      :layout-slot="modelValue.layout.slots?.after"
-      :node="modelValue"
-      :stateful-layout="statefulLayout"
-      :class="beforeAfterClasses[modelValue.options.density]"
-    />
-  </v-col>
+      <node-slot
+        v-if="modelValue.layout.slots?.after"
+        key="after"
+        :layout-slot="modelValue.layout.slots?.after"
+        :node="modelValue"
+        :stateful-layout="statefulLayout"
+        :class="beforeAfterClasses[modelValue.options.density]"
+      />
+    </v-col>
+  </v-defaults-provider>
 </template>

package/src/components/nodes/autocomplete.vue

@@ -1,9 +1,8 @@
 <script>
-import { VAutocomplete } from 'vuetify/components'
-import { defineComponent, computed, ref, shallowRef, h } from 'vue'
-import { getInputProps, getCompSlots } from '../../utils/index.js'
-import SelectItem from '../fragments/select-item.vue'
-import SelectSelection from '../fragments/select-selection.vue'
+import { VAutocomplete } from 'vuetify/components/VAutocomplete'
+import { useDefaults } from 'vuetify'
+import { defineComponent, computed, h, toRef } from 'vue'
+import useSelectNode from '../../composables/use-select-node.js'
 
 export default defineComponent({
   props: {
@@ -13,75 +12,30 @@ export default defineComponent({
       required: true
     },
     statefulLayout: {
-    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+      /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
       type: Object,
       required: true
     }
   },
   setup (props) {
-    /** @type import('vue').ShallowRef<import('@json-layout/vocabulary').SelectItems> */
-    const items = shallowRef([])
-    /** @type import('vue').Ref<boolean> */
-    const loading = ref(false)
-    /** @type import('vue').Ref<string> */
-    const search = ref('')
+    useDefaults({}, 'VjsfAutocomplete')
+
+    const { getItems, selectProps, selectSlots, localData } = useSelectNode(toRef(props, 'modelValue'), props.statefulLayout)
 
     const fieldProps = computed(() => {
-      const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['multiple'])
-      if (props.modelValue.options.readOnly) fieldProps.menuProps = { modelValue: false }
+      const fieldProps = { ...selectProps.value }
       fieldProps.noFilter = true
       fieldProps['onUpdate:search'] = (/** @type string */searchValue) => {
-        search.value = searchValue
-        refresh()
+        getItems.search.value = searchValue
       }
-      fieldProps['onUpdate:menu'] = refresh
-      fieldProps.items = items.value
-      fieldProps.loading = loading.value
+      fieldProps.items = getItems.items.value
+      fieldProps.loading = getItems.loading.value
+      fieldProps.modelValue = localData.value
       return fieldProps
     })
 
-    /** @type import('@json-layout/core').StateTree | null */
-    let lastStateTree = null
-    /** @type Record<string, any> | null */
-    let lastContext = null
-    /** @type string */
-    let lastSearch = ''
-
-    const refresh = async () => {
-      if (props.statefulLayout.stateTree === lastStateTree && props.statefulLayout.options.context === lastContext && search.value === lastSearch) return
-      loading.value = true
-      items.value = await props.statefulLayout.getItems(props.modelValue, search.value)
-      lastStateTree = props.statefulLayout.stateTree
-      lastContext = props.statefulLayout.options.context ?? null
-      lastSearch = search.value
-      loading.value = false
-    }
-
-    if (!props.modelValue.layout.items) {
-      refresh()
-    }
-
-    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: context.item.raw
-        })
-      }
-      return slots
-    })
-
     // @ts-ignore
-    return () => h(VAutocomplete, fieldProps.value, fieldSlots.value)
+    return () => h(VAutocomplete, fieldProps.value, selectSlots.value)
   }
 })
 

package/src/components/nodes/card.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { VCard } from 'vuetify/components/VCard'
+import { VContainer, VRow } from 'vuetify/components/VGrid'
+import Node from '../node.vue'
+import SectionHeader from '../fragments/section-header.vue'
+import { useDefaults } from 'vuetify'
+
+useDefaults({}, 'VjsfCard')
+
+defineProps({
+  modelValue: {
+    /** @type import('vue').PropType<import('../../types.js').VjsfCardNode> */
+    type: Object,
+    required: true
+  },
+  statefulLayout: {
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+    type: Object,
+    required: true
+  }
+})
+
+</script>
+
+<template>
+  <v-card :title="modelValue.layout.title ?? ''">
+    <v-container fluid>
+      <section-header :node="modelValue" hide-title />
+      <v-row :dense="modelValue.options?.density === 'compact' || modelValue.options?.density === 'comfortable'">
+        <node
+          v-for="child of modelValue.children"
+          :key="child.fullKey"
+          :model-value="/** @type import('../../types.js').VjsfNode */(child)"
+          :stateful-layout="statefulLayout"
+        />
+      </v-row>
+    </v-container>
+  </v-card>
+</template>

package/src/components/nodes/checkbox-group.vue

@@ -0,0 +1,39 @@
+<script>
+import { useDefaults } from 'vuetify'
+import SelectionGroup from '../fragments/selection-group.vue'
+import { defineComponent, h } from 'vue'
+
+export default defineComponent({
+  props: {
+    modelValue: {
+    /** @type import('vue').PropType<import('../../types.js').VjsfCheckboxGroupNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+      type: Object,
+      required: true
+    }
+  },
+  setup (props) {
+    useDefaults({}, 'VjsfCheckboxGroup')
+
+    // @ts-ignore
+    return () => {
+      return h(SelectionGroup, {
+        modelValue: props.modelValue,
+        statefulLayout: props.statefulLayout,
+        type: 'checkbox'
+      })
+    }
+  }
+})
+
+</script>
+
+<style>
+.vjsf-node-checkbox-group .v-selection-control-group .v-checkbox .v-selection-control {
+  min-height: auto;
+}
+</style>

package/src/components/nodes/checkbox.vue

@@ -1,32 +1,37 @@
-<script setup>
-import { VCheckbox } from 'vuetify/components'
-import { computed } from 'vue'
-import { getInputProps } from '../../utils/index.js'
+<script>
+import { defineComponent, h, computed, toRef } from 'vue'
+import { VCheckbox } from 'vuetify/components/VCheckbox'
+import useNode from '../../composables/use-node.js'
+import { useDefaults } from 'vuetify'
 
-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,11 @@
 <script setup>
 import TextFieldMenu from '../fragments/text-field-menu.vue'
-import { VColorPicker } from 'vuetify/components'
-import { computed } from 'vue'
-import { getCompProps } from '../../utils/index.js'
+import { VColorPicker } from 'vuetify/components/VColorPicker'
+import { computed, toRef } from 'vue'
+import useNode from '../../composables/use-node.js'
+import { useDefaults } from 'vuetify'
+
+useDefaults({}, 'VjsfColorPicker')
 
 const props = defineProps({
   modelValue: {
@@ -17,8 +20,11 @@ const props = defineProps({
   }
 })
 
+const { compProps, localData } = useNode(toRef(props, 'modelValue'), props.statefulLayout)
+
 const colorPickerProps = computed(() => {
-  const colorPickerProps = getCompProps(props.modelValue, 'colorPicker', true)
+  const colorPickerProps = { ...compProps.value }
+  colorPickerProps.modelValue = localData.value
   return colorPickerProps
 })
 </script>

package/src/components/nodes/combobox.vue

@@ -1,7 +1,9 @@
 <script>
-import { defineComponent, h, computed, shallowRef, ref } from 'vue'
-import { VCombobox } from 'vuetify/components'
-import { getInputProps, getCompSlots } from '../../utils/index.js'
+import { defineComponent, h, computed, toRef } from 'vue'
+import { VCombobox } from 'vuetify/components/VCombobox'
+import useNode from '../../composables/use-node.js'
+import useGetItems from '../../composables/use-get-items.js'
+import { useDefaults } from 'vuetify'
 
 export default defineComponent({
   props: {
@@ -17,55 +19,30 @@ export default defineComponent({
     }
   },
   setup (props) {
-    /** @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)
+    useDefaults({}, 'VjsfCombobox')
 
-    /** @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)
   }
 })