feat(Checkbox/Radio/RadioGroup): add help slot

Resolves nuxt#1957
binhtranhuu · Jul 28, 2024 · 733fd00 · 733fd00
1 parent c2b7cc8
commit 733fd00
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 6 deletions.
diff --git a/docs/content/2.components/checkbox.md b/docs/content/2.components/checkbox.md
@@ -87,6 +87,10 @@ slots:
   [Label]{.italic}
 ::
 
+### `help` :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+
+Like the `#label` slot, use the `#help` slot to override the content of the help text.
+
 ## Props
 
 :component-props

diff --git a/docs/content/2.components/radio-group.md b/docs/content/2.components/radio-group.md
@@ -126,6 +126,10 @@ slots:
   [Label]{.italic}
 ::
 
+### `help` :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+
+Like the `#label` slot, use the `#help` slot to override the content of the help text.
+
 ### `legend`
 
 Use the `#legend` slot to override the content of the legend.

diff --git a/src/runtime/components/forms/Checkbox.vue b/src/runtime/components/forms/Checkbox.vue
@@ -17,11 +17,13 @@
     </div>
     <div v-if="label || $slots.label" :class="ui.inner">
       <label :for="inputId" :class="ui.label">
-        <slot name="label">{{ label }}</slot>
+        <slot name="label" :label="label">{{ label }}</slot>
         <span v-if="required" :class="ui.required">*</span>
       </label>
-      <p v-if="help" :class="ui.help">
-        {{ help }}
+      <p v-if="help || $slots.help" :class="ui.help">
+        <slot name="help" :help="help">
+          {{ help }}
+        </slot>
       </p>
     </div>
   </div>

diff --git a/src/runtime/components/forms/Radio.vue b/src/runtime/components/forms/Radio.vue
@@ -16,11 +16,13 @@
     </div>
     <div v-if="label || $slots.label" :class="ui.inner">
       <label :for="inputId" :class="ui.label">
-        <slot name="label">{{ label }}</slot>
+        <slot name="label" :label="label">{{ label }}</slot>
         <span v-if="required" :class="ui.required">*</span>
       </label>
-      <p v-if="help" :class="ui.help">
-        {{ help }}
+      <p v-if="help || $slots.help" :class="ui.help">
+        <slot name="help" :help="help">
+          {{ help }}
+        </slot>
       </p>
     </div>
   </div>

diff --git a/src/runtime/components/forms/RadioGroup.vue b/src/runtime/components/forms/RadioGroup.vue
@@ -20,6 +20,10 @@
         <template #label>
           <slot name="label" v-bind="{ option, selected: option.selected }" />
         </template>
+
+        <template #help>
+          <slot name="help" v-bind="{ option, selected: option.selected }" />
+        </template>
       </URadio>
     </fieldset>
   </div>