cy-element-ui 1.1.13 → 1.1.15

package/packages/tree/src/model/util.js

@@ -1,27 +1,27 @@
 export const NODE_KEY = '$treeNodeId';
 
 export const markNodeData = function(node, data) {
-  if (!data || data[NODE_KEY]) return;
-  Object.defineProperty(data, NODE_KEY, {
-    value: node.id,
-    enumerable: false,
-    configurable: false,
-    writable: false
-  });
+	if (!data || data[NODE_KEY]) return;
+	Object.defineProperty(data, NODE_KEY, {
+		value: node.id,
+		enumerable: false,
+		configurable: false,
+		writable: false
+	});
 };
 
 export const getNodeKey = function(key, data) {
-  if (!key) return data[NODE_KEY];
-  return data[key];
+	if (!key) return data[NODE_KEY];
+	return data[key];
 };
 
 export const findNearestComponent = (element, componentName) => {
-  let target = element;
-  while (target && target.tagName !== 'BODY') {
-    if (target.__vue__ && target.__vue__.$options.name === componentName) {
-      return target.__vue__;
-    }
-    target = target.parentNode;
-  }
-  return null;
+	let target = element;
+	while (target && target.tagName !== 'BODY') {
+		if (target.__vue__ && target.__vue__.$options.name === componentName) {
+			return target.__vue__;
+		}
+		target = target.parentNode;
+	}
+	return null;
 };

package/packages/tree/src/tree-node.vue

@@ -1,279 +1,279 @@
 <template>
-  <div
-    class="el-tree-node"
-    @click.stop="handleClick"
-    @contextmenu="($event) => this.handleContextMenu($event)"
-    v-show="node.visible"
-    :class="{
-      'is-expanded': expanded,
-      'is-current': node.isCurrent,
-      'is-hidden': !node.visible,
-      'is-focusable': !node.disabled,
-      'is-checked': !node.disabled && node.checked
-    }"
-    role="treeitem"
-    tabindex="-1"
-    :aria-expanded="expanded"
-    :aria-disabled="node.disabled"
-    :aria-checked="node.checked"
-    :draggable="tree.draggable"
-    @dragstart.stop="handleDragStart"
-    @dragover.stop="handleDragOver"
-    @dragend.stop="handleDragEnd"
-    @drop.stop="handleDrop"
-    ref="node"
-  >
-    <div class="el-tree-node__content"
-      :style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">
-      <span
-        @click.stop="handleExpandIconClick"
-        :class="[
-          { 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded },
-          'el-tree-node__expand-icon',
-          tree.iconClass ? tree.iconClass : 'el-icon-caret-right'
-        ]"
-      >
-      </span>
-      <el-checkbox
-        v-if="showCheckbox"
-        v-model="node.checked"
-        :indeterminate="node.indeterminate"
-        :disabled="!!node.disabled"
-        @click.native.stop
-        @change="handleCheckChange"
-      >
-      </el-checkbox>
-      <span
-        v-if="node.loading"
-        class="el-tree-node__loading-icon el-icon-loading">
-      </span>
-      <node-content :node="node"></node-content>
-    </div>
-    <el-collapse-transition>
-      <div
-        class="el-tree-node__children"
-        v-if="!renderAfterExpand || childNodeRendered"
-        v-show="expanded"
-        role="group"
-        :aria-expanded="expanded"
-      >
-        <el-tree-node
-          :render-content="renderContent"
-          v-for="child in node.childNodes"
-          :render-after-expand="renderAfterExpand"
-          :show-checkbox="showCheckbox"
-          :key="getNodeKey(child)"
-          :node="child"
-          @node-expand="handleChildNodeExpand">
-        </el-tree-node>
-      </div>
-    </el-collapse-transition>
-  </div>
+	<div
+		class="el-tree-node"
+		@click.stop="handleClick"
+		@contextmenu="($event) => this.handleContextMenu($event)"
+		v-show="node.visible"
+		:class="{
+			'is-expanded': expanded,
+			'is-current': node.isCurrent,
+			'is-hidden': !node.visible,
+			'is-focusable': !node.disabled,
+			'is-checked': !node.disabled && node.checked
+		}"
+		role="treeitem"
+		tabindex="-1"
+		:aria-expanded="expanded"
+		:aria-disabled="node.disabled"
+		:aria-checked="node.checked"
+		:draggable="tree.draggable"
+		@dragstart.stop="handleDragStart"
+		@dragover.stop="handleDragOver"
+		@dragend.stop="handleDragEnd"
+		@drop.stop="handleDrop"
+		ref="node"
+	>
+		<div class="el-tree-node__content"
+			:style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">
+			<span
+				@click.stop="handleExpandIconClick"
+				:class="[
+					{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded },
+					'el-tree-node__expand-icon',
+					tree.iconClass ? tree.iconClass : 'el-icon-caret-right'
+				]"
+			>
+			</span>
+			<el-checkbox
+				v-if="showCheckbox"
+				v-model="node.checked"
+				:indeterminate="node.indeterminate"
+				:disabled="!!node.disabled"
+				@click.native.stop
+				@change="handleCheckChange"
+			>
+			</el-checkbox>
+			<span
+				v-if="node.loading"
+				class="el-tree-node__loading-icon el-icon-loading">
+			</span>
+			<node-content :node="node"></node-content>
+		</div>
+		<el-collapse-transition>
+			<div
+				class="el-tree-node__children"
+				v-if="!renderAfterExpand || childNodeRendered"
+				v-show="expanded"
+				role="group"
+				:aria-expanded="expanded"
+			>
+				<el-tree-node
+					:render-content="renderContent"
+					v-for="child in node.childNodes"
+					:render-after-expand="renderAfterExpand"
+					:show-checkbox="showCheckbox"
+					:key="getNodeKey(child)"
+					:node="child"
+					@node-expand="handleChildNodeExpand">
+				</el-tree-node>
+			</div>
+		</el-collapse-transition>
+	</div>
 </template>
 
 <script type="text/jsx">
-  import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
-  import ElCheckbox from 'element-ui/packages/checkbox';
-  import emitter from 'element-ui/src/mixins/emitter';
-  import { getNodeKey } from './model/util';
+import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
+import ElCheckbox from 'element-ui/packages/checkbox';
+import emitter from 'element-ui/src/mixins/emitter';
+import { getNodeKey } from './model/util';
 
-  export default {
-    name: 'ElTreeNode',
+export default {
+	name: 'ElTreeNode',
 
-    componentName: 'ElTreeNode',
+	componentName: 'ElTreeNode',
 
-    mixins: [emitter],
+	mixins: [emitter],
 
-    props: {
-      node: {
-        default() {
-          return {};
-        }
-      },
-      props: {},
-      renderContent: Function,
-      renderAfterExpand: {
-        type: Boolean,
-        default: true
-      },
-      showCheckbox: {
-        type: Boolean,
-        default: false
-      }
-    },
+	props: {
+		node: {
+			default() {
+				return {};
+			}
+		},
+		props: {},
+		renderContent: Function,
+		renderAfterExpand: {
+			type: Boolean,
+			default: true
+		},
+		showCheckbox: {
+			type: Boolean,
+			default: false
+		}
+	},
 
-    components: {
-      ElCollapseTransition,
-      ElCheckbox,
-      NodeContent: {
-        props: {
-          node: {
-            required: true
-          }
-        },
-        render(h) {
-          const parent = this.$parent;
-          const tree = parent.tree;
-          const node = this.node;
-          const { data, store } = node;
-          return (
-            parent.renderContent
-              ? parent.renderContent.call(parent._renderProxy, h, { _self: tree.$vnode.context, node, data, store })
-              : tree.$scopedSlots.default
-                ? tree.$scopedSlots.default({ node, data })
-                : <span class="el-tree-node__label">{ node.label }</span>
-          );
-        }
-      }
-    },
+	components: {
+		ElCollapseTransition,
+		ElCheckbox,
+		NodeContent: {
+			props: {
+				node: {
+					required: true
+				}
+			},
+			render(h) {
+				const parent = this.$parent;
+				const tree = parent.tree;
+				const node = this.node;
+				const { data, store } = node;
+				return (
+					parent.renderContent
+						? parent.renderContent.call(parent._renderProxy, h, { _self: tree.$vnode.context, node, data, store })
+						: tree.$scopedSlots.default
+							? tree.$scopedSlots.default({ node, data })
+							: <span class="el-tree-node__label">{ node.label }</span>
+				);
+			}
+		}
+	},
 
-    data() {
-      return {
-        tree: null,
-        expanded: false,
-        childNodeRendered: false,
-        oldChecked: null,
-        oldIndeterminate: null
-      };
-    },
+	data() {
+		return {
+			tree: null,
+			expanded: false,
+			childNodeRendered: false,
+			oldChecked: null,
+			oldIndeterminate: null
+		};
+	},
 
-    watch: {
-      'node.indeterminate'(val) {
-        this.handleSelectChange(this.node.checked, val);
-      },
+	watch: {
+		'node.indeterminate'(val) {
+			this.handleSelectChange(this.node.checked, val);
+		},
 
-      'node.checked'(val) {
-        this.handleSelectChange(val, this.node.indeterminate);
-      },
+		'node.checked'(val) {
+			this.handleSelectChange(val, this.node.indeterminate);
+		},
 
-      'node.expanded'(val) {
-        this.$nextTick(() => this.expanded = val);
-        if (val) {
-          this.childNodeRendered = true;
-        }
-      }
-    },
+		'node.expanded'(val) {
+			this.$nextTick(() => this.expanded = val);
+			if (val) {
+				this.childNodeRendered = true;
+			}
+		}
+	},
 
-    methods: {
-      getNodeKey(node) {
-        return getNodeKey(this.tree.nodeKey, node.data);
-      },
+	methods: {
+		getNodeKey(node) {
+			return getNodeKey(this.tree.nodeKey, node.data);
+		},
 
-      handleSelectChange(checked, indeterminate) {
-        if (this.oldChecked !== checked && this.oldIndeterminate !== indeterminate) {
-          this.tree.$emit('check-change', this.node.data, checked, indeterminate);
-        }
-        this.oldChecked = checked;
-        this.indeterminate = indeterminate;
-      },
+		handleSelectChange(checked, indeterminate) {
+			if (this.oldChecked !== checked && this.oldIndeterminate !== indeterminate) {
+				this.tree.$emit('check-change', this.node.data, checked, indeterminate);
+			}
+			this.oldChecked = checked;
+			this.indeterminate = indeterminate;
+		},
 
-      handleClick() {
-        const store = this.tree.store;
-        store.setCurrentNode(this.node);
-        this.tree.$emit('current-change', store.currentNode ? store.currentNode.data : null, store.currentNode);
-        this.tree.currentNode = this;
-        if (this.tree.expandOnClickNode) {
-          this.handleExpandIconClick();
-        }
-        if (this.tree.checkOnClickNode && !this.node.disabled) {
-          this.handleCheckChange(null, {
-            target: { checked: !this.node.checked }
-          });
-        }
-        this.tree.$emit('node-click', this.node.data, this.node, this);
-      },
+		handleClick() {
+			const store = this.tree.store;
+			store.setCurrentNode(this.node);
+			this.tree.$emit('current-change', store.currentNode ? store.currentNode.data : null, store.currentNode);
+			this.tree.currentNode = this;
+			if (this.tree.expandOnClickNode) {
+				this.handleExpandIconClick();
+			}
+			if (this.tree.checkOnClickNode && !this.node.disabled) {
+				this.handleCheckChange(null, {
+					target: { checked: !this.node.checked }
+				});
+			}
+			this.tree.$emit('node-click', this.node.data, this.node, this);
+		},
 
-      handleContextMenu(event) {
-        if (this.tree._events['node-contextmenu'] && this.tree._events['node-contextmenu'].length > 0) {
-          event.stopPropagation();
-          event.preventDefault();
-        }
-        this.tree.$emit('node-contextmenu', event, this.node.data, this.node, this);
-      },
+		handleContextMenu(event) {
+			if (this.tree._events['node-contextmenu'] && this.tree._events['node-contextmenu'].length > 0) {
+				event.stopPropagation();
+				event.preventDefault();
+			}
+			this.tree.$emit('node-contextmenu', event, this.node.data, this.node, this);
+		},
 
-      handleExpandIconClick() {
-        if (this.node.isLeaf) return;
-        if (this.expanded) {
-          this.tree.$emit('node-collapse', this.node.data, this.node, this);
-          this.node.collapse();
-        } else {
-          this.node.expand();
-          this.$emit('node-expand', this.node.data, this.node, this);
-        }
-      },
+		handleExpandIconClick() {
+			if (this.node.isLeaf) return;
+			if (this.expanded) {
+				this.tree.$emit('node-collapse', this.node.data, this.node, this);
+				this.node.collapse();
+			} else {
+				this.node.expand();
+				this.$emit('node-expand', this.node.data, this.node, this);
+			}
+		},
 
-      handleCheckChange(value, ev) {
-        this.node.setChecked(ev.target.checked, !this.tree.checkStrictly);
-        this.$nextTick(() => {
-          const store = this.tree.store;
-          this.tree.$emit('check', this.node.data, {
-            checkedNodes: store.getCheckedNodes(),
-            checkedKeys: store.getCheckedKeys(),
-            halfCheckedNodes: store.getHalfCheckedNodes(),
-            halfCheckedKeys: store.getHalfCheckedKeys(),
-          });
-        });
-      },
+		handleCheckChange(value, ev) {
+			this.node.setChecked(ev.target.checked, !this.tree.checkStrictly);
+			this.$nextTick(() => {
+				const store = this.tree.store;
+				this.tree.$emit('check', this.node.data, {
+					checkedNodes: store.getCheckedNodes(),
+					checkedKeys: store.getCheckedKeys(),
+					halfCheckedNodes: store.getHalfCheckedNodes(),
+					halfCheckedKeys: store.getHalfCheckedKeys(),
+				});
+			});
+		},
 
-      handleChildNodeExpand(nodeData, node, instance) {
-        this.broadcast('ElTreeNode', 'tree-node-expand', node);
-        this.tree.$emit('node-expand', nodeData, node, instance);
-      },
+		handleChildNodeExpand(nodeData, node, instance) {
+			this.broadcast('ElTreeNode', 'tree-node-expand', node);
+			this.tree.$emit('node-expand', nodeData, node, instance);
+		},
 
-      handleDragStart(event) {
-        if (!this.tree.draggable) return;
-        this.tree.$emit('tree-node-drag-start', event, this);
-      },
+		handleDragStart(event) {
+			if (!this.tree.draggable) return;
+			this.tree.$emit('tree-node-drag-start', event, this);
+		},
 
-      handleDragOver(event) {
-        if (!this.tree.draggable) return;
-        this.tree.$emit('tree-node-drag-over', event, this);
-        event.preventDefault();
-      },
+		handleDragOver(event) {
+			if (!this.tree.draggable) return;
+			this.tree.$emit('tree-node-drag-over', event, this);
+			event.preventDefault();
+		},
 
-      handleDrop(event) {
-        event.preventDefault();
-      },
+		handleDrop(event) {
+			event.preventDefault();
+		},
 
-      handleDragEnd(event) {
-        if (!this.tree.draggable) return;
-        this.tree.$emit('tree-node-drag-end', event, this);
-      }
-    },
+		handleDragEnd(event) {
+			if (!this.tree.draggable) return;
+			this.tree.$emit('tree-node-drag-end', event, this);
+		}
+	},
 
-    created() {
-      const parent = this.$parent;
+	created() {
+		const parent = this.$parent;
 
-      if (parent.isTree) {
-        this.tree = parent;
-      } else {
-        this.tree = parent.tree;
-      }
+		if (parent.isTree) {
+			this.tree = parent;
+		} else {
+			this.tree = parent.tree;
+		}
 
-      const tree = this.tree;
-      if (!tree) {
-        console.warn('Can not find node\'s tree.');
-      }
+		const tree = this.tree;
+		if (!tree) {
+			console.warn('Can not find node\'s tree.');
+		}
 
-      const props = tree.props || {};
-      const childrenKey = props['children'] || 'children';
+		const props = tree.props || {};
+		const childrenKey = props['children'] || 'children';
 
-      this.$watch(`node.data.${childrenKey}`, () => {
-        this.node.updateChildren();
-      });
+		this.$watch(`node.data.${ childrenKey }`, () => {
+			this.node.updateChildren();
+		});
 
-      if (this.node.expanded) {
-        this.expanded = true;
-        this.childNodeRendered = true;
-      }
+		if (this.node.expanded) {
+			this.expanded = true;
+			this.childNodeRendered = true;
+		}
 
-      if(this.tree.accordion) {
-        this.$on('tree-node-expand', node => {
-          if(this.node !== node) {
-            this.node.collapse();
-          }
-        });
-      }
-    }
-  };
+		if (this.tree.accordion) {
+			this.$on('tree-node-expand', node => {
+				if (this.node !== node) {
+					this.node.collapse();
+				}
+			});
+		}
+	}
+};
 </script>