@maqe-vue/pagination - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1-beta.0

dist/@maqe-vue/pagination.common.js

@@ -108,43 +108,78 @@ module.exports =
 
-/***/ "f6fd":
-/***/ (function(module, exports) {
+/***/ "8875":
+/***/ (function(module, exports, __webpack_require__) {
 
-// document.currentScript polyfill by Adam Miller
-
+var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// addapted from the document.currentScript polyfill by Adam Miller
 // MIT license
+// source: https://github.com/amiller-gh/currentScript-polyfill
 
-(function(document){
-  var currentScript = "currentScript",
-      scripts = document.getElementsByTagName('script'); // Live NodeList collection
+// added support for Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1620505
 
-  // If browser needs currentScript polyfill, add get currentScript() to the document object
-  if (!(currentScript in document)) {
-    Object.defineProperty(document, currentScript, {
-      get: function(){
-
-        // IE 6-10 supports script readyState
-        // IE 10+ support stack trace
-        try { throw new Error(); }
-        catch (err) {
-
-          // Find the second match for the "at" string to get file src url from stack.
-          // Specifically works with the format of stack traces in IE.
-          var i, res = ((/.*at [^\(]*\((.*):.+:.+\)$/ig).exec(err.stack) || [false])[1];
-
-          // For all scripts on the page, if src matches or if ready state is interactive, return the script tag
-          for(i in scripts){
-            if(scripts[i].src == res || scripts[i].readyState == "interactive"){
-              return scripts[i];
-            }
-          }
-
-          // If no match, return null
-          return null;
+(function (root, factory) {
+  if (true) {
+    !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
+				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
+				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+  } else {}
+}(typeof self !== 'undefined' ? self : this, function () {
+  function getCurrentScript () {
+    if (document.currentScript) {
+      return document.currentScript
+    }
+  
+    // IE 8-10 support script readyState
+    // IE 11+ & Firefox support stack trace
+    try {
+      throw new Error();
+    }
+    catch (err) {
+      // Find the second match for the "at" string to get file src url from stack.
+      var ieStackRegExp = /.*at [^(]*\((.*):(.+):(.+)\)$/ig,
+        ffStackRegExp = /@([^@]*):(\d+):(\d+)\s*$/ig,
+        stackDetails = ieStackRegExp.exec(err.stack) || ffStackRegExp.exec(err.stack),
+        scriptLocation = (stackDetails && stackDetails[1]) || false,
+        line = (stackDetails && stackDetails[2]) || false,
+        currentLocation = document.location.href.replace(document.location.hash, ''),
+        pageSource,
+        inlineScriptSourceRegExp,
+        inlineScriptSource,
+        scripts = document.getElementsByTagName('script'); // Live NodeList collection
+  
+      if (scriptLocation === currentLocation) {
+        pageSource = document.documentElement.outerHTML;
+        inlineScriptSourceRegExp = new RegExp('(?:[^\\n]+?\\n){0,' + (line - 2) + '}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*', 'i');
+        inlineScriptSource = pageSource.replace(inlineScriptSourceRegExp, '$1').trim();
+      }
+  
+      for (var i = 0; i < scripts.length; i++) {
+        // If ready state is interactive, return the script tag
+        if (scripts[i].readyState === 'interactive') {
+          return scripts[i];
         }
+  
+        // If src matches, return the script tag
+        if (scripts[i].src === scriptLocation) {
+          return scripts[i];
+        }
+  
+        // If inline source matches, return the script tag
+        if (
+          scriptLocation === currentLocation &&
+          scripts[i].innerHTML &&
+          scripts[i].innerHTML.trim() === inlineScriptSource
+        ) {
+          return scripts[i];
+        }
       }
-    });
-  }
-})(document);
+  
+      // If no match, return null
+      return null;
+    }
+  };
 
+  return getCurrentScript
+}));
 
+
 /***/ }),
@@ -163,9 +198,16 @@
 if (typeof window !== 'undefined') {
+  var currentScript = window.document.currentScript
   if (true) {
-    __webpack_require__("f6fd")
+    var getCurrentScript = __webpack_require__("8875")
+    currentScript = getCurrentScript()
+
+    // for backward compatibility, because previously we directly included the polyfill
+    if (!('currentScript' in document)) {
+      Object.defineProperty(document, 'currentScript', { get: getCurrentScript })
+    }
   }
 
-  var i
-  if ((i = window.document.currentScript) && (i = i.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))) {
-    __webpack_require__.p = i[1] // eslint-disable-line
+  var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
+  if (src) {
+    __webpack_require__.p = src[1] // eslint-disable-line
   }
@@ -177,15 +219,8 @@ }
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b0dff0dc-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Pagination.vue?vue&type=template&id=50928f9f&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{class:['vmq-pagination-container', _vm.containerClass]},[_c('ul',{staticClass:"vmq-pagination"},[_c('li',[_c('button',{staticClass:"vmq-pagination-prev",attrs:{"disabled":_vm.isFirstPage},on:{"click":function($event){$event.preventDefault();return _vm.prevPage($event)}}},[_vm._t("prev",[_vm._v("Prev")])],2)]),_vm._l((_vm.paginators),function(paginator){return _c('li',{key:paginator.id,staticClass:"vmq-pagination-button"},[_c('a',{class:['vmq-pagination-link', {
-					'vmq-pagination-current-page': _vm.currentPage === paginator.value,
-					'disabled': !paginator.enable
-				}],attrs:{"href":"#"},on:{"click":function($event){$event.preventDefault();return _vm.setPage(paginator.value)}}},[_vm._v(" "+_vm._s(paginator.value)+" ")])])}),_c('li',{class:[
-			'vmq-pagination-button vmq-pagination-desc', {
-				'has-one-page': _vm.totalPage <= 1
-			}
-		]},[_vm._v(" / "+_vm._s(_vm.totalPage)+" ")]),_c('li',[_c('button',{staticClass:"vmq-pagination-next",attrs:{"disabled":_vm.isLastPage},on:{"click":function($event){$event.preventDefault();return _vm.nextPage($event)}}},[_vm._t("next",[_vm._v("Next")])],2)])],2)])}
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"2cd94a88-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Pagination.vue?vue&type=template&id=530d1667&
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{class:['vmq-pagination-container' ].concat( _vm.wrapperClass)},[_c('ul',{staticClass:"vmq-pagination"},[_c('li',[_c('button',{staticClass:"vmq-pagination-prev",attrs:{"disabled":_vm.isFirstPage},on:{"click":function($event){$event.preventDefault();return _vm.prevPage($event)}}},[_c('div',{staticClass:"text"},[_vm._t("prev",[_c('img',{attrs:{"src":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAABGdBTUEAALGPC/xhBQAAACBjSFJN\n\t\t\t\t\t\t\tAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElN\n\t\t\t\t\t\t\tRQfkBBQKGg4x+Mc2AAABjElEQVRYw7XXO0/CUBjG8b9tKCwCizcwUSOYaIy7q4mDKzXR7+i38BOo\n\t\t\t\t\t\t\ti4ubi5EetGpi1CBuROE9p+dmt74nPD+e3ijwz1tqXG3zzTgMWNCutDhmgy+uuWQSv0GLM5aBlA5t\n\t\t\t\t\t\t\t7mIDTc5ZnO4thRAycMT6n/0AIhVnJyQzM29CAiZs0pybehLyIXplV7i+vAgZKFH04xC6y3SEYicG\n\t\t\t\t\t\t\tob+TIxGmR4WKQZifRYpR6LlIK9aDiSoAFE8hRDUARQhhA0DBMz0/wg4IIGwBKCh9CHsAhpT0hbmR\n\t\t\t\t\t\t\tcAG8CDcAhrzQcyFcAROhUDEAGPLBljDPuJ0fJpVx81uDPXFeSEN3oMEpK8L8k6sYgD7+gjIcqBvi\n\t\t\t\t\t\t\tH+SPuAAe8aZ3Uyl+1TXevkGd3CfetkGdnDWfeLsGmX+8DRAUX32IMnI6/vFVDTIGYfHmBhkDumHx\n\t\t\t\t\t\t\tpga1GPH6BjXyGPG6BpG+vR44nPmP5h0vAyn7seJlYMx7rHjdb/KY7TjxOuCR5NdZCIjXv1XcT4mg\n\t\t\t\t\t\t\tePOd3OWAkhve/OPhB7oEhrCYVbz9AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTA0LTIwVDEwOjI2\n\t\t\t\t\t\t\tOjE0KzAzOjAw0+VYRAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wNC0yMFQxMDoyNjoxNCswMzow\n\t\t\t\t\t\t\tMKK44PgAAAAASUVORK5CYII="}}),(_vm.showText)?_c('span',[_vm._v(" Prev ")]):_vm._e()])],2)])]),_vm._l((_vm.filterPaginators),function(paginator,index){return _c('li',{key:index,staticClass:"vmq-pagination-button"},[_c('button',{class:paginator.btnClass,on:{"click":function($event){$event.preventDefault();return _vm.setPage(paginator.value)}}},[_c('span',{staticClass:"text"},[_vm._v(" "+_vm._s(paginator.value)+" ")])])])}),_c('li',[_c('button',{staticClass:"vmq-pagination-next",attrs:{"disabled":_vm.isLastPage},on:{"click":function($event){$event.preventDefault();return _vm.nextPage($event)}}},[_c('div',{staticClass:"text"},[_vm._t("next",[(_vm.showText)?_c('span',[_vm._v(" Next ")]):_vm._e(),_c('img',{attrs:{"src":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAABGdBTUEAALGPC/xhBQAAACBjSFJN\n\t\t\t\t\t\tAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElN\n\t\t\t\t\t\tRQfkBBQKGg4x+Mc2AAABjElEQVRYw7XXO0/CUBjG8b9tKCwCizcwUSOYaIy7q4mDKzXR7+i38BOo\n\t\t\t\t\t\ti4ubi5EetGpi1CBuROE9p+dmt74nPD+e3ijwz1tqXG3zzTgMWNCutDhmgy+uuWQSv0GLM5aBlA5t\n\t\t\t\t\t\t7mIDTc5ZnO4thRAycMT6n/0AIhVnJyQzM29CAiZs0pybehLyIXplV7i+vAgZKFH04xC6y3SEYicG\n\t\t\t\t\t\tob+TIxGmR4WKQZifRYpR6LlIK9aDiSoAFE8hRDUARQhhA0DBMz0/wg4IIGwBKCh9CHsAhpT0hbmR\n\t\t\t\t\t\tcAG8CDcAhrzQcyFcAROhUDEAGPLBljDPuJ0fJpVx81uDPXFeSEN3oMEpK8L8k6sYgD7+gjIcqBvi\n\t\t\t\t\t\tH+SPuAAe8aZ3Uyl+1TXevkGd3CfetkGdnDWfeLsGmX+8DRAUX32IMnI6/vFVDTIGYfHmBhkDumHx\n\t\t\t\t\t\tpga1GPH6BjXyGPG6BpG+vR44nPmP5h0vAyn7seJlYMx7rHjdb/KY7TjxOuCR5NdZCIjXv1XcT4mg\n\t\t\t\t\t\tePOd3OWAkhve/OPhB7oEhrCYVbz9AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTA0LTIwVDEwOjI2\n\t\t\t\t\t\tOjE0KzAzOjAw0+VYRAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wNC0yMFQxMDoyNjoxNCswMzow\n\t\t\t\t\t\tMKK44PgAAAAASUVORK5CYII="}})])],2)])])],2)])}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/Pagination.vue?vue&type=template&id=50928f9f&
+// CONCATENATED MODULE: ./src/components/Pagination.vue?vue&type=template&id=530d1667&
 
@@ -201,2 +236,8 @@ // CONCATENATED MODULE: ./src/assets/js/pagination.js
   var paginators = [];
+  var expectLength = offsetPage * 2 + 2;
+  var state = {
+    nearFirst: false,
+    middle: false,
+    nearLast: false
+  };
 
@@ -212,2 +253,4 @@ if (lastPage < offsetPage * 2 + 1) {
     // if currentPage near firstPage
+    state.nearFirst = true;
+
     for (var _i = firstPage; _i < Math.max(offsetPage * 2, currentPage + offsetPage); _i += 1) {
@@ -230,2 +273,3 @@ paginators.push({
     // if currentPage near lastPage
+    state.nearLast = true;
     paginators.push({
@@ -248,2 +292,3 @@ value: firstPage,
     // if currentPage in the middle
+    state.middle = true;
     paginators.push({
@@ -275,2 +320,110 @@ value: firstPage,
 
+  if (lastPage < expectLength) {
+    paginators.length = 0;
+
+    for (var _i4 = 0; _i4 < lastPage; _i4++) {
+      paginators.push({
+        value: _i4 + 1,
+        enable: true
+      });
+    }
+  } else if (state.nearFirst) {
+    if (paginators.length < expectLength) {
+      var dottedAtIndex = paginators.findIndex(function (page) {
+        return page.value === '...';
+      });
+
+      if (dottedAtIndex !== -1) {
+        paginators.splice(dottedAtIndex, 0, {
+          value: paginators[dottedAtIndex - 1].value + 1,
+          enable: true
+        });
+      }
+    }
+
+    var currentPageAtIndex = paginators.findIndex(function (page) {
+      return page.value === currentPage;
+    });
+    var prevPageCount = paginators.filter(function (page, index) {
+      return page.value !== firstPage && index < currentPageAtIndex;
+    }).length;
+
+    if (prevPageCount > offsetPage - 1) {
+      var _paginators$replaceIn;
+
+      var replaceIndex = currentPageAtIndex - offsetPage;
+      var expectDotted = ((_paginators$replaceIn = paginators[replaceIndex]) === null || _paginators$replaceIn === void 0 ? void 0 : _paginators$replaceIn.value) === '...';
+
+      if (!expectDotted) {
+        paginators[replaceIndex].value = "...";
+        paginators[replaceIndex].enable = false;
+      }
+    }
+  } else if (state.nearLast) {
+    var _paginators;
+
+    var startedAtPage = currentPage - (offsetPage - 1);
+    var stopAtPage = currentPage + (offsetPage - 1);
+
+    var _removeIndexs = paginators.reduce(function (indexs, _ref2, index) {
+      var value = _ref2.value;
+
+      if ((value < startedAtPage || value > stopAtPage) && value !== firstPage && value !== lastPage && value !== '...') {
+        indexs.push(index);
+      }
+
+      return indexs;
+    }, []);
+
+    while (_removeIndexs.length) {
+      paginators.splice(_removeIndexs.pop(), 1);
+    }
+
+    if (((_paginators = paginators[paginators.length - 2]) === null || _paginators === void 0 ? void 0 : _paginators.value) + 1 < lastPage) {
+      paginators.splice(paginators.length - 1, 0, {
+        value: "...",
+        enable: false
+      });
+    } else if (paginators.length < expectLength) {
+      var _paginators2;
+
+      var pageNumberCountNeededToAdd = expectLength - paginators.length;
+
+      var _dottedAtIndex = paginators.findIndex(function (page) {
+        return page.value === '...';
+      });
+
+      var afterDottedNumber = (_paginators2 = paginators[_dottedAtIndex + 1]) === null || _paginators2 === void 0 ? void 0 : _paginators2.value;
+
+      if (afterDottedNumber !== undefined) {
+        for (var _i5 = 0; _i5 < pageNumberCountNeededToAdd; _i5++) {
+          paginators.splice(_dottedAtIndex + 1, 0, {
+            value: afterDottedNumber - 1 - _i5,
+            enable: false
+          });
+        }
+      }
+    }
+  }
+
+  var removeIndexs = [];
+  paginators.forEach(function (page, index) {
+    if (page.value === "...") {
+      var _paginators3, _paginators4;
+
+      var next = (_paginators3 = paginators[index + 1]) === null || _paginators3 === void 0 ? void 0 : _paginators3.value;
+      var prev = (_paginators4 = paginators[index - 1]) === null || _paginators4 === void 0 ? void 0 : _paginators4.value;
+
+      if (Number.isInteger(next) && Number.isInteger(prev)) {
+        if (next - prev === 1) {
+          removeIndexs.push(index);
+        }
+      }
+    }
+  });
+
+  while (removeIndexs.length) {
+    paginators.splice(removeIndexs.pop(), 1);
+  }
+
   return paginators;
@@ -281,3 +434,44 @@ };
 });
+// CONCATENATED MODULE: ./src/assets/js/enum.js
+var TYPE = Object.freeze({
+  ENUM: {
+    FULL: "full",
+    COMPACT: "compact",
+    SIMPLE: "simple"
+  },
+
+  get values() {
+    return Object.values(this.ENUM);
+  }
+
+});
+var PAGE_STATE = Object.freeze({
+  ENUM: {
+    FIRST: "FIRST",
+    MIDDLE: "MIDDLE",
+    LAST: "LAST"
+  },
+
+  get values() {
+    return Object.values(this.ENUM);
+  }
+
+});
+// CONCATENATED MODULE: ./src/assets/js/utils.js
+
+var utils_isValidType = function isValidType(type) {
+  return TYPE.values.includes(type);
+};
+var isNumber = function isNumber(n) {
+  return Number.isInteger(n * 1);
+};
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Pagination.vue?vue&type=script&lang=js&
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 //
@@ -330,3 +524,33 @@ //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
+
+
 /* harmony default export */ var Paginationvue_type_script_lang_js_ = ({
@@ -339,6 +563,2 @@ name: "Pagination",
     },
-    offsetPage: {
-      type: Number,
-      default: 2
-    },
     value: {
@@ -351,4 +571,41 @@ type: Number,
       default: ""
+    },
+    options: {
+      type: Object,
+      default: function _default() {
+        return {};
+      },
+      validator: function validator() {
+        var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+        if (options.type && !utils_isValidType(options.type)) {
+          return false;
+        }
+
+        if (_typeof(options.breakpoints) === "object" && !Array.isArray(options.breakpoints)) {
+          var isValid = function isValid(breakpoint) {
+            return [isNumber(breakpoint), utils_isValidType(options.breakpoints[breakpoint].type) // add new validation here
+            ].every(function (v) {
+              return v;
+            });
+          };
+
+          return Object.keys(options.breakpoints).map(isValid).every(function (v) {
+            return v;
+          });
+        }
+
+        return true;
+      }
     }
   },
+  data: function data() {
+    return {
+      type: null,
+      defaultOption: {
+        type: TYPE.ENUM.FULL,
+        breakpoints: {}
+      }
+    };
+  },
   computed: {
@@ -377,4 +634,123 @@ firstPage: function firstPage() {
       });
+    },
+    wrapperClass: function wrapperClass() {
+      return [this.containerClass, this.typeClass, this.pageStateClass];
+    },
+    typeClass: function typeClass() {
+      return "vmq-pagination-".concat(this.type);
+    },
+    offsetPage: function offsetPage() {
+      var _mappingOffsetPage;
+
+      var defaultOffsetPage = 1;
+      var mappingOffsetPage = (_mappingOffsetPage = {}, _defineProperty(_mappingOffsetPage, TYPE.ENUM.COMPACT, 2), _defineProperty(_mappingOffsetPage, TYPE.ENUM.FULL, 3), _mappingOffsetPage);
+      return mappingOffsetPage[this.type] || defaultOffsetPage;
+    },
+    pageStateClass: function pageStateClass() {
+      var _PAGE_STATE$ENUM = PAGE_STATE.ENUM,
+          FIRST = _PAGE_STATE$ENUM.FIRST,
+          MIDDLE = _PAGE_STATE$ENUM.MIDDLE,
+          LAST = _PAGE_STATE$ENUM.LAST;
+      var pageState = this.pageState;
+
+      if (pageState === FIRST) {
+        return "vmq-page-first";
+      } else if (pageState === MIDDLE) {
+        return "vmq-page-middle";
+      } else if (pageState === LAST) {
+        return "vmq-page-last";
+      }
+
+      return null;
+    },
+    filterPaginators: function filterPaginators() {
+      var _this = this;
+
+      var isSimpleType = this.type === TYPE.ENUM.SIMPLE;
+      var isLastPage = this.currentPage === this.lastPage; // this function use to filter paginator
+
+      var isValidConditionType = function isValidConditionType(page) {
+        // filter only `simple` type
+        // such as: we have 50 total page and current page is 1
+        // it should return two array only, current and last page.
+        if (isSimpleType) {
+          var isCurrentOrLast = page.value === _this.currentPage || page.value === _this.lastPage;
+          return isCurrentOrLast;
+        }
+
+        return true;
+      };
+
+      var mapStatus = function mapStatus(page) {
+        var isDottedValue = page.value === "...";
+        var enable = true;
+        var clickable = true;
+
+        if (isSimpleType || isDottedValue) {
+          clickable = false;
+        }
+
+        return _objectSpread({}, page, {
+          enable: enable,
+          clickable: clickable
+        });
+      };
+
+      var applyButtonClass = function applyButtonClass(page) {
+        return _objectSpread({}, page, {
+          btnClass: ['vmq-pagination-link', {
+            'vmq-pagination-current-page': _this.currentPage === page.value,
+            'disabled': !page.enable,
+            'unclickable': !page.clickable,
+            'is-dotted': page.value === '...'
+          }, page.btnClass]
+        });
+      };
+
+      var results = this.paginators.filter(isValidConditionType).map(mapStatus).map(applyButtonClass); // for `simple` page, push `Of` to the middle of array.
+      // It will be like this `1 of 50`
+
+      if (isSimpleType && !isLastPage) {
+        results.splice(1, 0, {
+          value: "Of",
+          enable: true,
+          clickable: false,
+          btnClass: 'vmq-pagination-of unclickable'
+        });
+      }
+
+      return results;
+    },
+    mergeOptions: function mergeOptions() {
+      return _objectSpread({}, this.defaultOption, {}, this.options);
+    },
+    isSetBreakpoints: function isSetBreakpoints() {
+      return !!Object.keys(this.mergeOptions.breakpoints).length;
+    },
+    showText: function showText() {
+      return this.type === TYPE.ENUM.FULL;
+    },
+    pageState: function pageState() {
+      var found2Dotted = this.filterPaginators.filter(function (page) {
+        return page.value === "...";
+      }).length === 2;
+      var foundDottedAtIndex = this.filterPaginators.findIndex(function (page) {
+        return page.value === "...";
+      });
+
+      if (found2Dotted) {
+        return PAGE_STATE.ENUM.MIDDLE;
+      } else if (foundDottedAtIndex > 1) {
+        return PAGE_STATE.ENUM.FIRST;
+      } else if (foundDottedAtIndex === 1) {
+        return PAGE_STATE.ENUM.LAST;
+      }
+
+      return null;
     }
   },
+  mounted: function mounted() {
+    this.type = window.innerWidth ? this.getPaginationType(window.innerWidth) : this.mergeOptions.type;
+    window.addEventListener('resize', this.handleWindowResize);
+  },
   methods: {
@@ -389,3 +765,46 @@ nextPage: function nextPage() {
       this.$emit("onPageChange", n);
+    },
+    // this function use to get type, depends on screen width and breakpoints
+    // if match any then return `type`, if not return null
+    getMatchedType: function getMatchedType(screenWidth, breakpoints) {
+      var matchType = null;
+
+      for (var _i = 0, _Object$keys = Object.keys(breakpoints); _i < _Object$keys.length; _i++) {
+        var key = _Object$keys[_i];
+        // as specific breakpoints `key` number.
+
+        /**
+        	{
+        		480: {
+        			type: "simple"
+        		}
+        	}
+        **/
+        var breakpointWidth = key;
+
+        if (screenWidth < breakpointWidth) {
+          matchType = breakpoints[key].type;
+          break;
+        }
+      }
+
+      return matchType;
+    },
+    getPaginationType: function getPaginationType(screenWidth) {
+      var breakpoints = this.mergeOptions.breakpoints;
+      var matchedType = this.getMatchedType(screenWidth, breakpoints);
+      return matchedType || this.mergeOptions.type;
+    },
+    handleWindowResize: function handleWindowResize(e) {
+      if (!this.isSetBreakpoints) {
+        return;
+      }
+
+      var screenWidth = e.currentTarget.innerWidth; // if match any breakpoints then set as specific, if not set as default.
+
+      this.type = this.getPaginationType(screenWidth);
     }
+  },
+  destroyed: function destroyed() {
+    window.removeEventListener('resize', this.handleWindowResize);
   }
@@ -514,9 +933,9 @@ });
 /* harmony default export */ var Pagination = (component.exports);
-// CONCATENATED MODULE: ./src/main.js
+// CONCATENATED MODULE: ./src/index.js
 
-/* harmony default export */ var main = (Pagination);
+/* harmony default export */ var src_0 = (Pagination);
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
 
 
-/* harmony default export */ var entry_lib = __webpack_exports__["default"] = (main);
+/* harmony default export */ var entry_lib = __webpack_exports__["default"] = (src_0);
 
@@ -523,0 +942,0 @@

dist/@maqe-vue/pagination.umd.js

@@ -117,43 +117,78 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-/***/ "f6fd":
-/***/ (function(module, exports) {
+/***/ "8875":
+/***/ (function(module, exports, __webpack_require__) {
 
-// document.currentScript polyfill by Adam Miller
-
+var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// addapted from the document.currentScript polyfill by Adam Miller
 // MIT license
+// source: https://github.com/amiller-gh/currentScript-polyfill
 
-(function(document){
-  var currentScript = "currentScript",
-      scripts = document.getElementsByTagName('script'); // Live NodeList collection
+// added support for Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1620505
 
-  // If browser needs currentScript polyfill, add get currentScript() to the document object
-  if (!(currentScript in document)) {
-    Object.defineProperty(document, currentScript, {
-      get: function(){
-
-        // IE 6-10 supports script readyState
-        // IE 10+ support stack trace
-        try { throw new Error(); }
-        catch (err) {
-
-          // Find the second match for the "at" string to get file src url from stack.
-          // Specifically works with the format of stack traces in IE.
-          var i, res = ((/.*at [^\(]*\((.*):.+:.+\)$/ig).exec(err.stack) || [false])[1];
-
-          // For all scripts on the page, if src matches or if ready state is interactive, return the script tag
-          for(i in scripts){
-            if(scripts[i].src == res || scripts[i].readyState == "interactive"){
-              return scripts[i];
-            }
-          }
-
-          // If no match, return null
-          return null;
+(function (root, factory) {
+  if (true) {
+    !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
+				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
+				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+  } else {}
+}(typeof self !== 'undefined' ? self : this, function () {
+  function getCurrentScript () {
+    if (document.currentScript) {
+      return document.currentScript
+    }
+  
+    // IE 8-10 support script readyState
+    // IE 11+ & Firefox support stack trace
+    try {
+      throw new Error();
+    }
+    catch (err) {
+      // Find the second match for the "at" string to get file src url from stack.
+      var ieStackRegExp = /.*at [^(]*\((.*):(.+):(.+)\)$/ig,
+        ffStackRegExp = /@([^@]*):(\d+):(\d+)\s*$/ig,
+        stackDetails = ieStackRegExp.exec(err.stack) || ffStackRegExp.exec(err.stack),
+        scriptLocation = (stackDetails && stackDetails[1]) || false,
+        line = (stackDetails && stackDetails[2]) || false,
+        currentLocation = document.location.href.replace(document.location.hash, ''),
+        pageSource,
+        inlineScriptSourceRegExp,
+        inlineScriptSource,
+        scripts = document.getElementsByTagName('script'); // Live NodeList collection
+  
+      if (scriptLocation === currentLocation) {
+        pageSource = document.documentElement.outerHTML;
+        inlineScriptSourceRegExp = new RegExp('(?:[^\\n]+?\\n){0,' + (line - 2) + '}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*', 'i');
+        inlineScriptSource = pageSource.replace(inlineScriptSourceRegExp, '$1').trim();
+      }
+  
+      for (var i = 0; i < scripts.length; i++) {
+        // If ready state is interactive, return the script tag
+        if (scripts[i].readyState === 'interactive') {
+          return scripts[i];
         }
+  
+        // If src matches, return the script tag
+        if (scripts[i].src === scriptLocation) {
+          return scripts[i];
+        }
+  
+        // If inline source matches, return the script tag
+        if (
+          scriptLocation === currentLocation &&
+          scripts[i].innerHTML &&
+          scripts[i].innerHTML.trim() === inlineScriptSource
+        ) {
+          return scripts[i];
+        }
       }
-    });
-  }
-})(document);
+  
+      // If no match, return null
+      return null;
+    }
+  };
 
+  return getCurrentScript
+}));
 
+
 /***/ }),
@@ -172,9 +207,16 @@
 if (typeof window !== 'undefined') {
+  var currentScript = window.document.currentScript
   if (true) {
-    __webpack_require__("f6fd")
+    var getCurrentScript = __webpack_require__("8875")
+    currentScript = getCurrentScript()
+
+    // for backward compatibility, because previously we directly included the polyfill
+    if (!('currentScript' in document)) {
+      Object.defineProperty(document, 'currentScript', { get: getCurrentScript })
+    }
   }
 
-  var i
-  if ((i = window.document.currentScript) && (i = i.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))) {
-    __webpack_require__.p = i[1] // eslint-disable-line
+  var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
+  if (src) {
+    __webpack_require__.p = src[1] // eslint-disable-line
   }
@@ -186,15 +228,8 @@ }
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b0dff0dc-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Pagination.vue?vue&type=template&id=50928f9f&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{class:['vmq-pagination-container', _vm.containerClass]},[_c('ul',{staticClass:"vmq-pagination"},[_c('li',[_c('button',{staticClass:"vmq-pagination-prev",attrs:{"disabled":_vm.isFirstPage},on:{"click":function($event){$event.preventDefault();return _vm.prevPage($event)}}},[_vm._t("prev",[_vm._v("Prev")])],2)]),_vm._l((_vm.paginators),function(paginator){return _c('li',{key:paginator.id,staticClass:"vmq-pagination-button"},[_c('a',{class:['vmq-pagination-link', {
-					'vmq-pagination-current-page': _vm.currentPage === paginator.value,
-					'disabled': !paginator.enable
-				}],attrs:{"href":"#"},on:{"click":function($event){$event.preventDefault();return _vm.setPage(paginator.value)}}},[_vm._v(" "+_vm._s(paginator.value)+" ")])])}),_c('li',{class:[
-			'vmq-pagination-button vmq-pagination-desc', {
-				'has-one-page': _vm.totalPage <= 1
-			}
-		]},[_vm._v(" / "+_vm._s(_vm.totalPage)+" ")]),_c('li',[_c('button',{staticClass:"vmq-pagination-next",attrs:{"disabled":_vm.isLastPage},on:{"click":function($event){$event.preventDefault();return _vm.nextPage($event)}}},[_vm._t("next",[_vm._v("Next")])],2)])],2)])}
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"2cd94a88-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Pagination.vue?vue&type=template&id=530d1667&
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{class:['vmq-pagination-container' ].concat( _vm.wrapperClass)},[_c('ul',{staticClass:"vmq-pagination"},[_c('li',[_c('button',{staticClass:"vmq-pagination-prev",attrs:{"disabled":_vm.isFirstPage},on:{"click":function($event){$event.preventDefault();return _vm.prevPage($event)}}},[_c('div',{staticClass:"text"},[_vm._t("prev",[_c('img',{attrs:{"src":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAABGdBTUEAALGPC/xhBQAAACBjSFJN\n\t\t\t\t\t\t\tAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElN\n\t\t\t\t\t\t\tRQfkBBQKGg4x+Mc2AAABjElEQVRYw7XXO0/CUBjG8b9tKCwCizcwUSOYaIy7q4mDKzXR7+i38BOo\n\t\t\t\t\t\t\ti4ubi5EetGpi1CBuROE9p+dmt74nPD+e3ijwz1tqXG3zzTgMWNCutDhmgy+uuWQSv0GLM5aBlA5t\n\t\t\t\t\t\t\t7mIDTc5ZnO4thRAycMT6n/0AIhVnJyQzM29CAiZs0pybehLyIXplV7i+vAgZKFH04xC6y3SEYicG\n\t\t\t\t\t\t\tob+TIxGmR4WKQZifRYpR6LlIK9aDiSoAFE8hRDUARQhhA0DBMz0/wg4IIGwBKCh9CHsAhpT0hbmR\n\t\t\t\t\t\t\tcAG8CDcAhrzQcyFcAROhUDEAGPLBljDPuJ0fJpVx81uDPXFeSEN3oMEpK8L8k6sYgD7+gjIcqBvi\n\t\t\t\t\t\t\tH+SPuAAe8aZ3Uyl+1TXevkGd3CfetkGdnDWfeLsGmX+8DRAUX32IMnI6/vFVDTIGYfHmBhkDumHx\n\t\t\t\t\t\t\tpga1GPH6BjXyGPG6BpG+vR44nPmP5h0vAyn7seJlYMx7rHjdb/KY7TjxOuCR5NdZCIjXv1XcT4mg\n\t\t\t\t\t\t\tePOd3OWAkhve/OPhB7oEhrCYVbz9AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTA0LTIwVDEwOjI2\n\t\t\t\t\t\t\tOjE0KzAzOjAw0+VYRAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wNC0yMFQxMDoyNjoxNCswMzow\n\t\t\t\t\t\t\tMKK44PgAAAAASUVORK5CYII="}}),(_vm.showText)?_c('span',[_vm._v(" Prev ")]):_vm._e()])],2)])]),_vm._l((_vm.filterPaginators),function(paginator,index){return _c('li',{key:index,staticClass:"vmq-pagination-button"},[_c('button',{class:paginator.btnClass,on:{"click":function($event){$event.preventDefault();return _vm.setPage(paginator.value)}}},[_c('span',{staticClass:"text"},[_vm._v(" "+_vm._s(paginator.value)+" ")])])])}),_c('li',[_c('button',{staticClass:"vmq-pagination-next",attrs:{"disabled":_vm.isLastPage},on:{"click":function($event){$event.preventDefault();return _vm.nextPage($event)}}},[_c('div',{staticClass:"text"},[_vm._t("next",[(_vm.showText)?_c('span',[_vm._v(" Next ")]):_vm._e(),_c('img',{attrs:{"src":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAABGdBTUEAALGPC/xhBQAAACBjSFJN\n\t\t\t\t\t\tAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElN\n\t\t\t\t\t\tRQfkBBQKGg4x+Mc2AAABjElEQVRYw7XXO0/CUBjG8b9tKCwCizcwUSOYaIy7q4mDKzXR7+i38BOo\n\t\t\t\t\t\ti4ubi5EetGpi1CBuROE9p+dmt74nPD+e3ijwz1tqXG3zzTgMWNCutDhmgy+uuWQSv0GLM5aBlA5t\n\t\t\t\t\t\t7mIDTc5ZnO4thRAycMT6n/0AIhVnJyQzM29CAiZs0pybehLyIXplV7i+vAgZKFH04xC6y3SEYicG\n\t\t\t\t\t\tob+TIxGmR4WKQZifRYpR6LlIK9aDiSoAFE8hRDUARQhhA0DBMz0/wg4IIGwBKCh9CHsAhpT0hbmR\n\t\t\t\t\t\tcAG8CDcAhrzQcyFcAROhUDEAGPLBljDPuJ0fJpVx81uDPXFeSEN3oMEpK8L8k6sYgD7+gjIcqBvi\n\t\t\t\t\t\tH+SPuAAe8aZ3Uyl+1TXevkGd3CfetkGdnDWfeLsGmX+8DRAUX32IMnI6/vFVDTIGYfHmBhkDumHx\n\t\t\t\t\t\tpga1GPH6BjXyGPG6BpG+vR44nPmP5h0vAyn7seJlYMx7rHjdb/KY7TjxOuCR5NdZCIjXv1XcT4mg\n\t\t\t\t\t\tePOd3OWAkhve/OPhB7oEhrCYVbz9AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTA0LTIwVDEwOjI2\n\t\t\t\t\t\tOjE0KzAzOjAw0+VYRAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wNC0yMFQxMDoyNjoxNCswMzow\n\t\t\t\t\t\tMKK44PgAAAAASUVORK5CYII="}})])],2)])])],2)])}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/Pagination.vue?vue&type=template&id=50928f9f&
+// CONCATENATED MODULE: ./src/components/Pagination.vue?vue&type=template&id=530d1667&
 
@@ -210,2 +245,8 @@ // CONCATENATED MODULE: ./src/assets/js/pagination.js
   var paginators = [];
+  var expectLength = offsetPage * 2 + 2;
+  var state = {
+    nearFirst: false,
+    middle: false,
+    nearLast: false
+  };
 
@@ -221,2 +262,4 @@ if (lastPage < offsetPage * 2 + 1) {
     // if currentPage near firstPage
+    state.nearFirst = true;
+
     for (var _i = firstPage; _i < Math.max(offsetPage * 2, currentPage + offsetPage); _i += 1) {
@@ -239,2 +282,3 @@ paginators.push({
     // if currentPage near lastPage
+    state.nearLast = true;
     paginators.push({
@@ -257,2 +301,3 @@ value: firstPage,
     // if currentPage in the middle
+    state.middle = true;
     paginators.push({
@@ -284,2 +329,110 @@ value: firstPage,
 
+  if (lastPage < expectLength) {
+    paginators.length = 0;
+
+    for (var _i4 = 0; _i4 < lastPage; _i4++) {
+      paginators.push({
+        value: _i4 + 1,
+        enable: true
+      });
+    }
+  } else if (state.nearFirst) {
+    if (paginators.length < expectLength) {
+      var dottedAtIndex = paginators.findIndex(function (page) {
+        return page.value === '...';
+      });
+
+      if (dottedAtIndex !== -1) {
+        paginators.splice(dottedAtIndex, 0, {
+          value: paginators[dottedAtIndex - 1].value + 1,
+          enable: true
+        });
+      }
+    }
+
+    var currentPageAtIndex = paginators.findIndex(function (page) {
+      return page.value === currentPage;
+    });
+    var prevPageCount = paginators.filter(function (page, index) {
+      return page.value !== firstPage && index < currentPageAtIndex;
+    }).length;
+
+    if (prevPageCount > offsetPage - 1) {
+      var _paginators$replaceIn;
+
+      var replaceIndex = currentPageAtIndex - offsetPage;
+      var expectDotted = ((_paginators$replaceIn = paginators[replaceIndex]) === null || _paginators$replaceIn === void 0 ? void 0 : _paginators$replaceIn.value) === '...';
+
+      if (!expectDotted) {
+        paginators[replaceIndex].value = "...";
+        paginators[replaceIndex].enable = false;
+      }
+    }
+  } else if (state.nearLast) {
+    var _paginators;
+
+    var startedAtPage = currentPage - (offsetPage - 1);
+    var stopAtPage = currentPage + (offsetPage - 1);
+
+    var _removeIndexs = paginators.reduce(function (indexs, _ref2, index) {
+      var value = _ref2.value;
+
+      if ((value < startedAtPage || value > stopAtPage) && value !== firstPage && value !== lastPage && value !== '...') {
+        indexs.push(index);
+      }
+
+      return indexs;
+    }, []);
+
+    while (_removeIndexs.length) {
+      paginators.splice(_removeIndexs.pop(), 1);
+    }
+
+    if (((_paginators = paginators[paginators.length - 2]) === null || _paginators === void 0 ? void 0 : _paginators.value) + 1 < lastPage) {
+      paginators.splice(paginators.length - 1, 0, {
+        value: "...",
+        enable: false
+      });
+    } else if (paginators.length < expectLength) {
+      var _paginators2;
+
+      var pageNumberCountNeededToAdd = expectLength - paginators.length;
+
+      var _dottedAtIndex = paginators.findIndex(function (page) {
+        return page.value === '...';
+      });
+
+      var afterDottedNumber = (_paginators2 = paginators[_dottedAtIndex + 1]) === null || _paginators2 === void 0 ? void 0 : _paginators2.value;
+
+      if (afterDottedNumber !== undefined) {
+        for (var _i5 = 0; _i5 < pageNumberCountNeededToAdd; _i5++) {
+          paginators.splice(_dottedAtIndex + 1, 0, {
+            value: afterDottedNumber - 1 - _i5,
+            enable: false
+          });
+        }
+      }
+    }
+  }
+
+  var removeIndexs = [];
+  paginators.forEach(function (page, index) {
+    if (page.value === "...") {
+      var _paginators3, _paginators4;
+
+      var next = (_paginators3 = paginators[index + 1]) === null || _paginators3 === void 0 ? void 0 : _paginators3.value;
+      var prev = (_paginators4 = paginators[index - 1]) === null || _paginators4 === void 0 ? void 0 : _paginators4.value;
+
+      if (Number.isInteger(next) && Number.isInteger(prev)) {
+        if (next - prev === 1) {
+          removeIndexs.push(index);
+        }
+      }
+    }
+  });
+
+  while (removeIndexs.length) {
+    paginators.splice(removeIndexs.pop(), 1);
+  }
+
   return paginators;
@@ -290,3 +443,44 @@ };
 });
+// CONCATENATED MODULE: ./src/assets/js/enum.js
+var TYPE = Object.freeze({
+  ENUM: {
+    FULL: "full",
+    COMPACT: "compact",
+    SIMPLE: "simple"
+  },
+
+  get values() {
+    return Object.values(this.ENUM);
+  }
+
+});
+var PAGE_STATE = Object.freeze({
+  ENUM: {
+    FIRST: "FIRST",
+    MIDDLE: "MIDDLE",
+    LAST: "LAST"
+  },
+
+  get values() {
+    return Object.values(this.ENUM);
+  }
+
+});
+// CONCATENATED MODULE: ./src/assets/js/utils.js
+
+var utils_isValidType = function isValidType(type) {
+  return TYPE.values.includes(type);
+};
+var isNumber = function isNumber(n) {
+  return Number.isInteger(n * 1);
+};
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Pagination.vue?vue&type=script&lang=js&
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 //
@@ -339,3 +533,33 @@ //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
+
+
 /* harmony default export */ var Paginationvue_type_script_lang_js_ = ({
@@ -348,6 +572,2 @@ name: "Pagination",
     },
-    offsetPage: {
-      type: Number,
-      default: 2
-    },
     value: {
@@ -360,4 +580,41 @@ type: Number,
       default: ""
+    },
+    options: {
+      type: Object,
+      default: function _default() {
+        return {};
+      },
+      validator: function validator() {
+        var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+        if (options.type && !utils_isValidType(options.type)) {
+          return false;
+        }
+
+        if (_typeof(options.breakpoints) === "object" && !Array.isArray(options.breakpoints)) {
+          var isValid = function isValid(breakpoint) {
+            return [isNumber(breakpoint), utils_isValidType(options.breakpoints[breakpoint].type) // add new validation here
+            ].every(function (v) {
+              return v;
+            });
+          };
+
+          return Object.keys(options.breakpoints).map(isValid).every(function (v) {
+            return v;
+          });
+        }
+
+        return true;
+      }
     }
   },
+  data: function data() {
+    return {
+      type: null,
+      defaultOption: {
+        type: TYPE.ENUM.FULL,
+        breakpoints: {}
+      }
+    };
+  },
   computed: {
@@ -386,4 +643,123 @@ firstPage: function firstPage() {
       });
+    },
+    wrapperClass: function wrapperClass() {
+      return [this.containerClass, this.typeClass, this.pageStateClass];
+    },
+    typeClass: function typeClass() {
+      return "vmq-pagination-".concat(this.type);
+    },
+    offsetPage: function offsetPage() {
+      var _mappingOffsetPage;
+
+      var defaultOffsetPage = 1;
+      var mappingOffsetPage = (_mappingOffsetPage = {}, _defineProperty(_mappingOffsetPage, TYPE.ENUM.COMPACT, 2), _defineProperty(_mappingOffsetPage, TYPE.ENUM.FULL, 3), _mappingOffsetPage);
+      return mappingOffsetPage[this.type] || defaultOffsetPage;
+    },
+    pageStateClass: function pageStateClass() {
+      var _PAGE_STATE$ENUM = PAGE_STATE.ENUM,
+          FIRST = _PAGE_STATE$ENUM.FIRST,
+          MIDDLE = _PAGE_STATE$ENUM.MIDDLE,
+          LAST = _PAGE_STATE$ENUM.LAST;
+      var pageState = this.pageState;
+
+      if (pageState === FIRST) {
+        return "vmq-page-first";
+      } else if (pageState === MIDDLE) {
+        return "vmq-page-middle";
+      } else if (pageState === LAST) {
+        return "vmq-page-last";
+      }
+
+      return null;
+    },
+    filterPaginators: function filterPaginators() {
+      var _this = this;
+
+      var isSimpleType = this.type === TYPE.ENUM.SIMPLE;
+      var isLastPage = this.currentPage === this.lastPage; // this function use to filter paginator
+
+      var isValidConditionType = function isValidConditionType(page) {
+        // filter only `simple` type
+        // such as: we have 50 total page and current page is 1
+        // it should return two array only, current and last page.
+        if (isSimpleType) {
+          var isCurrentOrLast = page.value === _this.currentPage || page.value === _this.lastPage;
+          return isCurrentOrLast;
+        }
+
+        return true;
+      };
+
+      var mapStatus = function mapStatus(page) {
+        var isDottedValue = page.value === "...";
+        var enable = true;
+        var clickable = true;
+
+        if (isSimpleType || isDottedValue) {
+          clickable = false;
+        }
+
+        return _objectSpread({}, page, {
+          enable: enable,
+          clickable: clickable
+        });
+      };
+
+      var applyButtonClass = function applyButtonClass(page) {
+        return _objectSpread({}, page, {
+          btnClass: ['vmq-pagination-link', {
+            'vmq-pagination-current-page': _this.currentPage === page.value,
+            'disabled': !page.enable,
+            'unclickable': !page.clickable,
+            'is-dotted': page.value === '...'
+          }, page.btnClass]
+        });
+      };
+
+      var results = this.paginators.filter(isValidConditionType).map(mapStatus).map(applyButtonClass); // for `simple` page, push `Of` to the middle of array.
+      // It will be like this `1 of 50`
+
+      if (isSimpleType && !isLastPage) {
+        results.splice(1, 0, {
+          value: "Of",
+          enable: true,
+          clickable: false,
+          btnClass: 'vmq-pagination-of unclickable'
+        });
+      }
+
+      return results;
+    },
+    mergeOptions: function mergeOptions() {
+      return _objectSpread({}, this.defaultOption, {}, this.options);
+    },
+    isSetBreakpoints: function isSetBreakpoints() {
+      return !!Object.keys(this.mergeOptions.breakpoints).length;
+    },
+    showText: function showText() {
+      return this.type === TYPE.ENUM.FULL;
+    },
+    pageState: function pageState() {
+      var found2Dotted = this.filterPaginators.filter(function (page) {
+        return page.value === "...";
+      }).length === 2;
+      var foundDottedAtIndex = this.filterPaginators.findIndex(function (page) {
+        return page.value === "...";
+      });
+
+      if (found2Dotted) {
+        return PAGE_STATE.ENUM.MIDDLE;
+      } else if (foundDottedAtIndex > 1) {
+        return PAGE_STATE.ENUM.FIRST;
+      } else if (foundDottedAtIndex === 1) {
+        return PAGE_STATE.ENUM.LAST;
+      }
+
+      return null;
     }
   },
+  mounted: function mounted() {
+    this.type = window.innerWidth ? this.getPaginationType(window.innerWidth) : this.mergeOptions.type;
+    window.addEventListener('resize', this.handleWindowResize);
+  },
   methods: {
@@ -398,3 +774,46 @@ nextPage: function nextPage() {
       this.$emit("onPageChange", n);
+    },
+    // this function use to get type, depends on screen width and breakpoints
+    // if match any then return `type`, if not return null
+    getMatchedType: function getMatchedType(screenWidth, breakpoints) {
+      var matchType = null;
+
+      for (var _i = 0, _Object$keys = Object.keys(breakpoints); _i < _Object$keys.length; _i++) {
+        var key = _Object$keys[_i];
+        // as specific breakpoints `key` number.
+
+        /**
+        	{
+        		480: {
+        			type: "simple"
+        		}
+        	}
+        **/
+        var breakpointWidth = key;
+
+        if (screenWidth < breakpointWidth) {
+          matchType = breakpoints[key].type;
+          break;
+        }
+      }
+
+      return matchType;
+    },
+    getPaginationType: function getPaginationType(screenWidth) {
+      var breakpoints = this.mergeOptions.breakpoints;
+      var matchedType = this.getMatchedType(screenWidth, breakpoints);
+      return matchedType || this.mergeOptions.type;
+    },
+    handleWindowResize: function handleWindowResize(e) {
+      if (!this.isSetBreakpoints) {
+        return;
+      }
+
+      var screenWidth = e.currentTarget.innerWidth; // if match any breakpoints then set as specific, if not set as default.
+
+      this.type = this.getPaginationType(screenWidth);
     }
+  },
+  destroyed: function destroyed() {
+    window.removeEventListener('resize', this.handleWindowResize);
   }
@@ -523,9 +942,9 @@ });
 /* harmony default export */ var Pagination = (component.exports);
-// CONCATENATED MODULE: ./src/main.js
+// CONCATENATED MODULE: ./src/index.js
 
-/* harmony default export */ var main = (Pagination);
+/* harmony default export */ var src_0 = (Pagination);
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
 
 
-/* harmony default export */ var entry_lib = __webpack_exports__["default"] = (main);
+/* harmony default export */ var entry_lib = __webpack_exports__["default"] = (src_0);
 
@@ -532,0 +951,0 @@

dist/@maqe-vue/pagination.umd.min.js

@@ -1,2 +0,2 @@
-(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t():"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["@maqe-vue/pagination"]=t():e["@maqe-vue/pagination"]=t()})("undefined"!==typeof self?self:this,(function(){return function(e){var t={};function n(a){if(t[a])return t[a].exports;var r=t[a]={i:a,l:!1,exports:{}};return e[a].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,a){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(n.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(a,r,function(t){return e[t]}.bind(null,r));return a},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s="fb15")}({"2aa4":function(e,t,n){},"5eaf":function(e,t,n){"use strict";var a=n("2aa4"),r=n.n(a);r.a},f6fd:function(e,t){(function(e){var t="currentScript",n=e.getElementsByTagName("script");t in e||Object.defineProperty(e,t,{get:function(){try{throw new Error}catch(a){var e,t=(/.*at [^\(]*\((.*):.+:.+\)$/gi.exec(a.stack)||[!1])[1];for(e in n)if(n[e].src==t||"interactive"==n[e].readyState)return n[e];return null}}})})(document)},fb15:function(e,t,n){"use strict";var a;(n.r(t),"undefined"!==typeof window)&&(n("f6fd"),(a=window.document.currentScript)&&(a=a.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))&&(n.p=a[1]));var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{class:["vmq-pagination-container",e.containerClass]},[n("ul",{staticClass:"vmq-pagination"},[n("li",[n("button",{staticClass:"vmq-pagination-prev",attrs:{disabled:e.isFirstPage},on:{click:function(t){return t.preventDefault(),e.prevPage(t)}}},[e._t("prev",[e._v("Prev")])],2)]),e._l(e.paginators,(function(t){return n("li",{key:t.id,staticClass:"vmq-pagination-button"},[n("a",{class:["vmq-pagination-link",{"vmq-pagination-current-page":e.currentPage===t.value,disabled:!t.enable}],attrs:{href:"#"},on:{click:function(n){return n.preventDefault(),e.setPage(t.value)}}},[e._v(" "+e._s(t.value)+" ")])])})),n("li",{class:["vmq-pagination-button vmq-pagination-desc",{"has-one-page":e.totalPage<=1}]},[e._v(" / "+e._s(e.totalPage)+" ")]),n("li",[n("button",{staticClass:"vmq-pagination-next",attrs:{disabled:e.isLastPage},on:{click:function(t){return t.preventDefault(),e.nextPage(t)}}},[e._t("next",[e._v("Next")])],2)])],2)])},i=[],o=function(e){var t=e.firstPage,n=void 0===t?1:t,a=e.lastPage,r=e.currentPage,i=e.offsetPage,o=void 0===i?2:i,u=[];if(a<2*o+1)for(var s=n;s<a+1;s+=1)u.push({value:s,enable:!0});else if(r-n<o+2){for(var l=n;l<Math.max(2*o,r+o);l+=1)u.push({value:l,enable:!0});u.push({value:"...",enable:!1}),u.push({value:a,enable:!0})}else if(a-r<o+2){u.push({value:n,enable:!0}),u.push({value:"...",enable:!1});for(var f=Math.min(a-2*o+2,r-o);f<a+1;f+=1)u.push({value:f,enable:!0})}else{u.push({value:n,enable:!0}),u.push({value:"...",enable:!1});for(var c=r-o+1;c<r+o;c+=1)u.push({value:c,enable:!0});u.push({value:"...",enable:!1}),u.push({value:a,enable:!0})}return u},u={name:"Pagination",props:{totalPage:{type:Number,default:1},offsetPage:{type:Number,default:2},value:{type:Number,default:1},containerClass:{type:String,default:""}},computed:{firstPage:function(){return 1},lastPage:function(){return this.totalPage},isFirstPage:function(){return this.currentPage===this.firstPage},isLastPage:function(){return this.currentPage===this.lastPage},currentPage:function(){return this.value},paginators:function(){return o({firstPage:this.firstPage,lastPage:this.lastPage,currentPage:this.currentPage,offsetPage:this.offsetPage})}},methods:{nextPage:function(){this.$emit("onPageChange",this.value+1)},prevPage:function(){this.$emit("onPageChange",this.value-1)},setPage:function(e){this.$emit("onPageChange",e)}}},s=u;n("5eaf");function l(e,t,n,a,r,i,o,u){var s,l="function"===typeof e?e.options:e;if(t&&(l.render=t,l.staticRenderFns=n,l._compiled=!0),a&&(l.functional=!0),i&&(l._scopeId="data-v-"+i),o?(s=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},l._ssrRegister=s):r&&(s=u?function(){r.call(this,this.$root.$options.shadowRoot)}:r),s)if(l.functional){l._injectStyles=s;var f=l.render;l.render=function(e,t){return s.call(t),f(e,t)}}else{var c=l.beforeCreate;l.beforeCreate=c?[].concat(c,s):[s]}return{exports:e,options:l}}var f=l(s,r,i,!1,null,null,null),c=f.exports,p=c;t["default"]=p}})}));
+(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["@maqe-vue/pagination"]=e():t["@maqe-vue/pagination"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fb15")}({"2aa4":function(t,e,n){},"5eaf":function(t,e,n){"use strict";var r=n("2aa4"),i=n.n(r);i.a},8875:function(t,e,n){var r,i,a;(function(n,o){i=[],r=o,a="function"===typeof r?r.apply(e,i):r,void 0===a||(t.exports=a)})("undefined"!==typeof self&&self,(function(){function t(){if(document.currentScript)return document.currentScript;try{throw new Error}catch(f){var t,e,n,r=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,i=/@([^@]*):(\d+):(\d+)\s*$/gi,a=r.exec(f.stack)||i.exec(f.stack),o=a&&a[1]||!1,u=a&&a[2]||!1,s=document.location.href.replace(document.location.hash,""),l=document.getElementsByTagName("script");o===s&&(t=document.documentElement.outerHTML,e=new RegExp("(?:[^\\n]+?\\n){0,"+(u-2)+"}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*","i"),n=t.replace(e,"$1").trim());for(var c=0;c<l.length;c++){if("interactive"===l[c].readyState)return l[c];if(l[c].src===o)return l[c];if(o===s&&l[c].innerHTML&&l[c].innerHTML.trim()===n)return l[c]}return null}}return t}))},fb15:function(t,e,n){"use strict";if(n.r(e),"undefined"!==typeof window){var r=window.document.currentScript,i=n("8875");r=i(),"currentScript"in document||Object.defineProperty(document,"currentScript",{get:i});var a=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);a&&(n.p=a[1])}var o=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{class:["vmq-pagination-container"].concat(t.wrapperClass)},[n("ul",{staticClass:"vmq-pagination"},[n("li",[n("button",{staticClass:"vmq-pagination-prev",attrs:{disabled:t.isFirstPage},on:{click:function(e){return e.preventDefault(),t.prevPage(e)}}},[n("div",{staticClass:"text"},[t._t("prev",[n("img",{attrs:{src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAABGdBTUEAALGPC/xhBQAAACBjSFJN\n\t\t\t\t\t\t\tAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElN\n\t\t\t\t\t\t\tRQfkBBQKGg4x+Mc2AAABjElEQVRYw7XXO0/CUBjG8b9tKCwCizcwUSOYaIy7q4mDKzXR7+i38BOo\n\t\t\t\t\t\t\ti4ubi5EetGpi1CBuROE9p+dmt74nPD+e3ijwz1tqXG3zzTgMWNCutDhmgy+uuWQSv0GLM5aBlA5t\n\t\t\t\t\t\t\t7mIDTc5ZnO4thRAycMT6n/0AIhVnJyQzM29CAiZs0pybehLyIXplV7i+vAgZKFH04xC6y3SEYicG\n\t\t\t\t\t\t\tob+TIxGmR4WKQZifRYpR6LlIK9aDiSoAFE8hRDUARQhhA0DBMz0/wg4IIGwBKCh9CHsAhpT0hbmR\n\t\t\t\t\t\t\tcAG8CDcAhrzQcyFcAROhUDEAGPLBljDPuJ0fJpVx81uDPXFeSEN3oMEpK8L8k6sYgD7+gjIcqBvi\n\t\t\t\t\t\t\tH+SPuAAe8aZ3Uyl+1TXevkGd3CfetkGdnDWfeLsGmX+8DRAUX32IMnI6/vFVDTIGYfHmBhkDumHx\n\t\t\t\t\t\t\tpga1GPH6BjXyGPG6BpG+vR44nPmP5h0vAyn7seJlYMx7rHjdb/KY7TjxOuCR5NdZCIjXv1XcT4mg\n\t\t\t\t\t\t\tePOd3OWAkhve/OPhB7oEhrCYVbz9AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTA0LTIwVDEwOjI2\n\t\t\t\t\t\t\tOjE0KzAzOjAw0+VYRAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wNC0yMFQxMDoyNjoxNCswMzow\n\t\t\t\t\t\t\tMKK44PgAAAAASUVORK5CYII="}}),t.showText?n("span",[t._v(" Prev ")]):t._e()])],2)])]),t._l(t.filterPaginators,(function(e,r){return n("li",{key:r,staticClass:"vmq-pagination-button"},[n("button",{class:e.btnClass,on:{click:function(n){return n.preventDefault(),t.setPage(e.value)}}},[n("span",{staticClass:"text"},[t._v(" "+t._s(e.value)+" ")])])])})),n("li",[n("button",{staticClass:"vmq-pagination-next",attrs:{disabled:t.isLastPage},on:{click:function(e){return e.preventDefault(),t.nextPage(e)}}},[n("div",{staticClass:"text"},[t._t("next",[t.showText?n("span",[t._v(" Next ")]):t._e(),n("img",{attrs:{src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAABGdBTUEAALGPC/xhBQAAACBjSFJN\n\t\t\t\t\t\tAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElN\n\t\t\t\t\t\tRQfkBBQKGg4x+Mc2AAABjElEQVRYw7XXO0/CUBjG8b9tKCwCizcwUSOYaIy7q4mDKzXR7+i38BOo\n\t\t\t\t\t\ti4ubi5EetGpi1CBuROE9p+dmt74nPD+e3ijwz1tqXG3zzTgMWNCutDhmgy+uuWQSv0GLM5aBlA5t\n\t\t\t\t\t\t7mIDTc5ZnO4thRAycMT6n/0AIhVnJyQzM29CAiZs0pybehLyIXplV7i+vAgZKFH04xC6y3SEYicG\n\t\t\t\t\t\tob+TIxGmR4WKQZifRYpR6LlIK9aDiSoAFE8hRDUARQhhA0DBMz0/wg4IIGwBKCh9CHsAhpT0hbmR\n\t\t\t\t\t\tcAG8CDcAhrzQcyFcAROhUDEAGPLBljDPuJ0fJpVx81uDPXFeSEN3oMEpK8L8k6sYgD7+gjIcqBvi\n\t\t\t\t\t\tH+SPuAAe8aZ3Uyl+1TXevkGd3CfetkGdnDWfeLsGmX+8DRAUX32IMnI6/vFVDTIGYfHmBhkDumHx\n\t\t\t\t\t\tpga1GPH6BjXyGPG6BpG+vR44nPmP5h0vAyn7seJlYMx7rHjdb/KY7TjxOuCR5NdZCIjXv1XcT4mg\n\t\t\t\t\t\tePOd3OWAkhve/OPhB7oEhrCYVbz9AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTA0LTIwVDEwOjI2\n\t\t\t\t\t\tOjE0KzAzOjAw0+VYRAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wNC0yMFQxMDoyNjoxNCswMzow\n\t\t\t\t\t\tMKK44PgAAAAASUVORK5CYII="}})])],2)])])],2)])},u=[],s=function(t){var e=t.firstPage,n=void 0===e?1:e,r=t.lastPage,i=t.currentPage,a=t.offsetPage,o=void 0===a?2:a,u=[],s=2*o+2,l={nearFirst:!1,middle:!1,nearLast:!1};if(r<2*o+1)for(var c=n;c<r+1;c+=1)u.push({value:c,enable:!0});else if(i-n<o+2){l.nearFirst=!0;for(var f=n;f<Math.max(2*o,i+o);f+=1)u.push({value:f,enable:!0});u.push({value:"...",enable:!1}),u.push({value:r,enable:!0})}else if(r-i<o+2){l.nearLast=!0,u.push({value:n,enable:!0}),u.push({value:"...",enable:!1});for(var p=Math.min(r-2*o+2,i-o);p<r+1;p+=1)u.push({value:p,enable:!0})}else{l.middle=!0,u.push({value:n,enable:!0}),u.push({value:"...",enable:!1});for(var A=i-o+1;A<i+o;A+=1)u.push({value:A,enable:!0});u.push({value:"...",enable:!1}),u.push({value:r,enable:!0})}if(r<s){u.length=0;for(var v=0;v<r;v++)u.push({value:v+1,enable:!0})}else if(l.nearFirst){if(u.length<s){var g=u.findIndex((function(t){return"..."===t.value}));-1!==g&&u.splice(g,0,{value:u[g-1].value+1,enable:!0})}var d=u.findIndex((function(t){return t.value===i})),h=u.filter((function(t,e){return t.value!==n&&e<d})).length;if(h>o-1){var b,y=d-o,m="..."===(null===(b=u[y])||void 0===b?void 0:b.value);m||(u[y].value="...",u[y].enable=!1)}}else if(l.nearLast){var P,C=i-(o-1),O=i+(o-1),E=u.reduce((function(t,e,i){var a=e.value;return(a<C||a>O)&&a!==n&&a!==r&&"..."!==a&&t.push(i),t}),[]);while(E.length)u.splice(E.pop(),1);if((null===(P=u[u.length-2])||void 0===P?void 0:P.value)+1<r)u.splice(u.length-1,0,{value:"...",enable:!1});else if(u.length<s){var M,j=s-u.length,w=u.findIndex((function(t){return"..."===t.value})),R=null===(M=u[w+1])||void 0===M?void 0:M.value;if(void 0!==R)for(var D=0;D<j;D++)u.splice(w+1,0,{value:R-1-D,enable:!1})}}var S=[];u.forEach((function(t,e){if("..."===t.value){var n,r,i=null===(n=u[e+1])||void 0===n?void 0:n.value,a=null===(r=u[e-1])||void 0===r?void 0:r.value;Number.isInteger(i)&&Number.isInteger(a)&&i-a===1&&S.push(e)}}));while(S.length)u.splice(S.pop(),1);return u},l=Object.freeze({ENUM:{FULL:"full",COMPACT:"compact",SIMPLE:"simple"},get values(){return Object.values(this.ENUM)}}),c=Object.freeze({ENUM:{FIRST:"FIRST",MIDDLE:"MIDDLE",LAST:"LAST"},get values(){return Object.values(this.ENUM)}}),f=function(t){return l.values.includes(t)},p=function(t){return Number.isInteger(1*t)};function A(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function v(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?A(Object(n),!0).forEach((function(e){g(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):A(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function g(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function d(t){return d="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"===typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},d(t)}var h={name:"Pagination",props:{totalPage:{type:Number,default:1},value:{type:Number,default:1},containerClass:{type:String,default:""},options:{type:Object,default:function(){return{}},validator:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(t.type&&!f(t.type))return!1;if("object"===d(t.breakpoints)&&!Array.isArray(t.breakpoints)){var e=function(e){return[p(e),f(t.breakpoints[e].type)].every((function(t){return t}))};return Object.keys(t.breakpoints).map(e).every((function(t){return t}))}return!0}}},data:function(){return{type:null,defaultOption:{type:l.ENUM.FULL,breakpoints:{}}}},computed:{firstPage:function(){return 1},lastPage:function(){return this.totalPage},isFirstPage:function(){return this.currentPage===this.firstPage},isLastPage:function(){return this.currentPage===this.lastPage},currentPage:function(){return this.value},paginators:function(){return s({firstPage:this.firstPage,lastPage:this.lastPage,currentPage:this.currentPage,offsetPage:this.offsetPage})},wrapperClass:function(){return[this.containerClass,this.typeClass,this.pageStateClass]},typeClass:function(){return"vmq-pagination-".concat(this.type)},offsetPage:function(){var t,e=1,n=(t={},g(t,l.ENUM.COMPACT,2),g(t,l.ENUM.FULL,3),t);return n[this.type]||e},pageStateClass:function(){var t=c.ENUM,e=t.FIRST,n=t.MIDDLE,r=t.LAST,i=this.pageState;return i===e?"vmq-page-first":i===n?"vmq-page-middle":i===r?"vmq-page-last":null},filterPaginators:function(){var t=this,e=this.type===l.ENUM.SIMPLE,n=this.currentPage===this.lastPage,r=function(n){if(e){var r=n.value===t.currentPage||n.value===t.lastPage;return r}return!0},i=function(t){var n="..."===t.value,r=!0,i=!0;return(e||n)&&(i=!1),v({},t,{enable:r,clickable:i})},a=function(e){return v({},e,{btnClass:["vmq-pagination-link",{"vmq-pagination-current-page":t.currentPage===e.value,disabled:!e.enable,unclickable:!e.clickable,"is-dotted":"..."===e.value},e.btnClass]})},o=this.paginators.filter(r).map(i).map(a);return e&&!n&&o.splice(1,0,{value:"Of",enable:!0,clickable:!1,btnClass:"vmq-pagination-of unclickable"}),o},mergeOptions:function(){return v({},this.defaultOption,{},this.options)},isSetBreakpoints:function(){return!!Object.keys(this.mergeOptions.breakpoints).length},showText:function(){return this.type===l.ENUM.FULL},pageState:function(){var t=2===this.filterPaginators.filter((function(t){return"..."===t.value})).length,e=this.filterPaginators.findIndex((function(t){return"..."===t.value}));return t?c.ENUM.MIDDLE:e>1?c.ENUM.FIRST:1===e?c.ENUM.LAST:null}},mounted:function(){this.type=window.innerWidth?this.getPaginationType(window.innerWidth):this.mergeOptions.type,window.addEventListener("resize",this.handleWindowResize)},methods:{nextPage:function(){this.$emit("onPageChange",this.value+1)},prevPage:function(){this.$emit("onPageChange",this.value-1)},setPage:function(t){this.$emit("onPageChange",t)},getMatchedType:function(t,e){for(var n=null,r=0,i=Object.keys(e);r<i.length;r++){var a=i[r],o=a;if(t<o){n=e[a].type;break}}return n},getPaginationType:function(t){var e=this.mergeOptions.breakpoints,n=this.getMatchedType(t,e);return n||this.mergeOptions.type},handleWindowResize:function(t){if(this.isSetBreakpoints){var e=t.currentTarget.innerWidth;this.type=this.getPaginationType(e)}}},destroyed:function(){window.removeEventListener("resize",this.handleWindowResize)}},b=h;n("5eaf");function y(t,e,n,r,i,a,o,u){var s,l="function"===typeof t?t.options:t;if(e&&(l.render=e,l.staticRenderFns=n,l._compiled=!0),r&&(l.functional=!0),a&&(l._scopeId="data-v-"+a),o?(s=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},l._ssrRegister=s):i&&(s=u?function(){i.call(this,this.$root.$options.shadowRoot)}:i),s)if(l.functional){l._injectStyles=s;var c=l.render;l.render=function(t,e){return s.call(e),c(t,e)}}else{var f=l.beforeCreate;l.beforeCreate=f?[].concat(f,s):[s]}return{exports:t,options:l}}var m=y(b,o,u,!1,null,null,null),P=m.exports,C=P;e["default"]=C}})}));
 //# sourceMappingURL=pagination.umd.min.js.map

package.json

 {
   "name": "@maqe-vue/pagination",
-  "version": "1.0.0",
+  "version": "1.0.1-beta.0",
   "main": "./dist/@maqe-vue/pagination.common.js",
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --open",
     "build": "vue-cli-service build",
-    "build-lib": "vue-cli-service build --target lib --name @maqe-vue/pagination src/main.js",
+    "build-lib": "vue-cli-service build --target lib --name @maqe-vue/pagination src/index.js",
     "lint": "vue-cli-service lint"
@@ -10,0 +10,0 @@ },

README.md

@@ -107,7 +107,3 @@ # @maqe-vue/pagination
 .custom-pagination {
-	.vmq-pagination-current-page,
-	.vmq-pagination-current-page:hover,
-	.vmq-pagination-link:hover {
-		background-color: #ddd;
-	}
+	--vmq-pagination-color: #ddd;
 }
@@ -114,0 +110,0 @@ </style>

src/assets/js/pagination.js

 export const getPaginations = ({ firstPage = 1, lastPage, currentPage, offsetPage = 2 }) => {
 	const paginators = [];
+	const expectLength = offsetPage * 2 + 2;
+	const state = {
+		nearFirst: false,
+		middle: false,
+		nearLast: false
+	}
 
@@ -13,2 +19,4 @@ if (lastPage < (offsetPage * 2) + 1) {
 		// if currentPage near firstPage
+		state.nearFirst = true
+
 		for (
@@ -36,2 +44,4 @@ let i = firstPage;
 		// if currentPage near lastPage
+		state.nearLast = true
+
 		paginators.push({
@@ -59,2 +69,4 @@ value: firstPage,
 		// if currentPage in the middle
+		state.middle = true
+
 		paginators.push({
@@ -89,2 +101,90 @@ value: firstPage,
 	}
+
+	if(lastPage < expectLength) {
+		paginators.length = 0
+
+		for(let i = 0; i < lastPage; i++) {
+			paginators.push({
+				value: i + 1,
+				enable: true
+			})
+		}
+	} else if(state.nearFirst) {
+		if(paginators.length < expectLength) {
+			const dottedAtIndex = paginators.findIndex((page) => page.value === '...')
+			
+			if(dottedAtIndex !== -1) {
+				paginators.splice(dottedAtIndex, 0, {
+					value: paginators[dottedAtIndex-1].value + 1,
+					enable: true
+				})
+			}			
+		}
+
+		const currentPageAtIndex = paginators.findIndex((page) => page.value === currentPage)
+		const prevPageCount = paginators.filter((page, index) => page.value !== firstPage && index < currentPageAtIndex).length
+
+		if(prevPageCount > (offsetPage - 1)) {
+			const replaceIndex = currentPageAtIndex - (offsetPage)
+			const expectDotted = paginators[replaceIndex]?.value === '...'
+
+			if(!expectDotted) {
+				paginators[replaceIndex].value = "...";
+				paginators[replaceIndex].enable = false;
+			}
+		}
+	} else if(state.nearLast) {
+		const startedAtPage = currentPage - (offsetPage - 1)
+		const stopAtPage = currentPage + (offsetPage - 1);
+		let removeIndexs = paginators.reduce((indexs, { value }, index) => {
+			if((value < startedAtPage || value > stopAtPage) && value !== firstPage && value !== lastPage && value !== '...') {
+				indexs.push(index)
+			}
+			return indexs;
+		}, []);
+
+		while(removeIndexs.length) {
+			paginators.splice(removeIndexs.pop(), 1);
+		}
+
+		if(paginators[paginators.length-2]?.value + 1 < lastPage) {
+			paginators.splice(paginators.length-1, 0, {
+				value: "...",
+				enable: false
+			})
+		} else if(paginators.length < expectLength) {
+			const pageNumberCountNeededToAdd = expectLength - paginators.length
+			const dottedAtIndex = paginators.findIndex((page) => page.value === '...')
+			const afterDottedNumber = paginators[dottedAtIndex+1]?.value
+			
+			if(afterDottedNumber !== undefined) {
+				for(let i = 0; i < pageNumberCountNeededToAdd; i++) {
+					paginators.splice(dottedAtIndex + 1, 0, {
+						value: afterDottedNumber - 1 - i,
+						enable: false
+					})
+				}
+			}
+		}
+	}
+
+	let removeIndexs = []
+
+	paginators.forEach((page, index) => {
+		if(page.value === "...") {
+			const next = paginators[index+1]?.value;
+			const prev = paginators[index-1]?.value;
+			
+			if(Number.isInteger(next) && Number.isInteger(prev)) {
+				if(next - prev === 1) {
+					removeIndexs.push(index)
+				}
+			}
+		}
+	})
+
+	while(removeIndexs.length) {
+		paginators.splice(removeIndexs.pop(), 1);
+	}
+
 	return paginators;
@@ -91,0 +191,0 @@ };

src/main.js

@@ -1,3 +0,6 @@
-import Pagination from "./components/Pagination.vue";
+import Vue from "vue";
+import All from "./components/demo/All.vue";
 
-export default Pagination;
+new Vue({
+	render: (h) => h(All)
+}).$mount("#app");

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

268491

increased by101.15%

Number of package files

23

increased by27.78%

Lines of code

1963

increased by84.49%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of lines in readme file

130

decreased by-2.99%

No dependency changes