@canlooks/can-ui 0.0.70 → 0.0.71

package/dist/cjs/components/tree/treeNode.js

@@ -12,33 +12,111 @@ const tree_1 = require("./tree");
 const selectionContext_1 = require("../selectionContext");
 const icon_1 = require("../icon");
 const faChevronRight_1 = require("@fortawesome/free-solid-svg-icons/faChevronRight");
+const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+const treeDnd_1 = require("./treeDnd");
 exports.TreeNode = (0, react_1.memo)(({ value, label, prefix, suffix, disabled, _level = 0, ...props }) => {
-    const { expandedSet = new Set(), toggleExpanded, indent, renderExpandIcon, showCheckbox, readOnly, clickLabelToExpand, ...context } = (0, tree_1.useTreeContext)();
+    const { expandedSet, toggleExpanded, indent, renderExpandIcon, showCheckbox, readOnly, clickLabelToExpand, ...context } = (0, tree_1.useTreeContext)();
     disabled ??= context.disabled;
     const { selectionStatus, toggleSelected } = (0, selectionContext_1.useSelectionContext)();
-    const currentExpanded = expandedSet?.has(value);
-    const status = selectionStatus?.get(value);
+    const currentExpanded = expandedSet.has(value);
+    const status = selectionStatus.get(value);
     const clickHandler = () => {
         !readOnly && !disabled && toggleSelected(value);
-        clickLabelToExpand && toggleExpanded?.(value);
+        clickLabelToExpand && toggleExpanded(value);
     };
     const hasChildren = !!props.children && (!Array.isArray(props.children) || props.children.length > 0);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.clsx)(tree_style_1.classes.node, props.className), "data-selected": status === 2, "data-read-only": readOnly, "data-disabled": disabled, onClick: clickHandler, children: [Array(_level).fill(void 0).map((_, i) => (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.indent, style: { width: indent } }, i)), (0, jsx_runtime_1.jsx)(button_1.Button, { className: tree_style_1.classes.expand, variant: "plain", color: "text.secondary", onClick: e => {
+    /**
+     * ---------------------------------------------------------------------
+     * 拖拽部分
+     */
+    const { sortable, showDragHandle, onSort, containerRef, isOffsetSatisfied: [isOffsetSatisfied, setIsOffsetSatisfied], dragging: [dragging, setDragging], overing: [overing, setOvering], placement: [placement, setPlacement], overingTimer } = (0, treeDnd_1.useTreeDndContext)();
+    const dragHandleProps = (0, utils_1.useDraggable)({
+        disabled: !sortable,
+        onDragStart(e) {
+            setDragging(value);
+            setOvering(void 0);
+            currentExpanded && toggleExpanded(value);
+        },
+        onDrag({ diff: [diffX] }) {
+            setIsOffsetSatisfied(diffX > indent * 2);
+        },
+        onDragEnd() {
+            inactiveParentBlock();
+            leaveMask();
+            setDragging(void 0);
+            if (typeof overing !== 'undefined' && placement.current) {
+                onSort?.({
+                    source: dragging,
+                    destination: overing,
+                    placement: isOffsetSatisfied ? 'child' : placement.current
+                });
+            }
+        }
+    });
+    const nodeRef = (0, react_1.useRef)(null);
+    const activeParentBlock = (target) => {
+        return (0, utils_1.findPredecessor)(target, parent => {
+            const ret = parent.classList.contains(tree_style_1.classes.levelBlock);
+            if (ret) {
+                parent.dataset.active = 'true';
+                return true;
+            }
+        });
+    };
+    const inactiveParentBlock = () => {
+        const fn = (el) => {
+            el.dataset.active = 'false';
+        };
+        fn(containerRef.current);
+        containerRef.current.querySelectorAll('.' + tree_style_1.classes.levelBlock).forEach(fn);
+    };
+    const overingMask = (e) => {
+        if (hasChildren && !expandedSet.has(value)) {
+            overingTimer.current ||= setTimeout(() => {
+                toggleExpanded(value);
+                placement.current === 'after' && inactiveParentBlock();
+            }, 800);
+        }
+    };
+    const leaveMask = () => {
+        clearTimeout(overingTimer.current);
+        overingTimer.current = void 0;
+    };
+    const onPointerEnter = (e, placement) => {
+        setOvering(value);
+        setPlacement(placement);
+        activeParentBlock(e.currentTarget);
+    };
+    const onPointerLeave = () => {
+        setOvering(void 0);
+        inactiveParentBlock();
+    };
+    /**
+     * ---------------------------------------------------------------------
+     * 渲染部分
+     */
+    const renderedIndents = (0, react_1.useMemo)(() => {
+        return Array(_level).fill(void 0).map((_, i) => (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.indent, style: { width: indent } }, i));
+    }, [_level, indent]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ...props, ref: (0, utils_1.cloneRef)(nodeRef, props.ref), className: (0, utils_1.clsx)(tree_style_1.classes.node, props.className), "data-selected": status === 2, "data-read-only": readOnly, "data-disabled": disabled, "data-dragging": dragging === value, ...!showDragHandle && dragHandleProps, children: [renderedIndents, (0, jsx_runtime_1.jsx)(button_1.Button, { className: tree_style_1.classes.expand, variant: "plain", color: "text.secondary", onClick: e => {
                             e.stopPropagation();
-                            toggleExpanded?.(value);
-                        }, children: renderExpandIcon
-                            ? renderExpandIcon(value, !!currentExpanded, [...expandedSet])
+                            toggleExpanded(value);
+                        }, onPointerDown: e => e.stopPropagation(), children: renderExpandIcon
+                            ? renderExpandIcon(value, currentExpanded, [...expandedSet])
                             : hasChildren &&
                                 (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faChevronRight_1.faChevronRight, className: tree_style_1.classes.icon, style: {
                                         rotate: currentExpanded ? '90deg' : '0deg'
-                                    } }) }), showCheckbox &&
-                        (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: tree_style_1.classes.checkbox, checked: status === 2, indeterminate: status === 1, onClick: e => {
-                                e.stopPropagation();
-                                clickHandler();
-                            } }), !!prefix &&
-                        (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.label, children: label }), !!suffix &&
-                        (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.suffix, children: suffix })] }), hasChildren &&
-                (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { in: currentExpanded, children: react_1.Children.map(props.children, child => {
+                                    } }) }), (0, jsx_runtime_1.jsxs)("div", { className: tree_style_1.classes.contentWrap, children: [sortable && showDragHandle &&
+                                (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.dragHandle, ...dragHandleProps, onClick: e => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: free_solid_svg_icons_1.faGripVertical }) }), showCheckbox &&
+                                (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: tree_style_1.classes.checkbox, checked: status === 2, indeterminate: status === 1, onClick: e => {
+                                        e.stopPropagation();
+                                        clickHandler();
+                                    } }), !!prefix &&
+                                (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.label, children: label }), !!suffix &&
+                                (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.suffix, children: suffix }), typeof dragging !== 'undefined' && dragging !== value &&
+                                (0, jsx_runtime_1.jsxs)("div", { className: tree_style_1.classes.dragMask, onPointerOver: overingMask, onPointerLeave: leaveMask, children: [(0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.dragMaskPrev, "data-overing": overing === value && placement.current === 'before', onPointerEnter: e => onPointerEnter(e, 'before'), onPointerLeave: onPointerLeave }), (!hasChildren || !expandedSet.has(value)) &&
+                                            (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.dragMaskNext, "data-offset": !hasChildren && isOffsetSatisfied, "data-overing": overing === value && placement.current === 'after', onPointerEnter: e => onPointerEnter(e, 'after'), onPointerLeave: onPointerLeave })] })] })] }), hasChildren &&
+                (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { className: tree_style_1.classes.levelBlock, in: currentExpanded, children: react_1.Children.map(props.children, child => {
                         return (0, react_1.isValidElement)(child)
                             ? (0, react_1.cloneElement)(child, { _level: _level + 1 })
                             : child;

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

@@ -1,10 +1,10 @@
-import { ReactElement, ReactNode, Ref, JSX } from 'react';
+import { ReactElement, ReactNode, Ref, ComponentProps } from 'react';
 import { PopperProps, PopperRef } from '../popper';
 import { NodeType, TreeBaseProps, TreeNode } from '../tree';
 import { Id, SelectableSingleProps } from '../../types';
 interface TreeSelectBaseProps<N extends NodeType<V>, V extends Id = Id> extends TreeBaseProps<N, V> {
     /** <select />内部由<input />实现 */
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: ComponentProps<'input'>;
     popperProps?: PopperProps;
     popperRef?: Ref<PopperRef>;
     options?: N[];

package/dist/cjs/components/treeSelect/treeSelect.js

@@ -67,16 +67,16 @@ placeholder = '请选择', autoFocus, clearable, onClear, ...props }) => {
             return renderBackfill(innerValue);
         }
         if (props.multiple) {
-            return (0, utils_1.toArray)(innerValue)?.map(v => (0, jsx_runtime_1.jsx)(tag_1.Tag, { closable: true, onClose: () => toggleSelected(v), children: optionsMap.get(v)?.[props.labelKey] ?? v }, v));
+            return (0, utils_1.toArray)(innerValue)?.map((v) => (0, jsx_runtime_1.jsx)(tag_1.Tag, { closable: true, onClose: () => toggleSelected(v), children: optionsMap.get(v)?.[props.labelKey] ?? v }, v));
         }
         return ((0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.backfillWrap, children: optionsMap.get(innerValue)?.[props.labelKey] ?? innerValue }));
     };
     return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: popper_style_1.popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: (0, jsx_runtime_1.jsx)(tree_1.Tree, { ...props, nodes: options, value: innerValue, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
             popperProps?.onPointerDown?.(e);
             e.preventDefault();
-        }, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { clearable: !!props.multiple, css: treeSelect_style_1.style, className: (0, utils_1.clsx)(treeSelect_style_1.classes.root, props.className), "data-focused": open, value: innerValue, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsxs)("div", { className: treeSelect_style_1.classes.contentWrap, children: [!(0, utils_1.toArray)(innerValue)?.length
+        }, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { clearable: !!props.multiple, css: treeSelect_style_1.style, className: (0, utils_1.clsx)(treeSelect_style_1.classes.root, props.className), "data-focused": open, value: innerValue, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: inputBaseProps => (0, jsx_runtime_1.jsxs)("div", { className: treeSelect_style_1.classes.contentWrap, children: [!(0, utils_1.toArray)(innerValue)?.length
                         ? (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.placeholder, children: placeholder })
-                        : (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { size: 1, ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputProps?.ref), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.arrow, "data-open": open, children: loading
+                        : (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { size: 1, ...(0, utils_1.mergeComponentProps)(inputBaseProps, inputProps), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.arrow, "data-open": open, children: loading
                             ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {})
                             : (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faChevronDown_1.faChevronDown }) })] }) }) }));
 });

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

@@ -1,4 +1,4 @@
-import { Dispatch, ReactElement, ReactNode, SetStateAction, JSX } from 'react';
+import { Dispatch, ReactElement, ReactNode, SetStateAction, ComponentProps } from 'react';
 import { DivProps } from '../../types';
 import { ButtonProps } from '../button';
 import { DropArea } from './dropArea';
@@ -15,7 +15,7 @@ export interface UploadSharedProps<R = any, A extends any[] = any[]> {
     onUpload?(files: UploadFile<R, A>[], setProgress: Dispatch<SetStateAction<number>>, ...args: A): Promise<R>;
 }
 export interface UploadProps<R = any, A extends any[] = any[]> extends UploadSharedProps<R, A>, Omit<DivProps, 'defaultValue' | 'onChange'> {
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: ComponentProps<'input'>;
     accept?: string;
     max?: number;
     /**

package/dist/cjs/components/upload/upload.js

@@ -65,7 +65,6 @@ exports.Upload = (0, react_1.memo)(({ inputProps, type = 'file', accept = type =
         innerInputRef.current.click();
     };
     const inputChangeHandler = (e) => {
-        inputProps?.onChange?.(e);
         changeFn(e.target.files);
         // 触发onChange后需要清空输入框的值，避免下次上传相同文件时不触发onChange
         e.target.value = '';
@@ -95,7 +94,11 @@ exports.Upload = (0, react_1.memo)(({ inputProps, type = 'file', accept = type =
         const newValue = (0, utils_1.onDndDragEnd)(e, innerValue.current);
         newValue && setInnerValue(newValue);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: wrapperRef, css: upload_style_1.style, className: (0, utils_1.clsx)(upload_style_1.classes.root, props.className), "data-file-type": type, "data-variant": variant, "data-sortable": sortable, children: [(0, jsx_runtime_1.jsx)("input", { type: "file", accept: accept, multiple: max !== 1, ...inputProps, ref: (0, utils_1.cloneRef)(innerInputRef, inputProps?.ref), className: (0, utils_1.clsx)(upload_style_1.classes.input, inputProps?.className), onChange: inputChangeHandler, "data-hidden": "true" }), (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: innerValue.current, disabled: !sortable, children: type === 'file'
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: wrapperRef, css: upload_style_1.style, className: (0, utils_1.clsx)(upload_style_1.classes.root, props.className), "data-file-type": type, "data-variant": variant, "data-sortable": sortable, children: [(0, jsx_runtime_1.jsx)("input", { type: "file", accept: accept, multiple: max !== 1, ...(0, utils_1.mergeComponentProps)(inputProps, {
+                    ref: innerInputRef,
+                    className: upload_style_1.classes.input,
+                    onChange: inputChangeHandler
+                }), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: innerValue.current, disabled: !sortable, children: type === 'file'
                         ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [droppable
                                     ? (0, jsx_runtime_1.jsx)(dropArea_1.DropArea, { onClick: () => innerInputRef.current.click(), onDrop: changeFn })
                                     : showButton &&

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

@@ -3,14 +3,14 @@ export declare const classes: {
     input: string;
     progress: string;
     image: string;
-    icon: string;
     name: string;
+    icon: string;
     file: string;
     files: string;
     images: string;
     control: string;
-    imageWrap: string;
     sortable: string;
+    imageWrap: string;
 } & {
     root: string;
 };

package/dist/cjs/extensions/curd/curd.d.ts

@@ -3,6 +3,26 @@ import { CurdBaseProps, CurdColumn } from '../../components/curd';
 import { DataGridProps, RowType } from '../../components/dataGrid';
 import { FormValue } from '../../components/form';
 import { Id } from '../../types';
+/**
+ * @example
+ * ```ts
+ * @CURD()
+ * class ExampleComponent extends React.Component {
+ *     @CURD.Column({title: '姓名'})
+ *     username!: string
+ *
+ *     @CURD.Column({title: '性别'})
+ *     gender(row: RowType) {
+ *         return row.gender === 'male' ? '男' : '女'
+ *     }
+ *
+ *     @CURD.OnCreate()
+ *     onCreate(formValue: FormValue) {
+ *
+ *     }
+ * }
+ * ```
+ */
 /**
  * -------------------------------------------------------------------
  * 类修饰器

package/dist/cjs/extensions/curd/curd.js

@@ -17,6 +17,26 @@ exports.RowToForm = RowToForm;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const curd_1 = require("../../components/curd");
 const dataGrid_1 = require("../../components/dataGrid");
+/**
+ * @example
+ * ```ts
+ * @CURD()
+ * class ExampleComponent extends React.Component {
+ *     @CURD.Column({title: '姓名'})
+ *     username!: string
+ *
+ *     @CURD.Column({title: '性别'})
+ *     gender(row: RowType) {
+ *         return row.gender === 'male' ? '男' : '女'
+ *     }
+ *
+ *     @CURD.OnCreate()
+ *     onCreate(formValue: FormValue) {
+ *
+ *     }
+ * }
+ * ```
+ */
 /**
  * -------------------------------------------------------------------
  * 类修饰器

package/dist/cjs/extensions/documentViewer/pdfViewer.d.ts

@@ -1,5 +1,5 @@
-import { JSX } from 'react';
+import { ComponentProps } from 'react';
 import { DocumentViewerBaseProps } from './documentViewer';
-export interface PdfViewerProps extends DocumentViewerBaseProps, Omit<JSX.IntrinsicElements['iframe'], 'onError'> {
+export interface PdfViewerProps extends DocumentViewerBaseProps, Omit<ComponentProps<'iframe'>, 'onError'> {
 }
 export declare const PdfViewer: import("react").MemoExoticComponent<({ src, filename, onError, setDocumentTitle, ...props }: PdfViewerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/extensions/reactiveForm/index.d.ts

@@ -0,0 +1,2 @@
+export * from './reactiveForm';
+export * from './reactiveFormItem';

package/dist/cjs/extensions/reactiveForm/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./reactiveForm"), exports);
+tslib_1.__exportStar(require("./reactiveFormItem"), exports);

package/dist/cjs/extensions/reactiveForm/reactiveForm.d.ts

@@ -0,0 +1,19 @@
+import { FormProps, FormRef } from '../../components/form';
+import { ReactElement, Ref } from 'react';
+import { ReactiveFormItem } from './reactiveFormItem';
+export type ReactiveFormPropsRef = Pick<FormRef, 'submit' | 'getFormErrors' | 'getFieldError' | 'resetForm' | 'resetField' | 'isFormTouched' | 'isFieldTouched'>;
+export interface ReactiveFormProps extends Omit<FormProps, 'ref' | 'initialValue' | 'onChange' | 'onFinish' | 'items'> {
+    ref?: Ref<ReactiveFormPropsRef>;
+    onChange?(): void;
+    onFinish?(): void;
+}
+export declare function useReactiveFormContext(): Pick<ReactiveFormProps, "onChange">;
+export declare const ReactiveForm: {
+    (props: ReactiveFormProps): ReactElement;
+    Item: typeof ReactiveFormItem;
+};
+/** Alias {@link ReactiveForm} */
+export declare const RF: {
+    (props: ReactiveFormProps): ReactElement;
+    Item: typeof ReactiveFormItem;
+};

package/dist/cjs/extensions/reactiveForm/reactiveForm.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RF = exports.ReactiveForm = void 0;
+exports.useReactiveFormContext = useReactiveFormContext;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@canlooks/reactive/react");
+const form_1 = require("../../components/form");
+const react_2 = require("react");
+const reactiveFormItem_1 = require("./reactiveFormItem");
+const ReactiveFormContext = (0, react_2.createContext)({});
+function useReactiveFormContext() {
+    return (0, react_2.useContext)(ReactiveFormContext);
+}
+exports.ReactiveForm = (0, react_1.RC)(({ ref, onChange, onFinish, ...props }) => {
+    const innerFormRef = (0, react_2.useRef)(null);
+    (0, react_2.useImperativeHandle)(ref, () => ({
+        submit: innerFormRef.current.submit,
+        getFormErrors: innerFormRef.current.getFormErrors,
+        getFieldError: innerFormRef.current.getFieldError,
+        resetForm: innerFormRef.current.resetForm,
+        resetField: innerFormRef.current.resetField,
+        isFormTouched: innerFormRef.current.isFormTouched,
+        isFieldTouched: innerFormRef.current.isFieldTouched
+    }));
+    return ((0, jsx_runtime_1.jsx)(ReactiveFormContext, { value: (0, react_2.useMemo)(() => ({ onChange }), [onChange]), children: (0, jsx_runtime_1.jsx)(form_1.Form, { ...props, ref: innerFormRef, onFinish: () => onFinish?.() }) }));
+});
+exports.ReactiveForm.Item = reactiveFormItem_1.ReactiveFormItem;
+/** Alias {@link ReactiveForm} */
+exports.RF = exports.ReactiveForm;

package/dist/cjs/extensions/reactiveForm/reactiveFormItem.d.ts

@@ -0,0 +1,7 @@
+import { ModelProps } from '@canlooks/reactive/react';
+import { FormItemProps } from '../../components/form';
+import { ReactElement } from 'react';
+export interface ReactiveFormItemProps<I = any> extends Omit<ModelProps, 'children'>, Omit<FormItemProps<I>, 'initialValue' | 'dependencies'> {
+    dependencies?(): any;
+}
+export declare const ReactiveFormItem: <I = any>(props: ReactiveFormItemProps<I>) => ReactElement;

package/dist/cjs/extensions/reactiveForm/reactiveFormItem.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactiveFormItem = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@canlooks/reactive/react");
+const form_1 = require("../../components/form");
+const react_2 = require("react");
+const utils_1 = require("../../utils");
+const reactiveForm_1 = require("./reactiveForm");
+exports.ReactiveFormItem = (0, react_1.RC)(({ refer, postValue, dependencies, ...props }) => {
+    if (refer && (typeof props.children === 'function' || (0, react_2.isValidElement)(props.children))) {
+        return ((0, jsx_runtime_1.jsx)(react_1.Model, { refer: refer, postValue: postValue, children: (0, jsx_runtime_1.jsx)(InnerFormItem, { ...props, dependencies: dependencies }) }));
+    }
+    return (0, jsx_runtime_1.jsx)(form_1.FormItem, { ...props });
+});
+function InnerFormItem({ dependencies, checked, value, onChange, ...props }) {
+    const formItemRef = (0, react_2.useRef)(null);
+    (0, react_1.useReactor)(() => dependencies?.(), () => {
+        formItemRef.current.validate().then();
+    });
+    const context = (0, reactiveForm_1.useReactiveFormContext)();
+    const fieldProps = {
+        checked,
+        value,
+        onChange(e) {
+            onChange?.(e);
+            context.onChange?.();
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(form_1.FormItem, { ...props, ref: (0, utils_1.cloneRef)(formItemRef, props.ref), _fieldValue: checked ?? value, children: (_, styleProps, key) => {
+            return typeof props.children === 'function'
+                ? props.children(fieldProps, styleProps, key)
+                : (0, react_2.cloneElement)(props.children, {
+                    key,
+                    ...fieldProps,
+                    ...styleProps
+                });
+        } }));
+}

package/dist/cjs/index.d.ts

@@ -67,6 +67,7 @@ export * from './components/segmented';
 export * from './components/select';
 export * from './components/selectedList';
 export * from './components/selectionContext';
+export * from './components/serialInput';
 export * from './components/skeleton';
 export * from './components/slidableActions';
 export * from './components/slider';

package/dist/cjs/index.js

@@ -70,6 +70,7 @@ tslib_1.__exportStar(require("./components/segmented"), exports);
 tslib_1.__exportStar(require("./components/select"), exports);
 tslib_1.__exportStar(require("./components/selectedList"), exports);
 tslib_1.__exportStar(require("./components/selectionContext"), exports);
+tslib_1.__exportStar(require("./components/serialInput"), exports);
 tslib_1.__exportStar(require("./components/skeleton"), exports);
 tslib_1.__exportStar(require("./components/slidableActions"), exports);
 tslib_1.__exportStar(require("./components/slider"), exports);

package/dist/cjs/types.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithRef, ElementType, JSX, ReactElement } from 'react';
+import { ComponentProps, ComponentPropsWithRef, ElementType, ReactElement } from 'react';
 /**
  * ----------------------------------------------------------------------------------
  * Helpers
@@ -35,7 +35,7 @@ export type ResponsiveProp<T = number> = T | ResponsiveValue<T>;
  * ----------------------------------------------------------------------------------
  * Override props
  */
-export type DivProps = JSX.IntrinsicElements['div'];
+export type DivProps = ComponentProps<'div'>;
 export type MergeProps<P, OverrideProps> = P & Omit<OverrideProps, keyof P>;
 export type OverridableProps<P, C extends ElementType> = {
     component?: C;

package/dist/cjs/utils/curd.js

@@ -122,8 +122,11 @@ function useCurdColumns({ columns, columnConfigurable }) {
             if (!(0, utils_1.isUnset)(col._key) && visibleSet.has(col._key)) {
                 const symbolArr = symbolBoundToNext.current.get(col) || [];
                 // 移除DataGrid不需要的属性
-                const { filter, form, ...c } = col;
-                return [...symbolArr, { ...c }];
+                const { filterInline, filter, form, ...c } = col;
+                return [
+                    ...symbolArr,
+                    { ...c, filter: filterInline }
+                ];
             }
             return [];
         });

package/dist/cjs/utils/dataGrid.d.ts

@@ -1,16 +1,17 @@
 import { Id, Obj } from '../types';
 import { ColumnType, DataGridProps, RowType } from '../components/dataGrid';
+import { CurdColumn } from '../components/curd';
 /**
  * 为列添加key
  * @param col
  * @param index
  */
-export declare function setDefaultColumnKey<R extends Obj>(col: Pick<ColumnType<R>, 'key' | 'field'>, index: number): string | number;
+export declare function setDefaultColumnKey<R extends Obj>(col: Pick<ColumnType<R>, 'key' | 'field'>, index: number): Id;
 /**
  * 索引列
  * @param columns
  */
-export declare function useColumnMap<C extends ColumnType<any>>(columns?: (C | symbol)[]): Map<Id, C>;
+export declare function useColumnMap<C extends ColumnType<any> | CurdColumn<any>>(columns?: (C | symbol)[]): Map<Id, C>;
 /**
  * 统一处理DataGrid列
  * @param param0

package/dist/cjs/utils/hooks.js

@@ -16,11 +16,11 @@ const utils_1 = require("./utils");
  * @param value
  */
 function usePrev(value) {
-    const v = (0, react_1.useRef)(null);
+    const prev = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        v.current = value;
+        prev.current = value;
     });
-    return v.current;
+    return prev.current;
 }
 /**
  * 将某个值使用ref同步，主要用于对付组件的闭包问题

package/dist/cjs/utils/index.d.ts

@@ -1,6 +1,4 @@
 export * from './bezier';
-export * from './curd';
-export * from './dataGrid';
 export * from './dnd';
 export * from './form';
 export * from './gesture';
@@ -10,3 +8,5 @@ export * from './polyfill';
 export * from './style';
 export * from './tree';
 export * from './utils';
+export * from './dataGrid';
+export * from './curd';

package/dist/cjs/utils/index.js

@@ -2,8 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./bezier"), exports);
-tslib_1.__exportStar(require("./curd"), exports);
-tslib_1.__exportStar(require("./dataGrid"), exports);
 tslib_1.__exportStar(require("./dnd"), exports);
 tslib_1.__exportStar(require("./form"), exports);
 tslib_1.__exportStar(require("./gesture"), exports);
@@ -13,3 +11,5 @@ tslib_1.__exportStar(require("./polyfill"), exports);
 tslib_1.__exportStar(require("./style"), exports);
 tslib_1.__exportStar(require("./tree"), exports);
 tslib_1.__exportStar(require("./utils"), exports);
+tslib_1.__exportStar(require("./dataGrid"), exports);
+tslib_1.__exportStar(require("./curd"), exports);

package/dist/cjs/utils/utils.d.ts

@@ -1,5 +1,5 @@
-import { Ref, ReactNode } from 'react';
-import { Id } from '../types';
+import { Ref, ReactNode, ElementType, ComponentProps } from 'react';
+import { Id, Obj } from '../types';
 /**
  * 生成最简易的随机ID
  * @param namespace
@@ -22,10 +22,11 @@ export declare function clsx(...classes: any[]): string;
  */
 export declare function humpToSegmented(str: string, separator?: string): string;
 /**
- * 将某个值统一转换成数组或undefined
+ * 将某个值统一转换成数组或null
  * @param value
  */
-export declare function toArray<T>(value: undefined | null | T | T[]): T[] | null;
+export declare function toArray(value?: undefined | null): null;
+export declare function toArray<T>(value: T): T extends any[] ? T : T extends undefined | null ? null : T[];
 /**
  * 判断某个值是否为已选中
  * @param value 需要判断的值
@@ -102,11 +103,11 @@ export declare function fixInputNumber(value: string, { min, max, precision }: F
  */
 export declare function isChildOf(target: Element | null, container?: Element | null): boolean;
 /**
- * 从某个元素开始，一直向上查找，返回true表示找到，会停止递归
+ * 从某个元素开始，一直向上查找
  * @param target
- * @param callback
+ * @param callback 返回true表示找到，会停止递归
  */
-export declare function findPredecessor(target: Element, callback: (el: Element) => any): HTMLElement | null;
+export declare function findPredecessor(target: Element, callback: (parent: HTMLElement) => any): HTMLElement | null;
 /**
  * 监听某个元素的所有祖先元素的滚动事件
  * @param target
@@ -123,12 +124,19 @@ export declare function range(value: number, min?: number, max?: number): number
  * @param obj
  * @param keyPath
  * @param setValue
- * @param separator
+ * @param separator 分隔符，默认为`.`
  */
-export declare function queryDeep<T extends object = any, U = any>(obj: T, keyPath: Id | Id[], setValue?: (oldValue: any) => U, separator?: string): U;
+export declare function queryDeep<T = any>(obj: any, keyPath: PropertyKey | PropertyKey[], setValue?: (oldValue: any) => T, separator?: string): T;
+export declare function queryDeep<T = any>(obj: any, keyPath: PropertyKey | PropertyKey[], separator?: string, setValue?: (oldValue: any) => T): T;
 /**
  * 过滤对象中值为undefined属性
  * @param obj
  * @param undefinedValue 可传入该值，用于替换undefined以删除其他属性
  */
 export declare function filterProperties<T extends Record<string, any>>(obj: T, undefinedValue?: any): T;
+/**
+ * 合并属性
+ */
+type ExtendableProps<T> = (T extends ElementType ? ComponentProps<T> : T) & Obj;
+export declare function mergeComponentProps<T>(...props: (Partial<ExtendableProps<T>> | undefined)[]): ExtendableProps<T>;
+export {};