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

package/es/components/form/schemaForm.js

@@ -460,9 +460,12 @@ var renderSchemaColumns = function renderSchemaColumns(columns, form, currentVal
       var labelNode = titleNode !== null && titleNode !== void 0 ? titleNode : key;
       var searchSafeFormItemProps = _objectSpread({}, formItemProps);
       delete searchSafeFormItemProps.initialValue;
-      var mergedFormItemProps = _objectSpread(_objectSpread({
+      var mergedFormItemProps = _objectSpread(_objectSpread(_objectSpread({
         name: fullName,
-        label: labelNode,
+        label: labelNode
+      }, valueType === 'switch' ? {
+        valuePropName: 'checked'
+      } : {}), {}, {
         initialValue: getConvertedInitialValue(columnItem, fullName, getSchemaColumnInitialValue(columnItem, layoutType, searchInitialValueSnapshot, fullName)),
         tooltip: columnItem.tooltip
       }, isQueryForm ? searchSafeFormItemProps : formItemProps), {}, {

package/es/components/table/index.js

@@ -28,6 +28,8 @@ 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';
@@ -307,6 +309,9 @@ var BaseProTable = function BaseProTable(_ref3) {
   var _useForm = useForm(),
     _useForm2 = _slicedToArray(_useForm, 1),
     searchForm = _useForm2[0];
+  var _useLocale = useLocale(),
+    t = _useLocale.t;
+  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 +696,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", {
@@ -1243,7 +1248,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", {
@@ -1296,7 +1301,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 +1374,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 +1400,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 +1526,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/lib/components/form/schemaForm.js

@@ -467,9 +467,12 @@ var renderSchemaColumns = function renderSchemaColumns(columns, form, currentVal
       var labelNode = titleNode !== null && titleNode !== void 0 ? titleNode : key;
       var searchSafeFormItemProps = _objectSpread({}, formItemProps);
       delete searchSafeFormItemProps.initialValue;
-      var mergedFormItemProps = _objectSpread(_objectSpread({
+      var mergedFormItemProps = _objectSpread(_objectSpread(_objectSpread({
         name: fullName,
-        label: labelNode,
+        label: labelNode
+      }, valueType === 'switch' ? {
+        valuePropName: 'checked'
+      } : {}), {}, {
         initialValue: getConvertedInitialValue(columnItem, fullName, getSchemaColumnInitialValue(columnItem, layoutType, searchInitialValueSnapshot, fullName)),
         tooltip: columnItem.tooltip
       }, isQueryForm ? searchSafeFormItemProps : formItemProps), {}, {

package/lib/components/table/index.js

@@ -155,6 +155,8 @@ var _checkbox = require("@hanwenbo/x-web-ui/checkbox");
 var _dropdown = require("@hanwenbo/x-web-ui/dropdown");
 var _form = require("@hanwenbo/x-web-ui/form");
 var _pagination = require("@hanwenbo/x-web-ui/pagination");
+var _select = require("@hanwenbo/x-web-ui/select");
+var _i18n = require("@hanwenbo/x-web-ui/i18n");
 var _table = require("@hanwenbo/x-web-ui/table");
 var _tooltip = require("@hanwenbo/x-web-ui/tooltip");
 var _cn = require("@hanwenbo/x-web-ui/utils/cn");
@@ -452,6 +454,9 @@ var BaseProTable = function BaseProTable(_ref3) {
   var _useForm = (0, _form.useForm)(),
     _useForm2 = _slicedToArray(_useForm, 1),
     searchForm = _useForm2[0];
+  var _useLocale = (0, _i18n.useLocale)(),
+    t = _useLocale.t;
+  var itemsPerPageLabel = t('common.itemsPerPage') !== 'common.itemsPerPage' ? t('common.itemsPerPage') : String(_i18n.zhCN['common.itemsPerPage']);
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     requestLoading = _useState2[0],
@@ -836,7 +841,7 @@ var BaseProTable = function BaseProTable(_ref3) {
               setColumnVisibility(columnKey, checked);
             },
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "truncate text-sm text-foreground",
+              className: "text-foreground truncate text-sm",
               children: columnTitle
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -1388,7 +1393,7 @@ var BaseProTable = function BaseProTable(_ref3) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "flex items-center gap-2 text-sm text-foreground",
+          className: "text-foreground flex items-center gap-2 text-sm",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: "text-primary",
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
@@ -1441,7 +1446,7 @@ var BaseProTable = function BaseProTable(_ref3) {
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.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
     });
@@ -1514,25 +1519,20 @@ var BaseProTable = function BaseProTable(_ref3) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _cn.cn)(PRO_TABLE_STACK_CLASS, 'w-full sm:flex-row sm:items-center sm:justify-between'),
       children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("label", {
-          className: "flex items-center gap-2",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "text-xs uppercase tracking-wide text-muted-foreground",
-            children: "Page Size"
-          }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_select.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__*/(0, _jsxRuntime.jsx)(_pagination.Pagination, {
         current: pageInfo.current,
@@ -1545,7 +1545,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__*/(0, _jsxRuntime.jsx)(_table.Table, _objectSpread(_objectSpread({}, tableProps), {}, {
     className: (0, _cn.cn)(tableClassName),
     style: tableStyle,
@@ -1671,7 +1671,7 @@ var BaseProTable = function BaseProTable(_ref3) {
     cardStyle = _ref10.style,
     restCardProps = _objectWithoutProperties(_ref10, _excluded2);
   var tableCardNode = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_card.Card, _objectSpread(_objectSpread({}, restCardProps), {}, {
-    className: (0, _cn.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: (0, _cn.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanwenbo/x-web-pro-components",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Enterprise-ready pro components built on x-web-ui",
   "author": "9476400@qq.com",
   "license": "MIT",
@@ -44,7 +44,7 @@
   "dependencies": {
     "dayjs": "^1.11.3",
     "lucide-react": "^0.460.0",
-    "@hanwenbo/x-web-ui": "0.0.2"
+    "@hanwenbo/x-web-ui": "0.0.3"
   },
   "peerDependencies": {
     "react": ">=18.0.0",