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

Update checkbox and tree
2016-08-12 15:56:09 +08:00 · 2016-08-12 15:56:09 +08:00 · d607187d85
parent 9c0912745f 4d608fc9da
commit d607187d85
10 changed files with 89 additions and 72 deletions
--- a/.babelrc
+++ b/.babelrc
@ -1,5 +1,5 @@
 {
-  "presets": ["es2015"],
+  "presets": ["es2015-loose"],
  "plugins": ["transform-vue-jsx"],
  "comments": false
 }
--- a/examples/docs/checkbox.md
+++ b/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>
 ```

--- a/examples/docs/tree.md
+++ b/examples/docs/tree.md
@ -10,7 +10,7 @@
  }
 </style>

-<script type="text/ecmascript-6">
+<script>
  import Vue from 'vue';

  var data = [{
--- a/package.json
+++ b/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",
--- a/packages/autocomplete/src/autocomplete.vue
+++ b/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(() => {
--- a/packages/checkbox/src/checkbox-group.vue
+++ b/packages/checkbox/src/checkbox-group.vue
@ -12,6 +12,7 @@
        required: true
      }
    },
+
    watch: {
      value(value) {
        this.dispatch('form-item', 'el.form.change', value);
--- a/packages/checkbox/src/checkbox.vue
+++ b/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.$emit('on-change', sure);
+        this.dispatch('element.checkbox', sure);
      }
    },

-    watch: {
-      checked(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>
--- a/packages/tree/src/transition.js
+++ b/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);
+  }
+};
--- a/packages/tree/src/tree-node.vue
+++ b/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>
--- a/src/index.js
+++ b/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,