@king-design/intact 3.4.2 → 3.4.3-beta.0

package/components/button/demos/disabled.md

@@ -10,9 +10,19 @@ import {Button, Icon} from 'kpc';
 
 <div>
     <Button disabled>disabled</Button>
-    <Button disabled type="none">disabled text</Button>
-    <Button disabled icon circle><Icon class="k-icon-search" /></Button>
-    <Button disabled type="link">link</Button>
-    <Button disabled type="flat">flat</Button>
+    <Button type="primary" disabled>primary</Button>
+    <Button type="secondary" disabled>secondary</Button>
+    <Button type="warning" disabled>warning</Button>
+    <Button type="danger" disabled>danger</Button>
+    <Button type="success" disabled>success</Button>
+    <Button type="none" disabled>none</Button>
+    <Button type="link" disabled>link</Button>
+    <Button type="flat" disabled>flat</Button>
+    <Button color="red" disabled>custom</Button>
 </div>
 ```
+
+```styl
+.k-btn
+    margin 0 20px 20px 0
+```

package/components/button/index.vdt

@@ -49,9 +49,9 @@ const classNameObj = {
     [cls('loading')]: loading,
     [cls('fluid')]: fluid,
     [cls('active')]: checked,
+    [cls('custom')]: color,
     [cls('disabled')]: disabled || loading,
     [cls('ghost')]: ghost,
-    [cls('custom')]: color,
     [makeButtonStyles(k, iconSide, color)]: true,
 };
 

package/components/button/styles.ts

@@ -31,7 +31,7 @@ const sizes = ['large', 'small', 'mini'] as const;
 const btnStyles = {
     get color() { return theme.color.text },
     bgColor: '#fff',
-    lineHeight: '1.15',
+    lineHeight: '1',
     get padding() { return `0 16px` },
     get borderColor() { return theme.color.border },
     get borderRadius() { return theme.borderRadius },
@@ -230,6 +230,13 @@ export const makeButtonStyles = cache(function makeButtonStyles(k: string, iconS
                             background: ${palette(typeStyles.bgColor, 1)};
                             border-color: ${palette(typeStyles.borderColor, 1)};
                         }
+                        &.${k}-disabled {
+                            &, &:hover {
+                                background: ${palette(typeStyles.bgColor, -2)};
+                                color: ${palette(typeStyles.color, -2)};
+                                border-color: ${palette(typeStyles.borderColor, -2)};
+                            }
+                        }
                     }
                 `;
             })}
@@ -245,6 +252,9 @@ export const makeButtonStyles = cache(function makeButtonStyles(k: string, iconS
                 &:active {
                     background: ${secondary.activeBgColor};
                 }
+                &.${k}-disabled {
+                    border: none;
+                }
             }
 
             
@@ -260,6 +270,9 @@ export const makeButtonStyles = cache(function makeButtonStyles(k: string, iconS
                     &:active {
                         background: ${palette(color, -3)};
                     }
+                    &.${k}-disabled {
+                        border: none;
+                    }
                 }
             `}
 

package/components/dialog/styles.ts

@@ -52,12 +52,12 @@ const defaults = {
         padding: `0 24px`,
         bodyMarginTop: `-25px`,
         tipIconMarginBottom: '10px',
-        tipIconFontSize: '37px',
-        tipIconLineHeight: '37px',
+        tipIconFontSize: '24px',
+        tipIconLineHeight: '24px',
 
         // with title
         titleFontWeight: '500',
-        titleTipIconFontSize: '37px',
+        titleTipIconFontSize: '24px',
         titleFontSize: '14px',
         wrapperPaddingLeft: '8px',
         titleBodyMarginTop: '-36px',

package/components/dropdown/item.ts

@@ -7,6 +7,7 @@ import {DropdownMenu, DROPDOWN_MENU} from './menu';
 import {IgnoreClickEvent} from '../../hooks/useDocumentClick';
 import { Dropdown as ExportDropdown, DropdownMenu as ExportDropdownMenu } from '.';
 import { useConfigContext } from '../config';
+import type { Tooltip } from '../tooltip/tooltip';
 
 export interface DropdownItemProps {
     disabled?: boolean
@@ -61,8 +62,12 @@ export class DropdownItem extends Component<DropdownItemProps, DropdownItemEvent
         if (this.get('hideOnSelect')) {
             // hide all dropdowns
             let dropdown = this.dropdown;
-            do { dropdown!.hide(true); }
-            while (dropdown = dropdown!.dropdown);
+            do {
+                if (!(dropdown as Tooltip).$isTooltip) {
+                    dropdown!.hide(true);
+                }
+                dropdown = dropdown!.dropdown;
+            } while (dropdown);
         }
     }
 

package/components/editable/index.spec.ts

@@ -17,7 +17,7 @@ describe('Editable', () => {
         expect(element.innerHTML).to.matchSnapshot();
 
         // input
-        let input = element.querySelector('input') as HTMLInputElement;
+        let input = element.querySelector('textarea') as HTMLTextAreaElement;
         input.value = 'test';
         dispatchEvent(input, 'blur');
         await wait();
@@ -29,7 +29,7 @@ describe('Editable', () => {
         editable.edit();
         await wait();
         expect(element.innerHTML).to.matchSnapshot();
-        input = element.querySelector('input') as HTMLInputElement;
+        input = element.querySelector('textarea') as HTMLTextAreaElement;
         input.value = 'new';
         dispatchEvent(input, 'keydown', {keyCode: 27});
         await wait();
@@ -41,7 +41,7 @@ describe('Editable', () => {
         editable.edit();
         await wait();
         expect(element.innerHTML).to.matchSnapshot();
-        input = element.querySelector('input') as HTMLInputElement;
+        input = element.querySelector('textarea') as HTMLTextAreaElement;
         input.value = 'new';
         dispatchEvent(input, 'keydown', {keyCode: 13});
         await wait();
@@ -58,7 +58,7 @@ describe('Editable', () => {
         // @ts-ignore
         first.edit();
         await wait();
-        let input = (findDomFromVNode(first.$lastInput!, true) as HTMLElement).querySelector('input') as HTMLInputElement;
+        let input = (findDomFromVNode(first.$lastInput!, true) as HTMLElement).querySelector('textarea') as HTMLTextAreaElement;
         dispatchEvent(input, 'focus');
         input.value = 'a';
         dispatchEvent(input, 'input');
@@ -69,7 +69,7 @@ describe('Editable', () => {
         // @ts-ignore
         second.edit();
         await wait();
-        input = (findDomFromVNode(second.$lastInput!, true) as HTMLElement).querySelector('input') as HTMLInputElement;
+        input = (findDomFromVNode(second.$lastInput!, true) as HTMLElement).querySelector('textarea') as HTMLTextAreaElement;
         input.value = 'a';
         dispatchEvent(input, 'input');
         dispatchEvent(input, 'blur');
@@ -79,7 +79,7 @@ describe('Editable', () => {
         // @ts-ignore
         third.edit();
         await wait();
-        input = (findDomFromVNode(third.$lastInput!, true) as HTMLElement).querySelector('input') as HTMLInputElement;
+        input = (findDomFromVNode(third.$lastInput!, true) as HTMLElement).querySelector('textarea') as HTMLTextAreaElement;
         input.value = 'a';
         dispatchEvent(input, 'input');
         dispatchEvent(input, 'blur');
@@ -110,14 +110,14 @@ describe('Editable', () => {
         expect(element.outerHTML).to.matchSnapshot();
         element.querySelector<HTMLElement>('.k-editable-icon')!.click();
         await wait();
-        let input = element.querySelector("input") as HTMLInputElement;
+        let input = element.querySelector("textarea") as HTMLTextAreaElement;
         input.value = 'aa';
         dispatchEvent(input, 'blur');
         await wait();
         expect(element.innerText).to.eql('test');
         element.querySelector<HTMLElement>('.k-editable-icon')!.click();
         await wait();
-        input = element.querySelector("input") as HTMLInputElement;
+        input = element.querySelector("textarea") as HTMLTextAreaElement;
         expect(input.value).to.eql('aa');
     });
 });

package/components/editable/index.vdt

@@ -31,7 +31,9 @@ const classNameObj = {
             ref={this.inputRef}
             frozenOnInput
             ev-$mounted={this.select}
-            autoWidth
+            width={300}
+            type="textarea"
+            rows="auto"
         />
     </div>
     <Tooltip v-if={!disabled && !editing} content={tip}>

package/components/editable/styles.ts

@@ -6,7 +6,7 @@ import { cache } from '../utils';
 
 const defaults = {
     iconGap: '0 0 0 8px',
-
+    get smallPadding() { return theme.small.padding },
     // invalid
     invalid: {
         get border() { return `1px solid ${theme.color.danger}`}, 
@@ -35,5 +35,12 @@ export const makeStyles = cache(function makeStyles(k: string) {
                 border: ${editable.invalid.border} !important;
             }
         }
+        &.${k}-editable {
+            .${k}-type-textarea {
+                .${k}-textarea {
+                    padding: 0 ${editable.smallPadding};
+                } 
+            }
+        }
     `;
 });

package/components/ellipsis/index.vdt

@@ -30,6 +30,7 @@ const wrapper = <div class={{
         position={position}
         theme={theme}
         class={className}
+        hoverable
     >
         {wrapper}
         <b:content>{children}</b:content> 

package/components/menu/styles.ts

@@ -273,6 +273,9 @@ export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
         &.${k}-collapsed-arrow {
             width: 0px;
             border-left: none;
+            .${k}-menu-header {
+                padding: 0;
+            }
             .${k}-menu-body {
                 overflow: hidden;
                 padding: 0;

package/components/select/base.ts

@@ -19,6 +19,7 @@ import {useFocusout} from './useFocusout';
 import type {Events} from '../types';
 import {isNullOrUndefined} from 'intact-shared';
 import { useDraggable } from './useDraggble';
+import { useImmutable } from './useImmutable';
 import { useConfigContext } from '../config';
 
 export interface BaseSelectProps<V, Multipe extends boolean = boolean, Attach = V | null> {
@@ -107,6 +108,7 @@ export abstract class BaseSelect<
     public input = useInput(this.resetKeywords);
     private focusout = useFocusout();
     private draggable = useDraggable();
+    public immutable = useImmutable();
     protected config = useConfigContext();
 
     init() {
@@ -160,7 +162,11 @@ export abstract class BaseSelect<
     @bind
     protected clear(e: MouseEvent) {
         e.stopPropagation();
-        this.set('value', this.get('multiple') ? [] : null);
+        const {value, multiple} = this.get();
+        const immutableValues = this.immutable.immutableValues.value;
+    
+        this.set('value', multiple ? (Array.isArray(value) ? value.filter(key => immutableValues.includes(key)) : []) : null);
+
     }
 
     @bind

package/components/select/base.vdt

@@ -39,6 +39,7 @@ const label = this.getLabel();
 const hasValue = this.hasValue();
 const {onInput, inputRef, keywords: {value: keywords}} = this.input;
 const {onFocusout, triggerRef} = this.focusout;
+const {isClosable} = this.immutable;
 const filterInput = <Input v-if={filterable}
     class={`${k}-select-input`}
     value={keywords}
@@ -122,7 +123,7 @@ const filterInput = <Input v-if={filterable}
                                                         value[$key] :
                                                         $key
                                             }
-                                            closable
+                                            closable={isClosable(value[$key])}
                                             ev-close={this.delete.bind(this, $key)}
                                             disabled={disabled}
                                             size={size}

package/components/select/demos/immutable.md

@@ -0,0 +1,38 @@
+---
+title: 禁用选项不可删除
+order: 14
+---
+
+在指定`multiple`多选的情况下，`Select`指定`value`包含`disabled Option`，则禁止删除
+
+```vdt
+import {Select, Option, OptionGroup} from 'kpc';
+
+<div>
+    <Select v-model="day" multiple filterable clearable>
+        <Option value="Monday">星期一</Option>
+        <Option value="Tuesday" disabled>星期二</Option>
+        <Option value="Wednesday">星期三</Option>
+        <Option value="Thursday">星期四</Option>
+        <Option value="Friday" disabled>星期五</Option>
+        <Option value="Saturday">星期六</Option>
+        <Option value="Sunday">星期天</Option>
+    </Select>
+    You selected: {JSON.stringify(this.get('day'))} 
+</div>
+```
+
+```ts
+interface Props {
+   day?: string[]
+}
+
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            day: ['Tuesday', 'Sunday', 'Wednesday'],
+        } as Props;
+    }
+}
+```

package/components/select/useImmutable.ts

@@ -0,0 +1,46 @@
+import { useInstance, Children } from 'intact';
+import type { Select } from './select';
+import { Option, OptionProps } from './option';
+import { OptionGroup } from './group';
+import { eachChildren, isComponentVNode } from '../utils';
+import { useState } from '../../hooks/useState';
+
+export function useImmutable() {
+    const instance = useInstance() as Select<any, true>;
+    const immutableValues = useState<any[]>([]);
+
+    function setImmutableValues() {
+        const { children, multiple } = instance.get();
+        if (!multiple) return;
+        updateImmutableValues(children);
+    }
+
+    function updateImmutableValues(children: Children) {
+        const _immutableValues: any[] = [];
+        const loop = (children: Children) => {
+            eachChildren(children, vNode => {
+                if (isComponentVNode(vNode, Option)) {
+                    const { disabled, value } = vNode.props as OptionProps;
+                    if (disabled) {
+                        _immutableValues.push(value);
+                    }
+                } else if (isComponentVNode(vNode, OptionGroup)) {
+                    loop(vNode.props!.children);
+                }
+            });
+        }
+
+        loop(children);
+        immutableValues.set(_immutableValues);
+    }
+
+    function isClosable(key: string) {
+        return !immutableValues.value.includes(key);
+    }
+
+    setImmutableValues();
+
+    // instance.on('$receive:children', setImmutableValues);
+
+    return { immutableValues, isClosable };
+}

package/components/switch/index.ts

@@ -50,7 +50,7 @@ const defaults = (): Partial<SwitchProps> => ({
     value: false,
     trueValue: true,
     falseValue: false,
-    size: 'default',
+    size: 'small',
     loading: false,
 });
 

package/components/table/cell.ts

@@ -18,6 +18,7 @@ export interface TableCellProps {
     rowspan: number
     onClickArrow: (e: MouseEvent) => void 
     hasChildren: boolean
+    loaded: boolean
 }
 
 export class TableCell extends Component<TableCellProps> {

package/components/table/cell.vdt

@@ -3,11 +3,12 @@ import {get, noop} from 'intact-shared';
 import {Button} from '../button';
 import {Icon} from '../icon';
 import {getTextByChildren} from '../utils';
+import {Ellipsis} from '../ellipsis';
 
 const {
     props, rowIndex, columnIndex, offset,
     data, checkType, indent, grid,
-    colspan, rowspan, onClickArrow, hasChildren,
+    colspan, rowspan, onClickArrow, hasChildren, loaded
 } = this.get();
 const { k } = this.config;
 
@@ -20,6 +21,10 @@ if (blocks) {
     }
 }
 
+if (props.ellipsis) {
+    children = <Ellipsis>{children}</Ellipsis>
+}
+
 let {className, style} = getClassAndStyleForFixed(props, offset, k, checkType);
 if (columnIndex === 0 && indent) {
     style || (style = {});
@@ -42,7 +47,8 @@ const classNameObj = {
         class={`${k}-table-arrow`}
         ev-click={onClickArrow}
     >
-        <Icon class={`${k}-icon-right`} size="small" />
+        <Icon v-if={loaded !== false} class={`${k}-icon-right`} size="small" />
+        <Icon v-else class={`${k}-tree-icon ion-load-c`} rotate />
     </Button>
     {children}
 </td>

package/components/table/column.ts

@@ -18,6 +18,7 @@ export interface TableColumnProps {
     exportCell?: (data: any, index: number) => string
     minWidth?: number
     hidden?: boolean
+    ellipsis?: boolean
 
     // passed by Table
     // offset: number
@@ -58,6 +59,7 @@ const typeDefs: Required<TypeDefs<TableColumnProps>> = {
     exportCell: Function,
     minWidth: Number,
     hidden: Boolean,
+    ellipsis: Boolean,
 
     // offset: null,
     cols: null,

package/components/table/demos/asyncTree.md

@@ -0,0 +1,70 @@
+---
+title: 树形表格异步加载
+order: 33
+---
+
+添加`load`数据加载函数即可实现异步加载子节点功能，组件会传入当前节点对象作为参数，函数可以返回
+数组或者异步返回数组作为当前异步加载的子节点。如果子节点还可以进一步展开，可以将`children`属性
+设为空数组`[]`，否则不指定`children`则表示该节点为叶子节点。
+
+组件默认遇到`children`为`[]`空数组的情况就会去进行异步加载，你可以通过`loaded`属性设为`true`来
+标识该子节点已经加载完成，无需再次加载
+
+```vdt
+import {Table, TableColumn} from 'kpc';
+
+<Table data={this.get('data')} rowKey={data => data.name} load={this.loadData}>
+    <TableColumn key="name" title="Name" />
+    <TableColumn key="size" title="Size">
+        <b:template args="[data]">
+            {data.size}MB
+        </b:template>
+    </TableColumn>
+</Table>
+```
+
+```ts
+import {bind} from 'kpc';
+interface Props {
+    data: NonNullable<any>
+}
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            data: [
+                {
+                    name: 'Audios', 
+                    size: 12,
+                    children: []
+                },
+                {
+                    name: 'Images', 
+                    size: 14,
+                    children: []
+                },
+                {
+                    name: 'doc.pdf', 
+                    size: 18,
+                },
+            ]
+        }
+    }
+
+    @bind
+    loadData(node: any) {
+        return new Promise<void>(resolve => {
+            setTimeout(() => {
+                node.children = [
+                    {name: 'child1', size: 17},
+                    {name: 'child2', size: 15, loaded: true},
+                ];
+                this.set('data', [...this.get('data')]);
+
+                resolve();
+            }, 2000);
+        });
+    }
+}
+```

package/components/table/demos/footer.md

@@ -0,0 +1,38 @@
+---
+title: 自定义footer
+order: 32
+---
+
+
+```vdt
+import {Table, TableColumn} from 'kpc';
+
+<div>
+    <Table data={this.get('data')} resizable>
+        <TableColumn key="a" title="Title 1" minWidth={200}/>
+        <TableColumn key="b" title="Title 2" minWidth={300}/>
+        <b:footer>
+            <div class="footer">自定义底部</div>
+        </b:footer>
+    </Table>
+</div>
+```
+
+```styl
+.k-table
+    margin-bottom 20px
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            data: [
+                {a: 'Cell 1-1', b: 'Cell 1-2'},
+                {a: 'Cell 2-1', b: 'Cell 2-2'}
+            ],
+        };
+    }
+}
+```

package/components/table/index.md

@@ -45,6 +45,7 @@ sidebar: doc
 | animation | 是否开启动效，默认开启。可以通过`true` `false`全部设置，或者通过数组单独设置行和列的动效 | `boolean` &#124 `[boolean, boolean]` | `true` |
 | hideHeader | 是否隐藏表头 | `boolean` | `false` |
 | pagination | 是否支持分页 | `boolean` | `PaginationProps` | `false` |
+| load | 指定异步加载节点数据的函数，该函数通过`Promise`返回数组来添加子节点数据 | <code>(node: any) => Promise<void> &#124; void</code> | `undefined` |
 
 ```ts
 import {Props} from 'intact';
@@ -113,6 +114,7 @@ export interface PaginationProps {
 | minWidth | 指定当前列拖动时的最小宽度，优先级高于`Table`的`minColWidth` | `number` | `undefined` |
 | className | 给当前列添加className | `string` &#124; `Record<string, any>` | `undefined` |
 | hidden | 是否隐藏当前列，仅为不可见，不影响`exportTable`导出表格 | `boolean` | `false` |
+| ellipsis | 是否开启超长省略 | `boolean` | `false` |
 
 ```ts
 import {VNode} from 'intact';
@@ -132,6 +134,7 @@ export type TableColumnGroupItem = {
 | empty | 自定义无数据展示模板 | - |
 | expand | 指定行展开后要展示的模板内容 | `([data: T, index: number]) => Children` |
 | tooltip | 行提示内容 | `([data: T, index: number]) => Children` |
+| footer | 自定义`Table`底部 | - |
 
 ## TableColumn
 

package/components/table/row.ts

@@ -34,10 +34,11 @@ export interface TableRowProps {
     spreaded: boolean
     hasChildren: boolean
     indent: number
-    onToggleSpreadRow: (key: TableRowKey) => void
+    onToggleSpreadRow: (key: TableRowKey, rowData?: any) => void
     onBeforeUnmount: (key: TableRowKey) => void
     offsetMap: Record<Key, number>
     animation: boolean
+    loaded: boolean
 
     draggable: boolean
     draggingKey: TableRowKey | null
@@ -109,8 +110,8 @@ export class TableRow extends Component<TableRowProps> {
     @bind
     onClickArrow(e: MouseEvent) {
         e.stopPropagation();
-        const {onToggleSpreadRow, key} = this.get();
-        onToggleSpreadRow(key);
+        const {onToggleSpreadRow, key, data} = this.get();
+        onToggleSpreadRow(key, data);
     }
 
     @bind

package/components/table/row.vdt

@@ -11,7 +11,7 @@ const {
     grid, index: rowIndex, indeterminate,
     allDisabled, selected, /* hidden,  */spreaded,
     hasChildren, indent, key, offsetMap,
-    draggable, draggingKey, animation,
+    draggable, draggingKey, animation, loaded,
 } = this.get();
 const { k } = this.config;
 
@@ -71,13 +71,13 @@ cols.forEach((props, columnIndex) => {
     if (!render) return;
 
     const columnKey = props.key;
-
     vNodes.push(
         <TableCell
             props={props}
             columnIndex={columnIndex}
             rowIndex={rowIndex}
             data={data}
+            loaded={loaded}
             offset={offsetMap[columnKey]}
             checkType={checkType}
             indent={indent}

package/components/table/styles.ts

@@ -90,7 +90,7 @@ export const makeStyles = cache(function makeStyles(k: string) {
         }
         table {
             width: 100%;
-            // border-collapse: collapse;
+            border-collapse: separate;
             border-spacing: 0;
             table-layout: fixed;
             // td, 

package/components/table/table.ts

@@ -65,6 +65,7 @@ export interface TableProps<
     animation?: boolean | [boolean, boolean]
     hideHeader?: boolean
     pagination?: boolean | PaginationProps
+    load?: (value: T) => Promise<void> | void 
 }
 
 export interface TableEvents<T = any, K extends TableRowKey = number> {
@@ -82,6 +83,7 @@ export interface TableBlocks<T = unknown> {
     empty: null
     tooltip: [T, number] 
     expand: [T, number]
+    footer: null
 }
 
 type CheckType = 'checkbox' | 'radio' | 'none'
@@ -130,6 +132,7 @@ const typeDefs: Required<TypeDefs<TableProps<unknown>>> = {
     animation: [Boolean, Array],
     hideHeader: Boolean,
     pagination: [Boolean, Object],
+    load: Function,
 };
 
 const defaults = (): Partial<TableProps> => ({