@king-design/intact 3.5.2 → 3.6.0-beta.0

package/components/scrollSelect/useMouseEvents.ts

@@ -28,12 +28,12 @@ export function useMouseEvents(
         },
 
         onMove(e: MouseEvent) {
-            const deltaY = e.clientY - y;
+            const deltaY = (e.clientY - y) * 0.8;
             dragged = !!deltaY;
             y = e.clientY;
 
             const _deltaY = y - initY;
-            let offsetIndex = Math.floor(Math.abs(_deltaY) / itemHeight); 
+            let offsetIndex = Math.floor(Math.abs(_deltaY) / itemHeight * 1.2);
             if (offsetIndex) {
                 if (_deltaY < 0) {
                     offsetIndex = -offsetIndex;
@@ -63,25 +63,38 @@ export function useMouseEvents(
 
     function onWheel(e: WheelEvent) {
         e.preventDefault();
-        itemHeight = getItemHeight(); 
-        if (e.deltaY > 0) {
-            // down
-            setByRelativeIndex(1, null, true);
-        } else {
-            setByRelativeIndex(-1, null, true);
+ 
+        itemHeight = getItemHeight();
+        
+        const threshold = itemHeight * 0.6;
+        deltaY = (deltaY || 0) + e.deltaY;
+        
+        if (Math.abs(deltaY) >= threshold) {
+            if (deltaY > 0) {
+                setByRelativeIndex(1, null, true);
+            } else {
+                setByRelativeIndex(-1, null, true);
+            }
+            deltaY = 0;
         }
     }
 
     // throttle onWheel
-    const _onWheel = throttle(onWheel, 0, e => e.preventDefault());
+    const _onWheel = throttle(onWheel, 50, e => e.preventDefault());
 
     function onClick(item: any, index: number) {
-        // if _dragged, do not trigger click event, #123
+        // if dragged, do not trigger click event
         if (dragged) return;
 
         const {count} = instance.get();
         const half = Math.floor(count! / 2);
         const itemHeight = getItemHeight();
+        
+        const currentIndex = list.data.value.findIndex(v => v.value === list.value.value);
+        const targetOffset = index - half;
+        if (currentIndex + targetOffset < 0 || currentIndex + targetOffset >= list.data.value.length) {
+            return;
+        }
 
         translate.set(translate.value - itemHeight * (index - half));
         marginTop.set(marginTop.value + itemHeight * (index - half));

package/components/select/base.vdt

@@ -17,7 +17,7 @@ const {
     className, container,
     inline, style, width, show,
     position, flat, nowrap,
-    draggable,
+    draggable, range,
 } = this.get();
 const { k } = this.config;
 
@@ -95,6 +95,7 @@ const filterInput = <Input v-if={filterable}
                                 readonly={!show}
                                 waveDisabled={true}
                                 flat={flat}
+                                ev-click={$props.onClick}
                             />
                             <div class={`${k}-select-placeholder c-ellipsis`}
                                 v-else-if={!filterable && !hasValue}

package/components/select/demos/creatable.md

@@ -30,6 +30,17 @@ import {Select, Option} from 'kpc';
         <Option value="Sunday">星期天</Option>
     </Select>
     Days: {JSON.stringify(this.get('days'))}
+    <br /><br />
+    <Select v-model="dayWithKeywords" filterable multiple creatable keepKeywords style="margin-right: 10px">
+        <Option value="Monday">星期一</Option>
+        <Option value="Tuesday">星期二</Option>
+        <Option value="Wednesday">星期三</Option>
+        <Option value="Thursday">星期四</Option>
+        <Option value="Friday">星期五</Option>
+        <Option value="Saturday">星期六</Option>
+        <Option value="Sunday">星期天</Option>
+    </Select>
+    Day with keepKeywords: {JSON.stringify(this.get('dayWithKeywords'))}
 </div>
 ```
 
@@ -37,6 +48,7 @@ import {Select, Option} from 'kpc';
 interface Props {
     day?: string | null
     days?: string[]
+    dayWithKeywords?: string[]
 }
 
 export default class extends Component<Props> {
@@ -45,6 +57,7 @@ export default class extends Component<Props> {
         return {
             day: null,
             days: [],
+            dayWithKeywords: [],
         } as Props;
     }
 }

package/components/select/index.md

@@ -31,6 +31,7 @@ sidebar: doc
 | labelMap | 建立值`value`到展示标签`label`的映射，可以在`value`不在`Option`集合中时，依然能够正确展示相应的`label` | `Map<any, string>` | `new Map()` |
 | card | 是否展示`card`模式 | `boolean` | `false` |
 | autoDisableArrow | 是否在没有更多可选项时，给箭头一个`disabled`状态来提示用户 | `boolean` | `false` |
+| keepKeywords | 是否在选中选项后保留搜索关键字，配合`filterable`使用 | `boolean` | `false` |
 | show | 是否展示菜单项 | `boolean` | `false` |
 | position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` &#124; `"left"` &#124; `"bottom"` &#124; `"right"` &#124; `"top"` | `{my: 'left top+8', 'left bottom'}` |
 | flat | 是否展示扁平样式 | `boolean` | `false` |

package/components/select/index.spec.ts

@@ -238,6 +238,90 @@ describe('Select', () => {
         expect(instance.get('day')).to.eql('xxx');
     });
 
+    it('keepKeywords', async () => {
+        // 创建一个测试组件，包含keepKeywords功能
+        class KeepKeywordsDemo extends Component<{days: string[]}> {
+            static template = `
+                const {Select, Option} = this;
+                <div>
+                    <Select v-model="days" filterable multiple creatable keepKeywords>
+                        <Option value="Monday">星期一</Option>
+                        <Option value="Tuesday">星期二</Option>
+                        <Option value="Wednesday">星期三</Option>
+                    </Select>
+                </div>
+            `;
+            static defaults() {
+                return {
+                    days: [] as string[],
+                };
+            }
+            private Select = Select as any;
+            private Option = Option as any;
+        }
+
+        const [instance, element] = mount(KeepKeywordsDemo);
+        const input = element.querySelector('.k-input-inner') as HTMLInputElement;
+        
+        // 1. 输入自定义选项 "custom1"
+        input.click();
+        await wait();
+        input.value = 'custom1';
+        dispatchEvent(input, 'input');
+        await wait();
+        
+        // 验证创建的选项出现在dropdown中
+        const dropdown = getElement('.k-select-menu')!;
+        expect(dropdown.innerHTML).to.contain('custom1');
+        
+        // 2. 按回车创建并选中
+        dispatchEvent(document, 'keydown', {keyCode: 13});
+        await wait();
+        
+        // 验证选项被选中，且输入框被清空
+        expect(instance.get('days')).to.eql(['custom1']);
+        expect(input.value).to.eql(''); // keepKeywords=true时应该清空输入框
+        
+        // 3. 再次输入相同的选项 "custom1"
+        input.value = 'custom1';
+        dispatchEvent(input, 'input');
+        await wait();
+        
+        // 4. 再次按回车
+        dispatchEvent(document, 'keydown', {keyCode: 13});
+        await wait();
+        
+        // 验证选项仍然被选中（不会被取消选中），且输入框被清空
+        expect(instance.get('days')).to.eql(['custom1']); // 应该保持选中状态
+        expect(input.value).to.eql(''); // 输入框应该被清空
+        
+        // 5. 输入另一个自定义选项 "custom2"
+        input.value = 'custom2';
+        dispatchEvent(input, 'input');
+        await wait();
+        dispatchEvent(document, 'keydown', {keyCode: 13});
+        await wait();
+        
+        // 验证两个选项都被选中
+        expect(instance.get('days')).to.eql(['custom1', 'custom2']);
+        expect(input.value).to.eql('');
+        
+        // 6. 测试原有选项的正常行为
+        input.click();
+        await wait();
+        const mondayOption = dropdown.querySelector('[data-value="Monday"]') as HTMLElement;
+        if (mondayOption) {
+            mondayOption.click();
+            await wait();
+            expect(instance.get('days')).to.include('Monday');
+            
+            // 再次点击应该能取消选中（原有选项不受keepKeywords影响）
+            mondayOption.click();
+            await wait();
+            expect(instance.get('days')).to.not.include('Monday');
+        }
+    });
+
     it('Tooltip with Select', async () => {
         class Demo extends Component {
             static template = `
@@ -298,6 +382,68 @@ describe('Select', () => {
         expect(instance.get('days')).include('Monday')
     });
 
+    it('Searchable with multiple should show correct initial checkbox state', async () => {
+        const [instance, element] = mount(SearchableDemo);
+
+        // 验证初始值
+        expect(instance.get('days')).to.eql(['Tuesday']);
+
+        // 第一次打开dropdown，检查初始状态
+        const [, select] = element.querySelectorAll<HTMLElement>('.k-select');
+        select.click();
+        await wait();
+        
+        const dropdown = getElement('.k-select-menu')!;
+        const checkboxes = dropdown.querySelectorAll<HTMLInputElement>('.k-checkbox input[type="checkbox"]');
+        const options = dropdown.querySelectorAll<HTMLElement>('.k-select-option');
+        
+        // 找到Tuesday选项对应的checkbox
+        let tuesdayCheckbox: HTMLInputElement | null = null;
+        let tuesdayOption: HTMLElement | null = null;
+        
+        options.forEach((option, index) => {
+            if (option.textContent?.includes('星期二')) {
+                tuesdayCheckbox = checkboxes[index];
+                tuesdayOption = option;
+            }
+        });
+        
+        // 验证Tuesday的checkbox应该被选中
+        expect(tuesdayCheckbox).to.exist;
+        expect(tuesdayCheckbox!.checked).to.be.true;
+        
+        // 验证Tuesday选项应该有active样式
+        expect(tuesdayOption).to.exist;
+        expect(tuesdayOption!.className).to.include('k-active');
+        
+        // 关闭dropdown
+        const [cancel] = dropdown.querySelectorAll<HTMLElement>('.k-select-footer .k-btn');
+        cancel.click();
+        await wait();
+        
+        // 再次打开dropdown，验证状态仍然正确
+        select.click();
+        await wait();
+        
+        const dropdown2 = getElement('.k-select-menu')!;
+        const checkboxes2 = dropdown2.querySelectorAll<HTMLInputElement>('.k-checkbox input[type="checkbox"]');
+        const options2 = dropdown2.querySelectorAll<HTMLElement>('.k-select-option');
+        
+        let tuesdayCheckbox2: HTMLInputElement | null = null;
+        let tuesdayOption2: HTMLElement | null = null;
+        
+        options2.forEach((option, index) => {
+            if (option.textContent?.includes('星期二')) {
+                tuesdayCheckbox2 = checkboxes2[index];
+                tuesdayOption2 = option;
+            }
+        });
+        
+        // 验证第二次打开时状态依然正确
+        expect(tuesdayCheckbox2!.checked).to.be.true;
+        expect(tuesdayOption2!.className).to.include('k-active');
+    });
+
     it('disabled option does not allow clearable and close', async () => {
         const [instance, element] = mount(ImmutableDemo);
 

package/components/select/option.ts

@@ -9,6 +9,7 @@ export interface OptionProps {
     value: any
     label?: string
     disabled?: boolean
+    isCreated?: boolean
 }
 
 const typeDefs: Required<TypeDefs<OptionProps>> = {
@@ -17,6 +18,7 @@ const typeDefs: Required<TypeDefs<OptionProps>> = {
     },
     label: String,
     disabled: Boolean,
+    isCreated: Boolean,
 };
 
 export class Option extends Component<OptionProps> {
@@ -29,13 +31,19 @@ export class Option extends Component<OptionProps> {
     @bind
     private onSelect() {
         const select = this.select!;
-        const multiple = select.get('multiple');
+        const {multiple, keepKeywords} = select.get();
         const value = this.get('value');
+        const isCreated = this.get('isCreated');
 
         if (!multiple) {
             select.set('value', this.get('value'));
         } else {
             let values = select.get('value');
+            
+            if (keepKeywords && isCreated && Array.isArray(values) && values.includes(value)) {
+                return;
+            }
+            
             values = toggleArray(values, value);
             select.set('value', values);
         }

package/components/select/select.ts

@@ -21,6 +21,7 @@ export interface SelectProps<T = string, Multipe extends boolean = boolean> exte
     labelMap?: Map<any, Children> 
     card?: boolean
     autoDisableArrow?: boolean
+    keepKeywords?: boolean
 }
 
 export interface SelectEvents extends BaseSelectEvents { }
@@ -37,6 +38,7 @@ const typeDefs: Required<TypeDefs<SelectProps>> = {
     labelMap: Map,
     card: Boolean,
     autoDisableArrow: Boolean,
+    keepKeywords: Boolean,
 };
 
 const defaults = (): Partial<SelectProps> => ({

package/components/select/useFilterable.ts

@@ -35,7 +35,7 @@ export function useFilterable(keywords: State<string>) {
                 }
                 return false;
             })) {
-                return h(Option, {value: _keywords, label: _keywords});
+                return h(Option, {value: _keywords, label: _keywords, isCreated: true});
             }
         }
     }

package/components/select/useInput.ts

@@ -56,14 +56,16 @@ export function useInput(resetKeywords: (keywords: State<string>) => void) {
         }
     });
     component.on('$changed:value', () => {
-        const {multiple, filterable} = component.get();
+        const {multiple, filterable, keepKeywords} = component.get();
         if (multiple && filterable) {
             focusInput();
             /**
              * don't reset keywords on multiple mode for continue selection
              * https://github.com/ksc-fe/kpc/issues/983
              */
-            // resetKeywords(keywords);
+            if (keepKeywords) {
+                resetKeywords(keywords);
+            }
         }
     });
 

package/components/select/useSearchable.ts

@@ -47,8 +47,8 @@ export function useSearchable() {
     }
 
     select.watch('value', initCheckedKeys);
-    select.on('hide', initCheckedKeys)
-
+    select.on('hide', initCheckedKeys);
+    initCheckedKeys();
     return {checkedKeys, selectAll, unselectAll, toggleSelect, confirm};
 }
 

package/components/timepicker/demos/step.md

@@ -6,7 +6,7 @@ order: 2
 当指定了`step`属性时，组件将展示成`Select`样式，只能选择固定的几个时间点。通过`min`和`max`限定
 选择时间范围（默认：00:00:00 ~ 23:59:59），`step`指定步长，它们值类型都为时间字符串
 
-> 可以通过`showFomart`或`format`来格式化时间字符串，来隐藏“秒”
+> 可以通过`showFormat`或`format`来格式化时间字符串，来隐藏“秒”
 
 ```vdt
 import {Timepicker} from 'kpc';

package/components/timepicker/panelPicker.vdt

@@ -8,13 +8,14 @@ import {PanelFlags} from '../datepicker/usePanel';
 import {last} from '../datepicker/helpers';
 import {ScrollSelect} from '../scrollSelect';
 
-const {className, range, multiple} = this.get();
+const {className, range, multiple, min, max} = this.get();
 const {
     value: {value},
     onConfirm,
     onChangeTime,
     onChangeTimeByStep,
     getTimeValue,
+    setMoment,
 } = this.value;
 const lastValue = last(value);
 const { k } = this.config;
@@ -65,6 +66,9 @@ const generatePanel = flag => {
                     {range ? generatePanel(PanelFlags.End) : null} 
                 </div>
                 <div class={`${k}-datepicker-footer`}>
+                    <Button v-if={!range && !multiple && !max && !min} type="link" size="small"
+                        ev-click={setMoment}
+                    >{_$('此刻')}</Button>
                     <Button type="primary" size="small"
                         disabled={isDisabledConfirm()}
                         ev-click={onConfirm}

package/components/timepicker/styles.ts

@@ -40,7 +40,6 @@ export const makePanelStyles = cache(function makePanelStyles(k: string) {
             &.${k}-range {
                 .${k}-datepicker-time {
                     width: auto;
-                    border: ${timepicker.border};
                 }
                 .${k}-scroll-select {
                     height: ${timepicker.range.scrollHeight};

package/components/tour/demos/basic.md

@@ -0,0 +1,73 @@
+---
+title: 基础用法
+order: 0
+---
+
+```vdt
+import {Tour, Button} from 'kpc';
+
+<div>
+    <div class="example-container">
+        <Button id="btn1">示例元素1</Button>
+        <Button id="btn2" style="margin-left: 20px;">示例元素2</Button>
+    </div>
+    <Tour
+        v-model="currentStep"
+        visible={this.get('showTour')}
+        data={this.get('tourData')} 
+        ev-finish={this.close}
+    />
+    <div style="margin-top: 20px;">
+        <Button ev-click={this.settour}>
+            启动引导
+        </Button>
+        <span style="margin-left: 10px;">
+            当前步骤: {this.get('currentStep') >= 0 ? this.get('currentStep') + 1 : '未启动'}
+        </span>
+    </div>
+</div>
+```
+
+```ts
+import {bind} from 'kpc';
+import {TourStepProps} from 'kpc';
+
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            currentStep: 0 as number,
+            showTour: false,  // 默认不显示
+            tourData: [
+                {
+                    target: '#btn1',
+                    title: '第一步',
+                    content: '这是第一步的引导说明',
+                    position: 'bottom'
+                },
+                {
+                    target: '#btn2',
+                    title: '第二步',
+                    content: '这是第二步的引导说明',
+                    position: 'right'
+                }
+            ]
+        };
+    }
+
+    @bind
+    settour() {
+        this.set({
+            showTour: true,
+            currentStep: 0
+        });
+    }
+
+    @bind
+    close() {
+        this.set({
+            showTour: false
+        });
+    }
+}
+```

package/components/tour/demos/beforeChange.md

@@ -0,0 +1,109 @@
+---
+title: 步骤控制
+order: 3
+---
+
+```vdt
+import {Tour, Button, Input} from 'kpc';
+
+<div>
+    <div class="example-container">
+        <Button id="step1">步骤1</Button>
+        <Button id="step2" style="margin-left: 20px;">步骤2</Button>
+        <div style="margin-top: 20px;">
+            <Input class="step3-input" placeholder="通过验证才能进入下一步" v-model="inputValue" />
+        </div>
+        <Button id="step4" style="margin-top: 20px;">步骤4</Button>
+    </div>
+    
+    <Tour
+        v-model="currentStep"
+        visible={this.get('showTour')}
+        data={this.get('tourData')} 
+        beforeChange={this.handleBeforeChange}
+        ev-finish={this.finishTour}
+    />
+    
+    <div style="margin-top: 20px;">
+        <Button ev-click={this.startTour}>
+            启动引导
+        </Button>
+        <span style="margin-left: 10px;">
+            当前步骤: {this.get('currentStep') >= 0 ? this.get('currentStep') + 1 : '未启动'}
+        </span>
+        <div style="margin-top: 10px; color: #f56c6c" v-if={this.get('errorMsg')}>
+            {this.get('errorMsg')}
+        </div>
+    </div>
+</div>
+```
+
+```ts
+import {bind, Message} from 'kpc';
+
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            currentStep: 0,
+            showTour: false,
+            inputValue: '',
+            errorMsg: '',
+            tourData: [
+                {
+                    target: '#step1',
+                    title: '第一步',
+                    content: '这是第一步的引导说明',
+                    position: 'bottom'
+                },
+                {
+                    target: '#step2',
+                    title: '第二步',
+                    content: '这是第二步的引导说明',
+                    position: 'right'
+                },
+                {
+                    target: '.step3-input',
+                    title: '第三步',
+                    content: '请在输入框中输入"next"以继续',
+                    position: 'bottom'
+                },
+                {
+                    target: '#step4',
+                    title: '最后一步',
+                    content: '恭喜您完成了所有步骤',
+                    position: 'top'
+                }
+            ]
+        };
+    }
+
+    @bind
+    startTour() {
+        this.set({
+            showTour: true,
+            currentStep: 0,
+        });
+    }
+
+    @bind
+    finishTour() {
+        this.set({
+            showTour: false
+        });
+    }
+    
+
+    @bind
+    handleBeforeChange(current: number) {
+        const inputValue = this.get('inputValue') as string;
+        if (current === 3) {
+            if (inputValue !== 'next') {
+                Message.error('请在输入框中输入"next"才能进入下一步');
+                return false;
+            }
+        }
+        return true;
+    }
+}
+``` 

package/components/tour/demos/closable.md

@@ -0,0 +1,70 @@
+---
+title: 禁用关闭图标
+order: 7
+---
+
+```vdt
+import {Tour, Button, Switch} from 'kpc';
+
+<div>
+    <div class="example-container">
+        <Button id="closabelDemo">目标元素1</Button>
+    </div>
+    
+    <Tour
+        v-model="currentStep"
+        visible={this.get('showTour')}
+        data={this.get('tourData')} 
+        closable={this.get('closable')}
+        ev-finish={this.finishTour}
+    />
+    
+    <div style="margin-top: 20px;">
+        <div style="margin-bottom: 10px;">
+            <Switch v-model="closable" /> 
+            <span style="margin-left: 10px;">关闭图标: {this.get('closable') ? '启用' : '禁用'}</span>
+        </div>
+        <Button ev-click={this.startTour}>
+            启动引导
+        </Button>
+    </div>
+</div>
+```
+
+```ts
+import {bind} from 'kpc';
+
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            currentStep: 0,
+            showTour: false,
+            closable: false,
+            tourData: [
+                {
+                    target: '#closabelDemo',
+                    title: '禁用关闭图标',
+                    content: '当closable为true时，header区域关闭图标隐藏',
+                    position: 'right'
+                }
+            ]
+        };
+    }
+
+    @bind
+    startTour() {
+        this.set({
+            showTour: true,
+            currentStep: 0
+        });
+    }
+
+    @bind
+    finishTour() {
+        this.set({
+            showTour: false
+        });
+    }
+}
+```