silva
/
adrema-form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix placement of field label

This commit is contained in:
philipp lang 2024-04-10 15:34:49 +02:00
parent 7f27ca0642
commit 75a32db2a7
3 changed files with 5 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/FieldLabel.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<span class="absolute text-gray-600 flex bg-white items-center -top-3 px-1 text-xs @sm:text-sm" :class="{'left-0': inline, 'left-2': !inline}"> <span class="text-gray-600 flex bg-white items-center text-xs @sm:text-sm" :class="{'left-0 ': inline, 'left-2 px-1 absolute -top-3': !inline}">
<span v-text="name"></span> <span v-show="required" class="text-red-800 ml-1">*</span> <span v-text="name"></span> <span v-show="required" class="text-red-800 ml-1">*</span>
<hint :value="hint" class="ml-2" v-if="hint" small></hint> <hint :value="hint" class="ml-2" v-if="hint" small></hint>
</span> </span>

5
src/components/fields/Checkboxes.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div class="relative"> <div class="relative">
<div class="grid grid-cols-1 gap-2 pt-3"> <field-label :name="field.name" :required="field.required" :hint="field.hint" inline></field-label>
<div class="grid grid-cols-1 gap-2 pt-1">
<label v-for="(option, index) in field.options" :key="index" :for="`${innerId}-${index}`" class="block relative flex items-start"> <label v-for="(option, index) in field.options" :key="index" :for="`${innerId}-${index}`" class="block relative flex items-start">
<input :id="`${innerId}-${index}`" v-model="inner" type="checkbox" :name="field.key" :value="option" class="peer absolute invisible" /> <input :id="`${innerId}-${index}`" v-model="inner" type="checkbox" :name="field.key" :value="option" class="peer absolute invisible" />
<span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span> <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
@ -8,8 +9,6 @@
<span class="pl-8 pt-1 @sm:pt-0 text-gray-600 text-sm @sm:text-base" v-text="option"></span> <span class="pl-8 pt-1 @sm:pt-0 text-gray-600 text-sm @sm:text-base" v-text="option"></span>
</label> </label>
</div> </div>
<field-label :name="field.name" :required="field.required" :hint="field.hint" inline></field-label>
</div> </div>
</template> </template>

5
src/components/fields/Radio.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div class="relative"> <div class="relative">
<div class="grid grid-cols-1 gap-2 mt-3"> <field-label :name="field.name" :required="field.required" :hint="field.hint" inline></field-label>
<div class="grid grid-cols-1 gap-2 pt-1">
<label v-for="(option, index) in field.options" :key="index" :for="`${innerId}-${index}`" class="block relative flex items-center"> <label v-for="(option, index) in field.options" :key="index" :for="`${innerId}-${index}`" class="block relative flex items-center">
<input :id="`${innerId}-${index}`" v-model="inner" type="radio" :name="field.key" :value="option" class="peer absolute invisible" /> <input :id="`${innerId}-${index}`" v-model="inner" type="radio" :name="field.key" :value="option" class="peer absolute invisible" />
<span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded-full block"></span> <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded-full block"></span>
@ -8,8 +9,6 @@
<span class="pl-8 text-gray-600 text-sm @sm:text-base" v-text="option"></span> <span class="pl-8 text-gray-600 text-sm @sm:text-base" v-text="option"></span>
</label> </label>
</div> </div>
<field-label :name="field.name" :required="field.required" :hint="field.hint" inline></field-label>
</div> </div>
</template> </template>