@king-design/intact 3.6.2-beta.1 → 3.7.0

package/components/timepicker/index.spec.ts

@@ -27,7 +27,7 @@ describe('Timepicker', () => {
 
         const dropdown = getElement('.k-time-content')!;
         const ok = dropdown.querySelector('.k-btn') as HTMLElement;
-        expect(ok.classList.contains('k-disabled')).eql(true);
+        expect(ok.classList.contains('k-disabled')).eql(false);
         expect(dropdown.innerHTML).to.matchSnapshot();
 
         const next = dropdown.querySelector('.k-scroll-select-item:nth-child(11)') as HTMLElement;
@@ -41,7 +41,7 @@ describe('Timepicker', () => {
         expect(dropdown.innerHTML).to.matchSnapshot();
         ok.click();
         await wait(500);
-        expect(instance.get('time')).to.eql('02:00:00');
+        expect(instance.get('time')).to.eql('03:34:56');
         expect(dropdown.style.display).to.eql('none');
         // set time
         instance.set('time', '03:03:03');
@@ -245,7 +245,18 @@ describe('Timepicker', () => {
         await wait();
         expect(dropdown.innerHTML).to.matchSnapshot();
         dropdown.querySelector<HTMLElement>('.k-btn')!.click();
-        expect(instance.get('time')).to.eql(['00:30:00', '23:30:00']);
+        expect(instance.get('time')).to.eql(['00:30:00', '23:00:00']);
+    });
+
+    it('should not have 23:59:59 in step mode without max', async () => {
+        const [instance, element] = mount(StepRangeDemo);
+        const picker = element.querySelector('.k-select') as HTMLElement;
+        picker.click();
+        await wait();
+        const dropdown = getElement('.k-time-content')!;
+        const options = dropdown.querySelectorAll('k-scroll-select-item');
+        const texts = Array.from(options).map(el => (el as HTMLElement).innerText.trim());
+        expect(texts).to.not.include('23:59:59');
     });
 
     it('format', async () => {
@@ -261,7 +272,7 @@ describe('Timepicker', () => {
         await wait();
         content.querySelector<HTMLElement>('.k-btn')!.click();
         await wait();
-        expect(instance.get('time1')).to.eql('02:00 am');
+        expect(instance.get('time1')).to.eql('03:34 am');
         expect(input1.innerHTML).to.matchSnapshot();
 
         input2.click();
@@ -302,7 +313,7 @@ describe('Timepicker', () => {
             private Timepicker = Timepicker;
         }
 
-        const [instance, element] = mount(Demo);
+        const [instance, element] = mount(Demo as any);
         const [
             basicInput, multipleInput,
             rangeInput, formatInput

package/components/timepicker/useDefaultValue.ts

@@ -9,16 +9,25 @@ export function useDefaultValue() {
     const instance = useInstance() as PanelPicker; 
 
     function get(): StateValueItem {
-        const _value = instance.value.value.value;
-        const lastValue = last(_value);
-        const { range } = instance.get();
+        const { range, min, max } = instance.get();
+        const _value = instance.value?.value.value || [];
+        const options = instance.step?.options.value;
+
+        // 优先级：用户选择值 > step 选项首尾 > min/max 属性 > 全局默认值
+        const hasOptions = options && options.length;
+        const start = hasOptions 
+            ? instance.formats.createDateByValueFormat(options![0].value)
+            : (min ? instance.formats.createDateByValueFormat(min) : NOW_START);
+        
+        const end = hasOptions 
+            ? instance.formats.createDateByValueFormat(options![options!.length - 1].value)
+            : (max ? instance.formats.createDateByValueFormat(max) : NOW_END);
 
         if (range) {
-            // consider the second last value to maintain consistency
-            const penulimate = getPenulimate(_value);
-            return Object.assign([NOW_START, NOW_END], penulimate, lastValue);
+            return Object.assign([start, end], getPenulimate(_value), last(_value));
         }
-        return lastValue || NOW_START;
+
+        return last(_value) || start;
     }
 
     return { get };

package/components/timepicker/useStep.ts

@@ -24,7 +24,7 @@ export function useStep(
     useReceive<StepComponent>(['step', 'min', 'max'], generateOptions);
 
     function generateOptions() {
-        const {step} = instance.get();
+        const {step, max} = instance.get();
 
         if (step) {
             const data: Option[] = [];
@@ -43,7 +43,8 @@ export function useStep(
                 if (value <= maxValue) {
                     push(value);
                     if (+value === +maxValue) break;
-                } else if (data.length) {
+                } else if (data.length && max !== undefined) {
+                    // unless max is undefined, it means the max is not set, so we don't need to add the maxValue to the last
                     // it the last value is less than maxValue,
                     // add the maxValue to the last
                     push(maxValue);

package/components/transfer/demos/customFilter.md

@@ -1,6 +1,6 @@
 ---
 title: 自定义搜索
-order: 1.1
+order: 2
 ---
 
 我们可以通过`filter`扩展点自定义搜索内容，而且通过该扩展点的参数`type`，可以给左侧/右侧/两侧

package/components/transfer/demos/customList.md

@@ -1,6 +1,6 @@
 ---
 title: 完全自定义
-order: 3
+order: 4
 ---
 
 本例展示如何利用`Transfer`自定义更复杂的应用场景，本例中我们通过`list`扩展点定义整个列表，并且根据扩展点参数

package/components/transfer/demos/getData.md

@@ -1,6 +1,6 @@
 ---
 title: 获取已选择的数据
-order: 7
+order: 8
 ---
 
 通过`getData()`方法可以获取已选择的节点的数据。

package/components/transfer/demos/leftChecked.md

@@ -1,6 +1,6 @@
 ---
 title: 控制选择项
-order: 2
+order: 3
 ---
 
 通过`leftCheckedKeys`属性，我们可以控制左侧已选项，`rightCheckedKeys`同理

package/components/transfer/demos/pagination.md

@@ -0,0 +1,63 @@
+---
+title: 分页
+order: 5
+---
+
+数据量大时，给组件添加`pagination`属性即可开启分页功能，当改变页码或每页数量时会触发`page`事件。
+
+```vdt
+import {Transfer} from 'kpc';
+
+<div>
+    <Transfer v-model="value"
+        data={this.get('data')} 
+        pagination
+        filterable
+        filter={this.customFilter}
+        ev-page={this.onChangePage}
+        ref="__test"
+    />
+    <p>{ `You selected: [${this.get('value').join(', ')}]` }</p>
+</div>
+```
+
+```ts
+import {range, bind} from 'kpc/components/utils';
+import type {TransferDataItem} from 'kpc';
+
+interface Props {
+    data: TransferDataItem[]
+    value?: number[]
+}
+
+const data: TransferDataItem[] = range(1, 100).map(item => {
+    return {
+        label: `主机名${item}`,
+        key: item
+    };
+});
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            data: data,
+            value: []
+        }
+    }
+
+    @bind
+    onChangePage(model: 'left' | 'right', data: { value: number, limit: number }) {
+        console.log(`${model} panel: page ${data.value}, limit ${data.limit}`);
+    }
+
+    @bind
+    customFilter(item: TransferDataItem, keywords: string) {
+        const label = item.label as string;
+        const matchKeywords = label.toLowerCase().includes(keywords.toLowerCase());
+        return matchKeywords;
+    }
+}
+```
+

package/components/transfer/demos/table.md

@@ -0,0 +1,248 @@
+---
+title: 与表格控件结合
+order: 7
+---
+
+与【完全自定义】示例一样，`Transfer`也可以与`Table`结合使用。当需要在表格中展示数据并支持分页和筛选时，可以在`b:list`插槽中使用带分页的`Table`组件，并且在`b:filter`扩展点自定义筛选输入框，实现筛选逻辑。
+
+```vdt
+import {Transfer, Table, TableColumn, Input, Icon} from 'kpc';
+
+<Transfer
+    filterable
+    enableAdd={this.enableAdd}
+    enableRemove={this.enableRemove}
+    ev-add={this.onAdd}
+    ev-remove={this.onRemove}
+    class="custom-table-transfer"
+>
+    <b:header args="type">
+        <div v-if={type === 'left'}>
+            <span>可选数据</span>
+            <span>{ this.get('leftCheckedKeys').length + ' / ' + this.get('leftData').length }</span>
+        </div>
+        <div v-else>
+            <span>已选数据</span>
+            <span>{ this.get('rightCheckedKeys').length + ' / ' + this.get('rightData').length }</span>
+        </div>
+    </b:header>
+    <b:filter args="type">
+        <Input v-if={type === 'left'}
+            placeholder="搜索名称、IP或状态"
+            clearable
+            size="small"
+            value={this.get('leftKeywords')}
+            ev-$change:value={this.onLeftKeywordsChange}
+        >
+            <b:prefix>
+                <Icon class="k-icon-search" size="small" />
+            </b:prefix>
+        </Input>
+        <Input v-else
+            placeholder="搜索名称、IP或状态"
+            clearable
+            size="small"
+            value={this.get('rightKeywords')}
+            ev-$change:value={this.onRightKeywordsChange}
+        >
+            <b:prefix>
+                <Icon class="k-icon-search" size="small" />
+            </b:prefix>
+        </Input>
+    </b:filter>
+    <b:list args="type">
+        <Table v-if={type === 'left'}
+            data={this.get('leftFilteredData')}
+            rowKey={item => item.id}
+            checkedKeys={this.get('leftCheckedKeys')}
+            ev-$change:checkedKeys={this.onLeftCheckedKeysChange}
+            pagination={{limit: 5, showLimits: false, showTotal: false}}
+            ref="leftTable"
+            fixHeader
+        >
+            <TableColumn key="name" title="名称" />
+            <TableColumn key="ip" title="IP地址" />
+            <TableColumn key="status" title="状态" />
+        </Table>
+        <Table v-else
+            data={this.get('rightFilteredData')}
+            rowKey={item => item.id}
+            checkedKeys={this.get('rightCheckedKeys')}
+            ev-$change:checkedKeys={this.onRightCheckedKeysChange}
+            pagination={{limit: 5, showLimits: false, showTotal: false}}
+            ref="rightTable"
+            fixHeader
+        >
+            <TableColumn key="name" title="名称" />
+            <TableColumn key="ip" title="IP地址" />
+            <TableColumn key="status" title="状态" />
+        </Table>
+    </b:list>
+</Transfer>
+```
+
+```styl
+.custom-table-transfer
+    .k-transfer-panel
+        width 320px
+        .k-transfer-title
+            div
+                display flex
+                justify-content space-between
+        .k-input
+            margin 8px 16px
+    .k-table-wrapper
+        max-height 228px
+        table
+            thead
+                tr
+                    th
+                        background #fff
+    .k-table
+        .k-pagination
+            display flex
+            justify-content flex-end
+            align-items center
+            margin 8px 0
+```
+
+```ts
+import {bind, Table, TableColumn} from 'kpc';
+import {range} from 'kpc/components/utils';
+
+interface Props {
+    allData: DataItem[]
+    leftData: DataItem[]
+    rightData: DataItem[]
+    leftCheckedKeys: number[]
+    rightCheckedKeys: number[]
+    leftKeywords: string
+    rightKeywords: string
+    leftFilteredData: DataItem[]
+    rightFilteredData: DataItem[]
+}
+
+type DataItem = {
+    id: number
+    name: string
+    ip: string
+    status: string
+}
+
+const rawData = range(1, 50).map(item => ({
+    id: item,
+    name: `服务器${item}`,
+    ip: `10.10.1.${item}`,
+    status: item % 3 === 0 ? '运行中' : item % 3 === 1 ? '已停止' : '维护中'
+}));
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            allData: rawData,
+            leftData: rawData,
+            rightData: [],
+            leftCheckedKeys: [],
+            rightCheckedKeys: [],
+            leftKeywords: '',
+            rightKeywords: '',
+            leftFilteredData: rawData,
+            rightFilteredData: [],
+        } as Props;
+    }
+
+    filterData(data: DataItem[], keywords: string): DataItem[] {
+        if (!keywords) return data;
+        const lowerKeywords = keywords.toLowerCase();
+        return data.filter((item: DataItem) => 
+            item.name.toLowerCase().includes(lowerKeywords) ||
+            item.ip.includes(keywords) ||
+            item.status.includes(keywords)
+        );
+    }
+
+    @bind
+    onLeftKeywordsChange(v: string | undefined) {
+        const keywords = v || '';
+        this.set('leftKeywords', keywords);
+        const data = this.filterData(this.get('leftData'), keywords);
+        this.set('leftFilteredData', data);
+    }
+
+    @bind
+    onRightKeywordsChange(v: string | undefined) {
+        const keywords = v || '';
+        this.set('rightKeywords', keywords);
+        const data = this.filterData(this.get('rightData'), keywords);
+        this.set('rightFilteredData', data);
+    }
+
+    @bind
+    onLeftCheckedKeysChange(keys: number[] | undefined) {
+        this.set('leftCheckedKeys', keys || []);
+    }
+
+    @bind
+    onRightCheckedKeysChange(keys: number[] | undefined) {
+        this.set('rightCheckedKeys', keys || []);
+    }
+
+    @bind
+    enableAdd() {
+        const keys = this.get('leftCheckedKeys');
+        return keys && keys.length > 0;
+    }
+
+    @bind
+    enableRemove() {
+        const keys = this.get('rightCheckedKeys');
+        return keys && keys.length > 0;
+    }
+
+    @bind
+    onAdd() {
+        const leftCheckedKeys = this.get('leftCheckedKeys');
+        const leftData = this.get('leftData');
+        const rightData = this.get('rightData');
+        
+        const selectedItems = leftData.filter((item: DataItem) => leftCheckedKeys.includes(item.id));
+        const newLeftData = leftData.filter((item: DataItem) => !leftCheckedKeys.includes(item.id));
+        const newRightData = [...rightData, ...selectedItems];
+        
+        this.set({
+            leftData: newLeftData,
+            rightData: newRightData,
+            leftCheckedKeys: [],
+        });
+
+        const leftFiltered = this.filterData(newLeftData, this.get('leftKeywords'));
+        const rightFiltered = this.filterData(newRightData, this.get('rightKeywords'));
+        this.set('leftFilteredData', leftFiltered);
+        this.set('rightFilteredData', rightFiltered);
+    }
+
+    @bind
+    onRemove() {
+        const rightCheckedKeys = this.get('rightCheckedKeys');
+        const allData = this.get('allData');
+        const rightData = this.get('rightData');
+        
+        const newRightData = rightData.filter((item: DataItem) => !rightCheckedKeys.includes(item.id));
+        const rightDataIds = new Set(newRightData.map((item: DataItem) => item.id));
+        const newLeftData = allData.filter((item: DataItem) => !rightDataIds.has(item.id));
+        
+        this.set({
+            leftData: newLeftData,
+            rightData: newRightData,
+            rightCheckedKeys: [],
+        });
+
+        const leftFiltered = this.filterData(newLeftData, this.get('leftKeywords'));
+        const rightFiltered = this.filterData(newRightData, this.get('rightKeywords'));
+        this.set('leftFilteredData', leftFiltered);
+        this.set('rightFilteredData', rightFiltered);
+    }
+}
+```

package/components/transfer/demos/tree.md

@@ -1,6 +1,6 @@
 ---
 title: 与树形控件结合 
-order: 4
+order: 6
 ---
 
 与【完全自定义】示例一样，`Transfer`也可以与`Tree`结合使用

package/components/transfer/index.md

@@ -24,6 +24,7 @@ sidebar: doc
 | rightTitle | 右边顶部展示的标题 | `string` | `VNode` | `"已选择"` |
 | enableAdd | 指定右箭头按钮的可用状态 | `() => boolean` | `undefined` |
 | enableRemove | 指定左箭头按钮的可用状态 | `() => boolean` | `undefined` |
+| pagination | 是否启用分页功能，传入`true`使用默认配置，传入对象可自定义分页配置，详见[Pagination组件](/components/pagination/) | `boolean` | `PaginationProps` | `false` |
 
 ```ts
 export type TransferDataItem<
@@ -60,3 +61,4 @@ export type TransferDataItem<
 | --- | --- | --- |
 | add | 右箭头按钮点击事件 | - |
 | remove | 左箭头按钮点击事件 | - |
+| page | 当内置翻页改变页码或每页数量时触发 | <code>(model: 'left' &#124; 'right', data: {value: number, limit: number}) => void</code> |

package/components/transfer/index.spec.ts

@@ -1,5 +1,6 @@
 import BasicDemo from '~/components/transfer/demos/basic';
 import LabelDemo from '~/components/transfer/demos/label';
+import PaginationDemo from '~/components/transfer/demos/pagination';
 import {mount, unmount, dispatchEvent, wait} from '../../test/utils';
 import type {Transfer} from './';
 
@@ -128,4 +129,150 @@ describe('Transfer', () => {
         await wait(500);
         expect(element.innerHTML).to.matchSnapshot();
     });
+
+    it('pagination', async function() {
+        this.timeout(0);
+        const [instance, element] = mount(PaginationDemo as any);
+        await wait();
+        const transfer = instance.refs.__test as Transfer;
+        
+        // 快照：初始状态（第1页）
+        expect(element.outerHTML).to.matchSnapshot();
+        // 测试1: 分页器存在
+        const pagination = element.querySelector('.k-transfer-pagination-wrapper .k-pagination');
+        expect(pagination).to.be.ok;
+        // 测试2: 第一页显示的数据（默认 limit=10，显示前10条）
+        const leftItems = element.querySelectorAll('.k-transfer-panel:first-child .k-transfer-item');
+        expect(leftItems.length).to.eql(10);
+        // 验证显示的是前10条数据
+        const firstItem = leftItems[0].querySelector('.k-checkbox') as HTMLElement;
+        expect(firstItem.textContent).to.include('主机名1');
+        // 测试3: 点击下一页
+        const nextButton = element.querySelector('.k-transfer-pagination-wrapper .k-pagination .k-pagination-next') as HTMLElement;
+        if (nextButton && !nextButton.classList.contains('k-disabled')) {
+            nextButton.click();
+            await wait(500);
+            // 快照：第2页
+            expect(element.outerHTML).to.matchSnapshot();
+            // 验证显示的是第11-20条数据
+            const leftItemsPage2 = element.querySelectorAll('.k-transfer-panel:first-child .k-transfer-item');
+            expect(leftItemsPage2.length).to.eql(10);
+            const firstItemPage2 = leftItemsPage2[0].querySelector('.k-checkbox') as HTMLElement;
+            expect(firstItemPage2.textContent).to.include('主机名11');
+        }
+        // 测试4: 设置关键词进行筛选，验证页码重置为1
+        // 先翻到第2页
+        const nextButton2 = element.querySelector('.k-transfer-pagination-wrapper .k-pagination .k-pagination-next') as HTMLElement;
+        if (nextButton2 && !nextButton2.classList.contains('k-disabled')) {
+            nextButton2.click();
+            await wait(500);
+        }
+        // 设置关键词，应该重置到第1页
+        transfer.set('leftKeywords', '1');
+        await wait(500);
+        // 快照：筛选后（第1页）
+        expect(element.outerHTML).to.matchSnapshot();
+        // 验证筛选后的数据（应该显示第1页的筛选结果）
+        const filteredItems = element.querySelectorAll('.k-transfer-panel:first-child .k-transfer-item');
+        // 筛选包含'1'的数据，应该少于或等于10条
+        expect(filteredItems.length).to.be.at.most(10);
+        // 验证所有显示的数据都包含'1'
+        filteredItems.forEach((item) => {
+            const text = item.textContent || '';
+            expect(text).to.match(/主机名\d*1\d*/);
+        });
+        // 测试5: 清除筛选后恢复分页
+        transfer.set('leftKeywords', '');
+        await wait(500);
+        // 快照：清除筛选后（恢复第1页）
+        expect(element.outerHTML).to.matchSnapshot();
+        const restoredItems = element.querySelectorAll('.k-transfer-panel:first-child .k-transfer-item');
+        expect(restoredItems.length).to.eql(10);
+    });
+
+    it('pagination with filter', async function() {
+        this.timeout(0);
+        const [instance, element] = mount(PaginationDemo as any);
+        await wait();
+        const transfer = instance.refs.__test as Transfer;
+        
+        // 测试筛选后分页数据立即更新
+        transfer.set('leftKeywords', '2');
+        await wait(500);
+        // 快照：筛选后（第1页）
+        expect(element.outerHTML).to.matchSnapshot();
+        // 验证筛选后的数据立即显示
+        const filteredItems = element.querySelectorAll('.k-transfer-panel:first-child .k-transfer-item');
+        // 所有显示的数据应该包含'2'
+        filteredItems.forEach((item) => {
+            const text = item.textContent || '';
+            expect(text).to.match(/主机名\d*2\d*/);
+        });
+        
+        // 测试筛选后切换页面
+        const nextButton = element.querySelector('.k-transfer-pagination-wrapper .k-pagination .k-pagination-next') as HTMLElement;
+        if (nextButton && !nextButton.classList.contains('k-disabled')) {
+            nextButton.click();
+            await wait(500);
+            // 快照：筛选后第2页
+            expect(element.outerHTML).to.matchSnapshot();
+            // 验证第二页的数据也包含'2'
+            const page2Items = element.querySelectorAll('.k-transfer-panel:first-child .k-transfer-item');
+            page2Items.forEach((item) => {
+                const text = item.textContent || '';
+                expect(text).to.match(/主机名\d*2\d*/);
+            });
+        }
+        // 清除筛选
+        transfer.set('leftKeywords', '');
+        await wait(500);
+        // 快照：清除筛选后（恢复第1页）
+        expect(element.outerHTML).to.matchSnapshot();
+        // 验证清除筛选后显示所有数据的第一页
+        const restoredItems = element.querySelectorAll('.k-transfer-panel:first-child .k-transfer-item');
+        expect(restoredItems.length).to.eql(10);
+    });
+
+    it('pagination with checkbox selection', async function() {
+        this.timeout(0);
+        const [instance, element] = mount(PaginationDemo as any);
+        await wait();
+        const transfer = instance.refs.__test as Transfer;
+        
+        // 测试1: 全选基于全部数据
+        const checkAll = element.querySelector('.k-transfer-title .k-checkbox') as HTMLElement;
+        checkAll.click();
+        await wait();
+        // 快照：全选后（第1页）
+        expect(element.outerHTML).to.matchSnapshot();
+        const leftCheckedKeys = transfer.get('leftCheckedKeys') as number[];
+        expect(leftCheckedKeys.length).to.eql(100);
+        
+        // 测试2: 切换页面时保持选中状态
+        const nextButton = element.querySelector('.k-transfer-pagination-wrapper .k-pagination .k-pagination-next') as HTMLElement;
+        if (nextButton && !nextButton.classList.contains('k-disabled')) {
+            nextButton.click();
+            await wait(500);
+            // 快照：全选后切换到第2页（选中状态保持）
+            expect(element.outerHTML).to.matchSnapshot();
+            // 切换到第2页后，选中状态应该保持
+            const leftCheckedKeysAfterPageChange = transfer.get('leftCheckedKeys') as number[];
+            expect(leftCheckedKeysAfterPageChange.length).to.eql(100);
+            
+            // 验证第2页的checkbox状态（应该都是选中的）
+            const page2Items = element.querySelectorAll('.k-transfer-panel:first-child .k-transfer-item');
+            page2Items.forEach((item) => {
+                const checkbox = item.querySelector('input[type="checkbox"]') as HTMLInputElement;
+                expect(checkbox.checked).to.be.true;
+            });
+        }
+        
+        // 测试3: 取消全选
+        checkAll.click();
+        await wait();
+        // 快照：取消全选后
+        expect(element.outerHTML).to.matchSnapshot();
+        const leftCheckedKeysAfterUncheck = transfer.get('leftCheckedKeys') as number[];
+        expect(leftCheckedKeysAfterUncheck.length).to.eql(0);
+    });
 });