Merge pull request #56 from eleme/feat/next-tree

Update checkbox and tree

.babelrc

@@ -1,5 +1,5 @@
 {
-  "presets": ["es2015"],
+  "presets": ["es2015-loose"],
   "plugins": ["transform-vue-jsx"],
   "comments": false
 }

examples/docs/checkbox.md

@@ -31,32 +31,32 @@
 ### 单个勾选框，逻辑值
 
 <div class="demo-box demo-checkbox">
-  <el-checkbox class="checkbox" :value.sync="checked">{{checked | json}}</el-checkbox>
+  <el-checkbox class="checkbox" v-model="checked">{{ checked }}</el-checkbox>
 </div>
 
 ```html
-<el-checkbox class="checkbox" :value.sync="checked">{{checked | json}}</el-checkbox>
+<el-checkbox class="checkbox" v-model="checked">{{ checked }}</el-checkbox>
 ```
 
 ### 多个勾选框，绑定到同一个数组
 
 <div class="demo-box demo-checkbox">
-  <el-checkbox class="checkbox" :value.sync="checkList" label="复选框 A"></el-checkbox>
-  <el-checkbox class="checkbox" :value.sync="checkList" label="复选框 B"></el-checkbox>
-  <el-checkbox class="checkbox" :value.sync="checkList" label="复选框 C"></el-checkbox>
-  <el-checkbox class="checkbox" :value.sync="checkList" label="禁用" disabled></el-checkbox>
-  <el-checkbox class="checkbox" :value.sync="checkList" label="选中且禁用" disabled></el-checkbox>
+  <el-checkbox class="checkbox" v-model="checkList" label="复选框 A"></el-checkbox>
+  <el-checkbox class="checkbox" v-model="checkList" label="复选框 B"></el-checkbox>
+  <el-checkbox class="checkbox" v-model="checkList" label="复选框 C"></el-checkbox>
+  <el-checkbox class="checkbox" v-model="checkList" label="禁用" disabled></el-checkbox>
+  <el-checkbox class="checkbox" v-model="checkList" label="选中且禁用" disabled></el-checkbox>
 </div>
 
-<p>{{checkList | json}}</p>
+<p>{{ checkList }}</p>
 
 ```html
 <template>
-  <el-checkbox class="checkbox" :value.sync="checkList" label="复选框 A"></el-checkbox>
-  <el-checkbox class="checkbox" :value.sync="checkList" label="复选框 B"></el-checkbox>
-  <el-checkbox class="checkbox" :value.sync="checkList" label="复选框 C"></el-checkbox>
-  <el-checkbox class="checkbox" :value.sync="checkList" label="禁用" disabled></el-checkbox>
-  <el-checkbox class="checkbox" :value.sync="checkList" label="选中且禁用" disabled></el-checkbox>
+  <el-checkbox class="checkbox" v-model="checkList" label="复选框 A"></el-checkbox>
+  <el-checkbox class="checkbox" v-model="checkList" label="复选框 B"></el-checkbox>
+  <el-checkbox class="checkbox" v-model="checkList" label="复选框 C"></el-checkbox>
+  <el-checkbox class="checkbox" v-model="checkList" label="禁用" disabled></el-checkbox>
+  <el-checkbox class="checkbox" v-model="checkList" label="选中且禁用" disabled></el-checkbox>
 </template>
 
 <script>
@@ -75,20 +75,20 @@
 <div class="demo-box demo-checkbox">
   <el-checkbox
     class="checkbox"
-    :value.sync="name"
+    v-model="name"
     :true-label="a"
-    :false-label="b"
-    >
-  </el-checkbox>{{name}}
+    :false-label="b">
+    {{name}}
+  </el-checkbox>
 </div>
 
 ```html
 <el-checkbox
   class="checkbox"
-  :value.sync="name"
+  v-model="name"
   :true-label="a"
-  :false-label="b"
-  >
+  :false-label="b">
+  {{name}}
 </el-checkbox>
 ```
 

examples/docs/tree.md

@@ -10,7 +10,7 @@
   }
 </style>
 
-<script type="text/ecmascript-6">
+<script>
   import Vue from 'vue';
 
   var data = [{

package.json

@@ -33,6 +33,7 @@
     "babel-helper-vue-jsx-merge-props": "^1.0.1",
     "babel-plugin-syntax-jsx": "^6.8.0",
     "babel-plugin-transform-vue-jsx": "^3.1.0",
+    "babel-preset-es2015-loose": "^7.0.0",
     "file-save": "^0.2.0",
     "gh-pages": "^0.11.0",
     "highlight.js": "^9.3.0",

packages/autocomplete/src/autocomplete.vue

@@ -91,7 +91,6 @@
         this.suggestionVisible = false;
       },
       select(index) {
-        debugger;
         if (this.suggestions && this.suggestions[index]) {
           this.$emit('input', this.suggestions[index].value);
           this.$nextTick(() => {

packages/checkbox/src/checkbox-group.vue

@@ -12,6 +12,7 @@
         required: true
       }
     },
+
     watch: {
       value(value) {
         this.dispatch('form-item', 'el.form.change', value);

packages/checkbox/src/checkbox.vue

@@ -16,11 +16,10 @@
         :false-value="falseLabel"
         v-model="_value"
         type="checkbox"
-        @change="$emit('on-change', checked)"
         @focus="focus = true"
         @blur="focus = false"
         :disabled="isLimit || disabled"
-        v-el: checkbox>
+        ref="checkbox">
       <input
         v-else
         class="el-checkbox__original"
@@ -29,16 +28,16 @@
         @focus="focus = true"
         @blur="focus = false"
         type="checkbox"
-        @change="$emit('on-change', checked)"
         :disabled="isLimit || disabled">
     </span>
     <span class="el-checkbox__label">
       <slot></slot>
-      <template v-if="!_slotContents">{{label}}</template>
+      <template v-if="!$slots || !$slots.default">{{label}}</template>
     </span>
   </label>
 </template>
 <script>
+  import Emitter from 'main/mixins/emitter';
   /**
    * checkbox
    * @module components/basic/checkbox
@@ -56,10 +55,10 @@
   export default {
     name: 'ElCheckbox',
 
+    mixins: [Emitter],
+
     props: {
-      value: {
-        type: [Array, Boolean, String]
-      },
+      value: {},
       label: {
         type: String
       },
@@ -80,9 +79,9 @@
         },
         set(newValue) {
           if (this.value !== undefined) {
-            this.value = newValue;
+            this.$emit('input', newValue);
           } else {
-            this.$parent.value = newValue;
+            this.$parent.$emit('input', newValue);
           }
         }
       },
@@ -106,24 +105,21 @@
       };
     },
 
-    events: {
-      ['element.checkbox.disabled']() {
-        if (this.checked) {
-          return;
-        }
-
-        this.isLimit = true;
-      },
-
-      ['element.checkbox.enabled']() {
-        this.isLimit = false;
-      }
-    },
-
     watch: {
       checked(sure) {
-        this.$dispatch('element.checkbox', sure);
+        this.$emit('on-change', sure);
+        this.dispatch('element.checkbox', sure);
       }
+    },
+
+    created() {
+      this.$on('element.checkbox.disabled', () => {
+        if (this.checked) return;
+        this.isLimit = true;
+      });
+      this.$on('element.checkbox.enabled', () => {
+        this.isLimit = false;
+      });
     }
   };
 </script>

packages/tree/src/transition.js

@@ -1,11 +1,11 @@
-export default {
+class Transition {
   beforeEnter(el) {
     el.dataset.oldPaddingTop = el.style.paddingTop;
     el.dataset.oldPaddingBottom = el.style.paddingBottom;
     el.style.height = '0';
     el.style.paddingTop = 0;
     el.style.paddingBottom = 0;
-  },
+  }
 
   enter(el) {
     el.dataset.oldOverflow = el.style.overflow;
@@ -22,13 +22,13 @@ export default {
     }
 
     el.style.overflow = 'hidden';
-  },
+  }
 
   afterEnter(el) {
     el.style.display = '';
     el.style.height = '';
     el.style.overflow = el.dataset.oldOverflow;
-  },
+  }
 
   beforeLeave(el) {
     el.dataset.oldPaddingTop = el.style.paddingTop;
@@ -40,7 +40,7 @@ export default {
       el.style.height = el.scrollHeight + 'px';
     }
     el.style.overflow = 'hidden';
-  },
+  }
 
   leave(el) {
     if (el.scrollHeight !== 0) {
@@ -50,7 +50,7 @@ export default {
         el.style.paddingBottom = 0;
       });
     }
-  },
+  }
 
   afterLeave(el) {
     el.style.display = el.style.height = '';
@@ -59,3 +59,22 @@ export default {
     el.style.paddingBottom = el.dataset.oldPaddingBottom;
   }
 };
+
+export default {
+  functional: true,
+  render(h, { children }) {
+    const data = {
+      props: {
+        appear: true
+      },
+      on: new Transition()
+    };
+
+    children = children.map(item => {
+      item.data.class = ['collapse-transition'];
+      return item;
+    });
+
+    return h('transition', data, children);
+  }
+};

packages/tree/src/tree-node.vue

@@ -6,16 +6,17 @@
       <span class="el-tree-node__expand-icon"
         :class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }"
         ></span>
-      <el-checkbox v-if="showCheckbox" :indeterminate="node.indeterminate" :value.sync="node.checked" :true-label="true" :false-label="false" @on-change="handleCheckChange"></el-checkbox>
+      <el-checkbox v-if="showCheckbox" :indeterminate="node.indeterminate" v-model="node.checked" :true-label="true" :false-label="false" @on-change="handleCheckChange"></el-checkbox>
       <!--<span class="el-tree-node__icon {{ node.icon }} {{ node.loading ? 'el-icon-loading' : '' }}" v-if="node.icon"></span>-->
       <span class="el-tree-node__label">{{ node.label }}</span>
     </div>
-    <div class="el-tree-node__children"
-      v-if="childrenRendered"
-      v-show="expanded"
-      transition="collapse">
-      <el-tree-node v-for="child in node.children" :node="child"></el-tree-node>
-    </div>
+    <collapse-transition>
+      <div class="el-tree-node__children"
+        v-if="childrenRendered"
+        v-show="expanded">
+        <el-tree-node v-for="child in node.children" :node="child"></el-tree-node>
+      </div>
+    </collapse-transition>
   </div>
 </template>
 
@@ -33,6 +34,10 @@
       }
     },
 
+    components: {
+      CollapseTransition
+    },
+
     data() {
       return {
         $tree: null,
@@ -80,10 +85,6 @@
       }
 
       this.showCheckbox = tree.showCheckbox;
-    },
-
-    transitions: {
-      collapse: CollapseTransition
     }
   };
 </script>

src/index.js

@@ -100,22 +100,22 @@ 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
+auto install
 if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 };
 
 module.exports = {
-  install,
+  install
   Group,
   SelectDropdown,
   Pagination,