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

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

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