@king-design/intact 2.0.0-beta.0

package/components/transfer/demos/customList.md

@@ -0,0 +1,159 @@
+---
+title: 完全自定义
+order: 3
+---
+
+本例展示如何利用`Transfer`自定义更复杂的应用场景，本例中我们通过`list`扩展点定义整个列表，并且根据扩展点参数
+区别左右列表，定义不同的内容；然后通过`enableAdd`和`enableRemove`定义箭头按钮的可用状态；最后通过`add`和`remove`
+事件定义左右穿梭的逻辑
+
+```vdt
+import {Transfer, Checkbox} from 'kpc';
+
+<div>
+    <Transfer 
+        enableAdd={this.enableAdd}
+        enableRemove={this.enableRemove}
+        ev-add={this.onAdd}
+        ev-remove={this.onRemove}
+    >
+        <b:header args="type">
+            <div v-if={type === 'left'}>未分配</div>
+            <div v-else>标准双人间</div>
+        </b:header>
+        <b:list args="type">
+            <template v-if={type === 'left'}>
+                <div class="k-transfer-item" v-for={this.get('users')}>
+                    <Checkbox v-model="checkedUsers" 
+                        trueValue={$value} 
+                        disabled={!!$value.room}
+                    >
+                        {$value.name}
+                        <span v-if={$value.room}>（{$value.room.name}）</span>
+                    </Checkbox>
+                </div>
+            </template>
+            <template v-else>
+                <div class="k-transfer-item" v-for={this.get('rooms')}>
+                    <Checkbox v-model="checkedRooms" 
+                        trueValue={$value}
+                    >
+                        {$value.name}
+                        <span>（当前人数：{$value.users.length}）</span>
+                    </Checkbox>
+                </div>
+            </template>
+        </b:list>
+    </Transfer>
+</div>
+```
+
+```ts
+import {Message, bind} from 'kpc';
+
+interface Props {
+    users: User[]
+    rooms: Room[]
+    checkedUsers?: User[]
+    checkedRooms?: Room[]
+}
+
+type User = {
+    name: string
+    id: number
+    room: Room | null
+}
+
+type Room = {
+    name: string
+    id: number
+    users: User[]
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            users: [
+                {name: '刘一', id: 1, room: null},
+                {name: '陈二', id: 2, room: null},
+                {name: '张三', id: 3, room: null},
+                {name: '李四', id: 4, room: null},
+                {name: '王五', id: 5, room: null},
+                {name: '赵六', id: 6, room: null},
+                {name: '孙七', id: 7, room: null},
+            ],
+            rooms: [
+                {name: '标准双人间1', id: 1, users: []},
+                {name: '标准双人间2', id: 2, users: []},
+                {name: '标准双人间3', id: 3, users: []},
+                {name: '标准双人间4', id: 4, users: []},
+                {name: '标准双人间5', id: 5, users: []},
+            ],
+            checkedUsers: [],
+            checkedRooms: [],
+        } as Props;
+    }
+
+    @bind
+    enableAdd() {
+        return !!this.get('checkedUsers')!.length && this.get('checkedRooms')!.length === 1;
+    }
+
+    @bind
+    enableRemove() {
+        return !!this.get('checkedRooms')!.length;
+    }
+
+    @bind
+    onAdd() {
+        const users = this.get('checkedUsers')!;
+        const room = this.get('checkedRooms')![0];
+
+        if (users.length > 2) {
+            return Message.error('当前房间最多容纳两人');
+        }
+
+        users.forEach(user => {
+            user.room = room;
+            room.users.push(user);
+        });
+
+        this.set({'checkedUsers': [], 'checkedRooms': []});
+    }
+
+    @bind
+    onRemove() {
+        const rooms = this.get('checkedRooms')!;
+        
+        rooms.forEach(room => {
+            room.users.forEach(user => {
+                user.room = null; 
+            });
+            room.users = [];
+        });
+
+        this.set('checkedRooms', []);
+    }
+}
+```
+
+```vue-methods
+onAdd() {
+    const users = this.checkedUsers!;
+    const room = this.checkedRooms![0];
+
+    if (users.length > 2) {
+        return Message.error('当前房间最多容纳两人');
+    }
+
+    users.forEach(user => {
+        user.room = room;
+        room.users.push(user);
+    });
+
+    this.checkedUsers = [];
+    this.checkedRooms = [];
+}
+```

package/components/transfer/demos/getData.md

@@ -0,0 +1,59 @@
+---
+title: 获取已选择的数据
+order: 7
+---
+
+通过`getData()`方法可以获取已选择的节点的数据。
+
+通过`getCheckedData([model])`方法可以获取选中的节点的数据。当`model`为`left`时，返回
+左边选中的节点的数据，当`model`为`right`时，返回右边选中的节点的数据。
+
+```vdt
+import {Transfer, Button} from 'kpc';
+
+<div>
+    <Button ev-click={this.getData}>get data</Button>
+    <Button ev-click={this.getCheckedData.bind(this, 'left')}>get left checked data</Button>
+    <Button ev-click={this.getCheckedData.bind(this, 'right')}>get right checked data</Button>
+    <br />
+    <br />
+    <Transfer data={this.get('data')} v-model="value" ref="transfer" />
+    <p>You selected: {JSON.stringify(this.get('value'))}</p>
+</div>
+```
+
+```styl
+.k-btn
+    margin-right 16px
+```
+
+```ts
+import {bind} from 'kpc';
+
+export default class extends Component {
+    static template = template;
+
+    static defaults() {
+        return {
+            data: [
+                {label: '主机名0', key: 0},
+                {label: '主机名1', key: 1, disabled: true},
+                {label: '主机名2', key: 2},
+                {label: '主机名3', key: 3, disabled: true},
+                {label: '主机名4', key: 4},
+            ],
+            value: [0, 1]
+        }
+    }
+
+    @bind
+    getCheckedData(model: string) {
+        console.log(this.refs.transfer.getCheckedData(model));
+    }
+
+    @bind
+    getData() {
+        console.log(this.refs.transfer.getData());
+    }
+}
+```

package/components/transfer/demos/label.md

@@ -0,0 +1,63 @@
+---
+title: 自定义渲染列表
+order: 1
+---
+
+通过`label`属性，可以自定义列表渲染逻辑。此时如果你需要启动列表过滤功能`filterable`，
+需要通过`filter`属性，指定自定义过滤函数。
+
+全选和`filterable`一起作用时，交互逻辑如下：
+
+1. 左侧未过滤，全选则选中所有非`disabled`的选项
+2. 左侧已过滤，全选则选中当前过滤出的非`disabled`的选项
+3. 左侧先全选，再过滤，过滤掉的选项保持选中状态
+
+
+```vdt
+import {Transfer} from 'kpc';
+
+<Transfer data={this.get('data')} 
+    filter={this.filter}
+    filterable
+    keyName="name"
+    ref="__test"
+>
+    <b:label args="[data, index, type]">
+        <div>
+            <div>{data.name}</div>
+            <p>{data.desc} | {data.ip}</p>
+        </div>
+    </b:label>
+</Transfer>
+```
+
+```ts
+type DataItem = {
+    name: string
+    desc: string
+    ip: string
+    disabled?: boolean
+}
+
+export default class extends Component {
+    static template = template;
+
+    static defaults() {
+        return {
+            data: [
+                {name: '主机名0', desc: '前端服务器0', ip: '192.168.1.0'},
+                {name: '主机名1', desc: '前端服务器1', ip: '192.168.1.1'},
+                {name: '主机名2', desc: '前端服务器2', ip: '192.168.1.2'},
+                {name: '主机名3', desc: '前端服务器3', ip: '192.168.1.3', disabled: true},
+                {name: '主机名4', desc: '前端服务器4', ip: '192.168.1.4'},
+            ]
+        }
+    }
+
+    filter(data: DataItem, keywords: string) {
+        return data.name.includes(keywords) || 
+            data.desc.includes(keywords) ||
+            data.ip.includes(keywords);
+    }
+}
+```

package/components/transfer/demos/leftChecked.md

@@ -0,0 +1,51 @@
+---
+title: 控制选择项
+order: 2
+---
+
+通过`leftCheckedKeys`属性，我们可以控制左侧已选项，`rightCheckedKeys`同理
+
+```vdt
+import {Transfer} from 'kpc';
+
+<div>
+    <Transfer data={this.get('data')} 
+        v-model:leftCheckedKeys="checked"
+    />
+    <p>You checked left side: {JSON.stringify(this.get('checked'))}</p>
+</div>
+```
+
+```ts
+const data = [
+    {label: '主机名0', key: 0},
+    {label: '主机名1', key: 1, disabled: true},
+    {label: '主机名2', key: 2},
+    {label: '主机名3', key: 3, disabled: true},
+    {label: '主机名4', key: 4},
+];
+export default class extends Component {
+    static template = template;
+
+    static defaults() {
+        return {
+            data: data,
+            checked: [0, 2]
+        }
+    }
+}
+```
+
+```vue-data
+data() {
+    return {
+        data: data,
+        checked: [0, 2]
+    }
+},
+```
+
+```angular-properties
+private data = data;
+private checked = [0, 2];
+```

package/components/transfer/demos/tree.md

@@ -0,0 +1,237 @@
+---
+title: 与树形控件结合 
+order: 4
+---
+
+与【完全自定义】示例一样，`Transfer`也可以与`Tree`结合使用
+
+```vdt
+import {Transfer, Tree} from 'kpc';
+
+<Transfer
+    enableAdd={this.enableAdd}
+    enableRemove={this.enableRemove}
+    ev-add={this.onAdd}
+    ev-remove={this.onRemove}
+>
+    <b:header args="type">
+        <div v-if={type === 'left'}>请选择</div>
+        <div v-else>已选择</div>
+    </b:header>
+    <b:list args="type">
+        <Tree v-if={type === 'left'}
+            data={this.get('leftData')}
+            checkbox
+            v-model:checkedKeys="leftCheckedKeys"
+            v-model:expandedKeys="leftExpandedKeys"
+            ref="left"
+        />
+        <Tree v-else
+            data={this.get('rightData')}
+            checkbox
+            v-model:checkedKeys="rightCheckedKeys"
+            v-model:expandedKeys="rightExpandedKeys"
+            ref="right"
+        />
+    </b:list>
+</Transfer>
+```
+
+```ts
+import {bind, Tree, TreeNode} from 'kpc';
+
+interface Props {
+    data: DataItem[]
+    leftCheckedKeys?: string[]
+    rightCheckedKeys?: string[],
+    leftExpandedKeys?: string[],
+    rightExpandedKeys?: string[],
+    leftData: DataItem[],
+    rightData: DataItem[]
+}
+
+type DataItem = {
+    label: string
+    key: string
+    children?: DataItem[]
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            data: [
+                {
+                    label: 'database',
+                    key: 'database',
+                    children: [
+                        {
+                            label: 'table1',
+                            key: 'table1',
+                            children: [
+                                {
+                                    label: 'class',
+                                    key: 'class'
+                                },
+                                {
+                                    label: 'student',
+                                    key: 'student'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'table2',
+                            key: 'table2',
+                            children: [
+                                {
+                                    label: 'id',
+                                    key: 'id',
+                                },
+                                {
+                                    label: 'name',
+                                    key: 'name'
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            leftCheckedKeys: [],
+            rightCheckedKeys: [],
+            leftExpandedKeys: [],
+            rightExpandedKeys: [],
+            leftData: [],
+            rightData: []
+        } as Props;
+    }
+
+    init() {
+        // expand all nodes
+        const data = this.get('data');
+        const allKeys: string[] = [];
+        const loop = ((children: DataItem[] | undefined)=> {
+            if (children) {
+                children.forEach(item => {
+                    allKeys.push(item.key);
+                    loop(item.children);
+                });
+            }
+        });
+        loop(data);
+        this.set({
+            leftExpandedKeys: allKeys,
+            rightExpandedKeys: allKeys,
+            leftData: this.deepClone(data),
+        });
+    }
+
+    @bind
+    enableAdd() {
+        return this.get('leftCheckedKeys')!.length > 0;
+    }
+
+    @bind
+    enableRemove() {
+        return this.get('rightCheckedKeys')!.length > 0;
+    }
+
+    @bind
+    onAdd() {
+        const {from, to} = this.moveData(this.refs.left, this.get('leftData'), this.get('rightData'));
+        this.set({leftData: from, rightData: to, leftCheckedKeys: []});
+    }
+
+    @bind
+    onRemove() {
+        const {from, to} = this.moveData(this.refs.right, this.get('rightData'), this.get('leftData'));
+        this.set({leftData: to, rightData: from, rightCheckedKeys: []});
+    }
+
+    moveData(tree: Tree<string>, from: DataItem[], to: DataItem[]) {
+        from = this.deepClone(from);
+        to = this.deepClone(to);
+        const loop = (children: TreeNode<string>[] | null, from: DataItem[] | null | undefined, to: DataItem[]) => {
+            if (!children) return;
+
+            let deleteCount = 0;
+            children.forEach((node: TreeNode<string>, index: number) => {
+                const data = node.data as DataItem;
+                if (node.checked) {
+                    // remove from `from` 
+                    if (from) {
+                        from.splice(index - deleteCount, 1);
+                        deleteCount++;
+                    }
+                    // add to `to` 
+                    let newData = to.find(item => item.key === data.key);
+                    if (!newData) {
+                        to.push(this.deepClone(data));
+                    } else {
+                        loop(node.children, null, newData.children!);
+                    }
+                } else if (node.indeterminate) {
+                    let newData = to.find(item => item.key === data.key);
+                    if (!newData) {
+                        newData = {...data, children: []};
+                        to.push(newData);
+                    }
+                    loop(node.children, from![index - deleteCount].children, newData.children!);
+                }
+            });
+        };
+
+        loop(tree.getNodes(), from, to);
+
+        return {from, to};
+    }
+
+    deepClone<T>(data: T): T {
+        if (data == null) return data;
+
+        if (Array.isArray(data)) {
+            return data.map(item => {
+                return this.deepClone(item);
+            }) as unknown as T;
+        } 
+
+        if (typeof data === 'object') {
+            const ret: any = {};
+            for (let key in data) {
+                ret[key] = this.deepClone(data[key]);
+            }           
+            return ret as T;
+        }
+
+        return data;
+    }
+}
+```
+
+```vue-script
+mounted() {
+    // expand all nodes
+    const data = this.data;
+    const allKeys = [];
+    const loop = (children => {
+        if (children) {
+            children.forEach(item => {
+                allKeys.push(item.key);
+                loop(item.children);
+            });
+        }
+    });
+    loop(data);
+    this.leftExpandedKeys= allKeys;
+    this.rightExpandedKeys = allKeys;
+    this.leftData = this.deepClone(data);
+}
+```
+
+```vue-methods
+set(data) {
+    for (let key in data) {
+        this[key] = data[key];
+    }
+}
+```

package/components/transfer/index.md

@@ -0,0 +1,49 @@
+---
+title: 穿梭框
+category: 组件
+order: 99 
+sidebar: doc
+---
+
+# 属性
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| data | 需要展示的列表数据, 其中`label`会默认当做列表文案展示，`disabled`用于指定是否禁用该行选择 | `Array` | `[]` |
+| value | 已选择key的数据项，可用`v-model`进行双向绑定 | `Array` | `[]` |
+| leftCheckedKeys | 通过`key`指定勾选的左侧数据节点 | `Array` | `[]` |
+| rightCheckedKeys | 通过`key`指定勾选的右侧数据节点 | `Array` | `[]` |
+| filterable | 是否需要过滤列表功能，默认根据`data`中定义的`label`进行过滤 | `Boolean` | `false` |
+| filter | 指定自定义的过滤函数，组件会将每行数据`data`以及关键词`keywords`传给它 | `Function` | `(data, keywords) => data.label.includes(keywords)` |
+| labelName | 指定每一行数据的哪个属性当做列表的`label`属性，默认会取`label`当做`label` | `String` | `"label"` |
+| placeholder | 当开启过滤功能时，用于输入框展示的占位文案 | `String` | `"请输入"` |
+| leftTitle | 左边顶部展示的标题 | `String` | `"请选择"` |
+| rightTitle | 右边顶部展示的标题 | `String` | `"已选择"` |
+| leftKeywords | 左边筛选关键字 | `String` | `undefined` |
+| rightKeywords | 右边筛选关键字 | `String` | `undefined` |
+| keyName | 指定每一行数据的哪个属性当做列表的`key`属性，默认会取`key`或者`label`当做`key` | `String` | `"key"` |
+| enableAdd | 指定右箭头按钮的可用状态 | `Function` | `undefined` |
+| enableRemove | 指定左箭头按钮的可用状态 | `Function` | `undefined` |
+
+# 扩展点
+
+| 名称 | 说明 | 参数 |
+| --- | --- | --- |
+| label | 自定义每一项的渲染函数，类似于`label`属性 | `data, index, type` |
+| filter | 自定义检索内容 | `type` | 
+| header | 自定义整个头部内容 | `type` |
+| list | 自定义整个列表内容 | `type` |
+
+# 方法
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| getData | 获取右边的节点数据 | - | `Array` |
+| getCheckedData | 获取勾选的节点数据 | `model` 要获取`左边`或`右边`的数据 | `"left"` | `"right"` |
+
+# 事件
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| add | 右箭头按钮点击事件 | `-` |
+| remove | 左箭头按钮点击事件 | `-` |