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

Fix layout of Checkbox and Checkboxes

This commit is contained in:
philipp lang 2023-12-27 00:40:06 +01:00
parent b6d4f3d1cb
commit 3eb63e9b49
2 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/fields/Checkbox.vue
View File

@ -1,12 +1,14 @@
<template>
<div class="relative">
<div class="grid grid-cols-1 gap-2 mt-3">
<label :for="field.key" class="block relative flex items-center">
<div class="grid grid-cols-1 gap-2">
<label :for="field.key" class="p-0 block leading-none relative flex items-start">
<input :id="field.key" v-model="inner" type="checkbox" :name="field.key" 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="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded block"></span>
<span class="pl-8 text-gray-600 text-sm @sm:text-base" v-text="field.description"></span>
<span v-show="field.required" class="text-red-800 ml-1">*</span>
<span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block top-0"></span>
<span class="peer-checked:bg-primary left-[0.5rem] top-[0.5rem] w-2 h-2 absolute rounded block top-0"></span>
<span class="pl-8 pt-1 @sm:pt-0 text-gray-600 text-sm @sm:text-base">
<span v-text="field.description"></span>
<span v-show="field.required" class="text-red-800">*</span>
</span>
</label>
</div>
</div>
@ -14,7 +16,6 @@
<script setup>
import {computed} from 'vue';
import FieldLabel from '../FieldLabel.vue';
const emit = defineEmits(['update:modelValue']);
const props = defineProps({

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

@ -1,11 +1,11 @@
<template>
<div class="relative">
<div class="grid grid-cols-1 gap-2 mt-3">
<label v-for="(option, index) in field.options" :key="index" :for="`${field.key}-${index}`" class="block relative flex items-center">
<label v-for="(option, index) in field.options" :key="index" :for="`${field.key}-${index}`" class="block relative flex items-start">
<input :id="`${field.key}-${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="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded block"></span>
<span class="pl-8 text-gray-600 text-sm @sm:text-base" v-text="option"></span>
<span class="peer-checked:bg-primary left-[0.5rem] top-[0.5rem] w-2 h-2 absolute rounded block"></span>
<span class="pl-8 pt-1 @sm:pt-0 text-gray-600 text-sm @sm:text-base" v-text="option"></span>
</label>
</div>