[new feature] NumberKeyboard: add title-left slot (#3194)

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 |

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}

packages/number-keyboard/index.less

@@ -16,6 +16,11 @@
     text-align: center;
     position: relative;
     color: @gray-darker;
+
+    &-left {
+      left: 0;
+      position: absolute;
+    }
   }
 
   &__body {

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>

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>
+`;

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();
+});

packages/number-keyboard/zh-CN.md

@@ -85,3 +85,9 @@ export default {
 | blur | 点击关闭按钮或非键盘区域时触发 | - |
 | show | 键盘完全弹出时触发 | - |
 | hide | 键盘完全收起时触发 | - |
+
+### Slot
+
+| 名称 | 说明 |
+|------|------|
+| title-left | 自定义标题栏左侧内容 |

packages/panel/en-US.md

@@ -38,7 +38,6 @@ Vue.use(Panel);
 | desc | Description | `String` | - |
 | status | Status | `String` | - |
 
-
 ### Slot
 
 | name | Description |