@livelybone/vue-pagination/lib/es/index.js

A vue pagination component

/**
 * Bundle of @livelybone/vue-pagination
 * Generated: 2019-03-05
 * Version: 1.5.1
 * License: MIT
 * Author: livelybone(2631541504@qq.com)
 */

var _extends = Object.assign || function (target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i];

    for (var key in source) {
      if (Object.prototype.hasOwnProperty.call(source, key)) {
        target[key] = source[key];
      }
    }
  }

  return target;
};

var toConsumableArray = function (arr) {
  if (Array.isArray(arr)) {
    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];

    return arr2;
  } else {
    return Array.from(arr);
  }
};

//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//

var configDefault = Object.freeze({
  pages: 1,
  page: 1,
  pageSize: 10,
  maxPageBtn: 7
});

var noPageConfig = Object.freeze({
  page: 1,
  pageSize: 10,
  currPageSize: 10
});

var inputDefault = Object.freeze({
  enable: true,
  text: 'Go to',
  debonceTime: 500
});

var turnBtns = Object.freeze({
  prev: '<',
  next: '>'
});

var script = {
  name: 'Pagination',
  props: {
    noPage: Boolean,
    config: Object,
    input: Object,
    turnBtns: Object
  },
  data: function data() {
    return {
      inputVal: '',
      timer: null
    };
  },

  computed: {
    myConfig: function myConfig() {
      return _extends({}, this.noPage ? noPageConfig : configDefault, this.config);
    },
    inputConfig: function inputConfig() {
      return _extends({}, inputDefault, this.input);
    },
    _turnBtns: function _turnBtns() {
      return _extends({}, turnBtns, this.turnBtns);
    },
    pagesArr: function pagesArr() {
      var _myConfig = this.myConfig,
          page = _myConfig.page,
          maxPageBtn = _myConfig.maxPageBtn,
          pages = _myConfig.pages;

      if (pages <= maxPageBtn) {
        return [].concat(toConsumableArray(Array(pages))).map(function (val, i) {
          return i + 1;
        });
      }
      if (page <= (maxPageBtn + 1) / 2) {
        return [].concat(toConsumableArray(Array(maxPageBtn - 1))).map(function (val, i) {
          return i === maxPageBtn - 2 ? '...' : i + 1;
        }).concat([pages]);
      }
      if (page >= pages - (maxPageBtn - 1) / 2) {
        return [1, '...'].concat([].concat(toConsumableArray(Array(maxPageBtn - 2))).map(function (val, i) {
          return pages - i;
        }).reverse());
      }
      return [1, '...'].concat([].concat(toConsumableArray(Array(maxPageBtn - 4))).map(function (val, i) {
        return page - Math.floor((maxPageBtn - 3) / 2) + i + 1;
      })).concat(['...', pages]);
    },
    disabled: function disabled() {
      return {
        pre: this.myConfig.page <= 1,
        next: this.noPage ? this.myConfig.pageSize > this.myConfig.currPageSize : this.myConfig.page >= this.myConfig.pages
      };
    },
    hide: function hide() {
      return !this.noPage && this.myConfig.pages <= 1 || this.noPage && this.myConfig.page <= 1 && this.myConfig.pageSize > this.myConfig.currPageSize;
    }
  },
  watch: {
    'myConfig.page': {
      handler: function handler(val) {
        this.inputVal = +val;
      },

      immediate: true
    },
    inputVal: function inputVal(val) {
      var v = +val;
      if (v !== +this.myConfig.page) this.debonce(v);
    }
  },
  methods: {
    next: function next() {
      var page = +this.myConfig.page + 1;
      if (!this.disabled.next) {
        this.$emit('to', page);
      }
    },
    prev: function prev() {
      var page = +this.myConfig.page - 1;
      if (!this.disabled.pre) {
        this.$emit('to', page);
      }
    },
    to: function to(val) {
      var page = Number(val);
      if (page) this.$emit('to', page);
    },
    debonce: function debonce(val) {
      var _this = this;

      clearTimeout(this.timer);
      this.timer = setTimeout(function () {
        var _myConfig2 = _this.myConfig,
            page = _myConfig2.page,
            pages = _myConfig2.pages,
            currPageSize = _myConfig2.currPageSize,
            pageSize = _myConfig2.pageSize;

        if (val > 0 && (_this.noPage ? currPageSize >= pageSize || val <= +page : val <= pages)) {
          _this.to(val);
        }
      }, this.inputConfig.debonceTime);
    }
  }
};

/* script */
var __vue_script__ = script;

/* template */
var __vue_render__ = function __vue_render__() {
  var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return !_vm.hide ? _c('div', { staticClass: "pagination" }, [_vm.inputConfig.enable ? [_c('span', { staticClass: "label" }, [_vm._v(_vm._s(_vm.inputConfig.text))]), _vm._v(" "), _c('input', { directives: [{ name: "model", rawName: "v-model", value: _vm.inputVal, expression: "inputVal" }], staticClass: "input", attrs: { "type": "text" }, domProps: { "value": _vm.inputVal }, on: { "input": function input($event) {
        if ($event.target.composing) {
          return;
        }_vm.inputVal = $event.target.value;
      } } })] : _vm._e(), _vm._v(" "), _c('div', { staticClass: "page-btn", class: { disabled: _vm.disabled.pre }, domProps: { "innerHTML": _vm._s(_vm._turnBtns.prev) }, on: { "click": _vm.prev } }), _vm._v(" "), !_vm.noPage ? _vm._l(_vm.pagesArr, function (val, i) {
    return _c('div', { key: i, staticClass: "page-btn", class: { active: _vm.myConfig.page === val, disabled: !Number(val) }, on: { "click": function click($event) {
          _vm.to(val);
        } } }, [_vm._v(_vm._s(val) + "\n    ")]);
  }) : _vm._e(), _vm._v(" "), _c('div', { staticClass: "page-btn", class: { disabled: _vm.disabled.next }, domProps: { "innerHTML": _vm._s(_vm._turnBtns.next) }, on: { "click": _vm.next } })], 2) : _vm._e();
};
var __vue_staticRenderFns__ = [];

/* style */
var __vue_inject_styles__ = undefined;
/* scoped */
var __vue_scope_id__ = undefined;
/* module identifier */
var __vue_module_identifier__ = undefined;
/* functional template */
var __vue_is_functional_template__ = false;
/* component normalizer */
function __vue_normalize__(template, style, script$$1, scope, functional, moduleIdentifier, createInjector, createInjectorSSR) {
  var component = (typeof script$$1 === 'function' ? script$$1.options : script$$1) || {};

  // For security concerns, we use only base name in production mode.
  component.__file = "Index.vue";

  if (!component.render) {
    component.render = template.render;
    component.staticRenderFns = template.staticRenderFns;
    component._compiled = true;

    if (functional) component.functional = true;
  }

  component._scopeId = scope;

  return component;
}
/* style inject */

/* style inject SSR */

var Index = __vue_normalize__({ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, undefined, undefined);

export default Index;