[Improvement] NumberKeyboard: add close event (#1127)

packages/number-keyboard/en-US.md

@@ -79,6 +79,7 @@ export default {
 |-----------|-----------|-----------|
 | input | Triggered when keydown | key: Content of the key |
 | delete | Triggered when press delete key | - |
-| blur | Triggered when blur keyboard | - |
+| blur | Triggered when click close button | - |
+| blur | Triggered when click close button or blur keyboard | - |
 | show | Triggered when keyboard is fully displayed. | - |
 | hide | Triggered when keyboard is fully hidden. | - |

packages/number-keyboard/index.vue

@@ -4,6 +4,7 @@
       v-show="show"
       :style="style"
       :class="b([theme])"
+      @touchstart.stop
       @animationend="onAnimationEnd"
       @webkitAnimationEnd="onAnimationEnd"
     >
@@ -13,7 +14,7 @@
           :class="b('close')"
           v-if="showTitleClose"
           v-text="closeButtonText"
-          @click="onBlur"
+          @click="onClose"
         />
       </div>
       <div :class="b('body')">
@@ -145,6 +146,11 @@ export default create({
       this.$emit('blur');
     },
 
+    onClose() {
+      this.$emit('close');
+      this.onBlur();
+    },
+
     onAnimationEnd() {
       this.$emit(this.show ? 'show' : 'hide');
     },
@@ -157,7 +163,7 @@ export default create({
       if (text === 'delete') {
         this.$emit('delete');
       } else if (text === this.closeButtonText) {
-        this.onBlur();
+        this.onClose();
       } else {
         this.$emit('input', text);
       }

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

@@ -0,0 +1,85 @@
+import NumberKeyboard from '../';
+import { mount } from '@vue/test-utils';
+
+function mockTouch(wrapper, event, keyIndex) {
+  const key = wrapper.element.querySelectorAll('.van-key')[keyIndex];
+  const touchStart = document.createEvent('CustomEvent');
+  touchStart.initCustomEvent(event, true, true, {});
+  key.dispatchEvent(touchStart);
+}
+
+test('click number key', () => {
+  const wrapper = mount(NumberKeyboard, {
+    propsData: {
+      theme: 'custom',
+      closeButtonText: 'close'
+    }
+  });
+
+  mockTouch(wrapper, 'touchstart', 10);
+  mockTouch(wrapper, 'touchstart', 0);
+  mockTouch(wrapper, 'touchend', 0);
+  wrapper.vm.$destroy();
+  expect(wrapper.emitted('input')[0][0]).toEqual(1);
+});
+
+it('click delete key', () => {
+  const wrapper = mount(NumberKeyboard);
+  mockTouch(wrapper, 'touchstart', 11);
+  expect(wrapper.emitted('delete')).toBeTruthy();
+});
+
+test('click close button', () => {
+  const wrapper = mount(NumberKeyboard, {
+    propsData: {
+      theme: 'custom',
+      closeButtonText: 'close'
+    }
+  });
+
+  mockTouch(wrapper, 'touchstart', 12);
+  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;
+  wrapper.trigger('animationend');
+  wrapper.vm.show = false;
+  wrapper.trigger('animationend');
+  expect(wrapper.emitted('show')).toBeTruthy();
+  expect(wrapper.emitted('hide')).toBeTruthy();
+});
+
+test('listen to show event when no transtion', () => {
+  const wrapper = mount(NumberKeyboard, {
+    propsData: {
+      transition: false
+    }
+  });
+  wrapper.vm.show = true;
+  wrapper.vm.show = false;
+  expect(wrapper.emitted('show')).toBeTruthy();
+  expect(wrapper.emitted('hide')).toBeTruthy();
+});

packages/number-keyboard/zh-CN.md

@@ -79,6 +79,7 @@ export default {
 |-----------|-----------|-----------|
 | input | 点击按键时触发 | key: 按键内容 |
 | delete | 点击删除键时触发 | - |
-| blur | 点击非键盘区域时触发 | - |
+| close | 点击关闭按钮时触发 | - |
+| blur | 点击关闭按钮或非键盘区域时触发 | - |
 | show | 键盘完全弹出时触发 | - |
 | hide | 键盘完全收起时触发 | - |