musae 1.3.1-beta.20 → 1.3.1-beta.22

package/dist/components/form/item.cjs

@@ -30,7 +30,8 @@ var Item = function Item(_ref) {
       className: className$1,
       style: style,
       name: props.name,
-      required: required
+      required: required,
+      supporting: supporting$1
     }));
   }
   return /*#__PURE__*/React.createElement(layout.default, {

package/dist/components/form/item.mjs

@@ -26,7 +26,8 @@ var Item = function Item(_ref) {
       className: className,
       style: style,
       name: props.name,
-      required: required
+      required: required,
+      supporting: supporting
     }));
   }
   return /*#__PURE__*/React.createElement(Layout, {

package/dist/components/pagination/pagination.cjs

@@ -42,8 +42,6 @@ var Pagination = function Pagination(_ref) {
       onPageSizeChange: _onPageSizeChange
     }),
     paginationItems = _usePagiantion.paginationItems,
-    add = _usePagiantion.add,
-    subtract = _usePagiantion.subtract,
     onChange = _usePagiantion.onChange,
     at = _usePagiantion.at,
     hasNext = _usePagiantion.hasNext,
@@ -54,6 +52,7 @@ var Pagination = function Pagination(_ref) {
     pagination: stylex.props(styles.default.pagination.base),
     sizer: stylex.props(styles.default.pagination.sizer)
   };
+  var pages = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
   var sizeOptions = React.useMemo(function () {
     return relax.unique(pageSizes).map(function (size) {
       return {
@@ -73,8 +72,14 @@ var Pagination = function Pagination(_ref) {
       key: item$1
     }, /*#__PURE__*/React.createElement(item.default, {
       value: item$1,
-      add: add,
-      subtract: subtract,
+      add: function add() {
+        var step = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+        return onChange(Math.min(pages, at + step));
+      },
+      subtract: function subtract() {
+        var step = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+        return onChange(Math.max(1, at - step));
+      },
       onClick: onChange,
       checked: at === item$1,
       hasNext: hasNext,

package/dist/components/pagination/pagination.mjs

@@ -38,8 +38,6 @@ var Pagination = function Pagination(_ref) {
       onPageSizeChange: _onPageSizeChange
     }),
     paginationItems = _usePagiantion.paginationItems,
-    add = _usePagiantion.add,
-    subtract = _usePagiantion.subtract,
     onChange = _usePagiantion.onChange,
     at = _usePagiantion.at,
     hasNext = _usePagiantion.hasNext,
@@ -50,6 +48,7 @@ var Pagination = function Pagination(_ref) {
     pagination: props(styles.pagination.base),
     sizer: props(styles.pagination.sizer)
   };
+  var pages = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
   var sizeOptions = useMemo(function () {
     return unique(pageSizes).map(function (size) {
       return {
@@ -69,8 +68,14 @@ var Pagination = function Pagination(_ref) {
       key: item
     }, /*#__PURE__*/React.createElement(Item, {
       value: item,
-      add: add,
-      subtract: subtract,
+      add: function add() {
+        var step = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+        return onChange(Math.min(pages, at + step));
+      },
+      subtract: function subtract() {
+        var step = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+        return onChange(Math.max(1, at - step));
+      },
       onClick: onChange,
       checked: at === item,
       hasNext: hasNext,

package/dist/components/table/hooks/use-pagination.hook.cjs

@@ -0,0 +1,62 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var relax = require('@aiszlab/relax');
+
+var usePagination = function usePagination(_ref) {
+  var pagination = _ref.pagination;
+  var _pagination = React.useMemo(function () {
+    if (pagination === false) {
+      return null;
+    }
+    if (relax.isNull(pagination)) {
+      return null;
+    }
+    return pagination !== null && pagination !== void 0 ? pagination : {};
+  }, []);
+  var isPaginationHidden = !_pagination;
+  var _useControlledState = relax.useControlledState(_pagination === null || _pagination === void 0 ? void 0 : _pagination.at, {
+      defaultState: 1
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    at = _useControlledState2[0],
+    setAt = _useControlledState2[1];
+  var _useControlledState3 = relax.useControlledState(_pagination === null || _pagination === void 0 ? void 0 : _pagination.pageSize, {
+      defaultState: 10
+    }),
+    _useControlledState4 = _slicedToArray(_useControlledState3, 2),
+    pageSize = _useControlledState4[0],
+    setPageSize = _useControlledState4[1];
+  var paginationState = React.useMemo(function () {
+    return {
+      pageIndex: at,
+      pageSize: pageSize
+    };
+  }, [at, pageSize]);
+  var changeAt = relax.useEvent(function (_at) {
+    var _pagination$onChange;
+    setAt(_at);
+    if (_at === at) {
+      return;
+    }
+    _pagination === null || _pagination === void 0 || (_pagination$onChange = _pagination.onChange) === null || _pagination$onChange === void 0 || _pagination$onChange.call(_pagination, _at);
+  });
+  var changePageSize = relax.useEvent(function (_pageSize) {
+    var _pagination$onPageSiz;
+    setPageSize(_pageSize);
+    console.log("_pageSize=======", _pageSize);
+    if (_pageSize === pageSize) {
+      return;
+    }
+    _pagination === null || _pagination === void 0 || (_pagination$onPageSiz = _pagination.onPageSizeChange) === null || _pagination$onPageSiz === void 0 || _pagination$onPageSiz.call(_pagination, _pageSize);
+  });
+  return {
+    pagination: paginationState,
+    changeAt: changeAt,
+    changePageSize: changePageSize,
+    isPaginationHidden: isPaginationHidden
+  };
+};
+
+exports.usePagination = usePagination;

package/dist/components/table/hooks/use-pagination.hook.d.ts

@@ -0,0 +1,10 @@
+import type { TableProps } from "../../../types/table";
+import type { PaginationState } from "@tanstack/react-table";
+type UsingPagination = Pick<TableProps<unknown>, "pagination">;
+declare const usePagination: ({ pagination }: UsingPagination) => {
+    pagination: PaginationState;
+    changeAt: (_at: number) => void;
+    changePageSize: (_pageSize: number) => void;
+    isPaginationHidden: boolean;
+};
+export { usePagination };

package/dist/components/table/hooks/use-pagination.hook.mjs

@@ -0,0 +1,60 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useMemo } from 'react';
+import { isNull, useControlledState, useEvent } from '@aiszlab/relax';
+
+var usePagination = function usePagination(_ref) {
+  var pagination = _ref.pagination;
+  var _pagination = useMemo(function () {
+    if (pagination === false) {
+      return null;
+    }
+    if (isNull(pagination)) {
+      return null;
+    }
+    return pagination !== null && pagination !== void 0 ? pagination : {};
+  }, []);
+  var isPaginationHidden = !_pagination;
+  var _useControlledState = useControlledState(_pagination === null || _pagination === void 0 ? void 0 : _pagination.at, {
+      defaultState: 1
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    at = _useControlledState2[0],
+    setAt = _useControlledState2[1];
+  var _useControlledState3 = useControlledState(_pagination === null || _pagination === void 0 ? void 0 : _pagination.pageSize, {
+      defaultState: 10
+    }),
+    _useControlledState4 = _slicedToArray(_useControlledState3, 2),
+    pageSize = _useControlledState4[0],
+    setPageSize = _useControlledState4[1];
+  var paginationState = useMemo(function () {
+    return {
+      pageIndex: at,
+      pageSize: pageSize
+    };
+  }, [at, pageSize]);
+  var changeAt = useEvent(function (_at) {
+    var _pagination$onChange;
+    setAt(_at);
+    if (_at === at) {
+      return;
+    }
+    _pagination === null || _pagination === void 0 || (_pagination$onChange = _pagination.onChange) === null || _pagination$onChange === void 0 || _pagination$onChange.call(_pagination, _at);
+  });
+  var changePageSize = useEvent(function (_pageSize) {
+    var _pagination$onPageSiz;
+    setPageSize(_pageSize);
+    console.log("_pageSize=======", _pageSize);
+    if (_pageSize === pageSize) {
+      return;
+    }
+    _pagination === null || _pagination === void 0 || (_pagination$onPageSiz = _pagination.onPageSizeChange) === null || _pagination$onPageSiz === void 0 || _pagination$onPageSiz.call(_pagination, _pageSize);
+  });
+  return {
+    pagination: paginationState,
+    changeAt: changeAt,
+    changePageSize: changePageSize,
+    isPaginationHidden: isPaginationHidden
+  };
+};
+
+export { usePagination };

package/dist/components/table/styles.cjs

@@ -9,6 +9,14 @@ var table = {
     $$css: true
   }
 };
+var pagination = {
+  base: {
+    k1xSpc: "musaex-78zum5",
+    kjj79g: "musaex-13a6bvl",
+    keoZOQ: "musaex-1jjqrzr",
+    $$css: true
+  }
+};
 var body = {
   cell: {
     kjGldf: "musaex-aafj1c",
@@ -95,6 +103,7 @@ var header = {
 };
 var styles = {
   table: table,
+  pagination: pagination,
   body: body,
   cell: cell,
   sort: sort,

package/dist/components/table/styles.d.ts

@@ -5,6 +5,13 @@ declare const styles: {
             readonly borderCollapse: import("@stylexjs/stylex").StyleXClassNameFor<"borderCollapse", "collapse">;
         }>;
     }>;
+    pagination: Readonly<{
+        readonly base: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly justifyContent: import("@stylexjs/stylex").StyleXClassNameFor<"justifyContent", "flex-end">;
+            readonly marginBlockStart: import("@stylexjs/stylex").StyleXClassNameFor<"marginBlockStart", string>;
+        }>;
+    }>;
     body: Readonly<{
         readonly cell: Readonly<{
             readonly borderInlineWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderInlineWidth", string>;

package/dist/components/table/styles.mjs

@@ -5,6 +5,14 @@ var table = {
     $$css: true
   }
 };
+var pagination = {
+  base: {
+    k1xSpc: "musaex-78zum5",
+    kjj79g: "musaex-13a6bvl",
+    keoZOQ: "musaex-1jjqrzr",
+    $$css: true
+  }
+};
 var body = {
   cell: {
     kjGldf: "musaex-aafj1c",
@@ -91,6 +99,7 @@ var header = {
 };
 var styles = {
   table: table,
+  pagination: pagination,
   body: body,
   cell: cell,
   sort: sort,

package/dist/components/table/table.cjs

@@ -16,6 +16,8 @@ var className = require('@aiszlab/relax/class-name');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var loading = require('../loading/loading.cjs');
 var relax = require('@aiszlab/relax');
+var pagination = require('../pagination/pagination.cjs');
+var usePagination_hook = require('./hooks/use-pagination.hook.cjs');
 
 var Table = function Table(_ref) {
   var _ref$bordered = _ref.bordered,
@@ -36,7 +38,8 @@ var Table = function Table(_ref) {
     _ref$defaultExpandedK = _ref.defaultExpandedKeys,
     defaultExpandedKeys = _ref$defaultExpandedK === void 0 ? [] : _ref$defaultExpandedK,
     onExpandedKeysChange = _ref.onExpandedKeysChange,
-    rowKey = _ref.rowKey;
+    rowKey = _ref.rowKey,
+    _pagination = _ref.pagination;
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
   var columns = hooks.useColumns({
     columns: _columns,
@@ -50,23 +53,42 @@ var Table = function Table(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     uncontrolledExpanded = _useState2[0],
     setUncontrolledExpanded = _useState2[1];
+  var _usePagination = usePagination_hook.usePagination({
+      pagination: _pagination
+    }),
+    pagination$1 = _usePagination.pagination,
+    isPaginationHidden = _usePagination.isPaginationHidden,
+    changeAt = _usePagination.changeAt,
+    changePageSize = _usePagination.changePageSize;
   var expanded = React.useMemo(function () {
     return relax.isUndefined(expandedKeys) ? uncontrolledExpanded : Object.fromEntries(expandedKeys.map(function (key) {
       return [String(key), true];
     }));
   }, [expandedKeys, uncontrolledExpanded]);
-  var table = reactTable.useReactTable(_objectSpread(_objectSpread({
+  var table = reactTable.useReactTable(_objectSpread(_objectSpread(_objectSpread({
     columns: columns,
     data: dataSource,
-    getCoreRowModel: reactTable.getCoreRowModel()
-  }, expandable && {
+    getCoreRowModel: reactTable.getCoreRowModel(),
+    state: _objectSpread(_objectSpread({}, expandable && {
+      expanded: expanded
+    }), !isPaginationHidden && {
+      pagination: {
+        pageIndex: pagination$1.pageIndex - 1,
+        pageSize: pagination$1.pageSize
+      }
+    })
+  }, !isPaginationHidden && {
+    getPaginationRowModel: reactTable.getPaginationRowModel(),
+    onPaginationChange: function onPaginationChange(updater) {
+      var next = relax.isFunction(updater) ? updater(pagination$1) : updater;
+      changeAt(next.pageIndex + 1);
+      changePageSize(next.pageSize);
+    }
+  }), expandable && {
     getSubRows: function getSubRows(record) {
       return record.children;
     },
     getExpandedRowModel: reactTable.getExpandedRowModel(),
-    state: {
-      expanded: expanded
-    },
     onExpandedChange: function onExpandedChange(updater) {
       var next = relax.isFunction(updater) ? updater(expanded) : updater;
       if (relax.isUndefined(expandedKeys)) setUncontrolledExpanded(next);
@@ -76,7 +98,7 @@ var Table = function Table(_ref) {
     }
   }), rowKey && {
     getRowId: function getRowId(record, index, parent) {
-      return String(relax.isFunction(rowKey) ? rowKey(record, index, parent === null || parent === void 0 ? void 0 : parent.original) : record[rowKey]);
+      return String(relax.isFunction(rowKey) ? rowKey(record, index, parent === null || parent === void 0 ? void 0 : parent.original) : relax.get(record, rowKey));
     }
   }));
   var contextValue = hooks.useContextValue({
@@ -86,15 +108,27 @@ var Table = function Table(_ref) {
     onSortChange: onSortChange,
     classNames: classNames
   });
-  var styled = stylex.props(styles.default.table.base);
+  var styled = {
+    table: stylex.props(styles.default.table.base),
+    pagination: stylex.props(styles.default.pagination.base)
+  };
   return /*#__PURE__*/React.createElement(context.Context.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(loading.default, {
     loading: loading$1
   }, /*#__PURE__*/React.createElement("table", {
-    className: className.stringify(classNames.table, className$1, styled.className),
-    style: _objectSpread(_objectSpread({}, styled.style), style)
-  }, /*#__PURE__*/React.createElement(header.default, null), /*#__PURE__*/React.createElement(body.default, null))));
+    className: className.stringify(classNames.table, className$1, styled.table.className),
+    style: _objectSpread(_objectSpread({}, styled.table.style), style)
+  }, /*#__PURE__*/React.createElement(header.default, null), /*#__PURE__*/React.createElement(body.default, null)), pagination$1 && (/*#__PURE__*/React.createElement("div", {
+    className: styled.pagination.className,
+    style: styled.pagination.style
+  }, /*#__PURE__*/React.createElement(pagination.default, {
+    total: dataSource.length,
+    at: pagination$1.pageIndex - 1,
+    pageSize: pagination$1.pageSize,
+    onChange: changeAt,
+    onPageSizeChange: changePageSize
+  })))));
 };
 
 exports.default = Table;

package/dist/components/table/table.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { TableProps } from "../../types/table";
-declare const Table: <T>({ bordered, dataSource, columns: _columns, sortDescriptor, onSortChange, className, style, loading, expandable, expandedKeys, defaultExpandedKeys, onExpandedKeysChange, rowKey, }: TableProps<T>) => React.JSX.Element;
+declare const Table: <T>({ bordered, dataSource, columns: _columns, sortDescriptor, onSortChange, className, style, loading, expandable, expandedKeys, defaultExpandedKeys, onExpandedKeysChange, rowKey, pagination: _pagination, }: TableProps<T>) => React.JSX.Element;
 export default Table;

package/dist/components/table/table.mjs

@@ -1,7 +1,7 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import styles from './styles.mjs';
-import { useReactTable, getCoreRowModel, getExpandedRowModel } from '@tanstack/react-table';
+import { useReactTable, getCoreRowModel, getPaginationRowModel, getExpandedRowModel } from '@tanstack/react-table';
 import React, { useState, useMemo } from 'react';
 import { useColumns, useContextValue } from './hooks.mjs';
 import Header from './header/header.mjs';
@@ -11,7 +11,9 @@ import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_mod
 import { stringify } from '@aiszlab/relax/class-name';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import Loading from '../loading/loading.mjs';
-import { isUndefined, isFunction } from '@aiszlab/relax';
+import { isUndefined, isFunction, get } from '@aiszlab/relax';
+import Pagination from '../pagination/pagination.mjs';
+import { usePagination } from './hooks/use-pagination.hook.mjs';
 
 var Table = function Table(_ref) {
   var _ref$bordered = _ref.bordered,
@@ -32,7 +34,8 @@ var Table = function Table(_ref) {
     _ref$defaultExpandedK = _ref.defaultExpandedKeys,
     defaultExpandedKeys = _ref$defaultExpandedK === void 0 ? [] : _ref$defaultExpandedK,
     onExpandedKeysChange = _ref.onExpandedKeysChange,
-    rowKey = _ref.rowKey;
+    rowKey = _ref.rowKey,
+    _pagination = _ref.pagination;
   var classNames = useClassNames(CLASS_NAMES);
   var columns = useColumns({
     columns: _columns,
@@ -46,23 +49,42 @@ var Table = function Table(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     uncontrolledExpanded = _useState2[0],
     setUncontrolledExpanded = _useState2[1];
+  var _usePagination = usePagination({
+      pagination: _pagination
+    }),
+    pagination = _usePagination.pagination,
+    isPaginationHidden = _usePagination.isPaginationHidden,
+    changeAt = _usePagination.changeAt,
+    changePageSize = _usePagination.changePageSize;
   var expanded = useMemo(function () {
     return isUndefined(expandedKeys) ? uncontrolledExpanded : Object.fromEntries(expandedKeys.map(function (key) {
       return [String(key), true];
     }));
   }, [expandedKeys, uncontrolledExpanded]);
-  var table = useReactTable(_objectSpread(_objectSpread({
+  var table = useReactTable(_objectSpread(_objectSpread(_objectSpread({
     columns: columns,
     data: dataSource,
-    getCoreRowModel: getCoreRowModel()
-  }, expandable && {
+    getCoreRowModel: getCoreRowModel(),
+    state: _objectSpread(_objectSpread({}, expandable && {
+      expanded: expanded
+    }), !isPaginationHidden && {
+      pagination: {
+        pageIndex: pagination.pageIndex - 1,
+        pageSize: pagination.pageSize
+      }
+    })
+  }, !isPaginationHidden && {
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: function onPaginationChange(updater) {
+      var next = isFunction(updater) ? updater(pagination) : updater;
+      changeAt(next.pageIndex + 1);
+      changePageSize(next.pageSize);
+    }
+  }), expandable && {
     getSubRows: function getSubRows(record) {
       return record.children;
     },
     getExpandedRowModel: getExpandedRowModel(),
-    state: {
-      expanded: expanded
-    },
     onExpandedChange: function onExpandedChange(updater) {
       var next = isFunction(updater) ? updater(expanded) : updater;
       if (isUndefined(expandedKeys)) setUncontrolledExpanded(next);
@@ -72,7 +94,7 @@ var Table = function Table(_ref) {
     }
   }), rowKey && {
     getRowId: function getRowId(record, index, parent) {
-      return String(isFunction(rowKey) ? rowKey(record, index, parent === null || parent === void 0 ? void 0 : parent.original) : record[rowKey]);
+      return String(isFunction(rowKey) ? rowKey(record, index, parent === null || parent === void 0 ? void 0 : parent.original) : get(record, rowKey));
     }
   }));
   var contextValue = useContextValue({
@@ -82,15 +104,27 @@ var Table = function Table(_ref) {
     onSortChange: onSortChange,
     classNames: classNames
   });
-  var styled = props(styles.table.base);
+  var styled = {
+    table: props(styles.table.base),
+    pagination: props(styles.pagination.base)
+  };
   return /*#__PURE__*/React.createElement(Context.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(Loading, {
     loading: loading
   }, /*#__PURE__*/React.createElement("table", {
-    className: stringify(classNames.table, className, styled.className),
-    style: _objectSpread(_objectSpread({}, styled.style), style)
-  }, /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(Body, null))));
+    className: stringify(classNames.table, className, styled.table.className),
+    style: _objectSpread(_objectSpread({}, styled.table.style), style)
+  }, /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(Body, null)), pagination && (/*#__PURE__*/React.createElement("div", {
+    className: styled.pagination.className,
+    style: styled.pagination.style
+  }, /*#__PURE__*/React.createElement(Pagination, {
+    total: dataSource.length,
+    at: pagination.pageIndex - 1,
+    pageSize: pagination.pageSize,
+    onChange: changeAt,
+    onPageSizeChange: changePageSize
+  })))));
 };
 
 export { Table as default };

package/dist/styles.css

@@ -2297,6 +2297,10 @@
     margin-top: var(--musaex-1fxazvh);
   }
 
+  .musaex-1jjqrzr {
+    margin-top: var(--musaex-1vpnstl);
+  }
+
   .musaex-wss4xr {
     margin-top: var(--musaex-48i97p);
   }

package/dist/types/table.d.ts

@@ -2,6 +2,7 @@ import type { DeepKeys } from "@tanstack/react-table";
 import type { Table } from "@tanstack/react-table";
 import type { ComponentProps } from "./element";
 import type { Key, ReactNode } from "react";
+import type { PagiantionProps } from "./pagination";
 export type SortDirection = "ascending" | "descending" | null;
 export type SortDescriptor = {
     key: Key;
@@ -98,6 +99,11 @@ export type TableProps<T> = ComponentProps & {
      * TanStack Table's positional row ids.
      */
     rowKey?: DeepKeys<T> | ((record: T, index: number, parent?: T) => Key);
+    /**
+     * @zh 配置内置分页；设置为 `false` 或省略时不显示分页。
+     * @en Configure built-in pagination. Set to `false` or omit to hide it.
+     */
+    pagination?: false | PagiantionProps;
 };
 /** Recursive record shape used by the built-in hierarchical-row reader. */
 export type ExpandableRecord<T> = T & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "1.3.1-beta.20",
+  "version": "1.3.1-beta.22",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",