matt
/
opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix checkbox input (#582) 

* fix checkbox input

* fix divs

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Favour Olayinka 2024-10-19 10:04:47 +01:00 committed by GitHub
parent e737108b0e
commit 0208b0caa1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 37 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
client/components/forms/CheckboxInput.vue
View File

@ -1,10 +1,11 @@
<template>
<input-wrapper v-bind="inputWrapperProps">
<InputWrapper v-bind="inputWrapperProps">
<template #label>
<span />
</template>
<v-checkbox
<div class="flex space-x-2 items-center">
<VCheckbox
:id="id ? id : name"
v-model="compVal"
:value="value"
@ -12,39 +13,51 @@
:name="name"
:color="color"
:theme="theme"
>
<slot
name="label"
>
<span
:class="[
theme.SelectInput.fontSize,
]"
>{{ label }}</span>
<span
v-if="required"
class="text-red-500 required-dot"
>*</span>
</slot>
</v-checkbox>
/>
<div>
<slot name="label">
<label
:aria-label="id ? id : name"
:for="id ? id : name"
:class="theme.default.fontSize"
>
{{ label }}
<span
v-if="required"
class="text-red-500 required-dot"
>*</span>
</label>
</slot>
<slot name="help">
<InputHelp
:help="help"
:help-classes="theme.default.help"
>
<template #after-help>
<slot name="bottom_after_help" />
</template>
</InputHelp>
</slot>
</div>
</div>
<template #help>
<slot name="help" />
<span class="hidden" />
</template>
<template #error>
<slot name="error" />
</template>
</input-wrapper>
</InputWrapper>
</template>
<script>
import { inputProps, useFormInput } from "./useFormInput.js"
import VCheckbox from "./components/VCheckbox.vue"
import InputWrapper from "./components/InputWrapper.vue"
import { inputProps, useFormInput } from './useFormInput.js'
import VCheckbox from './components/VCheckbox.vue'
import InputWrapper from './components/InputWrapper.vue'
export default {
name: "CheckboxInput",
name: 'CheckboxInput',
components: { InputWrapper, VCheckbox },
props: {
@ -59,9 +72,8 @@ export default {
},
mounted() {
if (!this.compVal) {
if (!this.compVal)
this.compVal = false
}
},
}
</script>