@varlet/ui 1.22.0-alpha.4 → 1.22.0-alpha.65

package/es/counter/Counter.js

@@ -28,7 +28,7 @@ export function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", _mergeProps({
     class: ["var-counter__controller var-elevation--2", [_ctx.disabled || _ctx.formDisabled ? 'var-counter--disabled' : null, _ctx.errorMessage ? 'var-counter--error' : null]],
     style: {
-      background: _ctx.color ? _ctx.color : null
+      background: _ctx.color ? _ctx.color : undefined
     }
   }, _ctx.$attrs), [_withDirectives(_createVNode(_component_var_icon, {
     class: _normalizeClass(["var-counter__decrement-button", [!_ctx.decrementButton ? 'var-counter--hidden' : null]]),

package/es/index.js

@@ -31,6 +31,7 @@ import Loading, * as LoadingModule from './loading'
 import Locale, * as LocaleModule from './locale'
 import Menu, * as MenuModule from './menu'
 import Option, * as OptionModule from './option'
+import Pagination, * as PaginationModule from './pagination'
 import Picker, * as PickerModule from './picker'
 import Popup, * as PopupModule from './popup'
 import Progress, * as ProgressModule from './progress'
@@ -53,6 +54,7 @@ import SwipeItem, * as SwipeItemModule from './swipe-item'
 import Switch, * as SwitchModule from './switch'
 import Tab, * as TabModule from './tab'
 import TabItem, * as TabItemModule from './tab-item'
+import Table, * as TableModule from './table'
 import Tabs, * as TabsModule from './tabs'
 import TabsItems, * as TabsItemsModule from './tabs-items'
 import TimePicker, * as TimePickerModule from './time-picker'
@@ -91,6 +93,7 @@ export const _LoadingComponent = LoadingModule._LoadingComponent || {}
 export const _LocaleComponent = LocaleModule._LocaleComponent || {}
 export const _MenuComponent = MenuModule._MenuComponent || {}
 export const _OptionComponent = OptionModule._OptionComponent || {}
+export const _PaginationComponent = PaginationModule._PaginationComponent || {}
 export const _PickerComponent = PickerModule._PickerComponent || {}
 export const _PopupComponent = PopupModule._PopupComponent || {}
 export const _ProgressComponent = ProgressModule._ProgressComponent || {}
@@ -113,6 +116,7 @@ export const _SwipeItemComponent = SwipeItemModule._SwipeItemComponent || {}
 export const _SwitchComponent = SwitchModule._SwitchComponent || {}
 export const _TabComponent = TabModule._TabComponent || {}
 export const _TabItemComponent = TabItemModule._TabItemComponent || {}
+export const _TableComponent = TableModule._TableComponent || {}
 export const _TabsComponent = TabsModule._TabsComponent || {}
 export const _TabsItemsComponent = TabsItemsModule._TabsItemsComponent || {}
 export const _TimePickerComponent = TimePickerModule._TimePickerComponent || {}
@@ -153,6 +157,7 @@ function install(app) {
   Locale.install && app.use(Locale)
   Menu.install && app.use(Menu)
   Option.install && app.use(Option)
+  Pagination.install && app.use(Pagination)
   Picker.install && app.use(Picker)
   Popup.install && app.use(Popup)
   Progress.install && app.use(Progress)
@@ -175,6 +180,7 @@ function install(app) {
   Switch.install && app.use(Switch)
   Tab.install && app.use(Tab)
   TabItem.install && app.use(TabItem)
+  Table.install && app.use(Table)
   Tabs.install && app.use(Tabs)
   TabsItems.install && app.use(TabsItems)
   TimePicker.install && app.use(TimePicker)
@@ -216,6 +222,7 @@ export {
   Locale,
   Menu,
   Option,
+  Pagination,
   Picker,
   Popup,
   Progress,
@@ -238,6 +245,7 @@ export {
   Switch,
   Tab,
   TabItem,
+  Table,
   Tabs,
   TabsItems,
   TimePicker,
@@ -279,6 +287,7 @@ export default {
   Locale,
   Menu,
   Option,
+  Pagination,
   Picker,
   Popup,
   Progress,
@@ -301,6 +310,7 @@ export default {
   Switch,
   Tab,
   TabItem,
+  Table,
   Tabs,
   TabsItems,
   TimePicker,

package/es/input/input.css

@@ -1 +1 @@
-:root { --input-input-text-color: #555; --input-error-color: var(--color-danger); --input-blur-color: #888; --input-focus-color: var(--color-primary); --input-placeholder-size: 16px; --input-textarea-height: auto; --input-textarea-padding-top: 8px; --input-icon-padding: 16px 0 0; --input-icon-size: 20px; --input-line-size: 1px; --input-line-spread-size: 2px; --input-disabled-color: #aaa;}.var-input-footer-margin-enter-from,.var-input-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-input-footer-margin-enter-active,.var-input-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-input { width: 100%; color: var(--input-input-text-color);}.var-input__controller { width: 100%; display: flex; position: relative;}.var-input__wrap { position: relative; flex-grow: 1; display: flex; flex-direction: column; padding-top: var(--input-placeholder-size);}.var-input__icon { display: flex; align-items: center; padding: var(--input-icon-padding); font-size: 20px;}.var-input__placeholder { position: absolute; top: 50%; left: 0; transform-origin: left; transition-property: top, transform; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--input-placeholder-size) / 2)) scale(1); font-size: var(--input-placeholder-size);}.var-input__textarea-placeholder { position: absolute; top: 0; left: 0; transform-origin: left; transition: transform 0.3s; transform: translate(0, calc(var(--input-textarea-padding-top) + var(--input-placeholder-size))) scale(1); font-size: var(--input-placeholder-size);}.var-input__autocomplete { width: 0; height: 0; padding: 0; border: none; outline: none; font-size: 0;}.var-input__input { width: 100%; height: 32px; padding: 0; outline: none; border: none; font-size: inherit; background: transparent; color: var(--input-input-text-color); caret-color: var(--input-focus-color);}.var-input__line { width: 100%; height: var(--input-line-size); background: var(--input-blur-color);}.var-input__dot { width: 100%; height: var(--input-line-spread-size); background: var(--input-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-input__clear-icon[var-input-cover] { display: flex; margin-left: 4px;}.var-input--textarea { padding-top: var(--input-textarea-padding-top); height: var(--input-textarea-height);}.var-input--placeholder-hint { top: 0; transform: translate(0, 0) scale(0.75);}.var-input--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-input--non-hint { padding-top: 0;}.var-input--placeholder-hidden { visibility: hidden;}.var-input--focus { color: var(--input-focus-color);}.var-input--spread { transform: scaleX(1);}.var-input--disabled { color: var(--input-disabled-color);}.var-input--error { color: var(--input-error-color);}.var-input--line-disabled { background: var(--input-disabled-color);}.var-input--line-error { background: var(--input-error-color);}.var-input--caret-error { caret-color: var(--input-error-color);}
+:root { --input-input-text-color: #555; --input-error-color: var(--color-danger); --input-blur-color: #888; --input-focus-color: var(--color-primary); --input-placeholder-size: 16px; --input-textarea-height: auto; --input-textarea-padding-top: 8px; --input-icon-padding: 16px 0 0; --input-icon-size: 20px; --input-line-size: 1px; --input-line-spread-size: 2px; --input-disabled-color: var(--color-disabled);}.var-input-footer-margin-enter-from,.var-input-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-input-footer-margin-enter-active,.var-input-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-input { width: 100%; color: var(--input-input-text-color);}.var-input__controller { width: 100%; display: flex; position: relative;}.var-input__wrap { position: relative; flex-grow: 1; display: flex; flex-direction: column; padding-top: var(--input-placeholder-size);}.var-input__icon { display: flex; align-items: center; padding: var(--input-icon-padding); font-size: 20px;}.var-input__placeholder { position: absolute; top: 50%; left: 0; transform-origin: left; transition-property: top, transform; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--input-placeholder-size) / 2)) scale(1); font-size: var(--input-placeholder-size);}.var-input__textarea-placeholder { position: absolute; top: 0; left: 0; transform-origin: left; transition: transform 0.3s; transform: translate(0, calc(var(--input-textarea-padding-top) + var(--input-placeholder-size))) scale(1); font-size: var(--input-placeholder-size);}.var-input__autocomplete { width: 0; height: 0; padding: 0; border: none; outline: none; font-size: 0;}.var-input__input { width: 100%; height: 32px; padding: 0; outline: none; border: none; font-size: inherit; background: transparent; color: var(--input-input-text-color); caret-color: var(--input-focus-color);}.var-input__line { width: 100%; height: var(--input-line-size); background: var(--input-blur-color);}.var-input__dot { width: 100%; height: var(--input-line-spread-size); background: var(--input-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-input__clear-icon[var-input-cover] { display: flex; margin-left: 4px;}.var-input--textarea { padding-top: var(--input-textarea-padding-top); height: var(--input-textarea-height);}.var-input--placeholder-hint { top: 0; transform: translate(0, 0) scale(0.75);}.var-input--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-input--non-hint { padding-top: 0;}.var-input--placeholder-hidden { visibility: hidden;}.var-input--focus { color: var(--input-focus-color);}.var-input--spread { transform: scaleX(1);}.var-input--disabled { -webkit-text-fill-color: var(--input-disabled-color); opacity: 1; color: var(--input-disabled-color);}.var-input--error { color: var(--input-error-color);}.var-input--line-disabled { background: var(--input-disabled-color);}.var-input--line-error { background: var(--input-error-color);}.var-input--caret-error { caret-color: var(--input-error-color);}

package/es/input/input.less

@@ -9,7 +9,7 @@
 @input-icon-size: 20px;
 @input-line-size: 1px;
 @input-line-spread-size: 2px;
-@input-disabled-color: #aaa;
+@input-disabled-color: var(--color-disabled);
 
 :root {
   --input-input-text-color: @input-input-text-color;
@@ -158,6 +158,8 @@
   }
 
   &--disabled {
+    -webkit-text-fill-color: var(--input-disabled-color);
+    opacity: 1;
     color: var(--input-disabled-color);
   }
 

package/es/less.js

@@ -31,6 +31,7 @@ import './loading/style/less'
 import './locale/style/less'
 import './menu/style/less'
 import './option/style/less'
+import './pagination/style/less'
 import './picker/style/less'
 import './popup/style/less'
 import './progress/style/less'
@@ -53,6 +54,7 @@ import './swipe-item/style/less'
 import './switch/style/less'
 import './tab/style/less'
 import './tab-item/style/less'
+import './table/style/less'
 import './tabs/style/less'
 import './tabs-items/style/less'
 import './time-picker/style/less'

package/es/locale/en-US.js

@@ -94,5 +94,9 @@ export default {
       abbr: 'S'
     }
   },
-  selected: ' selected'
+  selected: ' selected',
+  // pagination
+  paginationItem: '',
+  paginationPage: 'page',
+  paginationJump: 'Go to'
 };

package/es/locale/zh-CN.js

@@ -94,5 +94,9 @@ export default {
       abbr: '六'
     }
   },
-  selected: '个被选择'
+  selected: '个被选择',
+  // pagination
+  paginationItem: '条',
+  paginationPage: '页',
+  paginationJump: '前往'
 };

package/es/menu/Menu.js

@@ -2,7 +2,7 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
-import { defineComponent, ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
+import { defineComponent, ref, watch, onMounted, onUnmounted } from 'vue';
 import { props } from './props';
 import { getLeft, getTop, toSizeUnit } from '../utils/elements';
 import { useZIndex } from '../context/zIndex';
@@ -93,7 +93,6 @@ export default defineComponent({
           onOpen,
           onClose
         } = props;
-        yield nextTick();
         newValue && resize();
         newValue ? onOpen == null ? void 0 : onOpen() : onClose == null ? void 0 : onClose();
       });

package/es/pagination/Pagination.js

@@ -0,0 +1,350 @@
+import Menu from '../menu';
+import Ripple from '../ripple';
+import Icon from '../icon';
+import Cell from '../cell';
+import Input from '../input';
+import { defineComponent, ref, computed, watch } from 'vue';
+import { props } from './porps';
+import { isNumber, toNumber } from '../utils/shared';
+import { pack } from '../locale';
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, resolveDirective as _resolveDirective, createElementVNode as _createElementVNode, withDirectives as _withDirectives, withKeys as _withKeys, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderList as _renderList, Fragment as _Fragment, withCtx as _withCtx, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
+
+var _hoisted_1 = {
+  class: "var-pagination"
+};
+var _hoisted_2 = ["item-mode", "onClick"];
+var _hoisted_3 = {
+  key: 4,
+  class: "var-pagination__total"
+};
+export function render(_ctx, _cache) {
+  var _component_var_icon = _resolveComponent("var-icon");
+
+  var _component_var_input = _resolveComponent("var-input");
+
+  var _component_var_cell = _resolveComponent("var-cell");
+
+  var _component_var_menu = _resolveComponent("var-menu");
+
+  var _directive_ripple = _resolveDirective("ripple");
+
+  return _openBlock(), _createElementBlock("ul", _hoisted_1, [_withDirectives(_createElementVNode("li", {
+    class: _normalizeClass(["var-pagination__item var-pagination__prev", {
+      'var-pagination__item-disabled': _ctx.current <= 1 || _ctx.disabled,
+      'var-elevation--2': !_ctx.simple
+    }]),
+    onClick: _cache[0] || (_cache[0] = $event => _ctx.clickItem('prev'))
+  }, [_renderSlot(_ctx.$slots, "prev", {}, () => [_createVNode(_component_var_icon, {
+    name: "chevron-left"
+  })])], 2
+  /* CLASS */
+  ), [[_directive_ripple, {
+    disabled: _ctx.current <= 1 || _ctx.disabled
+  }]]), _ctx.simple ? (_openBlock(), _createElementBlock("li", {
+    key: 0,
+    class: _normalizeClass(["var-pagination__simple", {
+      'var-pagination__item-disabled': _ctx.disabled
+    }])
+  }, [_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] = _withKeys($event => _ctx.setPage('simple', _ctx.simpleValue, $event), ["enter"]))
+  }, null, 8
+  /* PROPS */
+  , ["modelValue", "disabled"]), _createTextVNode(" / " + _toDisplayString(_ctx.pageCount), 1
+  /* TEXT */
+  )], 2
+  /* CLASS */
+  )) : (_openBlock(true), _createElementBlock(_Fragment, {
+    key: 1
+  }, _renderList(_ctx.pageList, (item, index) => {
+    return _withDirectives((_openBlock(), _createElementBlock("li", {
+      key: item + index,
+      "item-mode": _ctx.getMode(item, index),
+      class: _normalizeClass(["var-pagination__item var-elevation--2", {
+        'var-pagination__item-active': item === _ctx.current,
+        'var-pagination__item-hide': _ctx.isHideEllipsis(item, index),
+        'var-pagination__item-disabled': _ctx.disabled
+      }]),
+      onClick: $event => _ctx.clickItem(item, index)
+    }, [_createTextVNode(_toDisplayString(item), 1
+    /* TEXT */
+    )], 10
+    /* CLASS, PROPS */
+    , _hoisted_2)), [[_directive_ripple, {
+      disabled: _ctx.disabled
+    }]]);
+  }), 128
+  /* KEYED_FRAGMENT */
+  )), _withDirectives(_createElementVNode("li", {
+    class: _normalizeClass(["var-pagination__item var-pagination__next", {
+      'var-pagination__item-disabled': _ctx.current >= _ctx.pageCount || _ctx.disabled,
+      'var-elevation--2': !_ctx.simple
+    }]),
+    onClick: _cache[4] || (_cache[4] = $event => _ctx.clickItem('next'))
+  }, [_renderSlot(_ctx.$slots, "next", {}, () => [_createVNode(_component_var_icon, {
+    name: "chevron-right"
+  })])], 2
+  /* CLASS */
+  ), [[_directive_ripple, {
+    disabled: _ctx.current >= _ctx.pageCount || _ctx.disabled
+  }]]), _ctx.showSizeChanger ? (_openBlock(), _createElementBlock("li", {
+    key: 2,
+    class: _normalizeClass(["var-pagination__size", {
+      'var-pagination__item-disabled': _ctx.disabled
+    }])
+  }, [_createVNode(_component_var_menu, {
+    show: _ctx.menuVisible,
+    "onUpdate:show": _cache[6] || (_cache[6] = $event => _ctx.menuVisible = $event),
+    "offset-x": -4
+  }, {
+    menu: _withCtx(() => [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.sizeOption, (option, index) => {
+      return _withDirectives((_openBlock(), _createBlock(_component_var_cell, {
+        class: _normalizeClass(["var-pagination__list", {
+          'var-pagination__list-active': _ctx.size === option
+        }]),
+        key: index,
+        onClick: $event => _ctx.clickSize(option)
+      }, {
+        default: _withCtx(() => [_createTextVNode(_toDisplayString(option) + _toDisplayString(_ctx.pack.paginationItem) + " / " + _toDisplayString(_ctx.pack.paginationPage), 1
+        /* TEXT */
+        )]),
+        _: 2
+        /* DYNAMIC */
+
+      }, 1032
+      /* PROPS, DYNAMIC_SLOTS */
+      , ["class", "onClick"])), [[_directive_ripple]]);
+    }), 128
+    /* KEYED_FRAGMENT */
+    ))]),
+    default: _withCtx(() => [_createElementVNode("div", {
+      class: "var-pagination__size-open",
+      style: {
+        "display": "flex"
+      },
+      onClick: _cache[5] || (_cache[5] = (...args) => _ctx.showMenu && _ctx.showMenu(...args))
+    }, [_createElementVNode("span", null, _toDisplayString(_ctx.size) + _toDisplayString(_ctx.pack.paginationItem) + " / " + _toDisplayString(_ctx.pack.paginationPage), 1
+    /* TEXT */
+    ), _createVNode(_component_var_icon, {
+      class: "var-pagination__size-open-icon",
+      "var-pagination-cover": "",
+      name: "menu-down"
+    })])]),
+    _: 1
+    /* STABLE */
+
+  }, 8
+  /* PROPS */
+  , ["show"])], 2
+  /* CLASS */
+  )) : _createCommentVNode("v-if", true), _ctx.showQuickJumper && !_ctx.simple ? (_openBlock(), _createElementBlock("li", {
+    key: 3,
+    class: _normalizeClass(["var-pagination__quickly", {
+      'var-pagination__item-disabled': _ctx.disabled
+    }])
+  }, [_createTextVNode(_toDisplayString(_ctx.pack.paginationJump) + " ", 1
+  /* TEXT */
+  ), _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] = _withKeys($event => _ctx.setPage('quick', _ctx.inputValue, $event), ["enter"]))
+  }, null, 8
+  /* PROPS */
+  , ["modelValue", "disabled"])], 2
+  /* CLASS */
+  )) : _createCommentVNode("v-if", true), _ctx.totalText ? (_openBlock(), _createElementBlock("li", _hoisted_3, _toDisplayString(_ctx.totalText), 1
+  /* TEXT */
+  )) : _createCommentVNode("v-if", true)]);
+}
+export default defineComponent({
+  render,
+  name: 'VarPagination',
+  components: {
+    [Menu.name]: Menu,
+    [Icon.name]: Icon,
+    [Cell.name]: Cell,
+    [Input.name]: Input
+  },
+  directives: {
+    Ripple
+  },
+  props,
+
+  setup(props) {
+    var menuVisible = ref(false);
+    var inputValue = ref('');
+    var simpleValue = ref('1');
+    var isHideEllipsisHead = ref(false);
+    var isHideEllipsisTail = ref(false);
+    var current = ref(toNumber(props.current) || 1);
+    var size = ref(toNumber(props.size) || 10);
+    var pageList = ref([]);
+    var activePosition = computed(() => Math.ceil(props.maxPagerCount / 2));
+    var pageCount = computed(() => Math.ceil(toNumber(props.total) / toNumber(size.value)));
+    var range = computed(() => {
+      var start = size.value * (current.value - 1) + 1;
+      var end = Math.min(size.value * current.value, toNumber(props.total));
+      return [start, end];
+    });
+    var totalText = computed(() => {
+      if (!props.showTotal) return '';
+      return props.showTotal(toNumber(props.total), range.value);
+    });
+
+    var isHideEllipsis = (item, index) => {
+      if (isNumber(item)) return false;
+      return index === 1 ? isHideEllipsisHead.value : isHideEllipsisTail.value;
+    };
+
+    var getMode = (item, index) => {
+      if (isNumber(item)) return 'basic';
+      return index === 1 ? 'head' : 'tail';
+    };
+
+    var clickItem = (item, index) => {
+      if (item === current.value || props.disabled) return;
+      if (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 = 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;
+    };
+
+    watch([() => props.current, () => props.size], ([newCurrent, newSize]) => {
+      current.value = toNumber(newCurrent) || 1;
+      size.value = toNumber(newSize || 10);
+    });
+    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,
+      current,
+      menuVisible,
+      size,
+      pageCount,
+      pageList,
+      inputValue,
+      simpleValue,
+      totalText,
+      getMode,
+      isHideEllipsis,
+      clickItem,
+      showMenu,
+      clickSize,
+      setPage
+    };
+  }
+
+});

package/es/pagination/index.js

@@ -0,0 +1,8 @@
+import Pagination from './Pagination.js'
+
+Pagination.install = function (app) {
+  app.component(Pagination.name, Pagination);
+};
+
+export var _PaginationComponent = Pagination;
+export default Pagination;

package/es/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: #f5f5f5; --pagination-total-margin: 0 12px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-border-radius: 4px; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #dbe4fd; --pagination-list-active-color: var(--color-primary); --pagination-input-width: 32px; --pagination-simple-padding: 0 0 2px 0; --pagination-disabled-color: var(--color-disabled);}.pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; 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.3s; user-select: none;}.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-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__prev { margin-left: 0;}.var-pagination__total { margin: var(--pagination-total-margin); display: flex; white-space: nowrap; align-items: center;}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; margin: var(--pagination-item-margin); cursor: pointer;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer;}.var-pagination__list:hover { 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 { font-size: inherit;}.var-pagination--simple-padding { padding: var(--pagination-simple-padding);}