@king-design/intact 3.5.2 → 3.6.0

package/components/button/index.md

@@ -35,6 +35,7 @@ sidebar: doc
 | fluid | 是否宽度100% | `boolean` | `false` |
 | seperate | 是否展示间隔，此属性为错别字，将会在下个版本被删除，请使用正确的属性 `separate`，若两个属性同时使用，则会优先使用`separate`属性 | `boolean` | `false` |
 | separate | 是否展示间隔 | `boolean` | `false` |
+| btnWidth | 指定按钮组每个按钮的固定宽度，默认根据内容撑开 | `number` | `string` | `undefined` |
 
 # 方法
 

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/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} 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,7 +34,7 @@ export interface BasePickerProps<
 }
 
 export interface BasePickerEvents extends BaseSelectEvents {
-    selecting: [StateValueRange]
+    selecting: [StateValueRange, boolean],
 }
 
 export interface BasePickerBlocks<
@@ -52,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],
@@ -85,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 ? [
-                    getShowString((value as DayjsValueRange)[0]),
-                    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
@@ -113,237 +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,
-    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(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 {
-            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) {
-        const {range}  = instance.get();
-        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); 
-        instance.set('value', valueStr);
-        instance.resetKeywords(instance.input.keywords);
-    }
-
-    function onConfirm() {
-        // unique
-        if (!instance.get('multiple')) {
-            instance.hide();
-        } else {
-            unique();
-            panel.reset();
-        }
-        updateValue();
-    }
-
-    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,
-    };
-}

package/components/datepicker/calendar.ts

@@ -10,15 +10,19 @@ import {useShowDate} from './useShowDate';
 import {bind} from '../utils';
 import {useYears} from './useYears';
 import {useMonths} from './useMonths';
-import {StateValue} from './basepicker';
+import {useWeeks} from './useWeeks';
+import {useQuarters} from './useQuarters';
+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'
+    type?: 'date' | 'year' | 'month' | 'week' | 'quarter'
     flag: PanelFlags
+    highlightPosition: Position
 }
 
 export interface DatepickerCalendarEvents {
@@ -40,6 +44,8 @@ export class DatepickerCalendar extends Component<DatepickerCalendarProps, Datep
     public days = useDays(this.showDate.date, this.status, this.datepicker.focusDate.focusDate);
     public years = useYears(this.showDate.date, this.status, this.datepicker.focusDate.focusDate);
     public months = useMonths(this.showDate.date, this.status, this.datepicker.focusDate.focusDate);
+    public weeks = useWeeks(this.showDate.date, this.status, this.datepicker.focusDate.focusDate);
+    public quarters = useQuarters(this.showDate.date, this.status, this.datepicker.focusDate.focusDate);
     private config = useConfigContext();
 
     @bind

package/components/datepicker/calendar.vdt

@@ -7,7 +7,12 @@ import {getNowDate} from './helpers';
 
 const type = this.type.value;
 const isYear = type === 'year';
+const isWeek = type === 'week';
+const isQuarter = type === 'quarter';
 const isYearOrMonth = isYear || type === 'month';
+const isDateOrDateTime = type === 'date' || type === 'datetime'
+// isDateOrDateTime & isWeek合并
+const showDateWeeks = isDateOrDateTime || isWeek
 const { k } = this.config;
 const classNameObj = {
     [`${k}-datepicker-calendar`]: true,
@@ -59,7 +64,7 @@ const {
             <Button icon type="none" size="small" class={`${k}-prev`}
                 tagName="div"
                 ev-click={prevMonth}
-                v-if={!isYearOrMonth}
+                v-if={showDateWeeks}
             >
                 <Icon class={`${k}-icon-left`} size="small" />
             </Button>
@@ -79,7 +84,7 @@ const {
             <Button icon type="none" size="small" class={`${k}-next`}
                 tagName="div"
                 ev-click={nextMonth}
-                v-if={!isYearOrMonth}
+                v-if={showDateWeeks}
             >
                 <Icon class={`${k}-icon-right`} size="small" />
             </Button>
@@ -92,20 +97,32 @@ const {
             </Button>
         </div>
     </div>
-    <template v-if={!isYearOrMonth}>
+    <template v-if={showDateWeeks}>
         <div class={`${k}-weekdays`}>
             <div class={`${k}-weekday`}
                 v-for={[_$('日'), _$('一'), _$('二'), _$('三'), _$('四'), _$('五'), _$('六')]}
             >{$value}</div>
         </div>
-        <div class={`${k}-days`} ev-mouseleave={resetFocusDate}>
+        <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>
+                {getItems($value.days, onClickDay)}
+            </div>
+        </div>
+        <div v-else class={`${k}-days`} ev-mouseleave={resetFocusDate}>
             {getItems(getDays(now), onClickDay)}
         </div>
     </template>
     <div v-else class={`${k}-years`} ev-mouseleave={resetFocusDate}>
         {isYear ?
-            getItems(this.years.getYears(now), this.years.onClick) :
-            getItems(this.months.getMonths(now), this.months.onClick)
+            getItems(this.years.getYears(now), this.years.onClick) :  
+            isQuarter ?
+                getItems(this.quarters.getQuarters(now), this.quarters.onClick) :
+                getItems(this.months.getMonths(now), this.months.onClick)
         }
     </div>
 </div>

package/components/datepicker/dayjs.ts

@@ -1,7 +1,13 @@
-import dayjs, {Dayjs, OpUnitType} 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';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
 
 dayjs.extend(customParseFormat);
+dayjs.extend(weekOfYear);
+dayjs.extend(quarterOfYear);
+dayjs.extend(advancedFormat);
 
 export default dayjs;
-export type {Dayjs, OpUnitType};
+export type {Dayjs, OpUnitType, QUnitType};

package/components/datepicker/demos/multiple.md

@@ -24,7 +24,7 @@ import {Datepicker} from 'kpc';
     <Datepicker multiple range v-model="dateRange" />
     You selected: {JSON.stringify(this.get('dateRange'))}
     <br /><br />
-    <Datepicker multiple range v-model="datetimeRange" type="datetime" />
+    <Datepicker multiple range type="datetime" v-model="datetimeRange" />
     You selected: {JSON.stringify(this.get('datetimeRange'))}
     <br /><br />
 </div>

package/components/datepicker/demos/yearMonth.md

@@ -1,5 +1,5 @@
 ---
-title: 选择年或月
+title: 选择年、月
 order: 5.1
 ---
 

package/components/datepicker/helpers.ts

@@ -1,7 +1,7 @@
-import dayjs, {Dayjs, OpUnitType} from 'dayjs';
-import {strPad, range} from '../utils';
+import dayjs, {Dayjs, OpUnitType, QUnitType} from 'dayjs';
+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
@@ -28,10 +28,10 @@ export function endTime(date: Date) {
 export function isEqual(
     a: Dayjs | undefined | null,
     b: Dayjs | undefined | null,
-    type: OpUnitType = 'date'
+    type: OpUnitType | QUnitType = 'date'
 ) {
     if (a && b) {
-        return a.isSame(b, type);
+        return a.isSame(b, type as any);
     }
     return false;
 }
@@ -39,10 +39,10 @@ export function isEqual(
 export function isLT(
     a: Dayjs | undefined | null,
     b: Dayjs | undefined | null,
-    type: OpUnitType = 'date'
+    type: OpUnitType | QUnitType = 'date'
 ) {
     if (a && b) {
-        return a.isBefore(b, type);
+        return a.isBefore(b, type as any);
     }
 
     return false;
@@ -51,7 +51,7 @@ export function isLT(
 export function isGT(
     a: Dayjs | undefined | null,
     b: Dayjs | undefined | null,
-    type: OpUnitType = 'date'
+    type: OpUnitType | QUnitType = 'date'
 ) {
     return isLT(b, a, type);
 }
@@ -70,7 +70,7 @@ export function createDate(date: string) {
     return new Date(date);
 }
 
-export function findValueIndex(values: StateValueItem[], value: StateValueItem, type: OpUnitType) {
+export function findValueIndex(values: StateValueItem[], value: StateValueItem, type: OpUnitType | QUnitType) {
     return values.findIndex(item => {
         if (Array.isArray(item)) {
             // is multipe range values
@@ -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,13 +28,13 @@ sidebar: doc
 | max | 最大可选日期 | `Value` | `undefind` |
 | min | 最小可选日期 | `Value` | `undefind` |
 | disabledDate | 该属性值是一个函数，用于定义那些日期被禁止选择，函数参数为日期字符串，返回`true`则表示禁用该日期 | `(v: Dayjs) => boolean` | `undefined` |
-| type | 组件类型：`"date"` 只选择日期；`"datetime"` 选择日期和时间；`"year"` 选择年份；`"month"` 选择月份 | `"date"` | `"datetime"` | `"year"` | `"month"` | `"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` |
 ```ts
 import {Dayjs} from 'dayjs';
 import {VNode} from 'intact';