@king-design/intact 3.5.2 → 3.6.0

package/components/datepicker/index.ts

@@ -1,26 +1,27 @@
 import {TypeDefs, provide} from 'intact';
 import template from './index.vdt';
-import {BaseSelect, BaseSelectProps} from '../select/base';
 import {DATEPICKER} from './constants';
 import dayjs, {Dayjs} from './dayjs';
 import {useValue} from './useValue';
 import {isNullOrUndefined} from 'intact-shared'
 import {_$} from '../../i18n';
 import {bind} from '../utils';
-import {State} from '../../hooks/useState';
 import {useDisabled} from './useDisabled';
 import {useFormats} from './useFormats';
 import {usePanel} from './usePanel';
 import {useFocusDate} from './useFocusDate';
 import {useKeyboards} from './useKeyboards';
 import {Shortcut} from './shortcuts';
+import {useHighlight} from './useHighlight';
+// import {useMergeRange} from './useMergeRange';
 import {
     BasePicker,
     BasePickerProps,
     BasePickerEvents,
     BasePickerBlocks,
-    Value
 } from './basepicker';
+import {Value} from './useValueBase';
+import { useConfirm } from './useConfirm';
 
 export * as shortcuts from './shortcuts';
 export { dayjs };
@@ -30,8 +31,9 @@ export interface DatepickerProps<
     M extends boolean = boolean,
     R extends boolean = boolean,
 > extends BasePickerProps<V extends string ? V : V | string, M, R> {
-    type?: 'date' | 'datetime' | 'year' | 'month'
-    shortcuts?: Shortcut[]
+    type?: 'date' | 'datetime' | 'year' | 'month' | 'week' | 'quarter'
+    shortcuts?: Shortcut[],
+    // isMerge?: boolean
 }
 
 export interface DatepickerEvents extends BasePickerEvents { }
@@ -43,13 +45,15 @@ export interface DatepickerBlocks<
 
 const typeDefs: Required<TypeDefs<DatepickerProps>> = {
     ...BasePicker.typeDefs,
-    type: ['date', 'datetime', 'year', 'month'],
+    type: ['date', 'datetime', 'year', 'month', 'week', 'quarter'],
     shortcuts: Array,
+    // isMerge: Boolean
 };
 
 const defaults = (): Partial<DatepickerProps> => ({
     ...BasePicker.defaults(),
     type: 'date',
+    // isMerge: false
 });
 
 export class Datepicker<
@@ -62,11 +66,14 @@ export class Datepicker<
     static defaults = defaults;
 
     public formats = useFormats();
-    public disabled = useDisabled(this.formats);
+    public disabled = useDisabled(this.formats, () => this.highlight.position);
     public panel = usePanel();
     public focusDate = useFocusDate();
-    public value = useValue(this.formats, this.disabled, this.panel);
-
+    public value = useValue(this.formats, this.disabled, this.panel, () => this.highlight.position);
+    public highlight = useHighlight(this.value.value, this.formats.getShowString, this.input.keywords);
+    // public mergeRange = useMergeRange(this.formats);
+    private confirm = useConfirm(this.highlight, this.value, this.formats.getValueString);
+    
     init() {
         super.init();
         provide(DATEPICKER, this);
@@ -75,16 +82,19 @@ export class Datepicker<
 
     protected getPlaceholder() {
         const {placeholder, type, range} = this.get();
-
         if (!isNullOrUndefined(placeholder)) return placeholder;
 
         switch (type) {
             case 'datetime':
                 return range ? _$('开始时间 ~ 结束时间') : _$('请选择日期和时间');
             case 'year':
-                return _$('请选择年份');
+                return range ? _$('开始年份 ~ 结束年份') : _$('请选择年份');
             case 'month':
-                return _$('请选择月份');
+                return range ? _$('开始月份 ~ 结束月份') : _$('请选择月份');
+            case 'week':
+                return range ? _$('开始周 ~ 结束周') : _$('请选择周');
+            case 'quarter':
+                return range ? _$('开始季度 ~ 结束季度') : _$('请选择季度');
             default:
                 return range ? _$('开始日期 ~ 结束日期') : _$('请选择日期');
         }
@@ -94,15 +104,6 @@ export class Datepicker<
         return this.value.format();
     }
 
-    @bind
-    protected clear(e: MouseEvent) {
-        super.clear(e);
-        if (this.get('type') === 'datetime') {
-            // reset the state to let user re-select
-            this.panel.reset();
-        }
-    }
-
     @bind
     private setByShortcut(shortcut: Shortcut) {
         const {setValue, convertToDayjs} = this.value;

package/components/datepicker/index.vdt

@@ -5,75 +5,80 @@ import {DatepickerTime} from './time';
 import {Icon} from '../icon';
 import {Button} from '../button';
 import {_$} from '../../i18n';
-import {makePanelStyles} from './styles';
-import {PanelTypes, PanelFlags} from './usePanel';
+import {makeStyles, makePanelStyles, makeHighlightStyles} from './styles';
+import {PanelFlags} from './usePanel';
 import {isFunction} from 'intact-shared';
 import {Tabs, Tab} from '../tabs';
+import {Position} from './useHighlight';
 
-const {className, type, range, multiple, shortcuts} = this.get();
+const { k } = this.config;
+const {className, type, range, multiple, shortcuts, size} = this.get();
 const {
     value: {value},
     onChangeDate,
-    onConfirm,
+    /* onConfirm, */
     onChangeTime,
     onChangeDateForRange,
     getTimeValue,
 } = this.value;
-const { k } = this.config;
+const { onConfirm } = this.confirm;
+const { position, handleInputClick, highlightWidth, highlightLeft } = this.highlight;
+// 判断是否显示双面板
+const showDualPanels = range && type !== 'datetime';
+
 const classNameObj = {
     [`${k}-datepicker-content`]: true,
     [className]: className,
     [makePanelStyles(k)]: true,
 };
-
+const classDatePickerObj = {
+    [`${k}-datepicker`]: true,
+    [makeHighlightStyles(k, size, highlightWidth.value, highlightLeft.value)]: range,
+    [makeStyles(k)]: true,
+}
 const {isDisabledTime, isDisabledConfirm} = this.disabled;
-const {startPanel, endPanel, getPanel, startRef, endRef} = this.panel;
+const {startRef, endRef} = this.panel;
 const generatePanel = (flag) => {
-    const panel = getPanel(flag);
-    const timeValue = getTimeValue(flag);
     return (
-        <div class={`${k}-datepicker-calendar-wrapper`}>
-            {(() => {
-                if (type === 'datetime') {
-                    let dateString = '0000-00-00';
-                    let timeString = '00:00:00';
-                    if (timeValue) {
-                        const valueString = this.formats.getShowString(timeValue).split(/\s+/);
-                        dateString = valueString[0];
-                        timeString = valueString[1];
-                    }
-                    return (
-                        <Tabs type="card"
-                            value={panel.value}
-                            ev-$change:value={panel.set}
-                        >
-                            <Tab value={PanelTypes.Date}>{dateString}</Tab>
-                            <Tab value={PanelTypes.Time} disabled={!timeValue} >{timeString}</Tab>
-                        </Tabs>
-                    );
-                }
-            })()}
+        <div class={`${k}-datepicker-calendar-time-wrapper`}>
             <DatepickerCalendar
-                v-if={panel.value === PanelTypes.Date}
                 value={value}
                 ev-change={onChangeDate}
                 type={type === 'datetime' ? 'date' : type}
                 flag={flag}
                 ref={flag === PanelFlags.Start ? startRef : endRef}
+                highlightPosition={position.value}
             />
-            <DatepickerTime
-                v-else
-                value={timeValue}
-                ev-$change:value={v => onChangeTime(v, flag)}
-                format={this.formats.getValueFormat()}
-                flag={flag}
-                isDisabledTime={isDisabledTime}
-            />
+            <div class={`${k}-datepicker-time-wrapper`} v-if={type === 'datetime'}>{
+                (() => {
+                    let timeValue = getTimeValue(flag);
+                    if (flag === PanelFlags.End && !timeValue) {
+                        timeValue = getTimeValue(PanelFlags.Start);
+                    }
+                    let timeString = '00:00:00';
+
+                    if (timeValue) {
+                        const valueString = this.formats.getShowString(timeValue).split(/\s+/);
+                        timeString = valueString[1];
+                    }
+
+                    return <template>
+                        <div class={`${k}-datepicker-time-time`}>{timeString}</div> 
+                        <DatepickerTime
+                            value={timeValue}
+                            ev-$change:value={v => onChangeTime(v, flag)}
+                            format={this.formats.getValueFormat()}
+                            flag={flag}
+                            isDisabledTime={isDisabledTime}
+                        />
+                    </template>
+                })()
+            }</div> 
         </div>
     );
 };
 
-<t:super class={`${k}-datepicker`}>
+<t:super class={classDatePickerObj} onClick={handleInputClick} alwaysShowOnClick={true}>
     <b:base-menu>
         <DropdownMenu class={classNameObj}>
             <div class={`${k}-datepicker-shortcuts`} v-if={shortcuts && shortcuts.length}>
@@ -87,8 +92,8 @@ const generatePanel = (flag) => {
             </div>
             <div class={`${k}-datepicker-wrapper`}>
                 <div class={`${k}-datepicker-calendars`}>
-                    {generatePanel(PanelFlags.Start)}
-                    {range ? generatePanel(PanelFlags.End) : null}
+                    {generatePanel(!showDualPanels && position.value === Position.End ? PanelFlags.End : PanelFlags.Start)}
+                    {showDualPanels ? generatePanel(PanelFlags.End) :  null}
                 </div>
                 <div v-if={type === 'datetime'} class={`${k}-datepicker-footer`}>
                     <Button type="primary" size="small"

package/components/datepicker/shortcuts.ts

@@ -1,6 +1,6 @@
 import {Children} from 'intact';
 import {_$} from '../../i18n';
-import {Value} from './basepicker';
+import {Value} from './useValueBase';
 
 export type Shortcut = {
     label: (() => Children) | Children 

package/components/datepicker/styles.ts

@@ -3,6 +3,7 @@ import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, sizes, Sizes, getRight, getLeft, palette} from '../../styles/utils';
 import '../../styles/global';
 import { cache } from '../utils';
+import { select } from '../select/styles';
 
 const defaults = {
     width: `300px`,
@@ -11,7 +12,9 @@ const defaults = {
 
     item: {
         gutter: `7px`,
+        yearGutter: '36px',
         height: `24px`,
+        rangeGutter: `17px`,
         get hoverBgColor() { return theme.color.bg },
         get exceedColor() { return theme.color.disabled },
         get todayBorder() { return `1px solid ${theme.color.border}` },
@@ -49,6 +52,19 @@ const defaults = {
         padding: `8px 16px`,
     },
 
+    week: {
+        height: `20px`,
+        width: `40px`,
+        margin: `0 0 0 10px`,
+        padding: `0 2px`,
+        currentWeek: '#eee'
+    },
+    
+    calendarTime: {
+        height: `44px`,
+        fontSize: `14px`,
+    },
+
     shortcuts: {
         width: '100px',
         padding: '12px 0',
@@ -57,7 +73,7 @@ const defaults = {
             height: '32px',
             padding: '0 16px',
         }
-    }
+    },
 };
 
 let datepicker: typeof defaults;
@@ -66,10 +82,21 @@ setDefault(() => {
     makePanelStyles?.clearCache();
     makeCalendarStyles?.clearCache();
     makeTimeStyles?.clearCache();
+    makeHighlightStyles?.clearCache();
 });
 
 export {datepicker};
 
+export const makeStyles = cache((k: string) => {
+    return css`
+        &.${k}-dropdown-open {
+            .${k}-input-inner {
+                color: ${theme.color.placeholder};
+            }
+        }
+    `;
+});
+
 export const makePanelStyles = cache(function makePanelStyles(k: string) {
     return css`
         display: flex;
@@ -103,12 +130,26 @@ export const makePanelStyles = cache(function makePanelStyles(k: string) {
                     width: 50%;
                 }
             }
+
+        }
+        .${k}-datepicker-calendar-time-wrapper {
+            display: flex;
+            .${k}-datepicker-time-time {
+                height: ${datepicker.calendarTime.height};
+                line-height: ${datepicker.calendarTime.height};
+                text-align: center;
+                font-size: ${datepicker.calendarTime.fontSize};
+            }
+            .${k}-datepicker-time-wrapper {
+                overflow: hidden;
+                height: 320px;
+            }
         }
         .${k}-datepicker-footer {
             border-top: ${datepicker.border};
             padding: ${datepicker.footer.padding};
             text-align: right;
-        }
+        } 
     `
 });
 
@@ -207,8 +248,56 @@ export const makeCalendarStyles = cache(function makeCalendarStyles(k: string) {
             grid-template-columns: repeat(7, 1fr);
         }
         .${k}-years {
+            .${k}-calendar-item {
+                height: 20px;
+                width: 40px;
+
+                &.${k}-in-range:after {
+                    width: calc(100% + 14px);
+                    left: calc(-${datepicker.item.yearGutter} / 2);
+                    padding: 0 calc(${datepicker.item.yearGutter} / 2);
+                }
+            }          
+            display: grid;
+            justify-items: center;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 0; 
+        }
+        .${k}-weeks {
             display: grid;
-            grid-template-columns: repeat(4, 1fr);
+            .week-row {
+                display: flex;
+                align-items: center;
+                width: ${datepicker.week.width};
+                margin: ${datepicker.week.margin};
+
+                .${k}-week-number {
+                    padding: ${datepicker.week.padding};
+                    cursor: pointer;
+                }    
+            }
+            .${k}-calendar-item {
+                height: ${datepicker.week.height};
+                &.${k}-today:not(:last-child) .${k}-value {
+                    background: ${datepicker.week.currentWeek};
+                    border: 0;
+                    &:after {
+                        content: '';
+                        display: block;
+                        position: absolute;
+                        box-sizing: content-box;
+                        background: ${datepicker.week.currentWeek};
+                        width: 100%;
+                        height: 100%;
+                        left: 0;
+                        padding: 0 ${datepicker.item.rangeGutter};
+                        z-index: -1; 
+                    }
+                }
+                &.${k}-today:last-child .${k}-value {
+                    border: 0;
+                }
+            }
         }
     `
 });
@@ -221,7 +310,26 @@ export const makeTimeStyles = cache(function makeTimeStyles(k: string) {
         position: relative;
         .${k}-scroll-select {
             flex: 1;
-            height: 305px;
+            height: 265px;
         }
     `;
 });
+
+export const makeHighlightStyles = cache(function makeHighlightStyles(k: string, size: Sizes, highlightWidth: number, highlightLeft: number) {
+    const paddingLeft = getLeft(select[size].padding);
+    return css`
+        &.${k}-dropdown-open {
+            &:before {
+                content: '';
+                display: block;
+                width: ${highlightWidth ? highlightWidth + 'px' :  '50%'};
+                height: 1px;
+                position: absolute;
+                background-color: ${datepicker.item.active.bgColor};
+                left: calc(${paddingLeft} + ${highlightLeft}px);
+                bottom: 0;
+                transition: left ${theme.transition.middle};
+            }
+        }   
+    `;
+});

package/components/datepicker/useConfirm.ts

@@ -0,0 +1,82 @@
+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';
+import type { Datepicker } from '.';
+import { Position, useHighlight } from './useHighlight';
+import { useValue } from './useValue';
+import { StateValueRange, StateValue, DayjsValueRange } from './useValueBase';
+
+export function useConfirm(
+    highlight: ReturnType<typeof useHighlight>,
+    value: ReturnType<typeof useValue>,
+    getValueString: ReturnType<typeof useFormats>['getValueString'],
+) {
+    const instance = useInstance() as Datepicker;
+    let selectionState = [false, false];
+
+    /**
+     * can not use hide event to do it
+     * because value will be reset to dayjsValue on hide in useValue
+     */
+    instance.on('$change:show', (show) => {
+        if (!show) {
+            reset();
+            if (instance.get('range') && hasWholeRangeValue()) {
+                // to fix the order
+                value.updateValue();
+            }
+        }
+    });
+
+    instance.on('selecting', () => {
+        const { type } = instance.get();
+        if (type !== 'datetime') {
+            onConfirm();
+        }
+    });
+
+    function reset() {
+        selectionState = [false, false];
+    }
+
+    function onConfirm() {
+        const { multiple, range } = instance.get();
+        if (range) {
+            const position = highlight.position.value; 
+            selectionState[position] = true;
+
+            if (selectionState.every(state => state)) {
+                if (!multiple) {
+                    instance.hide(); 
+                } else {
+                    // update value directly on multiple mode
+                    reset();
+                    value.unique();
+                    value.updateValue();
+                }
+            }
+
+            highlight.togglePosition();
+        } else {
+            if (!multiple) {
+                instance.hide();
+            } else {
+                value.unique();
+            }
+            value.updateValue();
+        }
+    }
+
+    function hasWholeRangeValue() {
+        const lastValue = last(value.value.value) as StateValueRange;
+        return lastValue && lastValue.length === 2;
+    }
+
+    return { onConfirm }
+}

package/components/datepicker/useDisabled.ts

@@ -1,14 +1,18 @@
 import {useInstance} from 'intact';
 import {useState, State} from '../../hooks/useState';
-import {Dayjs, OpUnitType} from 'dayjs';
+import {Dayjs, OpUnitType, QUnitType} from './dayjs';
 import type {Datepicker} from './index';
 import {isNullOrUndefined} from 'intact-shared';
 import {isGT, isLT, last} from './helpers';
 import type {useFormats} from './useFormats';
-import {PanelFlags, PanelTypes} from './usePanel';
-import {Value} from './basepicker';
+import {PanelFlags} from './usePanel';
+import {Value, StateValueRange, StateValueItem} from './useValueBase';
+import { Position } from './useHighlight';
 
-export function useDisabled({createDateByValueFormat}: ReturnType<typeof useFormats>) {
+export function useDisabled(
+    {createDateByValueFormat}: ReturnType<typeof useFormats>,
+    getHighlightPosition?: () => State<Position>
+) {
     const instance = useInstance() as Datepicker;
     const maxDate = useState<Dayjs | null>(null);
     const minDate = useState<Dayjs | null>(null);
@@ -28,57 +32,51 @@ export function useDisabled({createDateByValueFormat}: ReturnType<typeof useForm
         convertToDayjs(minDate, v);
     });
 
-    function isDisabled(value: Dayjs, type: OpUnitType = 'date') {
+    function isDisabled(value: Dayjs, type: OpUnitType | QUnitType = 'date') {
         const {disabledDate} = instance.get();
         return isGT(value, maxDate.value, type) ||
             isLT(value, minDate.value, type) ||
             !!disabledDate && disabledDate(value);
     }
 
-    function isDisabledTime(value: Dayjs, flag: PanelFlags): boolean {
-        if (!isDisabled(value, 'second')) {
-            if (!instance.get('range')) return false;
-
-            // compare the start and the end datetime 
-            const anotherDatetime = instance.value.getTimeValue(
-                flag === PanelFlags.Start ? PanelFlags.End : PanelFlags.Start
-            );
-            if (!anotherDatetime) return false;
-            if (flag === PanelFlags.Start) {
-                return value.isAfter(anotherDatetime, 'second');
-            } else {
-                return value.isBefore(anotherDatetime, 'second');
-            }
-        }
-        return true;
+    function isDisabledTime(value: Dayjs): boolean {
+        return isDisabled(value, 'second');
     }
 
     function isDisabledConfirm(): boolean {
         const lastValue = last(instance.value.value.value);
-        if (!lastValue) return true;
+        const {range, multiple} = instance.get();
+        if (!lastValue || instance.value.allValuesUpdatedInMultipleMode()) return true;
 
-        const {range} = instance.get();
-        if (range && (lastValue as [Dayjs, Dayjs?]).length < 2) return true;
-
-        const {startPanel, endPanel} = instance.panel;
-        if (startPanel.value === PanelTypes.Date && endPanel.value === PanelTypes.Date) {
-            return true;
+        if (range && getHighlightPosition) {
+            const position = getHighlightPosition();
+            // if the position is not selected, it should be disabled
+            if (!(lastValue as StateValueRange)[position.value]) {
+                return true;
+            }
         }
 
+        return isDisabledValue(lastValue);
+    }
+
+    function isDisabledValue(value: StateValueItem): boolean {
+        const { range } = instance.get();
         let start: Dayjs;
         let end: Dayjs | undefined;
+
         if (range) {
-            start = (lastValue as [Dayjs, Dayjs])[0];
-            end = (lastValue as [Dayjs, Dayjs])[1];
+            start = (value as [Dayjs, Dayjs])[0];
+            end = (value as [Dayjs, Dayjs])[1];
         } else {
-            start = lastValue as Dayjs;
+            start = value as Dayjs;
         }
-        if (isDisabledTime(start, PanelFlags.Start) || end && isDisabledTime(end, PanelFlags.End)) {
+
+        if (isDisabledTime(start) || end && isDisabledTime(end)) {
             return true;
         }
 
         return false;
     }
 
-    return {isDisabled, isDisabledTime, isDisabledConfirm, maxDate, minDate};
+    return {isDisabled, isDisabledTime, isDisabledConfirm, isDisabledValue, maxDate, minDate};
 }

package/components/datepicker/useFormats.ts

@@ -1,14 +1,16 @@
 import {useInstance} from 'intact';
-import dayjs, {Dayjs} from './dayjs';
+import dayjs, {Dayjs} from 'dayjs';
 import {isString} from 'intact-shared';
 import type {Datepicker} from './index';
-import {Value} from './basepicker';
+import type {Value} from './useValueBase';
 
 const FORMATS = {
     date: 'YYYY-MM-DD',
     datetime: 'YYYY-MM-DD HH:mm:ss',
     year: 'YYYY',
     month: 'YYYY-MM',
+    quarter: 'YYYY-[Q]Q',
+    week: 'YYYY-w[周]',
 };
 
 export function useFormats() {
@@ -23,9 +25,13 @@ export function useFormats() {
         const {format, showFormat, type} = instance.get();
         return showFormat || format || FORMATS[type!];
     }
-
+    
+    /**
+     * 根据日期字符串，按照格式创建日期对象
+     */
     function createDateByValueFormat(value: Value) {
-        return dayjs(value, isString(value) ? getValueFormat() : undefined);
+        const format = isString(value) ? getValueFormat() : undefined;
+        return dayjs(value, format);
     }
 
     function createDateByShowFormat(value: string) {