@hanwenbo/x-web-pro-components 0.0.2 → 0.0.4

package/es/components/table/index.js

@@ -28,13 +28,15 @@ import { Checkbox } from '@hanwenbo/x-web-ui/checkbox';
 import { Dropdown } from '@hanwenbo/x-web-ui/dropdown';
 import { Form, useForm } from '@hanwenbo/x-web-ui/form';
 import { Pagination } from '@hanwenbo/x-web-ui/pagination';
+import { Select } from '@hanwenbo/x-web-ui/select';
+import { useLocale, zhCN } from '@hanwenbo/x-web-ui/i18n';
 import { Table } from '@hanwenbo/x-web-ui/table';
 import { Tooltip } from '@hanwenbo/x-web-ui/tooltip';
 import { cn } from '@hanwenbo/x-web-ui/utils/cn';
 import { ChevronDown, Columns3, Expand, Minimize2, PanelLeft, PanelRight, RefreshCw, Table2 } from 'lucide-react';
 import { attachPropertiesToComponent, mergeTableLoading } from "../../utils";
 import { FieldIndexColumn, FieldStatus, ProField, getEffectiveValueType } from "../field";
-import { ConfigConsumer, IntlConsumer, arEGIntl, caESIntl, createIntl, enUSIntl, esESIntl, frFRIntl, itITIntl, jaJPIntl, msMYIntl, ptBRIntl, ruRUIntl, thTHIntl, viVNIntl, zhCNIntl, zhTWIntl } from "../provider";
+import { ConfigConsumer, IntlConsumer, useIntl, arEGIntl, caESIntl, createIntl, enUSIntl, esESIntl, frFRIntl, itITIntl, jaJPIntl, msMYIntl, ptBRIntl, ruRUIntl, thTHIntl, viVNIntl, zhCNIntl, zhTWIntl } from "../provider";
 import { DragSortTable } from "./dragSortTable";
 import { EditableTable } from "./editableTable";
 import { ListToolBar } from "./listToolBar";
@@ -307,6 +309,10 @@ var BaseProTable = function BaseProTable(_ref3) {
   var _useForm = useForm(),
     _useForm2 = _slicedToArray(_useForm, 1),
     searchForm = _useForm2[0];
+  var _useLocale = useLocale(),
+    t = _useLocale.t;
+  var intl = useIntl();
+  var itemsPerPageLabel = t('common.itemsPerPage') !== 'common.itemsPerPage' ? t('common.itemsPerPage') : String(zhCN['common.itemsPerPage']);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     requestLoading = _useState2[0],
@@ -691,7 +697,7 @@ var BaseProTable = function BaseProTable(_ref3) {
               setColumnVisibility(columnKey, checked);
             },
             children: /*#__PURE__*/_jsx("span", {
-              className: "truncate text-sm text-foreground",
+              className: "text-foreground truncate text-sm",
               children: columnTitle
             })
           }), /*#__PURE__*/_jsx("div", {
@@ -699,7 +705,7 @@ var BaseProTable = function BaseProTable(_ref3) {
             children: /*#__PURE__*/_jsxs("div", {
               className: "flex items-center gap-1",
               children: [/*#__PURE__*/_jsx(Tooltip, {
-                title: fixed === 'left' ? '取消左侧固定' : '固定到左侧',
+                title: intl.getMessage(fixed === 'left' ? 'tableToolbar.unpinLeft' : 'tableToolbar.pinLeft'),
                 children: /*#__PURE__*/_jsx("span", {
                   className: "inline-flex",
                   children: /*#__PURE__*/_jsxs(Button, {
@@ -712,18 +718,18 @@ var BaseProTable = function BaseProTable(_ref3) {
                       event.stopPropagation();
                       toggleColumnFixed(columnKey, 'left');
                     },
-                    "aria-label": fixed === 'left' ? '取消左侧固定' : '固定到左侧',
+                    "aria-label": intl.getMessage(fixed === 'left' ? 'tableToolbar.unpinLeft' : 'tableToolbar.pinLeft'),
                     children: [/*#__PURE__*/_jsx(PanelLeft, {
                       size: 16,
                       className: "shrink-0"
                     }), /*#__PURE__*/_jsx("span", {
                       className: "sr-only",
-                      children: fixed === 'left' ? '取消左侧固定' : '固定到左侧'
+                      children: intl.getMessage(fixed === 'left' ? 'tableToolbar.unpinLeft' : 'tableToolbar.pinLeft')
                     })]
                   })
                 })
               }), /*#__PURE__*/_jsx(Tooltip, {
-                title: fixed === 'right' ? '取消右侧固定' : '固定到右侧',
+                title: intl.getMessage(fixed === 'right' ? 'tableToolbar.unpinRight' : 'tableToolbar.pinRight'),
                 children: /*#__PURE__*/_jsx("span", {
                   className: "inline-flex",
                   children: /*#__PURE__*/_jsxs(Button, {
@@ -736,13 +742,13 @@ var BaseProTable = function BaseProTable(_ref3) {
                       event.stopPropagation();
                       toggleColumnFixed(columnKey, 'right');
                     },
-                    "aria-label": fixed === 'right' ? '取消右侧固定' : '固定到右侧',
+                    "aria-label": intl.getMessage(fixed === 'right' ? 'tableToolbar.unpinRight' : 'tableToolbar.pinRight'),
                     children: [/*#__PURE__*/_jsx(PanelRight, {
                       size: 16,
                       className: "shrink-0"
                     }), /*#__PURE__*/_jsx("span", {
                       className: "sr-only",
-                      children: fixed === 'right' ? '取消右侧固定' : '固定到右侧'
+                      children: intl.getMessage(fixed === 'right' ? 'tableToolbar.unpinRight' : 'tableToolbar.pinRight')
                     })]
                   })
                 })
@@ -781,17 +787,17 @@ var BaseProTable = function BaseProTable(_ref3) {
           disabled: true,
           label: /*#__PURE__*/_jsx("span", {
             className: "x-pro-table-options-dropdown-section-label",
-            children: "\u5BC6\u5EA6"
+            children: intl.getMessage('tableToolbar.density')
           })
         }, {
           key: 'density-large',
-          label: '宽松'
+          label: intl.getMessage('tableToolbar.large')
         }, {
           key: 'density-middle',
-          label: '中等'
+          label: intl.getMessage('tableToolbar.middle')
         }, {
           key: 'density-small',
-          label: '紧凑'
+          label: intl.getMessage('tableToolbar.small')
         });
       }
       if (optionConfig.setting && columnSettingItems.length > 0) {
@@ -806,7 +812,7 @@ var BaseProTable = function BaseProTable(_ref3) {
           disabled: true,
           label: /*#__PURE__*/_jsx("span", {
             className: "x-pro-table-options-dropdown-section-label",
-            children: "\u5217\u8BBE\u7F6E"
+            children: intl.getMessage('tableToolbar.columns')
           })
         });
         dropdownItems.push.apply(dropdownItems, _toConsumableArray(columnSettingItems));
@@ -820,7 +826,7 @@ var BaseProTable = function BaseProTable(_ref3) {
         }
         dropdownItems.push({
           key: 'fullscreen',
-          label: fullscreen ? '退出全屏' : '全屏'
+          label: intl.getMessage(fullscreen ? 'tableToolbar.exitFullscreen' : 'tableToolbar.fullscreen')
         });
       }
       if (!optionConfig.reload && dropdownItems.length === 0) {
@@ -836,7 +842,7 @@ var BaseProTable = function BaseProTable(_ref3) {
           onClick: function onClick() {
             action.reload();
           },
-          children: (_optionConfig$dropdow = optionConfig.dropdownText) !== null && _optionConfig$dropdow !== void 0 ? _optionConfig$dropdow : '刷新'
+          children: (_optionConfig$dropdow = optionConfig.dropdownText) !== null && _optionConfig$dropdow !== void 0 ? _optionConfig$dropdow : intl.getMessage('tableToolbar.reload')
         }) : null, dropdownItems.length > 0 ? /*#__PURE__*/_jsx(Dropdown, {
           placement: "bottomRight",
           dropdownClassName: "x-pro-table-options-dropdown-menu",
@@ -873,14 +879,14 @@ var BaseProTable = function BaseProTable(_ref3) {
               className: "x-pro-table-options-dropdown-icon"
             }),
             className: "x-pro-table-options-dropdown-trigger",
-            "aria-label": "\u6253\u5F00\u8868\u683C\u5DE5\u5177"
+            "aria-label": intl.getMessage('tableToolbar.tools')
           })
         }) : null]
       }, "toolbar-options-split")];
     }
     if (optionConfig.reload) {
       nextSettings.push( /*#__PURE__*/_jsx(Tooltip, {
-        title: "\u5237\u65B0",
+        title: intl.getMessage('tableToolbar.reload'),
         children: /*#__PURE__*/_jsx("span", {
           className: "inline-flex",
           children: /*#__PURE__*/_jsxs(Button, {
@@ -894,7 +900,7 @@ var BaseProTable = function BaseProTable(_ref3) {
               className: "h-4 w-4"
             }), /*#__PURE__*/_jsx("span", {
               className: "sr-only",
-              children: "\u5237\u65B0"
+              children: intl.getMessage('tableToolbar.reload')
             })]
           }, "toolbar-reload")
         })
@@ -905,13 +911,13 @@ var BaseProTable = function BaseProTable(_ref3) {
         menu: {
           items: [{
             key: 'large',
-            label: '宽松'
+            label: intl.getMessage('tableToolbar.large')
           }, {
             key: 'middle',
-            label: '中等'
+            label: intl.getMessage('tableToolbar.middle')
           }, {
             key: 'small',
-            label: '紧凑'
+            label: intl.getMessage('tableToolbar.small')
           }],
           onClick: function onClick(item) {
             var nextSize = mapTableSize(item.key);
@@ -921,7 +927,7 @@ var BaseProTable = function BaseProTable(_ref3) {
           selectedKeys: [tableSize]
         },
         children: /*#__PURE__*/_jsx(Tooltip, {
-          title: "\u5BC6\u5EA6",
+          title: intl.getMessage('tableToolbar.density'),
           children: /*#__PURE__*/_jsx("span", {
             className: "inline-flex",
             children: /*#__PURE__*/_jsxs(Button, {
@@ -932,7 +938,7 @@ var BaseProTable = function BaseProTable(_ref3) {
                 className: "h-4 w-4"
               }), /*#__PURE__*/_jsx("span", {
                 className: "sr-only",
-                children: "\u5BC6\u5EA6"
+                children: intl.getMessage('tableToolbar.density')
               })]
             })
           })
@@ -950,7 +956,7 @@ var BaseProTable = function BaseProTable(_ref3) {
           onClick: function onClick() {}
         },
         children: /*#__PURE__*/_jsx(Tooltip, {
-          title: "\u5217\u8BBE\u7F6E",
+          title: intl.getMessage('tableToolbar.columns'),
           children: /*#__PURE__*/_jsx("span", {
             className: "inline-flex",
             children: /*#__PURE__*/_jsxs(Button, {
@@ -961,7 +967,7 @@ var BaseProTable = function BaseProTable(_ref3) {
                 className: "h-4 w-4"
               }), /*#__PURE__*/_jsx("span", {
                 className: "sr-only",
-                children: "\u5217\u8BBE\u7F6E"
+                children: intl.getMessage('tableToolbar.columns')
               })]
             })
           })
@@ -970,7 +976,7 @@ var BaseProTable = function BaseProTable(_ref3) {
     }
     if (optionConfig.fullScreen) {
       nextSettings.push( /*#__PURE__*/_jsx(Tooltip, {
-        title: fullscreen ? '退出全屏' : '全屏',
+        title: intl.getMessage(fullscreen ? 'tableToolbar.exitFullscreen' : 'tableToolbar.fullscreen'),
         children: /*#__PURE__*/_jsx("span", {
           className: "inline-flex",
           children: /*#__PURE__*/_jsxs(Button, {
@@ -987,14 +993,14 @@ var BaseProTable = function BaseProTable(_ref3) {
               className: "h-4 w-4"
             }), /*#__PURE__*/_jsx("span", {
               className: "sr-only",
-              children: fullscreen ? '退出全屏' : '全屏'
+              children: intl.getMessage(fullscreen ? 'tableToolbar.exitFullscreen' : 'tableToolbar.fullscreen')
             })]
           }, "toolbar-fullscreen")
         })
       }, "toolbar-fullscreen-tooltip"));
     }
     return nextSettings;
-  }, [action, columns, fullscreen, mergedColumnsState, onSizeChange, optionConfig, setColumnVisibility, tableSize, toggleColumnFixed]);
+  }, [action, intl, columns, fullscreen, mergedColumnsState, onSizeChange, optionConfig, setColumnVisibility, tableSize, toggleColumnFixed]);
   var mergedRowSelection = useMemo(function () {
     if (!rowSelection) {
       return undefined;
@@ -1019,7 +1025,7 @@ var BaseProTable = function BaseProTable(_ref3) {
     }
     var searchConfig = toolSearchConfig === true ? {} : toolSearchConfig;
     return {
-      placeholder: searchConfig.placeholder || '请输入关键词',
+      placeholder: searchConfig.placeholder || intl.getMessage('tableToolbar.keyword'),
       allowClear: true,
       onSearch: function () {
         var _onSearch = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(keyword) {
@@ -1058,7 +1064,7 @@ var BaseProTable = function BaseProTable(_ref3) {
         return onSearch;
       }()
     };
-  }, [optionConfig, toolbar === null || toolbar === void 0 ? void 0 : toolbar.search]);
+  }, [intl, optionConfig, toolbar === null || toolbar === void 0 ? void 0 : toolbar.search]);
   var toolbarOptionNodes = useMemo(function () {
     if (optionsRender === false) {
       return [];
@@ -1154,7 +1160,7 @@ var BaseProTable = function BaseProTable(_ref3) {
             mode: "edit",
             valueType: searchValueType,
             valueEnum: columnItem.valueEnum,
-            placeholder: typeof columnItem.title === 'string' ? ['select', 'tag', 'treeSelect', 'cascader', 'segmented', 'date', 'dateMonth', 'dateQuarter', 'dateTime', 'dateRange', 'dateMonthRange', 'dateQuarterRange', 'dateTimeRange', 'dateWeek', 'dateWeekRange', 'dateYear', 'dateYearRange', 'time', 'timeRange'].includes(valueTypeName) ? "\u8BF7\u9009\u62E9".concat(columnItem.title) : "\u8BF7\u8F93\u5165".concat(columnItem.title) : undefined,
+            placeholder: typeof columnItem.title === 'string' ? ['select', 'tag', 'treeSelect', 'cascader', 'segmented', 'date', 'dateMonth', 'dateQuarter', 'dateTime', 'dateRange', 'dateMonthRange', 'dateQuarterRange', 'dateTimeRange', 'dateWeek', 'dateWeekRange', 'dateYear', 'dateYearRange', 'time', 'timeRange'].includes(valueTypeName) ? "".concat(intl.getMessage('form.selectPrefix')).concat(columnItem.title) : "".concat(intl.getMessage('form.inputPrefix')).concat(columnItem.title) : undefined,
             fieldProps: _objectSpread(_objectSpread({}, resolvedFieldProps || {}), {}, {
               className: cn(stableChoiceWidth && 'min-w-0 w-full', resolvedFieldProps === null || resolvedFieldProps === void 0 ? void 0 : resolvedFieldProps.className),
               style: _objectSpread(_objectSpread({}, stableChoiceWidth ? {
@@ -1204,7 +1210,7 @@ var BaseProTable = function BaseProTable(_ref3) {
       className: className
     }, tableProps), defaultSearchNode)) : defaultSearchNode;
     return rendered === null ? null : rendered;
-  }, [action, className, columns, controlledDataSource, controlledLoading, columnsState, headerTitle, _onChange3, onDataSourceChange, onLoad, onLoadingChange, onRequestError, onSizeChange, options, optionsRender, params, pagination, request, resolveSearchValues, rowSelection, search, searchColumns, searchForm, searchFormRender, hasSearchForm, tableAlertOptionRender, tableAlertRender, tableClassName, tableExtraRender, tableProps, tableStyle, toolbar, toolBarRender]);
+  }, [action, className, intl, columns, controlledDataSource, controlledLoading, columnsState, headerTitle, _onChange3, onDataSourceChange, onLoad, onLoadingChange, onRequestError, onSizeChange, options, optionsRender, params, pagination, request, resolveSearchValues, rowSelection, search, searchColumns, searchForm, searchFormRender, hasSearchForm, tableAlertOptionRender, tableAlertRender, tableClassName, tableExtraRender, tableProps, tableStyle, toolbar, toolBarRender]);
 
   // ProTable 为了保持 hooks 顺序会始终创建 searchForm；没有搜索字段时仍需让
   // rc-field-form 连接到一个 Form，否则它会在开发环境延迟输出未连接告警。
@@ -1230,7 +1236,7 @@ var BaseProTable = function BaseProTable(_ref3) {
     var messageNode = tableAlertRender ? tableAlertRender({
       selectedRowKeys: selectedRowKeys,
       selectedRows: selectedRows
-    }) : selectedCount ? "\u5DF2\u9009 ".concat(selectedCount) : null;
+    }) : selectedCount ? "".concat(intl.getMessage('tableToolbar.selected'), " ").concat(selectedCount) : null;
     if (!messageNode) {
       return null;
     }
@@ -1243,7 +1249,7 @@ var BaseProTable = function BaseProTable(_ref3) {
       children: /*#__PURE__*/_jsxs("div", {
         className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
         children: [/*#__PURE__*/_jsxs("div", {
-          className: "flex items-center gap-2 text-sm text-foreground",
+          className: "text-foreground flex items-center gap-2 text-sm",
           children: [/*#__PURE__*/_jsx("span", {
             className: "text-primary",
             children: /*#__PURE__*/_jsxs("svg", {
@@ -1276,12 +1282,12 @@ var BaseProTable = function BaseProTable(_ref3) {
             size: "small",
             variant: "ghost",
             onClick: clearSelectionState,
-            children: "\u6E05\u7A7A"
+            children: intl.getMessage('tableToolbar.clear')
           }) : null)
         })]
       })
     });
-  }, [clearSelectionState, hasCustomToolbarActions, mergedRowSelection, selectedRows, mergedSelectedRowKeys, tableAlertOptionRender, tableAlertRender]);
+  }, [clearSelectionState, intl, hasCustomToolbarActions, mergedRowSelection, selectedRows, mergedSelectedRowKeys, tableAlertOptionRender, tableAlertRender]);
   var toolbarSectionNode = useMemo(function () {
     if (!toolbarNode) {
       return null;
@@ -1296,7 +1302,7 @@ var BaseProTable = function BaseProTable(_ref3) {
     }
     return /*#__PURE__*/_jsx(Card, {
       variant: "default",
-      className: "overflow-visible rounded-xl border-0 bg-card shadow-none",
+      className: "bg-card overflow-visible rounded-xl border-0 shadow-none",
       bodyClassName: "px-4 py-4",
       children: searchNode
     });
@@ -1369,25 +1375,20 @@ var BaseProTable = function BaseProTable(_ref3) {
     return /*#__PURE__*/_jsxs("div", {
       className: cn(PRO_TABLE_STACK_CLASS, 'w-full sm:flex-row sm:items-center sm:justify-between'),
       children: [/*#__PURE__*/_jsxs("div", {
-        className: "flex flex-wrap items-center text-sm text-muted-foreground [gap:var(--x-space-4)]",
-        children: [normalizedPaginationConfig.showTotal ? normalizedPaginationConfig.showTotal(total, range) : null, normalizedPaginationConfig.showSizeChanger ? /*#__PURE__*/_jsxs("label", {
-          className: "flex items-center gap-2",
-          children: [/*#__PURE__*/_jsx("span", {
-            className: "text-xs uppercase tracking-wide text-muted-foreground",
-            children: "Page Size"
-          }), /*#__PURE__*/_jsx("select", {
-            className: "h-9 rounded-lg border border-border bg-background px-3 text-sm text-foreground outline-none transition-colors focus:border-primary",
-            value: pageInfo.pageSize,
-            onChange: function onChange(event) {
-              void handleExternalPaginationChange(1, Number(event.target.value));
-            },
-            children: (normalizedPaginationConfig.pageSizeOptions || [10, 20, 50, 100]).map(function (option) {
-              return /*#__PURE__*/_jsxs("option", {
-                value: option,
-                children: [option, " / page"]
-              }, option);
-            })
-          })]
+        className: "text-muted-foreground flex flex-wrap items-center [gap:var(--x-space-4)] text-sm",
+        children: [normalizedPaginationConfig.showTotal ? normalizedPaginationConfig.showTotal(total, range) : null, normalizedPaginationConfig.showSizeChanger ? /*#__PURE__*/_jsx(Select, {
+          "aria-label": itemsPerPageLabel,
+          size: resolvedPaginationSize,
+          value: pageInfo.pageSize,
+          options: (normalizedPaginationConfig.pageSizeOptions || [10, 20, 50, 100]).map(function (option) {
+            return {
+              value: option,
+              label: "".concat(option, " ").concat(itemsPerPageLabel)
+            };
+          }),
+          onChange: function onChange(value) {
+            void handleExternalPaginationChange(1, Number(value));
+          }
         }) : null]
       }), shouldRenderPager ? /*#__PURE__*/_jsx(Pagination, {
         current: pageInfo.current,
@@ -1400,7 +1401,7 @@ var BaseProTable = function BaseProTable(_ref3) {
         }
       }) : null]
     });
-  }, [dataSource.length, handleExternalPaginationChange, normalizedPaginationConfig, pageInfo.current, pageInfo.pageSize, pageInfo.total, resolvedPaginationSize, showExternalBottomPagination, tableSize]);
+  }, [itemsPerPageLabel, dataSource.length, handleExternalPaginationChange, normalizedPaginationConfig, pageInfo.current, pageInfo.pageSize, pageInfo.total, resolvedPaginationSize, showExternalBottomPagination, tableSize]);
   var defaultTableNode = /*#__PURE__*/_jsx(Table, _objectSpread(_objectSpread({}, tableProps), {}, {
     className: cn(tableClassName),
     style: tableStyle,
@@ -1526,7 +1527,7 @@ var BaseProTable = function BaseProTable(_ref3) {
     cardStyle = _ref10.style,
     restCardProps = _objectWithoutProperties(_ref10, _excluded2);
   var tableCardNode = /*#__PURE__*/_jsxs(Card, _objectSpread(_objectSpread({}, restCardProps), {}, {
-    className: cn('overflow-visible rounded-xl border-0 bg-card shadow-none', fullscreen && 'fixed inset-4 z-40 overflow-auto bg-background p-2 shadow-2xl', className, cardClassName),
+    className: cn('bg-card overflow-visible rounded-xl border-0 shadow-none', fullscreen && 'bg-background fixed inset-4 z-40 overflow-auto p-2 shadow-2xl', className, cardClassName),
     style: cardStyle,
     children: [searchFormConnectionNode, tableContent]
   }));

package/es/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "0.0.1";
+export declare const version = "0.0.4";
 export default version;

package/es/version.js

@@ -1,2 +1,2 @@
-export var version = '0.0.1';
+export var version = '0.0.4';
 export default version;