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

package/components/datepicker/useDisabled.ts

@@ -1,6 +1,6 @@
 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';
@@ -28,7 +28,7 @@ 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) ||
@@ -58,7 +58,7 @@ export function useDisabled({createDateByValueFormat}: ReturnType<typeof useForm
         if (!lastValue) return true;
 
         const {range} = instance.get();
-        if (range && (lastValue as [Dayjs, Dayjs?]).length < 2) return true;
+        if (range && (lastValue as [Dayjs, Dayjs?]).length === 1) return false;
 
         const {startPanel, endPanel} = instance.panel;
         if (startPanel.value === PanelTypes.Date && endPanel.value === PanelTypes.Date) {

package/components/datepicker/useFormats.ts

@@ -9,6 +9,8 @@ const FORMATS = {
     datetime: 'YYYY-MM-DD HH:mm:ss',
     year: 'YYYY',
     month: 'YYYY-MM',
+    quarter: 'YYYY-[Q]Q',
+    week: 'YYYY-w[周]',
 };
 
 export function useFormats() {

package/components/datepicker/useMergeRange.ts

@@ -0,0 +1,54 @@
+import {useInstance} from 'intact';
+import {Dayjs} from './dayjs';
+import type {Datepicker} from './index';
+import {DayjsValueRange, DayjsValue} from './basepicker';
+import type {useFormats} from './useFormats';
+
+
+export function useMergeRange(formats: ReturnType<typeof useFormats>) {
+    const instance = useInstance() as Datepicker;
+
+    function _mergeRanges(dayjsValue: DayjsValue, getShowString: (value: Dayjs) => string) {
+        const ranges = dayjsValue
+            .filter(Array.isArray)
+            .map(range => ({
+                start: (range as DayjsValueRange)[0],
+                end: (range as DayjsValueRange)[1]
+            }))
+            .sort((a, b) => a.start.valueOf() - b.start.valueOf());
+        
+        if (ranges.length === 0) return [];
+        
+        // 合并有交集的时间范围
+        const mergedRange = ranges.reduce((acc, curr) => {
+            if (!acc) return curr;
+            
+            return {
+                start: acc.start,
+                end: curr.end.valueOf() > acc.end.valueOf() ? curr.end : acc.end
+            };
+        });
+        
+        return [`${getShowString(mergedRange.start)} ~ ${getShowString(mergedRange.end)}`];
+    }
+
+    function formatMultipleValues(dayjsValue: DayjsValue, results: string[]): string[] {
+        const {isMerge, nowrap} = instance.get();
+        
+        if (isMerge && nowrap) {
+            const mergedResults = _mergeRanges(dayjsValue, (v: Dayjs) => v.format(formats.getShowFormat()));
+            if (mergedResults.length > 0) {
+                return [
+                    ...mergedResults,
+                    ...results.slice(1).map((result, index) => `${result}-${index}`)
+                ];
+            }
+        }
+        
+        return results;
+    }
+
+    return {
+        formatMultipleValues
+    };
+}

package/components/datepicker/usePosition.ts

@@ -0,0 +1,169 @@
+import {useInstance} from 'intact';
+import type {Datepicker} from './';
+import { useState } from '../../hooks/useState';
+import {last} from '../utils';
+
+export function usePosition() {
+    const instance = useInstance() as Datepicker;
+    const position = useState<'start' | 'end'>('start');
+    
+    // 根据类型获取默认字符长度
+    function getDefaultCharLength() {
+        const {type} = instance.get();
+        switch (type) {
+            case 'datetime':
+                return 16 ; // "2025-07-10 00:00:00" 
+            case 'date':
+                return 10; // "2025-07-09" 
+            default:
+                return 10;
+        }
+    }
+    
+    const charLength = useState<number>(getDefaultCharLength()); // 当前活动部分的字符长度
+    const startTextLength = useState<number>(getDefaultCharLength()); // 开始文本的长度，用于计算结束文本位置
+    
+    // 监听类型变化，更新默认字符长度
+    instance.watch('type', () => {
+        const defaultLength = getDefaultCharLength();
+        charLength.set(defaultLength);
+        startTextLength.set(defaultLength);
+    }); 
+
+    function handleInputClick(e: MouseEvent) {  
+        const { range, type } = instance.get();
+     
+
+        if (!range) {
+            return; 
+        } 
+        // 对于日期时间范围选择器，如果当前没有值或值不完整，总是设置为开始时间
+        if (type === 'datetime') {
+            const currentValue = instance.value.value.value;
+            const lastValue = last(currentValue);
+            // 如果没有值或者当前范围值不完整（只有开始时间没有结束时间），强制设置为开始时间
+            if (!lastValue || !Array.isArray(lastValue) || lastValue.length < 2 || !lastValue[1]) {
+                position.set('start');
+                return;
+            }
+        } 
+          
+        // 获取事件目标元素  
+        let target = e.currentTarget as HTMLElement;  
+        // 如果目标元素不是 .k-select-main，则查找父元素  
+        if (!target.classList.contains(`.k-select-main`)) {  
+            target = target.closest(`.k-select-main`) as HTMLElement;  
+            if (!target) return;  
+        }
+
+        const hiddenInput = target.querySelector('input[type="hidden"]') as HTMLInputElement;
+        const { width: totalVisualWidth } = target.getBoundingClientRect();  
+        let midPoint;
+        if (hiddenInput && hiddenInput.value && hiddenInput.value.includes(',')) {
+            // 分割字符串获取开始和结束日期的文本
+            const [startText, endText] = hiddenInput.value.split(',');
+            // 确保两部分都存在，避免计算错误
+            if (startText && endText) {
+                const totalCharLength = startText.length + endText.length;
+                // 计算开始日期文本长度所占的比例
+                const startRatio = startText.length / totalCharLength;
+                   
+                // 估算每个字符的宽度（与样式中保持一致）
+                const charWidthPx = 8;
+                
+                // 计算实际文本占用的宽度
+                const startTextWidth = startText.length * charWidthPx;
+                const endTextWidth = endText.length * charWidthPx;
+                const separatorWidth = 3 * charWidthPx; // " ~ " 大约3个字符宽度
+                const totalTextWidth = startTextWidth + separatorWidth + endTextWidth;
+                
+                // 如果文本宽度超过input宽度，使用比例分割
+                if (totalTextWidth >= totalVisualWidth) {
+                    midPoint = totalVisualWidth * startRatio;
+                } else {
+                    // 如果文本宽度小于input宽度，使用实际文本宽度计算分割点
+                    midPoint = startTextWidth + separatorWidth / 2;
+                }
+                
+                // 更新开始文本长度状态，限制为默认长度以保证结束时间高亮位置正确
+                startTextLength.set(Math.min(startText.length, getDefaultCharLength()));
+                
+            } else {
+                // 如果值格式不正确（例如 "2025-07-09,"），则退回使用几何中心点
+                const defaultLength = getDefaultCharLength();
+                charLength.set(defaultLength);
+                startTextLength.set(defaultLength);
+                midPoint = totalVisualWidth / 2;
+            }
+        } else {
+            // 如果没有找到 hiddenInput 或其值不是范围，则退回原始的几何中心点
+            const defaultLength = getDefaultCharLength();
+            charLength.set(defaultLength);
+            startTextLength.set(defaultLength);
+            midPoint = totalVisualWidth / 2;
+        }  
+          
+        // 计算相对于 target 的 offsetX  
+        const rect = target.getBoundingClientRect();  
+        const offsetX = e.clientX - rect.left;  
+        // 根据点击位置判断是点击了左半边（开始）还是右半边（结束）
+        if (offsetX < midPoint) {
+            position.set('start');
+            // 更新为开始部分的字符长度，限制为默认长度
+            if (hiddenInput && hiddenInput.value && hiddenInput.value.includes(',')) {
+                const [startText] = hiddenInput.value.split(',');
+                charLength.set(Math.min(startText.length, getDefaultCharLength()));
+            }
+        } else {
+            position.set('end');
+            // 更新为结束部分的字符长度，限制为默认长度
+            if (hiddenInput && hiddenInput.value && hiddenInput.value.includes(',')) {
+                const [, endText] = hiddenInput.value.split(',');
+                charLength.set(Math.min(endText.length, getDefaultCharLength()));
+            }
+        }  
+    }
+
+    // 重置位置到指定值
+    function resetPosition(pos: 'start' | 'end' = 'start') {
+        if (position.value === pos) {
+            return;
+        }
+        position.set(pos);
+    }
+
+    // 切换位置
+    function togglePosition() {
+        const currentPosition = position.value;
+        if (currentPosition === 'start') {
+            position.set('end');
+        } else {
+            position.set('start');
+        }
+    }
+
+    // 在组件初始化时设置事件监听
+    function setupEventListeners() {
+        // instance.on('resetPosition', resetPosition);
+        instance.on('togglePosition', togglePosition);
+    
+    }
+
+    function resetToStart() {
+        const {range, type} = instance.get();
+        if (range && type === 'date') {
+            position.set('start');
+        }
+    }
+
+    return {
+        position,
+        charLength,
+        startTextLength,
+        handleInputClick,
+        resetPosition,
+        togglePosition,
+        setupEventListeners,
+        resetToStart
+    };
+}

package/components/datepicker/useQuarters.ts

@@ -0,0 +1,47 @@
+import {useInstance} from 'intact';
+import dayjs, {Dayjs} from 'dayjs';
+import {isEqual} from './helpers';
+import type {DatepickerCalendar} from './calendar';
+import {State} from '../../hooks/useState';
+import {_$} from '../../i18n';
+import type {useStatus} from './useStatus';
+
+export function useQuarters(
+    showDate: State<Dayjs>,
+    status: ReturnType<typeof useStatus>,
+    focusDate: State<Dayjs | null>
+) {
+    const instance = useInstance() as DatepickerCalendar;
+
+    function getQuarters(now: Dayjs) {  
+        const ret = [];  
+        const year = showDate.value.year();  
+  
+        for (let i = 1; i <= 4; i++) {  
+            const quarterStart = dayjs().year(year).quarter(i).startOf('quarter');  
+  
+            ret.push({  
+                isActive: status.isActive(quarterStart, 'quarter'),  
+                isToday: now.isSame(quarterStart, 'quarter'),  
+                isDisabled: status.isDisabled(quarterStart),  
+                isHover: isEqual(quarterStart, focusDate.value, 'quarter'),  
+                isInRange: status.isInRange(quarterStart, 'quarter'),  
+                label: _$(`Q${i}`),  
+                value: quarterStart,  
+            });  
+        }  
+  
+        return ret;  
+    } 
+
+    function onClick(date: Dayjs) {
+        const quarterStart = date.startOf('quarter');
+        showDate.set(quarterStart);
+        const datepickerType = instance.datepicker.get('type');  
+        if (datepickerType === 'quarter') {  
+            instance.triggerChange(quarterStart);  
+        }  
+    }
+
+    return {getQuarters, onClick};
+}

package/components/datepicker/useShowDate.ts

@@ -77,6 +77,12 @@ export function useShowDate(panel: ReturnType<typeof usePanel>) {
             case 'month':
                 return date.add(isEnd ? 1 : -1, 'year');
                 break;
+            case 'week':
+                return date.add(isEnd ? 1 : -1, 'week');
+                break;
+            case 'quarter':
+                return date.add(isEnd ? 1 : -1, 'quarter');
+                break;
             default:
                 return date.add(isEnd ? 1 : -1, 'month');
                 break;
@@ -84,22 +90,47 @@ export function useShowDate(panel: ReturnType<typeof usePanel>) {
     }
 
     function getDateLabel() {
-        const map = {
-            MM: _$(`${showDate.value.get('month') + 1}月`),
-            YYYY: _$(`{n}年`, {n: showDate.value.get('year')}),
+        const year = showDate.value.get('year');
+        const month = showDate.value.get('month') + 1;
+
+        const map: { [key: string]: string } = {
+            'MM': _$(`${month}月`),                // 月标签
+            'YYYY': _$(`{n}年`, {n: year}),       // 年标签
+            'YYYY MM': _$(`{n}年{y}月`, {n: year, y: month})  // 年月组合标签
         };
 
-        let yearMonthFormat = _$('yearMonthFormat');
-        if (yearMonthFormat === 'yearMonthFormat') {
-            yearMonthFormat = 'YYYY MM';
+        let format;
+        switch (type) {
+            case 'week':
+                format = ['YYYY MM'];  // week 类型显示年月组合
+                break;
+            case 'quarter':
+                format = ['YYYY'];     // quarter 类型仅显示年
+                break;
+            default:
+                let yearMonthFormat = _$('yearMonthFormat');
+                if (yearMonthFormat === 'yearMonthFormat') {
+                    yearMonthFormat = 'YYYY MM';  // 默认格式
+                }
+                format = yearMonthFormat.split(' ');  // 其他类型按配置拆分
+                break;
         }
-        const format = yearMonthFormat.split(' ') as (keyof typeof map)[];
 
-        return format.map(item => ({
-            value: map[item],
-            onClick(e: IgnoreClickEvent) {
+         // 根据 type 动态调整显示的格式
+         return format.map(item => ({
+            value: map[item],  // 根据 format 项目生成标签
+            onClick: (e: IgnoreClickEvent) => {
                 e._ignore = true;
-                instance.type.set(item === 'YYYY' ? 'year' : 'month');
+                // 根据点击的项设置不同的 type
+                if (item === 'YYYY MM') {
+                    instance.type.set('week');      // 点击年月组合，保持 week
+                } else if (item === 'YYYY') {
+                    instance.type.set(type === 'quarter' ? 'quarter' : 'year');  // 根据当前 type 决定
+                } else if (item === 'MM') {
+                    instance.type.set('month');     // 点击月，切换到 month
+                } else {
+                    instance.type.set('date');      // 默认切换到 date
+                }
             }
         }));
     }

package/components/datepicker/useValue.ts

@@ -51,8 +51,8 @@ export function useValue(
 
     function onChangeDate(v: Dayjs, flag: PanelFlags) {
         const {multiple, type, range} = instance.get();
+        const activePosition = instance.activePosition.position.value;
         let _value: StateValueItem;
-
         if (range) {
             const oldValue = last(value.value as StateValueRange[]);
             if (!oldValue || oldValue.length === 2) {
@@ -62,10 +62,33 @@ export function useValue(
                  * #877
                  */
                 flag = PanelFlags.Start;
-                _value = [fixDatetimeWithMinDate(v)];
+                if((type === 'datetime' || type === 'date') && oldValue?.length === 2) {  
+                    // Use activePosition instead of Coordinate  
+                    _value = activePosition === 'end' ?   
+                        [oldValue[0], fixDatetimeWithMinDate(v)] :  multiple ? 
+                        [fixDatetimeWithMinDate(v)] : 
+                        [fixDatetimeWithMinDate(v), oldValue[1]]; 
+                } else {  
+                    _value = [fixDatetimeWithMinDate(v)];  
+                }
             } else {
-                _value = [oldValue[0], fixDatetimeWithMaxDate(v)];
-                (_value as DayjsValueRange).sort((a, b) => a.isAfter(b) ? 1 : -1);
+                if (type === 'datetime') {
+                    if (oldValue.length === 1) {
+                        // 如果只有开始日期，根据activePosition决定是替换开始日期还是设置结束日期
+                        _value = activePosition === 'end' ?
+                            [oldValue[0], fixDatetimeWithMaxDate(v)] :
+                            [fixDatetimeWithMaxDate(v)];
+                    } else {
+                        // oldValue.length === 2的情况
+                        _value = activePosition === 'end' ?
+                            [oldValue[0], fixDatetimeWithMaxDate(v)] : multiple ?
+                            [fixDatetimeWithMaxDate(v)] :
+                            [fixDatetimeWithMaxDate(v), oldValue[1]];
+                    }
+                } else {
+                    _value = [oldValue[0], fixDatetimeWithMaxDate(v)];
+                }
+                (_value as DayjsValueRange).sort((a, b) => a.isAfter(b) ? 1 : -1);  
             }
             instance.trigger('selecting', _value);
         } else {
@@ -84,6 +107,14 @@ export function useValue(
             } else {
                 panel.changePanel(PanelTypes.Time, flag);
             }
+        }  else if(type === 'week') {
+            _value = v.startOf('week')
+            setValue(_value, false);
+            instance.hide();
+        } else if(type === 'quarter') {
+            _value = v.startOf('quarter');
+            setValue(_value, false);
+            instance.hide();
         } else if (!multiple && (!range || (_value as StateValueRange).length === 2)) {
             instance.hide();
         }

package/components/datepicker/useWeeks.ts

@@ -0,0 +1,58 @@
+import {useInstance} from 'intact';
+import dayjs, {Dayjs} from 'dayjs';
+import {isEqual, clearTime} from './helpers';
+import type {DatepickerCalendar} from './calendar';
+import {State} from '../../hooks/useState';
+import {_$} from '../../i18n';
+import type {useStatus} from './useStatus';
+
+export function useWeeks(  
+    showDate: State<Dayjs>,  
+    status: ReturnType<typeof useStatus>,  
+    focusDate: State<Dayjs | null>  
+) {  
+    const instance = useInstance() as DatepickerCalendar;  
+  
+    function getWeeks(now: Dayjs) {  
+        const weeks = [];  
+        // 从当前显示月份的月初开始，并调整到该周的开始  
+        const startOfMonth = showDate.value.startOf('month');  
+        const start = startOfMonth.startOf('week');   
+        let current = start;  
+        const currentMonth = showDate.value.month();  
+  
+        // 遍历6周，以覆盖整个月份  
+        for (let weekIndex = 0; weekIndex < 6; weekIndex++)  {  
+            const weekNumber = current.week(); // 获取当前周的周数  
+            const days = [];  
+  
+            // 遍历一周的7天  
+            for (let i = 0; i < 7; i++) {  
+                const day = current.add(i, 'day');  
+                const isFirstOrLastDay = i === 0 || i === 6;
+                days.push({  
+                    isExceed: day.month() !== currentMonth,
+                    label: day.date(),
+                    value: day,
+                    isActive:isFirstOrLastDay && status.isActive(day, 'week'),
+                    isToday: day.isSame(now, 'week'),
+                    isDisabled: status.isDisabled(day),
+                    isHover: day.isSame(focusDate.value, 'week'),
+                    isInRange: !isFirstOrLastDay && status.isActive(day, 'week') 
+                });  
+            }  
+            // 每周的数据，包括周数和7天的信息  
+            weeks.push({week: weekNumber, days});   
+            current = current.add(1, 'week'); // 移动到下一周的开始  
+        }  
+        return weeks;  
+    }  
+  
+    function onClick(day: Dayjs) {  
+        const weekStart = day.startOf('week');  
+        showDate.set(weekStart); // 设置显示日期为周的开始  
+        instance.triggerChange(weekStart); // 触发日期改变事件  
+    }  
+  
+    return { getWeeks, onClick };  
+}

package/components/dialog/useFixBody.ts

@@ -1,7 +1,6 @@
-import {useInstance, RefObject, onBeforeUnmount} from 'intact';
+import {useInstance, RefObject} from 'intact';
 import type {BaseDialog} from './base';
-import {position} from '../position';
-import {scrollbarWidth} from '../position';
+import {useFixBody as useFixBodyHook, setHooks as setFixBodyHooks} from '../../hooks/useFixBody';
 import {SHOW} from './constants';
 
 type Hooks = {
@@ -9,81 +8,25 @@ type Hooks = {
     onEnd?: () => void
 }
 
-const dialogs = new Set<BaseDialog>();
-let originalStyle: string | null = null;
-let hooks: Hooks | null = null; 
-
 export function useFixBody(elementRef: RefObject<HTMLDivElement>) {
     const instance = useInstance() as BaseDialog;
-    let fixedBody = false;
+    
+    const fixBodyHook = useFixBodyHook();
 
     instance.on(SHOW, onEnter);
     instance.on('afterClose', onAfterLeave);
-    
-    onBeforeUnmount(() => {
-        // should also remove body style when dialog is removed, #805
-        // if (fixedBody && instance.get('value')) {
-        if (fixedBody) {
-            // maybe HIDE event has not triggered
-            onClosed(instance);
-        }
-    });
 
     function onEnter() {
         if (instance.get('overlay')) {
-            fixedBody = true;
-            onOpen(instance);
+            fixBodyHook.onOpen();
         }
     }
 
     function onAfterLeave() {
-        if (fixedBody) {
-            fixedBody = false;
-            onClosed(instance);
-        }
+        fixBodyHook.onClose();
     }
 }
 
 export function setHooks(h: Hooks | null) {
-    hooks = h;
-}
-
-function onOpen(dialog: BaseDialog) {
-    const body = document.body;
-    if (dialogs.size === 0) {
-        const bodyStyle = body.style;
-        originalStyle = body.getAttribute('style');
-        bodyStyle.overflow = 'hidden';
-
-        const scrollBarWidth = shouldFixBody();
-        if (scrollBarWidth) {
-            bodyStyle.paddingRight = `${scrollBarWidth}px`;
-        }
-        if (hooks && hooks.onStart) {
-            hooks.onStart(scrollBarWidth);
-        }
-    }
-    dialogs.add(dialog);
-}
-
-function onClosed(dialog: BaseDialog) {
-    const body = document.body;
-    dialogs.delete(dialog);
-    if (dialogs.size === 0) {
-        if (originalStyle) {
-            // console.log(originalStyle);
-            body.setAttribute('style', originalStyle);
-        } else {
-            body.removeAttribute('style');
-        }
-        if (hooks && hooks.onEnd) {
-            hooks.onEnd();
-        }
-    }
-}
-
-function shouldFixBody() {
-    if (document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight)) {
-        return scrollbarWidth();
-    }
+    setFixBodyHooks(h);
 }

package/components/ellipsis/styles.ts

@@ -16,6 +16,10 @@ export const makeStyles = cache(function makeStyles(k: string, maxLines: number)
                 display: -webkit-box;
                 -webkit-line-clamp: ${maxLines};
                 -webkit-box-orient: vertical;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                line-clamp: ${maxLines};
+                box-orient: vertical;
             }
         }
     `;

package/components/form/styles.ts

@@ -50,6 +50,7 @@ export const makeItemStyles = cache(function makeItemStyles(k: string) {
         }
         &.${k}-fluid > .${k}-form-content {
             flex: 1;
+            min-width: 0;
         }
         .${k}-form-label {
             display: flex;

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