@king-design/vue 3.6.2-beta.1 → 3.7.0

package/components/timepicker/index.spec.js

@@ -1,5 +1,8 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import BasicDemo from '~/components/timepicker/demos/basic';
@@ -41,7 +44,7 @@ describe('Timepicker', function () {
           expect(inputInner.value).eql('');
           dropdown = getElement('.k-time-content');
           ok = dropdown.querySelector('.k-btn');
-          expect(ok.classList.contains('k-disabled')).eql(true);
+          expect(ok.classList.contains('k-disabled')).eql(false);
           expect(dropdown.innerHTML).to.matchSnapshot();
           next = dropdown.querySelector('.k-scroll-select-item:nth-child(11)');
           next.click();
@@ -60,7 +63,7 @@ describe('Timepicker', function () {
           _context2.next = 27;
           return wait(500);
         case 27:
-          expect(instance.get('time')).to.eql('02:00:00');
+          expect(instance.get('time')).to.eql('03:34:56');
           expect(dropdown.style.display).to.eql('none');
           // set time
           instance.set('time', '03:03:03');
@@ -368,51 +371,76 @@ describe('Timepicker', function () {
         case 15:
           expect(dropdown.innerHTML).to.matchSnapshot();
           dropdown.querySelector('.k-btn').click();
-          expect(instance.get('time')).to.eql(['00:30:00', '23:30:00']);
+          expect(instance.get('time')).to.eql(['00:30:00', '23:00:00']);
         case 18:
         case "end":
           return _context9.stop();
       }
     }, _callee9);
   })));
-  it('format', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
-    var _mount9, instance, element, _element$querySelecto5, input1, input2, input3, content, _content$querySelecto, scroll1, scroll2;
-    return _regeneratorRuntime.wrap(function _callee10$(_context10) {
-      while (1) switch (_context10.prev = _context10.next) {
+  it('should not have 23:59:59 in step mode without max', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var _context10;
+    var _mount9, instance, element, picker, dropdown, options, texts;
+    return _regeneratorRuntime.wrap(function _callee10$(_context12) {
+      while (1) switch (_context12.prev = _context12.next) {
         case 0:
-          _mount9 = mount(FormatDemo), instance = _mount9[0], element = _mount9[1];
+          _mount9 = mount(StepRangeDemo), instance = _mount9[0], element = _mount9[1];
+          picker = element.querySelector('.k-select');
+          picker.click();
+          _context12.next = 5;
+          return wait();
+        case 5:
+          dropdown = getElement('.k-time-content');
+          options = dropdown.querySelectorAll('k-scroll-select-item');
+          texts = _mapInstanceProperty(_context10 = _Array$from(options)).call(_context10, function (el) {
+            var _context11;
+            return _trimInstanceProperty(_context11 = el.innerText).call(_context11);
+          });
+          expect(texts).to.not.include('23:59:59');
+        case 9:
+        case "end":
+          return _context12.stop();
+      }
+    }, _callee10);
+  })));
+  it('format', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+    var _mount10, instance, element, _element$querySelecto5, input1, input2, input3, content, _content$querySelecto, scroll1, scroll2;
+    return _regeneratorRuntime.wrap(function _callee11$(_context13) {
+      while (1) switch (_context13.prev = _context13.next) {
+        case 0:
+          _mount10 = mount(FormatDemo), instance = _mount10[0], element = _mount10[1];
           _element$querySelecto5 = element.querySelectorAll('.k-select'), input1 = _element$querySelecto5[0], input2 = _element$querySelecto5[1], input3 = _element$querySelecto5[2];
           input1.click();
-          _context10.next = 5;
+          _context13.next = 5;
           return wait();
         case 5:
           content = getElement('.k-time-content');
           expect(content.innerHTML).to.matchSnapshot();
           // is '02'
           content.querySelector('.k-scroll-select-item:nth-child(12)').click();
-          _context10.next = 10;
+          _context13.next = 10;
           return wait();
         case 10:
           content.querySelector('.k-btn').click();
-          _context10.next = 13;
+          _context13.next = 13;
           return wait();
         case 13:
-          expect(instance.get('time1')).to.eql('02:00 am');
+          expect(instance.get('time1')).to.eql('03:34 am');
           expect(input1.innerHTML).to.matchSnapshot();
           input2.click();
-          _context10.next = 18;
+          _context13.next = 18;
           return wait();
         case 18:
           content = getElement('.k-select-menu');
           expect(content.innerHTML).to.matchSnapshot();
           content.querySelector('.k-select-option').click();
-          _context10.next = 23;
+          _context13.next = 23;
           return wait();
         case 23:
           expect(instance.get('time2')).to.eql('00:00:00');
           expect(input2.innerHTML).to.matchSnapshot();
           input3.click();
-          _context10.next = 28;
+          _context13.next = 28;
           return wait();
         case 28:
           content = getElement('.k-time-content');
@@ -420,100 +448,100 @@ describe('Timepicker', function () {
           _content$querySelecto = content.querySelectorAll('.k-scroll-select'), scroll1 = _content$querySelecto[0], scroll2 = _content$querySelecto[1];
           scroll1.querySelector('.k-scroll-select-item:nth-child(11)').click();
           scroll2.querySelector('.k-scroll-select-item:nth-child(12)').click();
-          _context10.next = 35;
+          _context13.next = 35;
           return wait();
         case 35:
           expect(content.innerHTML).to.matchSnapshot();
           content.querySelector('.k-btn').click();
-          _context10.next = 39;
+          _context13.next = 39;
           return wait();
         case 39:
           expect(instance.get('time3')).eql(['00:30:00.000', '00:30:00.000']);
           expect(input3.innerHTML).to.matchSnapshot();
         case 41:
         case "end":
-          return _context10.stop();
+          return _context13.stop();
       }
-    }, _callee10);
+    }, _callee11);
   })));
-  it('can input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
-    var Demo, _mount10, instance, element, _element$querySelecto6, basicInput, multipleInput, rangeInput, formatInput, input;
-    return _regeneratorRuntime.wrap(function _callee12$(_context13) {
-      while (1) switch (_context13.prev = _context13.next) {
+  it('can input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
+    var Demo, _mount11, instance, element, _element$querySelecto6, basicInput, multipleInput, rangeInput, formatInput, input;
+    return _regeneratorRuntime.wrap(function _callee13$(_context16) {
+      while (1) switch (_context16.prev = _context16.next) {
         case 0:
           Demo = /*#__PURE__*/function (_Component) {
             _inheritsLoose(Demo, _Component);
             function Demo() {
-              var _context11;
+              var _context14;
               var _this;
               for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
                 args[_key] = arguments[_key];
               }
-              _this = _Component.call.apply(_Component, _concatInstanceProperty(_context11 = [this]).call(_context11, args)) || this;
+              _this = _Component.call.apply(_Component, _concatInstanceProperty(_context14 = [this]).call(_context14, args)) || this;
               _this.Timepicker = Timepicker;
               return _this;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const {Timepicker} = this;\n                <div>\n                    <Timepicker v-model=\"basic\" min=\"01:34:56\" max=\"15:02:59\" />\n                    <Timepicker v-model=\"multiple\" multiple />\n                    <Timepicker v-model=\"range\" range min=\"01:34:56\" max=\"15:02:59\" />\n                    <Timepicker v-model=\"format\" range step=\"00:30:00\" valueFormat=\"HH:mm:ss.SSS\" showFormat=\"HH:mm\"/>\n                </div>\n            ";
-          _mount10 = mount(Demo), instance = _mount10[0], element = _mount10[1];
+          _mount11 = mount(Demo), instance = _mount11[0], element = _mount11[1];
           _element$querySelecto6 = element.querySelectorAll('.k-input-inner'), basicInput = _element$querySelecto6[0], multipleInput = _element$querySelecto6[1], rangeInput = _element$querySelecto6[2], formatInput = _element$querySelecto6[3];
           input = /*#__PURE__*/function () {
-            var _ref12 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11(_input, value) {
-              return _regeneratorRuntime.wrap(function _callee11$(_context12) {
-                while (1) switch (_context12.prev = _context12.next) {
+            var _ref13 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12(_input, value) {
+              return _regeneratorRuntime.wrap(function _callee12$(_context15) {
+                while (1) switch (_context15.prev = _context15.next) {
                   case 0:
                     _input.value = value;
                     dispatchEvent(_input, 'input');
-                    _context12.next = 4;
+                    _context15.next = 4;
                     return wait();
                   case 4:
                   case "end":
-                    return _context12.stop();
+                    return _context15.stop();
                 }
-              }, _callee11);
+              }, _callee12);
             }));
             return function input(_x, _x2) {
-              return _ref12.apply(this, arguments);
+              return _ref13.apply(this, arguments);
             };
           }(); // input disabled value
-          _context13.next = 7;
+          _context16.next = 7;
           return input(basicInput, '01:01:01');
         case 7:
           expect(instance.get('basic')).to.eql(undefined);
           // input correct value
-          _context13.next = 10;
+          _context16.next = 10;
           return input(basicInput, '03:03:03');
         case 10:
           expect(instance.get('basic')).to.eql('03:03:03');
           // input multple values
-          _context13.next = 13;
+          _context16.next = 13;
           return input(multipleInput, '01:01:01');
         case 13:
           expect(instance.get('multiple')).to.eql(['01:01:01']);
-          _context13.next = 16;
+          _context16.next = 16;
           return input(multipleInput, '02:02:02');
         case 16:
           expect(instance.get('multiple')).to.eql(['01:01:01', '02:02:02']);
           // input disabled range value
-          _context13.next = 19;
+          _context16.next = 19;
           return input(rangeInput, '01:01:01~05:05:05');
         case 19:
           expect(instance.get('range')).to.eql(undefined);
           // input correct range value
-          _context13.next = 22;
+          _context16.next = 22;
           return input(rangeInput, '03:03:03~05:05:05');
         case 22:
           expect(instance.get('range')).to.eql(['03:03:03', '05:05:05']);
           // input correct formated value
-          _context13.next = 25;
+          _context16.next = 25;
           return input(formatInput, '01:00~02:00');
         case 25:
           expect(instance.get('format')).to.eql(['01:00:00.000', '02:00:00.000']);
         case 26:
         case "end":
-          return _context13.stop();
+          return _context16.stop();
       }
-    }, _callee12);
+    }, _callee13);
   })));
 });

package/components/timepicker/useDefaultValue.js

@@ -6,16 +6,21 @@ import { isArray } from 'intact-shared';
 export function useDefaultValue() {
   var instance = useInstance();
   function get() {
-    var _value = instance.value.value.value;
-    var lastValue = last(_value);
+    var _instance$value, _instance$step;
     var _instance$get = instance.get(),
-      range = _instance$get.range;
+      range = _instance$get.range,
+      min = _instance$get.min,
+      max = _instance$get.max;
+    var _value = ((_instance$value = instance.value) == null ? void 0 : _instance$value.value.value) || [];
+    var options = (_instance$step = instance.step) == null ? void 0 : _instance$step.options.value;
+    // 优先级：用户选择值 > step 选项首尾 > min/max 属性 > 全局默认值
+    var hasOptions = options && options.length;
+    var start = hasOptions ? instance.formats.createDateByValueFormat(options[0].value) : min ? instance.formats.createDateByValueFormat(min) : NOW_START;
+    var end = hasOptions ? instance.formats.createDateByValueFormat(options[options.length - 1].value) : max ? instance.formats.createDateByValueFormat(max) : NOW_END;
     if (range) {
-      // consider the second last value to maintain consistency
-      var penulimate = getPenulimate(_value);
-      return _Object$assign([NOW_START, NOW_END], penulimate, lastValue);
+      return _Object$assign([start, end], getPenulimate(_value), last(_value));
     }
-    return lastValue || NOW_START;
+    return last(_value) || start;
   }
   return {
     get: get

package/components/timepicker/useStep.js

@@ -13,7 +13,8 @@ export function useStep(_ref, _ref2) {
   useReceive(['step', 'min', 'max'], generateOptions);
   function generateOptions() {
     var _instance$get = instance.get(),
-      step = _instance$get.step;
+      step = _instance$get.step,
+      max = _instance$get.max;
     if (step) {
       var data = [];
       var maxValue = maxDate.value || NOW_END;
@@ -29,7 +30,8 @@ export function useStep(_ref, _ref2) {
         if (value <= maxValue) {
           push(value);
           if (+value === +maxValue) break;
-        } else if (data.length) {
+        } else if (data.length && max !== undefined) {
+          // unless max is undefined, it means the max is not set, so we don't need to add the maxValue to the last
           // it the last value is less than maxValue,
           // add the maxValue to the last
           push(maxValue);

package/components/transfer/index.d.ts

@@ -1,6 +1,7 @@
 import { Component, TypeDefs, VNode, Key, Children } from 'intact-vue-next';
 import { Model } from './useFilter';
 import type { Events } from '../types';
+import type { PaginationProps, PaginationChangeData } from '../pagination';
 export interface TransferProps<K extends string = 'key', L extends string = 'label', T extends TransferDataItem<K, L> = TransferDataItem<K, L>, V extends T[K] = T[K]> {
     data?: T[];
     keyName?: K;
@@ -17,6 +18,7 @@ export interface TransferProps<K extends string = 'key', L extends string = 'lab
     rightTitle?: string | VNode;
     enableAdd?: () => boolean;
     enableRemove?: () => boolean;
+    pagination?: boolean | PaginationProps;
 }
 export type TransferDataItem<A extends string = 'key', B extends string = 'label'> = {
     [K in A]: Key;
@@ -28,6 +30,7 @@ export type TransferDataItem<A extends string = 'key', B extends string = 'label
 export interface TransferEvents {
     add: [];
     remove: [];
+    page: [Model, PaginationChangeData];
 }
 export interface TransferBlocks<T, V> {
     header: Model;
@@ -42,6 +45,16 @@ export declare class Transfer<K extends string = 'key', L extends string = 'labe
     static events: Events<TransferEvents>;
     private transfer;
     private filter;
+    paginationState: {
+        getPagedData: (model: Model, allData: any[]) => any[];
+        leftValue: import("../../hooks/useState").State<number>;
+        leftLimit: import("../../hooks/useState").State<number>;
+        rightValue: import("../../hooks/useState").State<number>;
+        rightLimit: import("../../hooks/useState").State<number>;
+        onChange: (model: Model, data: PaginationChangeData) => void;
+        leftPaginationRef: import('intact-vue-next').RefObject<import("../pagination").Pagination>;
+        rightPaginationRef: import('intact-vue-next').RefObject<import("../pagination").Pagination>;
+    };
     private check;
     private config;
     getData(): any[];

package/components/transfer/index.js

@@ -7,6 +7,7 @@ import { _$ } from '../../i18n';
 import { useTransfer } from './useTransfer';
 import { useFilter } from './useFilter';
 import { useCheck } from './useCheck';
+import { usePagination } from './usePagination';
 import { useConfigContext } from '../config';
 var typeDefs = {
   data: Array,
@@ -23,7 +24,8 @@ var typeDefs = {
   leftTitle: [String, VNode],
   rightTitle: [String, VNode],
   enableAdd: Function,
-  enableRemove: Function
+  enableRemove: Function,
+  pagination: [Boolean, Object]
 };
 var defaults = function defaults() {
   return {
@@ -40,7 +42,8 @@ var defaults = function defaults() {
 };
 var events = {
   add: true,
-  remove: true
+  remove: true,
+  page: true
 };
 export var Transfer = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Transfer, _Component);
@@ -53,6 +56,7 @@ export var Transfer = /*#__PURE__*/function (_Component) {
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.transfer = useTransfer();
     _this.filter = useFilter(_this.transfer.rightData);
+    _this.paginationState = usePagination();
     _this.check = useCheck(_filterInstanceProperty(_this));
     _this.config = useConfigContext();
     return _this;

package/components/transfer/index.spec.js

@@ -1,7 +1,9 @@
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _atInstanceProperty from "@babel/runtime-corejs3/core-js/instance/at";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import BasicDemo from '~/components/transfer/demos/basic';
 import LabelDemo from '~/components/transfer/demos/label';
+import PaginationDemo from '~/components/transfer/demos/pagination';
 import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
 describe('Transfer', function () {
   afterEach(function () {
@@ -203,4 +205,199 @@ describe('Transfer', function () {
       }
     }, _callee4, this);
   })));
+  it('pagination', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var _mount6, instance, element, transfer, pagination, leftItems, firstItem, nextButton, leftItemsPage2, firstItemPage2, nextButton2, filteredItems, restoredItems;
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          this.timeout(0);
+          _mount6 = mount(PaginationDemo), instance = _mount6[0], element = _mount6[1];
+          _context5.next = 4;
+          return wait();
+        case 4:
+          transfer = instance.refs.__test; // 快照：初始状态（第1页）
+          expect(element.outerHTML).to.matchSnapshot();
+          // 测试1: 分页器存在
+          pagination = element.querySelector('.k-transfer-pagination-wrapper .k-pagination');
+          expect(pagination).to.be.ok;
+          // 测试2: 第一页显示的数据（默认 limit=10，显示前10条）
+          leftItems = element.querySelectorAll('.k-transfer-panel:first-child .k-transfer-item');
+          expect(leftItems.length).to.eql(10);
+          // 验证显示的是前10条数据
+          firstItem = leftItems[0].querySelector('.k-checkbox');
+          expect(firstItem.textContent).to.include('主机名1');
+          // 测试3: 点击下一页
+          nextButton = element.querySelector('.k-transfer-pagination-wrapper .k-pagination .k-pagination-next');
+          if (!(nextButton && !nextButton.classList.contains('k-disabled'))) {
+            _context5.next = 22;
+            break;
+          }
+          nextButton.click();
+          _context5.next = 17;
+          return wait(500);
+        case 17:
+          // 快照：第2页
+          expect(element.outerHTML).to.matchSnapshot();
+          // 验证显示的是第11-20条数据
+          leftItemsPage2 = element.querySelectorAll('.k-transfer-panel:first-child .k-transfer-item');
+          expect(leftItemsPage2.length).to.eql(10);
+          firstItemPage2 = leftItemsPage2[0].querySelector('.k-checkbox');
+          expect(firstItemPage2.textContent).to.include('主机名11');
+        case 22:
+          // 测试4: 设置关键词进行筛选，验证页码重置为1
+          // 先翻到第2页
+          nextButton2 = element.querySelector('.k-transfer-pagination-wrapper .k-pagination .k-pagination-next');
+          if (!(nextButton2 && !nextButton2.classList.contains('k-disabled'))) {
+            _context5.next = 27;
+            break;
+          }
+          nextButton2.click();
+          _context5.next = 27;
+          return wait(500);
+        case 27:
+          // 设置关键词，应该重置到第1页
+          transfer.set('leftKeywords', '1');
+          _context5.next = 30;
+          return wait(500);
+        case 30:
+          // 快照：筛选后（第1页）
+          expect(element.outerHTML).to.matchSnapshot();
+          // 验证筛选后的数据（应该显示第1页的筛选结果）
+          filteredItems = element.querySelectorAll('.k-transfer-panel:first-child .k-transfer-item'); // 筛选包含'1'的数据，应该少于或等于10条
+          _atInstanceProperty(expect(filteredItems.length).to.be).most(10);
+          // 验证所有显示的数据都包含'1'
+          filteredItems.forEach(function (item) {
+            var text = item.textContent || '';
+            expect(text).to.match(/主机名\d*1\d*/);
+          });
+          // 测试5: 清除筛选后恢复分页
+          transfer.set('leftKeywords', '');
+          _context5.next = 37;
+          return wait(500);
+        case 37:
+          // 快照：清除筛选后（恢复第1页）
+          expect(element.outerHTML).to.matchSnapshot();
+          restoredItems = element.querySelectorAll('.k-transfer-panel:first-child .k-transfer-item');
+          expect(restoredItems.length).to.eql(10);
+        case 40:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5, this);
+  })));
+  it('pagination with filter', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var _mount7, instance, element, transfer, filteredItems, nextButton, page2Items, restoredItems;
+    return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          this.timeout(0);
+          _mount7 = mount(PaginationDemo), instance = _mount7[0], element = _mount7[1];
+          _context6.next = 4;
+          return wait();
+        case 4:
+          transfer = instance.refs.__test; // 测试筛选后分页数据立即更新
+          transfer.set('leftKeywords', '2');
+          _context6.next = 8;
+          return wait(500);
+        case 8:
+          // 快照：筛选后（第1页）
+          expect(element.outerHTML).to.matchSnapshot();
+          // 验证筛选后的数据立即显示
+          filteredItems = element.querySelectorAll('.k-transfer-panel:first-child .k-transfer-item'); // 所有显示的数据应该包含'2'
+          filteredItems.forEach(function (item) {
+            var text = item.textContent || '';
+            expect(text).to.match(/主机名\d*2\d*/);
+          });
+          // 测试筛选后切换页面
+          nextButton = element.querySelector('.k-transfer-pagination-wrapper .k-pagination .k-pagination-next');
+          if (!(nextButton && !nextButton.classList.contains('k-disabled'))) {
+            _context6.next = 19;
+            break;
+          }
+          nextButton.click();
+          _context6.next = 16;
+          return wait(500);
+        case 16:
+          // 快照：筛选后第2页
+          expect(element.outerHTML).to.matchSnapshot();
+          // 验证第二页的数据也包含'2'
+          page2Items = element.querySelectorAll('.k-transfer-panel:first-child .k-transfer-item');
+          page2Items.forEach(function (item) {
+            var text = item.textContent || '';
+            expect(text).to.match(/主机名\d*2\d*/);
+          });
+        case 19:
+          // 清除筛选
+          transfer.set('leftKeywords', '');
+          _context6.next = 22;
+          return wait(500);
+        case 22:
+          // 快照：清除筛选后（恢复第1页）
+          expect(element.outerHTML).to.matchSnapshot();
+          // 验证清除筛选后显示所有数据的第一页
+          restoredItems = element.querySelectorAll('.k-transfer-panel:first-child .k-transfer-item');
+          expect(restoredItems.length).to.eql(10);
+        case 25:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6, this);
+  })));
+  it('pagination with checkbox selection', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var _mount8, instance, element, transfer, checkAll, leftCheckedKeys, nextButton, leftCheckedKeysAfterPageChange, page2Items, leftCheckedKeysAfterUncheck;
+    return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          this.timeout(0);
+          _mount8 = mount(PaginationDemo), instance = _mount8[0], element = _mount8[1];
+          _context7.next = 4;
+          return wait();
+        case 4:
+          transfer = instance.refs.__test; // 测试1: 全选基于全部数据
+          checkAll = element.querySelector('.k-transfer-title .k-checkbox');
+          checkAll.click();
+          _context7.next = 9;
+          return wait();
+        case 9:
+          // 快照：全选后（第1页）
+          expect(element.outerHTML).to.matchSnapshot();
+          leftCheckedKeys = transfer.get('leftCheckedKeys');
+          expect(leftCheckedKeys.length).to.eql(100);
+          // 测试2: 切换页面时保持选中状态
+          nextButton = element.querySelector('.k-transfer-pagination-wrapper .k-pagination .k-pagination-next');
+          if (!(nextButton && !nextButton.classList.contains('k-disabled'))) {
+            _context7.next = 22;
+            break;
+          }
+          nextButton.click();
+          _context7.next = 17;
+          return wait(500);
+        case 17:
+          // 快照：全选后切换到第2页（选中状态保持）
+          expect(element.outerHTML).to.matchSnapshot();
+          // 切换到第2页后，选中状态应该保持
+          leftCheckedKeysAfterPageChange = transfer.get('leftCheckedKeys');
+          expect(leftCheckedKeysAfterPageChange.length).to.eql(100);
+          // 验证第2页的checkbox状态（应该都是选中的）
+          page2Items = element.querySelectorAll('.k-transfer-panel:first-child .k-transfer-item');
+          page2Items.forEach(function (item) {
+            var checkbox = item.querySelector('input[type="checkbox"]');
+            expect(checkbox.checked).to.be.true;
+          });
+        case 22:
+          // 测试3: 取消全选
+          checkAll.click();
+          _context7.next = 25;
+          return wait();
+        case 25:
+          // 快照：取消全选后
+          expect(element.outerHTML).to.matchSnapshot();
+          leftCheckedKeysAfterUncheck = transfer.get('leftCheckedKeys');
+          expect(leftCheckedKeysAfterUncheck.length).to.eql(0);
+        case 28:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee7, this);
+  })));
 });

package/components/transfer/index.vdt.js

@@ -9,6 +9,8 @@ import { Checkbox } from '../checkbox';
 import { Button } from '../button';
 import { Tree } from '../tree';
 import { Icon } from '../icon';
+import { Pagination } from '../pagination';
+import { isObject, EMPTY_OBJ } from 'intact-shared';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
     _this = this;
@@ -24,7 +26,8 @@ export default function ($props, $blocks, $__proto__) {
     labelName = _this$get.labelName,
     filterable = _this$get.filterable,
     filter = _filterInstanceProperty(_this$get),
-    placeholder = _this$get.placeholder;
+    placeholder = _this$get.placeholder,
+    pagination = _this$get.pagination;
   var getShowedData = _filterInstanceProperty(this).getShowedData;
   var _this$transfer = this.transfer,
     enableAdd = _this$transfer.enableAdd,
@@ -36,13 +39,22 @@ export default function ($props, $blocks, $__proto__) {
     toggleCheckAll = _this$check.toggleCheckAll,
     onCheckboxChange = _this$check.onCheckboxChange,
     isIndeterminate = _this$check.isIndeterminate;
+  var _this$paginationState = this.paginationState,
+    getPagedData = _this$paginationState.getPagedData,
+    leftValue = _this$paginationState.leftValue,
+    leftLimit = _this$paginationState.leftLimit,
+    rightValue = _this$paginationState.rightValue,
+    rightLimit = _this$paginationState.rightLimit,
+    onPageChange = _this$paginationState.onChange;
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-transfer"] = true, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var Panel = function Panel(model) {
     var title = _this.get(model + "Title");
-    var data = getShowedData(model);
+    var allData = getShowedData(model) || [];
+    var hasPagination = !!pagination;
+    var displayData = hasPagination ? getPagedData(model, allData) : allData;
     return _$ce(2, 'div', [_$ce(2, 'div', (_$blocks['header'] = function ($super) {
-      return [_$ce(2, 'div', [this.get(model + "CheckedKeys.length"), _$ct(' /\n                    '), data.length], 0, _$cn(k + "-transfer-count")), _$cc(Checkbox, {
+      return [_$ce(2, 'div', [this.get(model + "CheckedKeys.length"), _$ct(' /\n                    '), allData.length], 0, _$cn(k + "-transfer-count")), _$cc(Checkbox, {
         'className': 'c-ellipsis',
         'value': isCheckAll(model),
         'indeterminate': isIndeterminate(model),
@@ -90,7 +102,7 @@ export default function ($props, $blocks, $__proto__) {
     }, _filterInstanceProperty(__$blocks).call(__$blocks, _$no, model)) : undefined, _$ce(2, 'div', (_$blocks['list'] = function ($super) {
       return _$cc(TransitionGroup, {
         'name': 'k-fade',
-        'children': _$ma(data, function ($value, $key) {
+        'children': _$ma(displayData, function ($value, $key) {
           var _$cn2;
           return _$ce(2, 'div', _$cc(Checkbox, {
             'name': model,
@@ -119,7 +131,18 @@ export default function ($props, $blocks, $__proto__) {
         return _$blocks['list'].call($this, $super, data);
       };
       return block ? block.call($this, callBlock, data) : callBlock();
-    }, __$blocks['list'](_$no, model)), 0, _$cn(k + "-transfer-list"))], 0, _$cn(k + "-transfer-panel"));
+    }, __$blocks['list'](_$no, model)), 0, _$cn(k + "-transfer-list")), hasPagination ? _$ce(2, 'div', _$cc(Pagination, _extends({
+      'ref': model === 'left' ? _this.paginationState.leftPaginationRef : _this.paginationState.rightPaginationRef,
+      'total': allData.length,
+      'size': 'mini',
+      'flat': true,
+      'showTotal': false,
+      'showLimits': false
+    }, isObject(pagination) ? pagination : EMPTY_OBJ, {
+      'value': model === 'left' ? leftValue.value : rightValue.value,
+      'limit': model === 'left' ? leftLimit.value : rightLimit.value,
+      'ev-change': onPageChange.bind(null, model)
+    }), null, model === 'left' ? _this.paginationState.leftPaginationRef : _this.paginationState.rightPaginationRef), 2, _$cn(k + "-transfer-pagination-wrapper")) : undefined], 0, _$cn(k + "-transfer-panel"));
   };
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)