cy-element-ui 1.1.14 → 1.1.16

package/packages/cascader-panel/src/cascader-node.vue

@@ -1,246 +1,246 @@
 <script>
-  import ElCheckbox from 'element-ui/packages/checkbox';
-  import ElRadio from 'element-ui/packages/radio';
-  import { isEqual } from 'element-ui/src/utils/util';
-
-  const stopPropagation = e => e.stopPropagation();
-
-  export default {
-    inject: ['panel'],
-
-    components: {
-      ElCheckbox,
-      ElRadio
-    },
-
-    props: {
-      node: {
-        required: true
-      },
-      nodeId: String
-    },
-
-    computed: {
-      config() {
-        return this.panel.config;
-      },
-      isLeaf() {
-        return this.node.isLeaf;
-      },
-      isDisabled() {
-        return this.node.isDisabled;
-      },
-      checkedValue() {
-        return this.panel.checkedValue;
-      },
-      isChecked() {
-        return this.node.isSameNode(this.checkedValue);
-      },
-      inActivePath() {
-        return this.isInPath(this.panel.activePath);
-      },
-      inCheckedPath() {
-        if (!this.config.checkStrictly) return false;
-
-        return this.panel.checkedNodePaths
-          .some(checkedPath => this.isInPath(checkedPath));
-      },
-      value() {
-        return this.node.getValueByOption();
-      }
-    },
-
-    methods: {
-      handleExpand() {
-        const { panel, node, isDisabled, config } = this;
-        const { multiple, checkStrictly } = config;
-
-        if (!checkStrictly && isDisabled || node.loading) return;
-
-        if (config.lazy && !node.loaded) {
-          panel.lazyLoad(node, () => {
-            // do not use cached leaf value here, invoke this.isLeaf to get new value.
-            const { isLeaf } = this;
-
-            if (!isLeaf) this.handleExpand();
-            if (multiple) {
-              // if leaf sync checked state, else clear checked state
-              const checked = isLeaf ? node.checked : false;
-              this.handleMultiCheckChange(checked);
-            }
-          });
-        } else {
-          panel.handleExpand(node);
-        }
-      },
-
-      handleCheckChange() {
-        const { panel, value, node } = this;
-        panel.handleCheckChange(value);
-        panel.handleExpand(node);
-      },
-
-      handleMultiCheckChange(checked) {
-        this.node.doCheck(checked);
-        this.panel.calculateMultiCheckedValue();
-      },
-
-      isInPath(pathNodes) {
-        const { node } = this;
-        const selectedPathNode = pathNodes[node.level - 1] || {};
-        return selectedPathNode.uid === node.uid;
-      },
-
-      renderPrefix(h) {
-        const { isLeaf, isChecked, config } = this;
-        const { checkStrictly, multiple } = config;
-
-        if (multiple) {
-          return this.renderCheckbox(h);
-        } else if (checkStrictly) {
-          return this.renderRadio(h);
-        } else if (isLeaf && isChecked) {
-          return this.renderCheckIcon(h);
-        }
-
-        return null;
-      },
-
-      renderPostfix(h) {
-        const { node, isLeaf } = this;
-
-        if (node.loading) {
-          return this.renderLoadingIcon(h);
-        } else if (!isLeaf) {
-          return this.renderExpandIcon(h);
-        }
-
-        return null;
-      },
-
-      renderCheckbox(h) {
-        const { node, config, isDisabled } = this;
-        const events = {
-          on: { change: this.handleMultiCheckChange },
-          nativeOn: {}
-        };
-
-        if (config.checkStrictly) { // when every node is selectable, click event should not trigger expand event.
-          events.nativeOn.click = stopPropagation;
-        }
-
-        return (
-          <el-checkbox
-            value={ node.checked }
-            indeterminate={ node.indeterminate }
-            disabled={ isDisabled }
-            { ...events }
-          ></el-checkbox>
-        );
-      },
-
-      renderRadio(h) {
-        let { checkedValue, value, isDisabled } = this;
-
-        // to keep same reference if value cause radio's checked state is calculated by reference comparision;
-        if (isEqual(value, checkedValue)) {
-          value = checkedValue;
-        }
-
-        return (
-          <el-radio
-            value={ checkedValue }
-            label={ value }
-            disabled={ isDisabled }
-            onChange={ this.handleCheckChange }
-            nativeOnClick={ stopPropagation }>
-            {/* add an empty element to avoid render label */}
-            <span></span>
-          </el-radio>
-        );
-      },
-
-      renderCheckIcon(h) {
-        return (
-          <i class="el-icon-check el-cascader-node__prefix"></i>
-        );
-      },
-
-      renderLoadingIcon(h) {
-        return (
-          <i class="el-icon-loading el-cascader-node__postfix"></i>
-        );
-      },
-
-      renderExpandIcon(h) {
-        return (
-          <i class="el-icon-arrow-right el-cascader-node__postfix"></i>
-        );
-      },
-
-      renderContent(h) {
-        const { panel, node } = this;
-        const render = panel.renderLabelFn;
-        const vnode = render
-          ? render({ node, data: node.data })
-          : null;
-
-        return (
-          <span class="el-cascader-node__label">{ vnode || node.label }</span>
-        );
-      }
-    },
-
-    render(h) {
-      const {
-        inActivePath,
-        inCheckedPath,
-        isChecked,
-        isLeaf,
-        isDisabled,
-        config,
-        nodeId
-      } = this;
-      const { expandTrigger, checkStrictly, multiple } = config;
-      const disabled = !checkStrictly && isDisabled;
-      const events = { on: {} };
-
-      if (expandTrigger === 'click') {
-        events.on.click = this.handleExpand;
-      } else {
-        events.on.mouseenter = e => {
-          this.handleExpand();
-          this.$emit('expand', e);
-        };
-        events.on.focus = e => {
-          this.handleExpand();
-          this.$emit('expand', e);
-        };
-      }
-      if (isLeaf && !isDisabled && !checkStrictly && !multiple) {
-        events.on.click = this.handleCheckChange;
-      }
-
-      return (
-        <li
-          role="menuitem"
-          id={ nodeId }
-          aria-expanded={ inActivePath }
-          tabindex={ disabled ? null : -1 }
-          class={{
-            'el-cascader-node': true,
-            'is-selectable': checkStrictly,
-            'in-active-path': inActivePath,
-            'in-checked-path': inCheckedPath,
-            'is-active': isChecked,
-            'is-disabled': disabled
-          }}
-          {...events}>
-          { this.renderPrefix(h) }
-          { this.renderContent(h) }
-          { this.renderPostfix(h) }
-        </li>
-      );
-    }
-  };
+import ElCheckbox from 'element-ui/packages/checkbox';
+import ElRadio from 'element-ui/packages/radio';
+import { isEqual } from 'element-ui/src/utils/util';
+
+const stopPropagation = e => e.stopPropagation();
+
+export default {
+	inject: ['panel'],
+
+	components: {
+		ElCheckbox,
+		ElRadio
+	},
+
+	props: {
+		node: {
+			required: true
+		},
+		nodeId: String
+	},
+
+	computed: {
+		config() {
+			return this.panel.config;
+		},
+		isLeaf() {
+			return this.node.isLeaf;
+		},
+		isDisabled() {
+			return this.node.isDisabled;
+		},
+		checkedValue() {
+			return this.panel.checkedValue;
+		},
+		isChecked() {
+			return this.node.isSameNode(this.checkedValue);
+		},
+		inActivePath() {
+			return this.isInPath(this.panel.activePath);
+		},
+		inCheckedPath() {
+			if (!this.config.checkStrictly) return false;
+
+			return this.panel.checkedNodePaths
+				.some(checkedPath => this.isInPath(checkedPath));
+		},
+		value() {
+			return this.node.getValueByOption();
+		}
+	},
+
+	methods: {
+		handleExpand() {
+			const { panel, node, isDisabled, config } = this;
+			const { multiple, checkStrictly } = config;
+
+			if (!checkStrictly && isDisabled || node.loading) return;
+
+			if (config.lazy && !node.loaded) {
+				panel.lazyLoad(node, () => {
+					// do not use cached leaf value here, invoke this.isLeaf to get new value.
+					const { isLeaf } = this;
+
+					if (!isLeaf) this.handleExpand();
+					if (multiple) {
+						// if leaf sync checked state, else clear checked state
+						const checked = isLeaf ? node.checked : false;
+						this.handleMultiCheckChange(checked);
+					}
+				});
+			} else {
+				panel.handleExpand(node);
+			}
+		},
+
+		handleCheckChange() {
+			const { panel, value, node } = this;
+			panel.handleCheckChange(value);
+			panel.handleExpand(node);
+		},
+
+		handleMultiCheckChange(checked) {
+			this.node.doCheck(checked);
+			this.panel.calculateMultiCheckedValue();
+		},
+
+		isInPath(pathNodes) {
+			const { node } = this;
+			const selectedPathNode = pathNodes[node.level - 1] || {};
+			return selectedPathNode.uid === node.uid;
+		},
+
+		renderPrefix(h) {
+			const { isLeaf, isChecked, config } = this;
+			const { checkStrictly, multiple } = config;
+
+			if (multiple) {
+				return this.renderCheckbox(h);
+			} else if (checkStrictly) {
+				return this.renderRadio(h);
+			} else if (isLeaf && isChecked) {
+				return this.renderCheckIcon(h);
+			}
+
+			return null;
+		},
+
+		renderPostfix(h) {
+			const { node, isLeaf } = this;
+
+			if (node.loading) {
+				return this.renderLoadingIcon(h);
+			} else if (!isLeaf) {
+				return this.renderExpandIcon(h);
+			}
+
+			return null;
+		},
+
+		renderCheckbox(h) {
+			const { node, config, isDisabled } = this;
+			const events = {
+				on: { change: this.handleMultiCheckChange },
+				nativeOn: {}
+			};
+
+			if (config.checkStrictly) { // when every node is selectable, click event should not trigger expand event.
+				events.nativeOn.click = stopPropagation;
+			}
+
+			return (
+				<el-checkbox
+					value={ node.checked }
+					indeterminate={ node.indeterminate }
+					disabled={ isDisabled }
+					{ ...events }
+				></el-checkbox>
+			);
+		},
+
+		renderRadio(h) {
+			let { checkedValue, value, isDisabled } = this;
+
+			// to keep same reference if value cause radio's checked state is calculated by reference comparision;
+			if (isEqual(value, checkedValue)) {
+				value = checkedValue;
+			}
+
+			return (
+				<el-radio
+					value={ checkedValue }
+					label={ value }
+					disabled={ isDisabled }
+					onChange={ this.handleCheckChange }
+					nativeOnClick={ stopPropagation }>
+					{/* add an empty element to avoid render label */}
+					<span></span>
+				</el-radio>
+			);
+		},
+
+		renderCheckIcon(h) {
+			return (
+				<i class="el-icon-check el-cascader-node__prefix"></i>
+			);
+		},
+
+		renderLoadingIcon(h) {
+			return (
+				<i class="el-icon-loading el-cascader-node__postfix"></i>
+			);
+		},
+
+		renderExpandIcon(h) {
+			return (
+				<i class="el-icon-arrow-right el-cascader-node__postfix"></i>
+			);
+		},
+
+		renderContent(h) {
+			const { panel, node } = this;
+			const render = panel.renderLabelFn;
+			const vnode = render
+				? render({ node, data: node.data })
+				: null;
+
+			return (
+				<span class="el-cascader-node__label">{ vnode || node.label }</span>
+			);
+		}
+	},
+
+	render(h) {
+		const {
+			inActivePath,
+			inCheckedPath,
+			isChecked,
+			isLeaf,
+			isDisabled,
+			config,
+			nodeId
+		} = this;
+		const { expandTrigger, checkStrictly, multiple } = config;
+		const disabled = !checkStrictly && isDisabled;
+		const events = { on: {} };
+
+		if (expandTrigger === 'click') {
+			events.on.click = this.handleExpand;
+		} else {
+			events.on.mouseenter = e => {
+				this.handleExpand();
+				this.$emit('expand', e);
+			};
+			events.on.focus = e => {
+				this.handleExpand();
+				this.$emit('expand', e);
+			};
+		}
+		if (isLeaf && !isDisabled && !checkStrictly && !multiple) {
+			events.on.click = this.handleCheckChange;
+		}
+
+		return (
+			<li
+				role="menuitem"
+				id={ nodeId }
+				aria-expanded={ inActivePath }
+				tabindex={ disabled ? null : -1 }
+				class={{
+					'el-cascader-node': true,
+					'is-selectable': checkStrictly,
+					'in-active-path': inActivePath,
+					'in-checked-path': inCheckedPath,
+					'is-active': isChecked,
+					'is-disabled': disabled
+				}}
+				{...events}>
+				{ this.renderPrefix(h) }
+				{ this.renderContent(h) }
+				{ this.renderPostfix(h) }
+			</li>
+		);
+	}
+};
 </script>