@king-design/intact 2.0.0-beta.0

package/components/switch/useDraggable.ts

@@ -0,0 +1,75 @@
+import {useInstance, RefObject, createRef} from 'intact';
+import type {Switch} from './';
+import {useDraggable as useBaseDraggable} from '../../hooks/useDraggable';
+import {useState} from '../../hooks/useState';
+
+export function useDraggable(elementRef: RefObject<HTMLElement>) {
+    const instance = useInstance() as Switch;
+    const barRef = createRef<HTMLElement>();
+    const barWidth = useState<number | null>(null);
+
+    let x: number;
+    let height: number;
+    let width: number;
+    let maxWidth: number;
+
+    function onStart(e: MouseEvent) {
+        if (instance.get('disabled')) return;
+
+        x = e.clientX;
+        height = barRef.value!.clientHeight; 
+        width = barRef.value!.clientWidth;
+        maxWidth = elementRef.value!.clientWidth;
+    }
+
+    function onMove(e: MouseEvent) {
+        const left = e.clientX - x;
+        const newWidth = Math.min(
+            Math.max(height, width + left),
+            maxWidth,
+        );
+
+        barWidth.set(newWidth);
+    }
+
+    function onEnd(e?: MouseEvent) {
+        // unmounted
+        if (!e) return;
+
+        elementRef.value!.blur();
+
+        // treat mousedown -> mouseup as click
+        if (x === e.clientX) {
+            barWidth.set(null);
+            instance.toggle(false); 
+        } else {
+            // cancel this operation if the distance less than half of width
+            const percent = (barWidth.value! - height / 2) / maxWidth;
+
+            if (!instance.isChecked()) {
+                if (percent >= 0.5) {
+                    instance.check();
+                }
+            } else if (percent < 0.5) {
+                instance.uncheck();
+            }
+
+            const {width: _width, height: _height} = instance.get();
+
+            if (!instance.isChecked() && _width && _height) {
+                barWidth.set(+_height);
+            } else {
+                barWidth.set(null);
+            }
+        }
+    }
+
+    const {start, dragging} = useBaseDraggable({onStart, onMove, onEnd});
+
+    return {
+        start,
+        dragging,
+        barRef,
+        barWidth,
+    };
+}

package/components/table/cell.ts

@@ -0,0 +1,48 @@
+import {Component, Props, VNodeComponentClass, IntactDom} from 'intact';
+import template from './cell.vdt';
+import type {TableColumnProps} from './column';
+import type {TableProps} from './table';
+import type {TableGrid} from './useMerge';
+
+export interface TableCellProps {
+    props: Props<TableColumnProps>
+    columnIndex: number
+    rowIndex: number
+    data: any
+    offset: number
+    checkType: TableProps['checkType'] 
+    indent: number
+    grid: TableGrid
+    colspan: number
+    rowspan: number
+    onClickArrow: (e: MouseEvent) => void 
+    hasChildren: boolean
+}
+
+export class TableCell extends Component<TableCellProps> {
+    static template = template;
+
+    $update(
+        lastVNode: VNodeComponentClass<this>,
+        nextVNode: VNodeComponentClass<this>,
+        parentDom: Element,
+        anchor: IntactDom | null,
+        mountedQueue: Function[],
+        force: boolean
+    ) {
+        const lastProps = lastVNode.props!;
+        const nextProps = nextVNode.props!;
+
+        let isSame = true;
+        for (const key in lastProps) {
+            if (lastProps[key] !== nextProps[key]) {
+                isSame = false;
+                break;
+            }
+        }
+
+        if (!isSame) {
+            super.$update(lastVNode, nextVNode, parentDom, anchor, mountedQueue, force);
+        } 
+    }
+}

package/components/table/cell.vdt

@@ -0,0 +1,42 @@
+import {getClassAndStyleForFixed} from './useFixedColumns';
+import {get, noop} from 'intact-shared';
+import {Button} from '../button';
+import {Icon} from '../icon';
+import {getTextByChildren} from '../utils';
+
+const {
+    props, rowIndex, columnIndex, offset,
+    data, checkType, indent, grid,
+    colspan, rowspan, onClickArrow, hasChildren,
+} = this.get();
+
+const blocks = props.$blocks; 
+let children = get(data, props.key);
+if (blocks) {
+    const template = blocks.template || blocks.default;
+    if (template) {
+        children = template(noop, [data, rowIndex]);
+    }
+}
+
+let {className, style} = getClassAndStyleForFixed(props, offset, checkType);
+if (columnIndex === 0 && indent) {
+    style || (style = {});
+    style.paddingLeft = `${indent}px`;
+}
+
+<td className={className}
+    style={style}
+    title={getTextByChildren(children)}
+    rowspan={rowspan}
+    colspan={colspan}
+>
+    <Button v-if={columnIndex === 0 && hasChildren}
+        type="none" icon circle size="mini"
+        class="k-table-arrow"
+        ev-click={onClickArrow}
+    >
+        <Icon class="ion-ios-arrow-right" size="small" />
+    </Button>
+    {children}
+</td>

package/components/table/column.ts

@@ -0,0 +1,69 @@
+import {Component, TypeDefs, Children, VNodeComponentClass, VNode, createRef} from 'intact';
+import template from './column.vdt';
+import {useGroup} from './useGroup';
+
+export interface TableColumnProps {
+    key: string
+    title?: Children
+    sortable?: boolean
+    width?: string | number
+    group?: TableColumnGroupItem[]
+    multiple?: boolean
+    ignore?: boolean
+    fixed?: 'left' | 'right'
+    align?: 'left' | 'center' | 'right'
+    exportTitle?: string
+    exportCell?: (data: any, index: number) => string
+    minWidth?: number
+
+    // passed by Table
+    // offset: number
+    cols?: number
+    rows?: number
+    prevVNode?: VNodeComponentClass<TableColumn> | null
+}
+
+export interface TableColumnEvents { }
+
+export interface TableColumnBlocks<T> {
+    title: null
+    template: [T, number]
+    default: [T, number]
+}
+
+export type TableColumnGroupItem = {
+    label: Children
+    value: any
+}
+
+const typeDefs: Required<TypeDefs<TableColumnProps>> = {
+    key: {
+        type: String,
+        required: true,
+    },
+    title: [String, Number, VNode],
+    sortable: Boolean,
+    width: [String, Number],
+    group: Array,
+    multiple: Boolean,
+    ignore: Boolean,
+    fixed: ['left', 'right'],
+    align: ['left', 'center', 'right'],
+    exportTitle: String,
+    exportCell: Function,
+    minWidth: Number,
+
+    // offset: null,
+    cols: null,
+    rows: null,
+    prevVNode: null,
+};
+
+export class TableColumn<T = any> extends Component<TableColumnProps, TableColumnEvents, TableColumnBlocks<T>> {
+    static template = template;
+    static typeDefs = typeDefs;
+
+    public elementRef = createRef<HTMLElement>();
+
+    private group = useGroup();
+}

package/components/table/column.vdt

@@ -0,0 +1,99 @@
+import {getClassAndStyleForFixed} from './useFixedColumns';
+import {Dropdown, DropdownMenu, DropdownItem} from '../dropdown';
+import {Button} from '../button';
+import {Icon} from '../icon';
+import {Checkbox} from '../checkbox';
+import {makeGroupMenuStyles} from './styles';
+import {isStringOrNumber, get} from 'intact-shared';
+import {context as GroupContext} from './useGroup';
+import {context as SortableContext} from './useSortable';
+import {linkEvent} from 'intact';
+import {context as TableContext} from './useColumns';
+import {context as ResizableContext} from './useResizable';
+import {context as FixedColumnsContext} from './useFixedColumns';
+import {stopPropagation} from '../utils';
+
+const {title, fixed, group, multiple, key, sortable, cols, rows} = this.get();
+const {onSelect, isChecked, getGroupText} = this.group;
+
+<TableContext.Consumer>
+    {checkType => {
+        return <GroupContext.Consumer>
+            {({group: currentGroup, onChange}) => {
+                return <SortableContext.Consumer>
+                    {({sort, onChange: onChangeSort}) => {
+                        return <ResizableContext.Consumer>
+                            {({resizable, onStart}) => {
+                                return <FixedColumnsContext.Consumer>
+                                    {(offsetMap) => {
+                                        const {className, style} = getClassAndStyleForFixed(this.get(), offsetMap[key], checkType);
+                                        const classNameObj = {
+                                            'k-column-sortable': sortable,
+                                            [className]: className,
+                                        }
+
+                                        const groupValue = currentGroup && currentGroup[key];
+                                        const groupText = getGroupText(groupValue);
+
+                                        const type = sort && sort.key === key && sort.type;
+
+                                        let checked;
+                                        return <th className={classNameObj}
+                                            style={style}
+                                            title={isStringOrNumber(title) ? title + (groupText || '') : null}
+                                            ev-click={sortable ? linkEvent(key, onChangeSort) : null}
+                                            colspan={cols}
+                                            rowspan={rows}
+                                            ref={this.elementRef}
+                                        >
+                                            <div v-if={resizable && this.$vNode.props.prevVNode}
+                                                class="k-table-resize"
+                                                ev-mousedown={e => {
+                                                    e._vNode = this.$vNode;
+                                                    onStart(e);
+                                                }} 
+                                            />
+                                            <div class="k-table-title">
+                                                <div class="k-table-title-text c-ellipsis">
+                                                    <b:title>{title}</b:title>
+                                                    {groupText}
+                                                </div>
+                                                <Dropdown v-if={group}
+                                                    position={{my: 'center top', at: 'center bottom+5', collision: 'flipfit'}}
+                                                    key="dropdown"
+                                                >
+                                                    <Button icon size="mini" class="k-table-group"
+                                                        ev-click={stopPropagation}
+                                                    >
+                                                        <Icon class="ion-android-arrow-dropdown" />
+                                                    </Button>
+                                                    <DropdownMenu class={{"k-table-group-dropdown": true, [makeGroupMenuStyles()]: true}}>
+                                                        <DropdownItem v-for={group}
+                                                            ev-select={() => onSelect($value.value, groupValue, onChange)}
+                                                            hideOnSelect={!multiple}
+                                                            class={{'k-active': (checked = isChecked($value.value, groupValue))}}
+                                                        >
+                                                            <Checkbox v-if={multiple} value={checked}>{$value.label}</Checkbox>
+                                                            <span v-else>{$value.label}</span>
+                                                        </DropdownItem>
+                                                    </DropdownMenu>
+                                                </Dropdown>
+                                                <div v-if={sortable}
+                                                    class={{'k-column-sort': true, [`k-${type}`]: type}}
+                                                >
+                                                    <Icon class="ion-android-arrow-dropup k-asc" />
+                                                    <Icon class="ion-android-arrow-dropdown k-desc" />
+                                                </div>
+                                            </div>
+                                        </th>
+                                    }}
+                                </FixedColumnsContext.Consumer>
+                            }}
+                        </ResizableContext.Consumer>
+                    }}
+                </SortableContext.Consumer>
+            }}
+        </GroupContext.Consumer>
+    }}
+</TableContext.Consumer>
+

package/components/table/demos/basic.md

@@ -0,0 +1,30 @@
+---
+title: 基本用法
+order: 0
+---
+
+上面是一个简单的`Table`，通过`data`属性设置表格展示的数据，通过`scheme`属性或者`TableColumn`
+组件定义表格结构，详见”定义表格结构“说明
+
+```vdt
+import {Table, TableColumn} from 'kpc';
+
+<Table data={this.get('data')} resizable>
+    <TableColumn key="a" title="Title 1" />
+    <TableColumn key="b" title="Title 2" />
+</Table>
+```
+
+```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/demos/checkType.md

@@ -0,0 +1,41 @@
+---
+title: 选择框的类型
+order: 3
+---
+
+通过`checkType`设置行选择类型，`checkbox`多选(默认) / `radio`单选 / `none`不可选
+
+```vdt
+import {Table, TableColumn} from 'kpc';
+
+<div>
+    <Table data={this.get('data1')} ref="__checkbox">
+        <TableColumn key="a" title="Title" />
+    </Table>
+    <Table data={this.get('data2')} checkType="radio" ref="__radio">
+        <TableColumn key="a" title="Title" />
+    </Table>
+    <Table data={this.get('data3')} checkType="none">
+        <TableColumn key="a" title="Title" />
+    </Table>
+</div>
+```
+
+```styl
+.k-table
+    margin-bottom 20px
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+
+    static defaults() {
+        return {
+            data1: [{a: 'checkbox 1'}, {a: 'checkbox 2'}],
+            data2: [{a: 'radio 1'}, {a: 'radio 2'}],
+            data3: [{a: 'no check 1'}, {a: 'no check 2'}],
+        }
+    }
+}
+```

package/components/table/demos/checkedKeys.md

@@ -0,0 +1,72 @@
+---
+title: 行选中
+order: 4
+---
+
+通过`checkedKeys`来控制哪些列被选中，默认他们的取值
+为行的索引或索引数组。但我们也可以通过`rowKey`函数为每一行指定唯一的`key`，此时他们的取值为`key`值
+或`key`值的数组
+
+```vdt
+import {Table, TableColumn} from 'kpc';
+
+<div>
+    <div class='tables'>
+        <Table data={this.get('data1')} checkedKeys={[0]} checkType='radio'>
+            <TableColumn key="a" title="Radio without rowKey" />
+        </Table>
+        <Table data={this.get('data2')} checkType='radio' rowKey={this.setRowKey} checkedKeys={['yes']}>
+            <TableColumn key="text" title="Radio with rowKey" />
+        </Table>
+    </div>
+    <div class='tables'>
+        <Table data={this.get('data3')} checkedKeys={[0, 2]}>
+            <TableColumn key="a" title="checkbox without rowKey" />
+        </Table>
+        <Table data={this.get('data2')} rowKey={this.setRowKey} checkedKeys={['yes']}>
+            <TableColumn key="text" title="checkbox with rowKey" />
+        </Table>
+    </div>
+</div>
+```
+
+```styl
+.tables
+    display: flex
+    margin-bottom: 20px
+    .k-table
+        margin-left: 20px
+```
+
+```ts
+interface Props {
+    data1: DataItem1[]
+    data2: DataItem2[]
+    data3: DataItem1[]
+}
+
+type DataItem1 = {
+    a: string
+}
+
+type DataItem2 = {
+    text: string
+    id: string
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            data1: [{a: 'default checked by index'}, {a: 'unchecked'}],
+            data2: [{text: 'default checked by rowKey', id: 'yes'}, {text: 'unchecked', id: 'no'}],
+            data3: [{a: 'default checked by index'}, {a: 'unchecked'}, {a: 'default checked'}],
+        }
+    }
+
+    setRowKey(value: DataItem2, index: number) {
+        return value.id;
+    }
+}
+```

package/components/table/demos/disableRow.md

@@ -0,0 +1,42 @@
+---
+title: 禁用行可选
+order: 9
+---
+
+`disableRow`：禁用某一行可选状态，类型：`Function`，默认：`function(data, index) { return false }`，该函数
+如果返回`true`，则表示禁用该行可选
+
+对于`disabled`的行，它的选中状态不会随全选/反全选而改变
+
+> 禁用的行会添加`k-disabled`样式名
+
+```vdt
+import {Table, TableColumn} from 'kpc';
+
+<Table 
+    data={[{a: '1'}, {a: '2'}, {a: '3'}, {a: '4'}, {a: '5'}]}
+    disableRow={(data, index) => index % 2 === 0}
+    v-model:checkedKeys="checkedKeys"
+    rowKey={data => data.a}
+    ref="__test"
+>
+    <TableColumn key="a" title="odd rows are uncheckable" />
+</Table>
+```
+
+```styl
+.k-disabled
+   background-color: #d9d9d9 !important
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+
+    static defaults() {
+        return {
+            checkedKeys: ['3']
+        }
+    }
+}
+```

package/components/table/demos/draggable.md

@@ -0,0 +1,74 @@
+---
+title: 行可拖动
+order: 26
+---
+
+给`Table`添加`draggable`属性，则可实现行拖动排序，拖动开始和结束会分别触发事件`dragstart`和`dragend`
+
+```vdt
+import {Table, TableColumn, Button, ButtonGroup} from 'kpc';
+
+<Table fixHeader="300"
+    data={this.get('data')}
+    ref="table"
+    rowKey={item => item.name}
+    ev-dragend={this._onDragEnd}
+    draggable
+>
+    <TableColumn title="Name" key="name" />
+    <TableColumn title="IP" key="ip" />
+    <TableColumn title="Operation" key="op">
+        <b:template args="[data, index]">
+            <a ev-click={this._remove.bind(this, index)}>Remove</a> 
+        </b:template>
+    </TableColumn>
+</Table>
+```
+
+```ts
+import {range, bind} from 'kpc/components/utils';
+import {Message, TableRowKey} from 'kpc';
+
+interface Props {
+    data: DataItem[]
+}
+
+type DataItem = {
+    name: string
+    ip: string
+}
+
+const data: DataItem[] = range(1, 20).map(item => {
+    return {
+        name: 'name ' + item,
+        ip: '127.0.0.' + item
+    };
+});
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            data: data 
+        }
+    }
+
+    @bind
+    _remove(index: number) {
+        const data = this.get('data').slice(0);
+        data.splice(index, 1);
+        this.set('data', data);
+    }
+
+    @bind
+    _onDragEnd({key, from, to}: {key: TableRowKey, from: number, to: number}) {
+        Message.success(`Drag ${key} from ${from} to ${to}.`);
+        // change the data
+        const data = this.get('data').slice(0);
+        const row = data.splice(from, 1);
+        data.splice(to, 0, row[0]);
+        this.set('data', data);
+    }
+}
+```

package/components/table/demos/empty.md

@@ -0,0 +1,29 @@
+---
+title: 自定义无内容时的展示信息
+order: 16
+---
+
+当`data`为空数组`[]`时, 通过`empty`扩展点，来定义无数据是展示的内容
+
+```vdt
+import {Table, TableColumn} from 'kpc';
+
+<div>
+    <Table data={[]}>
+        <TableColumn key="a" title="表头1" />
+        <TableColumn key="b" title="表头2" />
+    </Table>
+    <Table data={undefined}>
+        <TableColumn key="a" title="表头1" />
+        <TableColumn key="b" title="表头2" />
+        <b:empty>
+            <div style="color: red">没有数据</div>
+        </b:empty>
+    </Table>
+</div>
+```
+
+```styl
+.k-table
+    margin-bottom 10px
+```