fix(ShareSheet): title slot not work

src/share-sheet/README.md

@@ -17,6 +17,7 @@ Vue.use(ShareSheet);
 <van-cell title="Show ShareSheet" @click="showShare = true" />
 <van-share-sheet
   v-model="showShare"
+  title="Share"
   :options="options"
   @select="onSelect"
 />
@@ -47,23 +48,16 @@ export default {
 };
 ```
 
-### Show Title
+### Multi Line
 
 ```html
 <van-share-sheet
   v-model="showShare"
+  title="Share"
   :options="options"
-  title="Share with friends"
-  description="Description"
 />
 ```
 
-### Multi Line
-
-```html
-<van-share-sheet v-model="showShare" :options="options" />
-```
-
 ```js
 export default {
   data() {
@@ -86,6 +80,17 @@ export default {
 };
 ```
 
+### Show Description
+
+```html
+<van-share-sheet
+  v-model="showShare"
+  :options="options"
+  title="Share"
+  description="Description"
+/>
+```
+
 ## API
 
 ### Props

src/share-sheet/README.zh-CN.md

@@ -23,6 +23,7 @@ Vue.use(ShareSheet);
 <van-cell title="显示分享面板" @click="showShare = true" />
 <van-share-sheet
   v-model="showShare"
+  title="立即分享给好友"
   :options="options"
   @select="onSelect"
 />
@@ -53,25 +54,16 @@ export default {
 };
 ```
 
-### 展示面板标题
-
-通过`title`属性可以设置面板标题，通过`description`属性可以设置标题下方的描述文字
-
-```html
-<van-share-sheet
-  v-model="showShare"
-  :options="options"
-  title="立即分享给好友"
-  description="描述信息"
-/>
-```
-
 ### 展示多行选项
 
 当分享选项的数量较多时，可以将`options`定义为数组嵌套的格式，每个子数组会作为一行选项展示
 
 ```html
-<van-share-sheet v-model="showShare" :options="options" />
+<van-share-sheet
+  v-model="showShare"
+  title="立即分享给好友"
+  :options="options"
+/>
 ```
 
 ```js
@@ -119,6 +111,19 @@ export default {
 };
 ```
 
+### 展示描述信息
+
+通过`description`属性可以设置标题下方的描述文字
+
+```html
+<van-share-sheet
+  v-model="showShare"
+  :options="options"
+  title="立即分享给好友"
+  description="描述信息"
+/>
+```
+
 ## API
 
 ### Props

src/share-sheet/demo/index.vue

@@ -4,22 +4,8 @@
       <van-cell is-link :title="t('showSheet')" @click="show.basic = true" />
       <van-share-sheet
         v-model="show.basic"
-        :options="options"
-        @select="onSelect"
-      />
-    </demo-block>
-
-    <demo-block :title="t('withTitle')">
-      <van-cell
-        is-link
-        :title="t('showSheet')"
-        @click="show.withTitle = true"
-      />
-      <van-share-sheet
-        v-model="show.withTitle"
         :title="t('title')"
         :options="options"
-        :description="t('description')"
         @select="onSelect"
       />
     </demo-block>
@@ -32,6 +18,7 @@
       />
       <van-share-sheet
         v-model="show.multiLine"
+        :title="t('title')"
         :options="multiLineOptions"
         @select="onSelect"
       />
@@ -49,6 +36,17 @@
         @select="onSelect"
       />
     </demo-block>
+
+    <demo-block :title="t('withDesc')">
+      <van-cell is-link :title="t('showSheet')" @click="show.withDesc = true" />
+      <van-share-sheet
+        v-model="show.withDesc"
+        :title="t('title')"
+        :options="options"
+        :description="t('description')"
+        @select="onSelect"
+      />
+    </demo-block>
   </demo-section>
 </template>
 
@@ -66,7 +64,7 @@ export default {
       qrcode: '二维码',
       multiLine: '展示多行选项',
       showSheet: '显示分享面板',
-      withTitle: '展示面板标题',
+      withDesc: '展示描述信息',
       customIcon: '自定义图标',
       description: '描述信息',
     },
@@ -74,14 +72,14 @@ export default {
       qq: 'QQ',
       name: 'Name',
       link: 'Link',
-      title: 'Share with friends',
+      title: 'Share',
       weibo: 'Weibo',
       wechat: 'Wechat',
       poster: 'Poster',
       qrcode: 'Qrcode',
       multiLine: 'Multi Line',
       showSheet: 'Show ShareSheet',
-      withTitle: 'Show Title',
+      withDesc: 'Show Description',
       customIcon: 'Custom Icon',
       description: 'Description',
     },
@@ -91,7 +89,7 @@ export default {
     return {
       show: {
         basic: false,
-        withTitle: false,
+        withDesc: false,
         multiLine: false,
         customIcon: false,
       },
@@ -146,7 +144,7 @@ export default {
     onSelect(option) {
       this.$toast(option.name);
       this.show.basic = false;
-      this.show.withTitle = false;
+      this.show.withDesc = false;
       this.show.multiLine = false;
       this.show.customIcon = false;
     },

src/share-sheet/index.js

@@ -50,13 +50,13 @@ export default createComponent({
     },
 
     genHeader() {
-      if (!this.title && !this.description) {
-        return;
-      }
-
       const title = this.slots('title') || this.title;
       const description = this.slots('description') || this.description;
 
+      if (!title && !description) {
+        return;
+      }
+
       return (
         <div class={bem('header')}>
           {title && <h2 class={bem('title')}>{title}</h2>}
@@ -76,7 +76,7 @@ export default createComponent({
               }}
             >
               <img src={this.getIconURL(option.icon)} class={bem('icon')} />
-              <span class={bem('name')}>{option.name || ''}</span>
+              {option.name && <span class={bem('name')}>{option.name}</span>}
             </div>
           ))}
         </div>

src/share-sheet/test/__snapshots__/demo.spec.js.snap

@@ -23,5 +23,12 @@ exports[`renders demo correctly 1`] = `
     </div>
     <!---->
   </div>
+  <div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>显示分享面板</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <!---->
+  </div>
 </div>
 `;

src/share-sheet/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`cancel-text prop 1`] = `<button type="button" class="van-share-sheet__cancel">foo</button>`;
+
+exports[`description prop 1`] = `<span class="van-share-sheet__description">foo</span>`;
+
+exports[`title & description slot 1`] = `
+<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-share-sheet" name="van-popup-slide-bottom">
+  <div class="van-share-sheet__header">
+    <h2 class="van-share-sheet__title">Custom Title</h2><span class="van-share-sheet__description">Custom Description</span>
+  </div>
+  <div class="van-share-sheet__options"></div><button type="button" class="van-share-sheet__cancel">取消</button>
+</div>
+`;

src/share-sheet/test/index.spec.js

@@ -0,0 +1,72 @@
+import ShareSheet from '..';
+import { mount } from '../../../test';
+
+test('cancel-text prop', () => {
+  const wrapper = mount(ShareSheet, {
+    propsData: {
+      value: true,
+      cancelText: 'foo',
+    },
+  });
+
+  expect(wrapper.find('.van-share-sheet__cancel')).toMatchSnapshot();
+
+  wrapper.setProps({ cancelText: '' });
+  expect(wrapper.contains('.van-share-sheet__cancel')).toBeFalsy();
+});
+
+test('description prop', () => {
+  const wrapper = mount(ShareSheet, {
+    propsData: {
+      value: true,
+      description: 'foo',
+    },
+  });
+
+  expect(wrapper.find('.van-share-sheet__description')).toMatchSnapshot();
+
+  wrapper.setProps({ description: '' });
+  expect(wrapper.contains('.van-share-sheet__description')).toBeFalsy();
+});
+
+test('select event', () => {
+  const wrapper = mount(ShareSheet, {
+    propsData: {
+      value: true,
+      options: [{ icon: 'wechat', name: 'wechat' }],
+    },
+  });
+
+  wrapper.find('.van-share-sheet__option').trigger('click');
+  expect(wrapper.emitted('select')[0]).toEqual([
+    { icon: 'wechat', name: 'wechat' },
+    0,
+  ]);
+});
+
+test('cancel event', () => {
+  const wrapper = mount(ShareSheet, {
+    propsData: {
+      value: true,
+    },
+  });
+
+  wrapper.find('.van-share-sheet__cancel').trigger('click');
+
+  expect(wrapper.emitted('input')[0][0]).toEqual(false);
+  expect(wrapper.emitted('cancel')[0]).toBeTruthy();
+});
+
+test('title & description slot', () => {
+  const wrapper = mount(ShareSheet, {
+    propsData: {
+      value: true,
+    },
+    scopedSlots: {
+      title: () => 'Custom Title',
+      description: () => 'Custom Description',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});