feat(radio): add extra slot

vexip-ui · Feb 20, 2024 · 61a30b9 · 61a30b9
1 parent 0c580c2
commit 61a30b9
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 13 deletions.
diff --git a/components/radio/radio.vue b/components/radio/radio.vue
@@ -49,7 +49,7 @@ const props = useProps('radio', _props, {
 
 const emit = defineEmits(['update:value'])
 
-defineSlots<{ default: () => any }>()
+defineSlots<{ default: () => any, extra: () => any }>()
 
 const groupState = inject(GROUP_STATE, null)
 
@@ -163,6 +163,9 @@ function handleChange() {
         </div>
       </CollapseTransition>
       <slot>{{ props.label }}</slot>
+      <span :class="nh.be('extra')" @click.capture.prevent>
+        <slot name="extra"></slot>
+      </span>
     </span>
   </label>
 </template>
diff --git a/components/radio/tests/radio.spec.tsx b/components/radio/tests/radio.spec.tsx
@@ -21,16 +21,18 @@ describe('Radio', () => {
     expect(wrapper.find('input[type="radio"]').exists()).toBe(true)
   })
 
-  it('slot', () => {
+  it('slots', () => {
     const wrapper = mount(() => (
       <Radio label={TEXT}>
         {{
-          default: () => <span class={'label'}></span>
+          default: () => <span class={'label'}></span>,
+          extra: () => <span class={'extra'}></span>
         }}
       </Radio>
     ))
 
     expect(wrapper.find('.label').exists()).toBe(true)
+    expect(wrapper.find('.extra').exists()).toBe(true)
     expect(wrapper.find('.vxp-radio__label').text()).toEqual('')
   })
 
@@ -99,7 +101,7 @@ describe('Radio', () => {
   })
 
   it('state', () => {
-    (['success', 'warning', 'error'] as const).forEach(state => {
+    ;(['success', 'warning', 'error'] as const).forEach(state => {
       const wrapper = mount(() => <Radio label={TEXT} state={state}></Radio>)
 
       expect(wrapper.find('.vxp-radio').classes()).toContain(`vxp-radio--${state}`)
@@ -201,7 +203,7 @@ describe('Radio', () => {
   })
 
   it('group state', () => {
-    (['success', 'warning', 'error'] as const).forEach(state => {
+    ;(['success', 'warning', 'error'] as const).forEach(state => {
       const wrapper = mount(() => (
         <RadioGroup state={state}>
           <Radio label={'1'}></Radio>

diff --git a/docs/demos/radio/group/demo.en-US.vue b/docs/demos/radio/group/demo.en-US.vue
@@ -5,7 +5,9 @@
     </Radio>
     <Radio label="Other">
       Other
-      <Input style="margin-inline-start: 6px"></Input>
+      <template #extra>
+        <Input style="margin-inline-start: 6px"></Input>
+      </template>
     </Radio>
   </RadioGroup>
   <p style="margin-top: 10px">

diff --git a/docs/demos/radio/group/demo.zh-CN.vue b/docs/demos/radio/group/demo.zh-CN.vue
@@ -5,7 +5,9 @@
     </Radio>
     <Radio label="其他">
       其他
-      <Input style="margin-inline-start: 6px"></Input>
+      <template #extra>
+        <Input style="margin-inline-start: 6px"></Input>
+      </template>
     </Radio>
   </RadioGroup>
   <p style="margin-top: 10px">

diff --git a/docs/en-US/component/radio.md b/docs/en-US/component/radio.md
@@ -128,9 +128,10 @@ type RadioRawOption =
 
 ### Radio Slots
 
-| Name    | Description                  | Parameters | Since |
-| ------- | ---------------------------- | ---------- | ----- |
-| default | Slot for radio label content | -          | -     |
+| Name    | Description                                                     | Parameters | Since   |
+| ------- | --------------------------------------------------------------- | ---------- | ------- |
+| default | Slot for radio label content                                    | -          | -       |
+| extra   | Slot for extra content, content here will not trigger the radio | -          | `2.3.4` |
 
 ### RadioGroup Props
 

diff --git a/docs/zh-CN/component/radio.md b/docs/zh-CN/component/radio.md
@@ -130,9 +130,10 @@ type RadioRawOption =
 
 ### Radio 插槽
 
-| 名称    | 说明                 | 参数 | 始于 |
-| ------- | -------------------- | ---- | ---- |
-| default | 单选框标签内容的插槽 | -    | -    |
+| 名称    | 说明                                             | 参数 | 始于    |
+| ------- | ------------------------------------------------ | ---- | ------- |
+| default | 单选框标签内容的插槽                             | -    | -       |
+| extra   | 额外内容的插槽，此处的内容被点击将不会选中单选框 | -    | `2.3.4` |
 
 ### RadioGroup 属性