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

package/components/datepicker/useValueBase.ts

@@ -0,0 +1,309 @@
+import {useInstance, Component, TypeDefs} from 'intact';
+import {useState, watchState, State} from '../../hooks/useState';
+import dayjs, {Dayjs, OpUnitType, QUnitType} from './dayjs';
+import {findValueIndex} from './helpers';
+import type {useFormats} from './useFormats';
+import type {useDisabled} from './useDisabled';
+import {isEqualArray, last, bind} from '../utils';
+import {PanelFlags, usePanel} from './usePanel';
+import type {BasePicker, BasePickerProps} from './basepicker';
+
+export type Value = string | Date | number | Dayjs;
+
+export type StateValueRange = [Dayjs] | [Dayjs, Dayjs];
+export type StateValueItem = Dayjs | StateValueRange;
+export type StateValue = StateValueItem[]
+
+export type StringValue = string | string[] | [string, string] | [string, string][]
+export type DayjsValueRange = [Dayjs, Dayjs]
+export type DayjsValueItem = Dayjs | DayjsValueRange
+export type DayjsValue = DayjsValueItem[]
+
+export function useValueBase(
+    {
+        createDateByValueFormat,
+        createDateByShowFormat,
+        getShowString,
+        getValueString,
+    }: ReturnType<typeof useFormats>,
+    {isDisabled, minDate}: ReturnType<typeof useDisabled>,
+    panel: ReturnType<typeof usePanel>,
+    shouldUpdateValue: (v: StateValueItem) => boolean,
+    updateValueOnInput: (v: DayjsValueItem) => void,
+    getEqualType: () => OpUnitType | QUnitType,
+    updateStateValue: (v: DayjsValue, value: State<StateValue>) => void,
+) {
+    // Normalize the value to multipe values, no matter it's multipe or not
+    const value = useState<StateValue>([]);
+    const instance = useInstance() as BasePicker<BasePickerProps<Value>>;
+    let dayjsValue: DayjsValue = [];
+
+    instance.watch('value', (newValue, oldValue) => {
+        if (isEqualArray(newValue, oldValue)) return;
+        dayjsValue = convertToDayjs(newValue);
+        updateStateValue(dayjsValue, value);
+        // should update keywords
+        instance.resetKeywords();
+    });
+
+    watchState(value, (value) => {
+        // silently update the keywords to display the currently selected value 
+        instance.resetKeywords(true);
+        /**
+         * the position may changed after the input break line in multipe mode
+         * use Macro task instead of nextTick, because it has too many Micro tasks
+         */
+        setTimeout(() => {
+            instance.position();
+        });
+    });
+    instance.on('hide', () => {
+        // reset the value after hiding
+        value.set(dayjsValue.slice(0));
+    });
+
+    watchState(instance.input.keywords, v => {
+        const {range, multiple} = instance.get();
+        if (!multiple && v === '') return instance.set('value', null);
+
+        if (range) {
+            const [start, end] = v.split(/\s*~\s*/).map(s => s.trim());
+            if (start && end) {
+                const startDate = createDateByShowFormat(start);
+                if (!isValidDate(startDate)) {
+                    return;
+                }
+                const endDate = createDateByShowFormat(end);
+                if (!isValidDate(endDate)) {
+                    return;
+                }
+                if (endDate.isAfter(startDate)) {
+                    updateValueOnInput([startDate, endDate]);
+                } else {
+                    updateValueOnInput([endDate, startDate]);
+                }
+            }
+        } else {
+            const date = createDateByShowFormat(v);
+            if (isValidDate(date)) {
+                updateValueOnInput(date);
+            }
+        }
+    });
+
+    function convertToDayjs(v: BasePickerProps<Value>['value']): DayjsValue {
+        if (!v || Array.isArray(v) && !v.length) return [];
+        const {multiple} = instance.get();
+        if (!multiple) {
+            v = [v] as any;
+        }
+        return (v as (Value | [Value, Value])[]).map(value => {
+            if (Array.isArray(value)) {
+                // range
+                return value.map(createDateByValueFormat);
+            }
+            return createDateByValueFormat(value);
+        }) as DayjsValue;
+    }
+
+    function convertToValueString(v: DayjsValue): StringValue | null {
+        const results = v.map(value => {
+            if (Array.isArray(value)) {
+                return value.map(getValueString);
+            }
+            return getValueString(value);
+        });
+
+        if (!instance.get('multiple')) {
+            return results[0] || null;
+        }
+        return results as StringValue;
+    }
+
+    function format(): string | string[] {
+        const { multiple } = instance.get();
+        let labelValue = value.value;
+        if (multiple) {
+            labelValue = dayjsValue;
+        }
+        const results = labelValue.map(formatSingleValue);
+
+        if (!instance.get('multiple')) {
+            return results[0];
+        }
+        return results;
+    }
+
+    function formatSingleValue(value: StateValueItem) {
+        if (Array.isArray(value)) {
+            if (value.length === 1) {
+                return getShowString(value[0]) + ' ~';
+            }
+            return value.map(getShowString).join(' ~ ');
+        }
+        return getShowString(value);
+    }
+
+    function setSingleDate(v: StateValueItem, fromInput: boolean) {
+        value.set([v]);
+        if (fromInput || shouldUpdateValue(v)) {
+            updateValue();
+        }
+    }
+
+    function addMultipeDate(v: StateValueItem, fromInput: boolean) {
+        const {range} = instance.get();
+        let _value = value.value as StateValueItem[];
+        _value = !_value ? [] : _value.slice();
+
+        if (range && (v as StateValueRange).length === 2) {
+            // pop the last value firstly, if it only has the start date 
+            const lastValue = last(_value);
+            if (lastValue && (lastValue as StateValueRange).length < 2) {
+                _value.pop();
+            }
+        }
+
+        if (_value.length > dayjsValue.length) {
+            // remove the temporary value added by selecting time directly
+            _value.pop();
+        }
+
+        let _shouldUpdateValue = true;
+        if (fromInput || shouldUpdateValue(v)) {
+            // if select the date/year/month, then toggle the value.
+            // if from input, treat the value as the final value
+            const index = findValueIndex(_value, v, getEqualType());
+            if (index > -1) {
+                _value.splice(index, 1);
+            } else {
+                _value.push(v);
+            }
+        } else {
+            // select the datetime, only push the value,
+            // and unique the array on click confirm button
+            _value.push(v); 
+            _shouldUpdateValue = false;
+        }
+
+        value.set(_value);
+
+        if (_shouldUpdateValue) {
+            updateValue();
+        }
+    }
+
+    function setValue(v: StateValueItem, fromInput: boolean) {
+        const multiple = instance.get('multiple');
+        if (multiple) {
+            addMultipeDate(v, fromInput);
+        } else {
+            setSingleDate(v, fromInput);
+        }
+    }
+
+    function updateValue() {
+        const _value = value.value as DayjsValue;
+        const { range } = instance.get();
+        if (range) {
+            // only fix the last value, since the others are already fixed 
+            const lastValue = last(_value) as DayjsValueRange;
+            if (lastValue) {
+                lastValue.sort((a, b) => a.isAfter(b) ? 1 : -1);
+            }
+        }
+
+        const valueStr = convertToValueString(_value); 
+        instance.set('value', valueStr);
+        instance.resetKeywords();
+    }
+
+    // TODO
+    function setMoment() {
+        const now = dayjs();
+        setValue(now, true);
+        instance.hide();
+    }
+
+    function unique() {
+        const _value = value.value;
+        const map: Record<string, true> = {};
+        const results: StateValue = [];
+        _value.forEach(value => {
+            let key: string;
+            if (Array.isArray(value)) {
+                key = (value as DayjsValueRange).map(getValueString).join(' ~ ');
+            } else {
+                key = getValueString(value);
+            }
+            if (!map[key]) {
+                map[key] = true;
+                results.push(value);
+            }
+        });
+
+        value.set(results);
+    }
+
+    function isValidDate(date: Dayjs) {
+        return date.isValid() && !isDisabled(date, getEqualType());
+    }
+
+    function onChangeTime(date: Dayjs, flag: PanelFlags) {
+        const {range, multiple} = instance.get();
+        const values = value.value.slice();
+        // maybe we select time directly
+        let lastIndex = Math.max(values.length - 1, 0);
+        if (allValuesUpdatedInMultipleMode()) {
+            // need add new value, if all value.value has updated to dayjsValue
+            lastIndex = values.length; 
+        }
+        let _value: StateValueItem = date;
+
+        if (range) {
+            _value  = (values as DayjsValueRange[])[lastIndex];
+            if (_value) {
+                _value = _value.slice() as DayjsValueRange;
+            } else {
+                _value = [] as unknown as DayjsValueRange;
+            }
+            _value[flag] = date;
+            instance.trigger('selecting', _value, false);
+        }
+
+        values[lastIndex] = _value;
+        value.set(values);
+    }
+
+    function getTimeValue(flag: PanelFlags): Dayjs | null | undefined {
+        const _value = value.value;
+        if (!_value.length) return null;
+
+        const {range, min} = instance.get();
+        const lastValue = last(_value);
+        return range ? (lastValue as StateValueRange)[flag] : lastValue as Dayjs;
+    }
+
+    function getDayjsValue() {
+        return dayjsValue;
+    }
+
+    function allValuesUpdatedInMultipleMode() {
+        return instance.get('multiple') && value.value.length === dayjsValue.length;
+    }
+
+    return {
+        value,
+        format,
+        formatSingleValue,
+        onChangeTime,
+        getTimeValue,
+        setValue,
+        convertToDayjs,
+        getDayjsValue,
+        unique,
+        setMoment,
+        updateValue,
+        allValuesUpdatedInMultipleMode,
+    };
+}

package/components/datepicker/useWeeks.ts

@@ -39,7 +39,7 @@ export function useWeeks(
                     isDisabled: status.isDisabled(day),
                     isHover: day.isSame(focusDate.value, 'week'),
                     isInRange: !isFirstOrLastDay && status.isActive(day, 'week') 
-                });  
+                });
             }  
             // 每周的数据，包括周数和7天的信息  
             weeks.push({week: weekNumber, days});   

package/components/datepicker/useYears.ts

@@ -55,10 +55,14 @@ export function useYears(
 
     function onClick(date: Dayjs) {
         showDate.set(date);
-        if (instance.datepicker.get('type') !== 'year') {
-            instance.type.set('month');
-        } else {
+        const datepickerType = instance.datepicker.get('type');
+        
+        if (datepickerType === 'year') {
             instance.triggerChange(date);
+        } else if (datepickerType === 'quarter') {
+            instance.type.set('quarter');
+        } else {
+            instance.type.set('month');
         }
     }
 

package/components/dropdown/dropdown.ts

@@ -15,7 +15,6 @@ import {bind, isTextChildren, getRestProps} from '../utils';
 import {EMPTY_OBJ, isFunction, noop} from 'intact-shared';
 import {Options, position, Feedback} from '../position';
 import {cx} from '@emotion/css';
-import {DropdownMenu} from './menu';
 import {useDocumentClick, containsOrEqual} from '../../hooks/useDocumentClick';
 import {Portal, PortalProps} from '../portal';
 import {useShowHideEvents} from '../../hooks/useShowHideEvents';
@@ -40,6 +39,7 @@ export interface DropdownProps {
     collison?: Position['collision']
     of?: 'self' | 'parent' | Event
     container?: PortalProps['container']
+    alwaysShowOnClick?: boolean
 }
 
 export interface DropdownEvents {
@@ -64,6 +64,7 @@ const typeDefs: Required<TypeDefs<DropdownProps>> = {
     of: ['self', 'parent', typeof Event === 'undefined' ? undefined : Event],
     container: [String, Function],
     collison: ['none', 'fit', 'flip', 'flipfit', Array],
+    alwaysShowOnClick: Boolean,
 };
 
 const defaults = (): Partial<DropdownProps> => ({
@@ -266,15 +267,15 @@ function useDocumentClickForDropdown(dropdown: Dropdown) {
         // case 2: if right click on a trigger and its trigger type is contextmenu, ignore it
         // case 3: if click on a trigger and its trigger type is focus, do nothing 
         // case 3: if click on sub-dropdown, we should also show the parent dropdown, so ignore it
-        const trigger = dropdown.get('trigger');
+        const { trigger, alwaysShowOnClick }= dropdown.get();
         if (trigger === 'focus') return;
 
         const isHover = trigger === 'hover';
-        if (isHover || trigger === 'contextmenu') {
+        if (isHover || trigger === 'contextmenu' || alwaysShowOnClick) {
             const triggerDom = findDomFromVNode(dropdown.$lastInput!, true) as Element;
             const target = e.target as Element;
             if (containsOrEqual(triggerDom, target)) {
-                if (isHover) return;
+                if (isHover || alwaysShowOnClick) return;
                 if (!isHover && e.type === 'contextmenu') return;
             }
         }

package/components/dropdown/index.md

@@ -17,6 +17,7 @@ sidebar: doc
 | position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'left top+8', 'left bottom'}` |
 | of | 弹出菜单的位置是相对当前触发元素，还是触发元素所在的菜单元素，这在嵌套菜单中可能会用到，可以使所有子菜单保持统一的对齐方式，例如：级联选择（Cascader）组件 | `"self"` | `"parent"` | `Event` | `"self"` |
 | container | 指定弹出菜单追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Container` | `undefined` |
+| alwaysShowOnClick | 不管什么触发方式，重复点击触发器，都不隐藏弹层 | `boolean` | `false` |
 
 ```ts
 type Position = {

package/components/dropdown/item.ts

@@ -3,7 +3,7 @@ import template from './item.vdt';
 import {bind} from '../utils';
 import {useItemKeyboard, MenuKeyboardMethods} from './useKeyboard';
 import {Dropdown, DROPDOWN} from './dropdown';
-import {DropdownMenu, DROPDOWN_MENU} from './menu';
+import {type DropdownMenu, DROPDOWN_MENU} from './menu';
 import {IgnoreClickEvent} from '../../hooks/useDocumentClick';
 import { Dropdown as ExportDropdown, DropdownMenu as ExportDropdownMenu } from '.';
 import { useConfigContext } from '../config';

package/components/dropdown/useKeyboard.ts

@@ -20,7 +20,6 @@ import {useKeyboard} from '../../hooks/useKeyboard';
 import {useState} from '../../hooks/useState';
 import {eachChildren, isComponentVNode} from '../utils';
 import {DropdownItem} from './item';
-import {isStringOrNumber} from 'intact-shared';
 // can not import DropdownMenu from index.ts, otherwise it will cause circle reference
 // import {DropdownMenu} from './';
 import {DropdownMenu} from './menu';

package/components/input/index.spec.ts

@@ -177,4 +177,46 @@ describe('Input', () => {
         await wait(50);
         expect(input.offsetWidth).to.gt(16);
     });
+
+    it('should handle textarea resize correctly', async () => {
+        class ResizeDemo extends Component {
+            static template = `
+                const {Input} = this;
+                <div>
+                    <Input type="textarea" resize="none" placeholder="resize none" />
+                    <Input type="textarea" resize="vertical" placeholder="resize vertical" />
+                    <Input type="textarea" resize="none" rows="auto" placeholder="resize none with auto rows" />
+                </div>
+            `;
+            private Input = Input;
+        }
+
+        const [instance, element] = mount(ResizeDemo as any);
+        
+        const inputElements = element.querySelectorAll('.k-input');
+        
+        // should have k-resize-none class
+        const resizeNoneElement = inputElements[0];
+        expect(resizeNoneElement.classList.contains('k-resize-none')).to.be.true;
+        expect(resizeNoneElement.classList.contains('k-resize-vertical')).to.be.false;
+        
+        const resizeVerticalElement = inputElements[1];
+        expect(resizeVerticalElement.classList.contains('k-resize-vertical')).to.be.true;
+        expect(resizeVerticalElement.classList.contains('k-resize-none')).to.be.false;
+        
+        // resize="none" with rows="auto" (should have k-resize-none class)
+        const resizeNoneAutoElement = inputElements[2];
+        expect(resizeNoneAutoElement.classList.contains('k-resize-none')).to.be.true;
+        
+        // Test CSS computed styles to ensure resize is applied correctly
+        const textareas = element.querySelectorAll('.k-textarea');
+        const textarea1 = textareas[0] as HTMLTextAreaElement;
+        const textarea2 = textareas[1] as HTMLTextAreaElement;
+        
+        const computedStyle1 = getComputedStyle(textarea1);
+        const computedStyle2 = getComputedStyle(textarea2);
+        
+        expect(computedStyle1.resize).to.eql('none');
+        expect(computedStyle2.resize).to.eql('vertical');
+    });
 });

package/components/input/index.ts

@@ -157,6 +157,14 @@ export class Input<V extends Value = Value> extends Component<InputProps<V>, Inp
         selectValue(this.inputRef.value!);
     }
 
+    getStringWidth(str: string) {
+        return this.autoWidth.getStringWidth(str);
+    }
+    
+    getSelectionStart() {
+        return this.inputRef.value!.selectionStart;
+    }
+
     @bind
     private clear(e: MouseEvent) {
         this.set<string>('value', '');

package/components/input/index.vdt

@@ -41,8 +41,7 @@ const classNameObj = {
     [`${k}-flat`]: flat,
     [`${k}-type-textarea`]: type === 'textarea',
     [`${k}-focus`]: isFocus.value,
-    [`${k}-resize-${resize}`]: type === 'textarea' && isNotAutoRows,
-    [`${k}-resize-none`]: type === 'textarea' && !isNotAutoRows,
+    [`${k}-resize-${isNotAutoRows ? resize : 'none'}`]: type === 'textarea',
     [className]: className,
     [makeStyles(k)]: true,
 }
@@ -54,7 +53,7 @@ const {
     showIcon: showPasswordIcon,
 } = this.showPassword;
 
-const {fakeRef, width: {value: fakeWidth}} = this.autoWidth;
+const {fakeRef, width: {value: fakeWidth}, forceShowFake} = this.autoWidth;
 const height = this.autoRows;
 
 const inputValue = frozenOnInput && inputing ? originalValue : value;
@@ -142,7 +141,7 @@ if (hasInputValue) {
                         </span>
                         <b:suffix />
                     </div>
-                    <div class={`${k}-input-fake`} v-if={autoWidth}>
+                    <div class={`${k}-input-fake`} v-if={autoWidth || forceShowFake.value}>
                         <pre ref={fakeRef}>{!hasValue ? (hasInputValue || !defaultValue ? placeholder : defaultValue) : inputValue}</pre>
                     </div>
                 </div>

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/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; 
@@ -67,15 +68,15 @@ export function useMouseEvents(
         itemHeight = getItemHeight();
         
         const threshold = itemHeight * 0.6;
-        deltaY = (deltaY || 0) + e.deltaY;
+        wheelDeltaY += e.deltaY;
         
-        if (Math.abs(deltaY) >= threshold) {
-            if (deltaY > 0) {
+        if (Math.abs(wheelDeltaY) >= threshold) {
+            if (wheelDeltaY > 0) {
                 setByRelativeIndex(1, null, true);
             } else {
                 setByRelativeIndex(-1, null, true);
             }
-            deltaY = 0;
+            wheelDeltaY = 0;
         }
     }
 

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

@@ -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` |