From 442795460672bf6ef3f5c122bf5544d6c593a6b3 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Mon, 23 Sep 2019 15:55:00 +0800
Subject: [PATCH] feat(NumberKeyboard): enable safe-area-inset-bottom by
 default (#4544)

---
 src/number-keyboard/README.md                 |  2 +-
 src/number-keyboard/README.zh-CN.md           |  2 +-
 src/number-keyboard/demo/index.vue            | 19 +++----------------
 src/number-keyboard/index.js                  |  5 ++++-
 .../test/__snapshots__/demo.spec.js.snap      |  8 ++------
 .../test/__snapshots__/index.spec.js.snap     | 14 +++++++-------
 6 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/src/number-keyboard/README.md b/src/number-keyboard/README.md
index 800f3f43a..df750a9ff 100644
--- a/src/number-keyboard/README.md
+++ b/src/number-keyboard/README.md
@@ -108,7 +108,7 @@ export default {
 | delete-button-text | Delete button text | *string* | `delete` | - |
 | show-delete-key | Whether to show delete button | *boolean* | `true` | - |
 | hide-on-click-outside | Whether to hide keyboard when click outside | *boolean* | `true` | - |
-| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `false` | - |
+| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `true` | - |
 
 ### Events
 
diff --git a/src/number-keyboard/README.zh-CN.md b/src/number-keyboard/README.zh-CN.md
index 7c8382103..6c864a70e 100644
--- a/src/number-keyboard/README.zh-CN.md
+++ b/src/number-keyboard/README.zh-CN.md
@@ -114,7 +114,7 @@ export default {
 | delete-button-text | 删除按钮文字 | *string* | `删除` | - |
 | show-delete-key | 是否展示删除按钮 | *boolean* | `true` | - |
 | hide-on-click-outside | 点击外部时是否收起键盘 | *boolean* | `true` | - |
-| safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` | - |
+| safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` | - |
 
 ### Events
 
diff --git a/src/number-keyboard/demo/index.vue b/src/number-keyboard/demo/index.vue
index e61700961..18329299d 100644
--- a/src/number-keyboard/demo/index.vue
+++ b/src/number-keyboard/demo/index.vue
@@ -1,18 +1,12 @@
 <template>
   <demo-section>
     <demo-block :title="$t('default')">
-      <van-button
-        type="primary"
-        @touchstart.stop="keyboard = 'default'"
-      >
-        {{ $t('button1') }}
-      </van-button>
+      <van-button type="primary" @touchstart.stop="keyboard = 'default'">{{ $t('button1') }}</van-button>
 
       <van-number-keyboard
         :show="keyboard === 'default'"
         :close-button-text="$t('close')"
         extra-key="."
-        safe-area-inset-bottom
         @blur="keyboard = ''"
         @input="onInput"
         @delete="onDelete"
@@ -20,19 +14,13 @@
     </demo-block>
 
     <demo-block :title="$t('custom')">
-      <van-button
-        type="info"
-        @touchstart.stop="keyboard = 'custom'"
-      >
-        {{ $t('button2') }}
-      </van-button>
+      <van-button type="info" @touchstart.stop="keyboard = 'custom'">{{ $t('button2') }}</van-button>
 
       <van-number-keyboard
         :show="keyboard === 'custom'"
         :close-button-text="$t('close')"
         theme="custom"
         extra-key="."
-        safe-area-inset-bottom
         @blur="keyboard = ''"
         @input="onInput"
         @delete="onDelete"
@@ -52,7 +40,6 @@
         v-model="value"
         :show="keyboard === 'bindValue'"
         maxlength="6"
-        safe-area-inset-bottom
         @blur="keyboard = ''"
       />
     </demo-block>
@@ -104,7 +91,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-number-keyboard {
   .van-button {
diff --git a/src/number-keyboard/index.js b/src/number-keyboard/index.js
index 4359e801c..97e33a44e 100644
--- a/src/number-keyboard/index.js
+++ b/src/number-keyboard/index.js
@@ -26,7 +26,6 @@ export default createComponent({
     title: String,
     closeButtonText: String,
     deleteButtonText: String,
-    safeAreaInsetBottom: Boolean,
     theme: {
       type: String,
       default: 'default'
@@ -58,6 +57,10 @@ export default createComponent({
     hideOnClickOutside: {
       type: Boolean,
       default: true
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      default: true
     }
   },
 
diff --git a/src/number-keyboard/test/__snapshots__/demo.spec.js.snap b/src/number-keyboard/test/__snapshots__/demo.spec.js.snap
index a059412ae..314a8ed75 100644
--- a/src/number-keyboard/test/__snapshots__/demo.spec.js.snap
+++ b/src/number-keyboard/test/__snapshots__/demo.spec.js.snap
@@ -2,17 +2,13 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-      弹出默认键盘
-    </span></button>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">弹出默认键盘</span></button>
     <div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="z-index: 100;" name="van-slide-up">
       <div class="van-number-keyboard__title van-hairline--top"><span role="button" tabindex="0" class="van-number-keyboard__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>
   </div>
-  <div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">
-      弹出自定义键盘
-    </span></button>
+  <div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">弹出自定义键盘</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 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>
diff --git a/src/number-keyboard/test/__snapshots__/index.spec.js.snap b/src/number-keyboard/test/__snapshots__/index.spec.js.snap
index bbb1b1111..c6f4f0397 100644
--- a/src/number-keyboard/test/__snapshots__/index.spec.js.snap
+++ b/src/number-keyboard/test/__snapshots__/index.spec.js.snap
@@ -1,44 +1,44 @@
 // 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 van-number-keyboard--default 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 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 van-number-keyboard--default 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--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[`move and blur 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 van-number-keyboard--default 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 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[`move and blur 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 van-number-keyboard--default 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 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[`move and blur key 3`] = `
-<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100; display: none;" name="van-slide-up">
+<div class="van-number-keyboard van-number-keyboard--default 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--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 van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" 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; display: none;" name="van-slide-up">
+<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" 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>