@_tc/template-core 0.0.1-bate.35 → 0.0.1-bate.37

package/fe/packages/ui/react/components/Date/Date.js

@@ -1,17 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
-import { format as formatDate, isValid, parse } from 'date-fns';
-import { Calendar as CalendarIcon, X } from 'lucide-react';
-import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import { Calendar } from './Calendar';
-import { ModeType } from './data';
-import { useDateLocale } from './LocaleContext';
+import { cn } from "../../lib/utils";
+import { format as formatDate, isValid, parse } from "date-fns";
+import { Calendar as CalendarIcon, X } from "lucide-react";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "../Button";
+import { Input } from "../Input";
+import { Popup } from "../Popup";
+import { useDropdownPositioning } from "../hooks/useDropdownPositioning";
+import { Calendar } from "./Calendar";
+import { ModeType } from "./data";
+import { getDatePickerDropdownPosition } from "./dropdownPositioning";
+import { useDateLocale } from "./LocaleContext";
 const formatValue = (val, format) => {
     if (!val)
-        return '';
+        return "";
     if (val instanceof Date)
         return formatDate(val, format);
-    if ('from' in val) {
+    if ("from" in val) {
         if (val.from && val.to) {
             return `${formatDate(val.from, format)} - ${formatDate(val.to, format)}`;
         }
@@ -19,27 +24,25 @@ const formatValue = (val, format) => {
             return formatDate(val.from, format);
         }
     }
-    return '';
+    return "";
 };
 const formatDateValue = (val, format) => {
     if (!val)
-        return '';
-    /**
-     * 将 DateBaseValue  转为  yyyy-MM-dd | [yyyy-MM-dd, yyyy-MM-dd]
-     */
+        return "";
     if (val instanceof Date)
         return formatDate(val, format);
-    if ('from' in val) {
+    if ("from" in val) {
         if (val.from && val.to) {
             return [formatDate(val.from, format), formatDate(val.to, format)];
         }
     }
-    return '';
+    return "";
 };
-const DatePicker = forwardRef(({ mode = ModeType.Single, className, format: customFormat, placeholder, allowClear = true, disabled = false, showTime = false, value: pValue, defaultValue: pDefaultValue, onChange, disabledDate, locale: customLocale, quickRanges, }, ref) => {
+const DatePicker = forwardRef((props, ref) => {
+    const { mode = ModeType.Single, className, format: customFormat, placeholder, allowClear = true, disabled = false, showTime = false, value: pValue, defaultValue: pDefaultValue, onChange, disabledDate, locale: customLocale, quickRanges, getPopupContainer, } = props;
+    const isControlled = Object.prototype.hasOwnProperty.call(props, "value");
     const contextLocale = useDateLocale();
     const locale = { ...contextLocale, ...customLocale };
-    // 如果没有传入 placeholder，根据模式自动选择
     const finalPlaceholder = placeholder ||
         (showTime
             ? mode === ModeType.Range
@@ -48,23 +51,16 @@ const DatePicker = forwardRef(({ mode = ModeType.Single, className, format: cust
             : mode === ModeType.Range
                 ? locale.placeholderRange
                 : locale.placeholder);
-    // Auto-adjust format based on showTime
-    const format = customFormat || (showTime ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd');
+    const format = customFormat || (showTime ? "yyyy-MM-dd HH:mm" : "yyyy-MM-dd");
     const { value, defaultValue } = useMemo(() => {
-        /**
-         * 将 DateChangeStrValue 转为 Dates
-         */
         const convertValue = (val) => {
             if (!val)
                 return undefined;
-            // Already a Date object
             if (val instanceof Date)
                 return val;
-            // Already a DateRange object
-            if (typeof val === 'object' && 'from' in val)
+            if (typeof val === "object" && "from" in val)
                 return val;
-            // String value - single date
-            if (typeof val === 'string') {
+            if (typeof val === "string") {
                 try {
                     const parsed = parse(val, format, new Date());
                     return isValid(parsed) ? parsed : undefined;
@@ -73,10 +69,8 @@ const DatePicker = forwardRef(({ mode = ModeType.Single, className, format: cust
                     return undefined;
                 }
             }
-            // date range
             if (Array.isArray(val)) {
-                // string
-                if (typeof val[0] === 'string' && typeof val[1] === 'string') {
+                if (typeof val[0] === "string" && typeof val[1] === "string") {
                     try {
                         const from = parse(val[0], format, new Date());
                         const to = parse(val[1], format, new Date());
@@ -97,60 +91,63 @@ const DatePicker = forwardRef(({ mode = ModeType.Single, className, format: cust
             defaultValue: convertValue(pDefaultValue),
         };
     }, [pDefaultValue, pValue, format]);
-    const [selectedDate, setSelectedDate] = useState(value || defaultValue);
+    const initialValue = isControlled ? value : (value || defaultValue);
+    const [selectedDate, setSelectedDate] = useState(initialValue);
     const [isOpen, setIsOpen] = useState(false);
-    const [inputValue, setInputValue] = useState(formatValue(value || defaultValue, format));
+    const [inputValue, setInputValue] = useState(formatValue(initialValue, format));
     const [isHover, setIsHover] = useState(false);
     const containerRef = useRef(null);
+    const dropdownContentRef = useRef(null);
     const inputRef = useRef(null);
-    // 同步外部 value 变化
+    const rangeDraftRef = useRef(false);
+    const positioning = useDropdownPositioning({
+        open: isOpen,
+        anchorRef: containerRef,
+        contentRef: dropdownContentRef,
+        placement: "bottom-start",
+        offset: 8,
+        matchAnchorWidth: false,
+        strategy: getDatePickerDropdownPosition,
+    });
     useEffect(() => {
-        if (value !== undefined) {
-            // eslint-disable-next-line react-hooks/set-state-in-effect
-            setSelectedDate(value);
-            setInputValue(formatValue(value, format));
+        if (!isControlled)
+            return;
+        if (mode === ModeType.Range && rangeDraftRef.current && value === undefined) {
+            return;
         }
-    }, [value, format]);
-    // 点击外部关闭
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (containerRef.current && !containerRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
-            return () => document.removeEventListener('mousedown', handleClickOutside);
-        }
-        else {
-            return () => { };
+        setSelectedDate(value);
+        setInputValue(formatValue(value, format));
+        if (mode !== ModeType.Range || !value || !('from' in value) || value.to) {
+            rangeDraftRef.current = false;
         }
-    }, [isOpen]);
+    }, [isControlled, mode, value, format]);
     const handleSelect = (date) => {
         const newDate = date;
         if (mode === ModeType.Range) {
-            // 如果是范围选择，只有当 from 和 to 都存在时才关闭
-            if (date && 'from' in date && 'to' in date && date.from && date.to) {
+            if (date && "from" in date && "to" in date && date.from && date.to) {
                 setIsOpen(false);
             }
         }
         else {
-            // Single mode: always close popup when onChange is triggered
-            // (In showTime mode, this only happens when user clicks confirm button)
             setIsOpen(false);
         }
-        setSelectedDate(newDate);
-        setInputValue(formatValue(newDate, format));
-        // 只在非受控模式下更新内部状态
-        if (value === undefined) {
+        if (mode === ModeType.Range || !isControlled) {
             setSelectedDate(newDate);
+            setInputValue(formatValue(newDate, format));
         }
+        rangeDraftRef.current =
+            mode === ModeType.Range && !(newDate &&
+                typeof newDate === 'object' &&
+                'from' in newDate &&
+                newDate.from &&
+                newDate.to);
         onChange?.(formatDateValue(newDate, format), newDate);
     };
     const handleClear = (e) => {
         e.stopPropagation();
+        rangeDraftRef.current = false;
         setSelectedDate(undefined);
-        setInputValue('');
+        setInputValue("");
         onChange?.(undefined, undefined);
         inputRef.current?.focus();
     };
@@ -161,18 +158,25 @@ const DatePicker = forwardRef(({ mode = ModeType.Single, className, format: cust
             try {
                 const parsedDate = parse(newValue, format, new Date());
                 if (isValid(parsedDate)) {
-                    if (value === undefined)
+                    if (!isControlled)
                         setSelectedDate(parsedDate);
                     onChange?.(formatDateValue(parsedDate, format), parsedDate);
                 }
             }
             catch {
-                // ignore invalid date
             }
         }
     };
     const showClearIcon = allowClear && selectedDate && !disabled && isHover;
-    return (_jsx("div", { ref: ref, className: cn('relative w-full', mode === ModeType.Range ? 'min-w-[255px]' : '', className), children: _jsxs("div", { ref: containerRef, className: "relative", children: [_jsxs("div", { className: cn('flex items-center w-full rounded-lg px-4 py-3 text-sm', 'border transition-colors duration-200', 'bg-background cursor-pointer', disabled && 'cursor-not-allowed bg-muted border-border text-muted-foreground', !disabled && !selectedDate && !isOpen && 'border-border', !disabled && (selectedDate || isOpen) && 'border-theme'), onClick: () => !disabled && setIsOpen(!isOpen), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: [_jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: finalPlaceholder, disabled: disabled, readOnly: mode === ModeType.Range, className: cn('flex-1 bg-transparent border-0 outline-none', 'text-sm text-foreground placeholder:text-muted-foreground', disabled && 'cursor-not-allowed', mode === ModeType.Range && !disabled && 'cursor-pointer caret-transparent') }), showClearIcon ? (_jsx("button", { type: "button", onClick: handleClear, title: locale.clear, "aria-label": locale.clear, className: cn('ml-2 flex items-center justify-center', 'w-5 h-5 rounded-full', 'bg-muted hover:bg-muted/80', 'text-foreground transition-colors'), children: _jsx(X, { size: 12 }) })) : (_jsx(CalendarIcon, { size: 16, className: "ml-2 text-muted-foreground" }))] }), isOpen && !disabled && (_jsx("div", { className: cn('absolute z-50 mt-2', 'bg-background border border-border rounded-lg shadow-lg', 'overflow-hidden'), children: _jsx(Calendar, { mode: mode, value: selectedDate || null, onChange: handleSelect, disabledDate: disabledDate, showTime: showTime, locale: locale, quickRanges: quickRanges }) }))] }) }));
+    return (_jsx("div", { ref: ref, className: cn("tc-ui-date-picker relative w-full", mode === ModeType.Range ? "min-w-[255px]" : "", className), children: _jsxs("div", { ref: containerRef, className: "relative", children: [_jsxs("div", { className: cn("flex items-center w-full rounded-lg px-4 py-3 text-sm", "border transition-colors duration-200", "bg-background cursor-pointer", disabled &&
+                        "cursor-not-allowed bg-muted border-border text-muted-foreground", !disabled && !selectedDate && !isOpen && "border-border", !disabled && (selectedDate || isOpen) && "border-theme"), onClick: () => !disabled && setIsOpen(!isOpen), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: [_jsx(Input, { ref: inputRef, type: "text", value: inputValue, onChange: (_, e) => handleInputChange(e), placeholder: finalPlaceholder, disabled: disabled, readOnly: mode === ModeType.Range, className: "flex-1", inputClassName: cn("flex-1 rounded-none border-0 bg-transparent px-0 py-0 outline-none", "text-sm text-foreground placeholder:text-muted-foreground", disabled && "cursor-not-allowed", mode === ModeType.Range &&
+                                !disabled &&
+                                "cursor-pointer caret-transparent") }), showClearIcon ? (_jsx(Button, { variant: "text", type: "button", onClick: handleClear, title: locale.clear, "aria-label": locale.clear, className: cn("ml-2 flex items-center justify-center", "w-5 h-5 rounded-full", "bg-muted hover:bg-muted/80", "text-foreground transition-colors", "cursor-pointer"), children: _jsx(X, { size: 12 }) })) : (_jsx(CalendarIcon, { size: 16, className: "ml-2 text-muted-foreground" }))] }), _jsx(Popup, { open: isOpen && !disabled, anchorRef: containerRef, contentRef: dropdownContentRef, positioning: positioning, keepMounted: true, onOpenChange: (nextOpen) => {
+                        setIsOpen(nextOpen);
+                        if (!nextOpen) {
+                            rangeDraftRef.current = false;
+                        }
+                    }, className: cn("overflow-hidden"), container: getPopupContainer?.(), children: _jsx("div", { ref: dropdownContentRef, children: _jsx(Calendar, { mode: mode, value: selectedDate || null, onChange: handleSelect, disabledDate: disabledDate, showTime: showTime, locale: locale, quickRanges: quickRanges }) }) })] }) }));
 });
-DatePicker.displayName = 'DatePicker';
+DatePicker.displayName = "DatePicker";
 export { DatePicker };

package/fe/packages/ui/react/components/Date/LocaleContext.d.ts

@@ -1,6 +1,2 @@
-/**
- * Hook for accessing the current Date component locale.
- * Backed by Zustand, so no React Context is required.
- */
 export declare const useDateLocale: () => import("./locales").DateLocaleConfig;
 //# sourceMappingURL=LocaleContext.d.ts.map

package/fe/packages/ui/react/components/Date/LocaleContext.js

@@ -1,8 +1,4 @@
 import { useDateLocaleStore } from './dateLocaleStore';
-/**
- * Hook for accessing the current Date component locale.
- * Backed by Zustand, so no React Context is required.
- */
 export const useDateLocale = () => {
     return useDateLocaleStore((state) => state.locale);
 };

package/fe/packages/ui/react/components/Date/LocaleProvider.d.ts

@@ -4,16 +4,5 @@ export interface DateLocaleProviderProps {
     locale?: DateLocaleConfig;
     children: ReactNode;
 }
-/**
- * Date 组件文案配置 Provider
- * 用于全局设置 Date 组件的文案
- *
- * @example
- * ```tsx
- * <DateLocaleProvider locale={customLocale}>
- *   <App />
- * </DateLocaleProvider>
- * ```
- */
 export declare function DateLocaleProvider({ locale, children }: DateLocaleProviderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LocaleProvider.d.ts.map

package/fe/packages/ui/react/components/Date/LocaleProvider.js

@@ -2,17 +2,6 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { useDateLocaleStore } from './dateLocaleStore';
 import { defaultLocale } from './locales';
-/**
- * Date 组件文案配置 Provider
- * 用于全局设置 Date 组件的文案
- *
- * @example
- * ```tsx
- * <DateLocaleProvider locale={customLocale}>
- *   <App />
- * </DateLocaleProvider>
- * ```
- */
 export function DateLocaleProvider({ locale = defaultLocale, children }) {
     const replaceLocale = useDateLocaleStore((state) => state.replaceLocale);
     const resetLocale = useDateLocaleStore((state) => state.resetLocale);

package/fe/packages/ui/react/components/Date/TimePicker.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../lib/utils';
 import { ChevronDown, ChevronUp } from 'lucide-react';
+import { Button } from '../Button';
+import { Input } from '../Input';
 export function TimePicker({ value, onChange, className }) {
-    // Derive time from value prop directly
     const hours = value?.getHours() ?? 0;
     const minutes = value?.getMinutes() ?? 0;
     const handleTimeChange = (newHours, newMinutes) => {
@@ -72,5 +73,5 @@ export function TimePicker({ value, onChange, className }) {
         }
     };
     const formatNumber = (num) => String(num).padStart(2, '0');
-    return (_jsxs("div", { className: cn('flex items-center justify-center gap-3 py-3', className), children: [_jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("button", { type: "button", onClick: incrementHours, className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground", children: _jsx(ChevronUp, { size: 14 }) }), _jsx("input", { type: "text", value: formatNumber(hours), onChange: handleHoursInput, onKeyDown: handleHoursKeyDown, className: cn('w-12 h-9 text-center text-sm font-medium', 'border border-border rounded', 'bg-background text-foreground', 'focus:outline-none focus:border-theme', 'transition-colors'), maxLength: 2 }), _jsx("button", { type: "button", onClick: decrementHours, className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground", children: _jsx(ChevronDown, { size: 14 }) })] }), _jsx("div", { className: "text-lg font-medium text-foreground mb-1", children: ":" }), _jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("button", { type: "button", onClick: incrementMinutes, className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground", children: _jsx(ChevronUp, { size: 14 }) }), _jsx("input", { type: "text", value: formatNumber(minutes), onChange: handleMinutesInput, onKeyDown: handleMinutesKeyDown, className: cn('w-12 h-9 text-center text-sm font-medium', 'border border-border rounded', 'bg-background text-foreground', 'focus:outline-none focus:border-theme', 'transition-colors'), maxLength: 2 }), _jsx("button", { type: "button", onClick: decrementMinutes, className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground", children: _jsx(ChevronDown, { size: 14 }) })] })] }));
+    return (_jsxs("div", { className: cn('tc-ui-time-picker flex items-center justify-center gap-3 py-3', className), children: [_jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx(Button, { variant: "text", type: "button", onClick: incrementHours, className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground", children: _jsx(ChevronUp, { size: 14 }) }), _jsx(Input, { type: "text", value: formatNumber(hours), onChange: (_, e) => handleHoursInput(e), onKeyDown: handleHoursKeyDown, className: "w-12", inputClassName: cn('w-12 h-9 px-0 py-0 text-center text-sm font-medium', 'border border-border rounded', 'bg-background text-foreground', 'focus:outline-none focus:border-theme', 'transition-colors'), maxLength: 2 }), _jsx(Button, { variant: "text", type: "button", onClick: decrementHours, className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground", children: _jsx(ChevronDown, { size: 14 }) })] }), _jsx("div", { className: "text-lg font-medium text-foreground mb-1", children: ":" }), _jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx(Button, { variant: "text", type: "button", onClick: incrementMinutes, className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground", children: _jsx(ChevronUp, { size: 14 }) }), _jsx(Input, { type: "text", value: formatNumber(minutes), onChange: (_, e) => handleMinutesInput(e), onKeyDown: handleMinutesKeyDown, className: "w-12", inputClassName: cn('w-12 h-9 px-0 py-0 text-center text-sm font-medium', 'border border-border rounded', 'bg-background text-foreground', 'focus:outline-none focus:border-theme', 'transition-colors'), maxLength: 2 }), _jsx(Button, { variant: "text", type: "button", onClick: decrementMinutes, className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground", children: _jsx(ChevronDown, { size: 14 }) })] })] }));
 }

package/fe/packages/ui/react/components/Date/dateLocaleStore.d.ts

@@ -1,13 +1,7 @@
 import { type DateLocaleConfig } from './locales';
 type DateLocaleState = {
     locale: DateLocaleConfig;
-    /**
-     * Merge partial updates into the current locale.
-     */
     setLocale: (patch: Partial<DateLocaleConfig>) => void;
-    /**
-     * Replace the locale entirely.
-     */
     replaceLocale: (nextLocale: DateLocaleConfig) => void;
     resetLocale: () => void;
 };

package/fe/packages/ui/react/components/Date/dropdownPositioning.d.ts

@@ -0,0 +1,3 @@
+import type { DropdownPositioningStrategy } from '../hooks/useDropdownPositioning';
+export declare const getDatePickerDropdownPosition: DropdownPositioningStrategy;
+//# sourceMappingURL=dropdownPositioning.d.ts.map

package/fe/packages/ui/react/components/Date/dropdownPositioning.js

@@ -0,0 +1,12 @@
+export const getDatePickerDropdownPosition = ({ anchorRect, contentRect, viewportHeight, offset, }) => {
+    const contentHeight = contentRect?.height ?? 360;
+    const spaceBelow = viewportHeight - anchorRect.bottom;
+    const spaceAbove = anchorRect.top;
+    const shouldFlipUp = spaceBelow < contentHeight && spaceAbove > spaceBelow;
+    return {
+        top: shouldFlipUp
+            ? anchorRect.top - contentHeight - offset
+            : anchorRect.bottom + offset,
+        left: anchorRect.left,
+    };
+};

package/fe/packages/ui/react/components/Date/locales.d.ts

@@ -1,7 +1,3 @@
-/**
- * Date 组件文案配置
- * 支持外部修改文案内容
- */
 export interface DateLocaleConfig {
     placeholder: string;
     placeholderDateTime: string;
@@ -12,13 +8,8 @@ export interface DateLocaleConfig {
     startTime: string;
     endTime: string;
     confirm: string;
-    /**
-     * 范围模式 - 快捷选择面板标题
-     */
+    monthFormat: string;
     quickRanges: string;
-    /**
-     * 范围模式 - 各快捷范围文案
-     */
     quickRangeToday: string;
     quickRangeYesterday: string;
     quickRangeLast7Days: string;
@@ -27,16 +18,7 @@ export interface DateLocaleConfig {
     quickRangeLastYear: string;
     clear: string;
 }
-/**
- * 默认中文文案
- */
 export declare const zhCNLocale: DateLocaleConfig;
-/**
- * 默认英文文案
- */
 export declare const enUSLocale: DateLocaleConfig;
-/**
- * 默认使用中文文案
- */
 export declare const defaultLocale: DateLocaleConfig;
 //# sourceMappingURL=locales.d.ts.map

package/fe/packages/ui/react/components/Date/locales.js

@@ -1,52 +1,12 @@
-/**
- * Date 组件文案配置
- * 支持外部修改文案内容
- */
-/**
- * 默认中文文案
- */
+import { defaultEnglishResources, defaultLanguageResources } from '../../../../common/i18n';
+const dateDefaultLocale = defaultLanguageResources.components.date;
+const dateDefaultEnglishLocale = defaultEnglishResources.components.date;
 export const zhCNLocale = {
-    placeholder: '请选择日期',
-    placeholderDateTime: '请选择日期时间',
-    placeholderRange: '选择日期范围',
-    placeholderDateTimeRange: '选择日期时间范围',
-    weekDays: ['日', '一', '二', '三', '四', '五', '六'],
-    selectTime: '选择时间',
-    startTime: '开始时间',
-    endTime: '结束时间',
-    confirm: '确认',
-    quickRanges: '快速选择',
-    quickRangeToday: '今天',
-    quickRangeYesterday: '昨天',
-    quickRangeLast7Days: '近7天',
-    quickRangeLast30Days: '近30天',
-    quickRangeThisMonth: '本月',
-    quickRangeLastYear: '最近一年',
-    clear: '清除',
+    ...dateDefaultLocale,
+    weekDays: [...dateDefaultLocale.weekDays],
 };
-/**
- * 默认英文文案
- */
 export const enUSLocale = {
-    placeholder: 'Select date',
-    placeholderDateTime: 'Select date and time',
-    placeholderRange: 'Select date range',
-    placeholderDateTimeRange: 'Select date and time range',
-    weekDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-    selectTime: 'Select time',
-    startTime: 'Start time',
-    endTime: 'End time',
-    confirm: 'Confirm',
-    quickRanges: 'Quick ranges',
-    quickRangeToday: 'Today',
-    quickRangeYesterday: 'Yesterday',
-    quickRangeLast7Days: 'Last 7 days',
-    quickRangeLast30Days: 'Last 30 days',
-    quickRangeThisMonth: 'This month',
-    quickRangeLastYear: 'Last year',
-    clear: 'Clear',
+    ...dateDefaultEnglishLocale,
+    weekDays: [...dateDefaultEnglishLocale.weekDays],
 };
-/**
- * 默认使用中文文案
- */
 export const defaultLocale = zhCNLocale;

package/fe/packages/ui/react/components/Drawer/Drawer.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+export type DrawerPlacement = 'top' | 'right' | 'bottom' | 'left';
+export type DrawerProps = {
+    open?: boolean;
+    onClose?: () => void;
+    title?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    className?: string;
+    contentClassName?: string;
+    mask?: boolean;
+    maskClosable?: boolean;
+    lockScroll?: boolean;
+    closable?: boolean;
+    placement?: DrawerPlacement;
+    width?: number | string;
+    height?: number | string;
+    zIndex?: number;
+    renderNode?: HTMLElement | (() => HTMLElement);
+    keyboard?: boolean;
+};
+export declare function Drawer({ open, onClose, title, children, footer, className, contentClassName, mask, maskClosable, lockScroll, closable, placement, width, height, renderNode, keyboard, zIndex, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Drawer.d.ts.map

package/fe/packages/ui/react/components/Drawer/Drawer.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useI18n } from '../../i18n';
+import { cn } from '../../lib/utils';
+import { X } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '../Button';
+import { Overlay } from '../Overlay';
+const DRAWER_ANIMATION_DURATION = 320;
+const DRAWER_ANIMATION_EASING = 'cubic-bezier(0.22, 1, 0.36, 1)';
+const getDrawerPositionClassName = (placement) => {
+    const positionClassNames = {
+        top: 'left-0 right-0 top-0',
+        right: 'bottom-0 right-0 top-0',
+        bottom: 'bottom-0 left-0 right-0',
+        left: 'bottom-0 left-0 top-0',
+    };
+    return positionClassNames[placement];
+};
+const getDrawerTransform = (placement, open) => {
+    if (open)
+        return 'translate3d(0, 0, 0)';
+    const transforms = {
+        top: 'translate3d(0, -100%, 0)',
+        right: 'translate3d(100%, 0, 0)',
+        bottom: 'translate3d(0, 100%, 0)',
+        left: 'translate3d(-100%, 0, 0)',
+    };
+    return transforms[placement];
+};
+const getDrawerSizeStyle = (placement, width, height) => {
+    const isHorizontal = placement === 'left' || placement === 'right';
+    const size = isHorizontal ? width : height;
+    const resolvedSize = typeof size === 'number' ? `${size}px` : size;
+    return isHorizontal ? { width: resolvedSize } : { height: resolvedSize };
+};
+export function Drawer({ open = false, onClose, title, children, footer, className, contentClassName, mask = true, maskClosable = true, lockScroll = true, closable = true, placement = 'right', width = 420, height = 360, renderNode, keyboard = true, zIndex = 1000, }) {
+    const t = useI18n();
+    const [mounted, setMounted] = useState(open);
+    const [visible, setVisible] = useState(false);
+    const animationFrameRef = useRef(undefined);
+    const secondAnimationFrameRef = useRef(undefined);
+    const closeTimerRef = useRef(undefined);
+    useEffect(() => {
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = undefined;
+        }
+        if (secondAnimationFrameRef.current) {
+            cancelAnimationFrame(secondAnimationFrameRef.current);
+            secondAnimationFrameRef.current = undefined;
+        }
+        if (closeTimerRef.current) {
+            clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = undefined;
+        }
+        if (open) {
+            setMounted(true);
+            animationFrameRef.current = requestAnimationFrame(() => {
+                secondAnimationFrameRef.current = requestAnimationFrame(() => {
+                    setVisible(true);
+                    secondAnimationFrameRef.current = undefined;
+                });
+                animationFrameRef.current = undefined;
+            });
+            return () => {
+                if (animationFrameRef.current) {
+                    cancelAnimationFrame(animationFrameRef.current);
+                    animationFrameRef.current = undefined;
+                }
+                if (secondAnimationFrameRef.current) {
+                    cancelAnimationFrame(secondAnimationFrameRef.current);
+                    secondAnimationFrameRef.current = undefined;
+                }
+            };
+        }
+        setVisible(false);
+        closeTimerRef.current = setTimeout(() => {
+            setMounted(false);
+            closeTimerRef.current = undefined;
+        }, DRAWER_ANIMATION_DURATION);
+        return () => {
+            if (closeTimerRef.current) {
+                clearTimeout(closeTimerRef.current);
+                closeTimerRef.current = undefined;
+            }
+        };
+    }, [open]);
+    const handleContentClick = (e) => {
+        e.stopPropagation();
+    };
+    const drawerStyle = {
+        ...getDrawerSizeStyle(placement, width, height),
+        transform: getDrawerTransform(placement, visible),
+        transition: `transform ${DRAWER_ANIMATION_DURATION}ms ${DRAWER_ANIMATION_EASING}`,
+        willChange: 'transform',
+    };
+    return (_jsx(Overlay, { open: mounted, visible: visible, onClose: onClose, mask: mask, maskClosable: maskClosable, lockScroll: lockScroll, keyboard: keyboard, closable: closable, renderNode: renderNode, zIndex: zIndex, className: "tc-ui-drawer", style: {
+            transition: `opacity ${DRAWER_ANIMATION_DURATION}ms ${DRAWER_ANIMATION_EASING}`,
+        }, children: _jsxs("div", { className: cn('fixed bg-background shadow-lg', 'flex flex-col', getDrawerPositionClassName(placement), placement === 'top' || placement === 'bottom' ? 'max-h-[90vh]' : 'max-w-[90vw]', className), style: drawerStyle, onClick: handleContentClick, children: [(title || closable) && (_jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-border", children: [title && _jsx("div", { className: "text-lg font-semibold text-foreground", children: title }), closable && (_jsx(Button, { variant: "text", type: "button", onClick: onClose, "aria-label": t('components.modal.close'), className: cn('ml-auto p-1 rounded-md', 'text-muted-foreground hover:text-foreground', 'hover:bg-muted', 'transition-colors', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2'), children: _jsx(X, { size: 20 }) }))] })), _jsx("div", { className: cn('flex-1 overflow-auto px-6 py-4', contentClassName), children: children }), footer && _jsx("div", { className: "px-6 py-4 border-border", children: footer })] }) }));
+}

package/fe/packages/ui/react/components/Drawer/index.d.ts

@@ -0,0 +1,3 @@
+export { Drawer } from './Drawer';
+export type { DrawerPlacement, DrawerProps } from './Drawer';
+//# sourceMappingURL=index.d.ts.map

package/fe/packages/ui/react/components/Drawer/index.js

@@ -0,0 +1 @@
+export { Drawer } from './Drawer';

package/fe/packages/ui/react/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+export interface DropdownBaseItem {
+    key: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    danger?: boolean;
+    onClick?: () => void;
+}
+export interface DropdownRenderItem {
+    render: (item: DropdownRenderItem, context: {
+        onClick: () => void;
+        close: () => void;
+    }) => ReactNode;
+}
+export type DropdownItem = Omit<DropdownBaseItem, 'render'> | DropdownRenderItem;
+export interface DropdownProps {
+    items: DropdownItem[];
+    children: ReactNode;
+    className?: string;
+    placement?: 'bottom-end' | 'bottom-start';
+    getPopupContainer?: () => HTMLElement;
+}
+export declare function Dropdown({ items, children, className, placement, getPopupContainer }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Dropdown.d.ts.map

package/fe/packages/ui/react/components/Dropdown/Dropdown.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { Fragment, useCallback, useRef, useState } from 'react';
+import { Button } from '../Button';
+import { Popup } from '../Popup';
+const isDropdownRenderItem = (item) => 'render' in item;
+export function Dropdown({ items, children, className, placement = 'bottom-end', getPopupContainer }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const triggerRef = useRef(null);
+    const handleToggle = useCallback(() => {
+        setIsOpen((prev) => !prev);
+    }, []);
+    const handleItemClick = useCallback((item) => {
+        if (!isDropdownRenderItem(item)) {
+            item.onClick?.();
+        }
+        setIsOpen(false);
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, className: cn('tc-ui-dropdown relative inline-block', className), children: _jsx("div", { onClick: handleToggle, children: children }) }), _jsx(Popup, { open: isOpen, anchorRef: triggerRef, placement: placement, onOpenChange: setIsOpen, container: getPopupContainer?.(), className: cn('min-w-10', 'py-1'), children: items.map((item, index) => {
+                    const onClick = () => handleItemClick(item);
+                    const close = () => setIsOpen(false);
+                    const key = isDropdownRenderItem(item) ? index : item.key;
+                    if (isDropdownRenderItem(item)) {
+                        return _jsx(Fragment, { children: item.render(item, { onClick, close }) }, key);
+                    }
+                    return (_jsx(Button, { type: "button", variant: "text", state: item.danger ? 'danger' : undefined, onClick: onClick, className: cn('flex w-full items-center gap-2 px-4 py-2.5 text-left text-sm transition-colors', item.danger ? 'text-red-600 hover:bg-red-50' : 'text-gray-700 hover:bg-gray-50'), children: _jsxs(_Fragment, { children: [item.icon && _jsx("span", { className: "flex-shrink-0", children: item.icon }), _jsx("span", { children: item.label })] }) }, key));
+                }) })] }));
+}

package/fe/packages/ui/react/components/Dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Dropdown';
+//# sourceMappingURL=index.d.ts.map

package/fe/packages/ui/react/components/Dropdown/index.js

@@ -0,0 +1 @@
+export * from './Dropdown';