[new feature] NumberKeyboard: add delete slot (#3499)

packages/number-keyboard/test/__snapshots__/demo.spec.js.snap

@@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
     </span></button>
     <div class="van-number-keyboard van-number-keyboard--custom van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
       <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--middle">0</i><i role="button" tabindex="0" class="van-hairline van-key">.</i></div>
-      <div class="van-number-keyboard__sidebar"><i role="button" tabindex="0" class="van-hairline van-key van-key--delete van-key--big van-key--gray">删除</i><i role="button" tabindex="0" class="van-hairline van-key van-key--blue van-key--big">完成</i></div>
+      <div class="van-number-keyboard__sidebar"><i role="button" tabindex="0" class="van-hairline van-key van-key--delete van-key--big van-key--gray van-key--delete">删除</i><i role="button" tabindex="0" class="van-hairline van-key van-key--blue van-key--big van-key--close">完成</i></div>
     </div>
   </div>
 </div>

packages/number-keyboard/test/__snapshots__/index.spec.js.snap

@@ -1,7 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`focus on key 1`] = `
+<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100; display: none;" name="van-slide-up">
+  <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key van-key--active">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
+</div>
+`;
+
+exports[`focus on key 2`] = `
+<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100; display: none;" name="van-slide-up">
+  <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
+</div>
+`;
+
+exports[`render title 1`] = `
+<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100; display: none;" name="van-slide-up">
+  <div class="van-number-keyboard__title van-hairline--top"><span>Title</span><span role="button" tabindex="0" class="van-number-keyboard__close">Close</span></div>
+  <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
+</div>
+`;
+
 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 van-number-keyboard--default" style="z-index: 100; display: none;" 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 role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
 </div>

packages/number-keyboard/test/index.spec.js

@@ -1,5 +1,5 @@
 import NumberKeyboard from '..';
-import { mount } from '../../../test/utils';
+import { mount, trigger } from '../../../test/utils';
 
 test('click number key', () => {
   const wrapper = mount(NumberKeyboard, {
@@ -9,7 +9,10 @@ test('click number key', () => {
     }
   });
 
-  wrapper.findAll('.van-key').at(0).trigger('click');
+  wrapper
+    .findAll('.van-key')
+    .at(0)
+    .trigger('click');
   expect(wrapper.emitted('input')[0][0]).toEqual(1);
 
   wrapper.destroy();
@@ -17,10 +20,22 @@ test('click number key', () => {
 
 it('click delete key', () => {
   const wrapper = mount(NumberKeyboard);
-  wrapper.findAll('.van-key').at(11).trigger('click');
+  wrapper
+    .findAll('.van-key')
+    .at(11)
+    .trigger('click');
   expect(wrapper.emitted('delete')).toBeTruthy();
 });
 
+it('click empty key', () => {
+  const wrapper = mount(NumberKeyboard);
+  wrapper
+    .findAll('.van-key')
+    .at(9)
+    .trigger('click');
+  expect(wrapper.emitted('input')).toBeFalsy();
+});
+
 test('click close button', () => {
   const wrapper = mount(NumberKeyboard, {
     propsData: {
@@ -29,31 +44,13 @@ test('click close button', () => {
     }
   });
 
-  wrapper.findAll('.van-key').at(12).trigger('click');
+  wrapper
+    .findAll('.van-key')
+    .at(12)
+    .trigger('click');
   expect(wrapper.emitted('close')).toBeTruthy();
 });
 
-test('keey-alive live cycle', () => {
-  const wrapper = mount({
-    template: `
-      <keep-alive>
-        <number-keyboard v-if="show" />
-      </keep-alive>
-    `,
-    props: ['show'],
-    components: { NumberKeyboard }
-  }, {
-    attachToDocument: true,
-    propsData: {
-      show: true
-    }
-  });
-
-  expect(wrapper.vm.$el).toBeTruthy();
-  wrapper.vm.show = false;
-  expect(wrapper.vm.el).toBeFalsy();
-});
-
 test('listen to show/hide event when has transtion', () => {
   const wrapper = mount(NumberKeyboard);
   wrapper.vm.show = true;
@@ -76,18 +73,56 @@ test('listen to show event when no transtion', () => {
   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
+test('render title', () => {
+  const wrapper = mount(NumberKeyboard, {
+    propsData: {
+      title: 'Title',
+      closeButtonText: 'Close'
     }
   });
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('title-left slot', () => {
+  const wrapper = mount(NumberKeyboard, {
+    scopedSlots: {
+      'title-left': () => 'Custom Title Left'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('hideOnClickOutside', () => {
+  const wrapper = mount(NumberKeyboard, {
+    propsData: {
+      show: true
+    }
+  });
+
+  trigger(document.body, 'touchstart');
+  expect(wrapper.emitted('blur')).toBeTruthy();
+});
+
+test('disable hideOnClickOutside', () => {
+  const wrapper = mount(NumberKeyboard, {
+    propsData: {
+      show: true,
+      hideOnClickOutside: false
+    }
+  });
+
+  trigger(document.body, 'touchstart');
+  expect(wrapper.emitted('blur')).toBeFalsy();
+});
+
+test('focus on key', () => {
+  const wrapper = mount(NumberKeyboard);
+
+  const key = wrapper.find('.van-key');
+  trigger(key, 'touchstart');
+  expect(wrapper).toMatchSnapshot();
+  trigger(key, 'touchend');
+  expect(wrapper).toMatchSnapshot();
+});