@king-design/vue 3.6.2 → 3.8.0-beta.0

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)

package/components/transfer/styles.js

@@ -45,6 +45,9 @@ var defaults = {
   },
   arrow: {
     gap: '16px 10px'
+  },
+  pagination: {
+    padding: '6px 0'
   }
 };
 var transfer;
@@ -55,5 +58,5 @@ setDefault(function () {
   makeStyles == null || makeStyles.clearCache();
 });
 export var makeStyles = cache(function makeStyles(k) {
-  return /*#__PURE__*/css("font-size:", transfer.fontSize, ";.", k, "-transfer-panel,.", k, "-transfer-arrows{display:inline-block;vertical-align:middle;}.", k, "-transfer-panel{width:", transfer.panel.width, ";border:", transfer.panel.border, ";border-radius:", transfer.panel.borderRadius, ";height:", transfer.panel.height, ";display:inline-flex;flex-direction:column;overflow:auto;}.", k, "-transfer-title{line-height:", transfer.title.lineHeight, ";background:", transfer.title.bgColor, ";padding:", transfer.title.padding, ";.", k, "-checkbox{color:", transfer.title.color, ";font-size:", transfer.title.fontSize, ";}}.", k, "-transfer-count{float:right;margin-left:", transfer.title.countGap, ";}.", k, "-transfer-list{overflow:auto;position:relative;flex:1;}.", k, "-transfer-item{color:", transfer.item.color, ";background:", transfer.item.bgColor, ";user-select:none;width:100%;&:not(.", k, "-disabled):hover{background:", transfer.item.hoverBgColor, ";color:", transfer.item.hoverColor, ";p{color:", transfer.item.hoverColor, ";}}.", k, "-checkbox{padding:", transfer.item.padding, ";display:flex;}p{margin:0;color:", transfer.item.descColor, ";}&.", k, "-disabled{p{color:", theme.color.disabled, ";}}}.", k, "-input{width:auto;margin:", transfer.searchGap, ";}.", k, "-transfer-arrows{.", k, "-btn{display:flex;margin:", transfer.arrow.gap, ";}}");
+  return /*#__PURE__*/css("font-size:", transfer.fontSize, ";.", k, "-transfer-panel,.", k, "-transfer-arrows{display:inline-block;vertical-align:middle;}.", k, "-transfer-panel{width:", transfer.panel.width, ";border:", transfer.panel.border, ";border-radius:", transfer.panel.borderRadius, ";height:", transfer.panel.height, ";display:inline-flex;flex-direction:column;overflow:hidden;}.", k, "-transfer-title{line-height:", transfer.title.lineHeight, ";background:", transfer.title.bgColor, ";padding:", transfer.title.padding, ";.", k, "-checkbox{color:", transfer.title.color, ";font-size:", transfer.title.fontSize, ";}}.", k, "-transfer-count{float:right;margin-left:", transfer.title.countGap, ";}.", k, "-transfer-list{overflow:auto;position:relative;flex:1;}.", k, "-transfer-item{color:", transfer.item.color, ";background:", transfer.item.bgColor, ";user-select:none;width:100%;&:not(.", k, "-disabled):hover{background:", transfer.item.hoverBgColor, ";color:", transfer.item.hoverColor, ";p{color:", transfer.item.hoverColor, ";}}.", k, "-checkbox{padding:", transfer.item.padding, ";display:flex;}p{margin:0;color:", transfer.item.descColor, ";}&.", k, "-disabled{p{color:", theme.color.disabled, ";}}}.", k, "-input{width:auto;margin:", transfer.searchGap, ";}.", k, "-transfer-arrows{.", k, "-btn{display:flex;margin:", transfer.arrow.gap, ";}}.", k, "-transfer-pagination-wrapper{padding:", transfer.pagination.padding, ";display:flex;align-items:center;justify-content:center;}");
 });

package/components/transfer/useCheck.js

@@ -41,7 +41,8 @@ export function useCheck(_ref) {
     } else if (e.shiftKey) {
       var _context2;
       e.preventDefault();
-      var values = getShowedData(model);
+      var allData = getShowedData(model);
+      var values = instance.get('pagination') ? instance.paginationState.getPagedData(model, allData) : allData;
       var checkedKeys = _sliceInstanceProperty(_context2 = instance.get(model + "CheckedKeys")).call(_context2, 0);
       var lastEndIndex = endIndex;
       var keyName = instance.get('keyName');

package/components/transfer/usePagination.d.ts

@@ -0,0 +1,12 @@
+import type { Model } from './useFilter';
+import { Pagination, PaginationChangeData } from '../pagination';
+export declare function usePagination(): {
+    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<Pagination>;
+    rightPaginationRef: import('intact-vue-next').RefObject<Pagination>;
+};

package/components/transfer/usePagination.js

@@ -0,0 +1,79 @@
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import { useInstance, createRef } from 'intact-vue-next';
+import { useState } from '../../hooks/useState';
+import { Pagination } from '../pagination';
+import { isObject } from 'intact-shared';
+import { useReceive } from '../../hooks/useReceive';
+var defaultPagination = Pagination.defaults();
+export function usePagination() {
+  var instance = useInstance();
+  var leftValue = useState(defaultPagination.value);
+  var leftLimit = useState(defaultPagination.limit);
+  var rightValue = useState(defaultPagination.value);
+  var rightLimit = useState(defaultPagination.limit);
+  var leftPaginationRef = createRef();
+  var rightPaginationRef = createRef();
+  useReceive(['pagination'], function () {
+    var pagination = instance.get('pagination');
+    if (isObject(pagination)) {
+      if (pagination.value !== undefined) {
+        leftValue.set(pagination.value);
+        rightValue.set(pagination.value);
+      }
+      if (pagination.limit !== undefined) {
+        leftLimit.set(pagination.limit);
+        rightLimit.set(pagination.limit);
+      }
+    }
+  });
+  instance.watch('leftKeywords', function () {
+    leftValue.set(1);
+    ;
+  });
+  instance.watch('rightKeywords', function () {
+    rightValue.set(1);
+  });
+  // 计算分页数据
+  function getPagedData(model, allData) {
+    if (!instance.get('pagination')) {
+      return allData;
+    }
+    var value = model === 'left' ? leftValue.value : rightValue.value;
+    var limit = model === 'left' ? leftLimit.value : rightLimit.value;
+    var totalPages = Math.ceil(allData.length / limit) || 1;
+    // 如果当前页超出总页数，跳转到最后一页
+    var currentPage = value;
+    if (currentPage > totalPages && totalPages > 0) {
+      currentPage = totalPages;
+      if (model === 'left') {
+        leftValue.set(currentPage);
+      } else {
+        rightValue.set(currentPage);
+      }
+    }
+    // 切片数据
+    var index = (currentPage - 1) * limit;
+    return _sliceInstanceProperty(allData).call(allData, index, index + limit);
+  }
+  function onChange(model, data) {
+    if (model === 'left') {
+      leftValue.set(data.value);
+      leftLimit.set(data.limit);
+    } else {
+      rightValue.set(data.value);
+      rightLimit.set(data.limit);
+    }
+    // 触发分页事件
+    instance.trigger('page', model, data);
+  }
+  return {
+    getPagedData: getPagedData,
+    leftValue: leftValue,
+    leftLimit: leftLimit,
+    rightValue: rightValue,
+    rightLimit: rightLimit,
+    onChange: onChange,
+    leftPaginationRef: leftPaginationRef,
+    rightPaginationRef: rightPaginationRef
+  };
+}

package/components/types.d.ts

@@ -1,11 +1,13 @@
 export type Sizes = 'large' | 'default' | 'small' | 'mini';
 export type Colors = 'default' | 'primary' | 'warning' | 'danger' | 'success';
-export interface CommonInputHTMLAttributes {
-    autocomplete?: string;
+export interface CommonFormElementAttributes {
     autofocus?: boolean;
     form?: string;
     name?: string;
     required?: boolean;
+}
+export interface CommonInputHTMLAttributes extends CommonFormElementAttributes {
+    autocomplete?: string;
     maxlength?: string | number;
 }
 export type Events<T> = Record<keyof T, true>;

package/components/upload/ajaxUploader.d.ts

@@ -1,5 +1,6 @@
 export type Options = {
     action?: string;
+    timeout?: number;
     headers?: Record<string | number, string>;
     data: any;
     withCredentials?: boolean;

package/components/upload/ajaxUploader.js

@@ -23,6 +23,9 @@ export function request(options) {
   xhr.onerror = function (e) {
     return options.onError(getError(options, xhr), xhr);
   };
+  xhr.ontimeout = function () {
+    return options.onError(getError(options, xhr), xhr);
+  };
   xhr.onload = function () {
     if (xhr.status < 200 || xhr.status >= 300) {
       return options.onError(getError(options, xhr), xhr);
@@ -30,6 +33,9 @@ export function request(options) {
     options.onSuccess(getBody(xhr), xhr);
   };
   xhr.open('post', options.action || '', true);
+  if (options.timeout && options.timeout > 0) {
+    xhr.timeout = options.timeout;
+  }
   if (options.withCredentials && 'withCredentials' in xhr) {
     xhr.withCredentials = true;
   }

package/components/xmarkdown/index.d.ts

@@ -0,0 +1,2 @@
+export * from './xmarkdown';
+export type { XMarkdownFormulaDelimiter, XMarkdownPlugin, XMarkdownRenderTreeNode, XMarkdownRenderTreeTransform, XMarkdownRenderTreeTransformContext, XMarkdownCodeBlockRenderContext, XMarkdownCodeBlockRenderer, XMarkdownCodeBlockRenderers, XMarkdownTagAttrs, XMarkdownTagAttrsContext, XMarkdownTagAttrsGetter, XMarkdownTagRenderContext, XMarkdownTagRenderers, } from './markdown';

package/components/xmarkdown/index.js

@@ -0,0 +1 @@
+export * from './xmarkdown';

package/components/xmarkdown/index.spec.d.ts

@@ -0,0 +1 @@
+export {};