update menu, tag, button, progress

bin/build-entry.js

@@ -14,13 +14,13 @@ const install = function(Vue) {
 
 {{install}}
 
-  Vue.use(Loading);
+  // Vue.use(Loading);
 
-  Vue.prototype.$msgbox = MessageBox;
-  Vue.prototype.$alert = MessageBox.alert;
-  Vue.prototype.$confirm = MessageBox.confirm;
-  Vue.prototype.$prompt = MessageBox.prompt;
-  Vue.prototype.$notify = Notification;
+  // Vue.prototype.$msgbox = MessageBox;
+  // Vue.prototype.$alert = MessageBox.alert;
+  // Vue.prototype.$confirm = MessageBox.confirm;
+  // Vue.prototype.$prompt = MessageBox.prompt;
+  // Vue.prototype.$notify = Notification;
 };
 
 // auto install

examples/docs/menu.md

@@ -113,10 +113,10 @@
 <div class="demo-box">
   <div class="nav">
     <h1>Element</h1>
-    <el-menu active-key="2">
-      <el-menu-item key="1">处理中心</el-menu-item>
-      <el-menu-item key="2">我的工作台</el-menu-item>
-      <el-menu-item key="3">订单管理</el-menu-item>
+    <el-menu default-active="2">
+      <el-menu-item index="1">处理中心</el-menu-item>
+      <el-menu-item index="2">我的工作台</el-menu-item>
+      <el-menu-item index="3">订单管理</el-menu-item>
     </el-menu>
     <div class="nav-right">
       <el-input placeholder="搜索用户手机号" icon="search" :value="search"></el-input>
@@ -133,10 +133,10 @@
 ```html
 <div class="nav">
   <h1>Element</h1>
-  <el-menu active-key="1">
-    <el-menu-item key="1">处理中心</el-menu-item>
-    <el-menu-item key="2">我的工作台</el-menu-item>
-    <el-menu-item key="3">订单管理</el-menu-item>
+  <el-menu default-active="1">
+    <el-menu-item index="1">处理中心</el-menu-item>
+    <el-menu-item index="2">我的工作台</el-menu-item>
+    <el-menu-item index="3">订单管理</el-menu-item>
   </el-menu>
   <div class="nav-right">
     <el-input placeholder="搜索用户手机号" icon="search" :value="search"></el-input>
@@ -153,10 +153,10 @@
 <div class="demo-box">
   <div class="nav nav-dark">
     <h1>Element</h1>
-    <el-menu theme="dark" active-key="1">
-      <el-menu-item key="1">处理中心</el-menu-item>
-      <el-menu-item key="2">我的工作台</el-menu-item>
-      <el-menu-item key="3">订单管理</el-menu-item>
+    <el-menu theme="dark" default-active="1">
+      <el-menu-item index="1">处理中心</el-menu-item>
+      <el-menu-item index="2">我的工作台</el-menu-item>
+      <el-menu-item index="3">订单管理</el-menu-item>
     </el-menu>
     <div class="nav-right">
       <el-input placeholder="搜索用户手机号" icon="search" :value="search2"></el-input>
@@ -173,10 +173,10 @@
 ```html
 <div class="nav nav-dark">
   <h1>Element</h1>
-  <el-menu theme="dark" active-key="1">
-    <el-menu-item key="1">处理中心</el-menu-item>
-    <el-menu-item key="2">我的工作台</el-menu-item>
-    <el-menu-item key="3">订单管理</el-menu-item>
+  <el-menu theme="dark" default-active="1">
+    <el-menu-item index="1">处理中心</el-menu-item>
+    <el-menu-item index="2">我的工作台</el-menu-item>
+    <el-menu-item index="3">订单管理</el-menu-item>
   </el-menu>
   <div class="nav-right">
     <el-input placeholder="搜索用户手机号" icon="search" :value="search2"></el-input>
@@ -195,19 +195,19 @@
 <div class="demo-box" style="width: 200px;">
   <div class="nav nav-vertical">
     <h1>Element</h1>
-    <el-menu mode="vertical" active-key="2-1">
-      <el-menu-item key="1"><i class="el-icon-message"></i>导航一</el-menu-item>
-      <el-submenu key="sub1">
+    <el-menu mode="vertical" default-active="2-1">
+      <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
+      <el-submenu index="sub1">
         <template slot="title"><i class="el-icon-menu"></i>导航二</template>
-        <el-menu-item key="2-1">选项1</el-menu-item>
-        <el-menu-item key="2-2">选项2</el-menu-item>
-        <el-menu-item key="2-3">选项3</el-menu-item>
+        <el-menu-item index="2-1">选项1</el-menu-item>
+        <el-menu-item index="2-2">选项2</el-menu-item>
+        <el-menu-item index="2-3">选项3</el-menu-item>
       </el-submenu>
-      <el-submenu key="sub2">
+      <el-submenu index="sub2">
         <template slot="title"><i class="el-icon-setting"></i>导航三</template>
-        <el-menu-item key="3-1">选项1</el-menu-item>
-        <el-menu-item key="3-2">选项2</el-menu-item>
-        <el-menu-item key="3-3">选项3</el-menu-item>
+        <el-menu-item index="3-1">选项1</el-menu-item>
+        <el-menu-item index="3-2">选项2</el-menu-item>
+        <el-menu-item index="3-3">选项3</el-menu-item>
       </el-submenu>
     </el-menu>
   </div>
@@ -216,19 +216,19 @@
 ```html
 <div class="nav nav-vertical">
   <h1>Element</h1>
-  <el-menu mode="vertical" active-key="2-1">
-    <el-menu-item key="1"><i class="el-icon-message"></i>导航一</el-menu-item>
-    <el-submenu key="sub1">
+  <el-menu mode="vertical" default-active="2-1">
+    <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
+    <el-submenu index="sub1">
       <template slot="title"><i class="el-icon-menu"></i>导航二</template>
-      <el-menu-item key="2-1">选项1</el-menu-item>
-      <el-menu-item key="2-2">选项2</el-menu-item>
-      <el-menu-item key="2-3">选项3</el-menu-item>
+      <el-menu-item index="2-1">选项1</el-menu-item>
+      <el-menu-item index="2-2">选项2</el-menu-item>
+      <el-menu-item index="2-3">选项3</el-menu-item>
     </el-submenu>
-    <el-submenu key="sub2">
+    <el-submenu index="sub2">
       <template slot="title"><i class="el-icon-setting"></i>导航三</template>
-      <el-menu-item key="3-1">选项1</el-menu-item>
-      <el-menu-item key="3-2">选项2</el-menu-item>
-      <el-menu-item key="3-3">选项3</el-menu-item>
+      <el-menu-item index="3-1">选项1</el-menu-item>
+      <el-menu-item index="3-2">选项2</el-menu-item>
+      <el-menu-item index="3-3">选项3</el-menu-item>
     </el-submenu>
   </el-menu>
 </div>
@@ -237,31 +237,31 @@
 <div class="demo-box" style="width: 200px;">
   <div class="nav nav-vertical nav-dark">
     <h1>Element</h1>
-    <el-menu mode="vertical" theme="dark" :opened-keys="['sub3']" active-key="3-1" :unique-opend="true" @open="handleopen" @close="handleclose" @select="handleselect">
-      <el-menu-item key="1"><i class="el-icon-message"></i>导航一</el-menu-item>
-      <el-submenu key="sub2">
+    <el-menu mode="vertical" theme="dark" :default-openeds="['sub3']" default-active="3-1" :unique-opend="true" @open="handleopen" @close="handleclose" @select="handleselect">
+      <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
+      <el-submenu index="sub2">
         <template slot="title"><i class="el-icon-menu"></i>导航二</template>
-        <el-menu-item key="2-1">选项1</el-menu-item>
-        <el-menu-item key="2-2">选项2</el-menu-item>
-        <el-menu-item key="2-3">选项3</el-menu-item>
+        <el-menu-item index="2-1">选项1</el-menu-item>
+        <el-menu-item index="2-2">选项2</el-menu-item>
+        <el-menu-item index="2-3">选项3</el-menu-item>
       </el-submenu>
-      <el-submenu key="sub3">
+      <el-submenu index="sub3">
         <template slot="title"><i class="el-icon-setting"></i>导航三</template>
-        <el-menu-item key="3-1">选项1</el-menu-item>
-        <el-menu-item key="3-2">选项2</el-menu-item>
-        <el-menu-item key="3-3">选项3</el-menu-item>
+        <el-menu-item index="3-1">选项1</el-menu-item>
+        <el-menu-item index="3-2">选项2</el-menu-item>
+        <el-menu-item index="3-3">选项3</el-menu-item>
       </el-submenu>
-      <el-submenu key="sub4">
+      <el-submenu index="sub4">
         <template slot="title"><i class="el-icon-setting"></i>导航四</template>
-        <el-menu-item key="4-1">选项1</el-menu-item>
-        <el-menu-item key="4-2">选项2</el-menu-item>
-        <el-menu-item key="4-3">选项3</el-menu-item>
+        <el-menu-item index="4-1">选项1</el-menu-item>
+        <el-menu-item index="4-2">选项2</el-menu-item>
+        <el-menu-item index="4-3">选项3</el-menu-item>
       </el-submenu>
-      <el-submenu key="sub5">
+      <el-submenu index="sub5">
         <template slot="title"><i class="el-icon-setting"></i>导航五</template>
-        <el-menu-item key="5-1">选项1</el-menu-item>
-        <el-menu-item key="5-2">选项2</el-menu-item>
-        <el-menu-item key="5-3">选项3</el-menu-item>
+        <el-menu-item index="5-1">选项1</el-menu-item>
+        <el-menu-item index="5-2">选项2</el-menu-item>
+        <el-menu-item index="5-3">选项3</el-menu-item>
       </el-submenu>
     </el-menu>
   </div>
@@ -270,19 +270,31 @@
 ```html
 <div class="nav nav-vertical nav-dark">
   <h1>Element</h1>
-  <el-menu mode="vertical" theme="dark" active-key="3-1">
-    <el-menu-item key="1"><i class="el-icon-message"></i>导航一</el-menu-item>
-    <el-submenu key="sub1">
+  <el-menu mode="vertical" theme="dark" :default-openeds="['sub3']" default-active="3-1" :unique-opend="true" @open="handleopen" @close="handleclose" @select="handleselect">
+    <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
+    <el-submenu index="sub2">
       <template slot="title"><i class="el-icon-menu"></i>导航二</template>
-      <el-menu-item key="2-1">选项1</el-menu-item>
-      <el-menu-item key="2-2">选项2</el-menu-item>
-      <el-menu-item key="2-3">选项3</el-menu-item>
+      <el-menu-item index="2-1">选项1</el-menu-item>
+      <el-menu-item index="2-2">选项2</el-menu-item>
+      <el-menu-item index="2-3">选项3</el-menu-item>
     </el-submenu>
-    <el-submenu key="sub2">
+    <el-submenu index="sub3">
       <template slot="title"><i class="el-icon-setting"></i>导航三</template>
-      <el-menu-item key="3-1">选项1</el-menu-item>
-      <el-menu-item key="3-2">选项2</el-menu-item>
-      <el-menu-item key="3-3">选项3</el-menu-item>
+      <el-menu-item index="3-1">选项1</el-menu-item>
+      <el-menu-item index="3-2">选项2</el-menu-item>
+      <el-menu-item index="3-3">选项3</el-menu-item>
+    </el-submenu>
+    <el-submenu index="sub4">
+      <template slot="title"><i class="el-icon-setting"></i>导航四</template>
+      <el-menu-item index="4-1">选项1</el-menu-item>
+      <el-menu-item index="4-2">选项2</el-menu-item>
+      <el-menu-item index="4-3">选项3</el-menu-item>
+    </el-submenu>
+    <el-submenu index="sub5">
+      <template slot="title"><i class="el-icon-setting"></i>导航五</template>
+      <el-menu-item index="5-1">选项1</el-menu-item>
+      <el-menu-item index="5-2">选项2</el-menu-item>
+      <el-menu-item index="5-3">选项3</el-menu-item>
     </el-submenu>
   </el-menu>
 </div>

examples/docs/tag.md

@@ -14,7 +14,7 @@
     },
     methods: {
       handleClose(tag) {
-        this.tags.$remove(tag);
+        this.tags.splice(this.tags.indexOf(tag), 1);
       }
     }
   }
@@ -55,6 +55,7 @@
     v-for="tag in tags"
     :closable="true"
     :type="tag.type"
+    :key="tag"
     @close="handleClose(tag)"
   >
   {{tag.name}}

packages/menu/src/menu-item.vue

@@ -9,32 +9,32 @@
     mixins: [emitter],
 
     props: {
-      key: {
+      index: {
         type: String,
         required: true
+      },
+      disabled: {
+        type: Boolean,
+        required: false
       }
     },
-    data() {
-      return {
-        active: false
-      };
-    },
     computed: {
-      keyPath() {
-        return this.$parent.keyPath ? this.$parent.keyPath.concat(this.key) : [this.key];
+      indexPath() {
+        return this.$parent.indexPath ? this.$parent.indexPath.concat(this.index) : [this.index];
+      },
+      activeIndex() {
+        return this.$parent.activeIndex;
+      },
+      active() {
+        return this.index === this.activeIndex;
       }
     },
     methods: {
       handleClick() {
         if (!this.active) {
-          this.dispatch('menu', 'select-key', [this.key, this.keyPath]);
+          this.dispatch('menu', 'select-key', [this.index, this.indexPath]);
         }
       }
-    },
-    events: {
-      'select-key': function(key) {
-        this.active = key === this.key;
-      }
     }
   };
 </script>
@@ -47,6 +47,8 @@
       'is-disabled': disabled
     }">
     <slot></slot>
-    <span class="el-menu-item__bar" v-if="active" transition="zoom-x"></span>
+    <transition name="fade" mode="out-in">
+      <span class="el-menu-item__bar" v-if="active"></span>
+    </transition>
   </li>
 </template>

packages/menu/src/menu.vue

@@ -23,10 +23,11 @@
         type: String,
         default: ''
       },
-      activeKey: {
-        type: String
+      defaultActive: {
+        type: String,
+        default: ''
       },
-      openedKeys: {
+      defaultOpeneds: {
         type: Array,
         default() {
           return [];
@@ -39,35 +40,42 @@
       uniqueOpend: Boolean,
       router: Boolean
     },
-    ready() {
-      this.broadcast('menu-item', 'select-key', this.activeKey);
-      this.broadcast('submenu', 'open-menu', this.openedKeys);
+    data() {
+      return {
+        activeIndex: this.defaultActive,
+        openedMenus: this.defaultOpeneds
+      };
     },
-    events: {
-      'expand-menu': function(key, keyPath) {
-        this.openedKeys.push(key);
+    methods: {
+      handleMenuExpand(key, keyPath) {
+        this.openedMenus.push(key);
 
         if (this.uniqueOpend) {
           this.broadcast('submenu', 'close-menu', keyPath);
-          this.openedKeys = this.openedKeys.filter((key) => {
+          this.openedMenus = this.openedMenus.filter((key) => {
             return keyPath.indexOf(key) !== -1;
           });
         }
         this.$emit('open', key, keyPath);
       },
-      'collapse-menu': function(key, keyPath) {
-        this.openedKeys.$remove(key);
+      handleMenuCollapse(key, keyPath) {
+        this.openedMenus.splice(this.openedMenus.indexOf(key), 1);
         this.$emit('close', key, keyPath);
       },
-      'select-key': function(key, keyPath) {
-        this.activeKey = key;
-        this.broadcast('menu-item', 'select-key', key);
+      handleSelect(key, keyPath) {
+        this.activeIndex = key;
         this.$emit('select', key, keyPath);
 
         if (this.router) {
           this.$route.router.go(key);
         }
       }
+    },
+    mounted() {
+      this.broadcast('submenu', 'open-menu', this.openedMenus);
+      this.$on('expand-menu', this.handleMenuExpand);
+      this.$on('collapse-menu', this.handleMenuCollapse);
+      this.$on('select-key', this.handleSelect);
     }
   };
 </script>

packages/menu/src/submenu.vue

@@ -9,7 +9,7 @@
     mixins: [emitter],
 
     props: {
-      key: {
+      index: {
         type: String,
         required: true
       }
@@ -20,32 +20,35 @@
       };
     },
     computed: {
-      keyPath() {
-        return this.$parent.keyPath ? this.$parent.keyPath.concat(this.key) : [this.key];
+      indexPath() {
+        return this.$parent.indexPath ? this.$parent.indexPath.concat(this.index) : [this.index];
+      },
+      activeIndex() {
+        return this.$parent.activeIndex;
       }
     },
     methods: {
       handleClick() {
         if (!this.opened) {
-          this.dispatch('menu', 'expand-menu', [this.key, this.keyPath]);
+          this.dispatch('menu', 'expand-menu', [this.index, this.indexPath]);
           this.opened = true;
         } else {
-          this.dispatch('menu', 'collapse-menu', [this.key, this.keyPath]);
+          this.dispatch('menu', 'collapse-menu', [this.index, this.indexPath]);
           this.opened = false;
         }
       }
     },
-    events: {
-      'close-menu': function(openedKeys) {
-        if (openedKeys && openedKeys.indexOf(this.key) === -1) {
+    mounted() {
+      this.$on('close-menu', (openedIndexs) => {
+        if (openedIndexs && openedIndexs.indexOf(this.index) === -1) {
           this.opened = false;
         }
-      },
-      'open-menu': function(keysArray) {
-        if (keysArray && keysArray.indexOf(this.key) !== -1) {
+      });
+      this.$on('open-menu', (IndexsArray) => {
+        if (IndexsArray && IndexsArray.indexOf(this.index) !== -1) {
           this.opened = true;
         }
-      }
+      });
     }
   };
 </script>

packages/tag/src/tag.vue

@@ -1,14 +1,14 @@
 <template>
-  <span
-    class="el-tag"
-    :class="[type ? 'el-tag--' + type : '', {'is-hit': hit}]"
-    :transition="closeTransition ? '' : 'md-fade-center'">
-    <slot></slot>
-    <i
-      class="el-tag__close el-icon-close"
-      v-if="closable"
-      @click="handleClose"></i>
-  </span>
+  <transition :name="closeTransition ? '' : 'md-fade-center'">
+    <span
+      class="el-tag"
+      :class="[type ? 'el-tag--' + type : '', {'is-hit': hit}]">
+      <slot></slot>
+      <i class="el-tag__close el-icon-close"
+        v-if="closable"
+        @click="handleClose"></i>
+    </span>
+  </transition>
 </template>
 <script>
   export default {

packages/theme-default/src/common/transition.css

@@ -18,17 +18,19 @@
   opacity: 0;
 }
 
-.md-fade-center-transition {
-  opacity: 1;
-  transform: scaleY(1);
-  transition: var(--md-fade-transition);
-  transform-origin: center center;
+.md-fade-center-enter-active,
+.md-fade-center-leave-active {
+  transition: all .3s cubic-bezier(.55,0,.1,1);
 }
 .md-fade-center-enter,
 .md-fade-center-leave {
   opacity: 0;
   transform: scaleY(0);
 }
+.md-fade-center-leave-active {
+  opacity: 0;
+  transform: scaleY(0);
+}
 
 .md-fade-bottom-transition {
   opacity: 1;
@@ -79,14 +81,12 @@
   transform: scaleX(0);
 }
 
-.zoom-x-transition {
-  transform: scaleX(1);
-  transition: var(--md-fade-transition);
-  transform-origin: center center;
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .3s cubic-bezier(.645,.045,.355,1);
 }
-.zoom-x-enter,
-.zoom-x-leave {
-  transform: scaleX(0);
+.fade-enter,
+.fade-leave {
+  opacity: 0;
 }
 
 .slide-in-bottom-enter {

packages/theme-default/src/menu.css

@@ -11,16 +11,6 @@
     margin: 0;
     padding-left: 0;
 
-    @e active-bar {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      height: 5px;
-      background-color: var(--color-primary);
-      z-index: 1;
-      will-change: transform;
-      transition: transform .3s cubic-bezier(.645,.045,.355,1), width .3s cubic-bezier(.645,.045,.355,1);
-    }
     @m vertical {
       height: auto;
 
@@ -37,7 +27,7 @@
         &:hover {
           background-color: #d3dce6;
         }
-        &.is-active .el-menu-item__bar {
+        & .el-menu-item__bar {
           display: none;
         }
       }
@@ -89,18 +79,18 @@
     margin: 0 10px;
     cursor: pointer;
     position: relative;
+    transition: var(--md-fade-transition);
+    transform-origin: center center;
     
-    @when active {
-      .el-menu-item__bar {
-        content: '';
-        width: 100%;
-        height: 5px;
-        background-color: var(--color-primary);
-        bottom: 0;
-        left: 0;
-        position: absolute;
-        display: block;
-      }
+    @e bar {
+      content: '';
+      width: 100%;
+      height: 5px;
+      background-color: var(--color-primary);
+      bottom: 0;
+      left: 0;
+      position: absolute;
+      display: block;
     }
     & [class^="el-icon-"] {
       vertical-align: baseline;

src/index.js

@@ -51,6 +51,8 @@ import Progress from '../packages/progress/index.js';
 import Spinner from '../packages/spinner/index.js';
 
 const install = function(Vue) {
+  if (install.installed) return;
+
   Vue.component(Group.name, Group);
   Vue.component(SelectDropdown.name, SelectDropdown);
   Vue.component(Pagination.name, Pagination);
@@ -100,13 +102,13 @@ const install = function(Vue) {
   Vue.component(Progress.name, Progress);
   Vue.component(Spinner.name, Spinner);
 
-  Vue.use(Loading);
+  // Vue.use(Loading);
 
-  Vue.prototype.$msgbox = MessageBox;
-  Vue.prototype.$alert = MessageBox.alert;
-  Vue.prototype.$confirm = MessageBox.confirm;
-  Vue.prototype.$prompt = MessageBox.prompt;
-  Vue.prototype.$notify = Notification;
+  // Vue.prototype.$msgbox = MessageBox;
+  // Vue.prototype.$alert = MessageBox.alert;
+  // Vue.prototype.$confirm = MessageBox.confirm;
+  // Vue.prototype.$prompt = MessageBox.prompt;
+  // Vue.prototype.$notify = Notification;
 };
 
 // auto install