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

package/components/select/base.vdt

@@ -66,6 +66,7 @@ const filterInput = <Input v-if={filterable}
                 container={container}
                 v-model="show"
                 position={position}
+                alwaysShowOnClick={$props.alwaysShowOnClick}
             >
                 <div {...getRestProps(this)} 
                     class={classNameObj}
@@ -74,6 +75,7 @@ const filterInput = <Input v-if={filterable}
                     ev-focusout={onFocusout}
                     style={!isNullOrUndefined(width) ? addStyle(style, {width: `${width}px`}) : style}
                     ref={triggerRef}
+                    ev-click={$props.onClick}
                 >
                     <div class={`${k}-select-prefix`} v-if={$blocks.prefix}>
                         <b:prefix />
@@ -95,7 +97,6 @@ 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

@@ -31,7 +31,7 @@ import {Select, Option} from 'kpc';
     </Select>
     Days: {JSON.stringify(this.get('days'))}
     <br /><br />
-    <Select v-model="dayWithKeywords" filterable multiple creatable keepKeywords style="margin-right: 10px">
+    <Select v-model="dayWithKeywords" filterable multiple creatable keepKeywords={false} style="margin-right: 10px">
         <Option value="Monday">星期一</Option>
         <Option value="Tuesday">星期二</Option>
         <Option value="Wednesday">星期三</Option>
@@ -40,7 +40,7 @@ import {Select, Option} from 'kpc';
         <Option value="Saturday">星期六</Option>
         <Option value="Sunday">星期天</Option>
     </Select>
-    Day with keepKeywords: {JSON.stringify(this.get('dayWithKeywords'))}
+    Day with keepKeywords=false: {JSON.stringify(this.get('dayWithKeywords'))}
 </div>
 ```
 

package/components/select/index.md

@@ -31,7 +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` |
+| keepKeywords | 是否在选中选项后保留搜索关键字，配合`filterable`使用 | `boolean` | `true` |
 | 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

@@ -12,9 +12,9 @@ import SearchableDemo from '~/components/select/demos/searchable';
 import ImmutableDemo from '~/components/select/demos/immutable';
 
 describe('Select', () => {
-    afterEach((done) => {
+    afterEach(async () => {
         unmount();
-        setTimeout(done, 500);
+        await wait(500);
     });
 
     it('should select value correctly', async () => {
@@ -188,6 +188,39 @@ describe('Select', () => {
         expect(dropdown2.innerHTML).to.matchSnapshot();
     });
 
+    it('should select the first card of group on filtering', async () => {
+        const [instance, element] = mount(GroupDemo);
+
+        instance.set<string>('day', 'Saturday');
+        await wait();
+        const [, trigger] = element.querySelectorAll<HTMLElement>('.k-select');
+        trigger.click();
+        await wait();
+        const dropdown = getElement('.k-select-menu')!;
+        defaultStatusTest();
+
+        // filter
+        const input = trigger.querySelector('.k-input-inner') as HTMLInputElement;
+        input.value = 'm';
+        dispatchEvent(input, 'input');
+        await wait();
+        const firstTab = dropdown.querySelector('.k-tab') as HTMLElement;
+        expect(firstTab.classList.contains('k-active')).to.eql(true);
+
+        // clear
+        input.value = '';
+        dispatchEvent(input, 'input');
+        await wait();
+        defaultStatusTest();
+
+        function defaultStatusTest() {
+            const secondTab = dropdown.querySelector('.k-tab:nth-child(2)') as HTMLElement;
+            const item = dropdown.querySelector('.k-dropdown-item') as HTMLElement;
+            expect(secondTab.classList.contains('k-active')).to.eql(true);
+            expect(item.classList.contains('k-active')).to.eql(true);
+        }
+    });
+
     it('keyboard operations', async () => {
         const [instance, element] = mount(BasicDemo);
 
@@ -206,6 +239,9 @@ describe('Select', () => {
         const [instance, element] = mount(CreatableDemo);
 
         const input = element.querySelector('.k-input-inner') as HTMLInputElement;
+        
+        expect(instance.get('day')).to.be.null;
+        
         input.click();
         await wait();
         input.value = 'xxx';
@@ -213,38 +249,82 @@ describe('Select', () => {
         await wait();
         const dropdown = getElement('.k-select-menu')!;
         expect(dropdown.innerHTML).to.matchSnapshot();
-        // select
+        
+        // check the created option appears in dropdown
+        const createOption = dropdown.querySelector('.k-select-option');
+        expect(createOption).to.exist;
+        expect(createOption!.textContent).to.contain('xxx');
+        
+        // press enter to select the custom option
         dispatchEvent(document, 'keydown', {keyCode: 13});
         await wait();
         expect(instance.get('day')).to.eql('xxx');
+        expect(input.value).to.eql('xxx');
 
-        // open again
+        // reopen dropdown
         input.click();
         await wait();
         expect(element.innerHTML).to.matchSnapshot();
         expect(dropdown.innerHTML).to.matchSnapshot();
-
-        // input again
+        
+        // input another custom option
         input.value = 'yyy';
         dispatchEvent(input, 'input');
         await wait();
         expect(element.innerHTML).to.matchSnapshot();
         expect(dropdown.innerHTML).to.matchSnapshot();
 
-        // discard
+        const newCreateOption = dropdown.querySelector('.k-select-option');
+        expect(newCreateOption).to.exist;
+        expect(newCreateOption!.textContent).to.contain('yyy');
+
+        // click outside to cancel selection
         dispatchEvent(document, 'click');
         await wait();
         expect(element.innerHTML).to.matchSnapshot();
-        expect(instance.get('day')).to.eql('xxx');
+        expect(instance.get('day')).to.eql('xxx'); // should keep the original value
+        expect(input.value).to.eql('xxx'); // should restore the original value
+        
+        // test multiple creatable
+        const [, multipleInput] = element.querySelectorAll<HTMLInputElement>('.k-input-inner');
+        expect(instance.get('days')).to.eql([]);
+        
+        multipleInput.click();
+        await wait();
+        multipleInput.value = 'custom1';
+        dispatchEvent(multipleInput, 'input');
+        await wait();
+        
+        // press enter to create and select the first custom option
+        dispatchEvent(document, 'keydown', {keyCode: 13});
+        await wait();
+        expect(instance.get('days')).to.include('custom1');
+        expect(multipleInput.value).to.eql('custom1');
+        
+        // input the same option again
+        dispatchEvent(document, 'keydown', {keyCode: 13});
+        await wait();
+        expect(instance.get('days')).to.eql([]);
+        expect(multipleInput.value).to.eql('custom1');
+        
+        // test select original options
+        multipleInput.value = 'Monday';
+        dispatchEvent(multipleInput, 'input');
+        await wait();
+        const multipleDropdown = getElement('.k-select-menu')!;
+        const mondayOption = multipleDropdown.querySelector('.k-select-option') as HTMLElement;
+        expect(mondayOption.textContent).to.eql('星期一');
+        mondayOption.click();
+        await wait();
+        expect(instance.get('days')).to.include('Monday');
     });
 
     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>
+                    <Select v-model="days" filterable multiple creatable keepKeywords={false}>
                         <Option value="Monday">星期一</Option>
                         <Option value="Tuesday">星期二</Option>
                         <Option value="Wednesday">星期三</Option>
@@ -263,50 +343,50 @@ describe('Select', () => {
         const [instance, element] = mount(KeepKeywordsDemo);
         const input = element.querySelector('.k-input-inner') as HTMLInputElement;
         
-        // 1. 输入自定义选项 "custom1"
+        // input custom option "custom1"
         input.click();
         await wait();
         input.value = 'custom1';
         dispatchEvent(input, 'input');
         await wait();
         
-        // 验证创建的选项出现在dropdown中
+        // check the created option appears in dropdown
         const dropdown = getElement('.k-select-menu')!;
         expect(dropdown.innerHTML).to.contain('custom1');
         
-        // 2. 按回车创建并选中
+        // press enter to create and select
         dispatchEvent(document, 'keydown', {keyCode: 13});
         await wait();
         
-        // 验证选项被选中，且输入框被清空
+        // check the option is selected, and the input is cleared
         expect(instance.get('days')).to.eql(['custom1']);
-        expect(input.value).to.eql(''); // keepKeywords=true时应该清空输入框
+        expect(input.value).to.eql('');
         
-        // 3. 再次输入相同的选项 "custom1"
+        // input the same option "custom1" again
         input.value = 'custom1';
         dispatchEvent(input, 'input');
         await wait();
         
-        // 4. 再次按回车
+        // press enter again
         dispatchEvent(document, 'keydown', {keyCode: 13});
         await wait();
         
-        // 验证选项仍然被选中（不会被取消选中），且输入框被清空
-        expect(instance.get('days')).to.eql(['custom1']); // 应该保持选中状态
-        expect(input.value).to.eql(''); // 输入框应该被清空
+        // check the option is still selected (not be unselected), and the input is cleared
+        expect(instance.get('days')).to.eql(['custom1']); // should be selected
+        expect(input.value).to.eql(''); // should be cleared
         
-        // 5. 输入另一个自定义选项 "custom2"
+        // input another custom option "custom2"
         input.value = 'custom2';
         dispatchEvent(input, 'input');
         await wait();
         dispatchEvent(document, 'keydown', {keyCode: 13});
         await wait();
         
-        // 验证两个选项都被选中
+        // check two options are selected
         expect(instance.get('days')).to.eql(['custom1', 'custom2']);
         expect(input.value).to.eql('');
         
-        // 6. 测试原有选项的正常行为
+        // test the normal behavior of original options
         input.click();
         await wait();
         const mondayOption = dropdown.querySelector('[data-value="Monday"]') as HTMLElement;
@@ -315,7 +395,7 @@ describe('Select', () => {
             await wait();
             expect(instance.get('days')).to.include('Monday');
             
-            // 再次点击应该能取消选中（原有选项不受keepKeywords影响）
+            // click again should be unselected (original options are not affected by keepKeywords)
             mondayOption.click();
             await wait();
             expect(instance.get('days')).to.not.include('Monday');
@@ -383,21 +463,47 @@ describe('Select', () => {
     });
 
     it('Searchable with multiple should show correct initial checkbox state', async () => {
-        const [instance, element] = mount(SearchableDemo);
+        class Demo extends Component {
+            static template = `
+                const {Select, Option} = this;
+                <Select v-model="days" searchable multiple>
+                    <Option value="Monday" disabled>星期一</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>
+                    <b:values args="[value]">
+                        <div class="k-value">
+                            已选择{value.length}项 / 共7项
+                        </div>
+                    </b:values>
+                </Select>
+            `;
+            static defaults() {
+                return {
+                    days: ['Tuesday']
+                }
+            }
+            private Tooltip = Tooltip;
+            private Select = Select;
+            private Option = Option;
+        }
+
+        const [instance, element] = mount(Demo as any);
 
-        // 验证初始值
         expect(instance.get('days')).to.eql(['Tuesday']);
 
-        // 第一次打开dropdown，检查初始状态
-        const [, select] = element.querySelectorAll<HTMLElement>('.k-select');
-        select.click();
+        // first open dropdown, check initial state
+        element.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
+        // find the checkbox of Tuesday option
         let tuesdayCheckbox: HTMLInputElement | null = null;
         let tuesdayOption: HTMLElement | null = null;
         
@@ -408,21 +514,21 @@ describe('Select', () => {
             }
         });
         
-        // 验证Tuesday的checkbox应该被选中
+        // check the checkbox of Tuesday should be checked
         expect(tuesdayCheckbox).to.exist;
         expect(tuesdayCheckbox!.checked).to.be.true;
         
-        // 验证Tuesday选项应该有active样式
+        // check the Tuesday option should have active style
         expect(tuesdayOption).to.exist;
         expect(tuesdayOption!.className).to.include('k-active');
         
-        // 关闭dropdown
+        // close dropdown
         const [cancel] = dropdown.querySelectorAll<HTMLElement>('.k-select-footer .k-btn');
         cancel.click();
         await wait();
         
-        // 再次打开dropdown，验证状态仍然正确
-        select.click();
+        // reopen dropdown, check the state is still correct
+        element.click();
         await wait();
         
         const dropdown2 = getElement('.k-select-menu')!;
@@ -439,7 +545,7 @@ describe('Select', () => {
             }
         });
         
-        // 验证第二次打开时状态依然正确
+        // check the state is still correct when reopen
         expect(tuesdayCheckbox2!.checked).to.be.true;
         expect(tuesdayOption2!.className).to.include('k-active');
     });

package/components/select/menu.ts

@@ -12,7 +12,7 @@ export class SelectMenu extends Component<{values: any[]}> {
     static template = template;
 
     public select: Select<any, boolean> = inject(SELECT)!;
-    private card = useCard(this.select.label.activeIndices);
+    private card = useCard(this.select.label.activeIndices, this.select.input.keywords);
     private searchable = useSearchable();
     private config = useConfigContext();
 }

package/components/select/option.ts

@@ -40,7 +40,8 @@ export class Option extends Component<OptionProps> {
         } else {
             let values = select.get('value');
             
-            if (keepKeywords && isCreated && Array.isArray(values) && values.includes(value)) {
+            if (!keepKeywords && isCreated && Array.isArray(values) && values.includes(value)) {
+                select.resetKeywords();
                 return;
             }
             

package/components/select/select.ts

@@ -44,6 +44,7 @@ const typeDefs: Required<TypeDefs<SelectProps>> = {
 const defaults = (): Partial<SelectProps> => ({
     ...BaseSelect.defaults(),
     labelMap: new Map(),
+    keepKeywords: true,
 });
 
 export class Select<

package/components/select/styles.ts

@@ -5,7 +5,7 @@ import '../../styles/global';
 import { cache } from '../utils';
 
 type SizeStyles = {
-    padding?: string,
+    padding: string,
     height: string,
     fontSize: string,
 }
@@ -118,6 +118,8 @@ setDefault(() => {
     makeGroupStyles?.clearCache();
 });
 
+export { select }
+
 export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: inline-flex;

package/components/select/useCard.ts

@@ -2,13 +2,31 @@ import {Component, TypeDefs, useInstance, Children, Blocks, createRef, NonNullab
 import {eachChildren, isComponentVNode, last} from '../utils';
 import {EMPTY_OBJ} from 'intact-shared';
 import {OptionGroup} from './group';
-import {useState} from '../../hooks/useState';
+import {useState, State, watchState} from '../../hooks/useState';
+import type { SelectMenu } from './menu';
 
-export function useCard(defaultActiveIndex: NonNullableRefObject<number[]>) {
-    const children = useInstance()!.get('children');
+export function useCard(
+    defaultActiveIndex: NonNullableRefObject<number[]>,
+    keywords: State<string>
+) {
+    const instance = useInstance() as SelectMenu;
     const activeIndex = useState<number>(last(defaultActiveIndex.value) || 0);
 
-    function process(children: Children) {
+    watchState(keywords, (keywords) => {
+        if (keywords) {
+            activeIndex.set(0);
+        } else {
+            setDefaultActiveIndex();
+        }
+    });
+
+    instance.select.on('show', setDefaultActiveIndex);
+
+    function setDefaultActiveIndex() {
+        activeIndex.set(last(defaultActiveIndex.value) || 0);
+    }
+
+    function process(children: Children, isSearching: boolean) {
         const groupLabels: Children[] | Blocks[string][] = [];
         const _children: Children[] = [];
         let index = 0;

package/components/select/useInput.ts

@@ -11,13 +11,9 @@ import {
 } from 'intact';
 import {useState, State} from '../../hooks/useState';
 import type {Select, SelectProps} from './select';
-import {Option, OptionProps} from './option';
-import {OptionGroup, OptionGroupProps} from './group';
-import {isNullOrUndefined, EMPTY_OBJ, isStringOrNumber} from 'intact-shared';
-import {getTextByChildren, mapChildren, isComponentVNode} from '../utils';
 import type {Input} from '../input';
 
-export function useInput(resetKeywords: (keywords: State<string>) => void) {
+export function useInput(resetKeywords: () => void) {
     const component = useInstance() as Select;
     const keywords = useState('');
     const inputRef = createRef<Input>();
@@ -50,9 +46,9 @@ export function useInput(resetKeywords: (keywords: State<string>) => void) {
     component.on('$changed:show', show => {
         if (show) {
             focusInput();
-            resetKeywords(keywords);
+            resetKeywords();
         } else if (component.get('multiple')) {
-            resetKeywords(keywords);
+            resetKeywords();
         }
     });
     component.on('$changed:value', () => {
@@ -63,8 +59,8 @@ export function useInput(resetKeywords: (keywords: State<string>) => void) {
              * don't reset keywords on multiple mode for continue selection
              * https://github.com/ksc-fe/kpc/issues/983
              */
-            if (keepKeywords) {
-                resetKeywords(keywords);
+            if (!keepKeywords) {
+                resetKeywords();
             }
         }
     });

package/components/spinner/index.spec.ts

@@ -227,6 +227,24 @@ describe('Spinner', () => {
         expect(instance.get('value1')).to.eql(8.4);
     });
 
+    it('forceStep without min value', async () => {
+        class Demo extends Component {
+            static template = `const {Spinner} = this;
+                <Spinner step={1} v-model="value" forceStep />
+            `;
+            static defaults() {
+                return {value: 1};
+            }
+            private Spinner = Spinner;
+        }
+        const [instance, element] = mount(Demo);
+        expect(instance.get('value')).to.eql(1);
+
+        instance.set<number>('value', -1);
+        await wait();
+        expect(instance.get('value')).to.eql(-1);
+    });
+
     it('dynamic step', async () => {
         const [instance, element] = mount(DynamicStepDemo);
 

package/components/spinner/useValue.ts

@@ -78,7 +78,8 @@ export function minMaxStep(value: number, min: number, max: number, step: number
     if (value >= max) return max;
     if (value <= min) return min;
     if (step) {
-        value = Number((Math.round((value - min) / step) * step + min).toFixed(10))
+        let _min = min === -Infinity ? 0 : min;
+        value = Number((Math.round((value - _min) / step) * step + _min).toFixed(10))
         // value = Number((Math.round(value / step) * step).toFixed(10))
         return minMaxStep(value, min, max, null);
     }

package/components/table/index.spec.ts

@@ -496,7 +496,6 @@ describe('Table', () => {
         checkbox.click();
         await wait();
         expect(element.innerHTML).to.matchSnapshot();
-        debugger;
         expect(table.getCheckedData()).to.have.lengthOf(8);
 
         const arrow = element.querySelector('.k-table-arrow') as HTMLElement;
@@ -723,4 +722,73 @@ describe('Table', () => {
         expect(spy.callCount).to.eql(5);
         expect(spy.lastCall.lastArg).to.eql({value: 2, limit: 10});
     });
+
+    it('fixHeader with Affix header scroll sync', async () => {
+        interface Props {
+            data: any[]
+            fixHeader: boolean | number
+            virtual: boolean
+            stickScrollbar: boolean | number
+        }
+        
+        class Demo extends Component<Props> {
+            static template = `
+                const {Table, TableColumn} = this;
+                const {data, fixHeader, virtual, stickScrollbar} = this.get();
+                <Table data={data} fixHeader={fixHeader} virtual={virtual} stickScrollbar={stickScrollbar} ref="table">
+                    <TableColumn fixed="left" key="name" title="Name" width="200" />
+                    <TableColumn key="column1" title="Column1" width="300" />
+                    <TableColumn key="column2" title="Column2" width="300" />
+                    <TableColumn key="column3" title="Column3" width="300" />
+                    <TableColumn fixed="right" key="action" title="Action" width="200" />
+                </Table>
+            `;
+            
+            static defaults() {
+                return {
+                    data: Array.from({length: 10}, (_, i) => ({
+                        name: `Name ${i}`,
+                        column1: `Column1 ${i}`,
+                        column2: `Column2 ${i}`,
+                        column3: `Column3 ${i}`,
+                        action: `Action ${i}`
+                    })),
+                    fixHeader: 200,
+                    virtual: false,
+                    stickScrollbar: false
+                };
+            }
+            
+            private Table = Table;
+            private TableColumn = TableColumn;
+        }
+
+        const [instance, element] = mount(Demo);
+        
+        // Test 1: fixHeader only - scroll left 50px
+        await wait();
+        const scrollContainer = element.querySelector('.k-table-wrapper') as HTMLElement;
+        scrollContainer.scrollLeft = 50;
+        await wait(100);
+        const affixWrapper1 = element.querySelector('.k-table-affix-header .k-affix-wrapper') as HTMLElement;
+        expect(affixWrapper1.scrollLeft).to.eql(50);
+        
+        // Test 2: fixHeader + virtual - scroll left 50px more (total 100px)
+        instance.set('virtual', true);
+        await wait();
+        scrollContainer.scrollLeft = 100;
+        await wait(100);
+        
+        const affixWrapper2 = element.querySelector('.k-table-affix-header .k-affix-wrapper') as HTMLElement;
+        expect(affixWrapper2.scrollLeft).to.eql(100);
+        
+        // Test 3: stickScrollbar + fixHeader - scroll right 50px (back to 50px)
+        instance.set('stickScrollbar', true);
+        await wait();
+        scrollContainer.scrollLeft = 50;
+        await wait(100);
+        
+        const affixWrapper3 = element.querySelector('.k-table-affix-header .k-affix-wrapper') as HTMLElement;
+        expect(affixWrapper3.scrollLeft).to.eql(50);
+    });
 });

package/components/table/useStickyHeader.ts

@@ -22,7 +22,7 @@ export function useStickyHeader(callbacks: ScrollCallback[]) {
 
     // when the scroll element scroll horizontally, scroll the sticky header too 
     callbacks.push(scrollLeft => {
-        if (isNull(stickHeader.value)) return;
+        if (isNull(stickHeader.value) && !instance.get('fixHeader')) return;
 
         const affixHeadWrapper = headRef.value!.parentElement as HTMLElement;
         affixHeadWrapper.scrollLeft = scrollLeft;