@king-design/intact 3.1.4 → 3.1.6

package/components/cascader/index.spec.ts

@@ -135,6 +135,14 @@ describe('Cascader', () => {
         dropdown1.querySelector<HTMLElement>('.k-dropdown-item')!.click();
         await wait();
         expect(instance.get('value')).to.eql(['hunan', 'yueyang', 'yueyanglou']);
+
+        // show again to test the position
+        input.click();
+        await wait();
+        const [_dropdown1, _dropdown2, _dropdown3] = getElements('.k-cascader-menu')!;
+        expect(_dropdown1.style.top).not.eql('0px');
+        expect(_dropdown2.style.top).not.eql('0px');
+        expect(_dropdown3.style.top).not.eql('0px');
     });
 
     it('no data for init data', async () => {
@@ -261,4 +269,45 @@ describe('Cascader', () => {
         expect(element.innerHTML).to.matchSnapshot();
         expect(instance.get('value')).to.eql(['beijing', 'haidian']);
     });
+
+    it('should select correct value', async () => {
+         class Demo extends Component {
+            static template = `
+                const {Cascader} = this;
+                <Cascader data={this.get('data')} v-model="value" />
+            `;
+            static defaults() {
+                return {
+                    value: ['beijing', 'haidian'],
+                    data: [
+                        {
+                            value: 'beijing',
+                            label: '北京',
+                            children: [
+                                {
+                                    value: 'haidian',
+                                    label: '海淀区'
+                                },
+                            ]
+                        },
+                        {
+                            value: 'hunan',
+                            label: '湖南',
+                        },
+                    ]
+                }
+            }
+            private Cascader = Cascader;
+        }
+
+        const [instance, element] = mount(Demo);
+        dispatchEvent(element, 'click');
+        await wait();
+
+        const [dropdown1, dropdown2] = getElements('.k-cascader-menu');
+        const [item1, item2] = dropdown1.querySelectorAll(':scope > .k-dropdown-item');
+        dispatchEvent(item2, 'click');
+        await wait();
+        expect(instance.get('value')).to.eql(['hunan']);
+    });
 });

package/components/cascader/useValue.ts

@@ -80,7 +80,7 @@ export function useValue() {
         // maybe the showedValue has the leaf value when we set it on show menu,
         // if we select by clicking, the showedValue has not the leaf value,
         // no matter which case, we set the last value by level
-        const newValue = showedValue.value.slice(0);
+        const newValue = showedValue.value.slice(0, level);
         newValue[level] = value;
         setValue(newValue);
     }

package/components/datepicker/index.spec.ts

@@ -533,6 +533,9 @@ describe('Datepicker', () => {
             const first = calendar1.querySelectorAll('.k-calendar-item')[17] as HTMLElement;
             const second = calendar2.querySelectorAll('.k-calendar-item')[17] as HTMLElement;
             first.click();
+            // should stay at date panel
+            await wait();
+            expect(calendar1.querySelector('.k-days')).be.exist;
             second.click();
             await wait();
             dispatchEvent(calendar1.querySelector<HTMLElement>('.k-scroll-select-wrapper .k-active')!.nextElementSibling!, 'click');

package/components/datepicker/useValue.ts

@@ -75,7 +75,15 @@ export function useValue(
         setValue(_value, false);
 
         if (type === 'datetime') {
-            panel.changePanel(PanelTypes.Time, flag);
+            if (range) {
+                // only change to time panel after selected start and end date
+                if ((_value as StateValueRange).length === 2) {
+                    panel.changePanel(PanelTypes.Time, PanelFlags.Start);
+                    panel.changePanel(PanelTypes.Time, PanelFlags.End);
+                }
+            } else {
+                panel.changePanel(PanelTypes.Time, flag);
+            }
         } else if (!multiple && (!range || (_value as StateValueRange).length === 2)) {
             instance.hide();
         }

package/components/dropdown/menu.ts

@@ -7,6 +7,7 @@ import {useMenuKeyboard} from './useKeyboard';
 import {useMouseOutsidable} from '../../hooks/useMouseOutsidable';
 import {FeedbackCallback} from './usePosition';
 import { useConfigContext } from '../config';
+import { usePositionForDropdownMenu } from './usePosition';
 
 export interface DropdownMenuProps { }
 export interface DropdownMenuEvents { }
@@ -31,6 +32,7 @@ export class DropdownMenu<
     init() {
         provide(DROPDOWN_MENU, this);
         useMouseOutsidable(this.elementRef);
+        usePositionForDropdownMenu();
     }
 
     // no matter what the trigger is, we should show menu when enter into it.
@@ -80,4 +82,4 @@ function useKeyboardForDropdownMenu(dropdown: Dropdown) {
     });
 
     return {lock};
-}
+}

package/components/dropdown/usePosition.ts

@@ -1,5 +1,5 @@
-import {useInstance, findDomFromVNode} from 'intact';
-import type {Dropdown} from './';
+import {useInstance, findDomFromVNode, onBeforeUnmount} from 'intact';
+import type {Dropdown, DropdownMenu} from './';
 import {Options, position, Feedback} from '../position';
 import {noop, isObject, isFunction} from 'intact-shared';
 import { isEqualObject } from '../utils';
@@ -114,3 +114,15 @@ export function usePosition() {
 
     return {handle, positioned};
 }
+
+export function usePositionForDropdownMenu() {
+    const instance = useInstance() as DropdownMenu;
+    /**
+     * Meybe the DropdownMenu has changed by specified key
+     * so, we must reset the positioned.value beforeUnmount
+     * #956
+     */
+    onBeforeUnmount(() => {
+        instance.dropdown.positionHook.positioned.value = false;
+    });
+}

package/components/select/useFocusout.ts

@@ -3,7 +3,7 @@ import {BaseSelect} from './base';
 
 /**
  * don't trigger focusout event when layer is showing,
- * only trigger focusout when it hidden to make FormItem to validate it
+ * only trigger focusout when it is hidden to make FormItem to validate it
  * #449
  */
 export function useFocusout() {

package/components/table/demos/pagination.md

@@ -9,6 +9,9 @@ order: 30
 > 需要给Table设置rowKey属性，否则选择的行翻页后依然会保留选中状态，因为不设置key，则使用索引当key，
 > 只要当前选中的索引在下一页存在，则会依然选中
 
+> 该功能需要将所有数据一次性传给Table，Table自动做分页处理，对于每次分页单独请求新数据的情况，请不要使用该功能，
+> 而是配合单独的Pagination组件处理
+
 ```vdt
 import {Table, TableColumn, Switch} from 'kpc';
 

package/es/components/cascader/index.spec.js

@@ -160,7 +160,7 @@ describe('Cascader', function () {
     }, _callee5);
   })));
   it('filter', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
-    var _mount5, instance, element, input, dropdown, dropdown1;
+    var _mount5, instance, element, input, dropdown, dropdown1, _getElements2, _dropdown1, _dropdown2, _dropdown3;
     return _regeneratorRuntime.wrap(function _callee6$(_context6) {
       while (1) switch (_context6.prev = _context6.next) {
         case 0:
@@ -207,7 +207,16 @@ describe('Cascader', function () {
           return wait();
         case 34:
           expect(instance.get('value')).to.eql(['hunan', 'yueyang', 'yueyanglou']);
-        case 35:
+          // show again to test the position
+          input.click();
+          _context6.next = 38;
+          return wait();
+        case 38:
+          _getElements2 = getElements('.k-cascader-menu'), _dropdown1 = _getElements2[0], _dropdown2 = _getElements2[1], _dropdown3 = _getElements2[2];
+          expect(_dropdown1.style.top).not.eql('0px');
+          expect(_dropdown2.style.top).not.eql('0px');
+          expect(_dropdown3.style.top).not.eql('0px');
+        case 42:
         case "end":
           return _context6.stop();
       }
@@ -234,7 +243,7 @@ describe('Cascader', function () {
     }, _callee7);
   })));
   it('duplicated sub data', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
-    var Demo, _mount7, instance, element, _getElements2, dropdown1, dropdown2, _dropdown1$querySelec4, item1, item2, _dropdown2$querySelec3, item21, dropdown3, _dropdown3$querySelec2, item31;
+    var Demo, _mount7, instance, element, _getElements3, dropdown1, dropdown2, _dropdown1$querySelec4, item1, item2, _dropdown2$querySelec3, item21, dropdown3, _dropdown3$querySelec2, item31;
     return _regeneratorRuntime.wrap(function _callee8$(_context9) {
       while (1) switch (_context9.prev = _context9.next) {
         case 0:
@@ -278,7 +287,7 @@ describe('Cascader', function () {
           _context9.next = 6;
           return wait();
         case 6:
-          _getElements2 = getElements('.k-cascader-menu'), dropdown1 = _getElements2[0], dropdown2 = _getElements2[1];
+          _getElements3 = getElements('.k-cascader-menu'), dropdown1 = _getElements3[0], dropdown2 = _getElements3[1];
           _dropdown1$querySelec4 = dropdown1.querySelectorAll(':scope > .k-dropdown-item'), item1 = _dropdown1$querySelec4[0], item2 = _dropdown1$querySelec4[1];
           expect(item1.classList.contains('k-selected')).to.be.true;
           expect(item2.classList.contains('k-selected')).to.be.false;
@@ -370,4 +379,58 @@ describe('Cascader', function () {
       }
     }, _callee9);
   })));
+  it('should select correct value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var Demo, _mount9, instance, element, _getElements4, dropdown1, dropdown2, _dropdown1$querySelec6, item1, item2;
+    return _regeneratorRuntime.wrap(function _callee10$(_context13) {
+      while (1) switch (_context13.prev = _context13.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component3) {
+            _inheritsLoose(Demo, _Component3);
+            function Demo() {
+              var _context12;
+              var _this3;
+              for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+                args[_key3] = arguments[_key3];
+              }
+              _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context12 = [this]).call(_context12, args)) || this;
+              _this3.Cascader = Cascader;
+              return _this3;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                value: ['beijing', 'haidian'],
+                data: [{
+                  value: 'beijing',
+                  label: '北京',
+                  children: [{
+                    value: 'haidian',
+                    label: '海淀区'
+                  }]
+                }, {
+                  value: 'hunan',
+                  label: '湖南'
+                }]
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const {Cascader} = this;\n                <Cascader data={this.get('data')} v-model=\"value\" />\n            ";
+          _mount9 = mount(Demo), instance = _mount9[0], element = _mount9[1];
+          dispatchEvent(element, 'click');
+          _context13.next = 6;
+          return wait();
+        case 6:
+          _getElements4 = getElements('.k-cascader-menu'), dropdown1 = _getElements4[0], dropdown2 = _getElements4[1];
+          _dropdown1$querySelec6 = dropdown1.querySelectorAll(':scope > .k-dropdown-item'), item1 = _dropdown1$querySelec6[0], item2 = _dropdown1$querySelec6[1];
+          dispatchEvent(item2, 'click');
+          _context13.next = 11;
+          return wait();
+        case 11:
+          expect(instance.get('value')).to.eql(['hunan']);
+        case 12:
+        case "end":
+          return _context13.stop();
+      }
+    }, _callee10);
+  })));
 });

package/es/components/cascader/useValue.js

@@ -74,7 +74,7 @@ export function useValue() {
     // maybe the showedValue has the leaf value when we set it on show menu,
     // if we select by clicking, the showedValue has not the leaf value,
     // no matter which case, we set the last value by level
-    var newValue = _sliceInstanceProperty(_context4 = showedValue.value).call(_context4, 0);
+    var newValue = _sliceInstanceProperty(_context4 = showedValue.value).call(_context4, 0, level);
     newValue[level] = value;
     setValue(newValue);
   }

package/es/components/datepicker/index.spec.js

@@ -801,22 +801,27 @@ describe('Datepicker', function () {
             first = calendar1.querySelectorAll('.k-calendar-item')[17];
             second = calendar2.querySelectorAll('.k-calendar-item')[17];
             first.click();
+            // should stay at date panel
+            _context21.next = 12;
+            return wait();
+          case 12:
+            expect(calendar1.querySelector('.k-days')).be.exist;
             second.click();
-            _context21.next = 13;
+            _context21.next = 16;
             return wait();
-          case 13:
+          case 16:
             dispatchEvent(calendar1.querySelector('.k-scroll-select-wrapper .k-active').nextElementSibling, 'click');
             dispatchEvent(calendar2.querySelector('.k-scroll-select-wrapper .k-active').previousElementSibling, 'click');
             content.querySelector('.k-datepicker-footer .k-btn').click();
-            _context21.next = 18;
+            _context21.next = 21;
             return wait();
-          case 18:
+          case 21:
             value2 = instance.get('time');
             expect(value2).have.lengthOf(2);
             expect(_mapInstanceProperty(value2).call(value2, function (item) {
               return item.split(' ')[1];
             })).eql(['01:00:00', '22:59:59']);
-          case 21:
+          case 24:
           case "end":
             return _context21.stop();
         }

package/es/components/datepicker/useValue.js

@@ -61,7 +61,15 @@ export function useValue(formats, disabled, panel) {
     }
     setValue(_value, false);
     if (type === 'datetime') {
-      panel.changePanel(PanelTypes.Time, flag);
+      if (range) {
+        // only change to time panel after selected start and end date
+        if (_value.length === 2) {
+          panel.changePanel(PanelTypes.Time, PanelFlags.Start);
+          panel.changePanel(PanelTypes.Time, PanelFlags.End);
+        }
+      } else {
+        panel.changePanel(PanelTypes.Time, flag);
+      }
     } else if (!multiple && (!range || _value.length === 2)) {
       instance.hide();
     }

package/es/components/dropdown/menu.js

@@ -9,6 +9,7 @@ import { useTransition } from './useTransition';
 import { useMenuKeyboard } from './useKeyboard';
 import { useMouseOutsidable } from '../../hooks/useMouseOutsidable';
 import { useConfigContext } from '../config';
+import { usePositionForDropdownMenu } from './usePosition';
 export var DROPDOWN_MENU = 'DropdownMenu';
 export var DropdownMenu = /*#__PURE__*/function (_Component) {
   _inheritsLoose(DropdownMenu, _Component);
@@ -32,6 +33,7 @@ export var DropdownMenu = /*#__PURE__*/function (_Component) {
   _proto.init = function init() {
     provide(DROPDOWN_MENU, this);
     useMouseOutsidable(this.elementRef);
+    usePositionForDropdownMenu();
   }
   // no matter what the trigger is, we should show menu when enter into it.
   ;

package/es/components/dropdown/usePosition.d.ts

@@ -6,3 +6,4 @@ export declare function usePosition(): {
         value: boolean;
     };
 };
+export declare function usePositionForDropdownMenu(): void;

package/es/components/dropdown/usePosition.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import { useInstance, findDomFromVNode } from 'intact';
+import { useInstance, findDomFromVNode, onBeforeUnmount } from 'intact';
 import { position } from '../position';
 import { noop, isObject, isFunction } from 'intact-shared';
 import { isEqualObject } from '../utils';
@@ -112,4 +112,15 @@ export function usePosition() {
     handle: handle,
     positioned: positioned
   };
+}
+export function usePositionForDropdownMenu() {
+  var instance = useInstance();
+  /**
+   * Meybe the DropdownMenu has changed by specified key
+   * so, we must reset the positioned.value beforeUnmount
+   * #956
+   */
+  onBeforeUnmount(function () {
+    instance.dropdown.positionHook.positioned.value = false;
+  });
 }

package/es/components/select/useFocusout.d.ts

@@ -1,6 +1,6 @@
 /**
  * don't trigger focusout event when layer is showing,
- * only trigger focusout when it hidden to make FormItem to validate it
+ * only trigger focusout when it is hidden to make FormItem to validate it
  * #449
  */
 export declare function useFocusout(): {

package/es/components/select/useFocusout.js

@@ -2,7 +2,7 @@ import _Object$assign from "@babel/runtime-corejs3/core-js/object/assign";
 import { useInstance, createRef } from 'intact';
 /**
  * don't trigger focusout event when layer is showing,
- * only trigger focusout when it hidden to make FormItem to validate it
+ * only trigger focusout when it is hidden to make FormItem to validate it
  * #449
  */
 export function useFocusout() {

package/es/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.1.4
+ * @king-design v3.1.6
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -60,4 +60,4 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export declare const version = "3.1.4";
+export declare const version = "3.1.6";

package/es/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.1.4
+ * @king-design v3.1.6
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -61,5 +61,5 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export var version = '3.1.4';
+export var version = '3.1.6';
 /* generate end */

package/es/packages/kpc-react/__tests__/components/drawer.spec.js

@@ -12,10 +12,10 @@ describe('Drawer', function () {
     container = document.createElement('div');
     document.body.appendChild(container);
   });
-  // afterEach(() => {
-  // ReactDOM.unmountComponentAtNode(container);
-  // document.body.removeChild(container);
-  // });
+  afterEach(function () {
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+  });
   it('should render react element correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var Test, App;
     return _regeneratorRuntime.wrap(function _callee$(_context) {

package/index.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.1.4
+ * @king-design v3.1.6
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -65,6 +65,6 @@ export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
 
-export const version = '3.1.4';
+export const version = '3.1.6';
 
 /* generate end */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/intact",
-  "version": "3.1.4",
+  "version": "3.1.6",
   "description": "A component library written in Intact for Intact, Vue, React and Angular",
   "main": "es/index.js",
   "engines": {
@@ -120,7 +120,6 @@
     "highlight.js": "^10.4.1",
     "history": "^5.0.0",
     "html-webpack-plugin": "5.3.1",
-    "intact-react": "^3.0.26",
     "istanbul-instrumenter-loader": "^3.0.0",
     "js-yaml": "^4.1.0",
     "karma": "^6.3.2",
@@ -179,10 +178,9 @@
   "dependencies": {
     "@babel/runtime-corejs3": "^7.16.0",
     "@emotion/css": "^11.5.0",
-    "@king-design/react": "^3.1.4",
     "dayjs": "^1.10.7",
     "enquire.js": "^2.1.6",
-    "intact": "^3.0.26",
+    "intact": "^3.0.29",
     "monaco-editor": "^0.26.1",
     "mxgraphx": "^4.0.7",
     "resize-observer-polyfill": "^1.5.1",