@king-design/intact 2.0.17-beta.0 → 2.1.1

package/components/table/usePagination.ts

@@ -0,0 +1,71 @@
+import {useInstance, createRef} from 'intact';
+import type {Table, TableRowKey, TableCheckType} from './table';
+import {useState} from '../../hooks/useState';
+import {Pagination, PaginationChangeData} from '../pagination';
+import {isObject} from 'intact-shared';
+import { useReceive } from '../../hooks/useReceive';
+
+const defaultPagination = Pagination.defaults();
+
+export function usePagination() {
+    const instance = useInstance() as Table<any, TableRowKey, TableCheckType>
+    const data = useState<any[] | undefined>(instance.get('data'));   
+    const value = useState<number>(defaultPagination.value!);
+    const limit = useState<number>(defaultPagination.limit!);
+    const paginationRef =  createRef<Pagination>(); // for unit test
+
+    useReceive<Table>(['data', 'pagination'], () => {
+        handleData();
+    });
+
+    function handleData() {
+        let { data: _data, pagination } = instance.get();
+
+        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() {
+        const { data: _data } = instance.get();
+        const index = (value.value - 1) * limit.value; 
+        data.set(_data!.slice(index,  index + limit.value));
+    }
+
+    function onChange(data: PaginationChangeData) {
+        const { pagination } = instance.get();
+
+        value.set(data.value);
+        limit.set(data.limit);
+        updateDataByPage();
+
+        if (isObject(pagination)) {
+            instance.set('pagination', {
+                ...pagination,
+                value: value.value,
+                limit: limit.value,
+            });
+        }
+
+        instance.trigger('changePage', data);
+    }
+
+    return { data, value, limit, onChange, paginationRef };
+}

package/components/table/useRestRowStatus.ts

@@ -29,7 +29,10 @@ export function useRestRowStatus(
         }
     }
 
-    function omit(type: 'checkedKeys' | 'selectedKeys' | 'spreadKeys' | 'expandedKeys', keys: TableRowKey[]) {
+    function omit(
+        type: 'checkedKeys' | 'selectedKeys' | 'spreadKeys' | 'expandedKeys',
+        keys: TableRowKey[]
+    ) {
         let originKeys = instance.get(type);
         if (!originKeys) return;
 

package/components/table/useTree.ts

@@ -2,8 +2,9 @@ import {useInstance} from 'intact';
 import type {Table, TableRowKey} from './table';
 import {inArray} from './useChecked';
 import {toggleArray} from '../utils';
+import { State } from '../../hooks/useState';
 
-export function useTree() {
+export function useTree(data: State<any[] | undefined>) {
     const instance = useInstance() as Table;
 
     function isSpreaded(key: TableRowKey) {
@@ -18,8 +19,8 @@ export function useTree() {
         cb: (value: any, index: number, level: number, meta: T | null) => T,
         shouldBreak: boolean = false,
     ) {
-        const {childrenKey, data} = instance.get();
-        loopDataWithChildrenKey(data, childrenKey, cb, shouldBreak);
+        const {childrenKey} = instance.get();
+        loopDataWithChildrenKey(data.value, childrenKey, cb, shouldBreak);
     }
 
     return {isSpreaded, toggleSpreadRow, loopData};

package/components/timepicker/index.md

@@ -29,12 +29,23 @@ sidebar: doc
 | min | 最小可选时间 | `Value` | `undefind` |
 | disabledDate | 该属性值是一个函数，用于定义那些日期被禁止选择，函数参数为日期字符串，返回`true`则表示禁用该日期 | `(v: Dayjs) => boolean` | `undefined` |
 | step | 固定时间点的步长 | `string` | `undefined` |
+| position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'left top+8', 'left bottom'}` |
 
 ```ts
 import {Dayjs} from 'dayjs';
 import {VNode} from 'intact';
 
 export type Value = string | Date | number | Dayjs;
+
+type Position = {
+    my?: string | [string, string]
+    at?: string | [string, string]
+    collision?: Collision | [Collision, Collision] 
+    collisionDirection?: ['left'] | ['top'] | ['left', 'top']
+}
+
+type Collision = 'fit' | 'flip' | 'flipfit' | 'none'
+
 export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
 ```
 

package/components/tooltip/content.ts

@@ -9,6 +9,7 @@ import template from './content.vdt';
 import {bind} from '../utils';
 import {Tooltip} from './tooltip';
 import {useArrow} from './useArrow';
+import { tooltip as tooltipTheme } from './styles';
 
 export interface TooltipContentProps extends DropdownMenuProps { } 
 export interface TooltipContentEvents extends DropdownMenuEvents { }
@@ -35,10 +36,23 @@ export class TooltipContent extends DropdownMenu<
     }
 
     @bind
-    private onEnter() {
+    private onEnter(elem: HTMLElement) {
+        // fix the width, https://github.com/ksc-fe/kpc/issues/873
+        const maxWidth = parseInt(tooltipTheme.maxWidth);
+        const width = elem.offsetWidth;
+        if (width === maxWidth) {
+            elem.style.width = `${width}px`;
+        }
         this.dropdown!.position();
     }
 
+    @bind
+    private onAfterLeave(elem: HTMLElement) {
+        // remove the position after leave, https://github.com/ksc-fe/kpc/issues/873
+        const style = elem.style;
+        style.left = style.top = style.width  = '';
+    }
+
     @bind
     protected onMouseEnter(e: MouseEvent) {
         const dropdown = this.dropdown as Tooltip; 

package/components/tooltip/content.vdt

@@ -22,7 +22,12 @@ const classNameObj = {
 
 <t:super
     value={!!value && !this.isEmptyChildren}
-    transition={{name: 'k-fade', onEnter: this.onEnter}}
+    transition={{
+        name: 'k-fade',
+        onEnter: this.onEnter,
+        onAfterLeave: this.onAfterLeave,
+        onLeaveCancelled: this.onAfterLeave,
+    }}
     class={classNameObj}
 >
     <b:children>

package/components/tooltip/demos/trigger.md

@@ -4,7 +4,7 @@ order: 2
 ---
 
 使用`trigger`指定触发方式，`click`点击触发，`hover`悬浮触发，`foucs`聚焦触发，默认为`hover`，在悬浮触发情况下，
-鼠标离开触发器，弹层就会消失，如果我们需要鼠标能离开触发器并悬浮在弹层上，需要添加`canHover`属性
+鼠标离开触发器，弹层就会消失，如果我们需要鼠标能离开触发器并悬浮在弹层上，需要添加`hoverable`属性
 
 ```vdt
 import {Tooltip, ButtonGroup, Button, Input} from 'kpc';

package/components/tooltip/index.md

@@ -21,7 +21,7 @@ sidebar: doc
 | always | 是否一直保持当前展示/隐藏状态 | `boolean` | `false` |
 | size | 弹层尺寸 | `"default"` | `"small"` | `"default"` |
 | confirm | 带“确认”和“取消”按钮的确认弹层 | `boolean` | `false` |
-| onText | `confirm`模式下的“确认”按钮文案 | `string` | `"确认"` |
+| okText | `confirm`模式下的“确认”按钮文案 | `string` | `"确认"` |
 | cancelText | `confirm`模式下的“取消”按钮文案 | `string` | `"取消"` |
 | content | 指定提示的内容，当然你也可以用`content`扩展点指定 | `string` | `VNode` | `undefined` |
 

package/components/tooltip/index.spec.ts

@@ -6,8 +6,9 @@ import ContentDemo from '~/components/tooltip/demos/content';
 import ConfirmDemo from '~/components/tooltip/demos/confirm';
 import AlwaysDemo from '~/components/tooltip/demos/always';
 import {Tooltip} from './';
-import {Radio} from '../radio';
+import {Dialog} from '../dialog';
 import {mount, unmount, dispatchEvent, getElement, wait} from '../../test/utils';
+import { tooltip as tooltipTheme } from './styles';
 
 describe('Tooltip', () => {
     afterEach((done) => {
@@ -330,16 +331,19 @@ describe('Tooltip', () => {
             static defaults = () => ({show: false});
             Tooltip = Tooltip;
             mounted() {
-                const element = findDomFromVNode(this.$lastInput!, true) as Element;
-                const windowHeight = window.innerHeight || document.documentElement.clientHeight;
-                (element.parentNode as HTMLElement).style.height = `${windowHeight * 2}px`;
+                const element = findDomFromVNode(this.$lastInput!, true) as HTMLElement;
+                const 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`;
             }
         }
 
         const [i] = mount(Demo);
 
-        await wait(500);
-        window.scrollTo(0, 10000);
+        // await wait(500);
+        // window.scrollTo(0, 10000);
 
         i.set('show', true);
 
@@ -349,4 +353,59 @@ describe('Tooltip', () => {
         console.log(JSON.stringify(content.getBoundingClientRect()));
         expect(content.getBoundingClientRect().top < 0).to.be.true;
     });
+
+    it('should add className', async () => {
+        class Demo extends Component {
+            static template = `
+                const Tooltip = this.Tooltip;
+                <div>
+                    <Tooltip content="hello" class="a">
+                        <div ref="test" class="b">test</div>
+                    </Tooltip>
+                </div>
+            `;
+            Tooltip = Tooltip;
+        }
+
+        const [instance, element] = mount(Demo);
+        const trigger = instance.refs.test;
+        expect(trigger.className).to.eql('b a');
+
+        dispatchEvent(trigger, 'mouseenter');
+        await wait();
+        const dropdown = getElement('.k-tooltip-content')!;
+        expect(dropdown.classList.contains('a')).to.be.true;
+    });
+
+    it('should fix the width in small container', async () => {
+        class Demo extends Component {
+            static template = `
+                const {Tooltip, Dialog} = this;
+                <div style="text-align: right; position: relative; width: 300px;">
+                    <Tooltip content="这是一段很长的描述文字，这是一段很长的描述文字" container={dom => dom}>
+                        <span class="trigger">test</span>
+                    </Tooltip>
+                </div>
+            `
+            private Tooltip = Tooltip;
+            private Dialog = Dialog;
+        }
+
+        const [instance, element] = mount(Demo);
+        const trigger = element.querySelector<HTMLDivElement>('.trigger')!;
+        const expecedWidth = parseInt(tooltipTheme.maxWidth);
+
+        dispatchEvent(trigger, 'mouseenter');
+        await wait();
+        const content = getElement('.k-tooltip-content')!;
+        const width = content.offsetWidth;
+        expect(width).to.eql(expecedWidth);
+
+        dispatchEvent(trigger, 'mouseleave');
+        await wait();
+        dispatchEvent(trigger, 'mouseenter');
+        await wait();
+        const newWidth = content.offsetWidth;
+        expect(newWidth).to.eql(width);
+    });
 });

package/components/tooltip/styles.ts

@@ -31,7 +31,7 @@ const defaults = {
     smallPadding: '4px',
 };
 
-let tooltip: typeof defaults;
+export let tooltip: typeof defaults;
 setDefault(() => {
     tooltip = deepDefaults(theme, {tooltip: defaults}).tooltip;
 });

package/components/tooltip/tooltip.ts

@@ -49,6 +49,7 @@ const defaults = (): Partial<TooltipProps> => ({
     showArrow: true,
     theme: 'dark',
     position: {my: 'center bottom-10', at: 'center top', collision: 'flipfit'},
+    collison: 'flipfit',
     hoverable: false,
     always: false,
     confirm: false,
@@ -72,6 +73,13 @@ export class Tooltip<
     static defaults = defaults;
     static events = events;
 
+    show(shouldFocus: boolean = false) {
+        if (this.get('disabled')) return;
+
+        clearTimeout(this.timer);
+        this.set('value', true);
+    }
+
     hide(immediately: boolean) {
         if (this.get('always')) return;
 

package/components/treeSelect/index.md

@@ -33,6 +33,7 @@ sidebar: doc
 | checkbox | 是否展示复选框 | `boolean` | `false` |
 | filter | 当支持筛选时，可以自定义筛选规则 | `(keywords: string, data: TreeDataItem<K>) => boolean` | `undefined` |
 | show | 是否展示菜单项 | `boolean` | `false` |
+| position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` &#124; `"left"` &#124; `"bottom"` &#124; `"right"` &#124; `"top"` | `{my: 'left top+8', 'left bottom'}` |
 
 ```ts
 import {Key, Children} from 'intact';
@@ -47,6 +48,14 @@ export type TreeDataItem<K extends Key> = {
     children?: TreeDataItem<K>[]
 }
 
+type Position = {
+    my?: string | [string, string]
+    at?: string | [string, string]
+    collision?: Collision | [Collision, Collision] 
+    collisionDirection?: ['left'] | ['top'] | ['left', 'top']
+}
+
+type Collision = 'fit' | 'flip' | 'flipfit' | 'none'
 ```
 
 # 扩展点

package/components/virtual.ts

@@ -0,0 +1,98 @@
+import {
+    Component,
+    VNode,
+    directClone,
+    createVNode,
+} from 'intact';
+import { isTextChildren } from './utils';
+import { EMPTY_OBJ, isFunction, hasOwn } from 'intact-shared';
+import { cx } from '@emotion/css';
+
+const reactEventReg = /on[A-Z]/;
+
+export class Virtual extends Component<any> {
+    static template(this: Virtual) {
+        const { children, ...props } = this.get();
+
+        if (process.env.NODE_ENV !== 'production') {
+            if (!children || (Array.isArray(children) && children.length !== 1)) {
+                throw new Error('Component must receive one children');
+            }
+        }
+
+        const vNode = Array.isArray(children) ? children[0] : children;
+        const clonedVNode = isTextChildren(vNode)
+            ? createVNode('span', null, vNode)
+            : directClone(vNode as VNode);
+
+        const vNodeProps = this.vNodeProps = this.getVNodeProps(clonedVNode.props || EMPTY_OBJ);
+        const eventProps = this.getEventProps();
+
+        //  merge className 
+        let className = clonedVNode.className || vNodeProps.className;
+        className = cx({
+            [className!]: !!className,
+            [props.className!]: !!props.className,
+        });
+
+        clonedVNode.props = { ...props, ...vNodeProps, ...eventProps, className };
+        clonedVNode.className = className;
+
+        return clonedVNode;
+    }
+
+    private vNodeProps: any = null;
+
+    private getVNodeProps(props: any) {
+        const vnode = props.vnode;
+
+        if (!vnode) return props;
+
+        // maybe we render the intact component in react slot property, in this case
+        // the $isReact is false. so use the vnode $$typeof field as gauge
+        if (vnode.$$typeof || vnode.__v_isVNode /* vue3 vnode */) {
+            const _props = vnode.props;
+            if (!_props) return props;
+
+            const events: Record<string, Function> = {};
+            for (let key in _props) {
+                if (reactEventReg.test(key)) {
+                    events[`ev-${key.substring(2).toLowerCase()}`] = _props[key];
+                }
+            }
+
+            return {...props, ...events, className: _props.className || _props.class /* vue-next */};
+        } else if (hasOwn.call(vnode, 'componentOptions') /* vue2 vnode */) {
+            const data = vnode.data;
+            const on = data && data.on || EMPTY_OBJ;
+            const events: Record<string, Function> = {};
+            for (let key in on) {
+                events[`ev-${key}`] = on[key];
+            }
+
+            return {...props, ...events};
+        }
+
+        return props;
+    }
+
+    private getEventProps() {
+        const props: Record<string, Function> = {};
+
+        for (let prop in this.get()) {
+            if (prop.startsWith('ev-')) {
+                props[prop] = (e: MouseEvent) => this.callEvent(prop, e);
+            }
+        }
+
+        return props;
+    }
+
+
+    private callEvent(name: string, e: MouseEvent) {
+        const callback = this.vNodeProps[name];
+        const callbackOnVirtual = this.get<Function>(name);
+        if (isFunction(callback)) callback(e);
+        if (isFunction(callbackOnVirtual)) callbackOnVirtual(e);
+    }
+}

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

@@ -1,28 +1,39 @@
 import { TypeDefs } from 'intact';
 import { BaseSelect, BaseSelectProps, BaseSelectEvents, BaseSelectBlocks } from '../select/base';
-export interface CascaderProps<V = any, Multipe extends boolean = boolean> extends BaseSelectProps<V[], Multipe> {
-    data?: CascaderData<V>[];
+export interface CascaderProps<V = any, Multipe extends boolean = boolean, Data extends BaseCascaderData = CascaderData<V>> extends BaseSelectProps<V[], Multipe> {
+    data?: Data[];
     trigger?: 'click' | 'hover';
     changeOnSelect?: boolean;
     format?: (labels: string[]) => string;
-    loadData?: (data: CascaderData<V>) => any;
-    filter?: (keywords: string, data: CascaderData<V>) => boolean;
+    loadData?: (data: Data) => any;
+    filter?: (keywords: string, data: Data) => boolean;
+    fields?: CascaderFields<Data>;
 }
-export declare type CascaderData<V> = {
+export declare type CascaderFields<Data> = {
+    value?: keyof Data;
+    label?: keyof Data;
+    children?: keyof Data;
+    disabled?: keyof Data;
+};
+export interface BaseCascaderData {
+    loaded?: boolean;
+    [key: string]: any;
+}
+export interface CascaderData<V> extends BaseCascaderData {
     value: V;
     label: string;
-    disabled?: boolean;
-    loaded?: boolean;
     children?: CascaderData<V>[];
-};
+    disabled?: boolean;
+}
 export interface CascaderEvents extends BaseSelectEvents {
 }
 export interface CascaderBlocks<V> extends BaseSelectBlocks<V> {
 }
-export declare class Cascader<V = any, Multipe extends boolean = false> extends BaseSelect<CascaderProps<V, Multipe>, CascaderEvents, CascaderBlocks<V>> {
+export declare class Cascader<V = any, Multipe extends boolean = false, Data extends BaseCascaderData = CascaderData<V>> extends BaseSelect<CascaderProps<V, Multipe, Data>, CascaderEvents, CascaderBlocks<V>> {
     static template: string | import("intact").Template<any>;
-    static typeDefs: Required<TypeDefs<CascaderProps<any, boolean>>>;
-    static defaults: () => Partial<CascaderProps<any, boolean>>;
+    static typeDefs: Required<TypeDefs<CascaderProps<any, boolean, CascaderData<any>>>>;
+    static defaults: () => Partial<CascaderProps<any, boolean, CascaderData<any>>>;
+    private fields;
     private value;
     private label;
     private load;

package/es/components/cascader/index.js

@@ -1,6 +1,5 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import template from './index.vdt';
 import { BaseSelect } from '../select/base';
@@ -10,6 +9,7 @@ import { useValue } from './useValue';
 import { useLabel } from './useLabel';
 import { useLoad } from './useLoad';
 import { useFilterable } from './useFilterable';
+import { useFields } from './useFields';
 
 var typeDefs = _extends({}, BaseSelect.typeDefs, {
   data: Array,
@@ -17,7 +17,8 @@ var typeDefs = _extends({}, BaseSelect.typeDefs, {
   changeOnSelect: Boolean,
   format: Function,
   loadData: Function,
-  filter: Function
+  filter: Function,
+  fields: Object
 });
 
 var defaults = function defaults() {
@@ -26,11 +27,6 @@ var defaults = function defaults() {
     trigger: 'click',
     format: function format(labels) {
       return labels.join(' / ');
-    },
-    filter: function filter(keywords, data) {
-      var _context;
-
-      return _includesInstanceProperty(_context = data.label).call(_context, keywords);
     }
   });
 };
@@ -39,7 +35,7 @@ export var Cascader = /*#__PURE__*/function (_BaseSelect) {
   _inheritsLoose(Cascader, _BaseSelect);
 
   function Cascader() {
-    var _context2;
+    var _context;
 
     var _this;
 
@@ -47,11 +43,12 @@ export var Cascader = /*#__PURE__*/function (_BaseSelect) {
       args[_key] = arguments[_key];
     }
 
-    _this = _BaseSelect.call.apply(_BaseSelect, _concatInstanceProperty(_context2 = [this]).call(_context2, args)) || this;
+    _this = _BaseSelect.call.apply(_BaseSelect, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.fields = useFields();
     _this.value = useValue();
-    _this.label = useLabel();
-    _this.load = useLoad();
-    _this.filterable = useFilterable(_this.input.keywords, _this.value.setValue);
+    _this.label = useLabel(_this.fields);
+    _this.load = useLoad(_this.fields);
+    _this.filterable = useFilterable(_this.input.keywords, _this.value.setValue, _this.fields);
     _this.positionObj = {
       my: 'left top',
       at: 'right top',

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

@@ -366,4 +366,85 @@ describe('Cascader', function () {
       }
     }, _callee8);
   })));
+  it('specify fields', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var Demo, _mount8, instance, element, select, dropdown1, _dropdown1$querySelec5, item1, dropdown2, _dropdown2$querySelec4, item11;
+
+    return _regeneratorRuntime.wrap(function _callee9$(_context11) {
+      while (1) {
+        switch (_context11.prev = _context11.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component2) {
+              _inheritsLoose(Demo, _Component2);
+
+              function Demo() {
+                var _context10;
+
+                var _this2;
+
+                for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                  args[_key2] = arguments[_key2];
+                }
+
+                _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context10 = [this]).call(_context10, args)) || this;
+                _this2.Cascader = Cascader;
+                return _this2;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  value: [],
+                  data: [{
+                    v: 'beijing',
+                    l: '北京',
+                    c: [{
+                      v: 'haidian',
+                      l: '海淀区'
+                    }]
+                  }, {
+                    v: 'hunan',
+                    l: '湖南',
+                    c: [{
+                      v: 'haidian',
+                      l: '海淀区'
+                    }]
+                  }]
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Cascader} = this;\n                <Cascader data={this.get('data')}\n                    v-model=\"value\"\n                    fields={{value: 'v', label: 'l', children: 'c'}}\n                />\n            ";
+            _mount8 = mount(Demo), instance = _mount8[0], element = _mount8[1];
+            select = element;
+            select.click();
+            _context11.next = 7;
+            return wait();
+
+          case 7:
+            dropdown1 = getElement('.k-cascader-menu');
+            _dropdown1$querySelec5 = dropdown1.querySelectorAll(':scope > .k-dropdown-item'), item1 = _dropdown1$querySelec5[0];
+            item1.click();
+            _context11.next = 12;
+            return wait();
+
+          case 12:
+            expect(dropdown1.innerHTML).to.matchSnapshot();
+            dropdown2 = getElement('.k-cascader-menu');
+            _dropdown2$querySelec4 = dropdown2.querySelectorAll(':scope > .k-dropdown-item'), item11 = _dropdown2$querySelec4[0];
+            item11.click();
+            _context11.next = 18;
+            return wait();
+
+          case 18:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('value')).to.eql(['beijing', 'haidian']);
+
+          case 20:
+          case "end":
+            return _context11.stop();
+        }
+      }
+    }, _callee9);
+  })));
 });