add text valign

This commit is contained in:
Pete Matsyburka
2025-01-24 23:08:44 +02:00
parent 5e27cc36c6
commit 4e5157d1ee
4 changed files with 35 additions and 16 deletions
+6 -3
View File
@@ -183,7 +183,7 @@
v-else
ref="textContainer"
dir="auto"
class="flex items-center px-0.5 w-full"
class="flex px-0.5 w-full"
:class="{ ...alignClasses, ...fontClasses }"
>
<span
@@ -327,13 +327,16 @@ export default {
},
alignClasses () {
if (!this.field.preferences) {
return {}
return { 'items-center': true }
}
return {
'text-center': this.field.preferences.align === 'center',
'text-left': this.field.preferences.align === 'left',
'text-right': this.field.preferences.align === 'right'
'text-right': this.field.preferences.align === 'right',
'items-center': !this.field.preferences.valign || this.field.preferences.valign === 'center',
'items-start': this.field.preferences.valign === 'top',
'items-end': this.field.preferences.valign === 'bottom'
}
},
fontClasses () {
+7 -4
View File
@@ -160,15 +160,15 @@
</div>
<div
ref="touchValueTarget"
class="flex items-center h-full w-full field-area"
class="flex h-full w-full field-area"
dir="auto"
:class="[isValueInput ? 'bg-opacity-50' : 'bg-opacity-80', field.type === 'heading' ? 'bg-gray-50' : bgColors[submitterIndex % bgColors.length], isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas) ? fontClasses : 'justify-center']"
:class="[isValueInput ? 'bg-opacity-50' : 'bg-opacity-80', field.type === 'heading' ? 'bg-gray-50' : bgColors[submitterIndex % bgColors.length], isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas) ? fontClasses : 'justify-center items-center']"
@click="focusValueInput"
>
<span
v-if="field"
class="flex justify-center items-center space-x-1"
:class="{ 'w-full': ['cells', 'checkbox'].includes(field.type), 'h-full': !isValueInput }"
:class="{ 'w-full': ['cells', 'checkbox'].includes(field.type), 'h-full': !isValueInput && !isDefaultValuePresent }"
>
<div
v-if="isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas && field.type !== 'checkbox')"
@@ -403,10 +403,13 @@ export default {
},
fontClasses () {
if (!this.field.preferences) {
return {}
return { 'items-center': true }
}
return {
'items-center': !this.field.preferences.valign || this.field.preferences.valign === 'center',
'items-start': this.field.preferences.valign === 'top',
'items-end': this.field.preferences.valign === 'bottom',
'justify-center': this.field.preferences.align === 'center',
'justify-start': this.field.preferences.align === 'left',
'justify-end': this.field.preferences.align === 'right',