umy-ui-table 1.2.0

package/packages/pagination/src/pagination.js

@@ -0,0 +1,386 @@
+import Pager from './pager.vue';
+import ElSelect from '../../select';
+import ElOption from '../../option';
+import ElInput from '../../input';
+import Locale from '../../tools/mixins/locale';
+import { valueEquals } from '../../tools/utils/util';
+
+export default {
+  name: 'ElPagination',
+
+  props: {
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+
+    small: Boolean,
+
+    total: Number,
+
+    pageCount: Number,
+
+    pagerCount: {
+      type: Number,
+      validator(value) {
+        return (value | 0) === value && value > 4 && value < 22 && (value % 2) === 1;
+      },
+      default: 7
+    },
+
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+
+    layout: {
+      default: 'prev, pager, next, jumper, ->, total'
+    },
+
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 40, 50, 100];
+      }
+    },
+
+    popperClass: String,
+
+    prevText: String,
+
+    nextText: String,
+
+    background: Boolean,
+
+    disabled: Boolean,
+
+    hideOnSinglePage: Boolean
+  },
+
+  data() {
+    return {
+      internalCurrentPage: 1,
+      internalPageSize: 0,
+      lastEmittedPage: -1,
+      userChangePageSize: false
+    };
+  },
+
+  render(h) {
+    const layout = this.layout;
+    if (!layout) return null;
+    if (this.hideOnSinglePage && (!this.internalPageCount || this.internalPageCount === 1)) return null;
+
+    let template = <div class={['el-pagination', {
+      'is-background': this.background,
+      'el-pagination--small': this.small
+    }] }></div>;
+    const TEMPLATE_MAP = {
+      prev: <prev></prev>,
+      jumper: <jumper></jumper>,
+      pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.internalPageCount } pagerCount={ this.pagerCount } on-change={ this.handleCurrentChange } disabled={ this.disabled }></pager>,
+      next: <next></next>,
+      sizes: <sizes pageSizes={ this.pageSizes }></sizes>,
+      slot: <slot>{ this.$slots.default ? this.$slots.default : '' }</slot>,
+      total: <total></total>
+    };
+    const components = layout.split(',').map((item) => item.trim());
+    const rightWrapper = <div class="el-pagination__rightwrapper"></div>;
+    let haveRightWrapper = false;
+
+    template.children = template.children || [];
+    rightWrapper.children = rightWrapper.children || [];
+    components.forEach(compo => {
+      if (compo === '->') {
+        haveRightWrapper = true;
+        return;
+      }
+
+      if (!haveRightWrapper) {
+        template.children.push(TEMPLATE_MAP[compo]);
+      } else {
+        rightWrapper.children.push(TEMPLATE_MAP[compo]);
+      }
+    });
+
+    if (haveRightWrapper) {
+      template.children.unshift(rightWrapper);
+    }
+
+    return template;
+  },
+
+  components: {
+    Prev: {
+      render(h) {
+        return (
+          <button
+            type="button"
+            class="btn-prev"
+            disabled={ this.$parent.disabled || this.$parent.internalCurrentPage <= 1 }
+            on-click={ this.$parent.prev }>
+            {
+              this.$parent.prevText
+                ? <span>{ this.$parent.prevText }</span>
+                : <i class="el-icon el-icon-arrow-left"></i>
+            }
+          </button>
+        );
+      }
+    },
+
+    Next: {
+      render(h) {
+        return (
+          <button
+            type="button"
+            class="btn-next"
+            disabled={ this.$parent.disabled || this.$parent.internalCurrentPage === this.$parent.internalPageCount || this.$parent.internalPageCount === 0 }
+            on-click={ this.$parent.next }>
+            {
+              this.$parent.nextText
+                ? <span>{ this.$parent.nextText }</span>
+                : <i class="el-icon el-icon-arrow-right"></i>
+            }
+          </button>
+        );
+      }
+    },
+
+    Sizes: {
+      mixins: [Locale],
+
+      props: {
+        pageSizes: Array
+      },
+
+      watch: {
+        pageSizes: {
+          immediate: true,
+          handler(newVal, oldVal) {
+            if (valueEquals(newVal, oldVal)) return;
+            if (Array.isArray(newVal)) {
+              this.$parent.internalPageSize = newVal.indexOf(this.$parent.pageSize) > -1
+                ? this.$parent.pageSize
+                : this.pageSizes[0];
+            }
+          }
+        }
+      },
+
+      render(h) {
+        return (
+          <span class="el-pagination__sizes">
+            <el-select
+              value={ this.$parent.internalPageSize }
+              popperClass={ this.$parent.popperClass || '' }
+              size="mini"
+              on-input={ this.handleChange }
+              disabled={ this.$parent.disabled }>
+              {
+                this.pageSizes.map(item =>
+                  <el-option
+                    value={ item }
+                    label={ item + this.t('el.pagination.pagesize') }>
+                  </el-option>
+                )
+              }
+            </el-select>
+          </span>
+        );
+      },
+
+      components: {
+        ElSelect,
+        ElOption
+      },
+
+      methods: {
+        handleChange(val) {
+          if (val !== this.$parent.internalPageSize) {
+            this.$parent.internalPageSize = val = parseInt(val, 10);
+            this.$parent.userChangePageSize = true;
+            this.$parent.$emit('update:pageSize', val);
+            this.$parent.$emit('size-change', val);
+          }
+        }
+      }
+    },
+
+    Jumper: {
+      mixins: [Locale],
+
+      components: { ElInput },
+
+      data() {
+        return {
+          userInput: null
+        };
+      },
+
+      watch: {
+        '$parent.internalCurrentPage'() {
+          this.userInput = null;
+        }
+      },
+
+      methods: {
+        handleKeyup({ keyCode, target }) {
+          // Chrome, Safari, Firefox triggers change event on Enter
+          // Hack for IE: https://github.com/ElemeFE/element/issues/11710
+          // Drop this method when we no longer supports IE
+          if (keyCode === 13) {
+            this.handleChange(target.value);
+          }
+        },
+        handleInput(value) {
+          this.userInput = value;
+        },
+        handleChange(value) {
+          this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(value);
+          this.$parent.emitChange();
+          this.userInput = null;
+        }
+      },
+
+      render(h) {
+        return (
+          <span class="el-pagination__jump">
+            { this.t('el.pagination.goto') }
+            <el-input
+              class="el-pagination__editor is-in-pagination"
+              min={ 1 }
+              max={ this.$parent.internalPageCount }
+              value={ this.userInput !== null ? this.userInput : this.$parent.internalCurrentPage }
+              type="number"
+              disabled={ this.$parent.disabled }
+              nativeOnKeyup={ this.handleKeyup }
+              onInput={ this.handleInput }
+              onChange={ this.handleChange }/>
+            { this.t('el.pagination.pageClassifier') }
+          </span>
+        );
+      }
+    },
+
+    Total: {
+      mixins: [Locale],
+
+      render(h) {
+        return (
+          typeof this.$parent.total === 'number'
+            ? <span class="el-pagination__total">{ this.t('el.pagination.total', { total: this.$parent.total }) }</span>
+            : ''
+        );
+      }
+    },
+
+    Pager
+  },
+
+  methods: {
+    handleCurrentChange(val) {
+      this.internalCurrentPage = this.getValidCurrentPage(val);
+      this.userChangePageSize = true;
+      this.emitChange();
+    },
+
+    prev() {
+      if (this.disabled) return;
+      const newVal = this.internalCurrentPage - 1;
+      this.internalCurrentPage = this.getValidCurrentPage(newVal);
+      this.$emit('prev-click', this.internalCurrentPage);
+      this.emitChange();
+    },
+
+    next() {
+      if (this.disabled) return;
+      const newVal = this.internalCurrentPage + 1;
+      this.internalCurrentPage = this.getValidCurrentPage(newVal);
+      this.$emit('next-click', this.internalCurrentPage);
+      this.emitChange();
+    },
+
+    getValidCurrentPage(value) {
+      value = parseInt(value, 10);
+
+      const havePageCount = typeof this.internalPageCount === 'number';
+
+      let resetValue;
+      if (!havePageCount) {
+        if (isNaN(value) || value < 1) resetValue = 1;
+      } else {
+        if (value < 1) {
+          resetValue = 1;
+        } else if (value > this.internalPageCount) {
+          resetValue = this.internalPageCount;
+        }
+      }
+
+      if (resetValue === undefined && isNaN(value)) {
+        resetValue = 1;
+      } else if (resetValue === 0) {
+        resetValue = 1;
+      }
+
+      return resetValue === undefined ? value : resetValue;
+    },
+
+    emitChange() {
+      this.$nextTick(() => {
+        if (this.internalCurrentPage !== this.lastEmittedPage || this.userChangePageSize) {
+          this.$emit('current-change', this.internalCurrentPage);
+          this.lastEmittedPage = this.internalCurrentPage;
+          this.userChangePageSize = false;
+        }
+      });
+    }
+  },
+
+  computed: {
+    internalPageCount() {
+      if (typeof this.total === 'number') {
+        return Math.max(1, Math.ceil(this.total / this.internalPageSize));
+      } else if (typeof this.pageCount === 'number') {
+        return Math.max(1, this.pageCount);
+      }
+      return null;
+    }
+  },
+
+  watch: {
+    currentPage: {
+      immediate: true,
+      handler(val) {
+        this.internalCurrentPage = this.getValidCurrentPage(val);
+      }
+    },
+
+    pageSize: {
+      immediate: true,
+      handler(val) {
+        this.internalPageSize = isNaN(val) ? 10 : val;
+      }
+    },
+
+    internalCurrentPage: {
+      immediate: true,
+      handler(newVal) {
+        this.$emit('update:currentPage', newVal);
+        this.lastEmittedPage = -1;
+      }
+    },
+
+    internalPageCount(newVal) {
+      /* istanbul ignore if */
+      const oldPage = this.internalCurrentPage;
+      if (newVal > 0 && oldPage === 0) {
+        this.internalCurrentPage = 1;
+      } else if (oldPage > newVal) {
+        this.internalCurrentPage = newVal === 0 ? 1 : newVal;
+        this.userChangePageSize && this.emitChange();
+      }
+      this.userChangePageSize = false;
+    }
+  }
+};

package/packages/scrollbar/index.js

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

package/packages/scrollbar/src/bar.js

@@ -0,0 +1,92 @@
+import { on, off } from '../../tools/utils/dom';
+import { renderThumbStyle, BAR_MAP } from './util';
+
+/* istanbul ignore next */
+export default {
+  name: 'Bar',
+
+  props: {
+    vertical: Boolean,
+    size: String,
+    move: Number
+  },
+
+  computed: {
+    bar() {
+      return BAR_MAP[this.vertical ? 'vertical' : 'horizontal'];
+    },
+
+    wrap() {
+      return this.$parent.wrap;
+    }
+  },
+
+  render(h) {
+    const { size, move, bar } = this;
+
+    return (
+      <div
+        class={ ['el-scrollbar__bar', 'is-' + bar.key] }
+        onMousedown={ this.clickTrackHandler } >
+        <div
+          ref="thumb"
+          class="el-scrollbar__thumb"
+          onMousedown={ this.clickThumbHandler }
+          style={ renderThumbStyle({ size, move, bar }) }>
+        </div>
+      </div>
+    );
+  },
+
+  methods: {
+    clickThumbHandler(e) {
+      // prevent click event of right button
+      if (e.ctrlKey || e.button === 2) {
+        return;
+      }
+      this.startDrag(e);
+      this[this.bar.axis] = (e.currentTarget[this.bar.offset] - (e[this.bar.client] - e.currentTarget.getBoundingClientRect()[this.bar.direction]));
+    },
+
+    clickTrackHandler(e) {
+      const offset = Math.abs(e.target.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]);
+      const thumbHalf = (this.$refs.thumb[this.bar.offset] / 2);
+      const thumbPositionPercentage = ((offset - thumbHalf) * 100 / this.$el[this.bar.offset]);
+
+      this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100);
+    },
+
+    startDrag(e) {
+      e.stopImmediatePropagation();
+      this.cursorDown = true;
+
+      on(document, 'mousemove', this.mouseMoveDocumentHandler);
+      on(document, 'mouseup', this.mouseUpDocumentHandler);
+      document.onselectstart = () => false;
+    },
+
+    mouseMoveDocumentHandler(e) {
+      if (this.cursorDown === false) return;
+      const prevPage = this[this.bar.axis];
+
+      if (!prevPage) return;
+
+      const offset = ((this.$el.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]) * -1);
+      const thumbClickPosition = (this.$refs.thumb[this.bar.offset] - prevPage);
+      const thumbPositionPercentage = ((offset - thumbClickPosition) * 100 / this.$el[this.bar.offset]);
+
+      this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100);
+    },
+
+    mouseUpDocumentHandler(e) {
+      this.cursorDown = false;
+      this[this.bar.axis] = 0;
+      off(document, 'mousemove', this.mouseMoveDocumentHandler);
+      document.onselectstart = null;
+    }
+  },
+
+  destroyed() {
+    off(document, 'mouseup', this.mouseUpDocumentHandler);
+  }
+};

package/packages/scrollbar/src/main.js

@@ -0,0 +1,130 @@
+// reference https://github.com/noeldelgado/gemini-scrollbar/blob/master/index.js
+
+import { addResizeListener, removeResizeListener } from '../../tools/utils/resize-event';
+import scrollbarWidth from '../../tools/utils/scrollbar-width';
+import { toObject } from '../../tools/utils/util';
+import Bar from './bar';
+
+/* istanbul ignore next */
+export default {
+  name: 'ElScrollbar',
+
+  components: { Bar },
+
+  props: {
+    native: Boolean,
+    wrapStyle: {},
+    wrapClass: {},
+    viewClass: {},
+    viewStyle: {},
+    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+
+  data() {
+    return {
+      sizeWidth: '0',
+      sizeHeight: '0',
+      moveX: 0,
+      moveY: 0
+    };
+  },
+
+  computed: {
+    wrap() {
+      return this.$refs.wrap;
+    }
+  },
+
+  render(h) {
+    let gutter = scrollbarWidth();
+    let style = this.wrapStyle;
+
+    if (gutter) {
+      const gutterWith = `-${gutter}px`;
+      const gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`;
+
+      if (Array.isArray(this.wrapStyle)) {
+        style = toObject(this.wrapStyle);
+        style.marginRight = style.marginBottom = gutterWith;
+      } else if (typeof this.wrapStyle === 'string') {
+        style += gutterStyle;
+      } else {
+        style = gutterStyle;
+      }
+    }
+    const view = h(this.tag, {
+      class: ['el-scrollbar__view', this.viewClass],
+      style: this.viewStyle,
+      ref: 'resize'
+    }, this.$slots.default);
+    const wrap = (
+      <div
+        ref="wrap"
+        style={ style }
+        onScroll={ this.handleScroll }
+        class={ [this.wrapClass, 'el-scrollbar__wrap', gutter ? '' : 'el-scrollbar__wrap--hidden-default'] }>
+        { [view] }
+      </div>
+    );
+    let nodes;
+
+    if (!this.native) {
+      nodes = ([
+        wrap,
+        <Bar
+          move={ this.moveX }
+          size={ this.sizeWidth }></Bar>,
+        <Bar
+          vertical
+          move={ this.moveY }
+          size={ this.sizeHeight }></Bar>
+      ]);
+    } else {
+      nodes = ([
+        <div
+          ref="wrap"
+          class={ [this.wrapClass, 'el-scrollbar__wrap'] }
+          style={ style }>
+          { [view] }
+        </div>
+      ]);
+    }
+    return h('div', { class: 'el-scrollbar' }, nodes);
+  },
+
+  methods: {
+    handleScroll() {
+      const wrap = this.wrap;
+
+      this.moveY = ((wrap.scrollTop * 100) / wrap.clientHeight);
+      this.moveX = ((wrap.scrollLeft * 100) / wrap.clientWidth);
+    },
+
+    update() {
+      let heightPercentage, widthPercentage;
+      const wrap = this.wrap;
+      if (!wrap) return;
+
+      heightPercentage = (wrap.clientHeight * 100 / wrap.scrollHeight);
+      widthPercentage = (wrap.clientWidth * 100 / wrap.scrollWidth);
+
+      this.sizeHeight = (heightPercentage < 100) ? (heightPercentage + '%') : '';
+      this.sizeWidth = (widthPercentage < 100) ? (widthPercentage + '%') : '';
+    }
+  },
+
+  mounted() {
+    if (this.native) return;
+    this.$nextTick(this.update);
+    !this.noresize && addResizeListener(this.$refs.resize, this.update);
+  },
+
+  beforeDestroy() {
+    if (this.native) return;
+    !this.noresize && removeResizeListener(this.$refs.resize, this.update);
+  }
+};

package/packages/scrollbar/src/util.js

@@ -0,0 +1,34 @@
+export const BAR_MAP = {
+  vertical: {
+    offset: 'offsetHeight',
+    scroll: 'scrollTop',
+    scrollSize: 'scrollHeight',
+    size: 'height',
+    key: 'vertical',
+    axis: 'Y',
+    client: 'clientY',
+    direction: 'top'
+  },
+  horizontal: {
+    offset: 'offsetWidth',
+    scroll: 'scrollLeft',
+    scrollSize: 'scrollWidth',
+    size: 'width',
+    key: 'horizontal',
+    axis: 'X',
+    client: 'clientX',
+    direction: 'left'
+  }
+};
+
+export function renderThumbStyle({ move, size, bar }) {
+  const style = {};
+  const translate = `translate${bar.axis}(${ move }%)`;
+
+  style[bar.size] = size;
+  style.transform = translate;
+  style.msTransform = translate;
+  style.webkitTransform = translate;
+
+  return style;
+};

package/packages/select/index.js

@@ -0,0 +1,2 @@
+import Select from './src/select';
+export default Select;

package/packages/select/src/navigation-mixin.js

@@ -0,0 +1,54 @@
+export default {
+  data() {
+    return {
+      hoverOption: -1
+    };
+  },
+
+  computed: {
+    optionsAllDisabled() {
+      return this.options.filter(option => option.visible).every(option => option.disabled);
+    }
+  },
+
+  watch: {
+    hoverIndex(val) {
+      if (typeof val === 'number' && val > -1) {
+        this.hoverOption = this.options[val] || {};
+      }
+      this.options.forEach(option => {
+        option.hover = this.hoverOption === option;
+      });
+    }
+  },
+
+  methods: {
+    navigateOptions(direction) {
+      if (!this.visible) {
+        this.visible = true;
+        return;
+      }
+      if (this.options.length === 0 || this.filteredOptionsCount === 0) return;
+      if (!this.optionsAllDisabled) {
+        if (direction === 'next') {
+          this.hoverIndex++;
+          if (this.hoverIndex === this.options.length) {
+            this.hoverIndex = 0;
+          }
+        } else if (direction === 'prev') {
+          this.hoverIndex--;
+          if (this.hoverIndex < 0) {
+            this.hoverIndex = this.options.length - 1;
+          }
+        }
+        const option = this.options[this.hoverIndex];
+        if (option.disabled === true ||
+          option.groupDisabled === true ||
+          !option.visible) {
+          this.navigateOptions(direction);
+        }
+        this.$nextTick(() => this.scrollToOption(this.hoverOption));
+      }
+    }
+  }
+};