From 493860134a32763ac8aa5be0133f278fa875b1a3 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Mon, 22 Apr 2019 19:51:42 +0800
Subject: [PATCH] [new feature] NumberKeyboard: add title-left slot (#3194)

---
 packages/number-keyboard/en-US.md                |  6 ++++++
 packages/number-keyboard/index.js                | 14 +++++++++++---
 packages/number-keyboard/index.less              |  5 +++++
 .../test/__snapshots__/demo.spec.js.snap         |  2 +-
 .../test/__snapshots__/index.spec.js.snap        |  8 ++++++++
 packages/number-keyboard/test/index.spec.js      | 16 ++++++++++++++++
 packages/number-keyboard/zh-CN.md                |  6 ++++++
 packages/panel/en-US.md                          |  1 -
 8 files changed, 53 insertions(+), 5 deletions(-)
 create mode 100644 packages/number-keyboard/test/__snapshots__/index.spec.js.snap

diff --git a/packages/number-keyboard/en-US.md b/packages/number-keyboard/en-US.md
index c1ec3bb82..8af9c83fb 100644
--- a/packages/number-keyboard/en-US.md
+++ b/packages/number-keyboard/en-US.md
@@ -85,3 +85,9 @@ export default {
 | blur | Triggered when click close button or blur keyboard | - |
 | show | Triggered when keyboard is fully displayed. | - |
 | hide | Triggered when keyboard is fully hidden. | - |
+
+### Slot
+
+| name | Description |
+|------|------|
+| title-left | Custom title left content |
diff --git a/packages/number-keyboard/index.js b/packages/number-keyboard/index.js
index 9a8b925cf..88b219927 100644
--- a/packages/number-keyboard/index.js
+++ b/packages/number-keyboard/index.js
@@ -133,8 +133,11 @@ export default sfc({
   },
 
   render(h) {
-    const { theme, onPress, closeButtonText } = this;
+    const { title, theme, onPress, closeButtonText } = this;
+
+    const titleLeftSlot = this.slots('title-left');
     const showTitleClose = closeButtonText && theme === 'default';
+    const showTitle = title || showTitleClose || titleLeftSlot;
 
     return (
       <transition name={this.transition ? 'van-slide-up' : ''}>
@@ -146,9 +149,14 @@ export default sfc({
           onAnimationend={this.onAnimationEnd}
           onWebkitAnimationEnd={this.onAnimationEnd}
         >
-          {(this.title || showTitleClose) && (
+          {showTitle && (
             <div class={[bem('title'), 'van-hairline--top']}>
-              <span>{this.title}</span>
+              {titleLeftSlot && (
+                <span class={bem('title-left')}>
+                  {titleLeftSlot}
+                </span>
+              )}
+              {title && <span>{title}</span>}
               {showTitleClose && (
                 <span class={bem('close')} onClick={this.onClose}>
                   {closeButtonText}
diff --git a/packages/number-keyboard/index.less b/packages/number-keyboard/index.less
index 4e30e5528..e79a5d6b3 100644
--- a/packages/number-keyboard/index.less
+++ b/packages/number-keyboard/index.less
@@ -16,6 +16,11 @@
     text-align: center;
     position: relative;
     color: @gray-darker;
+
+    &-left {
+      left: 0;
+      position: absolute;
+    }
   }
 
   &__body {
diff --git a/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap b/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap
index 492986d42..9777e905a 100644
--- a/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap
+++ b/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap
@@ -6,7 +6,7 @@ exports[`renders demo correctly 1`] = `
       弹出默认键盘
     </span></button>
     <div name="van-slide-up" class="van-number-keyboard van-number-keyboard--default" style="z-index:100;">
-      <div class="van-number-keyboard__title van-hairline--top"><span></span><span class="van-number-keyboard__close">完成</span></div>
+      <div class="van-number-keyboard__title van-hairline--top"><span class="van-number-keyboard__close">完成</span></div>
       <div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--gray">.</i><i class="van-hairline van-key">0</i><i class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
     </div>
   </div>
diff --git a/packages/number-keyboard/test/__snapshots__/index.spec.js.snap b/packages/number-keyboard/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..6748029d4
--- /dev/null
+++ b/packages/number-keyboard/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`title-left slot 1`] = `
+<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100;" name="van-slide-up">
+  <div class="van-number-keyboard__title van-hairline--top"><span class="van-number-keyboard__title-left">Custom Title Left</span></div>
+  <div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--gray"></i><i class="van-hairline van-key">0</i><i class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
+</div>
+`;
diff --git a/packages/number-keyboard/test/index.spec.js b/packages/number-keyboard/test/index.spec.js
index f29596fe4..e5299bffd 100644
--- a/packages/number-keyboard/test/index.spec.js
+++ b/packages/number-keyboard/test/index.spec.js
@@ -83,3 +83,19 @@ test('listen to show event when no transtion', () => {
   expect(wrapper.emitted('show')).toBeTruthy();
   expect(wrapper.emitted('hide')).toBeTruthy();
 });
+
+test('title-left slot', () => {
+  const wrapper = mount({
+    template: `
+      <number-keyboard show>
+        <template v-slot:title-left>Custom Title Left</template>
+      </number-keyboard>
+    `
+  }, {
+    components: {
+      NumberKeyboard
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/packages/number-keyboard/zh-CN.md b/packages/number-keyboard/zh-CN.md
index 4d8b5eccb..c2972db12 100644
--- a/packages/number-keyboard/zh-CN.md
+++ b/packages/number-keyboard/zh-CN.md
@@ -85,3 +85,9 @@ export default {
 | blur | 点击关闭按钮或非键盘区域时触发 | - |
 | show | 键盘完全弹出时触发 | - |
 | hide | 键盘完全收起时触发 | - |
+
+### Slot
+
+| 名称 | 说明 |
+|------|------|
+| title-left | 自定义标题栏左侧内容 |
diff --git a/packages/panel/en-US.md b/packages/panel/en-US.md
index a71b68dcb..32b34f9a5 100644
--- a/packages/panel/en-US.md
+++ b/packages/panel/en-US.md
@@ -38,7 +38,6 @@ Vue.use(Panel);
 | desc | Description | `String` | - |
 | status | Status | `String` | - |
 
-
 ### Slot
 
 | name | Description |