Resolve field width issues

This commit is contained in:
Julien Nahum 2024-05-14 17:17:28 +02:00
parent a4b7bfdbe4
commit 017af5b847
2 changed files with 6 additions and 6 deletions

View File

@ -46,7 +46,7 @@
:list="currentFields" :list="currentFields"
group="form-elements" group="form-elements"
item-key="id" item-key="id"
class="grid grid-cols-12 gap-x-3 relative transition-all w-full" class="grid grid-cols-12 relative transition-all w-full"
:class="{'rounded-md bg-blue-50':draggingNewBlock}" :class="{'rounded-md bg-blue-50':draggingNewBlock}"
ghost-class="ghost-item" ghost-class="ghost-item"
:animation="200" :animation="200"
@ -450,12 +450,12 @@ export default {
return (new FormLogicPropertyResolver(field, this.dataFormValue)).isHidden() return (new FormLogicPropertyResolver(field, this.dataFormValue)).isHidden()
}, },
getTargetFieldIndex(currentFieldPageIndex){ getTargetFieldIndex(currentFieldPageIndex){
let targetIndex = 0; let targetIndex = 0
if (this.currentFieldGroupIndex > 0) { if (this.currentFieldGroupIndex > 0) {
for (let i = 0; i < this.currentFieldGroupIndex; i++) { for (let i = 0; i < this.currentFieldGroupIndex; i++) {
targetIndex += this.fieldGroups[i].length; targetIndex += this.fieldGroups[i].length
} }
targetIndex += currentFieldPageIndex; targetIndex += currentFieldPageIndex
} else { } else {
targetIndex = currentFieldPageIndex targetIndex = currentFieldPageIndex
} }

View File

@ -5,7 +5,7 @@
:class="[ :class="[
getFieldWidthClasses(field), getFieldWidthClasses(field),
{ {
'group/nffield hover:bg-gray-100/50 relative hover:z-10 w-[calc(100%+30px)] mx-[-15px] px-[15px] transition-colors hover:border-gray-200 dark:hover:bg-gray-900 border-dashed border border-transparent box-border dark:hover:border-blue-900 rounded-md':adminPreview, 'group/nffield hover:bg-gray-100/50 relative hover:z-10 mx-[-15px] px-[15px] transition-colors hover:border-gray-200 dark:hover:bg-gray-900 border-dashed border border-transparent box-border dark:hover:border-blue-900 rounded-md':adminPreview,
'bg-blue-50 hover:!bg-blue-50 dark:bg-gray-800 rounded-md': beingEdited 'bg-blue-50 hover:!bg-blue-50 dark:bg-gray-800 rounded-md': beingEdited
}]" }]"
> >
@ -248,7 +248,7 @@ export default {
this.workingFormStore.openAddFieldSidebar(this.field) this.workingFormStore.openAddFieldSidebar(this.field)
}, },
getFieldWidthClasses(field) { getFieldWidthClasses(field) {
if (!field.width || field.width === 'full') return 'col-span-full' if (!field.width || field.width === 'full') return 'col-span-full w-full'
else if (field.width === '1/2') { else if (field.width === '1/2') {
return 'w-full sm:col-span-6 col-span-full' return 'w-full sm:col-span-6 col-span-full'
} else if (field.width === '1/3') { } else if (field.width === '1/3') {