@king-design/intact 3.5.2 → 3.6.0

package/components/input/useAutoWidth.ts

@@ -6,6 +6,7 @@ export function useAutoWidth() {
     const instance = useInstance() as Input;
     const fakeRef = createRef<HTMLDivElement>();
     const width = useState<number>(0);
+    const forceShowFake = useState(false);
 
     instance.watch('value', adjustWidth, {inited: true, presented: true});
     instance.watch('placeholder', adjustWidth, {inited: true, presented: true});
@@ -23,7 +24,24 @@ export function useAutoWidth() {
         }
     }
 
-    return {fakeRef, width};
+    function getStringWidth(str: string) {
+        forceShowFake.set(true);
+        return new Promise<number>((resolve) => {
+            nextTick(() => {
+                const fakeElem = fakeRef.value!;
+                const textNode = fakeElem.firstChild!;
+                const oldStr = textNode.nodeValue;
+                textNode.nodeValue = str;
+
+                resolve(fakeElem.offsetWidth);
+                
+                textNode.nodeValue = oldStr;
+                forceShowFake.set(false);
+            });
+        });
+    }
+
+    return {fakeRef, width, forceShowFake, getStringWidth};
 }
 
 function isVisible(elem: HTMLDivElement | null) {

package/components/scrollSelect/index.spec.ts

@@ -4,17 +4,17 @@ import {ScrollSelect} from './';
 import {Component} from 'intact';
 
 describe('ScrollSelect', () => {
-    afterEach(() => unmount());
+    // afterEach(() => unmount());
 
     it('should select by scroll', async () => {
         const [instance, element] = mount(BasicDemo);
 
         // scroll
-        dispatchEvent(element.firstElementChild!, 'wheel', {deltaY: 1});
+        dispatchEvent(element.firstElementChild!, 'wheel', {deltaY: 30});
         await wait(100);
         expect(instance.get('value')).to.eql(1);
 
-        dispatchEvent(element.firstElementChild!, 'wheel', {deltaY: -1});
+        dispatchEvent(element.firstElementChild!, 'wheel', {deltaY: -30});
         await wait(100);
         expect(instance.get('value')).to.eql(0);
     });

package/components/scrollSelect/useMouseEvents.ts

@@ -18,6 +18,7 @@ export function useMouseEvents(
     let y: number;
     let itemHeight: number;
     let deltaY: number;
+    let wheelDeltaY: number = 0;
     const {start, dragging} = useDraggable({
         onStart(e: MouseEvent) {
             dragged = false; 
@@ -28,12 +29,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 +64,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;
+        wheelDeltaY += e.deltaY;
+        
+        if (Math.abs(wheelDeltaY) >= threshold) {
+            if (wheelDeltaY > 0) {
+                setByRelativeIndex(1, null, true);
+            } else {
+                setByRelativeIndex(-1, null, true);
+            }
+            wheelDeltaY = 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.ts

@@ -142,8 +142,9 @@ export abstract class BaseSelect<
         this.set('show', false);
     }
 
-    public resetKeywords(keywords: State<string>) {
-        keywords.set('');
+    @bind
+    public resetKeywords() {
+        this.input.keywords.set('');
     }
 
     protected hasValue() {

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;
 
@@ -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 />

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={false} 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=false: {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` | `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

@@ -206,6 +206,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,29 +216,157 @@ 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 () => {
+        class KeepKeywordsDemo extends Component<{days: string[]}> {
+            static template = `
+                const {Select, Option} = this;
+                <div>
+                    <Select v-model="days" filterable multiple creatable keepKeywords={false}>
+                        <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;
+        
+        // input custom option "custom1"
+        input.click();
+        await wait();
+        input.value = 'custom1';
+        dispatchEvent(input, 'input');
+        await wait();
+        
+        // check the created option appears in dropdown
+        const dropdown = getElement('.k-select-menu')!;
+        expect(dropdown.innerHTML).to.contain('custom1');
+        
+        // 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('');
+        
+        // input the same option "custom1" again
+        input.value = 'custom1';
+        dispatchEvent(input, 'input');
+        await wait();
+        
+        // press enter again
+        dispatchEvent(document, 'keydown', {keyCode: 13});
+        await wait();
+        
+        // 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
+        
+        // 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('');
+        
+        // test the normal behavior of original options
+        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');
+            
+            // click again should be unselected (original options are not affected by keepKeywords)
+            mondayOption.click();
+            await wait();
+            expect(instance.get('days')).to.not.include('Monday');
+        }
     });
 
     it('Tooltip with Select', async () => {
@@ -298,6 +429,94 @@ describe('Select', () => {
         expect(instance.get('days')).include('Monday')
     });
 
+    it('Searchable with multiple should show correct initial checkbox state', async () => {
+        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']);
+
+        // 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');
+        
+        // find the checkbox of Tuesday option
+        let tuesdayCheckbox: HTMLInputElement | null = null;
+        let tuesdayOption: HTMLElement | null = null;
+        
+        options.forEach((option, index) => {
+            if (option.textContent?.includes('星期二')) {
+                tuesdayCheckbox = checkboxes[index];
+                tuesdayOption = option;
+            }
+        });
+        
+        // check the checkbox of Tuesday should be checked
+        expect(tuesdayCheckbox).to.exist;
+        expect(tuesdayCheckbox!.checked).to.be.true;
+        
+        // check the Tuesday option should have active style
+        expect(tuesdayOption).to.exist;
+        expect(tuesdayOption!.className).to.include('k-active');
+        
+        // close dropdown
+        const [cancel] = dropdown.querySelectorAll<HTMLElement>('.k-select-footer .k-btn');
+        cancel.click();
+        await wait();
+        
+        // reopen dropdown, check the state is still correct
+        element.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;
+            }
+        });
+        
+        // check the state is still correct when reopen
+        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,20 @@ 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)) {
+                select.resetKeywords();
+                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,11 +38,13 @@ const typeDefs: Required<TypeDefs<SelectProps>> = {
     labelMap: Map,
     card: Boolean,
     autoDisableArrow: Boolean,
+    keepKeywords: Boolean,
 };
 
 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/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

@@ -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,20 +46,22 @@ 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', () => {
-        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();
+            }
         }
     });
 

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};
 }