cy-element-ui 1.1.14 → 1.1.16

package/packages/table/src/config.js

@@ -1,124 +1,124 @@
 import { getPropByPath } from 'element-ui/src/utils/util';
 
 export const cellStarts = {
-  default: {
-    order: ''
-  },
-  selection: {
-    width: 48,
-    minWidth: 48,
-    realWidth: 48,
-    order: '',
-    className: 'el-table-column--selection'
-  },
-  expand: {
-    width: 48,
-    minWidth: 48,
-    realWidth: 48,
-    order: ''
-  },
-  index: {
-    width: 48,
-    minWidth: 48,
-    realWidth: 48,
-    order: ''
-  }
+	default: {
+		order: ''
+	},
+	selection: {
+		width: 48,
+		minWidth: 48,
+		realWidth: 48,
+		order: '',
+		className: 'el-table-column--selection'
+	},
+	expand: {
+		width: 48,
+		minWidth: 48,
+		realWidth: 48,
+		order: ''
+	},
+	index: {
+		width: 48,
+		minWidth: 48,
+		realWidth: 48,
+		order: ''
+	}
 };
 
 // 这些选项不应该被覆盖
 export const cellForced = {
-  selection: {
-    renderHeader: function(h, { store }) {
-      return <el-checkbox
-        disabled={ store.states.data && store.states.data.length === 0 }
-        indeterminate={ store.states.selection.length > 0 && !this.isAllSelected }
-        on-input={ this.toggleAllSelection }
-        value={ this.isAllSelected } />;
-    },
-    renderCell: function(h, { row, column, isSelected, store, $index }) {
-      return <el-checkbox
-        nativeOn-click={ (event) => event.stopPropagation() }
-        value={ isSelected }
-        disabled={ column.selectable ? !column.selectable.call(null, row, $index) : false }
-        on-input={ () => { store.commit('rowSelectedChanged', row); } }
-      />;
-    },
-    sortable: false,
-    resizable: false
-  },
-  index: {
-    renderHeader: function(h, { column }) {
-      return column.label || '#';
-    },
-    renderCell: function(h, { $index, column }) {
-      let i = $index + 1;
-      const index = column.index;
+	selection: {
+		renderHeader: function(h, { store }) {
+			return <el-checkbox
+				disabled={ store.states.data && store.states.data.length === 0 }
+				indeterminate={ store.states.selection.length > 0 && !this.isAllSelected }
+				on-input={ this.toggleAllSelection }
+				value={ this.isAllSelected } />;
+		},
+		renderCell: function(h, { row, column, isSelected, store, $index }) {
+			return <el-checkbox
+				nativeOn-click={ (event) => event.stopPropagation() }
+				value={ isSelected }
+				disabled={ column.selectable ? !column.selectable.call(null, row, $index) : false }
+				on-input={ () => { store.commit('rowSelectedChanged', row); } }
+			/>;
+		},
+		sortable: false,
+		resizable: false
+	},
+	index: {
+		renderHeader: function(h, { column }) {
+			return column.label || '#';
+		},
+		renderCell: function(h, { $index, column }) {
+			let i = $index + 1;
+			const index = column.index;
 
-      if (typeof index === 'number') {
-        i = $index + index;
-      } else if (typeof index === 'function') {
-        i = index($index);
-      }
+			if (typeof index === 'number') {
+				i = $index + index;
+			} else if (typeof index === 'function') {
+				i = index($index);
+			}
 
-      return <div>{ i }</div>;
-    },
-    sortable: false
-  },
-  expand: {
-    renderHeader: function(h, { column }) {
-      return column.label || '';
-    },
-    renderCell: function(h, { row, store, isExpanded }) {
-      const classes = ['el-table__expand-icon'];
-      if (isExpanded) {
-        classes.push('el-table__expand-icon--expanded');
-      }
-      const callback = function(e) {
-        e.stopPropagation();
-        store.toggleRowExpansion(row);
-      };
-      return (<div class={ classes }
-        on-click={callback}>
-        <i class='el-icon el-icon-arrow-right'></i>
-      </div>);
-    },
-    sortable: false,
-    resizable: false,
-    className: 'el-table__expand-column'
-  }
+			return <div>{ i }</div>;
+		},
+		sortable: false
+	},
+	expand: {
+		renderHeader: function(h, { column }) {
+			return column.label || '';
+		},
+		renderCell: function(h, { row, store, isExpanded }) {
+			const classes = ['el-table__expand-icon'];
+			if (isExpanded) {
+				classes.push('el-table__expand-icon--expanded');
+			}
+			const callback = function(e) {
+				e.stopPropagation();
+				store.toggleRowExpansion(row);
+			};
+			return (<div class={ classes }
+				on-click={callback}>
+				<i class='el-icon el-icon-arrow-right'></i>
+			</div>);
+		},
+		sortable: false,
+		resizable: false,
+		className: 'el-table__expand-column'
+	}
 };
 
 export function defaultRenderCell(h, { row, column, $index }) {
-  const property = column.property;
-  const value = property && getPropByPath(row, property).v;
-  if (column && column.formatter) {
-    return column.formatter(row, column, value, $index);
-  }
-  return value;
+	const property = column.property;
+	const value = property && getPropByPath(row, property).v;
+	if (column && column.formatter) {
+		return column.formatter(row, column, value, $index);
+	}
+	return value;
 }
 
 export function treeCellPrefix(h, { row, treeNode, store }) {
-  if (!treeNode) return null;
-  const ele = [];
-  const callback = function(e) {
-    e.stopPropagation();
-    store.loadOrToggle(row);
-  };
-  if (treeNode.indent) {
-    ele.push(<span class="el-table__indent" style={{'padding-left': treeNode.indent + 'px'}}></span>);
-  }
-  if (typeof treeNode.expanded === 'boolean' && !treeNode.noLazyChildren) {
-    const expandClasses = ['el-table__expand-icon', treeNode.expanded ? 'el-table__expand-icon--expanded' : ''];
-    let iconClasses = ['el-icon-arrow-right'];
-    if (treeNode.loading) {
-      iconClasses = ['el-icon-loading'];
-    }
-    ele.push(<div class={ expandClasses }
-      on-click={ callback }>
-      <i class={ iconClasses }></i>
-    </div>);
-  } else {
-    ele.push(<span class="el-table__placeholder"></span>);
-  }
-  return ele;
+	if (!treeNode) return null;
+	const ele = [];
+	const callback = function(e) {
+		e.stopPropagation();
+		store.loadOrToggle(row);
+	};
+	if (treeNode.indent) {
+		ele.push(<span class="el-table__indent" style={{ 'padding-left': treeNode.indent + 'px' }}></span>);
+	}
+	if (typeof treeNode.expanded === 'boolean' && !treeNode.noLazyChildren) {
+		const expandClasses = ['el-table__expand-icon', treeNode.expanded ? 'el-table__expand-icon--expanded' : ''];
+		let iconClasses = ['el-icon-arrow-right'];
+		if (treeNode.loading) {
+			iconClasses = ['el-icon-loading'];
+		}
+		ele.push(<div class={ expandClasses }
+			on-click={ callback }>
+			<i class={ iconClasses }></i>
+		</div>);
+	} else {
+		ele.push(<span class="el-table__placeholder"></span>);
+	}
+	return ele;
 }

package/packages/table/src/dropdown.js

@@ -2,27 +2,27 @@ import Vue from 'vue';
 var dropdowns = [];
 
 !Vue.prototype.$isServer && document.addEventListener('click', function(event) {
-  dropdowns.forEach(function(dropdown) {
-    var target = event.target;
-    if (!dropdown || !dropdown.$el) return;
-    if (target === dropdown.$el || dropdown.$el.contains(target)) {
-      return;
-    }
-    dropdown.handleOutsideClick && dropdown.handleOutsideClick(event);
-  });
+	dropdowns.forEach(function(dropdown) {
+		var target = event.target;
+		if (!dropdown || !dropdown.$el) return;
+		if (target === dropdown.$el || dropdown.$el.contains(target)) {
+			return;
+		}
+		dropdown.handleOutsideClick && dropdown.handleOutsideClick(event);
+	});
 });
 
 export default {
-  open(instance) {
-    if (instance) {
-      dropdowns.push(instance);
-    }
-  },
+	open(instance) {
+		if (instance) {
+			dropdowns.push(instance);
+		}
+	},
 
-  close(instance) {
-    var index = dropdowns.indexOf(instance);
-    if (index !== -1) {
-      dropdowns.splice(instance, 1);
-    }
-  }
+	close(instance) {
+		var index = dropdowns.indexOf(instance);
+		if (index !== -1) {
+			dropdowns.splice(instance, 1);
+		}
+	}
 };

package/packages/table/src/filter-panel.vue

@@ -1,194 +1,194 @@
 <template>
-  <transition name="el-zoom-in-top">
-    <div
-      class="el-table-filter"
-      v-if="multiple"
-      v-clickoutside="handleOutsideClick"
-      v-show="showPopper">
-      <div class="el-table-filter__content">
-        <el-scrollbar wrap-class="el-table-filter__wrap">
-          <el-checkbox-group class="el-table-filter__checkbox-group" v-model="filteredValue">
-            <el-checkbox
-              v-for="filter in filters"
-              :key="filter.value"
-              :label="filter.value">{{ filter.text }}</el-checkbox>
-          </el-checkbox-group>
-        </el-scrollbar>
-      </div>
-      <div class="el-table-filter__bottom">
-        <button @click="handleConfirm"
-          :class="{ 'is-disabled': filteredValue.length === 0 }"
-          :disabled="filteredValue.length === 0">{{ t('el.table.confirmFilter') }}</button>
-        <button @click="handleReset">{{ t('el.table.resetFilter') }}</button>
-      </div>
-    </div>
-    <div
-      class="el-table-filter"
-      v-else
-      v-clickoutside="handleOutsideClick"
-      v-show="showPopper">
-      <ul class="el-table-filter__list">
-        <li class="el-table-filter__list-item"
-            :class="{ 'is-active': filterValue === undefined || filterValue === null }"
-            @click="handleSelect(null)">{{ t('el.table.clearFilter') }}</li>
-        <li class="el-table-filter__list-item"
-            v-for="filter in filters"
-            :label="filter.value"
-            :key="filter.value"
-            :class="{ 'is-active': isActive(filter) }"
-            @click="handleSelect(filter.value)" >{{ filter.text }}</li>
-      </ul>
-    </div>
-  </transition>
+	<transition name="el-zoom-in-top">
+		<div
+			class="el-table-filter"
+			v-if="multiple"
+			v-clickoutside="handleOutsideClick"
+			v-show="showPopper">
+			<div class="el-table-filter__content">
+				<el-scrollbar wrap-class="el-table-filter__wrap">
+					<el-checkbox-group class="el-table-filter__checkbox-group" v-model="filteredValue">
+						<el-checkbox
+							v-for="filter in filters"
+							:key="filter.value"
+							:label="filter.value">{{ filter.text }}</el-checkbox>
+					</el-checkbox-group>
+				</el-scrollbar>
+			</div>
+			<div class="el-table-filter__bottom">
+				<button @click="handleConfirm"
+					:class="{ 'is-disabled': filteredValue.length === 0 }"
+					:disabled="filteredValue.length === 0">{{ t('el.table.confirmFilter') }}</button>
+				<button @click="handleReset">{{ t('el.table.resetFilter') }}</button>
+			</div>
+		</div>
+		<div
+			class="el-table-filter"
+			v-else
+			v-clickoutside="handleOutsideClick"
+			v-show="showPopper">
+			<ul class="el-table-filter__list">
+				<li class="el-table-filter__list-item"
+					:class="{ 'is-active': filterValue === undefined || filterValue === null }"
+					@click="handleSelect(null)">{{ t('el.table.clearFilter') }}</li>
+				<li class="el-table-filter__list-item"
+					v-for="filter in filters"
+					:label="filter.value"
+					:key="filter.value"
+					:class="{ 'is-active': isActive(filter) }"
+					@click="handleSelect(filter.value)" >{{ filter.text }}</li>
+			</ul>
+		</div>
+	</transition>
 </template>
 
 <script type="text/babel">
-  import Popper from 'element-ui/src/utils/vue-popper';
-  import { PopupManager } from 'element-ui/src/utils/popup';
-  import Locale from 'element-ui/src/mixins/locale';
-  import Clickoutside from 'element-ui/src/utils/clickoutside';
-  import Dropdown from './dropdown';
-  import ElCheckbox from 'element-ui/packages/checkbox';
-  import ElCheckboxGroup from 'element-ui/packages/checkbox-group';
-  import ElScrollbar from 'element-ui/packages/scrollbar';
-
-  export default {
-    name: 'ElTableFilterPanel',
-
-    mixins: [Popper, Locale],
-
-    directives: {
-      Clickoutside
-    },
-
-    components: {
-      ElCheckbox,
-      ElCheckboxGroup,
-      ElScrollbar
-    },
-
-    props: {
-      placement: {
-        type: String,
-        default: 'bottom-end'
-      }
-    },
-
-    methods: {
-      isActive(filter) {
-        return filter.value === this.filterValue;
-      },
-
-      handleOutsideClick() {
-        setTimeout(() => {
-          this.showPopper = false;
-        }, 16);
-      },
-
-      handleConfirm() {
-        this.confirmFilter(this.filteredValue);
-        this.handleOutsideClick();
-      },
-
-      handleReset() {
-        this.filteredValue = [];
-        this.confirmFilter(this.filteredValue);
-        this.handleOutsideClick();
-      },
-
-      handleSelect(filterValue) {
-        this.filterValue = filterValue;
-
-        if ((typeof filterValue !== 'undefined') && (filterValue !== null)) {
-          this.confirmFilter(this.filteredValue);
-        } else {
-          this.confirmFilter([]);
-        }
-
-        this.handleOutsideClick();
-      },
-
-      confirmFilter(filteredValue) {
-        this.table.store.commit('filterChange', {
-          column: this.column,
-          values: filteredValue
-        });
-        this.table.store.updateAllSelected();
-      }
-    },
-
-    data() {
-      return {
-        table: null,
-        cell: null,
-        column: null
-      };
-    },
-
-    computed: {
-      filters() {
-        return this.column && this.column.filters;
-      },
-
-      filterValue: {
-        get() {
-          return (this.column.filteredValue || [])[0];
-        },
-        set(value) {
-          if (this.filteredValue) {
-            if ((typeof value !== 'undefined') && (value !== null)) {
-              this.filteredValue.splice(0, 1, value);
-            } else {
-              this.filteredValue.splice(0, 1);
-            }
-          }
-        }
-      },
-
-      filteredValue: {
-        get() {
-          if (this.column) {
-            return this.column.filteredValue || [];
-          }
-          return [];
-        },
-        set(value) {
-          if (this.column) {
-            this.column.filteredValue = value;
-          }
-        }
-      },
-
-      multiple() {
-        if (this.column) {
-          return this.column.filterMultiple;
-        }
-        return true;
-      }
-    },
-
-    mounted() {
-      this.popperElm = this.$el;
-      this.referenceElm = this.cell;
-      this.table.bodyWrapper.addEventListener('scroll', () => {
-        this.updatePopper();
-      });
-
-      this.$watch('showPopper', (value) => {
-        if (this.column) this.column.filterOpened = value;
-        if (value) {
-          Dropdown.open(this);
-        } else {
-          Dropdown.close(this);
-        }
-      });
-    },
-    watch: {
-      showPopper(val) {
-        if (val === true && parseInt(this.popperJS._popper.style.zIndex, 10) < PopupManager.zIndex) {
-          this.popperJS._popper.style.zIndex = PopupManager.nextZIndex();
-        }
-      }
-    }
-  };
+import Popper from 'element-ui/src/utils/vue-popper';
+import { PopupManager } from 'element-ui/src/utils/popup';
+import Locale from 'element-ui/src/mixins/locale';
+import Clickoutside from 'element-ui/src/utils/clickoutside';
+import Dropdown from './dropdown';
+import ElCheckbox from 'element-ui/packages/checkbox';
+import ElCheckboxGroup from 'element-ui/packages/checkbox-group';
+import ElScrollbar from 'element-ui/packages/scrollbar';
+
+export default {
+	name: 'ElTableFilterPanel',
+
+	mixins: [Popper, Locale],
+
+	directives: {
+		Clickoutside
+	},
+
+	components: {
+		ElCheckbox,
+		ElCheckboxGroup,
+		ElScrollbar
+	},
+
+	props: {
+		placement: {
+			type: String,
+			default: 'bottom-end'
+		}
+	},
+
+	methods: {
+		isActive(filter) {
+			return filter.value === this.filterValue;
+		},
+
+		handleOutsideClick() {
+			setTimeout(() => {
+				this.showPopper = false;
+			}, 16);
+		},
+
+		handleConfirm() {
+			this.confirmFilter(this.filteredValue);
+			this.handleOutsideClick();
+		},
+
+		handleReset() {
+			this.filteredValue = [];
+			this.confirmFilter(this.filteredValue);
+			this.handleOutsideClick();
+		},
+
+		handleSelect(filterValue) {
+			this.filterValue = filterValue;
+
+			if ((typeof filterValue !== 'undefined') && (filterValue !== null)) {
+				this.confirmFilter(this.filteredValue);
+			} else {
+				this.confirmFilter([]);
+			}
+
+			this.handleOutsideClick();
+		},
+
+		confirmFilter(filteredValue) {
+			this.table.store.commit('filterChange', {
+				column: this.column,
+				values: filteredValue
+			});
+			this.table.store.updateAllSelected();
+		}
+	},
+
+	data() {
+		return {
+			table: null,
+			cell: null,
+			column: null
+		};
+	},
+
+	computed: {
+		filters() {
+			return this.column && this.column.filters;
+		},
+
+		filterValue: {
+			get() {
+				return (this.column.filteredValue || [])[0];
+			},
+			set(value) {
+				if (this.filteredValue) {
+					if ((typeof value !== 'undefined') && (value !== null)) {
+						this.filteredValue.splice(0, 1, value);
+					} else {
+						this.filteredValue.splice(0, 1);
+					}
+				}
+			}
+		},
+
+		filteredValue: {
+			get() {
+				if (this.column) {
+					return this.column.filteredValue || [];
+				}
+				return [];
+			},
+			set(value) {
+				if (this.column) {
+					this.column.filteredValue = value;
+				}
+			}
+		},
+
+		multiple() {
+			if (this.column) {
+				return this.column.filterMultiple;
+			}
+			return true;
+		}
+	},
+
+	mounted() {
+		this.popperElm = this.$el;
+		this.referenceElm = this.cell;
+		this.table.bodyWrapper.addEventListener('scroll', () => {
+			this.updatePopper();
+		});
+
+		this.$watch('showPopper', (value) => {
+			if (this.column) this.column.filterOpened = value;
+			if (value) {
+				Dropdown.open(this);
+			} else {
+				Dropdown.close(this);
+			}
+		});
+	},
+	watch: {
+		showPopper(val) {
+			if (val === true && parseInt(this.popperJS._popper.style.zIndex, 10) < PopupManager.zIndex) {
+				this.popperJS._popper.style.zIndex = PopupManager.nextZIndex();
+			}
+		}
+	}
+};
 </script>