Merge pull request #54 from baiyaaaaa/next

fix autocomplete

package.json

@@ -32,7 +32,7 @@
   "devDependencies": {
     "babel-helper-vue-jsx-merge-props": "^1.0.1",
     "babel-plugin-syntax-jsx": "^6.8.0",
-    "babel-plugin-transform-vue-jsx": "^1.1.1",
+    "babel-plugin-transform-vue-jsx": "^3.1.0",
     "file-save": "^0.2.0",
     "gh-pages": "^0.11.0",
     "highlight.js": "^9.3.0",
@@ -44,7 +44,7 @@
     "purecss": "^0.6.0",
     "q": "^1.4.1",
     "uppercamelcase": "^1.1.0",
-    "vue": "^2.0.0-beta.5",
+    "vue": "^2.0.0-beta.8",
     "vue-loader": "^9.2.3",
     "vue-markdown-loader": "^0.4.0",
     "vue-popup": "^0.2.1",

packages/autocomplete/package.json

@@ -12,5 +12,6 @@
   "author": "haiping.zeng<haiping.zeng@ele.me>",
   "license": "MIT",
   "dependencies": {
+    "vue-clickoutside": "^0.1.0"
   }
 }

packages/autocomplete/src/autocomplete.vue

 <template>
-  <div class="el-autocomplete">
+  <div class="el-autocomplete" v-clickoutside="handleBlur">
     <el-input
       :value="value"
       :disabled="disabled"
       :placeholder="placeholder"
-      :name = 'name'
+      :name='name'
       @onchange="handleChange"
-      @onfocus="handleFocus()"
-      @onblur="handleBlur()"
-      @keydown.up="highlight(highlightedIndex - 1)"
-      @keydown.down="highlight(highlightedIndex + 1)"
-      @keydown.enter="select(highlightedIndex)"
+      @onfocus="handleFocus"
+      @keydown.up.native="highlight(highlightedIndex - 1)"
+      @keydown.down.native="highlight(highlightedIndex + 1)"
+      @keydown.enter.native="select(highlightedIndex)"
     ></el-input>
-    <ul
-      v-show="showSuggestions && !loading && suggestions.length > 0"
-      class="el-autocomplete__suggestions"
-      :class="[partial ? partial.name : '']"
-      transition="md-fade-bottom"
-      v-el:suggestions
-    >
-      <li :class="{'highlighted': highlightedIndex === $index}" @click="select($index)" v-for="item in suggestions">{{item.display}}</li>
-    </ul>
-    <div
-      v-show="showSuggestions && loading"
-      class="el-autocomplete__suggestions is-loading"
-    >
-      <i class="el-icon-loading"></i>
-    </div>
+    <transition name="md-fade-bottom">
+      <ul
+        v-show="suggestionVisible && !loading && suggestions.length > 0"
+        class="el-autocomplete__suggestions"
+        ref="suggestions"
+      >
+        <li
+          v-if="!customItem"
+          :class="{'highlighted': highlightedIndex === index}"
+          @click="select(index)"
+          v-for="(item, index) in suggestions">
+          {{item.display}}
+        </li>
+        <component
+          v-else
+          :is="customItem"
+          @click.native="select(index)"
+          v-for="(item, index) in suggestions"
+          :item="item"
+          :index="index">
+        </component>
+      </ul>
+    </transition>
+    <transition name="md-fade-bottom">
+      <div
+        v-show="suggestionVisible && loading"
+        class="el-autocomplete__suggestions is-loading"
+      >
+        <i class="el-icon-loading"></i>
+      </div>
+    </transition>
   </div>
 </template>
 <script>
   import ElInput from 'packages/input/index.js';
+  import Vue from 'vue';
+  import VueClickoutside from 'main/utils/clickoutside';
+  Vue.use(VueClickoutside);
 
   export default {
     name: 'ElAutocomplete',
@@ -42,61 +60,58 @@
       placeholder: String,
       disabled: Boolean,
       name: String,
-      suggestions: [Array, Object],
       value: String,
-      showOnUpDown: Boolean,
-      partial: Object
+      fetchSuggestions: Function,
+      triggerOnfocus: {
+        type: Boolean,
+        default: true
+      },
+      customItem: String
     },
     data() {
       return {
-        showSuggestions: false,
+        suggestions: [],
+        suggestionVisible: false,
         inputFocusing: false,
         loading: false,
         highlightedIndex: -1
       };
     },
-    created() {
-      if (this.partial) {
-        this.$options.template = this.$options.template.replace(/(item\sin\ssuggestions">)(?:.|\s)*?(<)/, '$1' + this.partial.template + '$2');
-      }
-    },
-    watch: {
-      'suggestions'(val) {
-        if (val && val.then) {
-          this.loading = true;
-          this.suggestions.then((res) => {
-            this.loading = false;
-            this.suggestions = res;
-          });
-        }
-      }
-    },
     methods: {
       handleChange(value) {
-        this.value = value;
-        this.showSuggestions = true;
+        this.$emit('input', value);
+        this.showSuggestions(value);
       },
       handleFocus() {
-        if (!this.showOnUpDown) {
-          this.showSuggestions = true;
+        if (this.triggerOnfocus) {
+          this.showSuggestions(this.value);
         }
       },
       handleBlur() {
-        this.showSuggestions = false;
+        this.suggestionVisible = false;
       },
       select(index) {
+        debugger;
         if (this.suggestions && this.suggestions[index]) {
-          this.value = this.suggestions[index].value;
+          this.$emit('input', this.suggestions[index].value);
           this.$nextTick(() => {
-            this.showSuggestions = false;
+            this.suggestionVisible = false;
           });
         }
       },
+      showSuggestions(value) {
+        this.suggestionVisible = true;
+        this.loading = true;
+        this.fetchSuggestions(value, (suggestions) => {
+          this.loading = false;
+          this.suggestions = suggestions;
+        });
+      },
       getSuggestionElement(index) {
         if (!this.suggestions || !this.suggestions[index]) {
           return null;
         } else {
-          return this.$els.suggestions.children[index];
+          return this.$refs.suggestions.children[index];
         }
       },
       highlight(index) {
@@ -107,7 +122,7 @@
         }
 
         var elSelect = this.getSuggestionElement(index);
-        var elSuggestions = this.$els.suggestions;
+        var elSuggestions = this.$refs.suggestions;
         var scrollTop = elSuggestions.scrollTop;
         var offsetTop = elSelect.offsetTop;
 
@@ -121,7 +136,7 @@
         this.highlightedIndex = index;
 
         if (this.showOnUpDown) {
-          this.showSuggestions = true;
+          this.suggestionVisible = true;
         }
       }
     }

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

@@ -28,28 +28,28 @@
   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,
 .md-fade-center-leave-active {
   opacity: 0;
   transform: scaleY(0);
 }
 
-.md-fade-bottom-transition {
+.md-fade-bottom-enter-active,
+.md-fade-bottom-leave-active {
   opacity: 1;
   transform: scaleY(1);
   transition: var(--md-fade-transition);
   transform-origin: center top;
 }
 .md-fade-bottom-enter,
-.md-fade-bottom-leave {
+.md-fade-bottom-leave,
+.md-fade-bottom-leave-active {
   opacity: 0;
   transform: scaleY(0);
 }
 
-.md-fade-top-transition {
+.md-fade-top-enter-active,
+.md-fade-top-leave-active {
   opacity: 1;
   transform: scaleY(1);
   transition: var(--md-fade-transition);
@@ -57,40 +57,47 @@
 }
 
 .md-fade-top-enter,
-.md-fade-top-leave {
+.md-fade-top-leave,
+.md-fade-top-leave-active {
   opacity: 0;
   transform: scaleY(0);
 }
 
-.md-fade-left-transition {
+.md-fade-left-enter-active,
+.md-fade-left-leave-active {
   opacity: 1;
   transform: scaleX(1);
   transition: var(--md-fade-transition);
   transform-origin: right center;
 }
 .md-fade-left-enter,
-.md-fade-left-leave {
+.md-fade-left-leave,
+.md-fade-left-leave-active {
   opacity: 0;
   transform: scaleX(0);
 }
 
-.md-fade-right-transition {
+.md-fade-right-enter-active,
+.md-fade-right-leave-active {
   opacity: 1;
   transform: scaleX(1);
   transition: var(--md-fade-transition);
   transform-origin: left center;
 }
 .md-fade-right-enter,
-.md-fade-right-leave {
+.md-fade-right-leave,
+.md-fade-right-leave-active {
   opacity: 0;
   transform: scaleX(0);
 }
 
-.fade-enter-active, .fade-leave-active {
+.fade-enter-active,
+.fade-leave-active {
   transition: opacity .3s cubic-bezier(.645,.045,.355,1);
 }
 .fade-enter,
-.fade-leave {
+.fade-leave,
+.fade-leave-active {
   opacity: 0;
 }