From 89ff50944c149ac494cbf3637a6fb2ba2d07a714 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Fri, 30 Nov 2018 16:40:50 +0800
Subject: [PATCH] [improvement] move overlay component (#2192)

---
 build/build-style-entry.js                      | 17 +++++++++++++++--
 packages/contact-edit/index.vue                 |  2 +-
 packages/index.js                               |  3 +++
 packages/index.less                             |  1 +
 packages/mixins/popup/manager.js                |  4 ++--
 packages/overlay/index.less                     | 10 ++++++++++
 .../popup/Modal.vue => overlay/index.vue}       |  4 ++--
 packages/popup/index.less                       |  9 ---------
 packages/popup/test/index.spec.js               |  4 ++--
 packages/style/base.less                        |  1 +
 packages/style/var.less                         |  3 +++
 11 files changed, 40 insertions(+), 18 deletions(-)
 create mode 100644 packages/overlay/index.less
 rename packages/{mixins/popup/Modal.vue => overlay/index.vue} (91%)

diff --git a/build/build-style-entry.js b/build/build-style-entry.js
index 1b885567c..cae6b83bd 100644
--- a/build/build-style-entry.js
+++ b/build/build-style-entry.js
@@ -6,7 +6,15 @@ const fs = require('fs-extra');
 const path = require('path');
 const components = require('./get-components')();
 const dependencyTree = require('dependency-tree');
-const whiteList = ['info', 'icon', 'loading', 'cell', 'cell-group', 'button'];
+const whiteList = [
+  'info',
+  'icon',
+  'loading',
+  'cell',
+  'cell-group',
+  'button',
+  'overlay'
+];
 const dir = path.join(__dirname, '../es');
 
 components.forEach(component => {
@@ -22,7 +30,12 @@ function destEntryFile(component, filename, ext = '') {
   );
 
   const esEntry = path.join(dir, component, `style/${filename}`);
-  const libEntry = path.join(__dirname, '../lib', component, `style/${filename}`);
+  const libEntry = path.join(
+    __dirname,
+    '../lib',
+    component,
+    `style/${filename}`
+  );
   const esContent = deps.map(dep => `import '${dep}';`).join('\n');
   const libContent = deps.map(dep => `require('${dep}');`).join('\n');
 
diff --git a/packages/contact-edit/index.vue b/packages/contact-edit/index.vue
index ca3e72f42..3221acf95 100644
--- a/packages/contact-edit/index.vue
+++ b/packages/contact-edit/index.vue
@@ -42,8 +42,8 @@
 <script>
 import Field from '../field';
 import VanButton from '../button';
-import Dialog from '../dialog';
 import Toast from '../toast';
+import Dialog from '../dialog';
 import validateMobile from '../utils/validate/mobile';
 import create from '../utils/create';
 
diff --git a/packages/index.js b/packages/index.js
index bb8fd44fa..472562725 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -37,6 +37,7 @@ import NavBar from './nav-bar';
 import NoticeBar from './notice-bar';
 import Notify from './notify';
 import NumberKeyboard from './number-keyboard';
+import Overlay from './overlay';
 import Pagination from './pagination';
 import Panel from './panel';
 import PasswordInput from './password-input';
@@ -109,6 +110,7 @@ const components = [
   NoticeBar,
   Notify,
   NumberKeyboard,
+  Overlay,
   Pagination,
   Panel,
   PasswordInput,
@@ -194,6 +196,7 @@ export {
   NoticeBar,
   Notify,
   NumberKeyboard,
+  Overlay,
   Pagination,
   Panel,
   PasswordInput,
diff --git a/packages/index.less b/packages/index.less
index ffe1b2bf8..a8f6db59e 100644
--- a/packages/index.less
+++ b/packages/index.less
@@ -15,6 +15,7 @@
 @import './list/index';
 @import './nav-bar/index';
 @import './notice-bar/index';
+@import './overlay/index';
 @import './popup/index';
 @import './search/index';
 @import './pagination/index';
diff --git a/packages/mixins/popup/manager.js b/packages/mixins/popup/manager.js
index 127e3ddff..6906d58b4 100644
--- a/packages/mixins/popup/manager.js
+++ b/packages/mixins/popup/manager.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import Modal from './Modal';
 import context from './context';
+import Overlay from '../../overlay';
 
 const defaultConfig = {
   className: '',
@@ -35,7 +35,7 @@ export default {
     let { modal } = context;
 
     if (!modal) {
-      modal = new (Vue.extend(Modal))({
+      modal = new (Vue.extend(Overlay))({
         el: document.createElement('div')
       });
       modal.$on('click', this.onClick);
diff --git a/packages/overlay/index.less b/packages/overlay/index.less
new file mode 100644
index 000000000..ddd87191a
--- /dev/null
+++ b/packages/overlay/index.less
@@ -0,0 +1,10 @@
+@import '../style/var';
+
+.van-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: @overlay-background-color;
+}
diff --git a/packages/mixins/popup/Modal.vue b/packages/overlay/index.vue
similarity index 91%
rename from packages/mixins/popup/Modal.vue
rename to packages/overlay/index.vue
index 86372af84..82ebb881e 100644
--- a/packages/mixins/popup/Modal.vue
+++ b/packages/overlay/index.vue
@@ -2,7 +2,7 @@
   <transition name="van-fade">
     <div
       v-show="visible"
-      class="van-modal"
+      class="van-overlay"
       :class="className"
       :style="style"
       @touchmove.prevent.stop
@@ -13,7 +13,7 @@
 
 <script>
 export default {
-  name: 'modal',
+  name: 'overlay',
 
   props: {
     zIndex: Number,
diff --git a/packages/popup/index.less b/packages/popup/index.less
index 7bb818984..36266fae2 100644
--- a/packages/popup/index.less
+++ b/packages/popup/index.less
@@ -1,15 +1,6 @@
 @import '../style/var';
 
 .van {
-  &-modal {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    background-color: rgba(0, 0, 0, 0.7);
-  }
-
   &-overflow-hidden {
     overflow: hidden !important;
   }
diff --git a/packages/popup/test/index.spec.js b/packages/popup/test/index.spec.js
index 82539fa5f..b9b3eacd2 100644
--- a/packages/popup/test/index.spec.js
+++ b/packages/popup/test/index.spec.js
@@ -114,7 +114,7 @@ test('render overlay', () => {
     }
   });
 
-  expect(div.querySelector('.van-modal')).toBeTruthy();
+  expect(div.querySelector('.van-overlay')).toBeTruthy();
 });
 
 test('close on click modal', () => {
@@ -136,7 +136,7 @@ test('close on click modal', () => {
     }
   });
 
-  const modal = div.querySelector('.van-modal');
+  const modal = div.querySelector('.van-overlay');
   triggerDrag(modal, 0, -30);
   modal.click();
   expect(wrapper.vm.value).toBeFalsy();
diff --git a/packages/style/base.less b/packages/style/base.less
index 88f3d39a0..b1b1ed89c 100644
--- a/packages/style/base.less
+++ b/packages/style/base.less
@@ -14,3 +14,4 @@
 @import '../button/index';
 @import '../cell/index';
 @import '../cell-group/index';
+@import '../overlay/index';
diff --git a/packages/style/var.less b/packages/style/var.less
index 7772a18f9..383e1b3cd 100644
--- a/packages/style/var.less
+++ b/packages/style/var.less
@@ -66,6 +66,9 @@
 @number-keyboard-key-height: 54px;
 @number-keyboard-key-background: #ebedf0;
 
+// Overlay
+@overlay-background-color: rgba(0, 0, 0, 0.7);
+
 // Radio
 @radio-size: 20px;