@king-design/intact 3.1.4-beta.2 → 3.1.5

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/checkbox/index.spec.ts

@@ -94,7 +94,7 @@ describe('Checkbox', () => {
         } 
 
         const [instance, element] = mount(Demo);
-        const [checkbox1, checkbox2, checkbox3] = Array.from(element.querySelectorAll('.k-checkbox'));
+        const [checkbox1, checkbox2, checkbox3] = Array.from(element.querySelectorAll<HTMLElement>('.k-checkbox'));
         checkbox2.click();
         await wait();
         expect(spy.callCount).to.eql(1);

package/components/config/demos/basic.md

@@ -23,12 +23,11 @@ import {ConfigProvider, Button, Input} from 'kpc';
 ```ts
 import {Message} from 'kpc';
 
-Message.classNamePrefix = 'kd';
-
 export default class extends Component {
     static template = template;
 
     showMessage() {
+        Message.classNamePrefix = 'kd';
         Message.info('Message with classNamePrefix');
     }
 }

package/components/diagram/index.spec.ts

@@ -16,7 +16,7 @@ const downName = mxClient.IS_POINTER ? 'pointerdown' : 'mousedown';
 const upName = mxClient.IS_POINTER ? 'pointerup' : 'mouseup';
 const moveName = mxClient.IS_POINTER ? 'pointermove' : 'mousemove';
 
-class BaseDemo<P = {}> extends Component<P> {
+class BaseDemo<P extends {} = {}> extends Component<P> {
     private Diagram = Diagram;
     private DFlowLayout = DFlowLayout;
     private DTreeLayout = DTreeLayout;

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/base.ts

@@ -51,8 +51,8 @@ export interface BaseSelectEvents {
 }
 
 export interface BaseSelectBlocks<V> {
-    value: [V, Children]
-    values: [V[], Children[]]
+    value: [V, string]
+    values: [V[], string[]]
     prefix: null
     suffix: null
 }

package/components/select/useFilterable.ts

@@ -61,6 +61,10 @@ export function useFilterable(keywords: State<string>) {
                     if (isNullOrUndefined(props.label)) {
                         vNode.props = {...props, label: getTextByChildren(props.children)};
                     }
+                    const value = props.value;
+                    if (isStringOrNumber(value)) {
+                        vNode.key = value;
+                    }
 
                     if (filter!(keywords.value, vNode.props)) {
                         _children.push(vNode);

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/components/transfer/demos/customFilter.md

@@ -156,7 +156,7 @@ componentWillUnmount() {
     this.$unmounted = true;
 }
 
-setState<K extends keyof Props>(state: Pick<Props, K>, cb?: () => void) {
+setState(state: any, cb?: () => void) {
     if ('policy' in state) {
         super.setState(state, this.fetch);
     } else if ('keywords' in state) {

package/components/tree/useNodes.ts

@@ -3,7 +3,8 @@ import type {Tree} from './';
 import {isNullOrUndefined} from 'intact-shared';
 
 export type DataItem<K extends Key> = {
-    label?: Children 
+    // label?: Children 
+    label?: any
     key?: K
     disabled?: boolean
     loaded?: boolean

package/components/utils.ts

@@ -140,7 +140,7 @@ export function isStringOrNumberNotEmpty(o: any): o is string | number {
     return type === 'string' && !/^\s+$/.test(o) || type === 'number';
 }
 
-export function getRestProps<T>(component: Component<T>, props = component.get()) {
+export function getRestProps<T extends {}>(component: Component<T>, props = component.get()) {
     const Ctor = component.constructor as typeof Component;
     const typeDefs = Ctor.typeDefs;
     const events = (Ctor as any).events;

package/es/components/affix/index.d.ts

@@ -8,7 +8,7 @@ export interface AffixProps {
 export interface AffixEvents {
     change: [boolean];
 }
-export declare type ExcludeParam = {
+export type ExcludeParam = {
     offsetTop?: number;
     offsetBottom?: number;
     top: number;
@@ -16,7 +16,7 @@ export declare type ExcludeParam = {
     width: number;
     height: number;
 };
-export declare type ShouldFixParam = {
+export type ShouldFixParam = {
     offsetTop?: number;
     offsetBottom?: number;
     viewportHeight?: number;

package/es/components/affix/index.js

@@ -12,23 +12,18 @@ var typeDefs = {
 };
 export var Affix = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Affix, _Component);
-
   function Affix() {
     var _context;
-
     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(_context = [this]).call(_context, args)) || this;
     _this.elementRef = createRef();
     _this.style = useStyle(_this.elementRef);
     _this.config = useConfigContext();
     return _this;
   }
-
   return Affix;
 }(Component);
 Affix.template = template;

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

@@ -9,121 +9,97 @@ describe('Affix', function () {
   });
   it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, _element$querySelecto, affix1, affix2, _element$querySelecto2, wrapper1, wrapper2, test;
-
     return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            this.timeout(0);
-            _mount = mount(BasicDemo, {
-              marginTop: '200px'
-            }), instance = _mount[0], element = _mount[1];
-            _element$querySelecto = element.querySelectorAll('.k-affix'), affix1 = _element$querySelecto[0], affix2 = _element$querySelecto[1];
-            _element$querySelecto2 = element.querySelectorAll('.k-affix-wrapper'), wrapper1 = _element$querySelecto2[0], wrapper2 = _element$querySelecto2[1];
-
-            test = function test(height1, style1, height2, style2) {
-              expect(affix1.style.height).to.eql(height1);
-              expect(wrapper1.getAttribute('style')).to.eql(style1);
-              expect(affix2.style.height).to.eql(height2);
-              expect(wrapper2.getAttribute('style')).to.eql(style2);
-            }; // browser may scroll to the last position of page
-
-
-            _context.next = 7;
-            return wait(100);
-
-          case 7:
-            window.scrollTo(0, document.scrollingElement.scrollHeight - 1080);
-            _context.next = 10;
-            return wait(100);
-
-          case 10:
-            test(wrapper1.offsetHeight + "px", "position: fixed; width: 800px; top: 87px;", '', null); // scroll to the top
-
-            window.scrollTo(0, 0);
-            _context.next = 14;
-            return wait(100);
-
-          case 14:
-            test("", null, '', null); // change bottom
-
-            instance.set('bottom', 900);
-            _context.next = 18;
-            return wait(100);
-
-          case 18:
-            test("", null, wrapper2.offsetHeight + "px", "position: fixed; width: 800px; bottom: 900px;");
-
-          case 19:
-          case "end":
-            return _context.stop();
-        }
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          this.timeout(0);
+          _mount = mount(BasicDemo, {
+            marginTop: '200px'
+          }), instance = _mount[0], element = _mount[1];
+          _element$querySelecto = element.querySelectorAll('.k-affix'), affix1 = _element$querySelecto[0], affix2 = _element$querySelecto[1];
+          _element$querySelecto2 = element.querySelectorAll('.k-affix-wrapper'), wrapper1 = _element$querySelecto2[0], wrapper2 = _element$querySelecto2[1];
+          test = function test(height1, style1, height2, style2) {
+            expect(affix1.style.height).to.eql(height1);
+            expect(wrapper1.getAttribute('style')).to.eql(style1);
+            expect(affix2.style.height).to.eql(height2);
+            expect(wrapper2.getAttribute('style')).to.eql(style2);
+          }; // browser may scroll to the last position of page
+          _context.next = 7;
+          return wait(100);
+        case 7:
+          window.scrollTo(0, document.scrollingElement.scrollHeight - 1080);
+          _context.next = 10;
+          return wait(100);
+        case 10:
+          test(wrapper1.offsetHeight + "px", "position: fixed; width: 800px; top: 87px;", '', null);
+          // scroll to the top
+          window.scrollTo(0, 0);
+          _context.next = 14;
+          return wait(100);
+        case 14:
+          test("", null, '', null);
+          // change bottom
+          instance.set('bottom', 900);
+          _context.next = 18;
+          return wait(100);
+        case 18:
+          test("", null, wrapper2.offsetHeight + "px", "position: fixed; width: 800px; bottom: 900px;");
+        case 19:
+        case "end":
+          return _context.stop();
       }
     }, _callee, this);
   })));
   it('custom fix rule', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     var _mount2, instance, element, _element$querySelecto3, affix1, affix2, _element$querySelecto4, wrapper1, wrapper2, test;
-
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            this.timeout(0);
-            _mount2 = mount(CustomDemo, {
-              marginTop: '200px'
-            }), instance = _mount2[0], element = _mount2[1];
-            _element$querySelecto3 = element.querySelectorAll('.k-affix'), affix1 = _element$querySelecto3[0], affix2 = _element$querySelecto3[1];
-            _element$querySelecto4 = element.querySelectorAll('.k-affix-wrapper'), wrapper1 = _element$querySelecto4[0], wrapper2 = _element$querySelecto4[1];
-
-            test = function test(height1, style1, height2, style2) {
-              expect(affix1.style.height).to.eql(height1);
-              expect(wrapper1.getAttribute('style')).to.eql(style1);
-              expect(affix2.style.height).to.eql(height2);
-              expect(wrapper2.getAttribute('style')).to.eql(style2);
-            }; // browser may scroll to the last position of page
-
-
-            _context2.next = 7;
-            return wait(100);
-
-          case 7:
-            window.scrollTo(0, document.scrollingElement.scrollHeight - 1080);
-            _context2.next = 10;
-            return wait(100);
-
-          case 10:
-            test(wrapper1.offsetHeight + "px", "position: fixed; width: 800px; top: 150px;", '', null); // scroll to the top
-
-            window.scrollTo(0, 0);
-            _context2.next = 14;
-            return wait(100);
-
-          case 14:
-            test("", null, '', null); // change bottom
-
-            element.style.marginTop = '900px';
-            instance.set('bottom', 500);
-            _context2.next = 19;
-            return wait();
-
-          case 19:
-            document.scrollingElement.scrollTop = document.scrollingElement.scrollHeight;
-            _context2.next = 22;
-            return wait(100);
-
-          case 22:
-            test(wrapper1.offsetHeight + "px", "position: fixed; width: 800px; top: 150px;", wrapper2.offsetHeight + "px", "position: fixed; width: 800px; bottom: 500px;");
-            window.scrollTo(0, 0);
-            _context2.next = 26;
-            return wait(100);
-
-          case 26:
-            test("", null, '', null);
-
-          case 27:
-          case "end":
-            return _context2.stop();
-        }
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          this.timeout(0);
+          _mount2 = mount(CustomDemo, {
+            marginTop: '200px'
+          }), instance = _mount2[0], element = _mount2[1];
+          _element$querySelecto3 = element.querySelectorAll('.k-affix'), affix1 = _element$querySelecto3[0], affix2 = _element$querySelecto3[1];
+          _element$querySelecto4 = element.querySelectorAll('.k-affix-wrapper'), wrapper1 = _element$querySelecto4[0], wrapper2 = _element$querySelecto4[1];
+          test = function test(height1, style1, height2, style2) {
+            expect(affix1.style.height).to.eql(height1);
+            expect(wrapper1.getAttribute('style')).to.eql(style1);
+            expect(affix2.style.height).to.eql(height2);
+            expect(wrapper2.getAttribute('style')).to.eql(style2);
+          }; // browser may scroll to the last position of page
+          _context2.next = 7;
+          return wait(100);
+        case 7:
+          window.scrollTo(0, document.scrollingElement.scrollHeight - 1080);
+          _context2.next = 10;
+          return wait(100);
+        case 10:
+          test(wrapper1.offsetHeight + "px", "position: fixed; width: 800px; top: 150px;", '', null);
+          // scroll to the top
+          window.scrollTo(0, 0);
+          _context2.next = 14;
+          return wait(100);
+        case 14:
+          test("", null, '', null);
+          // change bottom
+          element.style.marginTop = '900px';
+          instance.set('bottom', 500);
+          _context2.next = 19;
+          return wait();
+        case 19:
+          document.scrollingElement.scrollTop = document.scrollingElement.scrollHeight;
+          _context2.next = 22;
+          return wait(100);
+        case 22:
+          test(wrapper1.offsetHeight + "px", "position: fixed; width: 800px; top: 150px;", wrapper2.offsetHeight + "px", "position: fixed; width: 800px; bottom: 500px;");
+          window.scrollTo(0, 0);
+          _context2.next = 26;
+          return wait(100);
+        case 26:
+          test("", null, '', null);
+        case 27:
+        case "end":
+          return _context2.stop();
       }
     }, _callee2, this);
   })));

package/es/components/affix/index.vdt.js

@@ -4,22 +4,19 @@ import { getRestProps, addStyle } from '../utils';
 import { makeStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
-
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
-
   var _this$get = this.get(),
-      children = _this$get.children,
-      className = _this$get.className,
-      style = _this$get.style;
-
+    children = _this$get.children,
+    className = _this$get.className,
+    style = _this$get.style;
   var _this$style = this.style,
-      _style = _this$style.style,
-      containerStyle = _this$style.containerStyle;
+    _style = _this$style.style,
+    containerStyle = _this$style.containerStyle;
   var _this$config = this.config,
-      cls = _this$config.cls,
-      k = _this$config.k;
+    cls = _this$config.cls,
+    k = _this$config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-affix"] = true, _classNameObj[k + "-fixed"] = _style.value, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)

package/es/components/affix/styles.js

@@ -11,7 +11,7 @@ setDefault(function () {
   affix = deepDefaults(theme, {
     affix: defaults
   }).affix;
-  makeStyles == null ? void 0 : makeStyles.clearCache();
+  makeStyles == null || makeStyles.clearCache();
 });
 export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("position:relative;z-index:", affix.zIndex, ";");

package/es/components/affix/useStyle.js

@@ -9,20 +9,17 @@ export function useStyle(elementRef) {
   var style = useState(null);
   var containerStyle = useState(null);
   var ro = null;
-
   function genStyle() {
     var _instance$get = instance.get(),
-        offsetTop = _instance$get.top,
-        offsetBottom = _instance$get.bottom,
-        exclude = _instance$get.exclude,
-        shouldFix = _instance$get.shouldFix;
-
+      offsetTop = _instance$get.top,
+      offsetBottom = _instance$get.bottom,
+      exclude = _instance$get.exclude,
+      shouldFix = _instance$get.shouldFix;
     var _elementRef$value$get = elementRef.value.getBoundingClientRect(),
-        top = _elementRef$value$get.top,
-        bottom = _elementRef$value$get.bottom,
-        width = _elementRef$value$get.width,
-        height = _elementRef$value$get.height;
-
+      top = _elementRef$value$get.top,
+      bottom = _elementRef$value$get.bottom,
+      width = _elementRef$value$get.width,
+      height = _elementRef$value$get.height;
     var setStyle = function setStyle(styles) {
       if (!exclude || exclude && !exclude({
         offsetTop: offsetTop,
@@ -43,11 +40,9 @@ export function useStyle(elementRef) {
         resetStyle();
       }
     };
-
     if (isNullOrUndefined(offsetTop) && isNullOrUndefined(offsetBottom)) {
       offsetTop = 0;
     }
-
     if (!isNullOrUndefined(offsetTop)) {
       if (shouldFix && shouldFix({
         offsetTop: offsetTop,
@@ -59,7 +54,6 @@ export function useStyle(elementRef) {
       }
     } else {
       var viewportHeight = document.documentElement.clientHeight;
-
       if (shouldFix && shouldFix({
         offsetTop: offsetTop,
         offsetBottom: offsetBottom,
@@ -70,15 +64,12 @@ export function useStyle(elementRef) {
         });
       }
     }
-
     resetStyle();
   }
-
   function resetStyle() {
     style.set(null);
     containerStyle.set(null);
   }
-
   function observe() {
     ro = new ResizeObserver(function () {
       style.set(_extends({}, style.value, {
@@ -87,13 +78,11 @@ export function useStyle(elementRef) {
     });
     ro.observe(elementRef.value);
   }
-
   function disconnect() {
     if (ro) {
       ro.disconnect();
     }
   }
-
   watchState(style, function (newStyle, oldStyle) {
     nextTick(function () {
       if (newStyle && !oldStyle) {

package/es/components/badge/index.js

@@ -10,21 +10,16 @@ var typeDefs = {
 };
 export var Badge = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Badge, _Component);
-
   function Badge() {
     var _context;
-
     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(_context = [this]).call(_context, args)) || this;
     _this.config = useConfigContext();
     return _this;
   }
-
   return Badge;
 }(Component);
 Badge.template = template;