cy-element-ui 1.0.4 → 1.0.5

package/packages/transfer/src/transfer-panel.vue

@@ -52,200 +52,200 @@
 </template>
 
 <script>
-	import ElCheckboxGroup from 'element-ui/packages/checkbox-group';
-	import ElCheckbox from 'element-ui/packages/checkbox';
-	import ElInput from 'element-ui/packages/input';
-	import Locale from 'element-ui/src/mixins/locale';
-
-	export default {
-		mixins: [Locale],
-
-		name: 'ElTransferPanel',
-
-		componentName: 'ElTransferPanel',
-
-		components: {
-			ElCheckboxGroup,
-			ElCheckbox,
-			ElInput,
-			OptionContent: {
-				props: {
-					option: Object
-				},
-				render(h) {
-					const getParent = vm => {
-						if (vm.$options.componentName === 'ElTransferPanel') {
-							return vm;
-						} else if (vm.$parent) {
-							return getParent(vm.$parent);
-						} else {
-							return vm;
-						}
-					};
-					const panel = getParent(this);
-					const transfer = panel.$parent || panel;
-					return panel.renderContent
-						? panel.renderContent(h, this.option)
-						: transfer.$scopedSlots.default
-							? transfer.$scopedSlots.default({ option: this.option })
-							: <span>{ this.option[panel.labelProp] || this.option[panel.keyProp] }</span>;
-				}
-			}
-		},
+import ElCheckboxGroup from 'element-ui/packages/checkbox-group';
+import ElCheckbox from 'element-ui/packages/checkbox';
+import ElInput from 'element-ui/packages/input';
+import Locale from 'element-ui/src/mixins/locale';
 
-		props: {
-			data: {
-				type: Array,
-				default() {
-					return [];
-				}
+export default {
+	mixins: [Locale],
+
+	name: 'ElTransferPanel',
+
+	componentName: 'ElTransferPanel',
+
+	components: {
+		ElCheckboxGroup,
+		ElCheckbox,
+		ElInput,
+		OptionContent: {
+			props: {
+				option: Object
 			},
-			renderContent: Function,
-			placeholder: String,
-			title: String,
-			filterable: Boolean,
-			format: Object,
-			filterMethod: Function,
-			defaultChecked: Array,
-			props: Object
+			render(h) {
+				const getParent = vm => {
+					if (vm.$options.componentName === 'ElTransferPanel') {
+						return vm;
+					} else if (vm.$parent) {
+						return getParent(vm.$parent);
+					} else {
+						return vm;
+					}
+				};
+				const panel = getParent(this);
+				const transfer = panel.$parent || panel;
+				return panel.renderContent
+					? panel.renderContent(h, this.option)
+					: transfer.$scopedSlots.default
+						? transfer.$scopedSlots.default({ option: this.option })
+						: <span>{ this.option[panel.labelProp] || this.option[panel.keyProp] }</span>;
+			}
+		}
+	},
+
+	props: {
+		data: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		renderContent: Function,
+		placeholder: String,
+		title: String,
+		filterable: Boolean,
+		format: Object,
+		filterMethod: Function,
+		defaultChecked: Array,
+		props: Object
+	},
+
+	data() {
+		return {
+			checked: [],
+			allChecked: false,
+			query: '',
+			inputHover: false,
+			checkChangeByUser: true
+		};
+	},
+
+	watch: {
+		checked(val, oldVal) {
+			this.updateAllChecked();
+			if (this.checkChangeByUser) {
+				const movedKeys = val.concat(oldVal)
+					.filter(v => val.indexOf(v) === -1 || oldVal.indexOf(v) === -1);
+				this.$emit('checked-change', val, movedKeys);
+			} else {
+				this.$emit('checked-change', val);
+				this.checkChangeByUser = true;
+			}
 		},
 
 		data() {
-			return {
-				checked: [],
-				allChecked: false,
-				query: '',
-				inputHover: false,
-				checkChangeByUser: true
-			};
+			const checked = [];
+			const filteredDataKeys = this.filteredData.map(item => item[this.keyProp]);
+			this.checked.forEach(item => {
+				if (filteredDataKeys.indexOf(item) > -1) {
+					checked.push(item);
+				}
+			});
+			this.checkChangeByUser = false;
+			this.checked = checked;
 		},
 
-		watch: {
-			checked(val, oldVal) {
-				this.updateAllChecked();
-				if (this.checkChangeByUser) {
-					const movedKeys = val.concat(oldVal)
-						.filter(v => val.indexOf(v) === -1 || oldVal.indexOf(v) === -1);
-					this.$emit('checked-change', val, movedKeys);
-				} else {
-					this.$emit('checked-change', val);
-					this.checkChangeByUser = true;
-				}
-			},
+		checkableData() {
+			this.updateAllChecked();
+		},
 
-			data() {
+		defaultChecked: {
+			immediate: true,
+			handler(val, oldVal) {
+				if (oldVal && val.length === oldVal.length &&
+     val.every(item => oldVal.indexOf(item) > -1)) return;
 				const checked = [];
-				const filteredDataKeys = this.filteredData.map(item => item[this.keyProp]);
-				this.checked.forEach(item => {
-					if (filteredDataKeys.indexOf(item) > -1) {
+				const checkableDataKeys = this.checkableData.map(item => item[this.keyProp]);
+				val.forEach(item => {
+					if (checkableDataKeys.indexOf(item) > -1) {
 						checked.push(item);
 					}
 				});
 				this.checkChangeByUser = false;
 				this.checked = checked;
-			},
-
-			checkableData() {
-				this.updateAllChecked();
-			},
+			}
+		}
+	},
 
-			defaultChecked: {
-				immediate: true,
-				handler(val, oldVal) {
-					if (oldVal && val.length === oldVal.length &&
-						val.every(item => oldVal.indexOf(item) > -1)) return;
-					const checked = [];
-					const checkableDataKeys = this.checkableData.map(item => item[this.keyProp]);
-					val.forEach(item => {
-						if (checkableDataKeys.indexOf(item) > -1) {
-							checked.push(item);
-						}
-					});
-					this.checkChangeByUser = false;
-					this.checked = checked;
+	computed: {
+		filteredData() {
+			return this.data.filter(item => {
+				if (typeof this.filterMethod === 'function') {
+					return this.filterMethod(this.query, item);
+				} else {
+					const label = item[this.labelProp] || item[this.keyProp].toString();
+					return label.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
 				}
-			}
+			});
 		},
 
-		computed: {
-			filteredData() {
-				return this.data.filter(item => {
-					if (typeof this.filterMethod === 'function') {
-						return this.filterMethod(this.query, item);
-					} else {
-						const label = item[this.labelProp] || item[this.keyProp].toString();
-						return label.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
-					}
-				});
-			},
+		checkableData() {
+			return this.filteredData.filter(item => !item[this.disabledProp]);
+		},
 
-			checkableData() {
-				return this.filteredData.filter(item => !item[this.disabledProp]);
-			},
+		checkedSummary() {
+			const checkedLength = this.checked.length;
+			const dataLength = this.data.length;
+			const { noChecked, hasChecked } = this.format;
+			if (noChecked && hasChecked) {
+				return checkedLength > 0
+					? hasChecked.replace(/\${checked}/g, checkedLength).replace(/\${total}/g, dataLength)
+					: noChecked.replace(/\${total}/g, dataLength);
+			} else {
+				return `${ checkedLength }/${ dataLength }`;
+			}
+		},
 
-			checkedSummary() {
-				const checkedLength = this.checked.length;
-				const dataLength = this.data.length;
-				const { noChecked, hasChecked } = this.format;
-				if (noChecked && hasChecked) {
-					return checkedLength > 0
-						? hasChecked.replace(/\${checked}/g, checkedLength).replace(/\${total}/g, dataLength)
-						: noChecked.replace(/\${total}/g, dataLength);
-				} else {
-					return `${ checkedLength }/${ dataLength }`;
-				}
-			},
+		isIndeterminate() {
+			const checkedLength = this.checked.length;
+			return checkedLength > 0 && checkedLength < this.checkableData.length;
+		},
 
-			isIndeterminate() {
-				const checkedLength = this.checked.length;
-				return checkedLength > 0 && checkedLength < this.checkableData.length;
-			},
+		hasNoMatch() {
+			return this.query.length > 0 && this.filteredData.length === 0;
+		},
 
-			hasNoMatch() {
-				return this.query.length > 0 && this.filteredData.length === 0;
-			},
+		inputIcon() {
+			return this.query.length > 0 && this.inputHover
+				? 'circle-close'
+				: 'search';
+		},
 
-			inputIcon() {
-				return this.query.length > 0 && this.inputHover
-					? 'circle-close'
-					: 'search';
-			},
+		labelProp() {
+			return this.props.label || 'label';
+		},
 
-			labelProp() {
-				return this.props.label || 'label';
-			},
+		keyProp() {
+			return this.props.key || 'key';
+		},
 
-			keyProp() {
-				return this.props.key || 'key';
-			},
+		disabledProp() {
+			return this.props.disabled || 'disabled';
+		},
 
-			disabledProp() {
-				return this.props.disabled || 'disabled';
-			},
+		hasFooter() {
+			return !!this.$slots.default;
+		}
+	},
 
-			hasFooter() {
-				return !!this.$slots.default;
-			}
+	methods: {
+		updateAllChecked() {
+			const checkableDataKeys = this.checkableData.map(item => item[this.keyProp]);
+			this.allChecked = checkableDataKeys.length > 0 &&
+    checkableDataKeys.every(item => this.checked.indexOf(item) > -1);
 		},
 
-		methods: {
-			updateAllChecked() {
-				const checkableDataKeys = this.checkableData.map(item => item[this.keyProp]);
-				this.allChecked = checkableDataKeys.length > 0 &&
-					checkableDataKeys.every(item => this.checked.indexOf(item) > -1);
-			},
-
-			handleAllCheckedChange(value) {
-				this.checked = value
-					? this.checkableData.map(item => item[this.keyProp])
-					: [];
-			},
+		handleAllCheckedChange(value) {
+			this.checked = value
+				? this.checkableData.map(item => item[this.keyProp])
+				: [];
+		},
 
-			clearQuery() {
-				if (this.inputIcon === 'circle-close') {
-					this.query = '';
-				}
+		clearQuery() {
+			if (this.inputIcon === 'circle-close') {
+				this.query = '';
 			}
 		}
-	};
+	}
+};
 </script>