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

package/components/button/demos/basic.md

@@ -20,7 +20,6 @@ import {Button} from 'kpc';
     <Button type="flat">flat</Button>
     <Button color="red">custom</Button>
     <Button color="#0000ea">custom</Button>
-    <Button color="rgb(183, 18, 193)">custom</Button>
 </div>
 ```
 

package/components/cascader/index.spec.ts

@@ -104,13 +104,14 @@ describe('Cascader', () => {
         input.click();
         await wait();
 
+        // FIXME: maybe we should show no-data layer
         // should show layer when input empty string
-        input.value = ' ';
-        dispatchEvent(input, 'input');
-        await wait();
-        const dropdown = getElement('.k-cascader-menu')!;
-        expect(dropdown.innerHTML).to.matchSnapshot();
-        expect(dropdown.innerText).to.eql('北京\n湖南');
+        // input.value = ' ';
+        // dispatchEvent(input, 'input');
+        // await wait();
+        // const dropdown = getElement('.k-cascader-menu')!;
+        // expect(dropdown.innerHTML).to.matchSnapshot();
+        // expect(dropdown.innerText).to.eql('北京\n湖南');
 
         input.value = '长沙';
         dispatchEvent(input, 'input');

package/components/copy/index.spec.ts

@@ -10,19 +10,18 @@ describe('Copy', () => {
     });
 
     it('should copy', async function() {
+        const spy = sinon.spy(navigator.clipboard, 'writeText');
         const [instance, element] = mount(BasicDemo);
         
         element.click();
-        try {
-            const text = await navigator.clipboard.readText();
-            expect(text).to.eql('Hello King Desgin!');
-        } catch (e) {
-            // Read permisson denied 
-            console.log(e);
-        }
+        await wait();
+        expect(spy.calledWith('Hello King Desgin!')).to.be.true;
+
+        spy.restore();
     });
 
     it('wrap copy with tooltip', async () => {
+        const spy = sinon.spy(navigator.clipboard, 'writeText');
         class Demo extends Component {
             static template = `
                 const { Tooltip, Copy } = this;
@@ -38,12 +37,8 @@ describe('Copy', () => {
 
         element.click();
         await wait();
-        try {
-            const text = await navigator.clipboard.readText();
-            expect(text).to.eql('test');
-        } catch (e) {
-            // Read permisson denied 
-            console.log(e);
-        }
+        expect(spy.calledWith('test')).to.be.true;
+
+        spy.restore();
     });
 });

package/components/datepicker/basepicker.ts

@@ -1,25 +1,15 @@
 /**
  * The base hook for handling value of Datepicker and Timepicker
  */
-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 {TypeDefs} from 'intact';
+import {State} from '../../hooks/useState';
+import dayjs, {Dayjs} from './dayjs';
 import type {useFormats} from './useFormats';
-import type {useDisabled} from './useDisabled';
-import {isEqualArray, last, bind} from '../utils';
-import {PanelTypes, PanelFlags, usePanel} from './usePanel';
+import {last, bind} from '../utils';
+import {usePanel} from './usePanel';
 import {BaseSelect, BaseSelectProps, BaseSelectEvents, BaseSelectBlocks} from '../select/base';
 import type {Events} from '../types';
-
-export type StateValueRange = [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[]
+import type {useValueBase, StateValueRange, DayjsValueRange, Value} from './useValueBase';
 
 export interface BasePickerProps<
     V extends Value = Value,
@@ -44,8 +34,7 @@ export interface BasePickerProps<
 }
 
 export interface BasePickerEvents extends BaseSelectEvents {
-    selecting: [StateValueRange],
-    togglePosition: []
+    selecting: [StateValueRange, boolean],
 }
 
 export interface BasePickerBlocks<
@@ -53,8 +42,6 @@ export interface BasePickerBlocks<
     R extends boolean = boolean,
 > extends BaseSelectBlocks<R extends true ? [Value, Value] : Value> { }
 
-export type Value = string | Date | number | Dayjs;
-
 const typeDefs: Required<TypeDefs<BasePickerProps<Value>>> = {
     ...BaseSelect.typeDefs,
     value: [String, Array, Date, Number, dayjs],
@@ -75,7 +62,6 @@ const defaults = (): Partial<BasePickerProps<any>> => ({
 const events: Events<BasePickerEvents> = {
     ...BaseSelect.events,
     selecting: true,
-    togglePosition: true,
 };
 
 export abstract class BasePicker<
@@ -87,25 +73,30 @@ export abstract class BasePicker<
     static defaults = defaults;
     static events = events;
 
-    public abstract value: ReturnType<typeof useValue>
+    public abstract value: ReturnType<typeof useValueBase>
     public abstract formats: ReturnType<typeof useFormats>
     public abstract panel: ReturnType<typeof usePanel>
 
     @bind
-    public resetKeywords(keywords: State<string>) {
-        const {multiple, range} = this.get();
-        const dayjsValue = this.value.getDayjsValue();
-        const {getShowString} = this.formats;
-        const value = last(dayjsValue);
+    public resetKeywords(silent: boolean = false) {
+        // const {multiple} = this.get();
+        // const dayjsValue = this.value.getDayjsValue();
+        const value = last(this.value.value.value);
+        const keywords = this.input.keywords;
+
+        let _keywords = '';
+        if (value && !this.value.allValuesUpdatedInMultipleMode()) {
+            _keywords = this.value.formatSingleValue(value); 
+        }
 
-        keywords.set(
-            multiple ?  '' : !range ?
-                value ? getShowString(value as Dayjs) : '' :
-                value ? [
-                    (value as DayjsValueRange)[0] ? getShowString((value as DayjsValueRange)[0]) : '',
-                    (value as DayjsValueRange)[1] ? getShowString((value as DayjsValueRange)[1]) : '',
-                ].join(' ~ ') : ''
-        );
+        if (!silent) {
+            keywords.set(_keywords);
+        } else {
+            // update keywords will update value, because it is been watched in useValueBase
+            // silent in this case to update keywords to show it in input
+            (keywords as any).value = _keywords;
+            this.forceUpdate();
+        }
     }
 
     // @bind
@@ -115,282 +106,3 @@ export abstract class BasePicker<
     // }
 }
 
-export function useValue(
-    {
-        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 对应的字符串相同，避免循环
-        const currentValueStr = convertToValueString(dayjsValue);
-        if (newValue === currentValueStr) {
-            return;
-        }
-        
-        // 只执行一次转换和更新逻辑
-        const _value = convertToDayjs(newValue);
-        
-        dayjsValue = _value;
-        updateStateValue(_value, value);
-        instance.resetKeywords(instance.input.keywords);
-        
-
-    });
-
-    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 results = dayjsValue.map(value => {
-            if (Array.isArray(value)) {
-                return value.map(getShowString).join(' ~ ');
-            }
-            return getShowString(value);
-        });
-
-        if (!instance.get('multiple')) {
-            return results[0];
-        }
-        return results;
-    }
-
-    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();
-            }
-        }
-
-        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 confrim 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 valueStr = convertToValueString(_value);
-        
-        // 检查是否需要更新，避免循环调用
-        if (instance.get('value') === valueStr) {
-            return;
-        }
-        
-        // 在设置 value 之前先更新 dayjsValue
-        dayjsValue = _value;
-        instance.set('value', valueStr);
-        
-        instance.resetKeywords(instance.input.keywords);
-
-    }
-
-    function onConfirm() {
-        const lastValue = last(instance.value.value.value);
-        const {multiple, range} = instance.get();
-        if (!multiple) {
-        
-            if (range) {
-                // 范围选择：需要开始和结束时间都选择完才关闭
-                if((lastValue as [Dayjs, Dayjs?]).length === 2) {
-                    instance.hide(); 
-                } 
-                instance.trigger('togglePosition');
-            } else {
-                // 单选：选择完时间就关闭
-                if (lastValue) {
-                    instance.hide();
-                } 
-            }
-
-        } else {
-            unique();
-            panel.reset();
-        }
-        updateValue();
-    }
-
-    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} = instance.get();
-        const values = value.value.slice();
-        const lastIndex = values.length - 1;
-        let _value: StateValueItem = date;
-
-        if (range) {
-            _value = (values as DayjsValueRange[])[lastIndex].slice() as DayjsValueRange;
-            _value[flag] = date;
-            instance.trigger('selecting', _value);
-        }
-
-        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;
-    }
-
-    return {
-        value,
-        format,
-        onConfirm,
-        onChangeTime,
-        getTimeValue,
-        setValue,
-        convertToDayjs,
-        getDayjsValue,
-        setMoment,
-    };
-}

package/components/datepicker/calendar.ts

@@ -12,15 +12,17 @@ import {useYears} from './useYears';
 import {useMonths} from './useMonths';
 import {useWeeks} from './useWeeks';
 import {useQuarters} from './useQuarters';
-import {StateValue} from './basepicker';
+import type {StateValue} from './useValueBase';
 import {useStatus} from './useStatus';
 import {PanelFlags} from './usePanel';
 import { useConfigContext } from '../config';
+import { Position } from './useHighlight';
 
 export interface DatepickerCalendarProps {
     value: StateValue
     type?: 'date' | 'year' | 'month' | 'week' | 'quarter'
     flag: PanelFlags
+    highlightPosition: Position
 }
 
 export interface DatepickerCalendarEvents {

package/components/datepicker/calendar.vdt

@@ -105,8 +105,11 @@ const {
         </div>
         <div v-if={isWeek} class={`${k}-weeks`} ev-mouseleave={resetFocusDate}>
             <div v-for={this.weeks.getWeeks(now)} class="week-row">
-                <div class={`${k}-week-number`} ev-click={e => {onClickDay($value.days[0].value)}}
-                    ev-mouseenter={() => focusDate.set($value.days[0].value)}>{$value.week}</div>
+                <div
+                    class={`${k}-week-number`}
+                    ev-click={e => {onClickDay($value.days[0].value)}}
+                    ev-mouseenter={() => focusDate.set($value.days[0].value)}
+                >{$value.week}</div>
                 {getItems($value.days, onClickDay)}
             </div>
         </div>

package/components/datepicker/dayjs.ts

@@ -1,4 +1,4 @@
-import dayjs, {Dayjs, OpUnitType as DayjsOpUnitType, QUnitType as DayjsQUnitType} from 'dayjs';
+import dayjs, {Dayjs, OpUnitType, QUnitType} from 'dayjs';
 import weekOfYear from 'dayjs/plugin/weekOfYear'
 import quarterOfYear from 'dayjs/plugin/quarterOfYear';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
@@ -9,19 +9,5 @@ dayjs.extend(weekOfYear);
 dayjs.extend(quarterOfYear);
 dayjs.extend(advancedFormat);
 
-// 重新声明类型以避免私有名称错误
-export type OpUnitType = DayjsOpUnitType;
-export type QUnitType = DayjsQUnitType;
-
-declare module 'dayjs' {
-    interface Dayjs {
-        isSame(date?: dayjs.ConfigType, unit?: DayjsOpUnitType | DayjsQUnitType): boolean;
-        isBefore(date?: dayjs.ConfigType, unit?: DayjsOpUnitType | DayjsQUnitType): boolean;
-        isAfter(date?: dayjs.ConfigType, unit?: DayjsOpUnitType | DayjsQUnitType): boolean;
-        add(value: number, unit?: DayjsOpUnitType | DayjsQUnitType): dayjs.Dayjs;
-        subtract(value: number, unit?: DayjsOpUnitType | DayjsQUnitType): dayjs.Dayjs;
-    }
-}
-
 export default dayjs;
-export type {Dayjs};
+export type {Dayjs, OpUnitType, QUnitType};

package/components/datepicker/demos/multiple.md

@@ -24,6 +24,9 @@ import {Datepicker} from 'kpc';
     <Datepicker multiple range v-model="dateRange" />
     You selected: {JSON.stringify(this.get('dateRange'))}
     <br /><br />
+    <Datepicker multiple range type="datetime" v-model="datetimeRange" />
+    You selected: {JSON.stringify(this.get('datetimeRange'))}
+    <br /><br />
 </div>
 ```
 
@@ -34,6 +37,7 @@ interface Props {
     year?: string[]
     month?: string[]
     dateRange?: [string, string][]
+    datetimeRange?: [string, string][]
 }
 
 export default class extends Component<Props> {
@@ -45,6 +49,7 @@ export default class extends Component<Props> {
             year: [],
             month: [],
             dateRange: [],
+            datetimeRange: [],
         } as Props;
     }
 }

package/components/datepicker/demos/yearMonth.md

@@ -1,9 +1,9 @@
 ---
-title: 选择年、月、周、季度
+title: 选择年、月
 order: 5.1
 ---
 
-将`type`属性指定为`year`或`month``或`week``或`quarter`可以只选择“年”或“月””或“周””或“季度”
+将`type`属性指定为`year`或`month`可以只选择“年”或“月”
 
 ```vdt
 import {Datepicker} from 'kpc';
@@ -11,8 +11,6 @@ import {Datepicker} from 'kpc';
 <div>
     <Datepicker type="year" v-model="year" />
     <Datepicker type="month" v-model="month" clearable />
-    <Datepicker type="week" v-model="week" clearable />
-    <Datepicker type="quarter" v-model="quarter" clearable />
 </div>
 ```
 
@@ -25,8 +23,6 @@ import {Datepicker} from 'kpc';
 interface Props {
     year?: string | null
     month?: string | null
-    week?: string | null
-    quarter?: string | null
 }
 
 export default class extends Component<Props> {
@@ -35,8 +31,6 @@ export default class extends Component<Props> {
         return {
             year: null,
             month: null,
-            week: null,
-            quarter: null,
         } as Props;
     }
 }

package/components/datepicker/helpers.ts

@@ -1,7 +1,7 @@
 import dayjs, {Dayjs, OpUnitType, QUnitType} from 'dayjs';
-import {strPad, range} from '../utils';
+import {strPad, range, last} from '../utils';
 import {_$} from '../../i18n';
-import {StateValueItem} from './basepicker';
+import {StateValueItem} from './useValueBase';
 
 export function getNowDate(isEnd?: boolean) {
     // only date without time
@@ -31,7 +31,7 @@ export function isEqual(
     type: OpUnitType | QUnitType = 'date'
 ) {
     if (a && b) {
-        return a.isSame(b, type);
+        return a.isSame(b, type as any);
     }
     return false;
 }
@@ -42,7 +42,7 @@ export function isLT(
     type: OpUnitType | QUnitType = 'date'
 ) {
     if (a && b) {
-        return a.isBefore(b, type);
+        return a.isBefore(b, type as any);
     }
 
     return false;
@@ -82,6 +82,4 @@ export function findValueIndex(values: StateValueItem[], value: StateValueItem,
     });
 }
 
-export function last<T>(arr: T[]): T | undefined {
-    return arr[arr.length - 1];
-}
+export { last } 

package/components/datepicker/index.md

@@ -28,14 +28,13 @@ sidebar: doc
 | max | 最大可选日期 | `Value` | `undefind` |
 | min | 最小可选日期 | `Value` | `undefind` |
 | disabledDate | 该属性值是一个函数，用于定义那些日期被禁止选择，函数参数为日期字符串，返回`true`则表示禁用该日期 | `(v: Dayjs) => boolean` | `undefined` |
-| type | 组件类型：`"date"` 只选择日期；`"datetime"` 选择日期和时间；`"year"` 选择年份；`"month"` 选择月份 `"quarter"` 选择季度；`"week` 选择周；|  | `"datetime"` | `"year"` | `"month"`  | `"quarter"`  | `"week"` | `"date"` |
+| type | 组件类型：`"date"` 只选择日期；`"datetime"` 选择日期和时间；`"year"` 选择年份；`"month"` 选择月份 |  | `"datetime"` | `"year"` | `"month"` | `"date"` |
 | shortcuts | 指定快捷方式 | `Shortcut[]` | `undefined` |
 | show | 是否展示菜单项 | `boolean` | `false` |
 | position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'left top+8', 'left bottom'}` |
 | flat | 是否展示扁平样式 | `boolean` | `false` |
 | draggable | 多选值是否支持拖动排序 | `boolean` | `false` |
 | nowrap | 日期多选时， 是否换行显示 | `boolean` | `false` |
-| isMerge | 日期范围多选时，在nowrap状态下是否交叉自动合并 | `boolean` | `false` |
 ```ts
 import {Dayjs} from 'dayjs';
 import {VNode} from 'intact';