@king-design/vue 2.0.17-beta.0 → 2.1.0

package/components/table/useChecked.js

@@ -2,6 +2,7 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/i
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
 import { useInstance } from 'intact-vue-next';
+import { watchState } from '../../hooks/useState';
 import { toggleArray } from '../utils';
 export var AllCheckedStatus;
 
@@ -11,7 +12,7 @@ export var AllCheckedStatus;
   AllCheckedStatus[AllCheckedStatus["None"] = 2] = "None";
 })(AllCheckedStatus || (AllCheckedStatus = {}));
 
-export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, loopData) {
+export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, loopData, data) {
   var instance = useInstance();
   var allStatus = [];
 
@@ -21,7 +22,10 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
 
   function toggleChecked(key, rowIndex) {
     if (instance.get('checkType') === 'checkbox') {
-      instance.set('checkedKeys', toggleArray(instance.get('checkedKeys'), key));
+      instance.set('checkedKeys', toggleArray(instance.get('checkedKeys'), key)); // trigger check event for checkbox,
+      // radio check event trigger in onChangeChecked function
+
+      triggerEvent(isChecked(key), key, rowIndex);
     } else {
       if (isChecked(key)) return;
       var grid = getGrid();
@@ -34,7 +38,7 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
         }
       }
 
-      onChangeChecked(rowIndex, true);
+      onChangeChecked(rowIndex, true, key);
     }
   }
 
@@ -61,6 +65,7 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
 
   function toggleCheckedAll(v) {
     instance.set('checkedKeys', getCheckedAllOrUncheckedAllKeys(v));
+    instance.trigger(v ? 'checkAll' : 'uncheckAll');
   }
   /**
    * keep the original keys which don't exist in the enableKeys,
@@ -92,12 +97,11 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
     allStatus = [];
 
     var _instance$get2 = instance.get(),
-        data = _instance$get2.data,
         rowKey = _instance$get2.rowKey,
         checkType = _instance$get2.checkType,
         merge = _instance$get2.merge;
 
-    if (!data || !data.length) return;
+    if (!data.value || !data.value.length) return;
     var allKeys = getAllKeys();
     allKeys.forEach(function (key) {
       var disabled = isDisabledKey(key);
@@ -161,7 +165,7 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
     }
   }
 
-  function onChangeChecked(rowIndex, v) {
+  function onChangeChecked(rowIndex, v, key) {
     var _context;
 
     // should check or uncheck all grouped rows
@@ -172,9 +176,9 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
 
     if (checkType === 'radio') {
       for (var i = 0; i < checkedKeys.length; i++) {
-        var key = checkedKeys[i]; // FIXME: should ignore the disabled status, if we remove the radio keys
+        var _key = checkedKeys[i]; // FIXME: should ignore the disabled status, if we remove the radio keys
 
-        if (isDisabledKey(key)) continue;
+        if (isDisabledKey(_key)) continue;
 
         _spliceInstanceProperty(checkedKeys).call(checkedKeys, i, 1);
 
@@ -189,27 +193,34 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
     if ((rowspan = grid[rowIndex]) && (rowspan = rowspan[0]) && (rowspan = rowspan.spans) && (rowspan = rowspan.rowspan) && rowspan > 1) {
       for (var _i = rowIndex; _i < rowspan + rowIndex; _i++) {
         var status = allStatus[_i];
-        var _key = allKeys[_i];
+        var _key2 = allKeys[_i];
 
         if (!status.disabled) {
-          addOrRemove(checkedKeys, _key, v);
+          addOrRemove(checkedKeys, _key2, v);
         }
       }
     } else {
       addOrRemove(checkedKeys, allKeys[rowIndex], v);
     }
 
-    instance.set('checkedKeys', checkedKeys);
+    instance.set('checkedKeys', checkedKeys); // onChangeChecked will be called in clickRow and check in Row component
+
+    triggerEvent(v, key, rowIndex);
   }
 
   function getAllStatus() {
     return allStatus;
   }
 
+  function triggerEvent(isChecked, key, rowIndex) {
+    instance.trigger(isChecked ? 'checkRow' : 'uncheckRow', data.value[rowIndex], rowIndex, key);
+  }
+
   instance.on('$receive:children', updateAllCheckedStatus);
   instance.on('$change:checkedKeys', updateAllCheckedStatus); // for draggable
 
-  instance.on('$change:data', updateAllCheckedStatus);
+  watchState(data, updateAllCheckedStatus); // instance.on('$change:data', updateAllCheckedStatus);
+
   instance.on('clickRow', function (data, index, key) {
     if (instance.get('rowCheckable') && instance.get('checkType') !== 'none') {
       toggleChecked(key, index);

package/components/table/useDisableRow.d.ts

@@ -1,6 +1,7 @@
 import type { TableRowKey } from './table';
 import type { useTree } from './useTree';
-export declare function useDisableRow(loopData: ReturnType<typeof useTree>['loopData']): {
+import { State } from '../../hooks/useState';
+export declare function useDisableRow(loopData: ReturnType<typeof useTree>['loopData'], data: State<any[] | undefined>): {
     isDisabled: (data: any, index: number, key: TableRowKey) => boolean;
     getEnableKeys: () => TableRowKey[];
     isDisabledKey: (key: TableRowKey) => boolean;

package/components/table/useDisableRow.js

@@ -1,5 +1,6 @@
 import { useInstance } from 'intact-vue-next';
-export function useDisableRow(loopData) {
+import { watchState } from '../../hooks/useState';
+export function useDisableRow(loopData, data) {
   var instance = useInstance();
   var enabledKeys = [];
   var disabledKeys = [];
@@ -45,9 +46,8 @@ export function useDisableRow(loopData) {
     return allKeys;
   }
 
-  instance.on('$receive:children', setDisabledKeys); // for draggable
-
-  instance.on('$change:data', setDisabledKeys);
+  instance.on('$receive:children', setDisabledKeys);
+  watchState(data, setDisabledKeys);
   return {
     isDisabled: isDisabled,
     getEnableKeys: getEnableKeys,

package/components/table/useDraggable.d.ts

@@ -1,8 +1,9 @@
 import type { TableRowKey } from './table';
+import { State } from '../../hooks/useState';
 import type { TableRow } from './row';
-export declare function useDraggable(): {
+export declare function useDraggable(data: State<unknown[] | undefined>): {
     onRowDragStart: (e: MouseEvent, tableRow: TableRow) => void;
     onRowDragOver: (e: MouseEvent, tableRow: TableRow) => void;
     onRowDragEnd: (e: MouseEvent, tableRow: TableRow) => void;
-    draggingKey: import("../../hooks/useState").State<TableRowKey | null>;
+    draggingKey: State<TableRowKey | null>;
 };

package/components/table/useDraggable.js

@@ -2,7 +2,7 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slic
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
 import { useInstance, nextTick } from 'intact-vue-next';
 import { useState } from '../../hooks/useState';
-export function useDraggable() {
+export function useDraggable(data) {
   var instance = useInstance();
   var draggingKey = useState(null);
   var originIndex;
@@ -13,7 +13,7 @@ export function useDraggable() {
     draggingIndex = originIndex = tableRow.get('index');
     var key = tableRow.get('key');
     draggingKey.set(key);
-    originData = instance.get('data');
+    originData = data.value;
     instance.trigger('dragstart', {
       key: key,
       from: draggingIndex
@@ -28,20 +28,23 @@ export function useDraggable() {
     var newIndex = tableRow.get('index');
     if (newIndex === draggingIndex) return; // swap data
 
-    var data = _sliceInstanceProperty(_context = instance.get('data')).call(_context);
+    var newData = _sliceInstanceProperty(_context = data.value).call(_context);
 
-    var item = _spliceInstanceProperty(data).call(data, draggingIndex, 1)[0];
+    var item = _spliceInstanceProperty(newData).call(newData, draggingIndex, 1)[0];
 
-    _spliceInstanceProperty(data).call(data, newIndex, 0, item);
+    _spliceInstanceProperty(newData).call(newData, newIndex, 0, item);
 
     draggingIndex = newIndex;
-    instance.set('data', data);
+    data.set(newData);
   }
 
   function onRowDragEnd(e, tableRow) {
-    e.preventDefault();
-    instance.set('data', originData);
+    e.preventDefault(); // revert to origin data, then set to new data to trigger animation
+
+    var newData = data.value;
+    data.set(originData);
     nextTick(function () {
+      data.set(newData);
       draggingKey.set(null);
       instance.trigger('dragend', {
         key: tableRow.get('key'),

package/components/table/useGroup.js

@@ -12,6 +12,9 @@ export function useGroup() {
   var instance = useInstance();
   var keywords = useState('');
   var filteredGroup = useState(instance.get('group'));
+  instance.on('$receive:group', function (group) {
+    return filteredGroup.set(group);
+  });
 
   function onSelect(value, groupValue, onChange) {
     var _instance$get = instance.get(),

package/components/table/useMerge.d.ts

@@ -1,5 +1,6 @@
 import { Props } from 'intact-vue-next';
 import type { TableColumnProps } from './column';
+import { State } from '../../hooks/useState';
 export declare type TableMerge<T = any, CheckType = 'checkbox'> = (row: T, column: CheckType extends 'none' ? Props<TableColumnProps> : Props<TableColumnProps> | null, rowIndex: number, columnIndex: number) => TableMergeConfig | undefined;
 export declare type TableMergeConfig = {
     colspan?: number;
@@ -10,6 +11,6 @@ export declare type TableGridItem = {
     spans: TableMergeConfig | undefined;
 };
 export declare type TableGrid = TableGridItem[][];
-export declare function useMerge(getCols: () => Props<TableColumnProps>[]): {
+export declare function useMerge(getCols: () => Props<TableColumnProps>[], data: State<unknown[] | undefined>): {
     getGrid: () => TableGrid;
 };

package/components/table/useMerge.js

@@ -1,5 +1,6 @@
 import { useInstance } from 'intact-vue-next';
-export function useMerge(getCols) {
+import { watchState } from '../../hooks/useState';
+export function useMerge(getCols, data) {
   var instance = useInstance();
   var grid = [];
 
@@ -8,12 +9,11 @@ export function useMerge(getCols) {
 
     var _instance$get = instance.get(),
         merge = _instance$get.merge,
-        data = _instance$get.data,
         checkType = _instance$get.checkType;
 
-    if (!data || !data.length || !merge) return;
+    if (!data.value || !data.value.length || !merge) return;
     var cols = getCols();
-    data.forEach(function (data, rowIndex) {
+    data.value.forEach(function (data, rowIndex) {
       var currentRow = [];
       grid.push(currentRow);
       var columnIndexOffset = 0;
@@ -71,6 +71,7 @@ export function useMerge(getCols) {
   }
 
   instance.on('$receive:children', handleSpans);
+  watchState(data, handleSpans);
   return {
     getGrid: getGrid
   };

package/components/table/usePagination.d.ts

@@ -0,0 +1,8 @@
+import { Pagination, PaginationChangeData } from '../pagination';
+export declare function usePagination(): {
+    data: import("../../hooks/useState").State<any[] | undefined>;
+    value: import("../../hooks/useState").State<number>;
+    limit: import("../../hooks/useState").State<number>;
+    onChange: (data: PaginationChangeData) => void;
+    paginationRef: import('intact-vue-next').RefObject<Pagination>;
+};

package/components/table/usePagination.js

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+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 data = useState(instance.get('data'));
+  var value = useState(defaultPagination.value);
+  var limit = useState(defaultPagination.limit);
+  var paginationRef = createRef(); // for unit test
+
+  useReceive(['data', 'pagination'], function () {
+    handleData();
+  });
+
+  function handleData() {
+    var _instance$get = instance.get(),
+        _data = _instance$get.data,
+        pagination = _instance$get.pagination;
+
+    if (!_data) {
+      data.set(undefined);
+      return;
+    }
+
+    if (!pagination) {
+      data.set(_data);
+      return;
+    }
+
+    if (isObject(pagination)) {
+      if (pagination.value) {
+        value.set(pagination.value);
+      }
+
+      if (pagination.limit) {
+        limit.set(pagination.limit);
+      }
+    }
+
+    updateDataByPage();
+  }
+
+  function updateDataByPage() {
+    var _instance$get2 = instance.get(),
+        _data = _instance$get2.data;
+
+    var index = (value.value - 1) * limit.value;
+    data.set(_sliceInstanceProperty(_data).call(_data, index, index + limit.value));
+  }
+
+  function onChange(data) {
+    var _instance$get3 = instance.get(),
+        pagination = _instance$get3.pagination;
+
+    value.set(data.value);
+    limit.set(data.limit);
+    updateDataByPage();
+
+    if (isObject(pagination)) {
+      instance.set('pagination', _extends({}, pagination, {
+        value: value.value,
+        limit: limit.value
+      }));
+    }
+
+    instance.trigger('changePage', data);
+  }
+
+  return {
+    data: data,
+    value: value,
+    limit: limit,
+    onChange: onChange,
+    paginationRef: paginationRef
+  };
+}

package/components/table/useTree.d.ts

@@ -1,5 +1,6 @@
 import type { TableRowKey } from './table';
-export declare function useTree(): {
+import { State } from '../../hooks/useState';
+export declare function useTree(data: State<any[] | undefined>): {
     isSpreaded: (key: TableRowKey) => boolean;
     toggleSpreadRow: (key: TableRowKey) => void;
     loopData: <T>(cb: (value: any, index: number, level: number, meta: T | null) => T, shouldBreak?: boolean) => void;

package/components/table/useTree.js

@@ -1,7 +1,7 @@
 import { useInstance } from 'intact-vue-next';
 import { inArray } from './useChecked';
 import { toggleArray } from '../utils';
-export function useTree() {
+export function useTree(data) {
   var instance = useInstance();
 
   function isSpreaded(key) {
@@ -18,10 +18,9 @@ export function useTree() {
     }
 
     var _instance$get = instance.get(),
-        childrenKey = _instance$get.childrenKey,
-        data = _instance$get.data;
+        childrenKey = _instance$get.childrenKey;
 
-    loopDataWithChildrenKey(data, childrenKey, cb, shouldBreak);
+    loopDataWithChildrenKey(data.value, childrenKey, cb, shouldBreak);
   }
 
   return {

package/components/tooltip/index.spec.js

@@ -540,8 +540,10 @@ describe('Tooltip', function () {
 
               _proto.mounted = function mounted() {
                 var element = findDomFromVNode(this.$lastInput, true);
-                var windowHeight = window.innerHeight || document.documentElement.clientHeight;
-                element.parentNode.style.height = windowHeight * 2 + "px";
+                var style = element.style;
+                style.position = 'fixed';
+                style.top = '-200px'; // const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+                // (element.parentNode as HTMLElement).style.height = `${windowHeight * 2}px`;
               };
 
               return Demo;
@@ -555,23 +557,20 @@ describe('Tooltip', function () {
               };
             };
 
-            _mount9 = mount(Demo), i = _mount9[0];
-            _context11.next = 6;
-            return wait(500);
+            _mount9 = mount(Demo), i = _mount9[0]; // await wait(500);
+            // window.scrollTo(0, 10000);
 
-          case 6:
-            window.scrollTo(0, 10000);
             i.set('show', true);
-            _context11.next = 10;
+            _context11.next = 7;
             return wait(500);
 
-          case 10:
+          case 7:
             content = getElement('.k-tooltip-content');
             console.log(content.outerHTML);
             console.log(_JSON$stringify(content.getBoundingClientRect()));
             expect(content.getBoundingClientRect().top < 0).to.be.true;
 
-          case 14:
+          case 11:
           case "end":
             return _context11.stop();
         }

package/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.17-beta.0
+ * @king-design v2.1.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -9,7 +9,7 @@
  */
 export { _$, localize } from './i18n';
 export { bind } from './components/utils';
-export { setTheme } from './styles/theme';
+export { setTheme, theme } from './styles/theme';
 export * from './components/affix';
 export * from './components/badge';
 export * from './components/breadcrumb';
@@ -57,7 +57,7 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export declare const version = "2.0.17-beta.0";
+export declare const version = "2.1.0";
 
 
 export {normalize} from 'intact-vue-next';

package/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.17-beta.0
+ * @king-design v2.1.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -9,7 +9,7 @@
  */
 export { _$, localize } from './i18n';
 export { bind } from './components/utils';
-export { setTheme } from './styles/theme';
+export { setTheme, theme } from './styles/theme';
 /* generate start */
 
 export * from './components/affix';
@@ -59,7 +59,7 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export var version = '2.0.17-beta.0';
+export var version = '2.1.0';
 /* generate end */
 
 export {normalize} from 'intact-vue-next';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/vue",
-  "version": "2.0.17-beta.0",
+  "version": "2.1.0",
   "description": "King-Design UI components for Vue3.0.",
   "keywords": [
     "component",
@@ -38,7 +38,7 @@
     "dayjs": "^1.10.7",
     "downloadjs": "^1.4.7",
     "enquire.js": "^2.1.6",
-    "intact-vue-next": "^3.0.16",
+    "intact-vue-next": "^3.0.18",
     "monaco-editor": "^0.26.1",
     "mxgraphx": "^4.0.7",
     "resize-observer-polyfill": "^1.5.1",