element-sim 1.1.8 → 1.1.9

package/packages/table/src/dropdown.js

@@ -1,28 +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);
-    }
-  }
-};
+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

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

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

@@ -1,68 +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(layout) {
-      const cols = this.$el.querySelectorAll('colgroup > col');
-      if (!cols.length) return;
-      const flattenColumns = layout.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';
-      }
-    }
-  }
-};
+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(layout) {
+      const cols = this.$el.querySelectorAll('colgroup > col');
+      if (!cols.length) return;
+      const flattenColumns = layout.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';
+      }
+    }
+  }
+};