feat(RadioGroup): support allow-uncheck props (#3140)

* fix(Radio): update style

* feat(Radio): add allow-uncheck props for radio-group

* test: update snapshots

Author: anlyyao

src/radio-group/props.ts

@@ -6,6 +6,11 @@
 
 import { TdRadioGroupProps } from './type';
 const props: TdRadioGroupProps = {
+  /** 是否允许取消选中 */
+  allowUncheck: {
+    type: Boolean,
+    value: false,
+  },
   /** 是否开启无边框模式 */
   borderless: {
     type: Boolean,

src/radio-group/radio-group.wxml

@@ -7,13 +7,13 @@
       class="{{prefix}}-radio-option"
       data-index="{{index}}"
       data-value="{{item.value}}"
-      data-allow-uncheck="{{item.allowUncheck || false}}"
+      data-allow-uncheck="{{item.allowUncheck || allowUncheck}}"
       block="{{item.block || true}}"
       label="{{item.label || ''}}"
       value="{{item.value}}"
       checked="{{item.checked || false}}"
       content="{{item.content || ''}}"
-      allow-uncheck="{{item.allowUncheck || false}}"
+      allow-uncheck="{{item.allowUncheck || allowUncheck}}"
       content-disabled="{{item.contentDisabled || false}}"
       readonly="{{item.readonly || false}}"
       disabled="{{item.disabled || false}}"

src/radio-group/type.ts

@@ -7,6 +7,14 @@
 import { KeysType } from '../common/common';
 
 export interface TdRadioGroupProps<T = RadioValue> {
+  /**
+   * 是否允许取消选中
+   * @default false
+   */
+  allowUncheck?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 是否开启无边框模式
    * @default false

src/radio/README.en-US.md

@@ -29,6 +29,7 @@ value | String / Number / Boolean | false | Typescript：`T` `type RadioValue =
 name | params | description
 -- | -- | --
 change | `(checked: boolean)` | \-
+
 ### Radio External Classes
 
 className | Description
@@ -46,6 +47,7 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 style | Object | - | CSS(Cascading Style Sheets) | N
 custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
+allow-uncheck | Boolean | false | \- | N
 borderless | Boolean | false | \- | N
 disabled | Boolean | undefined | \- | N
 icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| 'dot' \| Array<string>` | N

src/radio/README.md

@@ -82,6 +82,7 @@ value | String / Number / Boolean | false | 单选按钮的值。TS 类型：`T`
 名称 | 参数 | 描述
 -- | -- | --
 change | `(checked: boolean)` | 值变化时触发
+
 ### Radio External Classes
 
 类名 | 描述
@@ -99,6 +100,7 @@ t-class-label | 标签样式类
 -- | -- | -- | -- | --
 style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
+allow-uncheck | Boolean | false | 是否允许取消选中 | N
 borderless | Boolean | false | 是否开启无边框模式 | N
 disabled | Boolean | undefined | 是否禁用全部子单选框 | N
 icon | String / Array | 'circle' | 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标；仅在使用 options 时生效。TS 类型：`'circle' \| 'line' \| 'dot' \| Array<string>` | N

src/radio/__test__/__snapshots__/demo.test.js.snap

@@ -3,6 +3,7 @@
 exports[`Radio Radio align demo works fine 1`] = `
 <align>
   <t-radio
+    allowUncheck="{{true}}"
     defaultChecked="{{true}}"
     label="单选"
     value="radio1"
@@ -11,6 +12,7 @@ exports[`Radio Radio align demo works fine 1`] = `
     class="block"
   />
   <t-radio
+    allowUncheck="{{true}}"
     defaultChecked="{{true}}"
     label="单选"
     placement="right"
@@ -22,6 +24,7 @@ exports[`Radio Radio align demo works fine 1`] = `
 exports[`Radio Radio base demo works fine 1`] = `
 <base>
   <t-radio-group
+    allowUncheck="{{true}}"
     options="{{
       Array [
         Object {
@@ -101,6 +104,7 @@ exports[`Radio Radio horizontal demo works fine 1`] = `
 exports[`Radio Radio special demo works fine 1`] = `
 <special>
   <t-radio-group
+    allowUncheck="{{true}}"
     value="{{0}}"
     bind:change="onChange"
   >
@@ -212,6 +216,7 @@ exports[`Radio Radio status demo works fine 1`] = `
 exports[`Radio Radio theme demo works fine 1`] = `
 <theme>
   <t-radio
+    allowUncheck="{{true}}"
     defaultChecked="{{true}}"
     icon="line"
     label="单选"
@@ -221,6 +226,7 @@ exports[`Radio Radio theme demo works fine 1`] = `
     style="height: 32rpx"
   />
   <t-radio
+    allowUncheck="{{true}}"
     defaultChecked="{{true}}"
     icon="dot"
     label="单选"

src/radio/_example/align/index.wxml

@@ -1,5 +1,5 @@
-<t-radio value="radio1" label="单选" default-checked />
+<t-radio value="radio1" allow-uncheck label="单选" default-checked />
 
 <view class="block"></view>
 
-<t-radio value="radio2" label="单选" placement="right" default-checked />
+<t-radio value="radio2" allow-uncheck label="单选" placement="right" default-checked />

src/radio/_example/base/index.wxml

@@ -1 +1 @@
-<t-radio-group bind:change="onChange" value="{{current}}" options="{{options}}" />
+<t-radio-group bind:change="onChange" allow-uncheck value="{{current}}" options="{{options}}" />

src/radio/_example/special/index.wxml

@@ -1,4 +1,4 @@
-<t-radio-group value="{{value}}" bind:change="onChange">
+<t-radio-group value="{{value}}" allow-uncheck bind:change="onChange">
   <view wx:for="{{3}}" wx:key="index" class="card {{value == index ? 'card--active' : ''}}">
     <t-icon wx:if="{{value == index}}" name="check" t-class="card__icon" />
     <t-radio value="{{index}}" label="单选" content="描述信息描述信息描述信息描述信息描述信息" icon="none" borderless />

src/radio/_example/theme/index.wxml

@@ -1,5 +1,5 @@
-<t-radio default-checked="{{true}}" icon="line" label="单选" />
+<t-radio default-checked="{{true}}" allow-uncheck icon="line" label="单选" />
 
 <view class="gutter" style="height: 32rpx"></view>
 
-<t-radio default-checked="{{true}}" icon="dot" label="单选" />
+<t-radio default-checked="{{true}}" allow-uncheck icon="dot" label="单选" />