mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-25 09:20:36 +01:00
feat(components): add ui field in items (#4060)
Co-authored-by: Jakub <jakub.michalek@freelo.io> Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
@@ -12,6 +12,8 @@ export type RadioGroupItem = {
|
||||
description?: string
|
||||
disabled?: boolean
|
||||
value?: RadioGroupValue
|
||||
class?: any
|
||||
ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'description'>
|
||||
[key: string]: any
|
||||
} | RadioGroupValue
|
||||
|
||||
@@ -176,25 +178,25 @@ function onUpdate(value: any) {
|
||||
</slot>
|
||||
</legend>
|
||||
|
||||
<component :is="variant === 'list' ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" :class="ui.item({ class: props.ui?.item })">
|
||||
<div :class="ui.container({ class: props.ui?.container })">
|
||||
<component :is="variant === 'list' ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })">
|
||||
<div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
|
||||
<RadioGroupItem
|
||||
:id="item.id"
|
||||
:value="item.value"
|
||||
:disabled="item.disabled"
|
||||
:class="ui.base({ class: props.ui?.base, disabled: item.disabled })"
|
||||
:class="ui.base({ class: [props.ui?.base, item.ui?.base], disabled: item.disabled })"
|
||||
>
|
||||
<RadioGroupIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
|
||||
<RadioGroupIndicator :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" />
|
||||
</RadioGroupItem>
|
||||
</div>
|
||||
|
||||
<div v-if="(item.label || !!slots.label) || (item.description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
|
||||
<component :is="variant === 'list' ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" :class="ui.label({ class: props.ui?.label })">
|
||||
<div v-if="(item.label || !!slots.label) || (item.description || !!slots.description)" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
|
||||
<component :is="variant === 'list' ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
|
||||
<slot name="label" :item="item" :model-value="(modelValue as RadioGroupValue)">
|
||||
{{ item.label }}
|
||||
</slot>
|
||||
</component>
|
||||
<p v-if="item.description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
|
||||
<p v-if="item.description || !!slots.description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
|
||||
<slot name="description" :item="item" :model-value="(modelValue as RadioGroupValue)">
|
||||
{{ item.description }}
|
||||
</slot>
|
||||
|
||||
Reference in New Issue
Block a user