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

Enhance CheckboxInput and ToggleSwitchInput Components with Help Slot Positioning (#728)

Browse Source 
- Introduce conditional rendering for help text in CheckboxInput.vue and ToggleSwitchInput.vue, allowing help text to be displayed either above or below the input based on the helpPosition prop.
- Update the structure of the help slot to improve flexibility and user experience.

These changes enhance the usability of the form components by providing clearer guidance to users.
This commit is contained in:
Chirag Chhatrala
2025-03-20 20:03:14 +05:30
committed by GitHub
parent 37a10cbdfa
commit eb493c357c
2 changed files with 34 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,6 +15,19 @@
:theme="theme"
/>
<div>
<slot
v-if="helpPosition === 'above_input'"
name="help"
>
<InputHelp
:help="help"
:help-classes="theme.default.help"
>
<template #after-help>
<slot name="bottom_after_help" />
</template>
</InputHelp>
</slot>
<slot name="label">
<label
:aria-label="id ? id : name"
@@ -28,7 +41,10 @@
>*</span>
</label>
</slot>
<slot name="help">
<slot
v-if="helpPosition === 'below_input'"
name="help"
>
<InputHelp
:help="help"
:help-classes="theme.default.help"

18
client/components/forms/ToggleSwitchInput.vue
View File

@@ -16,6 +16,19 @@
/>
<div>
<slot
v-if="helpPosition === 'above_input'"
name="help"
>
<InputHelp
:help="help"
:help-classes="theme.default.help"
>
<template #after-help>
<slot name="bottom_after_help" />
</template>
</InputHelp>
</slot>
<slot name="label">
<label
:aria-label="id ? id : name"
@@ -29,7 +42,10 @@
>*</span>
</label>
</slot>
<slot name="help">
<slot
v-if="helpPosition === 'below_input'"
name="help"
>
<InputHelp
:help="help"
:help-classes="theme.default.help"