@canlooks/can-ui 0.0.162 → 0.0.164

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

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode, Ref } from 'react';
-import { DivProps, Id, Obj } from '../../types';
+import { DivProps, Id, Obj, Size } from '../../types';
 import { ColumnType, DataGridBaseProps, DataGridMultipleProps, DataGridSingleProps, OrderType, RowType } from '../dataGrid';
 import { FormItemProps, FormProps, FormRef, FormValue } from '../form';
 import { CurdFilterable, CurdFilterableProps } from './curdFilterable';
@@ -69,6 +69,8 @@ export interface CurdBaseProps<R extends RowType = RowType, F extends FormValue
         order?: Id[];
         onOrderChange?(order: Id[]): void;
     };
+    defaultSize?: Size;
+    onSizeChange?(size: Size): void;
     filterableProps?: Omit<CurdFilterableProps, 'columns'>;
     renderFilterable?(filterableProps: CurdFilterableProps): ReactNode;
     renderFilterConditions?: CurdFilterableProps['renderFilterConditions'];

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

@@ -24,7 +24,7 @@ const faPenToSquare_1 = require("@fortawesome/free-regular-svg-icons/faPenToSqua
 const faPlus_1 = require("@fortawesome/free-solid-svg-icons/faPlus");
 const faRotateRight_1 = require("@fortawesome/free-solid-svg-icons/faRotateRight");
 exports.Curd = (0, react_1.memo)((props) => {
-    const { ref, wrapperProps, variant = 'standard', loadRows, onLoad, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, columnConfigurable = true, filterProps, initialFilterValue, onFilter, filterableProps, renderFilterable, renderFilterConditions, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, rowToForm, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
+    const { ref, wrapperProps, variant = 'standard', loadRows, onLoad, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, columnConfigurable = true, defaultSize = 'medium', onSizeChange, filterProps, initialFilterValue, onFilter, filterableProps, renderFilterable, renderFilterConditions, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, rowToForm, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
     /**
      * -------------------------------------------------------------
      * ref
@@ -120,7 +120,7 @@ exports.Curd = (0, react_1.memo)((props) => {
      * -------------------------------------------------------------
      * 表格设置
      */
-    const [innerSize, setInnerSize] = (0, utils_1.useDerivedState)(props.size || props.tableProps?.size || 'medium');
+    const [innerSize, setInnerSize] = (0, utils_1.useControlled)(defaultSize, props.size || props.tableProps?.size, onSizeChange);
     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);
@@ -134,6 +134,7 @@ exports.Curd = (0, react_1.memo)((props) => {
      * -------------------------------------------------------------
      * 行数据
      */
+    const containerRef = (0, react_1.useRef)(null);
     const { setOptions } = (0, selectionContext_1.useSelectionContext)();
     const [innerRows, _setInnerRows] = (0, utils_1.useDerivedState)(props.rows);
     (0, react_1.useEffect)(() => {
@@ -142,6 +143,7 @@ exports.Curd = (0, react_1.memo)((props) => {
     const setInnerRows = (data) => {
         setOptions?.(data);
         _setInnerRows(data);
+        containerRef.current.scrollTop = 0;
     };
     const [innerTotal, setInnerTotal] = (0, utils_1.useDerivedState)(props.paginationProps?.total || 0);
     const suppressReload = (0, react_1.useRef)(false);
@@ -245,10 +247,12 @@ exports.Curd = (0, react_1.memo)((props) => {
                                             (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.secondary", prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faRotateRight_1.faRotateRight }), 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, columns: actualColumns, tableProps: {
+                                            (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, slotProps: {
+                                container: { ref: (0, utils_1.cloneRef)(containerRef, dataGridProps?.slotProps?.container?.ref) }
+                            }, tableProps: {
                                 ...props.tableProps,
                                 ...resizable && { size: innerSize.current }
-                            }, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
+                            }, columns: actualColumns, 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, _noRenderFormTag: true }) })] }), (creatable || updatable) &&
                 (0, jsx_runtime_1.jsx)(curdDialog_1.CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }));

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

@@ -53,6 +53,7 @@ export interface ColumnType<R extends RowType = RowType> extends Omit<ComponentP
     _negativeRowSpan?: number;
 }
 interface DataGridSharedProps<R extends RowType = RowType> extends SlotsAndProps<{
+    container: ComponentProps<'div'>;
     tr: ComponentProps<'tr'>;
 }> {
     rowProps?(row: R, index: number, rows: R[]): ComponentProps<'tr'>;

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

@@ -130,7 +130,12 @@ exports.DataGrid = (0, react_1.memo)(({ slots, slotProps, columns, rows, rowProp
         const { page, pageSize } = _paginationProps;
         return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
     }, [orderedRows, _paginationProps.page, _paginationProps.pageSize, paginatable]);
-    const renderedContent = ((0, jsx_runtime_1.jsx)(columnResize_1.ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => (0, jsx_runtime_1.jsxs)(table_1.TableContainer, { ref: scrollerRef, className: dataGrid_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)(table_1.Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: (0, utils_1.cloneRef)(tableProps?.ref, tableRef), children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, filterBubbleProps: filterBubbleProps, onFilterClick: onFilterClick }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
+    const { container: Container = table_1.TableContainer } = slots || {};
+    const { container: containerProps } = slotProps || {};
+    const renderedContent = ((0, jsx_runtime_1.jsx)(columnResize_1.ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => (0, jsx_runtime_1.jsxs)(Container, { ...(0, utils_1.mergeComponentProps)(containerProps, {
+                ref: scrollerRef,
+                className: dataGrid_style_1.classes.container
+            }), children: [(0, jsx_runtime_1.jsx)(table_1.Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: (0, utils_1.cloneRef)(tableProps?.ref, tableRef), children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, filterBubbleProps: filterBubbleProps, onFilterClick: onFilterClick }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
                                         slots, slotProps,
                                         rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
                                         expandedSet, flattedColumns, toggleExpanded

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

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode, Ref } from 'react';
-import { DivProps, Id, Obj } from '../../types.js';
+import { DivProps, Id, Obj, Size } from '../../types.js';
 import { ColumnType, DataGridBaseProps, DataGridMultipleProps, DataGridSingleProps, OrderType, RowType } from '../dataGrid/index.js';
 import { FormItemProps, FormProps, FormRef, FormValue } from '../form/index.js';
 import { CurdFilterable, CurdFilterableProps } from './curdFilterable.js';
@@ -69,6 +69,8 @@ export interface CurdBaseProps<R extends RowType = RowType, F extends FormValue
         order?: Id[];
         onOrderChange?(order: Id[]): void;
     };
+    defaultSize?: Size;
+    onSizeChange?(size: Size): void;
     filterableProps?: Omit<CurdFilterableProps, 'columns'>;
     renderFilterable?(filterableProps: CurdFilterableProps): ReactNode;
     renderFilterConditions?: CurdFilterableProps['renderFilterConditions'];

package/dist/esm/components/curd/curd.js

@@ -4,7 +4,7 @@ import { DataGrid } from '../dataGrid/index.js';
 import { Form } from '../form/index.js';
 import { CurdFilterable } from './curdFilterable.js';
 import { classes, style } from './curd.style.js';
-import { clsx, useControlled, useCurdColumns, useDerivedState, useLoading, useSync, mergeComponentProps, CONTROL_COLUMN_KEY, useStrictEffect } from '../../utils/index.js';
+import { clsx, useControlled, useCurdColumns, useDerivedState, useLoading, useSync, mergeComponentProps, CONTROL_COLUMN_KEY, useStrictEffect, cloneRef } from '../../utils/index.js';
 import { Button } from '../button/index.js';
 import { Tooltip } from '../tooltip/index.js';
 import { CurdColumnConfig } from './curdColumnConfig.js';
@@ -21,7 +21,7 @@ import { faPenToSquare } from '@fortawesome/free-regular-svg-icons/faPenToSquare
 import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
 import { faRotateRight } from '@fortawesome/free-solid-svg-icons/faRotateRight';
 export const Curd = memo((props) => {
-    const { ref, wrapperProps, variant = 'standard', loadRows, onLoad, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, columnConfigurable = true, filterProps, initialFilterValue, onFilter, filterableProps, renderFilterable, renderFilterConditions, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, rowToForm, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
+    const { ref, wrapperProps, variant = 'standard', loadRows, onLoad, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, columnConfigurable = true, defaultSize = 'medium', onSizeChange, filterProps, initialFilterValue, onFilter, filterableProps, renderFilterable, renderFilterConditions, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, rowToForm, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
     /**
      * -------------------------------------------------------------
      * ref
@@ -117,7 +117,7 @@ export const Curd = memo((props) => {
      * -------------------------------------------------------------
      * 表格设置
      */
-    const [innerSize, setInnerSize] = useDerivedState(props.size || props.tableProps?.size || 'medium');
+    const [innerSize, setInnerSize] = useControlled(defaultSize, props.size || props.tableProps?.size, onSizeChange);
     const [innerPage, setInnerPage] = useControlled(props.paginationProps?.defaultPage ?? 1, props.paginationProps?.page, props.paginationProps?.onPageChange);
     const [innerPageSize, setInnerPageSize] = useControlled(props.paginationProps?.defaultPageSize ?? 10, props.paginationProps?.pageSize, props.paginationProps?.onPageSizeChange);
     const [innerOrderColumn, setInnerOrderColumn] = useControlled(props.defaultOrderColumn, props.orderColumn);
@@ -131,6 +131,7 @@ export const Curd = memo((props) => {
      * -------------------------------------------------------------
      * 行数据
      */
+    const containerRef = useRef(null);
     const { setOptions } = useSelectionContext();
     const [innerRows, _setInnerRows] = useDerivedState(props.rows);
     useEffect(() => {
@@ -139,6 +140,7 @@ export const Curd = memo((props) => {
     const setInnerRows = (data) => {
         setOptions?.(data);
         _setInnerRows(data);
+        containerRef.current.scrollTop = 0;
     };
     const [innerTotal, setInnerTotal] = useDerivedState(props.paginationProps?.total || 0);
     const suppressReload = useRef(false);
@@ -242,10 +244,12 @@ export const Curd = memo((props) => {
                                             _jsxs(_Fragment, { children: [toolbarRight, _jsx(Divider, { className: classes.divider, orientation: "vertical" })] }), reloadable &&
                                             _jsx(Tooltip, { title: "\u5237\u65B0", children: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", prefix: _jsx(Icon, { icon: faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
                                             _jsx(CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
-                                            _jsx(CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), _jsx("div", { className: classes.card, children: _jsx(DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
+                                            _jsx(CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), _jsx("div", { className: classes.card, children: _jsx(DataGrid, { ...dataGridProps, slotProps: {
+                                container: { ref: cloneRef(containerRef, dataGridProps?.slotProps?.container?.ref) }
+                            }, tableProps: {
                                 ...props.tableProps,
                                 ...resizable && { size: innerSize.current }
-                            }, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
+                            }, columns: actualColumns, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
                                 ? () => _jsx(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, _noRenderFormTag: true }) })] }), (creatable || updatable) &&
                 _jsx(CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }));

package/dist/esm/components/dataGrid/dataGrid.d.ts

@@ -53,6 +53,7 @@ export interface ColumnType<R extends RowType = RowType> extends Omit<ComponentP
     _negativeRowSpan?: number;
 }
 interface DataGridSharedProps<R extends RowType = RowType> extends SlotsAndProps<{
+    container: ComponentProps<'div'>;
     tr: ComponentProps<'tr'>;
 }> {
     rowProps?(row: R, index: number, rows: R[]): ComponentProps<'tr'>;

package/dist/esm/components/dataGrid/dataGrid.js

@@ -126,7 +126,12 @@ export const DataGrid = memo(({ slots, slotProps, columns, rows, rowProps, prima
         const { page, pageSize } = _paginationProps;
         return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
     }, [orderedRows, _paginationProps.page, _paginationProps.pageSize, paginatable]);
-    const renderedContent = (_jsx(ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => _jsxs(TableContainer, { ref: scrollerRef, className: classes.container, children: [_jsx(Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: cloneRef(tableProps?.ref, tableRef), children: _jsxs(SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [_jsx(DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, filterBubbleProps: filterBubbleProps, onFilterClick: onFilterClick }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
+    const { container: Container = TableContainer } = slots || {};
+    const { container: containerProps } = slotProps || {};
+    const renderedContent = (_jsx(ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => _jsxs(Container, { ...mergeComponentProps(containerProps, {
+                ref: scrollerRef,
+                className: classes.container
+            }), children: [_jsx(Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: cloneRef(tableProps?.ref, tableRef), children: _jsxs(SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [_jsx(DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, filterBubbleProps: filterBubbleProps, onFilterClick: onFilterClick }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
                                         slots, slotProps,
                                         rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
                                         expandedSet, flattedColumns, toggleExpanded

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.162",
+  "version": "0.0.164",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",