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

Add label to checkbox

This commit is contained in:
philipp lang 2024-06-18 21:48:41 +02:00
parent d9586511c3
commit bf94349dca
3 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template>
<v-checkbox :id="innerId" v-model="inner" :name="field.key" :label="field.description" :required="field.required" :intro="field.intro" :hint="field.hint"></v-checkbox>
<v-checkbox :id="innerId" v-model="inner" :label="field.name" :description="field.description" :name="field.key" :required="field.required" :intro="field.intro" :hint="field.hint"></v-checkbox>
</template>
<script setup>

4
src/components/fields/Nami.vue
View File

@ -57,7 +57,7 @@
@update:modelValue="toggleMember(member)"
:name="`${field.key}-memberselect-${member.id}`"
:id="`${field.key}-memberselect-${member.id}`"
:label="member.name"
:description="member.name"
intro=""
v-for="member in searchResults.data"
></v-checkbox>
@ -102,7 +102,7 @@
v-model="member[memberField.key]"
:name="`${field.key}-memberattr-${member.id}-${memberField.key}`"
:id="`${field.key}-memberattr-${member.id}-${memberField.key}`"
:label="memberField.description"
:description="memberField.description"
intro=""
:required="memberField.required"
:class="colClassesForField(memberField)"

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

@ -1,6 +1,7 @@
<template>
<div class="relative">
<div class="grid grid-cols-1 gap-2">
<field-label v-if="label" :name="label" :required="required" :hint="hint" inline></field-label>
<div class="grid grid-cols-1 gap-2 pt-1">
<div class="text-sm text-gray-600" v-text="intro" v-if="intro"></div>
<label :for="id" class="p-0 block leading-none relative flex items-start">
<input :id="id" v-model="inner" type="checkbox" :name="name" class="peer absolute invisible" />
@ -8,11 +9,9 @@
class="border-neutral-400 border-4 group-[.box]:border-2 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 group-[.box]:w-4 group-[.box]:h-4 group-[.box]:top-[5px] rounded block top-0"
></span>
<span class="peer-checked:bg-primary left-[0.5rem] top-[0.5rem] group-[.box]:top-[0.58rem] group-[.box]:left-[0.25rem] w-2 h-2 absolute rounded block top-0"></span>
<span v-if="label" class="pl-8 group-[.box]:pl-6 pt-1 @sm:pt-0 @sm:group-[.box]:pt-1 text-gray-600 text-sm @sm:text-base @sm:group-[.box]:text-sm">
<span v-text="label"></span>
<span v-show="required" class="text-red-800"> *</span>
<span v-if="description" class="pl-8 group-[.box]:pl-6 pt-1 @sm:pt-0 @sm:group-[.box]:pt-1 text-gray-600 text-sm @sm:text-base @sm:group-[.box]:text-sm">
<span v-text="description"></span>
</span>
<hint :value="hint" class="ml-2" v-if="hint"></hint>
</label>
</div>
</div>
@ -20,7 +19,7 @@
<script setup>
import {computed} from 'vue';
import Hint from '../Hint.vue';
import FieldLabel from '../FieldLabel.vue';
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
@ -41,6 +40,10 @@ const props = defineProps({
type: String,
default: () => '',
},
description: {
required: false,
type: String,
},
required: {
required: false,
type: Boolean,