mazey-element-ui 2.0.0 → 2.15.15

package/packages/table/src/table.vue

@@ -49,10 +49,8 @@
         v-if="!data || data.length === 0"
         class="el-table__empty-block"
         ref="emptyBlock"
-        :style="{
-          width: bodyWidth
-        }">
-        <span class="el-table__empty-text">
+        :style="emptyBlockStyle">
+        <span class="el-table__empty-text" >
           <slot name="empty">{{ emptyText || t('el.table.emptyText') }}</slot>
         </span>
       </div>
@@ -123,9 +121,7 @@
         <div
           v-if="$slots.append"
           class="el-table__append-gutter"
-          :style="{
-            height: layout.appendHeight + 'px'
-          }"></div>
+          :style="{ height: layout.appendHeight + 'px'}"></div>
       </div>
       <div
         v-if="showSummary"
@@ -183,6 +179,10 @@
             width: bodyWidth
           }">
         </table-body>
+         <div
+          v-if="$slots.append"
+          class="el-table__append-gutter"
+          :style="{ height: layout.appendHeight + 'px' }"></div>
       </div>
       <div
         v-if="showSummary"
@@ -213,17 +213,18 @@
 </template>
 
 <script type="text/babel">
-  import ElCheckbox from 'element-ui/packages/checkbox';
-  import debounce from 'throttle-debounce/debounce';
-  import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
-  import Mousewheel from 'element-ui/src/directives/mousewheel';
-  import Locale from 'element-ui/src/mixins/locale';
-  import Migrating from 'element-ui/src/mixins/migrating';
-  import TableStore from './table-store';
+  import ElCheckbox from 'mazey-element-ui/packages/checkbox';
+  import { debounce, throttle } from 'throttle-debounce';
+  import { addResizeListener, removeResizeListener } from 'mazey-element-ui/src/utils/resize-event';
+  import Mousewheel from 'mazey-element-ui/src/directives/mousewheel';
+  import Locale from 'mazey-element-ui/src/mixins/locale';
+  import Migrating from 'mazey-element-ui/src/mixins/migrating';
+  import { createStore, mapStates } from './store/helper';
   import TableLayout from './table-layout';
   import TableBody from './table-body';
   import TableHeader from './table-header';
   import TableFooter from './table-footer';
+  import { parseHeight } from './util';
 
   let tableIdSeed = 1;
 
@@ -294,6 +295,11 @@
 
       highlightCurrentRow: Boolean,
 
+      highlightSelectionRow: {
+        type: Boolean,
+        default: false
+      },
+
       currentRowKey: [String, Number],
 
       emptyText: String,
@@ -311,7 +317,26 @@
       selectOnIndeterminate: {
         type: Boolean,
         default: true
-      }
+      },
+
+      indent: {
+        type: Number,
+        default: 16
+      },
+
+      treeProps: {
+        type: Object,
+        default() {
+          return {
+            hasChildren: 'hasChildren',
+            children: 'children'
+          };
+        }
+      },
+
+      lazy: Boolean,
+
+      load: Function
     },
 
     components: {
@@ -335,20 +360,20 @@
       },
 
       toggleRowSelection(row, selected) {
-        this.store.toggleRowSelection(row, selected);
+        this.store.toggleRowSelection(row, selected, false);
         this.store.updateAllSelected();
       },
 
       toggleRowExpansion(row, expanded) {
-        this.store.toggleRowExpansion(row, expanded);
+        this.store.toggleRowExpansionAdapter(row, expanded);
       },
 
       clearSelection() {
         this.store.clearSelection();
       },
 
-      clearFilter() {
-        this.store.clearFilter();
+      clearFilter(columnKeys) {
+        this.store.clearFilter(columnKeys);
       },
 
       clearSort() {
@@ -361,8 +386,11 @@
       },
 
       updateScrollY() {
-        this.layout.updateScrollY();
-        this.layout.updateColumnsWidth();
+        const changed = this.layout.updateScrollY();
+        if (changed) {
+          this.layout.notifyObservers('scrollable');
+          this.layout.updateColumnsWidth();
+        }
       },
 
       handleFixedMousewheel(event, data) {
@@ -384,37 +412,55 @@
       handleHeaderFooterMousewheel(event, data) {
         const { pixelX, pixelY } = data;
         if (Math.abs(pixelX) >= Math.abs(pixelY)) {
-          event.preventDefault();
           this.bodyWrapper.scrollLeft += data.pixelX / 5;
         }
       },
 
-      bindEvents() {
-        const { headerWrapper, footerWrapper } = this.$refs;
-        const refs = this.$refs;
-        let self = this;
-
-        this.bodyWrapper.addEventListener('scroll', function() {
-          if (headerWrapper) headerWrapper.scrollLeft = this.scrollLeft;
-          if (footerWrapper) footerWrapper.scrollLeft = this.scrollLeft;
-          if (refs.fixedBodyWrapper) refs.fixedBodyWrapper.scrollTop = this.scrollTop;
-          if (refs.rightFixedBodyWrapper) refs.rightFixedBodyWrapper.scrollTop = this.scrollTop;
-          const maxScrollLeftPosition = this.scrollWidth - this.offsetWidth - 1;
-          const scrollLeft = this.scrollLeft;
-          if (scrollLeft >= maxScrollLeftPosition) {
-            self.scrollPosition = 'right';
-          } else if (scrollLeft === 0) {
-            self.scrollPosition = 'left';
-          } else {
-            self.scrollPosition = 'middle';
-          }
-        });
+      // TODO 使用 CSS transform
+      syncPostion() {
+        const { scrollLeft, scrollTop, offsetWidth, scrollWidth } = this.bodyWrapper;
+        const { headerWrapper, footerWrapper, fixedBodyWrapper, rightFixedBodyWrapper } = this.$refs;
+        if (headerWrapper) headerWrapper.scrollLeft = scrollLeft;
+        if (footerWrapper) footerWrapper.scrollLeft = scrollLeft;
+        if (fixedBodyWrapper) fixedBodyWrapper.scrollTop = scrollTop;
+        if (rightFixedBodyWrapper) rightFixedBodyWrapper.scrollTop = scrollTop;
+        const maxScrollLeftPosition = scrollWidth - offsetWidth - 1;
+        if (scrollLeft >= maxScrollLeftPosition) {
+          this.scrollPosition = 'right';
+        } else if (scrollLeft === 0) {
+          this.scrollPosition = 'left';
+        } else {
+          this.scrollPosition = 'middle';
+        }
+      },
+
+      throttleSyncPostion: throttle(16, function() {
+        this.syncPostion();
+      }),
 
+      onScroll(evt) {
+        let raf = window.requestAnimationFrame;
+        if (!raf) {
+          this.throttleSyncPostion();
+        } else {
+          raf(this.syncPostion);
+        }
+      },
+
+      bindEvents() {
+        this.bodyWrapper.addEventListener('scroll', this.onScroll, { passive: true });
         if (this.fit) {
           addResizeListener(this.$el, this.resizeListener);
         }
       },
 
+      unbindEvents() {
+        this.bodyWrapper.removeEventListener('scroll', this.onScroll, { passive: true });
+        if (this.fit) {
+          removeResizeListener(this.$el, this.resizeListener);
+        }
+      },
+
       resizeListener() {
         if (!this.$ready) return;
         let shouldUpdateLayout = false;
@@ -439,20 +485,20 @@
       },
 
       doLayout() {
-        this.layout.updateColumnsWidth();
         if (this.shouldUpdateHeight) {
           this.layout.updateElsHeight();
         }
+        this.layout.updateColumnsWidth();
       },
 
       sort(prop, order) {
         this.store.commit('sort', { prop, order });
+      },
+
+      toggleAllSelection() {
+        this.store.commit('toggleAllSelection');
       }
-    },
 
-    created() {
-      this.tableId = 'el-table_' + tableIdSeed++;
-      this.debouncedUpdateLayout = debounce(50, () => this.doLayout());
     },
 
     computed: {
@@ -471,42 +517,24 @@
           this.rightFixedColumns.length > 0;
       },
 
-      selection() {
-        return this.store.states.selection;
-      },
-
-      columns() {
-        return this.store.states.columns;
-      },
-
-      tableData() {
-        return this.store.states.data;
-      },
-
-      fixedColumns() {
-        return this.store.states.fixedColumns;
-      },
-
-      rightFixedColumns() {
-        return this.store.states.rightFixedColumns;
-      },
-
       bodyWidth() {
         const { bodyWidth, scrollY, gutterWidth } = this.layout;
         return bodyWidth ? bodyWidth - (scrollY ? gutterWidth : 0) + 'px' : '';
       },
 
       bodyHeight() {
+        const { headerHeight = 0, bodyHeight, footerHeight = 0} = this.layout;
         if (this.height) {
           return {
-            height: this.layout.bodyHeight ? this.layout.bodyHeight + 'px' : ''
+            height: bodyHeight ? bodyHeight + 'px' : ''
           };
         } else if (this.maxHeight) {
-          return {
-            'max-height': (this.showHeader
-              ? this.maxHeight - this.layout.headerHeight - this.layout.footerHeight
-              : this.maxHeight - this.layout.footerHeight) + 'px'
-          };
+          const maxHeight = parseHeight(this.maxHeight);
+          if (typeof maxHeight === 'number') {
+            return {
+              'max-height': (maxHeight - footerHeight - (this.showHeader ? headerHeight : 0)) + 'px'
+            };
+          }
         }
         return {};
       },
@@ -517,19 +545,18 @@
             height: this.layout.fixedBodyHeight ? this.layout.fixedBodyHeight + 'px' : ''
           };
         } else if (this.maxHeight) {
-          let maxHeight = this.layout.scrollX ? this.maxHeight - this.layout.gutterWidth : this.maxHeight;
-
-          if (this.showHeader) {
-            maxHeight -= this.layout.headerHeight;
+          let maxHeight = parseHeight(this.maxHeight);
+          if (typeof maxHeight === 'number') {
+            maxHeight = this.layout.scrollX ? maxHeight - this.layout.gutterWidth : maxHeight;
+            if (this.showHeader) {
+              maxHeight -= this.layout.headerHeight;
+            }
+            maxHeight -= this.layout.footerHeight;
+            return {
+              'max-height': maxHeight + 'px'
+            };
           }
-
-          maxHeight -= this.layout.footerHeight;
-
-          return {
-            'max-height': maxHeight + 'px'
-          };
         }
-
         return {};
       },
 
@@ -553,7 +580,27 @@
             height: this.layout.viewportHeight ? this.layout.viewportHeight + 'px' : ''
           };
         }
-      }
+      },
+
+      emptyBlockStyle() {
+        if (this.data && this.data.length) return null;
+        let height = '100%';
+        if (this.layout.appendHeight) {
+          height = `calc(100% - ${this.layout.appendHeight}px)`;
+        }
+        return {
+          width: this.bodyWidth,
+          height
+        };
+      },
+
+      ...mapStates({
+        selection: 'selection',
+        columns: 'columns',
+        tableData: 'data',
+        fixedColumns: 'fixedColumns',
+        rightFixedColumns: 'rightFixedColumns'
+      })
     },
 
     watch: {
@@ -571,19 +618,18 @@
         }
       },
 
-      currentRowKey(newVal) {
-        this.store.setCurrentRowKey(newVal);
+      currentRowKey: {
+        immediate: true,
+        handler(value) {
+          if (!this.rowKey) return;
+          this.store.setCurrentRowKey(value);
+        }
       },
 
       data: {
         immediate: true,
         handler(value) {
           this.store.commit('setData', value);
-          if (this.$ready) {
-            this.$nextTick(() => {
-              this.doLayout();
-            });
-          }
         }
       },
 
@@ -591,14 +637,15 @@
         immediate: true,
         handler(newVal) {
           if (newVal) {
-            this.store.setExpandRowKeys(newVal);
+            this.store.setExpandRowKeysAdapter(newVal);
           }
         }
       }
     },
 
-    destroyed() {
-      if (this.resizeListener) removeResizeListener(this.$el, this.resizeListener);
+    created() {
+      this.tableId = 'el-table_' + tableIdSeed++;
+      this.debouncedUpdateLayout = debounce(50, () => this.doLayout());
     },
 
     mounted() {
@@ -625,21 +672,30 @@
       this.$ready = true;
     },
 
+    destroyed() {
+      this.unbindEvents();
+    },
+
     data() {
-      const store = new TableStore(this, {
+      const { hasChildren = 'hasChildren', children = 'children' } = this.treeProps;
+      this.store = createStore(this, {
         rowKey: this.rowKey,
         defaultExpandAll: this.defaultExpandAll,
-        selectOnIndeterminate: this.selectOnIndeterminate
+        selectOnIndeterminate: this.selectOnIndeterminate,
+        // TreeTable 的相关配置
+        indent: this.indent,
+        lazy: this.lazy,
+        lazyColumnIdentifier: hasChildren,
+        childrenColumnName: children
       });
       const layout = new TableLayout({
-        store,
+        store: this.store,
         table: this,
         fit: this.fit,
         showHeader: this.showHeader
       });
       return {
         layout,
-        store,
         isHidden: false,
         renderExpanded: null,
         resizeProxyVisible: false,

package/packages/table/src/util.js

@@ -1,4 +1,4 @@
-import { getValueByPath } from 'element-ui/src/utils/util';
+import { getValueByPath } from 'mazey-element-ui/src/utils/util';
 
 export const getCell = function(event) {
   let cell = event.target;
@@ -84,6 +84,18 @@ export const getColumnById = function(table, columnId) {
   return column;
 };
 
+export const getColumnByKey = function(table, columnKey) {
+  let column = null;
+  for (let i = 0; i < table.columns.length; i++) {
+    const item = table.columns[i];
+    if (item.columnKey === columnKey) {
+      column = item;
+      break;
+    }
+  }
+  return column;
+};
+
 export const getColumnByCell = function(table, cell) {
   const matches = (cell.className || '').match(/el-table_[^\s]+/gm);
   if (matches) {
@@ -108,3 +120,154 @@ export const getRowIdentity = (row, rowKey) => {
     return rowKey.call(null, row);
   }
 };
+
+export const getKeysMap = function(array, rowKey) {
+  const arrayMap = {};
+  (array || []).forEach((row, index) => {
+    arrayMap[getRowIdentity(row, rowKey)] = { row, index };
+  });
+  return arrayMap;
+};
+
+function hasOwn(obj, key) {
+  return Object.prototype.hasOwnProperty.call(obj, key);
+}
+
+export function mergeOptions(defaults, config) {
+  const options = {};
+  let key;
+  for (key in defaults) {
+    options[key] = defaults[key];
+  }
+  for (key in config) {
+    if (hasOwn(config, key)) {
+      const value = config[key];
+      if (typeof value !== 'undefined') {
+        options[key] = value;
+      }
+    }
+  }
+  return options;
+}
+
+export function parseWidth(width) {
+  if (width !== undefined) {
+    width = parseInt(width, 10);
+    if (isNaN(width)) {
+      width = null;
+    }
+  }
+  return width;
+}
+
+export function parseMinWidth(minWidth) {
+  if (typeof minWidth !== 'undefined') {
+    minWidth = parseWidth(minWidth);
+    if (isNaN(minWidth)) {
+      minWidth = 80;
+    }
+  }
+  return minWidth;
+};
+
+export function parseHeight(height) {
+  if (typeof height === 'number') {
+    return height;
+  }
+  if (typeof height === 'string') {
+    if (/^\d+(?:px)?$/.test(height)) {
+      return parseInt(height, 10);
+    } else {
+      return height;
+    }
+  }
+  return null;
+}
+
+// https://github.com/reduxjs/redux/blob/master/src/compose.js
+export function compose(...funcs) {
+  if (funcs.length === 0) {
+    return arg => arg;
+  }
+  if (funcs.length === 1) {
+    return funcs[0];
+  }
+  return funcs.reduce((a, b) => (...args) => a(b(...args)));
+}
+
+export function toggleRowStatus(statusArr, row, newVal) {
+  let changed = false;
+  const index = statusArr.indexOf(row);
+  const included = index !== -1;
+
+  const addRow = () => {
+    statusArr.push(row);
+    changed = true;
+  };
+  const removeRow = () => {
+    statusArr.splice(index, 1);
+    changed = true;
+  };
+
+  if (typeof newVal === 'boolean') {
+    if (newVal && !included) {
+      addRow();
+    } else if (!newVal && included) {
+      removeRow();
+    }
+  } else {
+    if (included) {
+      removeRow();
+    } else {
+      addRow();
+    }
+  }
+  return changed;
+}
+
+export function walkTreeNode(root, cb, childrenKey = 'children', lazyKey = 'hasChildren') {
+  const isNil = (array) => !(Array.isArray(array) && array.length);
+
+  function _walker(parent, children, level) {
+    cb(parent, children, level);
+    children.forEach(item => {
+      if (item[lazyKey]) {
+        cb(item, null, level + 1);
+        return;
+      }
+      const children = item[childrenKey];
+      if (!isNil(children)) {
+        _walker(item, children, level + 1);
+      }
+    });
+  }
+
+  root.forEach(item => {
+    if (item[lazyKey]) {
+      cb(item, null, 0);
+      return;
+    }
+    const children = item[childrenKey];
+    if (!isNil(children)) {
+      _walker(item, children, 0);
+    }
+  });
+}
+
+export const objectEquals = function(objectA, objectB) {
+  // 取对象a和b的属性名
+  let aProps = Object.getOwnPropertyNames(objectA);
+  let bProps = Object.getOwnPropertyNames(objectB);
+  // 判断属性名的length是否一致
+  if (aProps.length !== bProps.length) {
+    return false;
+  }
+  // 循环取出属性名，再判断属性值是否一致
+  for (let i = 0; i < aProps.length; i++) {
+    let propName = aProps[i];
+    if (objectA[propName] !== objectB[propName]) {
+      return false;
+    }
+  }
+  return true;
+};

package/packages/tabs/src/tab-bar.vue

@@ -2,6 +2,7 @@
   <div class="el-tabs__active-bar" :class="`is-${ rootTabs.tabPosition }`" :style="barStyle"></div>
 </template>
 <script>
+  import { arrayFind } from 'mazey-element-ui/src/utils/util';
   export default {
     name: 'TabBar',
 
@@ -13,9 +14,7 @@
 
     computed: {
       barStyle: {
-        cache: false,
         get() {
-          if (!this.$parent.$refs.tabs) return {};
           let style = {};
           let offset = 0;
           let tabSize = 0;
@@ -25,7 +24,7 @@
             return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
           };
           this.tabs.every((tab, index) => {
-            let $el = this.$parent.$refs.tabs[index];
+            let $el = arrayFind(this.$parent.$refs.tabs || [], t => t.id.replace('tab-', '') === tab.paneName);
             if (!$el) { return false; }
 
             if (!tab.active) {
@@ -33,16 +32,17 @@
               return true;
             } else {
               tabSize = $el[`client${firstUpperCase(sizeName)}`];
+              const tabStyles = window.getComputedStyle($el);
               if (sizeName === 'width' && this.tabs.length > 1) {
-                tabSize -= (index === 0 || index === this.tabs.length - 1) ? 20 : 40;
+                tabSize -= parseFloat(tabStyles.paddingLeft) + parseFloat(tabStyles.paddingRight);
+              }
+              if (sizeName === 'width') {
+                offset += parseFloat(tabStyles.paddingLeft);
               }
               return false;
             }
           });
 
-          if (sizeName === 'width' && offset !== 0) {
-            offset += 20;
-          }
           const transform = `translate${firstUpperCase(sizeDir)}(${offset}px)`;
           style[sizeName] = tabSize + 'px';
           style.transform = transform;