umy-ui-table 1.2.0

package/packages/table/index.js

@@ -0,0 +1,8 @@
+import ElTable from './src/table';
+
+/* istanbul ignore next */
+ElTable.install = function(Vue) {
+  Vue.component(ElTable.name, ElTable);
+};
+
+export default ElTable;

package/packages/table/src/config.js

@@ -0,0 +1,123 @@
+import { getPropByPath } from '../../tools/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: ''
+  }
+};
+
+// 这些选项不应该被覆盖
+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 }
+        nativeOn-click={ this.toggleAllSelection }
+        value={ this.isAllSelected } />;
+    },
+    renderCell: function(h, { row, column, store, $index }) {
+      return <el-checkbox
+        nativeOn-click={ (event) => event.stopPropagation() }
+        value={ store.isSelected(row) }
+        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);
+      }
+
+      return <div>{ i }</div>;
+    },
+    sortable: false
+  },
+  expand: {
+    renderHeader: function(h, { column }) {
+      return column.label || '';
+    },
+    renderCell: function(h, { row, store }) {
+      const classes = ['el-table__expand-icon'];
+      if (store.states.expandRows.indexOf(row) > -1) {
+        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;
+}
+
+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;
+}

package/packages/table/src/dropdown.js

@@ -0,0 +1,28 @@
+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);
+  });
+});
+
+export default {
+  open(instance) {
+    if (instance) {
+      dropdowns.push(instance);
+    }
+  },
+
+  close(instance) {
+    var index = dropdowns.indexOf(instance);
+    if (index !== -1) {
+      dropdowns.splice(instance, 1);
+    }
+  }
+};

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

@@ -0,0 +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>
+</template>
+
+<script type="text/babel">
+  import Popper from '../../tools/utils/vue-popper';
+  import { PopupManager } from '../../tools/utils/popup';
+  import Locale from '../../tools/mixins/locale';
+  import Clickoutside from '../../tools/utils/clickoutside';
+  import Dropdown from './dropdown';
+  import ElCheckbox from '../../checkbox';
+  import ElCheckboxGroup from '../../checkbox-group';
+  import ElScrollbar from '../../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>

package/packages/table/src/layout-observer.js

@@ -0,0 +1,68 @@
+export default {
+  created() {
+    this.tableLayout.addObserver(this);
+  },
+
+  destroyed() {
+    this.tableLayout.removeObserver(this);
+  },
+
+  computed: {
+    tableLayout() {
+      let layout = this.layout;
+      if (!layout && this.table) {
+        layout = this.table.layout;
+      }
+      if (!layout) {
+        throw new Error('Can not find table layout.');
+      }
+      return layout;
+    }
+  },
+
+  mounted() {
+    this.onColumnsChange(this.tableLayout);
+    this.onScrollableChange(this.tableLayout);
+  },
+
+  updated() {
+    if (this.__updated__) return;
+    this.onColumnsChange(this.tableLayout);
+    this.onScrollableChange(this.tableLayout);
+    this.__updated__ = true;
+  },
+
+  methods: {
+    onColumnsChange() {
+      const cols = this.$el.querySelectorAll('colgroup > col');
+      if (!cols.length) return;
+      const flattenColumns = this.tableLayout.getFlattenColumns();
+      const columnsMap = {};
+      flattenColumns.forEach((column) => {
+        columnsMap[column.id] = column;
+      });
+      for (let i = 0, j = cols.length; i < j; i++) {
+        const col = cols[i];
+        const name = col.getAttribute('name');
+        const column = columnsMap[name];
+        if (column) {
+          col.setAttribute('width', column.realWidth || column.width);
+        }
+      }
+    },
+
+    onScrollableChange(layout) {
+      const cols = this.$el.querySelectorAll('colgroup > col[name=gutter]');
+      for (let i = 0, j = cols.length; i < j; i++) {
+        const col = cols[i];
+        col.setAttribute('width', layout.scrollY ? layout.gutterWidth : '0');
+      }
+      const ths = this.$el.querySelectorAll('th.gutter');
+      for (let i = 0, j = ths.length; i < j; i++) {
+        const th = ths[i];
+        th.style.width = layout.scrollY ? layout.gutterWidth + 'px' : '0';
+        th.style.display = layout.scrollY ? '' : 'none';
+      }
+    }
+  }
+};

package/packages/table/src/store/current.js

@@ -0,0 +1,71 @@
+import { arrayFind } from '../../../tools/utils/util';
+import { getRowIdentity } from '../util';
+
+export default {
+  data() {
+    return {
+      states: {
+        // 不可响应的，设置 currentRowKey 时，data 不一定存在，也许无法算出正确的 currentRow
+        // 把该值缓存一下，当用户点击修改 currentRow 时，把该值重置为 null
+        _currentRowKey: null,
+        currentRow: null
+      }
+    };
+  },
+
+  methods: {
+    setCurrentRowKey(key) {
+      this.assertRowKey();
+      this.states._currentRowKey = key;
+      this.setCurrentRowByKey(key);
+    },
+
+    restoreCurrentRowKey() {
+      this.states._currentRowKey = null;
+    },
+
+    setCurrentRowByKey(key) {
+      const { states } = this;
+      const { data = [], rowKey } = states;
+      let currentRow = null;
+      if (rowKey) {
+        currentRow = arrayFind(data, item => getRowIdentity(item, rowKey) === key);
+      }
+      states.currentRow = currentRow;
+    },
+
+    updateCurrentRow(currentRow) {
+      const { states, table } = this;
+      const { rowKey, _currentRowKey } = states;
+      // data 为 null 时，结构时的默认值会被忽略
+      const data = states.data || [];
+      const oldCurrentRow = states.currentRow;
+      if (currentRow) {
+        this.restoreCurrentRowKey();
+        states.currentRow = currentRow;
+        if (oldCurrentRow !== currentRow) {
+          this.table.$emit('current-change', currentRow, oldCurrentRow);
+        }
+      } else {
+        // 当 currentRow 不在 data 中时尝试更新数据
+        if (data.indexOf(oldCurrentRow) === -1 && oldCurrentRow) {
+          this.restoreCurrentRowKey();
+          if (rowKey) {
+            const currentRowKey = getRowIdentity(oldCurrentRow, rowKey);
+            this.setCurrentRowByKey(currentRowKey);
+          } else {
+            states.currentRow = null;
+          }
+          if (states.currentRow !== oldCurrentRow) {
+            table.$emit('current-change', null, oldCurrentRow);
+          }
+        } else if (_currentRowKey) {
+          this.setCurrentRowByKey(_currentRowKey);
+        } else {
+          // 修改源码
+          states.currentRow = null;
+        }
+      }
+    }
+  }
+};

package/packages/table/src/store/expand.js

@@ -0,0 +1,65 @@
+import { toggleRowStatus, getKeysMap, getRowIdentity } from '../util';
+
+export default {
+  data() {
+    return {
+      states: {
+        defaultExpandAll: false,
+        expandRows: []
+      }
+    };
+  },
+
+  methods: {
+    updateExpandRows() {
+      const { data = [], rowKey, defaultExpandAll, expandRows } = this.states;
+      if (defaultExpandAll) {
+        this.states.expandRows = data.slice();
+      } else if (rowKey) {
+        // TODO：这里的代码可以优化
+        const expandRowsMap = getKeysMap(expandRows, rowKey);
+        this.states.expandRows = data.reduce((prev, row) => {
+          const rowId = getRowIdentity(row, rowKey);
+          const rowInfo = expandRowsMap[rowId];
+          if (rowInfo) {
+            prev.push(row);
+          }
+          return prev;
+        }, []);
+      } else {
+        this.states.expandRows = [];
+      }
+    },
+
+    toggleRowExpansion(row, expanded) {
+      const changed = toggleRowStatus(this.states.expandRows, row, expanded);
+      if (changed) {
+        this.table.$emit('expand-change', row, this.states.expandRows.slice());
+        this.scheduleLayout();
+      }
+    },
+
+    setExpandRowKeys(rowKeys) {
+      this.assertRowKey();
+      // TODO：这里的代码可以优化
+      const { data, rowKey } = this.states;
+      const keysMap = getKeysMap(data, rowKey);
+      this.states.expandRows = rowKeys.reduce((prev, cur) => {
+        const info = keysMap[cur];
+        if (info) {
+          prev.push(info.row);
+        }
+        return prev;
+      }, []);
+    },
+
+    isRowExpanded(row) {
+      const { expandRows = [], rowKey } = this.states;
+      if (rowKey) {
+        const expandMap = getKeysMap(expandRows, rowKey);
+        return !!expandMap[getRowIdentity(row, rowKey)];
+      }
+      return expandRows.indexOf(row) !== -1;
+    }
+  }
+};

package/packages/table/src/store/helper.js

@@ -0,0 +1,37 @@
+import Store from './index';
+
+export function createStore(table, initialState = {}) {
+  if (!table) {
+    throw new Error('Table is required.');
+  }
+
+  const store = new Store();
+  store.table = table;
+  Object.keys(initialState).forEach(key => {
+    store.states[key] = initialState[key];
+  });
+  return store;
+}
+
+export function mapStates(mapper) {
+  const res = {};
+  Object.keys(mapper).forEach(key => {
+    const value = mapper[key];
+    let fn;
+    if (typeof value === 'string') {
+      fn = function() {
+        return this.store.states[value];
+      };
+    } else if (typeof value === 'function') {
+      fn = function() {
+        return value.call(this, this.store.states);
+      };
+    } else {
+      console.error('invalid value type');
+    }
+    if (fn) {
+      res[key] = fn;
+    }
+  });
+  return res;
+};