@canlooks/can-ui 0.0.70 → 0.0.72

package/dist/cjs/components/dataGrid/filterBubbleContent.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterBubbleContent = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const optionsBase_1 = require("../optionsBase");
+const selectionContext_1 = require("../selectionContext");
+const flex_1 = require("../flex");
+const button_1 = require("../button");
+const popper_1 = require("../popper");
+const react_1 = require("react");
+const form_1 = require("../form");
+exports.FilterBubbleContent = (0, react_1.memo)(({ columnKey, columnFilterProps }) => {
+    const { formRef } = (0, form_1.useFormContext)();
+    /**
+     * ------------------------------------------------------------------------------------
+     * 弹框关闭时触发筛选
+     */
+    const { open, setOpen } = (0, popper_1.usePopperContext)();
+    (0, react_1.useEffect)(() => {
+        !open && formRef.current.submit().then();
+    }, [open]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_1.FormItem, { field: columnKey, children: 'control' in columnFilterProps
+                    ? columnFilterProps.control
+                    : (0, jsx_runtime_1.jsx)(FilterOptions, { ...columnFilterProps }) }), columnFilterProps.showButton !== false
+                ? (0, jsx_runtime_1.jsxs)(flex_1.Flex, { gap: 6, justifyContent: "flex-end", marginTop: 6, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", onClick: () => {
+                                formRef.current.setFieldValue(columnKey, null);
+                                setOpen(false);
+                            }, children: "\u91CD\u7F6E" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => setOpen(false), children: "\u786E\u5B9A" })] })
+                : (0, jsx_runtime_1.jsx)(TriggerFilterOnChange, {})] }));
+});
+const FilterOptions = (0, react_1.memo)(({ multiple = true, showButton = true, value, onChange, ...props }) => {
+    const [selectedValue, toggleSelect] = (0, selectionContext_1.useFlatSelection)({ multiple, value, onChange });
+    return ((0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { showCheckbox: multiple, ...props, selectedValue: selectedValue, onToggleSelected: toggleSelect }));
+});
+const TriggerFilterOnChange = (0, react_1.memo)(() => {
+    const { formRef } = (0, form_1.useFormContext)();
+    const { formValue } = (0, form_1.useFormValueContext)();
+    (0, react_1.useEffect)(() => {
+        formRef.current.submit().then();
+    }, [formValue]);
+    return null;
+});

package/dist/cjs/components/dateTimePicker/dateTimePicker.d.ts

@@ -1,4 +1,4 @@
-import React, { JSX } from 'react';
+import React, { ComponentProps } from 'react';
 import { PopperProps } from '../popper';
 import { InputBaseProps } from '../inputBase';
 import { Dayjs } from 'dayjs';
@@ -10,7 +10,7 @@ export type DatePickerSharedProps = {
     disabledSeconds?: (date: Dayjs, seconds: number) => any;
 };
 export interface DateTimePickerProps extends DatePickerSharedProps, Omit<InputBaseProps<'input'>, 'children' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max'> {
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: ComponentProps<'input'>;
     popperProps?: PopperProps;
     defaultOpen?: boolean;
     open?: boolean;

package/dist/cjs/components/dateTimePicker/dateTimePicker.js

@@ -27,7 +27,6 @@ exports.DateTimePicker = (0, react_1.memo)(({ inputProps, popperProps, min, max,
     const focused = (0, react_1.useRef)(false);
     const [innerOpen, _setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
     const setInnerOpen = (open) => {
-        popperProps?.onOpenChange?.(open);
         // 如果仍聚焦在输入框，则不用关闭弹框
         (open || !focused.current) && _setInnerOpen(open);
     };
@@ -214,14 +213,33 @@ exports.DateTimePicker = (0, react_1.memo)(({ inputProps, popperProps, min, max,
     const showCalendar = /[YMD]/.test(format);
     const showTimer = /[Hms]/.test(format);
     const _dateVal = dateValue.current || (0, dayjs_1.default)();
-    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: dateTimePicker_style_1.datePickerPopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showCalendar &&
-                    (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { viewLevel: format.includes('D') ? 'date'
-                            : format.includes('M') ? 'month'
-                                : 'year', _defaultNull: !dateValue.current, value: _dateVal, onChange: setDateValue, min: min, max: max, disabledDates: disabledDates }), showTimer &&
-                    (0, jsx_runtime_1.jsx)(DateTimePickerContext, { value: contextValue, children: (0, jsx_runtime_1.jsx)(timer_1.Timer, { showHours: format.includes('H'), showMinutes: format.includes('m'), showSeconds: format.includes('s'), value: _dateVal, onChange: setDateValue }) })] }), ...popperProps, onOpenChange: setInnerOpen, onPointerDown: e => {
-            popperProps?.onPointerDown?.(e);
-            e.preventDefault();
-        }, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, css: dateTimePicker_style_1.style, className: (0, utils_1.clsx)(dateTimePicker_style_1.classes.root, props.className), "data-focused": innerOpen.current, value: dateValue.current, onClear: clearHandler, onSelect: selectHandler, onFocus: focusHandler, onBlur: blurHandler, onKeyDown: keydownHandler, children: ({ ref, value, onChange, ...rest }) => (0, jsx_runtime_1.jsxs)("div", { className: dateTimePicker_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)("input", { ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputProps?.ref, innerInputRef), className: (0, utils_1.clsx)(dateTimePicker_style_1.classes.input, inputProps?.className) }), (0, jsx_runtime_1.jsx)("div", { className: dateTimePicker_style_1.classes.dateTimeIcon, children: showTimer && !showCalendar
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...(0, utils_1.mergeComponentProps)({
+            css: dateTimePicker_style_1.datePickerPopperStyle,
+            open: innerOpen.current,
+            placement: 'bottomLeft',
+            trigger: ['click', 'enter'],
+            disabled: props.disabled || props.readOnly,
+            content: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showCalendar &&
+                        (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { viewLevel: format.includes('D') ? 'date'
+                                : format.includes('M') ? 'month'
+                                    : 'year', _defaultNull: !dateValue.current, value: _dateVal, onChange: setDateValue, min: min, max: max, disabledDates: disabledDates }), showTimer &&
+                        (0, jsx_runtime_1.jsx)(DateTimePickerContext, { value: contextValue, children: (0, jsx_runtime_1.jsx)(timer_1.Timer, { showHours: format.includes('H'), showMinutes: format.includes('m'), showSeconds: format.includes('s'), value: _dateVal, onChange: setDateValue }) })] })),
+        }, popperProps, {
+            onOpenChange: setInnerOpen,
+            onPointerDown: e => e.preventDefault()
+        }), children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...(0, utils_1.mergeComponentProps)(props, {
+                css: dateTimePicker_style_1.style,
+                className: dateTimePicker_style_1.classes.root,
+                value: dateValue.current,
+                onClear: clearHandler,
+                onSelect: selectHandler,
+                onFocus: focusHandler,
+                onBlur: blurHandler,
+                onKeyDown: keydownHandler
+            }), "data-focused": innerOpen.current, children: inputBaseProps => (0, jsx_runtime_1.jsxs)("div", { className: dateTimePicker_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)("input", { ...(0, utils_1.mergeComponentProps)(inputBaseProps, inputProps, {
+                            ref: innerInputRef,
+                            className: dateTimePicker_style_1.classes.input
+                        }) }), (0, jsx_runtime_1.jsx)("div", { className: dateTimePicker_style_1.classes.dateTimeIcon, children: showTimer && !showCalendar
                             ? (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faClock_1.faClock })
                             : (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCalendar_1.faCalendar }) })] }) }) }));
 });

package/dist/cjs/components/dateTimePicker/dateTimePicker.style.d.ts

@@ -1,7 +1,7 @@
 export declare const classes: {
     input: string;
-    container: string;
     calendar: string;
+    container: string;
     dateItem: string;
     inputGroup: string;
     inputUnit: string;

package/dist/cjs/components/dateTimeRangePicker/dateTimeRangePicker.d.ts

@@ -3,6 +3,7 @@ import { ColorPropsValue, DivProps, Size } from '../../types';
 import { DatePickerSharedProps, DateTimePickerProps } from '../dateTimePicker';
 import { Dayjs } from 'dayjs';
 type DateValueType = [Dayjs | null, Dayjs | null] | null;
+type PickerType = 'start' | 'end';
 export interface DateTimeRangePickerProps extends DatePickerSharedProps, Omit<DivProps, 'defaultValue' | 'onChange'> {
     startPickerProps?: DateTimePickerProps;
     endPickerProps?: DateTimePickerProps;
@@ -10,9 +11,9 @@ export interface DateTimeRangePickerProps extends DatePickerSharedProps, Omit<Di
     defaultValue?: DateValueType;
     value?: DateValueType;
     onChange?(value: DateValueType): void;
-    defaultOpenPicker?: 'start' | 'end' | 'closed';
-    openPicker?: 'start' | 'end' | 'closed';
-    onOpenPickerChange?(openPicker?: 'start' | 'end' | 'closed'): void;
+    defaultOpenPicker?: PickerType | 'closed';
+    openPicker?: PickerType | 'closed';
+    onOpenPickerChange?(openPicker?: PickerType | 'closed'): void;
     autoClose?: boolean;
     separator?: ReactNode;
     disabledDates?: (date: Dayjs) => any;

package/dist/cjs/components/dateTimeRangePicker/dateTimeRangePicker.js

@@ -12,29 +12,51 @@ variant, size, color, disabled, readOnly, autoFocus, ...props }) => {
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpenPicker, openPicker, onOpenPickerChange);
     const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
     const endPickerInputRef = (0, react_1.useRef)(null);
-    const commonProps = {
-        format, disabledDates, disabledHours, disabledMinutes, disabledSeconds,
-        variant, size, color, disabled, readOnly
-    };
     const showTimer = /[Hms]/.test(format);
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: dateTimeRangePicker_style_1.style, className: (0, utils_1.clsx)(dateTimeRangePicker_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsx)(dateTimePicker_1.DateTimePicker, { ...commonProps, autoFocus: autoFocus, autoClose: false, placeholder: showTimer ? '开始时间' : '开始日期', max: innerValue.current?.[1] || void 0, open: innerOpen.current === 'start', ...startPickerProps, onOpenChange: open => {
-                    startPickerProps?.onOpenChange?.(open);
-                    setInnerOpen(open ? 'start' : 'closed');
-                }, value: innerValue.current?.[0], onChange: startValue => {
-                    startPickerProps?.onChange?.(startValue);
-                    setInnerValue(o => [startValue, o?.[1] || null]);
-                    if (startValue && !showTimer) {
-                        endPickerInputRef.current.focus();
-                        innerOpen.current === 'start' && setInnerOpen('end');
+    const renderPickerItem = (type) => {
+        const commonProps = {
+            format, disabledDates, disabledHours, disabledMinutes, disabledSeconds,
+            variant, size, color, disabled, readOnly
+        };
+        return ((0, jsx_runtime_1.jsx)(dateTimePicker_1.DateTimePicker, { ...(0, utils_1.mergeComponentProps)(commonProps, type === 'start'
+                ? {
+                    autoFocus,
+                    autoClose: false,
+                    placeholder: showTimer ? '开始时间' : '开始日期',
+                    max: innerValue.current?.[1] || void 0,
+                    open: innerOpen.current === 'start'
+                }
+                : {
+                    autoClose,
+                    placeholder: showTimer ? '结束时间' : '结束日期',
+                    min: innerValue.current?.[0] || void 0,
+                    open: innerOpen.current === 'end'
+                }, type === 'start'
+                ? startPickerProps
+                : endPickerProps, type === 'start'
+                ? {
+                    onOpenChange: open => setInnerOpen(open ? 'start' : 'closed'),
+                    value: innerValue.current?.[0],
+                    onChange: value => {
+                        setInnerValue(o => [value, o?.[1] || null]);
+                        if (value && !showTimer) {
+                            endPickerInputRef.current.focus();
+                            innerOpen.current === 'start' && setInnerOpen('end');
+                        }
+                    }
+                }
+                : {
+                    inputProps: { ref: endPickerInputRef },
+                    onOpenChange: open => setInnerOpen(open ? 'end' : 'closed'),
+                    value: innerValue.current?.[1],
+                    onChange: value => {
+                        setInnerValue(o => [o?.[0] || null, value]);
+                    },
+                    popperProps: {
+                        ...endPickerProps?.popperProps,
+                        placement: 'bottomRight'
                     }
-                } }), separator ?? (0, jsx_runtime_1.jsx)("span", { children: "-" }), (0, jsx_runtime_1.jsx)(dateTimePicker_1.DateTimePicker, { ...commonProps, autoClose: autoClose, placeholder: showTimer ? '结束时间' : '结束日期', min: innerValue.current?.[0] || void 0, open: innerOpen.current === 'end', ...endPickerProps, inputProps: { ref: endPickerInputRef }, onOpenChange: open => {
-                    startPickerProps?.onOpenChange?.(open);
-                    setInnerOpen(open ? 'end' : 'closed');
-                }, value: innerValue.current?.[1], onChange: endValue => {
-                    endPickerProps?.onChange?.(endValue);
-                    setInnerValue(o => [o?.[0] || null, endValue]);
-                }, popperProps: {
-                    ...endPickerProps?.popperProps,
-                    placement: 'bottomRight'
-                } })] }));
+                }) }));
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: dateTimeRangePicker_style_1.style, className: (0, utils_1.clsx)(dateTimeRangePicker_style_1.classes.root, props.className), children: [renderPickerItem('start'), separator ?? (0, jsx_runtime_1.jsx)("span", { children: "-" }), renderPickerItem('end')] }));
 });

package/dist/cjs/components/descriptions/descriptions.js

@@ -15,6 +15,8 @@ function useDescriptionsContext() {
 }
 const DescriptionsContext = (0, react_2.createContext)({});
 exports.Descriptions = (0, react_2.memo)(({ size, labelWidth, colon = ':', labelPlacement = 'left', disableMargin, disablePadding, items, itemComponent: ItemComponent = descriptionItem_1.DescriptionItem, variant = 'grid', columnCount = 3, ...props }) => {
+    const theme = (0, theme_1.useTheme)();
+    size ??= theme.size;
     const contextValue = (0, react_2.useMemo)(() => ({
         size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, variant
     }), [

package/dist/cjs/components/descriptions/descriptions.style.d.ts

@@ -2,8 +2,8 @@ export declare const classes: {
     col: string;
     label: string;
     content: string;
-    vertical: string;
     colon: string;
+    vertical: string;
     item: string;
     labelCol: string;
     contentCol: string;

package/dist/cjs/components/dialog/dialog.d.ts

@@ -33,4 +33,4 @@ export interface DialogProps extends Omit<ModalProps, 'title' | 'prefix'> {
     defaultOpen?: boolean;
     onClose?(closeReason: DialogCloseReason): void;
 }
-export declare function Dialog({ ref, icon, title, footer, prefix, suffix, width, minWidth, maxWidth, showClose, closeProps, showConfirm, confirmText, confirmProps, onConfirm, confirmLoading, showCancel, cancelText, cancelProps, onCancel, draggable, maskClosable, escapeClosable, defaultOpen, open, onClose, ...props }: DialogProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Dialog({ icon, title, footer, prefix, suffix, width, minWidth, maxWidth, showClose, closeProps, showConfirm, confirmText, confirmProps, onConfirm, confirmLoading, showCancel, cancelText, cancelProps, onCancel, draggable, maskClosable, escapeClosable, defaultOpen, open, onClose, ...props }: DialogProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/dialog/dialog.js

@@ -10,7 +10,7 @@ const button_1 = require("../button");
 const draggable_1 = require("../draggable");
 const icon_1 = require("../icon");
 const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
-function Dialog({ ref, icon, title, footer, prefix, suffix, width = 420, minWidth, maxWidth = '100%', showClose = true, closeProps, showConfirm = true, confirmText = '确 定', confirmProps, onConfirm, confirmLoading = false, showCancel = true, cancelText = '取 消', cancelProps, onCancel, draggable = true, maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, ...props }) {
+function Dialog({ icon, title, footer, prefix, suffix, width = 420, minWidth, maxWidth = '100%', showClose = true, closeProps, showConfirm = true, confirmText = '确 定', confirmProps, onConfirm, confirmLoading = false, showCancel = true, cancelText = '取 消', cancelProps, onCancel, draggable = true, maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, ...props }) {
     const [innerOpen, _setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open);
     const close = (closeReason) => {
         if (!innerLoading.current || closeReason === 'confirmed') {
@@ -81,7 +81,7 @@ function Dialog({ ref, icon, title, footer, prefix, suffix, width = 420, minWidt
         }
         return footer;
     };
-    return ((0, jsx_runtime_1.jsx)(modal_1.Modal, { ...props, ref: (0, utils_1.cloneRef)(ref, overlayRef), css: dialog_style_1.style, className: (0, utils_1.clsx)(dialog_style_1.classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-draggable": draggable, children: (0, jsx_runtime_1.jsx)(draggable_1.Draggable, { container: () => overlayRef.current, children: (targetProps, handleProps) => (0, jsx_runtime_1.jsxs)("div", { className: dialog_style_1.classes.card, ...targetProps, style: { width, minWidth, maxWidth, ...targetProps.style }, children: [!!icon &&
+    return ((0, jsx_runtime_1.jsx)(modal_1.Modal, { ...props, ref: (0, utils_1.cloneRef)(overlayRef, props.ref), css: dialog_style_1.style, className: (0, utils_1.clsx)(dialog_style_1.classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-draggable": draggable, children: (0, jsx_runtime_1.jsx)(draggable_1.Draggable, { container: () => overlayRef.current, children: (targetProps, handleProps) => (0, jsx_runtime_1.jsxs)("div", { className: dialog_style_1.classes.card, ...targetProps, style: { width, minWidth, maxWidth, ...targetProps.style }, children: [!!icon &&
                         (0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.icon, children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: dialog_style_1.classes.content, children: [!!(title || showClose) &&
                                 (0, jsx_runtime_1.jsxs)("div", { className: dialog_style_1.classes.titleRow, ...handleProps, children: [(0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.title, children: title }), showClose &&
                                             (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", ...closeProps, className: (0, utils_1.clsx)(dialog_style_1.classes.close, closeProps?.className), onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faXmark_1.faXmark }) })] }), (0, jsx_runtime_1.jsxs)("div", { ref: bodyRef, className: dialog_style_1.classes.body, onScroll: onScroll, children: [!!prefix &&

package/dist/cjs/components/dialog/dialog.style.d.ts

@@ -2,11 +2,11 @@ export declare const classes: {
     body: string;
     footer: string;
     title: string;
-    icon: string;
     content: string;
+    close: string;
     prefix: string;
+    icon: string;
     suffix: string;
-    close: string;
     card: string;
     titleRow: string;
     bodyWrap: string;

package/dist/cjs/components/draggable/draggable.d.ts

@@ -1,14 +1,24 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode, Ref } from 'react';
 import { DraggableGestureOptions, HandleProps } from '../../utils';
 import { DefineElement } from '../../types';
 export type DraggableTargetProps = {
+    onTransitionEnd(e: React.TransitionEvent): void;
     style: {
         translate: string;
     };
+    'data-dragging': 'true' | 'false';
+};
+export type DraggableRef = {
+    restore(transition?: boolean): void;
 };
 export interface DraggableProps extends DraggableGestureOptions {
+    ref?: Ref<DraggableRef>;
     translateLimit?(targetTranslate: [number, number]): [number, number];
+    /** 拖拽结束后是否恢复原来的位置，默认为`false` */
+    restoreOnDragEnd?: boolean;
+    /** 恢复时是否播放过度动画，默认为`true` */
+    restoreTransition?: boolean;
     container?: DefineElement;
     children: ReactElement | ((targetProps: DraggableTargetProps, handleProps: HandleProps) => ReactNode);
 }
-export declare function Draggable({ translateLimit, container, children, ...draggableOptions }: DraggableProps): ReactNode;
+export declare function Draggable({ ref, translateLimit, restoreOnDragEnd, restoreTransition, container, children, ...draggableOptions }: DraggableProps): React.ReactNode;

package/dist/cjs/components/draggable/draggable.js

@@ -3,13 +3,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Draggable = Draggable;
 const react_1 = require("react");
 const utils_1 = require("../../utils");
-function Draggable({ translateLimit, container, children, ...draggableOptions }) {
+const theme_1 = require("../theme");
+function Draggable({ ref, translateLimit, restoreOnDragEnd, restoreTransition = true, container, children, ...draggableOptions }) {
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        restore
+    }));
+    const [transiting, setTransiting] = (0, react_1.useState)(false);
+    const restore = (transition = restoreTransition) => {
+        transition && setTransiting(true);
+        setTranslate([0, 0]);
+    };
+    const onTransitionEnd = () => {
+        setTransiting(false);
+    };
     const [translate, setTranslate] = (0, react_1.useState)([0, 0]);
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
     const props = children.props;
     const draggableHandles = (0, utils_1.useDraggable)({
         ...draggableOptions,
         onDragStart(e) {
             draggableOptions.onDragStart?.(e);
+            setIsDragging(true);
             return [...translate];
         },
         onDrag(info, e) {
@@ -30,20 +44,36 @@ function Draggable({ translateLimit, container, children, ...draggableOptions })
             }
             setTranslate([newX, newY]);
         },
+        onDragEnd(info) {
+            draggableOptions.onDragEnd?.(info);
+            setIsDragging(false);
+            restoreOnDragEnd && restore();
+        },
         onClick: props?.onClick
     });
+    const theme = (0, theme_1.useTheme)();
     const style = (0, react_1.useMemo)(() => ({
         translate: `${translate[0]}px ${translate[1]}px`,
+        ...transiting && { transition: `translate .3s ${theme.easing.bounce}` },
         ...props?.style
-    }), [translate, props?.style]);
+    }), [translate, transiting, theme, props?.style]);
     if ((0, react_1.isValidElement)(children)) {
         return (0, react_1.cloneElement)(children, {
             style,
-            ...draggableHandles
+            'data-dragging': String(isDragging),
+            onTransitionEnd,
+            ...draggableHandles,
         });
     }
     if (typeof children === 'function') {
-        return children({ style: { translate: `${translate[0]}px ${translate[1]}px` } }, draggableHandles);
+        return children({
+            style: {
+                translate: `${translate[0]}px ${translate[1]}px`,
+                ...transiting && { transition: `translate .3s ${theme.easing.bounce}` },
+            },
+            'data-dragging': String(isDragging),
+            onTransitionEnd
+        }, draggableHandles);
     }
     return children;
 }

package/dist/cjs/components/flex/flex.d.ts

@@ -1,6 +1,7 @@
-import { CSSProperties } from 'react';
-import { TransportStyleProps } from '../transportStyle';
-export interface FlexProps extends TransportStyleProps {
+import { CSSProperties, ElementType } from 'react';
+import { TransportStyleOwnProps } from '../transportStyle';
+import { OverridableComponent, OverridableProps } from '../../types';
+interface FlexOwnProps extends TransportStyleOwnProps {
     inline?: boolean;
     /** 排列方式，默认为`row` */
     direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
@@ -12,4 +13,6 @@ export interface FlexProps extends TransportStyleProps {
     /** 当compact为true时，gap无效，而且会清除子元素的圆角，让他们拼接起来 */
     compact?: boolean;
 }
-export declare function Flex({ inline, direction, wrap, gap, columnGap, rowGap, compact, ...props }: FlexProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export type FlexProps<C extends ElementType = 'div'> = OverridableProps<FlexOwnProps, C>;
+export declare const Flex: OverridableComponent<FlexOwnProps>;
+export {};

package/dist/cjs/components/flex/flex.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Flex = Flex;
+exports.Flex = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const flex_style_1 = require("./flex.style");
 const utils_1 = require("../../utils");
 const transportStyle_1 = require("../transportStyle");
-function Flex({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }) {
+exports.Flex = (({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }) => {
     const renderChildren = () => {
         if (!compact) {
             return props.children;
@@ -29,4 +29,4 @@ function Flex({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, com
             flexWrap: wrap, columnGap, rowGap, gap,
             ...props.style
         }), children: renderChildren() }));
-}
+});

package/dist/cjs/components/form/form.d.ts

@@ -14,7 +14,7 @@ export type FormSharedProps = {
     size?: Size;
 };
 interface FormOwnProps<V extends FormValue = FormValue> extends FormSharedProps, DescriptionsSharedProps, GridOwnProps {
-    ref?: Ref<FormRef<V> | null>;
+    ref?: Ref<FormRef<V>>;
     /** 最外层元素的ref，默认{@link ref}属性已经被{@link FormRef}取代 */
     wrapperRef?: Ref<HTMLFormElement>;
     initialValue?: V;
@@ -24,14 +24,19 @@ interface FormOwnProps<V extends FormValue = FormValue> extends FormSharedProps,
     descriptionsProps?: DescriptionsProps;
 }
 export type FormProps<V extends FormValue = FormValue, C extends ElementType = 'form'> = OverridableProps<FormOwnProps<V>, C>;
-interface FormContext<V extends FormValue> extends FormSharedProps {
-    formValue?: V;
-    setFieldValue?(field: FieldPath, value: any, silent?: boolean): void;
+type FormContext<V extends FormValue> = {
+    inForm?: boolean;
     itemsContainer?: Map<string, FormItemRef>;
     formRef?: RefObject<FormRef<V> | null>;
-}
+};
 declare const FormContext: React.Context<FormContext<any>>;
 export declare function useFormContext<V extends FormValue>(): FormContext<V>;
+type FormValueContextType<V extends FormValue> = {
+    formValue?: V;
+    setFieldValue?(field: FieldPath, value: any, silent?: boolean): void;
+};
+export declare function useFormValueContext<V extends FormValue>(): FormValueContextType<V>;
+export declare function useFormStyleContext(): FormSharedProps;
 export type FormRef<V extends FormValue = FormValue> = {
     /** 存在校验不通过的字段时会得到`null` */
     submit(): Promise<V | null>;

package/dist/cjs/components/form/form.js

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Form = void 0;
 exports.useFormContext = useFormContext;
+exports.useFormValueContext = useFormValueContext;
+exports.useFormStyleContext = useFormStyleContext;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../utils");
@@ -13,11 +15,43 @@ const FormContext = (0, react_1.createContext)({});
 function useFormContext() {
     return (0, react_1.useContext)(FormContext);
 }
-exports.Form = (({ component: Component = 'form', ref, wrapperRef, initialValue, onChange, onFinish, items, descriptionsProps, requiredMark = '*', variant = 'grid', 
+const FormValueContext = (0, react_1.createContext)({});
+function useFormValueContext() {
+    return (0, react_1.useContext)(FormValueContext);
+}
+const FormStyleContext = (0, react_1.createContext)({});
+function useFormStyleContext() {
+    return (0, react_1.useContext)(FormStyleContext);
+}
+exports.Form = (({ component: Component = 'form', ref, wrapperRef, initialValue, onChange, onFinish, items, descriptionsProps, requiredMark, variant, 
 // 以下属性从DescriptionsSharedProps继承
 labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePadding, 
 // 以下属性从GridOwnProps继承
 inline, columnCount = 1, gap, columnGap, rowGap, ...props }) => {
+    const { inForm, formRef: parentFormRef } = useFormContext();
+    const renderChildren = () => {
+        return variant === 'plain'
+            ? props.children
+            : (0, jsx_runtime_1.jsx)(descriptions_1.Descriptions, { ...descriptionsProps, size: size, labelWidth: labelWidth, colon: colon, labelPlacement: labelPlacement, disableMargin: disableMargin, disablePadding: disablePadding, variant: variant, inline: inline, columnCount: columnCount, gap: gap, columnGap: columnGap, rowGap: rowGap, items: items, itemComponent: formItem_1.FormItem, children: props.children });
+    };
+    /**
+     * ------------------------------------------------------------------------
+     * 嵌套在另个一个form中，值取最顶层的form，当前组件仅做样式处理
+     */
+    if (inForm) {
+        (0, react_1.useImperativeHandle)(ref, () => parentFormRef.current);
+        const context = useFormStyleContext();
+        requiredMark ??= context.requiredMark ?? '*';
+        variant ??= context.variant ?? 'grid';
+        size ??= context.size;
+        return ((0, jsx_runtime_1.jsx)(FormStyleContext, { value: (0, react_1.useMemo)(() => ({
+                requiredMark, variant, size
+            }), [
+                requiredMark, variant, size
+            ]), children: renderChildren() }));
+    }
+    requiredMark ??= '*';
+    variant ??= 'grid';
     /**
      * ------------------------------------------------------------------------
      * 表单值
@@ -46,8 +80,7 @@ inline, columnCount = 1, gap, columnGap, rowGap, ...props }) => {
         e?.preventDefault();
         try {
             await Promise.all([...itemsContainer.current].map(async ([, item]) => {
-                const isValid = await item.validate();
-                return isValid ? void 0 : Promise.reject();
+                return await item.validate() || Promise.reject();
             }));
             onFinish?.(formValue.current);
             return formValue.current;
@@ -84,7 +117,7 @@ inline, columnCount = 1, gap, columnGap, rowGap, ...props }) => {
             setFormValue(newValue);
         },
         resetField: field => {
-            itemsContainer.current.get((0, utils_1.stringifyField)(field))?.reset();
+            itemsContainer.current.get((0, utils_1.stringifyField)(field))?.reset(formValue.current, initialValue);
             setFormValue(o => ({ ...o }));
         },
         isFormTouched: () => [...itemsContainer.current].some(([, item]) => item.isTouched),
@@ -92,12 +125,15 @@ inline, columnCount = 1, gap, columnGap, rowGap, ...props }) => {
     };
     (0, react_1.useImperativeHandle)(ref, () => formRef.current);
     return ((0, jsx_runtime_1.jsx)(Component, { ...props, ref: wrapperRef, css: form_style_1.style, className: (0, utils_1.clsx)(form_style_1.classes.root, props.className), onSubmit: submitHandler, children: (0, jsx_runtime_1.jsx)(FormContext, { value: (0, react_1.useMemo)(() => ({
-                requiredMark, variant, size,
-                formValue: formValue.current, setFieldValue,
+                inForm: true,
                 itemsContainer: itemsContainer.current, formRef
-            }), [requiredMark, variant, size, formValue.current]), children: variant === 'plain'
-                ? props.children
-                : (0, jsx_runtime_1.jsx)(descriptions_1.Descriptions, { ...descriptionsProps, size: size, labelWidth: labelWidth, colon: colon, labelPlacement: labelPlacement, disableMargin: disableMargin, disablePadding: disablePadding, items: items, variant: variant, itemComponent: formItem_1.FormItem, inline: inline, columnCount: columnCount, gap: gap, columnGap: columnGap, rowGap: rowGap, children: props.children }) }) }));
+            }), []), children: (0, jsx_runtime_1.jsx)(FormStyleContext, { value: (0, react_1.useMemo)(() => ({
+                    requiredMark, variant, size
+                }), [
+                    requiredMark, variant, size
+                ]), children: (0, jsx_runtime_1.jsx)(FormValueContext, { value: (0, react_1.useMemo)(() => ({
+                        formValue: formValue.current, setFieldValue
+                    }), [formValue.current]), children: renderChildren() }) }) }) }));
 });
 exports.Form.Item = formItem_1.FormItem;
 exports.Form.Relatable = formRelatable_1.FormRelatable;

package/dist/cjs/components/form/formItem.d.ts

@@ -3,11 +3,11 @@ import { FormRef, FormSharedProps, FormValue } from './form';
 import { ColorPropsValue, MergeProps, Size } from '../../types';
 import { FieldPath } from '../../utils';
 import { DescriptionItemProps } from '../descriptions';
-export type FormItemRules<I = any> = {
+export type FormItemRules<I = any, R = FormRef> = {
     message?: ReactNode;
     required?: boolean;
     pattern?: RegExp;
-    validator?(fieldValue: I | undefined, formValue: any, formRef: FormRef | null): any;
+    validator?(fieldValue: I | undefined, formValue: any, formRef: R | null): any;
 };
 export type FieldProps<I = any> = {
     checked?: boolean;
@@ -18,6 +18,7 @@ export type StyleProps = {
     size?: Size;
     color?: ColorPropsValue;
 };
+export type FormItemChildren<T extends ReactNode = ReactNode, I = any> = T | ((fieldProps: FieldProps<I>, styleProps: StyleProps, key: string) => T);
 export interface FormItemOwnProps<I = any> extends FormSharedProps {
     ref?: Ref<FormItemRef>;
     wrapperRef?: Ref<HTMLDivElement>;
@@ -29,11 +30,13 @@ export interface FormItemOwnProps<I = any> extends FormSharedProps {
     helperText?: ReactNode;
     dependencies?: FieldPath[];
     /**
-     * 若`children`为`function`类型时，第三个参数`key`主要用于强制重渲染，
-     * 在没有{@link initialValue}时非常有用
+     * 若`children`为`function`类型时，
+     * 第三个参数`key`主要用于强制重渲染，在没有{@link initialValue}时非常有用
      */
-    children?: ReactNode | ((fieldProps: FieldProps<I>, styleProps: StyleProps, key?: string) => ReactNode);
+    children?: FormItemChildren;
     noStyle?: boolean;
+    /** @private 内部使用，强制指定字段值 */
+    _fieldValue?: I;
 }
 export type FormItemProps<I = any, C extends ElementType = 'div'> = MergeProps<FormItemOwnProps<I>, DescriptionItemProps<C>>;
 export type FieldError = null | {
@@ -42,7 +45,9 @@ export type FieldError = null | {
 export type FormItemRef = {
     validate(): Promise<boolean>;
     error: FieldError;
-    reset(initialValues?: FormValue): void;
-    isTouched: boolean;
+    reset(): void;
+    /** @private */
+    reset(currentFormValue: FormValue, initialFormValue?: FormValue): void;
+    isTouched(): boolean;
 };
 export declare const FormItem: <I = any, C extends ElementType = 'div'>(props: FormItemProps<I, C>) => ReactNode;