@canlooks/can-ui 0.0.1

package/dist/cjs/components/counter/counter.style.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const button_style_1 = require("../button/button.style");
+const input_style_1 = require("../input/input.style");
+exports.classes = (0, utils_1.defineClasses)('counter', [
+    'input'
+]);
+exports.style = (0, utils_1.defineCss)(({ divider }) => (0, react_1.css) `
+    display: inline-flex;
+
+    .${button_style_1.classes.root} {
+        z-index: 1;
+
+        &[data-variant=outlined], &[data-variant=dashed] {
+            border-color: ${divider};
+        }
+    }
+
+    .${exports.classes.input} {
+        input {
+            text-align: center;
+            
+            &::-webkit-inner-spin-button,
+            &::-webkit-outer-spin-button {
+                display: none;
+            }
+        }
+
+        .${input_style_1.classes.adaptable} {
+            display: flex;
+            min-width: 60px;
+        }
+    }
+`);

package/dist/cjs/components/counter/index.d.ts

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

package/dist/cjs/components/counter/index.js

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

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

@@ -0,0 +1,100 @@
+import { ReactElement, ReactNode, Ref } from 'react';
+import { DIVProps, Id, Obj } from '../../../types';
+import { ColumnType, DataGridBaseProps, DataGridMultipleProps, DataGridSingleProps, OrderType, RowType } from '../dataGrid';
+import { FormItemProps, FormProps, FormRef, FormValue } from '../form';
+import { CurdFilter, CurdFilterProps } from './curdFilter';
+import { FieldPath } from '../../utils';
+import { ButtonProps } from '../button';
+import { CurdDialogProps } from './curdDialog';
+import { BubbleConfirmProps } from '../bubbleConfirm';
+export type CurdFormItemProps<I = any> = FormItemProps<I> & {
+    /** 对filter或form内的字段单独排序，数字越大越靠后，@default 0 */
+    order?: number;
+} & Obj;
+export type CurdFormItemType<I = any> = CurdFormItemProps<I> | ReactElement | true;
+export interface CurdColumn<R extends RowType = RowType> extends ColumnType<R> {
+    /** 在表格中隐藏，表明该列只用于filter或form */
+    hideInTable?: boolean;
+    filter?: CurdFormItemType | (() => CurdFormItemType);
+    form?: CurdFormItemType | ((activeRow?: R) => CurdFormItemType);
+}
+export type LoadRowsReturn<R extends RowType> = {
+    rows: R[];
+    /** 必须返回总数才能使翻页正常工作 */
+    total: number;
+};
+type EachRowType<R extends RowType, T> = T | ((row: R) => T);
+export interface CurdBaseProps<R extends RowType, F extends FormValue> extends DataGridBaseProps<R> {
+    /** 默认属性会传递给DataGrid组件，外层包裹元素的属性使用wrapperProps */
+    wrapperProps?: DIVProps;
+    wrapperRef?: Ref<HTMLDivElement>;
+    /** 嵌入式样式通常用于Dialog或Card组件内 */
+    variant?: 'standard' | 'embeded';
+    loadRows?: (pagination?: {
+        page: number;
+        pageSize: number;
+    }, filterValue?: FormValue, sorter?: {
+        field: FieldPath;
+        type: OrderType;
+    }) => LoadRowsReturn<R> | Promise<LoadRowsReturn<R>>;
+    columns?: (CurdColumn<R> | symbol)[];
+    toolbarLeft?: ReactNode;
+    toolbarRight?: ReactNode;
+    reloadable?: boolean;
+    onReload?(): void;
+    resizable?: boolean;
+    columnConfigurable?: boolean | {
+        defaultVisible?: Id[];
+        visible?: Id[];
+        onVisibleChange?(visible: Id[]): void;
+        defaultOrder?: Id[];
+        order?: Id[];
+        onOrderChange?(order: Id[]): void;
+    };
+    filterProps?: CurdFilterProps<R>;
+    filterRef?: Ref<FormRef>;
+    initialFilterValue?: CurdFilterProps<R>['initialValue'];
+    onFilter?(filterValue: FormValue): void;
+    renderFilter?(filterProps: CurdFilterProps<R>): ReactNode;
+    copyable?: boolean;
+    creatable?: boolean;
+    updatable?: EachRowType<R, boolean>;
+    deletable?: EachRowType<R, boolean>;
+    createButtonProps?: ButtonProps;
+    updateButtonProps?: EachRowType<R, ButtonProps>;
+    deleteButtonProps?: EachRowType<R, ButtonProps>;
+    deleteConfirmProps?: BubbleConfirmProps;
+    controlColumnTitle?: ReactNode;
+    /** 渲染额外的操作项，不会影响"编辑"与"删除"按钮 */
+    renderExtraControl?(row: R): ReactNode;
+    /** 用于做每行数据标题的字段 */
+    titleKey?: keyof R;
+    /** 数据的名称，@default "数据" */
+    dataName?: ReactNode;
+    /** create操作的名称，@default "添加" */
+    createName?: ReactNode;
+    /** update操作的名称，@default "编辑" */
+    updateName?: ReactNode;
+    /** delete操作的名称，@default "删除" */
+    deleteName?: ReactNode;
+    /** create操作完成后触发，若返回promise则会等待promise返回再触发loadRows */
+    onCreate?(formValue: F): any;
+    onUpdate?(formValue: F, row: R): any;
+    onDelete?(row: R): any;
+    /** 行数据转换为表单值的方法，若不指定，行数据会直接填入表单 */
+    postData?(row: R): F | Promise<F>;
+    dialogProps?: CurdDialogProps<R, F>;
+    formProps?: FormProps<F>;
+    formRef?: Ref<FormRef<F>>;
+}
+interface CurdSingleProps<R extends RowType, V extends Id = Id, F extends FormValue = FormValue> extends Omit<DataGridSingleProps<R, V>, 'columns'>, CurdBaseProps<R, F> {
+}
+interface CurdMultipleProps<R extends RowType, V extends Id = Id, F extends FormValue = FormValue> extends Omit<DataGridMultipleProps<R, V>, 'columns'>, CurdBaseProps<R, F> {
+}
+export type CurdProps<R extends RowType, V extends Id = Id, F extends FormValue = FormValue> = CurdSingleProps<R, V, F> | CurdMultipleProps<R, V, F>;
+export declare const Curd: {
+    <R extends RowType, V extends Id = Id, F extends FormValue = FormValue>(props: CurdProps<R, V, F>): ReactElement;
+    Filter: typeof CurdFilter;
+    CONTROL_COLUMN: symbol;
+};
+export {};

package/dist/cjs/components/curd/curd.js

@@ -0,0 +1,187 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Curd = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const dataGrid_1 = require("../dataGrid");
+const curdFilter_1 = require("./curdFilter");
+const curd_style_1 = require("./curd.style");
+const utils_1 = require("../../utils");
+const button_1 = require("../button");
+const icons_1 = require("@ant-design/icons");
+const tooltip_1 = require("../tooltip");
+const curdColumnConfig_1 = require("./curdColumnConfig");
+const curdResizable_1 = require("./curdResizable");
+const pagination_1 = require("../pagination");
+const divider_1 = require("../divider");
+const curdDialog_1 = require("./curdDialog");
+const app_1 = require("../app");
+const bubbleConfirm_1 = require("../bubbleConfirm");
+const selectionContext_1 = require("../selectionContext");
+exports.Curd = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
+    const { wrapperProps, wrapperRef, variant = 'standard', loadRows, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, columnConfigurable = true, filterProps, filterRef, initialFilterValue, onFilter, renderFilter, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, postData, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
+    /**
+     * -------------------------------------------------------------
+     * 筛选部分
+     */
+    const innerFilterRef = (0, react_1.useRef)(null);
+    const syncOnFilter = (0, utils_1.useSync)(onFilter);
+    const renderFilterFn = () => {
+        const _filterProps = {
+            initialValue: initialFilterValue,
+            ...filterProps,
+            ref: (0, react_1.useCallback)((0, utils_1.cloneRef)(filterRef, innerFilterRef), []),
+            columns,
+            onFilter: (0, react_1.useCallback)((filterValue) => {
+                syncOnFilter.current?.(filterValue);
+                syncLoadRows.current();
+            }, [])
+        };
+        if (renderFilter) {
+            return renderFilter(_filterProps);
+        }
+        return (0, jsx_runtime_1.jsx)(curdFilter_1.CurdFilter, { ..._filterProps });
+    };
+    /**
+     * -------------------------------------------------------------
+     * 添加操作列
+     */
+    const completedColumns = (0, react_1.useMemo)(() => {
+        if (!updatable && !deletable && !renderExtraControl) {
+            return columns;
+        }
+        const controlColumn = {
+            key: '$control',
+            title: controlColumnTitle,
+            render(row) {
+                const _updatable = typeof updatable === 'function' ? updatable(row) : updatable;
+                const _deletable = typeof deletable === 'function' ? deletable(row) : deletable;
+                const _updateProps = _updatable ? (typeof updateButtonProps === 'function' ? updateButtonProps(row) : updateButtonProps) : void 0;
+                const _deleteProps = _deletable ? (typeof deleteButtonProps === 'function' ? deleteButtonProps(row) : deleteButtonProps) : void 0;
+                return ((0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.control, children: [renderExtraControl?.(row), _updatable &&
+                            (0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icons_1.EditOutlined, {}), variant: "plain", ..._updateProps, onClick: e => {
+                                    _updateProps?.onClick?.(e);
+                                    updateHandler(row);
+                                }, children: "\u7F16\u8F91" }), _deletable &&
+                            (0, jsx_runtime_1.jsx)(bubbleConfirm_1.BubbleConfirm, { title: `删除${dataName}`, content: `删除后不可恢复，确定要删除该${dataName || '数据'}吗？`, ...deleteConfirmProps, onConfirm: e => deleteHandler(row, e), children: (0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icons_1.DeleteOutlined, {}), variant: "plain", color: "error", ..._deleteProps, children: "\u5220\u9664" }) })] }));
+            }
+        };
+        return [...columns || [], controlColumn];
+    }, [columns, updatable, deletable]);
+    const { orderedColumns, actualColumns, innerVisible, setInnerVisible, setInnerOrder } = (0, utils_1.useCurdColumns)({
+        columns: completedColumns,
+        columnConfigurable
+    });
+    /**
+     * -------------------------------------------------------------
+     * 表格设置
+     */
+    const [innerSize, setInnerSize] = (0, utils_1.useDerivedState)(props.tableProps?.size || 'medium');
+    const [innerPage, setInnerPage] = (0, utils_1.useControlled)(props.paginationProps?.defaultPage ?? 1, props.paginationProps?.page, props.paginationProps?.onPageChange);
+    const [innerPageSize, setInnerPageSize] = (0, utils_1.useControlled)(props.paginationProps?.defaultPageSize ?? 10, props.paginationProps?.pageSize, props.paginationProps?.onPageSizeChange);
+    const [innerOrderColumn, setInnerOrderColumn] = (0, utils_1.useControlled)(props.defaultOrderColumn, props.orderColumn);
+    const [innerOrderType, setInnerOrderType] = (0, utils_1.useControlled)(props.defaultOrderType || 'descend', props.orderType);
+    const orderChangeHandler = (orderColumn, orderType) => {
+        setInnerOrderColumn(orderColumn);
+        setInnerOrderType(orderType);
+    };
+    /**
+     * -------------------------------------------------------------
+     * 行数据
+     */
+    const { setInnerOptions } = (0, selectionContext_1.useSelectionContext)();
+    const [innerRows, _setInnerRows] = (0, utils_1.useDerivedState)(props.rows);
+    (0, react_1.useEffect)(() => {
+        innerRows.current?.length && setInnerOptions?.(innerRows.current);
+    }, []);
+    const setInnerRows = (data) => {
+        setInnerOptions?.(data);
+        _setInnerRows(data);
+    };
+    const [innerTotal, setInnerTotal] = (0, utils_1.useDerivedState)(props.paginationProps?.total || 0);
+    const [innerLoading, innerLoadRows] = (0, utils_1.useLoading)(async () => {
+        if (loadRows) {
+            const res = await loadRows(props.paginatable !== false
+                ? {
+                    page: innerPage.current,
+                    pageSize: innerPageSize.current,
+                }
+                : void 0, innerFilterRef.current?.getFormValue(), innerOrderColumn.current
+                ? {
+                    field: innerOrderColumn.current,
+                    type: innerOrderType.current
+                }
+                : void 0);
+            if (res) {
+                setInnerRows(res.rows);
+                setInnerTotal(res.total);
+            }
+        }
+    }, props.loading);
+    (0, react_1.useEffect)(() => {
+        innerLoadRows();
+    }, [innerPage.current, innerPageSize.current, innerOrderColumn.current, innerOrderType.current]);
+    const reloadHandler = () => {
+        onReload?.();
+        innerLoadRows();
+    };
+    const syncLoadRows = (0, utils_1.useSync)(innerLoadRows);
+    /**
+     * -------------------------------------------------------------
+     * 弹窗与曾删改部分
+     */
+    const curdDialogRef = (0, react_1.useRef)(null);
+    const activeRow = (0, react_1.useRef)();
+    const createHandler = (e) => {
+        createButtonProps?.onClick?.(e);
+        activeRow.current = void 0;
+        curdDialogRef.current.open();
+    };
+    const updateHandler = (row) => {
+        activeRow.current = row;
+        curdDialogRef.current.open(row);
+    };
+    const { message } = (0, app_1.useAppContext)();
+    const syncProps = (0, utils_1.useSync)({ dialogProps, onCreate, onUpdate });
+    const finishHandler = (0, react_1.useCallback)(async (formValue) => {
+        const { dialogProps, onCreate, onUpdate } = syncProps.current;
+        dialogProps?.onFinish?.(formValue);
+        if (activeRow.current) {
+            await onUpdate?.(formValue, activeRow.current);
+            innerLoadRows();
+            message.success(updateName + '成功');
+        }
+        else {
+            await onCreate?.(formValue);
+            if (innerPage.current !== 1) {
+                // 翻页也会触发innerLoadRows()，因此不在第一页时，直接翻至第一页即可
+                setInnerPage(1);
+            }
+            else {
+                innerLoadRows();
+            }
+            message.success(createName + '成功');
+        }
+    }, []);
+    const deleteHandler = async (row, e) => {
+        deleteConfirmProps?.onConfirm?.(e);
+        await onDelete?.(row);
+        innerLoadRows();
+        message.success(deleteName + '成功');
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ...wrapperProps, ref: wrapperRef, css: curd_style_1.style, className: (0, utils_1.classnames)(curd_style_1.classes.root, wrapperProps?.className), "data-variant": variant, children: [renderFilterFn(), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
+                (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbar, children: [(0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbarLeft, children: [creatable &&
+                                    (0, jsx_runtime_1.jsxs)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icons_1.PlusOutlined, {}), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbarRight, children: [!!toolbarRight &&
+                                    (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolbarRight, (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: curd_style_1.classes.divider, orientation: "vertical" })] }), reloadable &&
+                                    (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u5237\u65B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text", prefix: (0, jsx_runtime_1.jsx)(icons_1.ReloadOutlined, {}), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
+                                    (0, jsx_runtime_1.jsx)(curdResizable_1.CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), !!columnConfigurable &&
+                                    (0, jsx_runtime_1.jsx)(curdColumnConfig_1.CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), (0, jsx_runtime_1.jsx)("div", { className: curd_style_1.classes.card, children: (0, jsx_runtime_1.jsx)(dataGrid_1.DataGrid, { ...dataGridProps, ref: ref, columns: actualColumns, tableProps: {
+                        ...props.tableProps,
+                        ...resizable && { size: innerSize.current }
+                    }, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
+                        ? () => (0, jsx_runtime_1.jsx)(pagination_1.Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
+                        : props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler }) }), (creatable || updatable) &&
+                (0, jsx_runtime_1.jsx)(curdDialog_1.CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }));
+}));
+exports.Curd.Filter = curdFilter_1.CurdFilter;
+exports.Curd.CONTROL_COLUMN = Symbol('control-column');

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

@@ -0,0 +1,21 @@
+export declare const classes: {
+    divider: string;
+    card: string;
+    toolbar: string;
+    filter: string;
+    filterGridContainer: string;
+    filterGrid: string;
+    filterItem: string;
+    filterControl: string;
+    filtered: string;
+    filteredTitle: string;
+    toolbarLeft: string;
+    toolbarRight: string;
+    control: string;
+    dialogTitle: string;
+    copyButton: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const dialogStyle: () => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/curd/curd.style.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dialogStyle = exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('curd', [
+    'filter',
+    'filterGridContainer',
+    'filterGrid',
+    'filterItem',
+    'filterControl',
+    'filtered',
+    'filteredTitle',
+    'toolbar',
+    'toolbarLeft',
+    'toolbarRight',
+    'divider',
+    'card',
+    'control',
+    'dialogTitle',
+    'copyButton'
+]);
+exports.style = (0, utils_1.defineCss)(({ spacing, text, background, borderRadius }) => (0, react_1.css) `
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+
+    .${exports.classes.filter} {
+        display: flex;
+
+        .${exports.classes.filterGridContainer},
+        .${exports.classes.filterGrid} {
+            flex: 1;
+        }
+
+        .${exports.classes.filterControl} {
+            align-self: flex-end;
+            margin-bottom: ${spacing[4]}px;
+        }
+    }
+
+    .${exports.classes.filtered} {
+        display: flex;
+        align-items: center;
+        margin-bottom: ${spacing[8]}px;
+
+        .${exports.classes.filteredTitle} {
+            color: ${text.secondary};
+            font-size: ${13 / 14}em;
+        }
+    }
+
+    .${exports.classes.toolbar} {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: ${spacing[4]}px;
+
+        .${exports.classes.toolbarLeft} {
+            display: flex;
+            gap: ${spacing[2]}px;
+        }
+
+        .${exports.classes.toolbarRight} {
+            display: flex;
+
+            .${exports.classes.divider} {
+                padding: 8px 0;
+            }
+        }
+    }
+
+    .${exports.classes.card} {
+        min-height: 0;
+        border-radius: ${borderRadius}px;
+    }
+
+    &[data-variant=standard] {
+        .${exports.classes.card} {
+            background-color: ${background.card};
+            padding: ${spacing[8]}px;
+        }
+    }
+
+    .${exports.classes.control} {
+        display: flex;
+        gap: ${spacing[5]}px;
+    }
+`);
+exports.dialogStyle = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
+    .${exports.classes.dialogTitle} {
+        display: flex;
+        align-items: center;
+        gap: ${spacing[8]}px;
+    }
+`);

package/dist/cjs/components/curd/curdColumnConfig.d.ts

@@ -0,0 +1,12 @@
+import { Dispatch, ReactElement, SetStateAction } from 'react';
+import { CurdColumn } from './curd';
+import { RowType } from '../dataGrid';
+import { Id } from '../../../types';
+type CurdColumnConfigProps<R extends RowType> = {
+    columns?: CurdColumn<R>[];
+    innerVisible: Id[];
+    setInnerVisible: Dispatch<SetStateAction<Id[]>>;
+    setInnerOrder: Dispatch<SetStateAction<Id[]>>;
+};
+export declare const CurdColumnConfig: <R extends RowType>(props: CurdColumnConfigProps<R>) => ReactElement;
+export {};

package/dist/cjs/components/curd/curdColumnConfig.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurdColumnConfig = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const button_1 = require("../button");
+const icons_1 = require("@ant-design/icons");
+const bubble_1 = require("../bubble");
+const curdColumnConfig_style_1 = require("./curdColumnConfig.style");
+const menuItem_1 = require("../menuItem");
+const checkbox_1 = require("../checkbox");
+const sortableItem_1 = require("../sortableItem");
+const core_1 = require("@dnd-kit/core");
+const sortable_1 = require("@dnd-kit/sortable");
+const utils_1 = require("../../utils");
+exports.CurdColumnConfig = (0, react_1.memo)(({ columns = [], innerVisible, setInnerVisible, setInnerOrder, }) => {
+    const dragEndHandler = (e) => {
+        const newColumns = (0, utils_1.onDndDragEnd)(e, columns, '_key');
+        newColumns && setInnerOrder(newColumns.flatMap(col => col._key ?? []));
+    };
+    const visibleSet = (0, react_1.useMemo)(() => {
+        return new Set(innerVisible);
+    }, [innerVisible]);
+    const toggleVisible = (key, checked) => {
+        setInnerVisible(o => checked
+            ? [...o, key]
+            : o.filter(k => k !== key));
+    };
+    return ((0, jsx_runtime_1.jsx)(bubble_1.Bubble, { css: curdColumnConfig_style_1.style, placement: "bottomRight", content: (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: columns?.map((col, i) => col._key ?? i), children: (0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.content, children: [(0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.title, children: "\u5217\u8BBE\u7F6E" }), columns?.map((col, i) => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { id: col._key ?? i, component: menuItem_1.MenuItem, className: curdColumnConfig_style_1.classes.item, prefix: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: curdColumnConfig_style_1.classes.checkbox, checked: !(0, utils_1.isUnset)(col._key) && visibleSet.has(col._key), onChange: e => !(0, utils_1.isUnset)(col._key) && toggleVisible(col._key, e.target.checked) }), label: col.title }, col._key ?? i))] }) }) }), children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text", children: (0, jsx_runtime_1.jsx)(icons_1.SettingOutlined, {}) }) }));
+});

package/dist/cjs/components/curd/curdColumnConfig.style.d.ts

@@ -0,0 +1,9 @@
+export declare const classes: {
+    title: string;
+    content: string;
+    checkbox: string;
+    item: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/curd/curdColumnConfig.style.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('curd-column-config', [
+    'content',
+    'title',
+    'item',
+    'checkbox'
+]);
+exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
+    .${exports.classes.content} {
+        min-width: 160px;
+
+        .${exports.classes.title} {
+            font-weight: bold;
+            padding: ${spacing[3]}px;
+        }
+
+        .${exports.classes.item} {
+            cursor: move;
+
+            &[data-dragging=true] {
+                position: relative;
+                z-index: 1;
+            }
+        }
+
+        .${exports.classes.checkbox} {
+            display: flex;
+            margin-right: ${spacing[1]}px;
+        }
+    }
+`);

package/dist/cjs/components/curd/curdDialog.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement, Ref } from 'react';
+import { DialogProps } from '../dialog';
+import { RowType } from '../dataGrid';
+import { FormValue } from '../form';
+import { CurdBaseProps } from './curd';
+export type CurdDialogRef<R extends RowType = RowType, F extends FormValue = FormValue> = {
+    open(activeRow?: R): Promise<F>;
+};
+export interface CurdDialogProps<R extends RowType, F extends FormValue = FormValue> extends Omit<DialogProps, 'ref'> {
+    ref?: Ref<CurdDialogRef<R, F>>;
+    onFinish?(value: F): any;
+    curdProps: CurdBaseProps<R, F>;
+}
+export declare const CurdDialog: <R extends RowType, F extends FormValue>(props: CurdDialogProps<R, F>) => ReactElement;

package/dist/cjs/components/curd/curdDialog.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurdDialog = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const dialog_1 = require("../dialog");
+const form_1 = require("../form");
+const curd_1 = require("./curd");
+const utils_1 = require("../../utils");
+const loading_1 = require("../loading");
+const button_1 = require("../button");
+const icons_1 = require("@ant-design/icons");
+const curd_style_1 = require("./curd.style");
+const pickerDialog_1 = require("../pickerDialog");
+exports.CurdDialog = (0, react_1.memo)((0, react_1.forwardRef)(({ onFinish, 
+// 继承来的属性
+curdProps, ...props }, ref) => {
+    const { columns, postData, copyable, titleKey, formProps, formRef, dataName = '', createName = '添加', updateName = '编辑' } = curdProps;
+    /**
+     * ----------------------------------------------------------------
+     * ref与promise部分
+     */
+    const innerFormRef = (0, react_1.useRef)(null);
+    const resolveFn = (0, react_1.useRef)();
+    const rejectFn = (0, react_1.useRef)();
+    const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(props.defaultOpen, props.open);
+    const closeHandler = (reason) => {
+        if (reason === 'confirmed') {
+            return;
+        }
+        props.onClose?.(reason);
+        rejectFn.current?.({
+            type: 'canceled',
+            value: innerFormRef.current.getFormValue()
+        });
+        resolveFn.current = rejectFn.current = void 0;
+        setInnerOpen(false);
+    };
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        open(row) {
+            innerFormRef.current?.resetForm();
+            setInnerOpen(true);
+            setActiveRow(row);
+            return new Promise((resolve, reject) => {
+                resolveFn.current = resolve;
+                rejectFn.current = reject;
+            });
+        }
+    }));
+    /**
+     * ----------------------------------------------------------------
+     * 表单项
+     */
+    const [activeRow, setActiveRow] = (0, react_1.useState)();
+    const [transforming, setFormValue] = (0, utils_1.useLoading)(async (row) => {
+        const formValue = postData && row ? await postData(row) : row;
+        formValue && innerFormRef.current?.setFormValue(formValue);
+    });
+    (0, react_1.useEffect)(() => {
+        innerOpen.current && setFormValue(activeRow);
+    }, [innerOpen.current]); // 依赖innerOpen而不依赖activeRow的原因是，有可能连续两次打开的activeRow是相同的
+    const renderedFormItems = (0, react_1.useMemo)(() => {
+        return (0, utils_1.columnsToFormItem)(columns, activeRow)?.map(p => (0, jsx_runtime_1.jsx)(form_1.FormItem, { ...p }));
+    }, [columns, activeRow]);
+    /**
+     * ----------------------------------------------------------------
+     * 结果处理与loading
+     */
+    const confirmHandler = () => {
+        innerFormRef.current.submit();
+    };
+    const [innerLoading, finishHandler] = (0, utils_1.useLoading)(async (value) => {
+        formProps?.onFinish?.(value);
+        resolveFn.current?.(value);
+        await onFinish?.(value);
+        setInnerOpen(false);
+    }, props.confirmLoading);
+    /**
+     * ----------------------------------------------------------------
+     * 复制
+     */
+    const pickerDialogRef = (0, react_1.useRef)(null);
+    const copiedHandler = (checked, value, row) => {
+        const title = !(0, utils_1.isUnset)(titleKey) ? row[titleKey] : void 0;
+        typeof title === 'string'
+            ? setFormValue({
+                ...row,
+                [titleKey]: `${title} - 副本`
+            })
+            : setFormValue(row);
+    };
+    const rowTitle = activeRow && !(0, utils_1.isUnset)(titleKey) ? activeRow[titleKey] : void 0;
+    return ((0, jsx_runtime_1.jsxs)(dialog_1.Dialog, { css: curd_style_1.dialogStyle, width: 600, title: activeRow
+            ? `${updateName}${dataName}${rowTitle ? ' - ' + rowTitle : ''}`
+            : (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.dialogTitle, children: [(0, jsx_runtime_1.jsxs)("span", { children: [createName, dataName] }), copyable &&
+                        (0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "plain", prefix: (0, jsx_runtime_1.jsx)(icons_1.CopyOutlined, {}), onClick: () => pickerDialogRef.current.open(), children: ["\u4ECE\u5DF2\u6709", dataName || '数据', "\u590D\u5236"] })] }), ...props, open: innerOpen.current, onClose: closeHandler, onConfirm: confirmHandler, confirmLoading: innerLoading.current, children: [(0, jsx_runtime_1.jsx)(loading_1.Loading, { loading: transforming.current, children: (0, jsx_runtime_1.jsx)(form_1.Form, { labelWidth: "20%", ...formProps, ref: (0, utils_1.cloneRef)(formRef, innerFormRef), onFinish: finishHandler, children: renderedFormItems }) }), copyable &&
+                (0, jsx_runtime_1.jsx)(pickerDialog_1.PickerDialog, { ref: pickerDialogRef, onToggle: copiedHandler, children: (0, jsx_runtime_1.jsx)(curd_1.Curd, { ...curdProps, variant: "embeded", copyable: false, creatable: false, updatable: false, deletable: false }) })] }));
+}));