@koumoul/vjsf 3.0.0-beta.3 → 3.0.0-beta.30

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

@@ -0,0 +1,36 @@
+<script>
+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) {
+    // @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

@@ -16,7 +16,12 @@ const props = defineProps({
   }
 })
 
-const fieldProps = computed(() => getInputProps(props.modelValue, props.statefulLayout))
+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>

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

@@ -18,7 +18,8 @@ const props = defineProps({
 })
 
 const colorPickerProps = computed(() => {
-  const colorPickerProps = getCompProps(props.modelValue, 'colorPicker', true)
+  const colorPickerProps = getCompProps(props.modelValue, true)
+  colorPickerProps.modelValue = props.modelValue.data
   return colorPickerProps
 })
 </script>

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

@@ -21,7 +21,7 @@ const props = defineProps({
 const vDate = useDate()
 
 const datePickerProps = computed(() => {
-  const datePickerProps = getCompProps(props.modelValue, 'datePicker', true)
+  const datePickerProps = getCompProps(props.modelValue, true)
   datePickerProps.hideActions = true
   if (props.modelValue.data) datePickerProps.modelValue = new Date(props.modelValue.data)
   return datePickerProps

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

@@ -1,8 +1,10 @@
 <script setup>
-import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VContainer, VRow, VIcon } from 'vuetify/components'
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VContainer, VRow, VIcon } from 'vuetify/components'
+import { computed } from 'vue'
 import { isSection } from '@json-layout/core'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
+import { getCompProps } from '../../utils/index.js'
 
 defineProps({
   modelValue: {
@@ -21,7 +23,7 @@ defineProps({
 
 <template>
   <section-header :node="modelValue" />
-  <v-expansion-panels>
+  <v-expansion-panels v-bind="getCompProps(modelValue, true)">
     <v-expansion-panel
       v-for="(child, i) of modelValue.children"
       :key="child.key"
@@ -37,16 +39,24 @@ defineProps({
         </v-icon>
         {{ child.layout.title ?? child.layout.label }}
       </v-expansion-panel-title>
-      <v-container fluid>
-        <v-row>
-          <node
-            v-for="grandChild of isSection(child) ? child.children : [child]"
-            :key="grandChild.fullKey"
-            :model-value="/** @type import('../../types.js').VjsfNode */(grandChild)"
-            :stateful-layout="statefulLayout"
-          />
-        </v-row>
-      </v-container>
+      <v-expansion-panel-text>
+        <v-container fluid>
+          <v-row>
+            <node
+              v-for="grandChild of isSection(child) ? child.children : [child]"
+              :key="grandChild.fullKey"
+              :model-value="/** @type import('../../types.js').VjsfNode */(grandChild)"
+              :stateful-layout="statefulLayout"
+            />
+          </v-row>
+        </v-container>
+      </v-expansion-panel-text>
     </v-expansion-panel>
   </v-expansion-panels>
 </template>
+
+<style>
+.vjsf-node-expansion-panels .v-expansion-panel-text__wrapper {
+  padding: 0;
+}
+</style>

package/src/components/nodes/list.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { watch, computed, ref } from 'vue'
+import { useTheme } from 'vuetify'
 import { VList, VListItem, VListItemAction, VBtn, VMenu, VIcon, VSheet, VSpacer, VDivider, VRow, VListSubheader } from 'vuetify/components'
 import { isSection, clone } from '@json-layout/core'
 import Node from '../node.vue'
@@ -19,6 +20,8 @@ const props = defineProps({
   }
 })
 
+const theme = useTheme()
+
 /* use composable for drag and drop */
 const { activeDnd, sortableArray, draggable, hovered, dragging, itemBind, handleBind } = useDnd(props.modelValue.children, () => {
   props.statefulLayout.input(props.modelValue, sortableArray.value.map((child) => child.data))
@@ -27,7 +30,7 @@ watch(() => props.modelValue.children, (array) => { sortableArray.value = array
 
 /* manage hovered and edited items */
 const editedItem = computed(() => {
-  return props.statefulLayout.activeItems[props.modelValue.fullKey]
+  return props.statefulLayout.activatedItems[props.modelValue.fullKey]
 })
 const menuOpened = ref(-1)
 const activeItem = computed(() => {
@@ -48,10 +51,51 @@ const buttonDensity = computed(() => {
   return props.modelValue.options.density
 })
 
+const pushEmptyItem = () => {
+  const newData = (props.modelValue.data ?? []).concat([undefined])
+  props.statefulLayout.input(props.modelValue, newData)
+  if (props.modelValue.layout.listEditMode === 'inline-single') {
+    props.statefulLayout.activateItem(props.modelValue, newData.length - 1)
+  }
+}
+
+/**
+ * @param {number} childIndex
+ */
+const deleteItem = (childIndex) => {
+  const newData = [...props.modelValue.data.slice(0, childIndex), ...props.modelValue.data.slice(childIndex + 1)]
+  props.statefulLayout.input(props.modelValue, newData)
+  menuOpened.value = -1
+}
+
+/**
+ * @param {import('@json-layout/core').StateNode} child
+ * @param {number} childIndex
+ */
+const duplicateItem = (child, childIndex) => {
+  const newData = [...props.modelValue.data.slice(0, childIndex), clone(child.data), ...props.modelValue.data.slice(childIndex)]
+  props.statefulLayout.input(props.modelValue, newData)
+  if (props.modelValue.layout.listEditMode === 'inline-single') {
+    props.statefulLayout.activateItem(props.modelValue, childIndex + 1)
+  }
+  menuOpened.value = -1
+}
+
+const itemBorderColor = computed(() => (/** @type {import('@json-layout/core').StateNode} */child, /** @type {number} */childIndex) => {
+  if (editedItem.value === childIndex) return theme.current.value.colors.primary
+  if (child.validated && (child.error || child.childError)) return theme.current.value.colors.error
+  if (props.modelValue.options.readOnly) return 'transparent'
+  if (activeItem.value === childIndex) return theme.current.value.colors.primary
+  return 'transparent'
+})
+
 </script>
 
 <template>
-  <v-sheet :elevation="1">
+  <v-sheet
+    :elevation="2"
+    rounded
+  >
     <v-list :density="modelValue.options.density">
       <v-list-subheader v-if="modelValue.layout.title">
         {{ modelValue.layout.title }}
@@ -64,7 +108,8 @@ const buttonDensity = computed(() => {
           v-bind="itemBind(childIndex)"
           :density="modelValue.options.density"
           :draggable="draggable === childIndex"
-          :variant="editedItem === childIndex ? 'outlined' : 'flat'"
+          variant="flat"
+          :style="`border: 1px solid ${itemBorderColor(child, childIndex)}`"
           class="pa-1 vjsf-list-item"
         >
           <v-row class="ma-0">
@@ -76,100 +121,110 @@ const buttonDensity = computed(() => {
             />
           </v-row>
           <template
-            v-if="activeItem === childIndex"
+            v-if="!modelValue.options.readOnly && modelValue.layout.listActions.length"
             #append
           >
             <div>
-              <v-list-item-action
-                v-if="modelValue.layout.listActions.includes('edit') && modelValue.layout.listEditMode === 'inline-single'"
-              >
+              <v-list-item-action v-if="activeItem !== childIndex">
                 <v-btn
-                  v-if="editedItem !== childIndex"
-                  :title="modelValue.messages.edit"
-                  icon="mdi-pencil"
+                  style="visibility:hidden"
                   variant="text"
-                  color="primary"
                   :density="buttonDensity"
-                  @click="statefulLayout.activateItem(modelValue, childIndex)"
-                />
-                <v-btn
-                  v-else
-                  :title="modelValue.messages.edit"
                   icon="mdi-pencil"
-                  variant="flat"
-                  color="primary"
-                  :density="buttonDensity"
-                  @click="statefulLayout.deactivateItem(modelValue)"
                 />
               </v-list-item-action>
-              <v-list-item-action
-                v-if="editedItem === undefined && modelValue.layout.listActions.includes('sort') && activeDnd"
-              >
-                <v-btn
-                  :title="modelValue.messages.sort"
-                  icon="mdi-arrow-up-down"
-                  variant="plain"
-                  :density="buttonDensity"
-                  v-bind="handleBind(childIndex)"
-                />
-              </v-list-item-action>
-              <v-list-item-action
-                v-if="editedItem === undefined && (modelValue.layout.listActions.includes('delete') || modelValue.layout.listActions.includes('duplicate') || modelValue.layout.listActions.includes('sort'))"
-              >
-                <v-menu
-                  location="bottom end"
-                  @update:model-value="value => {menuOpened = value ? childIndex : -1}"
+              <template v-else>
+                <v-list-item-action
+                  v-if="modelValue.layout.listActions.includes('edit') && modelValue.layout.listEditMode === 'inline-single'"
                 >
-                  <template #activator="{props: activatorProps}">
-                    <v-btn
-                      v-bind="activatorProps"
-                      icon="mdi-dots-vertical"
-                      variant="plain"
-                      slim
-                      :density="buttonDensity"
-                    />
-                  </template>
-                  <v-list :density="modelValue.options.density">
-                    <v-list-item
-                      v-if="modelValue.layout.listActions.includes('delete')"
-                      base-color="warning"
-                      @click="statefulLayout.input(modelValue, [...modelValue.data.slice(0, childIndex), ...modelValue.data.slice(childIndex + 1)])"
-                    >
-                      <template #prepend>
-                        <v-icon icon="mdi-delete" />
-                      </template>
-                      {{ modelValue.messages.delete }}
-                    </v-list-item>
-                    <v-list-item
-                      v-if="modelValue.layout.listActions.includes('duplicate')"
-                      @click="statefulLayout.input(modelValue, [...modelValue.data.slice(0, childIndex), clone(child.data), ...modelValue.data.slice(childIndex)])"
-                    >
-                      <template #prepend>
-                        <v-icon icon="mdi-content-duplicate" />
-                      </template>
-                      {{ modelValue.messages.duplicate }}
-                    </v-list-item>
-                    <v-list-item
-                      v-if="modelValue.layout.listActions.includes('sort')"
-                      @click="statefulLayout.input(modelValue, moveArrayItem(modelValue.data, childIndex, childIndex - 1))"
-                    >
-                      <template #prepend>
-                        <v-icon icon="mdi-arrow-up" />
-                      </template>
-                      {{ modelValue.messages.up }}
-                    </v-list-item>
-                    <v-list-item
-                      v-if="modelValue.layout.listActions.includes('sort')"
-                      @click="statefulLayout.input(modelValue, moveArrayItem(modelValue.data, childIndex, childIndex + 1))"
-                    >
-                      <template #prepend>
-                        <v-icon icon="mdi-arrow-down" />
-                      </template>
-                      {{ modelValue.messages.down }}
-                    </v-list-item>
-                  </v-list>
-                </v-menu>
-              </v-list-item-action>
+                  <v-btn
+                    v-if="editedItem !== childIndex"
+                    :title="modelValue.messages.edit"
+                    icon="mdi-pencil"
+                    variant="text"
+                    color="primary"
+                    :density="buttonDensity"
+                    @click="statefulLayout.activateItem(modelValue, childIndex)"
+                  />
+                  <v-btn
+                    v-else
+                    :title="modelValue.messages.close"
+                    icon="mdi-close"
+                    variant="flat"
+                    color="primary"
+                    :density="buttonDensity"
+                    @click="statefulLayout.deactivateItem(modelValue)"
+                  />
+                </v-list-item-action>
+                <v-list-item-action
+                  v-if="editedItem === undefined && modelValue.layout.listActions.includes('sort') && activeDnd"
+                >
+                  <v-btn
+                    :title="modelValue.messages.sort"
+                    icon="mdi-arrow-up-down"
+                    variant="plain"
+                    :density="buttonDensity"
+                    v-bind="handleBind(childIndex)"
+                  />
+                </v-list-item-action>
+                <v-list-item-action
+                  v-if="editedItem === undefined && (modelValue.layout.listActions.includes('delete') || modelValue.layout.listActions.includes('duplicate') || modelValue.layout.listActions.includes('sort'))"
+                >
+                  <v-menu
+                    location="bottom end"
+                    @update:model-value="value => {menuOpened = value ? childIndex : -1}"
+                  >
+                    <template #activator="{props: activatorProps}">
+                      <v-btn
+                        v-bind="activatorProps"
+                        icon="mdi-dots-vertical"
+                        variant="plain"
+                        slim
+                        :density="buttonDensity"
+                      />
+                    </template>
+                    <v-list :density="modelValue.options.density">
+                      <v-list-item
+                        v-if="modelValue.layout.listActions.includes('delete')"
+                        base-color="warning"
+                        @click="deleteItem(childIndex)"
+                      >
+                        <template #prepend>
+                          <v-icon icon="mdi-delete" />
+                        </template>
+                        {{ modelValue.messages.delete }}
+                      </v-list-item>
+                      <v-list-item
+                        v-if="modelValue.layout.listActions.includes('duplicate')"
+                        @click="duplicateItem(child, childIndex)"
+                      >
+                        <template #prepend>
+                          <v-icon icon="mdi-content-duplicate" />
+                        </template>
+                        {{ modelValue.messages.duplicate }}
+                      </v-list-item>
+                      <v-list-item
+                        v-if="modelValue.layout.listActions.includes('sort')"
+                        @click="statefulLayout.input(modelValue, moveArrayItem(modelValue.data, childIndex, childIndex - 1))"
+                      >
+                        <template #prepend>
+                          <v-icon icon="mdi-arrow-up" />
+                        </template>
+                        {{ modelValue.messages.up }}
+                      </v-list-item>
+                      <v-list-item
+                        v-if="modelValue.layout.listActions.includes('sort')"
+                        @click="statefulLayout.input(modelValue, moveArrayItem(modelValue.data, childIndex, childIndex + 1))"
+                      >
+                        <template #prepend>
+                          <v-icon icon="mdi-arrow-down" />
+                        </template>
+                        {{ modelValue.messages.down }}
+                      </v-list-item>
+                    </v-list>
+                  </v-menu>
+                </v-list-item-action>
+              </template>
             </div>
           </template>
         </v-list-item>
@@ -180,7 +235,7 @@ const buttonDensity = computed(() => {
         <v-btn
           color="primary"
           :density="modelValue.options.density"
-          @click="statefulLayout.input(modelValue, (modelValue.data ?? []).concat([undefined]))"
+          @click="pushEmptyItem"
         >
           {{ modelValue.messages.addItem }}
         </v-btn>

package/src/components/nodes/one-of-select.vue

@@ -1,7 +1,9 @@
 <script setup>
-import { VSelect, VRow } from 'vuetify/components'
-import { shallowRef, watch } from 'vue'
+import { VSelect, VRow, VCol } from 'vuetify/components'
+import { ref, watch, computed, h } from 'vue'
 import { isSection } from '@json-layout/core'
+import { isCompObject } from '@json-layout/vocabulary'
+import { getInputProps } from '../../utils/index.js'
 import Node from '../node.vue'
 
 const props = defineProps({
@@ -17,40 +19,56 @@ const props = defineProps({
   }
 })
 
-/** @type import('vue').ShallowRef<import('@json-layout/core').SkeletonTree | undefined> */
-const activeChildTree = shallowRef(undefined)
+/** @type import('vue').Ref<string | undefined> */
+const activeChildTree = ref(undefined)
 watch(() => props.modelValue, () => {
-  // we set the active oneOf child as the one whose schema validates on the current data
-  if (props.modelValue.fullKey in props.statefulLayout.activeItems) {
-    activeChildTree.value = props.modelValue.skeleton.childrenTrees?.[props.statefulLayout.activeItems[props.modelValue.fullKey]]
+  if (props.modelValue.children?.length === 1) {
+    if (typeof props.modelValue.children[0].key === 'number') {
+      activeChildTree.value = props.modelValue.skeleton.childrenTrees?.[props.modelValue.children[0].key]
+    }
   } else {
     activeChildTree.value = undefined
   }
 }, { immediate: true })
 
-const onChange = (/** @type import('@json-layout/core').SkeletonTree */childTree) => {
+const onChange = (/** @type {string} */childTree) => {
   if (!props.modelValue.skeleton.childrenTrees) return
   props.statefulLayout.activateItem(props.modelValue, props.modelValue.skeleton.childrenTrees.indexOf(childTree))
 }
 
+const fieldProps = computed(() => {
+  const fieldProps = getInputProps(props.modelValue, props.statefulLayout)
+  fieldProps.modelValue = activeChildTree.value
+  fieldProps['onUpdate:modelValue'] = onChange
+  const items = []
+  for (const childTreePointer of props.modelValue.skeleton.childrenTrees || []) {
+    const childTree = props.statefulLayout.compiledLayout.skeletonTrees[childTreePointer]
+    const childLayout = props.statefulLayout.compiledLayout.normalizedLayouts[childTree.root]
+    if (!isCompObject(childLayout) || !childLayout.if || !!props.statefulLayout.evalNodeExpression(props.modelValue, childLayout.if, props.modelValue.data)) {
+      items.push(childTree)
+    }
+  }
+  fieldProps.items = items
+  fieldProps.itemTitle = 'title'
+  fieldProps.itemValue = (/** @type {import('@json-layout/core').SkeletonTree} */childTree) => childTree.root
+  return fieldProps
+})
 </script>
 
 <template>
-  <v-select
-    v-if="modelValue.skeleton.childrenTrees"
-    v-model="activeChildTree"
-    :items="modelValue.skeleton.childrenTrees"
-    item-title="title"
-    return-object
-    :error-messages="modelValue.validated ? modelValue.error : null"
-    @update:model-value="onChange"
-  />
-  <v-row v-if="modelValue.children?.[0]">
-    <node
-      v-for="grandChild of isSection(modelValue.children?.[0]) ? modelValue.children?.[0].children : modelValue.children"
-      :key="grandChild.fullKey"
-      :model-value="/** @type import('../../types.js').VjsfNode */(grandChild)"
-      :stateful-layout="statefulLayout"
-    />
+  <v-row>
+    <v-col v-if="modelValue.skeleton.childrenTrees">
+      <v-select
+        v-bind="fieldProps"
+      />
+    </v-col>
+    <template v-if="modelValue.children?.[0]">
+      <node
+        v-for="grandChild of isSection(modelValue.children?.[0]) ? modelValue.children?.[0].children : modelValue.children"
+        :key="grandChild.fullKey"
+        :model-value="/** @type import('../../types.js').VjsfNode */(grandChild)"
+        :stateful-layout="statefulLayout"
+      />
+    </template>
   </v-row>
 </template>

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

@@ -0,0 +1,50 @@
+<script>
+import { VRadioGroup, VRadio, VSkeletonLoader } from 'vuetify/components'
+import { defineComponent, h, computed } from 'vue'
+import { getInputProps, getCompSlots } from '../../utils/index.js'
+import useGetItems from '../../composables/use-get-items.js'
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfRadioGroupNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+      type: Object,
+      required: true
+    }
+  },
+  setup (props) {
+    const getItems = useGetItems(props)
+
+    const fieldProps = computed(() => {
+      const fieldProps = getInputProps(props.modelValue, props.statefulLayout)
+      return fieldProps
+    })
+
+    const fieldSlots = computed(() => {
+      const slots = getCompSlots(props.modelValue, props.statefulLayout)
+      /** @type {import('vue').VNode[]} */
+      const children = []
+      if (getItems.loading.value) {
+        children.push(h(VSkeletonLoader, { type: 'chip' }))
+      } else {
+        for (const item of getItems.items.value) {
+          children.push(h(VRadio, { label: item.title, value: item.value }))
+        }
+      }
+      slots.default = () => children
+      return slots
+    })
+
+    // @ts-ignore
+    return () => {
+      return h(VRadioGroup, fieldProps.value, fieldSlots.value)
+    }
+  }
+})
+
+</script>

package/src/components/nodes/select.vue

@@ -1,7 +1,8 @@
 <script>
 import { VSelect } from 'vuetify/components'
-import { defineComponent, h, computed, ref, shallowRef } from 'vue'
+import { defineComponent, h, computed } from 'vue'
 import { getInputProps, getCompSlots } 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'
 
@@ -19,38 +20,17 @@ export default defineComponent({
     }
   },
   setup (props) {
-    /** @type import('vue').Ref<import('@json-layout/vocabulary').SelectItems> */
-    const items = shallowRef([])
-    /** @type import('vue').Ref<boolean> */
-    const loading = ref(false)
+    const getItems = useGetItems(props)
 
     const fieldProps = computed(() => {
       const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['multiple'])
       if (props.modelValue.options.readOnly) fieldProps.menuProps = { modelValue: false }
-      fieldProps.loading = loading.value
-      fieldProps.items = items.value
-      fieldProps['onUpdate:menu'] = refresh
+      fieldProps.loading = getItems.loading.value
+      fieldProps.items = getItems.items.value
+      fieldProps.clearable = fieldProps.clearable ?? !props.modelValue.skeleton.required
       return fieldProps
     })
 
-    /** @type import('@json-layout/core').StateTree | null */
-    let lastStateTree = null
-    /** @type Record<string, any> | null */
-    let lastContext = null
-
-    const refresh = async () => {
-      if (props.statefulLayout.stateTree === lastStateTree && props.statefulLayout.options.context === lastContext) return
-      lastStateTree = props.statefulLayout.stateTree
-      lastContext = props.statefulLayout.options.context ?? null
-      loading.value = true
-      items.value = await props.statefulLayout.getItems(props.modelValue)
-      loading.value = false
-    }
-
-    if (!props.modelValue.layout.items) {
-      refresh()
-    }
-
     const fieldSlots = computed(() => {
       const slots = getCompSlots(props.modelValue, props.statefulLayout)
       if (!slots.item) {
@@ -64,7 +44,7 @@ export default defineComponent({
         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
+          item: getItems.prepareSelectedItem(context.item.raw, context.item.value)
         })
       }
       return slots

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

@@ -0,0 +1,36 @@
+<script>
+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) {
+    // @ts-ignore
+    return () => {
+      return h(SelectionGroup, {
+        modelValue: props.modelValue,
+        statefulLayout: props.statefulLayout,
+        type: 'switch'
+      })
+    }
+  }
+})
+
+</script>
+
+<style>
+.vjsf-node-checkbox-group .v-selection-control-group .v-checkbox .v-selection-control {
+  min-height: auto;
+}
+</style>