Merge branch 'next' of github.com:eleme/element-ui into next

examples/docs/message-box.md

@@ -65,11 +65,11 @@
 </script>
 
 ## 基本用法
-<el-button @click="open">打开 Alert</el-button>
+<el-button @click.native="open">打开 Alert</el-button>
 
 ```html
 <template>
-  <el-button @click="open">打开 Message Box</el-button>
+  <el-button @click.native="open">打开 Message Box</el-button>
 </template>
 
 <script>
@@ -85,11 +85,11 @@
 
 ## 返回 Promise
 
-<el-button @click="open2">打开 alert</el-button>
+<el-button @click.native="open2">打开 alert</el-button>
 
 ```html
 <template>
-  <el-button @click="open4">打开 alert</el-button>
+  <el-button @click.native="open2">打开 alert</el-button>
 </template>
 
 <script>
@@ -105,11 +105,11 @@
 </script>
 ```
 
-<el-button @click="open3">打开 confirm</el-button>
+<el-button @click.native="open3">打开 confirm</el-button>
 
 ```html
 <template>
-  <el-button @click="open5">打开 confirm</el-button>
+  <el-button @click.native="open3">打开 confirm</el-button>
 </template>
 
 <script>
@@ -132,11 +132,11 @@
   }
 </script>
 ```
-<el-button @click="open4">打开 prompt</el-button>
+<el-button @click.native="open4">打开 prompt</el-button>
 
 ```html
 <template>
-  <el-button @click="open6">打开 prompt</el-button>
+  <el-button @click.native="open4">打开 prompt</el-button>
 </template>
 
 <script>
@@ -157,11 +157,11 @@
 </script>
 ```
 
-<el-button @click="open5">打开 Message Box</el-button>
+<el-button @click.native="open5">打开 Message Box</el-button>
 
 ```html
 <template>
-  <el-button @click="open3">打开 Message Box</el-button>
+  <el-button @click.native="open5">打开 Message Box</el-button>
 </template>
 
 <script>
@@ -183,11 +183,11 @@
 
 ## 更多配置项
 
-<el-button @click="open6">打开 Message Box</el-button>
+<el-button @click.native="open6">打开 Message Box</el-button>
 
 ```html
 <template>
-  <el-button @click="open2">打开 Message Box</el-button>
+  <el-button @click.native="open6">打开 Message Box</el-button>
 </template>
 
 <script>

examples/docs/notification.md

@@ -74,12 +74,12 @@
 ## 基本用法
 
 <div class="demo-box demo-notification">
-  <el-button :plain="true" v-on:click="open">点击展示 Notification</el-button>
+  <el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
 </div>
 
 ```html
 <template>
-  <el-button :plain="true" v-on:click="open">点击展示 Notification</el-button>
+  <el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
 </template>
 
 <script>
@@ -99,18 +99,18 @@
 ## 带有 icon
 
 <div class="demo-box demo-notification">
-  <el-button :plain="true" v-on:click="open2">成功</el-button>
-  <el-button :plain="true" v-on:click="open3">警告</el-button>
-  <el-button :plain="true" v-on:click="open4">消息</el-button>
-  <el-button :plain="true" v-on:click="open5">错误</el-button>
+  <el-button :plain="true" v-on:click.native="open2">成功</el-button>
+  <el-button :plain="true" v-on:click.native="open3">警告</el-button>
+  <el-button :plain="true" v-on:click.native="open4">消息</el-button>
+  <el-button :plain="true" v-on:click.native="open5">错误</el-button>
 </div>
 
 ```html
 <template>
-  <el-button :plain="true" v-on:click="open2">成功</el-button>
-  <el-button :plain="true" v-on:click="open3">警告</el-button>
-  <el-button :plain="true" v-on:click="open4">消息</el-button>
-  <el-button :plain="true" v-on:click="open5">错误</el-button>
+  <el-button :plain="true" v-on:click.native="open2">成功</el-button>
+  <el-button :plain="true" v-on:click.native="open3">警告</el-button>
+  <el-button :plain="true" v-on:click.native="open4">消息</el-button>
+  <el-button :plain="true" v-on:click.native="open5">错误</el-button>
 </template>
 
 <script>
@@ -154,12 +154,12 @@
 
 ## 不会自动关闭
 <div class="demo-box demo-notification">
-  <el-button :plain="true" v-on:click="open6">不会自动关闭的 Notification</el-button>
+  <el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
 </div>
 
 ```html
 <template>
-  <el-button :plain="true" v-on:click="open6">不会自动关闭的 Notification</el-button>
+  <el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
 </template>
 
 <script>
@@ -179,12 +179,12 @@
 
 ## 回调函数
 <div class="demo-box demo-notification">
-  <el-button :plain="true" v-on:click="open7">带有回调函数的 Notification</el-button>
+  <el-button :plain="true" v-on:click.native="open7">带有回调函数的 Notification</el-button>
 </div>
 
 ```html
 <template>
-  <el-button :plain="true" v-on:click="open7">带有回调函数的 Notification</el-button>
+  <el-button :plain="true" v-on:click.native="open7">带有回调函数的 Notification</el-button>
 </template>
 
 <script>

packages/alert/src/main.vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="el-alert el-alert--{{ type }}" transition="el-alert-fade" v-show="visible">
-    <i class="el-alert__icon {{ iconClass }} {{ isBigIcon }}" v-if="showIcon"></i>
-    <div class="el-alert__content">
-      <span class="el-alert__title {{ isBoldTitle }}" v-if="title">{{ title }}</span>
-      <p class="el-alert__description" v-if="description">{{ description }}</p>
-      <i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
+  <transition name="el-alert-fade">
+    <div class="el-alert" :class="[ typeClass ]" v-show="visible">
+      <i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
+      <div class="el-alert__content">
+        <span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title">{{ title }}</span>
+        <p class="el-alert__description" v-if="description">{{ description }}</p>
+        <i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
+      </div>
     </div>
-  </div>
+  </transition>
 </template>
 
 <script type="text/babel">
@@ -60,6 +62,10 @@
     },
 
     computed: {
+      typeClass() {
+        return `el-alert--${ this.type }`;
+      },
+
       iconClass() {
         return TYPE_CLASSES_MAP[this.type] || 'el-icon-information';
       },

packages/message-box/package.json

@@ -12,6 +12,6 @@
   "author": "elemefe",
   "license": "MIT",
   "dependencies": {
-    "vue-popup": "^0.1.8"
+    "vue-popup": "^0.2.1"
   }
 }

packages/message-box/src/main.js

@@ -88,7 +88,7 @@ var showNextMsg = function() {
     initInstance();
   }
 
-  if (!instance.visible || instance.closeTimer) {
+  if (!instance.value || instance.closeTimer) {
     if (msgQueue.length > 0) {
       currentMsg = msgQueue.shift();
 
@@ -98,10 +98,15 @@ var showNextMsg = function() {
           instance[prop] = options[prop];
         }
       }
-      instance.$appendTo(document.body);
+      ['modal', 'showClose', 'closeOnClickModal', 'closeOnPressEscape'].forEach(prop => {
+        if (instance[prop] === undefined) {
+          instance[prop] = true;
+        }
+      });
+      document.body.appendChild(instance.$el);
 
       Vue.nextTick(() => {
-        instance.visible = true;
+        instance.value = true;
       });
     }
   }
@@ -188,7 +193,7 @@ MessageBox.prompt = function(message, title, options) {
 };
 
 MessageBox.close = function() {
-  instance.visible = false;
+  instance.value = false;
   msgQueue = [];
   currentMsg = null;
 };

packages/message-box/src/main.vue

@@ -1,23 +1,25 @@
 <template>
   <div class="el-message-box__wrapper">
-    <div class="el-message-box" v-if="rendered" v-show="visible" transition="msgbox-bounce">
-      <div class="el-message-box__header" v-if="title !== ''">
-        <div class="el-message-box__title">{{ title }}</div>
-        <i class="el-message-box__close el-icon-close" @click="handleAction('cancel')" v-if="showClose"></i>
-      </div>
-      <div class="el-message-box__content" v-if="message !== ''">
-        <div class="el-message-box__status {{ typeClass }}"></div>
-        <div class="el-message-box__message" :style="{ 'margin-left': type ? '50px' : '0' }"><p>{{ message }}</p></div>
-        <div class="el-message-box__input" v-show="showInput">
-          <input type="text" v-model="inputValue" :placeholder="inputPlaceholder" v-el:input />
-          <div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{editorErrorMessage}}</div>
+    <transition name="msgbox-bounce">
+      <div class="el-message-box" v-show="value">
+        <div class="el-message-box__header" v-if="title !== ''">
+          <div class="el-message-box__title">{{ title }}</div>
+          <i class="el-message-box__close el-icon-close" @click="handleAction('cancel')" v-if="showClose"></i>
+        </div>
+        <div class="el-message-box__content" v-if="message !== ''">
+          <div class="el-message-box__status" :class="[ typeClass ]"></div>
+          <div class="el-message-box__message" :style="{ 'margin-left': type ? '50px' : '0' }"><p>{{ message }}</p></div>
+          <div class="el-message-box__input" v-show="showInput">
+            <input type="text" v-model="inputValue" :placeholder="inputPlaceholder" ref="input" />
+            <div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{editorErrorMessage}}</div>
+          </div>
+        </div>
+        <div class="el-message-box__btns">
+          <el-button :class="[ cancelButtonClasses ]" v-show="showCancelButton" @click.native="handleAction('cancel')">{{ cancelButtonText }}</el-button>
+          <el-button :class="[ confirmButtonClasses ]" v-show="showConfirmButton" @click.native="handleAction('confirm')" type="primary">{{ confirmButtonText }}</el-button>
         </div>
       </div>
-      <div class="el-message-box__btns">
-        <el-button class="{{ cancelButtonClasses }}" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</el-button>
-        <el-button class="{{ confirmButtonClasses }}" v-show="showConfirmButton" @click="handleAction('confirm')" type="primary">{{ confirmButtonText }}</el-button>
-      </div>
-    </div>
+    </transition>
   </div>
 </template>
 
@@ -34,8 +36,6 @@
   import Popup from 'vue-popup';
 
   export default {
-    name: 'el-message-box',
-
     mixins: [ Popup ],
 
     props: {
@@ -68,12 +68,27 @@
     },
 
     methods: {
+      doClose() {
+        this.value = false;
+        this._closing = true;
+
+        this.onClose && this.onClose();
+
+        if (this.modal) {
+          document.body.style.overflow = this.bodyOverflow;
+        }
+
+        if (!this.transition) {
+          this.doAfterClose();
+        }
+      },
+
       handleAction(action) {
         if (this.$type === 'prompt' && action === 'confirm' && !this.validate()) {
           return;
         }
         var callback = this.callback;
-        this.visible = false;
+        this.value = false;
         callback(action);
       },
 
@@ -109,11 +124,11 @@
         }
       },
 
-      visible(val) {
+      value(val) {
         if (val && this.$type === 'prompt') {
           setTimeout(() => {
-            if (this.$els.input) {
-              this.$els.input.focus();
+            if (this.$refs.input) {
+              this.$refs.input.focus();
             }
           }, 500);
         }

packages/notification/src/main.js

@@ -19,7 +19,8 @@ var Notification = function(options) {
   });
   instance.id = id;
   instance.vm = instance.$mount();
-  instance.vm.$appendTo('body');
+  document.body.appendChild(instance.vm.$el);
+  instance.vm.visible = true;
   instance.dom = instance.vm.$el;
 
   var topDist = 0;
@@ -46,7 +47,7 @@ Notification.close = function(id, userOnClose) {
 
   if (len > 1) {
     for (i = index; i < len - 1 ; i++) {
-      instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 10 + 'px';
+      instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 16 + 'px';
     }
   }
 };

packages/notification/src/main.vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="el-notification" transition="el-notification-fade" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()">
-    <i class="el-notification__icon el-icon-{{typeClass}}" v-if="type"></i>
-    <div class="el-notification__group" :style="{ 'margin-left': type ? '55px' : '0' }">
-      <span>{{ title }}</span>
-      <p>{{ message }}</p>
-      <div class="el-notification__closeBtn el-icon-close" @click="handleClose()"></div>
+  <transition name="el-notification-fade">
+    <div class="el-notification" v-show="visible" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()">
+      <i class="el-notification__icon" :class="[ typeClass ]" v-if="type"></i>
+      <div class="el-notification__group" :style="{ 'margin-left': type ? '55px' : '0' }">
+        <span>{{ title }}</span>
+        <p>{{ message }}</p>
+        <div class="el-notification__closeBtn el-icon-close" @click="handleClose()"></div>
+      </div>
     </div>
-  </div>
+  </transition>
 </template>
 
 <script type="text/babel">
@@ -18,10 +20,9 @@
   };
 
   export default {
-    name: 'ElNotification',
-
     data() {
       return {
+        visible: false,
         title: '',
         message: '',
         duration: 4500,
@@ -36,14 +37,18 @@
 
     computed: {
       typeClass() {
-        return this.type ? typeMap[this.type] : '';
+        return this.type ? `el-icon-${ typeMap[this.type] }` : '';
       }
     },
 
     watch: {
       closed(newVal) {
         if (newVal) {
-          this.$destroy(true);
+          this.visible = false;
+          this.$el.addEventListener('transitionend', () => {
+            this.$destroy(true);
+            this.$el.parentNode.removeChild(this.$el);
+          });
         }
       }
     },
@@ -71,7 +76,7 @@
       }
     },
 
-    ready() {
+    mounted() {
       if (this.duration > 0) {
         this.timer = setTimeout(() => {
           if (!this.closed) {

packages/theme-default/src/alert.css

@@ -15,6 +15,7 @@
     color: #fff;
     opacity: 1;
     display: table;
+    transition: opacity .2s;
 
     @modifier success {
       background-color: #13ce66;
@@ -78,12 +79,8 @@
     }
   }
 
-  .el-alert-fade-transition {
-    transition: opacity .2s;
-  }
-
   .el-alert-fade-enter,
-  .el-alert-fade-leave {
+  .el-alert-fade-leave-active {
     opacity: 0;
   }
 }

packages/theme-default/src/message-box.css

@@ -115,12 +115,12 @@
   }
 }
 
-.msgbox-bounce-enter {
+.msgbox-bounce-enter-active {
   -webkit-animation: msgbox-bounce-in .3s cubic-bezier(0.3, 0, 0, 1.5);
   animation: msgbox-bounce-in .3s cubic-bezier(0.3, 0, 0, 1.5);
 }
 
-.msgbox-bounce-leave {
+.msgbox-bounce-leave-active {
   -webkit-animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
   animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
 }

packages/theme-default/src/notification.css

@@ -72,7 +72,7 @@
     right: 0;
   }
 
-  .el-notification-fade-leave {
+  .el-notification-fade-leave-active {
     opacity: 0;
   }
 }