From 86184e090e2db3584864e8649aab8b87bf6d1f0f Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Tue, 24 Apr 2018 09:51:52 +0800
Subject: [PATCH] [bugfix] Checkbox: should not render label when label is
 empty (#920)

---
 docs/demos/views/checkbox.vue   | 52 ++++++++++++++-------------------
 docs/demos/views/radio.vue      | 19 ++++--------
 docs/markdown/en-US/checkbox.md | 14 ++++++---
 docs/markdown/en-US/radio.md    |  8 +++--
 docs/markdown/zh-CN/checkbox.md | 12 ++++----
 docs/markdown/zh-CN/radio.md    |  8 +++--
 packages/checkbox/index.vue     |  2 +-
 packages/radio/index.vue        |  2 +-
 test/specs/checkbox.spec.js     |  6 ++--
 test/specs/radio.spec.js        | 26 +----------------
 10 files changed, 63 insertions(+), 86 deletions(-)

diff --git a/docs/demos/views/checkbox.vue b/docs/demos/views/checkbox.vue
index b7555f1e4..a533874bc 100644
--- a/docs/demos/views/checkbox.vue
+++ b/docs/demos/views/checkbox.vue
@@ -1,17 +1,16 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-checkbox v-model="checkbox1">{{ $t('checkbox') }} 1</van-checkbox>
+      <van-checkbox v-model="checkbox1">{{ $t('checkbox') }}</van-checkbox>
     </demo-block>
 
     <demo-block :title="$t('disabled')">
-      <van-checkbox :value="false" disabled>{{ $t('checkbox') }} 2</van-checkbox>
-      <van-checkbox :value="true" disabled>{{ $t('checkbox') }} 2</van-checkbox>
+      <van-checkbox :value="false" disabled>{{ $t('checkbox') }}</van-checkbox>
+      <van-checkbox :value="true" disabled>{{ $t('checkbox') }}</van-checkbox>
     </demo-block>
 
     <demo-block :title="$t('labelDisabled')">
-      <van-checkbox v-model="checkbox3" label-disabled>{{ $t('checkbox') }} 2</van-checkbox>
-      <van-checkbox v-model="checkbox4" label-disabled>{{ $t('checkbox') }} 2</van-checkbox>
+      <van-checkbox v-model="checkbox2" label-disabled>{{ $t('checkbox') }}</van-checkbox>
     </demo-block>
 
     <demo-block :title="$t('title3')">
@@ -27,20 +26,22 @@
     </demo-block>
 
     <demo-block :title="$t('title4')">
-      <van-checkbox-group v-model="result">
-        <van-cell-group>
-          <van-cell v-for="(item, index) in list" :key="index">
-            <van-checkbox :name="item">{{ $t('checkbox') }} {{ item }}</van-checkbox>
-          </van-cell>
-        </van-cell-group>
+      <van-checkbox-group v-model="result2" :max="2">
+        <van-checkbox
+          v-for="(item, index) in list"
+          :key="index"
+          :name="item"
+        >
+          {{ $t('checkbox') }} {{ item }}
+        </van-checkbox>
       </van-checkbox-group>
     </demo-block>
 
     <demo-block :title="$t('title5')">
-      <van-checkbox-group v-model="result2" :max="max">
+      <van-checkbox-group v-model="result3">
         <van-cell-group>
-          <van-cell v-for="(item, index) in list" :key="index">
-            <van-checkbox :name="item">{{ $t('checkbox') }} {{ item }}</van-checkbox>
+          <van-cell v-for="(item, index) in list" :title="$t('checkbox') + item" :key="index">
+            <van-checkbox :name="item" />
           </van-cell>
         </van-cell-group>
       </van-checkbox-group>
@@ -53,17 +54,17 @@ export default {
   i18n: {
     'zh-CN': {
       checkbox: '复选框',
-      labelDisabled: '禁用 Checkbox 内容部分点击事件',
+      labelDisabled: '禁用内容部分点击事件',
       title3: 'Checkbox 组',
-      title4: '与 Cell 组件一起使用',
-      title5: '设置最大可选数',
+      title4: '设置最大可选数',
+      title5: '与 Cell 组件一起使用'
     },
     'en-US': {
       checkbox: 'Checkbox',
-      labelDisabled: 'Disable Checkbox Label click event',
+      labelDisabled: 'Disable Label click event',
       title3: 'Checkbox Group',
-      title4: 'Inside a Cell',
-      title5: 'Maximum amount of checked options'
+      title4: 'Maximum amount of checked options',
+      title5: 'Inside a Cell'
     }
   },
 
@@ -71,8 +72,6 @@ export default {
     return {
       checkbox1: true,
       checkbox2: true,
-      checkbox3: false,
-      checkbox4: true,
       list: [
         'a',
         'b',
@@ -80,7 +79,7 @@ export default {
       ],
       result: ['a', 'b'],
       result2: [],
-      max: 2
+      result3: []
     };
   }
 };
@@ -95,13 +94,6 @@ export default {
   .van-cell {
     .van-checkbox {
       margin: 0;
-      display: flex;
-      flex-direction: row-reverse;
-
-      &__label {
-        margin: 0;
-        flex: 1;
-      }
     }
   }
 }
diff --git a/docs/demos/views/radio.vue b/docs/demos/views/radio.vue
index d40c62d94..ce644f731 100644
--- a/docs/demos/views/radio.vue
+++ b/docs/demos/views/radio.vue
@@ -17,8 +17,12 @@
     <demo-block :title="$t('title3')">
       <van-radio-group v-model="radio3">
         <van-cell-group>
-          <van-cell><van-radio name="1">{{ $t('radio') }}1</van-radio></van-cell>
-          <van-cell><van-radio name="2">{{ $t('radio') }}2</van-radio></van-cell>
+          <van-cell :title="$t('radio') + 1" clickable @click="radio3 = '1'">
+            <van-radio name="1" />
+          </van-cell>
+          <van-cell :title="$t('radio') + 2" clickable @click="radio3 = '2'">
+            <van-radio name="2" />
+          </van-cell>
         </van-cell-group>
       </van-radio-group>
     </demo-block>
@@ -61,16 +65,5 @@ export default {
       margin-bottom: 10px;
     }
   }
-
-  .van-cell {
-    .van-radio__input {
-      float: right;
-      position: static;
-    }
-
-    .van-radio__label {
-      margin: 0;
-    }
-  }
 }
 </style>
diff --git a/docs/markdown/en-US/checkbox.md b/docs/markdown/en-US/checkbox.md
index a69e8636c..4fff3cdf5 100644
--- a/docs/markdown/en-US/checkbox.md
+++ b/docs/markdown/en-US/checkbox.md
@@ -12,7 +12,7 @@ Vue.use(Checkbox).use(CheckboxGroup);
 #### Basic Usage
 
 ```html
-<van-checkbox v-model="checked">Checkbox 1</van-checkbox>
+<van-checkbox v-model="checked">Checkbox</van-checkbox>
 ```
 
 ```javascript
@@ -28,7 +28,13 @@ export default {
 #### Disabled
 
 ```html
-<van-checkbox v-model="checked" disabled>Checkbox 2</van-checkbox>
+<van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>
+```
+
+#### Disable Label click event
+
+```html
+<van-checkbox v-model="checked" label-disabled>Checkbox</van-checkbox>
 ```
 
 #### Checkbox Group
@@ -76,8 +82,8 @@ export default {
 ```html
 <van-checkbox-group v-model="result">
   <van-cell-group>
-    <van-cell v-for="(item, index) in list" :key="item">
-      <van-checkbox :name="item">Checkbox {{ item }}</van-checkbox>
+    <van-cell v-for="item in list" :title="`Checkbox ${item}`" :key="item">
+      <van-checkbox :name="item" />
     </van-cell>
   </van-cell-group>
 </van-checkbox-group>
diff --git a/docs/markdown/en-US/radio.md b/docs/markdown/en-US/radio.md
index e31bcc2bf..864bc819c 100644
--- a/docs/markdown/en-US/radio.md
+++ b/docs/markdown/en-US/radio.md
@@ -44,8 +44,12 @@ export default {
 ```html
 <van-radio-group v-model="radio">
   <van-cell-group>
-    <van-cell><van-radio name="1">Radio 1</van-radio></van-cell>
-    <van-cell><van-radio name="2">Radio 2</van-radio></van-cell>
+    <van-cell :title="Radio 1" clickable @click="radio = '1'">
+      <van-radio name="1" />
+    </van-cell>
+    <van-cell :title="Radio 2" clickable @click="radio = '2'">
+      <van-radio name="2" />
+    </van-cell>
   </van-cell-group>
 </van-radio-group>
 ```
diff --git a/docs/markdown/zh-CN/checkbox.md b/docs/markdown/zh-CN/checkbox.md
index 15b194bb4..5fa7386a8 100644
--- a/docs/markdown/zh-CN/checkbox.md
+++ b/docs/markdown/zh-CN/checkbox.md
@@ -13,7 +13,7 @@ Vue.use(Checkbox).use(CheckboxGroup);
 通过`v-model`绑定 checkbox 的勾选状态
 
 ```html
-<van-checkbox v-model="checked">复选框 1</van-checkbox>
+<van-checkbox v-model="checked">复选框</van-checkbox>
 ```
 
 ```javascript
@@ -29,13 +29,15 @@ export default {
 #### 禁用状态
 
 ```html
-<van-checkbox v-model="checked" disabled>复选框 2</van-checkbox>
+<van-checkbox v-model="checked" disabled>复选框</van-checkbox>
 ```
+
 #### 禁用内容部分点击事件
 
 ```html
-<van-checkbox v-model="checked" label-disabled>复选框 3</van-checkbox>
+<van-checkbox v-model="checked" label-disabled>复选框</van-checkbox>
 ```
+
 #### Checkbox 组
 
 需要与`van-checkbox-group`一起使用，选中值是一个数组，通过`v-model`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
@@ -84,8 +86,8 @@ export default {
 ```html
 <van-checkbox-group v-model="result">
   <van-cell-group>
-    <van-cell v-for="(item, index) in list" :key="item">
-      <van-checkbox :name="item">复选框 {{ item }}</van-checkbox>
+    <van-cell v-for="item in list" :title="`复选框 ${item}`" :key="item">
+      <van-checkbox :name="item" />
     </van-cell>
   </van-cell-group>
 </van-checkbox-group>
diff --git a/docs/markdown/zh-CN/radio.md b/docs/markdown/zh-CN/radio.md
index 4946eddc3..c0f6a545f 100644
--- a/docs/markdown/zh-CN/radio.md
+++ b/docs/markdown/zh-CN/radio.md
@@ -46,8 +46,12 @@ export default {
 ```html
 <van-radio-group v-model="radio">
   <van-cell-group>
-    <van-cell><van-radio name="1">单选框 1</van-radio></van-cell>
-    <van-cell><van-radio name="2">单选框 2</van-radio></van-cell>
+    <van-cell :title="单选框 1" clickable @click="radio = '1'">
+      <van-radio name="1" />
+    </van-cell>
+    <van-cell :title="单选框 2" clickable @click="radio = '2'">
+      <van-radio name="2" />
+    </van-cell>
   </van-cell-group>
 </van-radio-group>
 ```
diff --git a/packages/checkbox/index.vue b/packages/checkbox/index.vue
index 597f3ec81..fc0252e84 100644
--- a/packages/checkbox/index.vue
+++ b/packages/checkbox/index.vue
@@ -10,7 +10,7 @@
       }]"
       @click="onClick"
     />
-    <span class="van-checkbox__label" @click="onClick('label')">
+    <span v-if="$slots.default" class="van-checkbox__label" @click="onClick('label')">
       <slot />
     </span>
   </div>
diff --git a/packages/radio/index.vue b/packages/radio/index.vue
index fd6dc25fe..77752190c 100644
--- a/packages/radio/index.vue
+++ b/packages/radio/index.vue
@@ -14,7 +14,7 @@
       >
       <icon :name="currentValue === name ? 'checked' : 'check'" />
     </span>
-    <span class="van-radio__label" @click="onClickLabel">
+    <span v-if="$slots.default" class="van-radio__label" @click="onClickLabel">
       <slot />
     </span>
   </div>
diff --git a/test/specs/checkbox.spec.js b/test/specs/checkbox.spec.js
index 35c86e42e..462db91af 100644
--- a/test/specs/checkbox.spec.js
+++ b/test/specs/checkbox.spec.js
@@ -165,7 +165,7 @@ describe('Checkbox', () => {
     expect(wrapper.hasClass('van-checkbox')).to.be.true;
     const eventStub = sinon.stub(wrapper.vm, '$emit');
 
-    const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
+    const checkboxLabel = wrapper.find('.van-checkbox__icon')[0];
     checkboxLabel.trigger('click');
 
     wrapper.update();
@@ -189,7 +189,7 @@ describe('Checkbox', () => {
     expect(wrapper.vm.currentValue).to.be.false;
     expect(wrapper.vm.isDisabled).to.be.true;
 
-    const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
+    const checkboxLabel = wrapper.find('.van-checkbox__icon')[0];
     checkboxLabel.trigger('click');
 
     expect(wrapper.vm.currentValue).to.be.false;
@@ -206,7 +206,7 @@ describe('Checkbox', () => {
     expect(wrapper.hasClass('van-checkbox')).to.be.true;
     expect(wrapper.vm.currentValue).to.be.false;
 
-    const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
+    const checkboxLabel = wrapper.find('.van-checkbox__icon')[0];
     checkboxLabel.trigger('click');
 
     expect(wrapper.vm.currentValue).to.be.false;
diff --git a/test/specs/radio.spec.js b/test/specs/radio.spec.js
index 311c96832..8319901cb 100644
--- a/test/specs/radio.spec.js
+++ b/test/specs/radio.spec.js
@@ -94,29 +94,6 @@ describe('Radio', () => {
     });
   });
 
-  it('click on a radio label', (done) => {
-    wrapper = mount(Radio, {
-      propsData: {
-        value: '1',
-        name: '1',
-        disabled: false
-      }
-    });
-
-    expect(wrapper.hasClass('van-radio')).to.be.true;
-    const eventStub = sinon.stub(wrapper.vm, '$emit');
-
-    const checkboxLabel = wrapper.find('.van-radio__label')[0];
-    checkboxLabel.trigger('click');
-
-    wrapper.update();
-    wrapper.vm.$nextTick(() => {
-      expect(eventStub.calledOnce).to.be.true;
-      expect(eventStub.calledWith('input'));
-      done();
-    });
-  });
-
   it('click on a disabled radio', () => {
     wrapper = mount(Radio, {
       propsData: {
@@ -131,8 +108,7 @@ describe('Radio', () => {
     expect(wrapper.instance().currentValue).to.equal('1');
     expect(wrapper.instance().isDisabled).to.be.true;
 
-    const checkboxLabel = wrapper.find('.van-radio__label')[0];
-    checkboxLabel.trigger('click');
+    wrapper.trigger('click');
 
     expect(wrapper.instance().currentValue).to.equal('1');
   });