[new feature] Radio: add shape prop & icon slot (#2651)

packages/address-list/test/__snapshots__/demo.spec.js.snap

@@ -7,13 +7,19 @@ exports[`renders demo correctly 1`] = `
       <div class="van-radio-group">
         <div class="van-cell van-cell--clickable van-address-item">
           <div class="van-cell__value van-cell__value--alone">
-            <div class="van-radio"><span class="van-radio__input"><input type="radio" checked="checked" class="van-radio__control"><i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label"><div class="van-address-item__name">张三，13000000000</div><div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span></div>
+            <div class="van-radio">
+              <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
+                  <!----></i></div><span class="van-radio__label"><div class="van-address-item__name">张三，13000000000</div><div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span>
+            </div>
           </div><i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
             <!----></i>
         </div>
         <div class="van-cell van-cell--clickable van-address-item">
           <div class="van-cell__value van-cell__value--alone">
-            <div class="van-radio"><span class="van-radio__input"><input type="radio" class="van-radio__control"><i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label"><div class="van-address-item__name">李四，1310000000</div><div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span></div>
+            <div class="van-radio">
+              <div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
+                  <!----></i></div><span class="van-radio__label"><div class="van-address-item__name">李四，1310000000</div><div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span>
+            </div>
           </div><i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
             <!----></i>
         </div>
@@ -21,7 +27,10 @@ exports[`renders demo correctly 1`] = `
       <div class="van-address-list__disabled-text">以下地址超出配送范围</div>
       <div class="van-cell van-address-item van-address-item--disabled van-address-item--unswitchable">
         <div class="van-cell__value van-cell__value--alone">
-          <div class="van-radio"><span class="van-radio__input"><input type="radio" class="van-radio__control"><i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label"><div class="van-address-item__name">王五，1320000000</div><div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div></span></div>
+          <div class="van-radio">
+            <div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
+                <!----></i></div><span class="van-radio__label"><div class="van-address-item__name">王五，1320000000</div><div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div></span>
+          </div>
         </div><i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
           <!----></i>
       </div><button class="van-button van-button--danger van-button--large van-button--square van-address-list__add"><span class="van-button__text">新增地址</span></button>

packages/checkbox/en-US.md

@@ -139,7 +139,7 @@ export default {
 | Attribute | Description | Type | Default |
 |------|------|------|------|
 | name | Checkbox name | `any` | - |
-| shape | Can be set to `round` `square` | `String` | `round` |
+| shape | Can be set to `square` | `String` | `round` |
 | v-model | Check status | `Boolean` | `false` |
 | disabled | Diable checkbox | `Boolean` | `false` |
 | label-disabled | Whether to disable label click | `Boolean` | `false` |

packages/checkbox/zh-CN.md

@@ -169,7 +169,7 @@ export default {
 |------|------|------|
 | change | 当绑定值变化时触发的事件 | 当前组件的值 |
 
-### Checkbox Slot
+### Checkbox 插槽
 
 | 名称 | 说明 | slot-scope |
 |------|------|------|

packages/contact-card/test/__snapshots__/demo.spec.js.snap

@@ -13,7 +13,10 @@ exports[`renders demo correctly 1`] = `
         <div class="van-radio-group van-contact-list__group">
           <div class="van-cell van-cell--clickable">
             <div class="van-cell__value van-cell__value--alone">
-              <div class="van-radio"><span class="van-radio__input"><input type="radio" class="van-radio__control"><i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label"><div class="van-contact-list__name">张三，13000000000</div></span></div>
+              <div class="van-radio">
+                <div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
+                    <!----></i></div><span class="van-radio__label"><div class="van-contact-list__name">张三，13000000000</div></span>
+              </div>
             </div><i class="van-icon van-icon-edit van-contact-list__edit" style="color:undefined;font-size:undefined;">
               <!----></i>
           </div>

packages/radio/demo/index.vue

@@ -32,6 +32,21 @@
       </van-radio>
     </demo-block>
 
+    <demo-block :title="$t('customIcon')">
+      <van-radio
+        name="1"
+        value="1"
+        class="demo-radio-group"
+      >
+        {{ $t('customIcon') }}
+        <img
+          slot="icon"
+          slot-scope="props"
+          :src="props.checked ? icon.active : icon.normal"
+        >
+      </van-radio>
+    </demo-block>
+
     <demo-block :title="$t('withCell')">
       <van-radio-group v-model="radio3">
         <van-cell-group>
@@ -62,6 +77,7 @@ export default {
       radio: '单选框',
       text1: '未选中禁用',
       text2: '选中且禁用',
+      customIcon: '自定义图标',
       customColor: '自定义颜色',
       withCell: '与 Cell 组件一起使用'
     },
@@ -69,6 +85,7 @@ export default {
       radio: 'Radio',
       text1: 'Disabled',
       text2: 'Disabled and checked',
+      customIcon: 'Custom Icon',
       customColor: 'Custom Color',
       withCell: 'Inside a Cell'
     }
@@ -78,7 +95,11 @@ export default {
     return {
       radio1: '1',
       radio2: '2',
-      radio3: '1'
+      radio3: '1',
+      icon: {
+        normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
+        active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
+      }
     };
   }
 };
@@ -93,5 +114,9 @@ export default {
       margin-bottom: 10px;
     }
   }
+
+  img {
+    height: 20px;
+  }
 }
 </style>

packages/radio/en-US.md

@@ -46,6 +46,33 @@ export default {
 <van-radio checked-color="#07c160">Radio</van-radio>
 ```
 
+#### Custom Icon
+
+Use icon slot to custom icon
+
+```html
+<van-radio v-model="checked">
+  Custom Icon
+  <img
+    slot="icon"
+    slot-scope="props"
+    :src="props.checked ? icon.active : icon.normal"
+  >
+</van-radio>
+```
+
+```js
+export default {
+  data() {
+    checked: true,
+    icon: {
+      normal: '//img.yzcdn.cn/icon-normal.png',
+      active: '//img.yzcdn.cn/icon-active.png'
+    }
+  }
+}
+```
+
 #### Inside a Cell
 
 ```html
@@ -66,11 +93,13 @@ export default {
 | Attribute | Description | Type | Default |
 |------|------|------|------|
 | name | Radio name | `any` | - |
+| shape | Can be set to `square` | `String` | `round` |
 | disabled | Whether to disable radio | `Boolean` | `false` |
 | label-disabled | Whether to disable label click | `Boolean` | `false` |
 | label-position | Can be set to `left` | `String` | `right` |
 | checked-color | Checked color | `String` | `#1989fa` | - |
 
+
 ### RadioGroup API
 
 | Attribute | Description | Type | Default |
@@ -83,3 +112,10 @@ export default {
 | Event | Description | Parameters |
 |------|------|------|
 | change | Triggered when value changed | current value |
+
+### Radio Slot
+
+| Name | Description | slot-scope |
+|------|------|------|
+| - | Custom label | - |
+| icon | Custom icon | checked: whether to be checked |

packages/radio/index.js

@@ -13,7 +13,11 @@ export default sfc({
     disabled: Boolean,
     checkedColor: String,
     labelPosition: String,
-    labelDisabled: Boolean
+    labelDisabled: Boolean,
+    shape: {
+      type: String,
+      default: 'round'
+    }
   },
 
   computed: {
@@ -29,6 +33,16 @@ export default sfc({
 
     isDisabled() {
       return this.parent ? this.parent.disabled || this.disabled : this.disabled;
+    },
+
+    iconStyle() {
+      const { checkedColor } = this;
+      if (checkedColor && this.currentValue === this.name && !this.isDisabled) {
+        return {
+          borderColor: checkedColor,
+          backgroundColor: checkedColor
+        };
+      }
     }
   },
 
@@ -37,6 +51,12 @@ export default sfc({
   },
 
   methods: {
+    onClickIcon() {
+      if (!this.isDisabled) {
+        this.currentValue = this.name;
+      }
+    },
+
     onClickLabel() {
       if (!this.isDisabled && !this.labelDisabled) {
         this.currentValue = this.name;
@@ -46,31 +66,35 @@ export default sfc({
 
   render(h) {
     const checked = this.currentValue === this.name;
-    const { isDisabled, checkedColor } = this;
+    const CheckIcon = this.$scopedSlots.icon ? (
-    const iconStyle = checkedColor && checked && !isDisabled && { color: checkedColor };
+      this.$scopedSlots.icon({ checked })
+    ) : (
+      <Icon name="success" style={this.iconStyle} />
+    );
+
+    const Label = this.$slots.default && (
+      <span
+        class={bem('label', [this.labelPosition, { disabled: this.isDisabled }])}
+        onClick={this.onClickLabel}
+      >
+        {this.$slots.default}
+      </span>
+    );
 
     return (
       <div
-        class={bem({ disabled: isDisabled })}
+        class={bem()}
         onClick={() => {
           this.$emit('click');
         }}
       >
-        <span class={bem('input')}>
+        <div
-          <input
+          class={bem('icon', [this.shape, { disabled: this.isDisabled, checked }])}
-            vModel={this.currentValue}
+          onClick={this.onClickIcon}
-            type="radio"
+        >
-            class={bem('control')}
+          {CheckIcon}
-            value={this.name}
+        </div>
-            disabled={isDisabled}
+        {Label}
-          />
-          <Icon style={iconStyle} name={checked ? 'checked' : 'circle'} />
-        </span>
-        {this.$slots.default && (
-          <span class={bem('label', this.labelPosition)} onClick={this.onClickLabel}>
-            {this.$slots.default}
-          </span>
-        )}
       </div>
     );
   }

packages/radio/index.less

@@ -4,56 +4,67 @@
   overflow: hidden;
   user-select: none;
 
-  &__input,
+  &__icon,
   &__label {
     display: inline-block;
     vertical-align: middle;
+    line-height: @radio-size;
   }
 
-  &__input {
+  &__icon {
-    height: 1em;
+    height: @radio-size;
-    position: relative;
-    font-size: @radio-size;
-  }
 
-  &__control {
+    .van-icon {
-    position: absolute;
+      font-size: 14px;
-    top: 0;
+      color: transparent;
-    left: 0;
+      text-align: center;
-    opacity: 0;
+      line-height: inherit;
-    margin: 0;
+      width: @radio-size;
-    width: 100%;
+      height: @radio-size;
-    height: 100%;
+      box-sizing: border-box;
+      border: 1px solid @radio-border-color;
+      transition: @radio-transition-duration;
+    }
+
+    &--round {
+      .van-icon {
+        border-radius: 100%;
+      }
+    }
+
+    &--checked {
+      .van-icon {
+        color: @white;
+        border-color: @radio-checked-icon-color;
+        background-color: @radio-checked-icon-color;
+      }
+    }
+
+    &--disabled {
+      .van-icon {
+        border-color: @radio-disabled-icon-color;
+        background-color: @radio-disabled-background-color;
+      }
+    }
+
+    &--disabled&--checked {
+      .van-icon {
+        color: @radio-disabled-icon-color;
+      }
+    }
   }
 
   &__label {
-    line-height: @radio-size;
+    color: @radio-label-color;
-    margin-left: 10px;
+    margin-left: @radio-label-margin;
 
     &--left {
       float: left;
-      margin: 0 10px 0 0;
+      margin: 0 @radio-label-margin 0 0;
     }
-  }
 
-  .van-icon {
+    &--disabled {
-    width: 1em;
+      color: @radio-disabled-label-color;
-    pointer-events: none;
-  }
-
-  .van-icon-checked {
-    color: @blue;
-  }
-
-  .van-icon-circle {
-    color: @gray;
-  }
-
-  &--disabled {
-    .van-icon {
-      color: @gray-light;
-      border-radius: 100%;
-      background-color: @background-color;
     }
   }
 }

packages/radio/test/__snapshots__/demo.spec.js.snap

@@ -4,20 +4,42 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="demo-radio-group van-radio-group">
-      <div class="van-radio"><span class="van-radio__input"><input type="radio" checked="checked" class="van-radio__control"><i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label">单选框 1</span></div>
+      <div class="van-radio">
-      <div class="van-radio"><span class="van-radio__input"><input type="radio" class="van-radio__control"><i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label">单选框 2</span></div>
+        <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
+            <!----></i></div><span class="van-radio__label">单选框 1</span>
+      </div>
+      <div class="van-radio">
+        <div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
+            <!----></i></div><span class="van-radio__label">单选框 2</span>
+      </div>
     </div>
   </div>
   <div>
     <div class="demo-radio-group van-radio-group">
-      <div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" class="van-radio__control"><i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label">单选框 1</span></div>
+      <div class="van-radio">
-      <div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" checked="checked" class="van-radio__control"><i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label">单选框 2</span></div>
+        <div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
+            <!----></i></div><span class="van-radio__label van-radio__label--disabled">单选框 1</span>
+      </div>
+      <div class="van-radio">
+        <div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled van-radio__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
+            <!----></i></div><span class="van-radio__label van-radio__label--disabled">单选框 2</span>
+      </div>
     </div>
   </div>
   <div>
-    <div class="demo-radio-group van-radio"><span class="van-radio__input"><input type="radio" checked="checked" class="van-radio__control"><i class="van-icon van-icon-checked" style="color:#07c160;font-size:undefined;"><!----></i></span><span class="van-radio__label">
+    <div class="demo-radio-group van-radio">
+      <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;border-color:#07c160;background-color:#07c160;">
+          <!----></i></div><span class="van-radio__label">
       单选框
-    </span></div>
+    </span>
+    </div>
+  </div>
+  <div>
+    <div class="demo-radio-group van-radio">
+      <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><img src="https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png"></div><span class="van-radio__label">
+      自定义图标
+      </span>
+    </div>
   </div>
   <div>
     <div class="van-radio-group">
@@ -25,13 +47,19 @@ exports[`renders demo correctly 1`] = `
         <div class="van-cell van-cell--clickable">
           <div class="van-cell__title"><span>单选框1</span></div>
           <div class="van-cell__value">
-            <div class="van-radio"><span class="van-radio__input"><input type="radio" checked="checked" class="van-radio__control"><i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"><!----></i></span></div>
+            <div class="van-radio">
+              <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
+                  <!----></i></div>
+            </div>
           </div>
         </div>
         <div class="van-cell van-cell--clickable">
           <div class="van-cell__title"><span>单选框2</span></div>
           <div class="van-cell__value">
-            <div class="van-radio"><span class="van-radio__input"><input type="radio" class="van-radio__control"><i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span></div>
+            <div class="van-radio">
+              <div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
+                  <!----></i></div>
+            </div>
           </div>
         </div>
       </div>

packages/radio/test/index.spec.js

@@ -0,0 +1,45 @@
+import Radio from '..';
+import RadioGroup from '../../radio-group';
+import { mount } from '../../../test/utils';
+
+test('radio-group change', () => {
+  const wrapper = mount({
+    template: `
+      <radio-group v-model="result" @change="$emit('change', $event)">
+        <radio
+          v-for="item in list"
+          :key="item"
+          :name="item"
+          :disabled="item === 'd'"
+        >
+          label
+        </radio>
+      </radio-group>
+    `,
+    components: {
+      Radio,
+      RadioGroup
+    },
+    data() {
+      return {
+        result: 'a',
+        list: ['a', 'b', 'c', 'd']
+      };
+    }
+  });
+
+  const icons = wrapper.findAll('.van-radio__icon');
+  const labels = wrapper.findAll('.van-radio__label');
+
+  icons.at(2).trigger('click');
+  expect(wrapper.vm.result).toEqual('c');
+  expect(wrapper.emitted('change')[0][0]).toEqual('c');
+
+  labels.at(1).trigger('click');
+  expect(wrapper.vm.result).toEqual('b');
+  expect(wrapper.emitted('change')[1][0]).toEqual('b');
+
+  icons.at(3).trigger('click');
+  labels.at(3).trigger('click');
+  expect(wrapper.vm.result).toEqual('b');
+});

packages/radio/zh-CN.md

@@ -48,6 +48,33 @@ export default {
 <van-radio checked-color="#07c160">复选框</van-radio>
 ```
 
+#### 自定义图标
+
+通过 icon 插槽自定义图标，可以通过 `slot-scope` 判断是否为选中状态
+
+```html
+<van-radio v-model="checked">
+  自定义图标
+  <img
+    slot="icon"
+    slot-scope="props"
+    :src="props.checked ? icon.active : icon.normal"
+  >
+</van-radio>
+```
+
+```js
+export default {
+  data() {
+    checked: true,
+    icon: {
+      normal: '//img.yzcdn.cn/icon-normal.png',
+      active: '//img.yzcdn.cn/icon-active.png'
+    }
+  }
+}
+```
+
 #### 与 Cell 组件一起使用
 
 此时你需要再引入`Cell`和`CellGroup`组件。
@@ -70,6 +97,7 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
 | name | 标识符 | 任意类型 | - | - |
+| shape | 形状，可选值为 `square` | `String` | `round` | 1.5.8 |
 | disabled | 是否为禁用状态 | `Boolean` | `false` | - |
 | label-disabled | 是否禁用文本内容点击 | `Boolean` | `false` | 1.1.13 |
 | label-position | 文本位置，可选值为 `left` | `String` | `right` | 1.1.13 |
@@ -87,3 +115,10 @@ export default {
 | 事件名称 | 说明 | 回调参数 |
 |------|------|------|
 | change | 当绑定值变化时触发的事件 | 当前选中项的 name |
+
+### Radio 插槽
+
+| 名称 | 说明 | slot-scope |
+|------|------|------|
+| - | 自定义文本 | - |
+| icon | 自定义图标 | checked: 是否为选中状态 |

packages/style/var.less

@@ -97,6 +97,14 @@
 
 // Radio
 @radio-size: 20px;
+@radio-border-color: @gray-light;
+@radio-transition-duration: .2s;
+@radio-label-margin: 10px;
+@radio-label-color: @text-color;
+@radio-checked-icon-color: @blue;
+@radio-disabled-icon-color: @gray;
+@radio-disabled-label-color: @gray;
+@radio-disabled-background-color: @border-color;
 
 // Swipe
 @swipe-indicator: 6px;