@penggy/element-ui 2.4.11

package/packages/pagination/src/pagination.js

@@ -0,0 +1,430 @@
+import Pager from './pager.vue';
+import ElSelect from 'element-ui/packages/select';
+import ElOption from 'element-ui/packages/option';
+import ElInput from 'element-ui/packages/input';
+import Locale from 'element-ui/src/mixins/locale';
+import { valueEquals } from 'element-ui/src/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
+  },
+
+  data() {
+    return {
+      internalCurrentPage: 1,
+      internalPageSize: 0,
+      lastEmittedPage: -1,
+      userChangePageSize: false
+    };
+  },
+
+  render(h) {
+    let template = <div class={['el-pagination', {
+      'is-background': this.background,
+      'el-pagination--small': this.small
+    }] }></div>;
+    const layout = this.layout || '';
+    if (!layout) return;
+    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: <my-slot></my-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: {
+    MySlot: {
+      render(h) {
+        return (
+          this.$parent.$slots.default
+            ? this.$parent.$slots.default[0]
+            : ''
+        );
+      }
+    },
+    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],
+
+      data() {
+        return {
+          oldValue: null
+        };
+      },
+
+      components: { ElInput },
+
+      watch: {
+        '$parent.internalPageSize'() {
+          this.$nextTick(() => {
+            this.$refs.input.$el.querySelector('input').value = this.$parent.internalCurrentPage;
+          });
+        }
+      },
+
+      methods: {
+        handleFocus(event) {
+          this.oldValue = event.target.value;
+        },
+        handleBlur({ target }) {
+          this.resetValueIfNeed(target.value);
+          this.reassignMaxValue(target.value);
+        },
+        handleKeyup({ keyCode, target }) {
+          if (keyCode === 13 && this.oldValue && target.value !== this.oldValue) {
+            this.handleChange(target.value);
+          }
+        },
+        handleChange(value) {
+          this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(value);
+          this.$parent.emitChange();
+          this.oldValue = null;
+          this.resetValueIfNeed(value);
+        },
+        resetValueIfNeed(value) {
+          const num = parseInt(value, 10);
+          if (!isNaN(num)) {
+            if (num < 1) {
+              this.$refs.input.setCurrentValue(1);
+            } else {
+              this.reassignMaxValue(value);
+            }
+          }
+        },
+        reassignMaxValue(value) {
+          const { internalPageCount } = this.$parent;
+          if (+value > internalPageCount) {
+            this.$refs.input.setCurrentValue(internalPageCount || 1);
+          }
+        }
+      },
+
+      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.$parent.internalCurrentPage }
+              domPropsValue={ this.$parent.internalCurrentPage }
+              type="number"
+              ref="input"
+              disabled={ this.$parent.disabled }
+              nativeOnKeyup={ this.handleKeyup }
+              onChange={ this.handleChange }
+              onFocus={ this.handleFocus }
+              onBlur={ this.handleBlur }/>
+            { 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.ceil(this.total / this.internalPageSize);
+      } else if (typeof this.pageCount === 'number') {
+        return this.pageCount;
+      }
+      return null;
+    }
+  },
+
+  watch: {
+    currentPage: {
+      immediate: true,
+      handler(val) {
+        this.internalCurrentPage = val;
+      }
+    },
+
+    pageSize: {
+      immediate: true,
+      handler(val) {
+        this.internalPageSize = isNaN(val) ? 10 : val;
+      }
+    },
+
+    internalCurrentPage: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        newVal = parseInt(newVal, 10);
+
+        /* istanbul ignore if */
+        if (isNaN(newVal)) {
+          newVal = oldVal || 1;
+        } else {
+          newVal = this.getValidCurrentPage(newVal);
+        }
+
+        if (newVal !== undefined) {
+          this.internalCurrentPage = newVal;
+          if (oldVal !== newVal) {
+            this.$emit('update:currentPage', newVal);
+          }
+        } else {
+          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/popover/index.js

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

package/packages/popover/src/directive.js

@@ -0,0 +1,20 @@
+const getReference = (el, binding, vnode) => {
+  const _ref = binding.expression ? binding.value : binding.arg;
+  const popper = vnode.context.$refs[_ref];
+  if (popper) {
+    if (Array.isArray(popper)) {
+      popper[0].$refs.reference = el;
+    } else {
+      popper.$refs.reference = el;
+    }
+  }
+};
+
+export default {
+  bind(el, binding, vnode) {
+    getReference(el, binding, vnode);
+  },
+  inserted(el, binding, vnode) {
+    getReference(el, binding, vnode);
+  }
+};

package/packages/popover/src/main.vue

@@ -0,0 +1,207 @@
+<template>
+  <span>
+    <transition
+      :name="transition"
+      @after-enter="handleAfterEnter"
+      @after-leave="handleAfterLeave">
+      <div
+        class="el-popover el-popper"
+        :class="[popperClass, content && 'el-popover--plain']"
+        ref="popper"
+        v-show="!disabled && showPopper"
+        :style="{ width: width + 'px' }"
+        role="tooltip"
+        :id="tooltipId"
+        :aria-hidden="(disabled || !showPopper) ? 'true' : 'false'"
+      >
+        <div class="el-popover__title" v-if="title" v-text="title"></div>
+        <slot>{{ content }}</slot>
+      </div>
+    </transition>
+    <slot name="reference"></slot>
+  </span>
+</template>
+<script>
+import Popper from 'element-ui/src/utils/vue-popper';
+import { on, off } from 'element-ui/src/utils/dom';
+import { addClass, removeClass } from 'element-ui/src/utils/dom';
+import { generateId } from 'element-ui/src/utils/util';
+
+export default {
+  name: 'ElPopover',
+
+  mixins: [Popper],
+
+  props: {
+    trigger: {
+      type: String,
+      default: 'click',
+      validator: value => ['click', 'focus', 'hover', 'manual'].indexOf(value) > -1
+    },
+    openDelay: {
+      type: Number,
+      default: 0
+    },
+    title: String,
+    disabled: Boolean,
+    content: String,
+    reference: {},
+    popperClass: String,
+    width: {},
+    visibleArrow: {
+      default: true
+    },
+    arrowOffset: {
+      type: Number,
+      default: 0
+    },
+    transition: {
+      type: String,
+      default: 'fade-in-linear'
+    }
+  },
+
+  computed: {
+    tooltipId() {
+      return `el-popover-${generateId()}`;
+    }
+  },
+  watch: {
+    showPopper(val) {
+      if (this.disabled) {
+        return;
+      }
+      val ? this.$emit('show') : this.$emit('hide');
+    }
+  },
+
+  mounted() {
+    let reference = this.referenceElm = this.reference || this.$refs.reference;
+    const popper = this.popper || this.$refs.popper;
+
+    if (!reference && this.$slots.reference && this.$slots.reference[0]) {
+      reference = this.referenceElm = this.$slots.reference[0].elm;
+    }
+    // 可访问性
+    if (reference) {
+      addClass(reference, 'el-popover__reference');
+      reference.setAttribute('aria-describedby', this.tooltipId);
+      reference.setAttribute('tabindex', 0); // tab序列
+      popper.setAttribute('tabindex', 0);
+
+      if (this.trigger !== 'click') {
+        on(reference, 'focusin', () => {
+          this.handleFocus();
+          const instance = reference.__vue__;
+          if (instance && typeof instance.focus === 'function') {
+            instance.focus();
+          }
+        });
+        on(popper, 'focusin', this.handleFocus);
+        on(reference, 'focusout', this.handleBlur);
+        on(popper, 'focusout', this.handleBlur);
+      }
+      on(reference, 'keydown', this.handleKeydown);
+      on(reference, 'click', this.handleClick);
+    }
+    if (this.trigger === 'click') {
+      on(reference, 'click', this.doToggle);
+      on(document, 'click', this.handleDocumentClick);
+    } else if (this.trigger === 'hover') {
+      on(reference, 'mouseenter', this.handleMouseEnter);
+      on(popper, 'mouseenter', this.handleMouseEnter);
+      on(reference, 'mouseleave', this.handleMouseLeave);
+      on(popper, 'mouseleave', this.handleMouseLeave);
+    } else if (this.trigger === 'focus') {
+      if (reference.querySelector('input, textarea')) {
+        on(reference, 'focusin', this.doShow);
+        on(reference, 'focusout', this.doClose);
+      } else {
+        on(reference, 'mousedown', this.doShow);
+        on(reference, 'mouseup', this.doClose);
+      }
+    }
+  },
+
+  methods: {
+    doToggle() {
+      this.showPopper = !this.showPopper;
+    },
+    doShow() {
+      this.showPopper = true;
+    },
+    doClose() {
+      this.showPopper = false;
+    },
+    handleFocus() {
+      addClass(this.referenceElm, 'focusing');
+      if (this.trigger !== 'manual') this.showPopper = true;
+    },
+    handleClick() {
+      removeClass(this.referenceElm, 'focusing');
+    },
+    handleBlur() {
+      removeClass(this.referenceElm, 'focusing');
+      if (this.trigger !== 'manual') this.showPopper = false;
+    },
+    handleMouseEnter() {
+      clearTimeout(this._timer);
+      if (this.openDelay) {
+        this._timer = setTimeout(() => {
+          this.showPopper = true;
+        }, this.openDelay);
+      } else {
+        this.showPopper = true;
+      }
+    },
+    handleKeydown(ev) {
+      if (ev.keyCode === 27 && this.trigger !== 'manual') { // esc
+        this.doClose();
+      }
+    },
+    handleMouseLeave() {
+      clearTimeout(this._timer);
+      this._timer = setTimeout(() => {
+        this.showPopper = false;
+      }, 200);
+    },
+    handleDocumentClick(e) {
+      let reference = this.reference || this.$refs.reference;
+      const popper = this.popper || this.$refs.popper;
+
+      if (!reference && this.$slots.reference && this.$slots.reference[0]) {
+        reference = this.referenceElm = this.$slots.reference[0].elm;
+      }
+      if (!this.$el ||
+        !reference ||
+        this.$el.contains(e.target) ||
+        reference.contains(e.target) ||
+        !popper ||
+        popper.contains(e.target)) return;
+      this.showPopper = false;
+    },
+    handleAfterEnter() {
+      this.$emit('after-enter');
+    },
+    handleAfterLeave() {
+      this.$emit('after-leave');
+      this.doDestroy();
+    }
+  },
+
+  destroyed() {
+    const reference = this.reference;
+
+    off(reference, 'click', this.doToggle);
+    off(reference, 'mouseup', this.doClose);
+    off(reference, 'mousedown', this.doShow);
+    off(reference, 'focusin', this.doShow);
+    off(reference, 'focusout', this.doClose);
+    off(reference, 'mousedown', this.doShow);
+    off(reference, 'mouseup', this.doClose);
+    off(reference, 'mouseleave', this.handleMouseLeave);
+    off(reference, 'mouseenter', this.handleMouseEnter);
+    off(document, 'click', this.handleDocumentClick);
+  }
+};
+</script>

package/packages/progress/index.js

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