@varlet/ui 1.23.3-alpha.1 → 1.23.4-alpha.16

package/lib/pagination/Pagination.js

@@ -0,0 +1,373 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _menu = _interopRequireDefault(require("../menu"));
+
+var _ripple = _interopRequireDefault(require("../ripple"));
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _cell = _interopRequireDefault(require("../cell"));
+
+var _input = _interopRequireDefault(require("../input"));
+
+var _vue = require("vue");
+
+var _porps = require("./porps");
+
+var _shared = require("../utils/shared");
+
+var _locale = require("../locale");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var-pagination"
+};
+var _hoisted_2 = ["item-mode", "onClick"];
+var _hoisted_3 = {
+  key: 4,
+  class: "var-pagination__total"
+};
+
+function render(_ctx, _cache) {
+  var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
+
+  var _component_var_input = (0, _vue.resolveComponent)("var-input");
+
+  var _component_var_cell = (0, _vue.resolveComponent)("var-cell");
+
+  var _component_var_menu = (0, _vue.resolveComponent)("var-menu");
+
+  var _directive_ripple = (0, _vue.resolveDirective)("ripple");
+
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("ul", _hoisted_1, [(0, _vue.withDirectives)((0, _vue.createElementVNode)("li", {
+    class: (0, _vue.normalizeClass)(["var-pagination__item var-pagination__prev", {
+      'var-pagination__item-disabled': _ctx.current <= 1 || _ctx.disabled,
+      'var-pagination__item-hover': _ctx.simple,
+      'var-elevation--2': !_ctx.simple
+    }]),
+    onClick: _cache[0] || (_cache[0] = $event => _ctx.clickItem('prev'))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "prev", {}, () => [(0, _vue.createVNode)(_component_var_icon, {
+    name: "chevron-left"
+  })])], 2
+  /* CLASS */
+  ), [[_directive_ripple, {
+    disabled: _ctx.current <= 1 || _ctx.disabled
+  }]]), _ctx.simple ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(["var-pagination__simple", {
+      'var-pagination__item-disabled': _ctx.disabled
+    }])
+  }, [(0, _vue.createVNode)(_component_var_input, {
+    modelValue: _ctx.simpleValue,
+    "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.simpleValue = $event),
+    disabled: _ctx.disabled,
+    "var-pagination-cover": "",
+    onBlur: _cache[2] || (_cache[2] = $event => _ctx.setPage('simple', _ctx.simpleValue, $event)),
+    onKeydown: _cache[3] || (_cache[3] = (0, _vue.withKeys)($event => _ctx.setPage('simple', _ctx.simpleValue, $event), ["enter"]))
+  }, null, 8
+  /* PROPS */
+  , ["modelValue", "disabled"]), (0, _vue.createElementVNode)("span", null, "/ " + (0, _vue.toDisplayString)(_ctx.pageCount), 1
+  /* TEXT */
+  )], 2
+  /* CLASS */
+  )) : ((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, {
+    key: 1
+  }, (0, _vue.renderList)(_ctx.pageList, (item, index) => {
+    return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
+      key: _ctx.toNumber(item) + index,
+      "item-mode": _ctx.getMode(item, index),
+      class: (0, _vue.normalizeClass)(["var-pagination__item var-elevation--2", {
+        'var-pagination__item-active': item === _ctx.current && !_ctx.disabled,
+        'var-pagination__item-hide': _ctx.isHideEllipsis(item, index),
+        'var-pagination__item-disabled': _ctx.disabled,
+        'var-pagination__item-disabled-active': item === _ctx.current && _ctx.disabled
+      }]),
+      onClick: $event => _ctx.clickItem(item, index)
+    }, [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(item), 1
+    /* TEXT */
+    )], 10
+    /* CLASS, PROPS */
+    , _hoisted_2)), [[_directive_ripple, {
+      disabled: _ctx.disabled
+    }]]);
+  }), 128
+  /* KEYED_FRAGMENT */
+  )), (0, _vue.withDirectives)((0, _vue.createElementVNode)("li", {
+    class: (0, _vue.normalizeClass)(["var-pagination__item var-pagination__next", {
+      'var-pagination__item-disabled': _ctx.current >= _ctx.pageCount || _ctx.disabled,
+      'var-pagination__item-hover': _ctx.simple,
+      'var-elevation--2': !_ctx.simple
+    }]),
+    onClick: _cache[4] || (_cache[4] = $event => _ctx.clickItem('next'))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "next", {}, () => [(0, _vue.createVNode)(_component_var_icon, {
+    name: "chevron-right"
+  })])], 2
+  /* CLASS */
+  ), [[_directive_ripple, {
+    disabled: _ctx.current >= _ctx.pageCount || _ctx.disabled
+  }]]), _ctx.showSizeChanger ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
+    key: 2,
+    class: (0, _vue.normalizeClass)(["var-pagination__size", {
+      'var-pagination__item-disabled': _ctx.disabled
+    }])
+  }, [(0, _vue.createVNode)(_component_var_menu, {
+    show: _ctx.menuVisible,
+    "onUpdate:show": _cache[6] || (_cache[6] = $event => _ctx.menuVisible = $event),
+    "offset-x": -4
+  }, {
+    menu: (0, _vue.withCtx)(() => [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.sizeOption, (option, index) => {
+      return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_cell, {
+        class: (0, _vue.normalizeClass)(["var-pagination__list", {
+          'var-pagination__list-active': _ctx.size === option
+        }]),
+        key: index,
+        onClick: $event => _ctx.clickSize(option)
+      }, {
+        default: (0, _vue.withCtx)(() => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(option) + (0, _vue.toDisplayString)(_ctx.pack.paginationItem) + " / " + (0, _vue.toDisplayString)(_ctx.pack.paginationPage), 1
+        /* TEXT */
+        )]),
+        _: 2
+        /* DYNAMIC */
+
+      }, 1032
+      /* PROPS, DYNAMIC_SLOTS */
+      , ["class", "onClick"])), [[_directive_ripple]]);
+    }), 128
+    /* KEYED_FRAGMENT */
+    ))]),
+    default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", {
+      class: "var-pagination__size-open",
+      style: {
+        "display": "flex"
+      },
+      onClick: _cache[5] || (_cache[5] = (...args) => _ctx.showMenu && _ctx.showMenu(...args))
+    }, [(0, _vue.createElementVNode)("span", null, (0, _vue.toDisplayString)(_ctx.size) + (0, _vue.toDisplayString)(_ctx.pack.paginationItem) + " / " + (0, _vue.toDisplayString)(_ctx.pack.paginationPage), 1
+    /* TEXT */
+    ), (0, _vue.createVNode)(_component_var_icon, {
+      class: "var-pagination__size-open-icon",
+      "var-pagination-cover": "",
+      name: "menu-down"
+    })])]),
+    _: 1
+    /* STABLE */
+
+  }, 8
+  /* PROPS */
+  , ["show"])], 2
+  /* CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true), _ctx.showQuickJumper && !_ctx.simple ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
+    key: 3,
+    class: (0, _vue.normalizeClass)(["var-pagination__quickly", {
+      'var-pagination__item-disabled': _ctx.disabled
+    }])
+  }, [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.pack.paginationJump) + " ", 1
+  /* TEXT */
+  ), (0, _vue.createVNode)(_component_var_input, {
+    modelValue: _ctx.inputValue,
+    "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => _ctx.inputValue = $event),
+    disabled: _ctx.disabled,
+    "var-pagination-cover": "",
+    onBlur: _cache[8] || (_cache[8] = $event => _ctx.setPage('quick', _ctx.inputValue, $event)),
+    onKeydown: _cache[9] || (_cache[9] = (0, _vue.withKeys)($event => _ctx.setPage('quick', _ctx.inputValue, $event), ["enter"]))
+  }, null, 8
+  /* PROPS */
+  , ["modelValue", "disabled"])], 2
+  /* CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true), _ctx.totalText ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", _hoisted_3, (0, _vue.toDisplayString)(_ctx.totalText), 1
+  /* TEXT */
+  )) : (0, _vue.createCommentVNode)("v-if", true)]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarPagination',
+  components: {
+    VarMenu: _menu.default,
+    VarIcon: _icon.default,
+    VarCell: _cell.default,
+    VarInput: _input.default
+  },
+  directives: {
+    Ripple: _ripple.default
+  },
+  props: _porps.props,
+
+  setup(props) {
+    var menuVisible = (0, _vue.ref)(false);
+    var inputValue = (0, _vue.ref)('');
+    var simpleValue = (0, _vue.ref)('1');
+    var isHideEllipsisHead = (0, _vue.ref)(false);
+    var isHideEllipsisTail = (0, _vue.ref)(false);
+    var current = (0, _vue.ref)((0, _shared.toNumber)(props.current) || 1);
+    var size = (0, _vue.ref)((0, _shared.toNumber)(props.size) || 10);
+    var pageList = (0, _vue.ref)([]);
+    var activePosition = (0, _vue.computed)(() => Math.ceil(props.maxPagerCount / 2));
+    var pageCount = (0, _vue.computed)(() => Math.ceil((0, _shared.toNumber)(props.total) / (0, _shared.toNumber)(size.value)));
+    var range = (0, _vue.computed)(() => {
+      var start = size.value * (current.value - 1) + 1;
+      var end = Math.min(size.value * current.value, (0, _shared.toNumber)(props.total));
+      return [start, end];
+    });
+    var totalText = (0, _vue.computed)(() => {
+      if (!props.showTotal) return '';
+      return props.showTotal((0, _shared.toNumber)(props.total), range.value);
+    });
+
+    var isHideEllipsis = (item, index) => {
+      if ((0, _shared.isNumber)(item)) return false;
+      return index === 1 ? isHideEllipsisHead.value : isHideEllipsisTail.value;
+    };
+
+    var getMode = (item, index) => {
+      if ((0, _shared.isNumber)(item)) return 'basic';
+      return index === 1 ? 'head' : 'tail';
+    };
+
+    var clickItem = (item, index) => {
+      if (item === current.value || props.disabled) return;
+      if ((0, _shared.isNumber)(item)) current.value = item;else if (item === 'prev') current.value > 1 && (current.value -= 1);else if (item === 'next') current.value < pageCount.value && (current.value += 1);else if (item === '...') {
+        if (index === 1) {
+          current.value = Math.max(current.value - props.maxPagerCount, 1);
+        } else {
+          current.value = Math.min(current.value + props.maxPagerCount, pageCount.value);
+        }
+      }
+    };
+
+    var showMenu = () => {
+      if (props.disabled) return;
+      menuVisible.value = true;
+    };
+
+    var clickSize = option => {
+      size.value = option;
+      menuVisible.value = false;
+    };
+
+    var isValidatePage = value => {
+      var pattern = /^[1-9][0-9]*$/;
+      return pattern.test(value);
+    };
+
+    var setPage = (type, value, event) => {
+      ;
+      event.target.blur();
+
+      if (isValidatePage(value)) {
+        var valueNum = (0, _shared.toNumber)(value);
+
+        if (valueNum > pageCount.value) {
+          valueNum = pageCount.value;
+          simpleValue.value = "" + valueNum;
+        }
+
+        if (valueNum !== current.value) current.value = valueNum;
+      }
+
+      if (type === 'quick') inputValue.value = '';
+      if (type === 'simple' && !isValidatePage(value)) simpleValue.value = "" + current.value;
+    };
+
+    (0, _vue.watch)([() => props.current, () => props.size], ([newCurrent, newSize]) => {
+      current.value = (0, _shared.toNumber)(newCurrent) || 1;
+      size.value = (0, _shared.toNumber)(newSize || 10);
+    });
+    (0, _vue.watch)([current, pageCount], ([newCurrent, newCount], [oldCurrent, oldCount]) => {
+      if (newCurrent > newCount) {
+        current.value = newCount;
+        return;
+      }
+
+      var list = [];
+      var {
+        maxPagerCount
+      } = props;
+      var rEllipseSign = newCount - (maxPagerCount - activePosition.value) - 1;
+      simpleValue.value = "" + newCurrent;
+
+      if (newCount - 2 > maxPagerCount) {
+        if (oldCurrent === undefined || newCount !== oldCount) {
+          for (var i = 2; i < maxPagerCount + 2; i++) {
+            list.push(i);
+          }
+        } // 左边不需要出现省略符号占位
+
+
+        if (newCurrent <= maxPagerCount && newCurrent < rEllipseSign) {
+          list = [];
+
+          for (var _i = 1; _i < maxPagerCount + 1; _i++) {
+            list.push(_i + 1);
+          }
+
+          isHideEllipsisHead.value = true;
+          isHideEllipsisTail.value = false;
+        } // 两边都需要出现省略符号占位
+
+
+        if (newCurrent > maxPagerCount && newCurrent < rEllipseSign) {
+          list = [];
+
+          for (var _i2 = 1; _i2 < maxPagerCount + 1; _i2++) {
+            list.push(newCurrent + _i2 - activePosition.value);
+          } // 针对 maxPagerCount===1 的特殊处理
+
+
+          isHideEllipsisHead.value = newCurrent === 2 && maxPagerCount === 1;
+          isHideEllipsisTail.value = false;
+        } // 右边不需要出现省略符号占位
+
+
+        if (newCurrent >= rEllipseSign) {
+          list = [];
+
+          for (var _i3 = 1; _i3 < maxPagerCount + 1; _i3++) {
+            list.push(newCount - (maxPagerCount - _i3) - 1);
+          }
+
+          isHideEllipsisHead.value = false;
+          isHideEllipsisTail.value = true;
+        }
+
+        list = [1, '...', ...list, '...', newCount];
+      } else {
+        for (var _i4 = 1; _i4 <= newCount; _i4++) {
+          list.push(_i4);
+        }
+      }
+
+      pageList.value = list;
+      if (oldCurrent !== undefined) props.onChange == null ? void 0 : props.onChange(newCurrent, size.value);
+    }, {
+      immediate: true
+    });
+    return {
+      pack: _locale.pack,
+      current,
+      menuVisible,
+      size,
+      pageCount,
+      pageList,
+      inputValue,
+      simpleValue,
+      totalText,
+      getMode,
+      isHideEllipsis,
+      clickItem,
+      showMenu,
+      clickSize,
+      setPage,
+      toNumber: _shared.toNumber
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/pagination/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._PaginationComponent = void 0;
+
+var _Pagination = _interopRequireDefault(require("./Pagination.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_Pagination.default.install = function (app) {
+  app.component(_Pagination.default.name, _Pagination.default);
+};
+
+var _PaginationComponent = _Pagination.default;
+exports._PaginationComponent = _PaginationComponent;
+var _default = _Pagination.default;
+exports.default = _default;

package/lib/pagination/pagination.css

@@ -0,0 +1 @@
+:root { --pagination-font-size: var(--font-size-md); --pagination-active-color: #fff; --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: #edf5ff; --pagination-total-margin: 0 12px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #edf5ff; --pagination-list-active-color: var(--color-primary); --pagination-input-width: 32px; --pagination-simple-padding: 0 0 2px 0; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px;}.pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; margin: 0; font-size: var(--pagination-font-size); padding: 0;}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item-active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item-disabled-active { background: var(--pagination-bg-disabled-color);}.var-pagination__item-hide { display: none;}.var-pagination__item-disabled { cursor: default !important; color: var(--pagination-disabled-color);}.var-pagination__item-disabled:hover { background-color: unset;}.var-pagination__item-hover:hover { background: inherit;}.var-pagination__prev { margin-left: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin);}.var-pagination__size-open { display: flex; align-items: center; cursor: pointer;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer; transition: all 0.25s;}.var-pagination__list:hover { color: var(--pagination-list-active-color); background-color: var(--pagination-hover-bg-color);}.var-pagination__list-active { background-color: var(--pagination-list-active-bg-color) !important; color: var(--pagination-list-active-color);}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-input__wrap,.var-pagination__simple [var-pagination-cover] .var-input__wrap { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center;}.var-pagination__quickly { margin: var(--pagination-item-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size-open-icon[var-pagination-cover] { font-size: inherit;}.var-pagination--simple-padding { padding: var(--pagination-simple-padding);}

package/lib/pagination/pagination.less

@@ -0,0 +1,178 @@
+@pagination-font-size: var(--font-size-md);
+@pagination-active-color: #fff;
+@pagination-active-bg-color: var(--color-primary);
+@pagination-hover-bg-color: #edf5ff;
+@pagination-total-margin: 0 12px;
+@pagination-item-width: 32px;
+@pagination-item-height: 32px;
+@pagination-item-margin: 0 6px;
+@pagination-item-background: #fff;
+@pagination-item-border-radius: 4px;
+@pagination-list-bg-color: #fff;
+@pagination-list-active-bg-color: #edf5ff;
+@pagination-list-active-color: var(--color-primary);
+@pagination-input-width: 32px;
+@pagination-simple-padding: 0 0 2px 0;
+@pagination-disabled-color: var(--color-text-disabled);
+@pagination-bg-disabled-color: var(--color-disabled);
+@pagination-size-line-height: 24px;
+@pagination-total-line-height: 24px;
+
+:root {
+  --pagination-font-size: @pagination-font-size;
+  --pagination-active-color: @pagination-active-color;
+  --pagination-active-bg-color: @pagination-active-bg-color;
+  --pagination-hover-bg-color: @pagination-hover-bg-color;
+  --pagination-total-margin: @pagination-total-margin;
+  --pagination-total-line-height: @pagination-total-line-height;
+  --pagination-item-width: @pagination-item-width;
+  --pagination-item-height: @pagination-item-height;
+  --pagination-item-margin: @pagination-item-margin;
+  --pagination-item-background: @pagination-item-background;
+  --pagination-item-border-radius: @pagination-item-border-radius;
+  --pagination-list-bg-color: @pagination-list-bg-color;
+  --pagination-list-active-bg-color: @pagination-list-active-bg-color;
+  --pagination-list-active-color: @pagination-list-active-color;
+  --pagination-input-width: @pagination-input-width;
+  --pagination-simple-padding: @pagination-simple-padding;
+  --pagination-disabled-color: @pagination-disabled-color;
+  --pagination-bg-disabled-color: @pagination-bg-disabled-color;
+  --pagination-size-line-height: @pagination-size-line-height;
+}
+
+// Mixins
+.pagination-flex-nowrap {
+  display: flex;
+  white-space: nowrap;
+  align-items: center;
+}
+
+.var-pagination {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  font-size: var(--pagination-font-size);
+  padding: 0;
+
+  &__item {
+    display: inline-flex;
+    min-width: var(--pagination-item-width);
+    align-items: center;
+    justify-content: center;
+    margin: var(--pagination-item-margin);
+    height: var(--pagination-item-height);
+    cursor: pointer;
+    border-radius: var(--pagination-item-border-radius);
+    outline: none;
+    transition: all 0.25s;
+    user-select: none;
+    background: var(--pagination-item-background);
+
+    &:hover {
+      background-color: var(--pagination-hover-bg-color);
+    }
+
+    &-active {
+      color: var(--pagination-active-color);
+      background-color: var(--pagination-active-bg-color) !important;
+    }
+
+    &-disabled-active {
+      background: var(--pagination-bg-disabled-color);
+    }
+
+    &-hide {
+      display: none;
+    }
+
+    &-disabled {
+      cursor: default !important;
+      color: var(--pagination-disabled-color);
+
+      &:hover {
+        background-color: unset;
+      }
+    }
+
+    &-hover {
+      &:hover {
+        background: inherit;
+      }
+    }
+  }
+
+  &__prev {
+    margin-left: 0;
+  }
+
+  &__total {
+    .pagination-flex-nowrap();
+
+    line-height: var(--pagination-total-line-height);
+    margin: var(--pagination-total-margin);
+  }
+
+  &__size {
+    .pagination-flex-nowrap();
+
+    line-height: var(--pagination-size-line-height);
+    margin: var(--pagination-item-margin);
+
+    &-open {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+  }
+
+  &__list {
+    background-color: var(--pagination-list-bg-color);
+    cursor: pointer;
+    transition: all 0.25s;
+
+    &:hover {
+      color: var(--pagination-list-active-color);
+      background-color: var(--pagination-hover-bg-color);
+    }
+
+    &-active {
+      background-color: var(--pagination-list-active-bg-color) !important;
+      color: var(--pagination-list-active-color);
+    }
+  }
+
+  &__quickly,
+  &__simple {
+    .pagination-flex-nowrap();
+
+    [var-pagination-cover] {
+      width: var(--pagination-input-width);
+
+      .var-input__wrap {
+        padding: 0;
+      }
+
+      .var-input__input {
+        height: auto;
+        text-align: center;
+      }
+    }
+  }
+
+  &__quickly {
+    margin: var(--pagination-item-margin);
+
+    [var-pagination-cover] {
+      margin-left: 6px;
+    }
+  }
+
+  &__size-open-icon[var-pagination-cover] {
+    font-size: inherit;
+  }
+
+  &--simple-padding {
+    padding: var(--pagination-simple-padding);
+  }
+}

package/lib/pagination/porps.js

@@ -0,0 +1,48 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  current: {
+    type: [Number, String]
+  },
+  size: {
+    type: [Number, String],
+    default: 10
+  },
+  total: {
+    type: [Number, String],
+    default: 0
+  },
+  maxPagerCount: {
+    type: Number,
+    default: 3
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  simple: {
+    type: Boolean,
+    default: true
+  },
+  showSizeChanger: {
+    type: Boolean,
+    default: true
+  },
+  showQuickJumper: {
+    type: Boolean,
+    default: false
+  },
+  sizeOption: {
+    type: Array,
+    default: () => [10, 20, 50, 100]
+  },
+  showTotal: {
+    type: Function
+  },
+  onChange: {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/pagination/style/index.js

@@ -0,0 +1,8 @@
+require('../../styles/common.css')
+require('../../menu/menu.css')
+require('../../cell/cell.css')
+require('../../input/input.css')
+require('../../ripple/ripple.css')
+require('../../icon/icon.css')
+require('../pagination.css')
+require('../PaginationSfc.css')

package/lib/pagination/style/less.js

@@ -0,0 +1,8 @@
+require('../../styles/common.less')
+require('../../menu/menu.less')
+require('../../cell/cell.less')
+require('../../input/input.less')
+require('../../ripple/ripple.less')
+require('../../icon/icon.less')
+require('../pagination.less')
+require('../PaginationSfc.less')