Spreadsheet layout for ListElement
Create a simple, spreadsheet-like layout for ListElement using presets.
First, create a preset in vueform.config.js:
js
// vueform.config.js
export default {
// ...
presets: {
spreadsheet: {
overrideClasses: {
ListElement: {
list_md: '',
},
ObjectElement: {
wrapper: 'flex form-border-input',
wrapper_md: '',
},
},
addClasses: {
ListElement: {
listItem: '-mt-px h-[calc(100%+1px)]',
},
},
},
cell: {
addClasses: (form$, el$) => ({
ElementLayout: {
container_md: '!col-auto',
},
TextElement: {
inputContainer: 'w-[calc(100%+2px)] -ml-0.5',
inputContainer_md: '!rounded-none',
inputContainer_focused: 'relative z-2',
},
ElementLabel: {
container: [
el$?.path.includes('.0.') ? '' : 'hidden',
'justify-center font-semibold',
],
},
}),
},
},
};Then add presets to the list:
vue
<script setup>
import { ref, computed } from 'vue'
const schema = ref({
spreadsheet: {
type: 'list',
initial: 5,
presets: ['spreadsheet'],
object: {
presets: ['spreadsheet'],
schema: {
a: {
type: 'text',
label: 'Label 1',
presets: ['cell'],
},
b: {
type: 'text',
label: 'Label 2',
presets: ['cell'],
},
c: {
type: 'text',
label: 'Label 3',
presets: ['cell'],
},
d: {
type: 'text',
label: 'Label 4',
presets: ['cell'],
},
e: {
type: 'text',
label: 'Label 5',
presets: ['cell'],
},
f: {
type: 'text',
label: 'Label 6',
presets: ['cell'],
},
},
},
},
});
</script>
<template>
<div class="max-w-[500px] mx-auto mt-10">
<Vueform :schema />
</div>
</template>
