@pisell/private-materials 6.3.91 → 6.3.93

package/es/plus/walletPassGallery/index.js

@@ -46,7 +46,11 @@ var ARow = Row;
 var ACol = Col;
 var TAGS = ['gift_card', 'point_card', 'product_discount_card', 'good_pass', 'product_voucher'];
 var WalletPassGallery = function WalletPassGallery(props) {
-  var _context$appHelper, _utils$getStore, _dvaStore$core, _utils$translation, _getWalletDetail$data;
+  var _context$appHelper, _context$appHelper2, _context$engine, _utils$translation, _getWalletDetail$data;
+  var hideAddButton = props.hideAddButton,
+    hideTitle = props.hideTitle,
+    customer = props.customer,
+    platformProp = props.platform;
   var _useState = useState('available'),
     _useState2 = _slicedToArray(_useState, 2),
     activeKey = _useState2[0],
@@ -75,22 +79,31 @@ var WalletPassGallery = function WalletPassGallery(props) {
     setUpdateHolderLoading = _useState12[1];
   var context = useEngineContext();
   var utils = (context === null || context === void 0 || (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils) || {};
+  var _ref = ((_context$appHelper2 = context.appHelper) === null || _context$appHelper2 === void 0 ? void 0 : _context$appHelper2.constants) || {
+      apiPrefix: '/h5'
+    },
+    apiPrefix = _ref.apiPrefix;
+  var isTerminal = utils.isTerminal,
+    isApp = utils.isApp,
+    interaction = utils.interaction;
+  var isTerminalEnv = (typeof isTerminal === 'function' ? isTerminal() : !!isTerminal) || (isApp === null || isApp === void 0 ? void 0 : isApp());
   var platform = useMemo(function () {
+    if (platformProp) return platformProp;
     if (utils.isMobile) {
       return utils.isMobile() ? 'h5' : 'pc';
     }
     if (typeof window !== 'undefined') {
       return window.innerWidth <= 768 ? 'h5' : 'pc';
     }
-  }, [utils]);
-  var dvaStore = utils === null || utils === void 0 || (_utils$getStore = utils.getStore) === null || _utils$getStore === void 0 || (_utils$getStore = _utils$getStore.call(utils)) === null || _utils$getStore === void 0 ? void 0 : _utils$getStore.getState();
-  locales.init(localeTexts, (dvaStore === null || dvaStore === void 0 || (_dvaStore$core = dvaStore.core) === null || _dvaStore$core === void 0 ? void 0 : _dvaStore$core.translateLocale) || 'en');
+    return 'pc';
+  }, [utils, platformProp]);
+  locales.init(localeTexts, (context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 ? void 0 : _context$engine.locale) || 'en');
   request.setRequest(utils === null || utils === void 0 ? void 0 : utils.request);
   var _getWalletDetail = useRequest(getWalletDetail, {
     manual: true
   });
   var _getAvailableList = useInfiniteScroll( /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(d) {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(d) {
       var _searchParams, walletId, holderId, res;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -106,7 +119,10 @@ var WalletPassGallery = function WalletPassGallery(props) {
               tags: TAGS,
               filter_wallet_id: walletId || undefined,
               filter_holder_id: holderId || undefined,
-              with: ['customScheduleSnapshot', 'holder.detail']
+              with: ['customScheduleSnapshot', 'holder.detail'],
+              customer_id: customer === null || customer === void 0 ? void 0 : customer.id
+            }, {
+              apiPrefix: apiPrefix
             });
           case 5:
             res = _context.sent;
@@ -122,7 +138,7 @@ var WalletPassGallery = function WalletPassGallery(props) {
       }, _callee);
     }));
     return function (_x) {
-      return _ref.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }(), {
     manual: true,
@@ -133,7 +149,7 @@ var WalletPassGallery = function WalletPassGallery(props) {
     }
   });
   var _getUnavailableList = useInfiniteScroll( /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(d) {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(d) {
       var _searchParams, walletId, holderId, res;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
@@ -149,7 +165,10 @@ var WalletPassGallery = function WalletPassGallery(props) {
               tags: TAGS,
               filter_wallet_id: walletId || undefined,
               filter_holder_id: holderId || undefined,
-              with: ['customScheduleSnapshot', 'holder.detail']
+              with: ['customScheduleSnapshot', 'holder.detail'],
+              customer_id: customer === null || customer === void 0 ? void 0 : customer.id
+            }, {
+              apiPrefix: apiPrefix
             });
           case 5:
             res = _context2.sent;
@@ -165,7 +184,7 @@ var WalletPassGallery = function WalletPassGallery(props) {
       }, _callee2);
     }));
     return function (_x2) {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }(), {
     manual: true,
@@ -180,16 +199,16 @@ var WalletPassGallery = function WalletPassGallery(props) {
     if (walletId) {
       _getWalletDetail.runAsync(walletId);
     }
-    var req1 = _getAvailableList.loadMoreAsync();
-    var req2 = _getUnavailableList.loadMoreAsync();
+    var req1 = _getAvailableList.reloadAsync();
+    var req2 = _getUnavailableList.reloadAsync();
     var req3 = passId ? getWalletPassDetail(passId, {
       with: ['holder.detail']
     }) : Promise.resolve();
-    Promise.all([req1, req2, req3]).then(function (_ref3) {
-      var _ref4 = _slicedToArray(_ref3, 3),
-        data1 = _ref4[0],
-        data2 = _ref4[1],
-        data3 = _ref4[2];
+    Promise.all([req1, req2, req3]).then(function (_ref4) {
+      var _ref5 = _slicedToArray(_ref4, 3),
+        data1 = _ref5[0],
+        data2 = _ref5[1],
+        data3 = _ref5[2];
       if (platform !== 'h5') {
         var list1 = (data1 === null || data1 === void 0 ? void 0 : data1.list) || [];
         var list2 = (data2 === null || data2 === void 0 ? void 0 : data2.list) || [];
@@ -271,7 +290,22 @@ var WalletPassGallery = function WalletPassGallery(props) {
         }
       }
     });
+  }, [customer]);
+  useEffect(function () {
+    var _interaction$utils, _interaction$utils$mo;
+    interaction === null || interaction === void 0 || (_interaction$utils = interaction.utils) === null || _interaction$utils === void 0 || (_interaction$utils$mo = _interaction$utils.mountFunction) === null || _interaction$utils$mo === void 0 || _interaction$utils$mo.call(_interaction$utils, 'customer', 'new', function () {
+      try {
+        _getAvailableList.reloadAsync();
+        _getUnavailableList.reloadAsync();
+      } catch (err) {
+        console.error(err);
+      }
+    });
   }, []);
+  var listReload = function listReload() {
+    _getAvailableList.reloadAsync();
+    _getUnavailableList.reloadAsync();
+  };
   var _getUnbindList = useRequest(getUnbindList, {
     manual: true,
     onSuccess: function onSuccess(data) {
@@ -316,6 +350,20 @@ var WalletPassGallery = function WalletPassGallery(props) {
     var newId = key === KEYS.unavailable ? (_unavailable$ = _unavailable[0]) === null || _unavailable$ === void 0 ? void 0 : _unavailable$.id : (_avaliable$ = _avaliable[0]) === null || _avaliable$ === void 0 ? void 0 : _avaliable$.id;
     setCurrentItemId(newId);
   };
+  var handleAddClick = function handleAddClick() {
+    if (isTerminalEnv) {
+      var _interaction$utils2, _interaction$utils2$p;
+      interaction === null || interaction === void 0 || (_interaction$utils2 = interaction.utils) === null || _interaction$utils2 === void 0 || (_interaction$utils2$p = _interaction$utils2.postMessageToApp) === null || _interaction$utils2$p === void 0 || _interaction$utils2$p.call(_interaction$utils2, {
+        module: 'customer',
+        key: 'new',
+        data: {
+          customer_id: String((customer === null || customer === void 0 ? void 0 : customer.id) || '')
+        }
+      });
+      return;
+    }
+    setIsOpenAddModal(true);
+  };
   var _resetSearchState = function _resetSearchState() {
     setCurrentUnbindItem(null);
     _getUnbindList.mutate([]);
@@ -329,7 +377,7 @@ var WalletPassGallery = function WalletPassGallery(props) {
 
   // 通过code搜索卡券
   var _handleSearchByCode = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(code) {
+    var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(code) {
       return _regeneratorRuntime().wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
@@ -363,11 +411,11 @@ var WalletPassGallery = function WalletPassGallery(props) {
       }, _callee3, null, [[3, 8]]);
     }));
     return function _handleSearchByCode(_x3) {
-      return _ref5.apply(this, arguments);
+      return _ref6.apply(this, arguments);
     };
   }();
   var _handleBind = /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+    var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
       var data;
       return _regeneratorRuntime().wrap(function _callee4$(_context4) {
         while (1) switch (_context4.prev = _context4.next) {
@@ -415,7 +463,7 @@ var WalletPassGallery = function WalletPassGallery(props) {
       }, _callee4, null, [[2, 12]]);
     }));
     return function _handleBind() {
-      return _ref6.apply(this, arguments);
+      return _ref7.apply(this, arguments);
     };
   }();
   var _handleHolderChange = function _handleHolderChange(passId, holder) {
@@ -450,8 +498,36 @@ var WalletPassGallery = function WalletPassGallery(props) {
       console.log('pass not found', passId);
     }
   };
+  var _handleDetailRefresh = function _handleDetailRefresh(passId, patch) {
+    if (_avaliable.find(function (item) {
+      return item.id === passId;
+    })) {
+      _getAvailableList.mutate(function (data) {
+        var newList = data.list.map(function (item) {
+          return item.id === passId ? _objectSpread(_objectSpread({}, item), patch) : item;
+        });
+        return _objectSpread(_objectSpread({}, data), {}, {
+          list: newList
+        });
+      });
+      return;
+    }
+    if (_unavailable.find(function (item) {
+      return item.id === passId;
+    })) {
+      _getUnavailableList.mutate(function (data) {
+        var newList = data.list.map(function (item) {
+          return item.id === passId ? _objectSpread(_objectSpread({}, item), patch) : item;
+        });
+        return _objectSpread(_objectSpread({}, data), {}, {
+          list: newList
+        });
+      });
+      return;
+    }
+  };
   var _handleBindHolder = /*#__PURE__*/function () {
-    var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(holderId) {
+    var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(holderId) {
       var passId, res;
       return _regeneratorRuntime().wrap(function _callee5$(_context5) {
         while (1) switch (_context5.prev = _context5.next) {
@@ -491,7 +567,7 @@ var WalletPassGallery = function WalletPassGallery(props) {
       }, _callee5, null, [[2, 10, 13, 16]]);
     }));
     return function _handleBindHolder(_x4) {
-      return _ref7.apply(this, arguments);
+      return _ref8.apply(this, arguments);
     };
   }();
   var _currentItem = useMemo(function () {
@@ -507,15 +583,7 @@ var WalletPassGallery = function WalletPassGallery(props) {
   }, [currentItemId, _avaliable, _unavailable]);
   var _pcTitle = /*#__PURE__*/React.createElement("div", {
     className: "pisell-wallet-pass-gallery_title"
-  }, /*#__PURE__*/React.createElement(Title, null, (utils === null || utils === void 0 || (_utils$translation = utils.translation) === null || _utils$translation === void 0 ? void 0 : _utils$translation.call(utils, (_getWalletDetail$data = _getWalletDetail.data) === null || _getWalletDetail$data === void 0 || (_getWalletDetail$data = _getWalletDetail$data.data) === null || _getWalletDetail$data === void 0 ? void 0 : _getWalletDetail$data.name)) || locales.getText('wallet-pass-gallery.wallet')), platform === 'pc' ? /*#__PURE__*/React.createElement(Button, {
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      type: "pisell2-plus"
-    }),
-    size: "large",
-    onClick: function onClick() {
-      return setIsOpenAddModal(true);
-    }
-  }, locales.getText('wallet-pass-gallery.add')) : null);
+  }, hideTitle ? null : /*#__PURE__*/React.createElement(Title, null, (utils === null || utils === void 0 || (_utils$translation = utils.translation) === null || _utils$translation === void 0 ? void 0 : _utils$translation.call(utils, (_getWalletDetail$data = _getWalletDetail.data) === null || _getWalletDetail$data === void 0 || (_getWalletDetail$data = _getWalletDetail$data.data) === null || _getWalletDetail$data === void 0 ? void 0 : _getWalletDetail$data.name)) || locales.getText('wallet-pass-gallery.wallet')));
   var renderAvaliableList = function renderAvaliableList() {
     if (platform === 'h5') {
       return /*#__PURE__*/React.createElement(PassList, {
@@ -549,7 +617,9 @@ var WalletPassGallery = function WalletPassGallery(props) {
       flex: "auto"
     }, /*#__PURE__*/React.createElement(PassDetail, {
       dataSource: _currentItem,
-      platform: platform
+      platform: platform,
+      onDetailRefresh: _handleDetailRefresh,
+      onListRefresh: listReload
     })));
   };
   var renderUnavailableList = function renderUnavailableList() {
@@ -585,7 +655,9 @@ var WalletPassGallery = function WalletPassGallery(props) {
       flex: "auto"
     }, /*#__PURE__*/React.createElement(PassDetail, {
       dataSource: _currentItem,
-      platform: platform
+      platform: platform,
+      onDetailRefresh: _handleDetailRefresh,
+      onListRefresh: listReload
     })));
   };
   var renderTabBar = function renderTabBar(props, DefaultTabBar) {
@@ -621,7 +693,14 @@ var WalletPassGallery = function WalletPassGallery(props) {
         label: locales.getText('wallet-pass-gallery.unavailable'),
         children: renderUnavailableList(),
         badge: ((_getUnavailableList$d2 = _getUnavailableList.data) === null || _getUnavailableList$d2 === void 0 ? void 0 : _getUnavailableList$d2.count) || 0
-      }]
+      }],
+      tabBarExtraContent: platform === 'pc' && !hideAddButton ? /*#__PURE__*/React.createElement(Button, {
+        icon: /*#__PURE__*/React.createElement(Icon, {
+          type: "pisell2-plus"
+        }),
+        size: "large",
+        onClick: handleAddClick
+      }, locales.getText('wallet-pass-gallery.add')) : null
     }));
   };
   var renderPcContent = function renderPcContent() {
@@ -702,8 +781,8 @@ var WalletPassGallery = function WalletPassGallery(props) {
     }));
   };
   var renderH5Content = function renderH5Content() {
-    var _utils$interaction, _utils$interaction$is, _utils$translation2, _getWalletDetail$data2;
-    var _walletBar = !(utils !== null && utils !== void 0 && (_utils$interaction = utils.interaction) !== null && _utils$interaction !== void 0 && (_utils$interaction = _utils$interaction.utils) !== null && _utils$interaction !== void 0 && (_utils$interaction$is = _utils$interaction.isAppEnv) !== null && _utils$interaction$is !== void 0 && _utils$interaction$is.call(_utils$interaction)) && /*#__PURE__*/React.createElement("div", {
+    var _utils$isApp, _utils$translation2, _getWalletDetail$data2;
+    var _walletBar = !(utils !== null && utils !== void 0 && (_utils$isApp = utils.isApp) !== null && _utils$isApp !== void 0 && _utils$isApp.call(utils)) && /*#__PURE__*/React.createElement("div", {
       className: "pisell-wallet-pass-gallery-bar"
     }, /*#__PURE__*/React.createElement("div", {
       className: "pisell-wallet-pass-gallery-header-bar-arrow",
@@ -715,15 +794,13 @@ var WalletPassGallery = function WalletPassGallery(props) {
     })), /*#__PURE__*/React.createElement("span", {
       className: "header-title"
     }, (utils === null || utils === void 0 || (_utils$translation2 = utils.translation) === null || _utils$translation2 === void 0 ? void 0 : _utils$translation2.call(utils, (_getWalletDetail$data2 = _getWalletDetail.data) === null || _getWalletDetail$data2 === void 0 || (_getWalletDetail$data2 = _getWalletDetail$data2.data) === null || _getWalletDetail$data2 === void 0 ? void 0 : _getWalletDetail$data2.name)) || locales.getText('wallet-pass-gallery.wallet')));
-    return /*#__PURE__*/React.createElement(React.Fragment, null, _walletBar, renderContent(), /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, _walletBar, renderContent(), hideAddButton ? null : /*#__PURE__*/React.createElement("div", {
       style: {
         padding: 24
       }
     }, /*#__PURE__*/React.createElement(Button, {
       size: "large",
-      onClick: function onClick() {
-        return setIsOpenAddModal(true);
-      },
+      onClick: handleAddClick,
       block: true
     }, locales.getText('wallet-pass-gallery.button.add'))), /*#__PURE__*/React.createElement(PisellModal, {
       zIndex: 997,
@@ -737,7 +814,9 @@ var WalletPassGallery = function WalletPassGallery(props) {
       title: locales.getText('wallet-pass-gallery.details')
     }, /*#__PURE__*/React.createElement(PassDetail, {
       dataSource: _currentItem,
-      platform: platform
+      platform: platform,
+      onDetailRefresh: _handleDetailRefresh,
+      onListRefresh: listReload
     })));
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {

package/es/plus/walletPassGallery/serve.d.ts

@@ -87,7 +87,9 @@ export declare type ErrorCallback = () => void;
  * @returns Promise<{list: IWalletListItemProps[], count: number}> 钱包列表和总数
  * @throws 请求失败时抛出错误
  */
-export declare const getWalletPassList: (params?: IWalletListParmsProps) => Promise<{
+export declare const getWalletPassList: (params: IWalletListParmsProps, options?: {
+    apiPrefix: string;
+}) => Promise<{
     list: IWalletListItemProps[];
     count: number;
 }>;

package/es/plus/walletPassGallery/serve.js

@@ -36,14 +36,14 @@ import { locales } from '@pisell/utils';
  * @throws 请求失败时抛出错误
  */
 export var getWalletPassList = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(params) {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(params, options) {
     var _yield$request$getReq, data;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           _context.prev = 0;
           _context.next = 3;
-          return request.getRequest().get("/h5/machinecode/lowcode/list", params);
+          return request.getRequest().get("".concat((options === null || options === void 0 ? void 0 : options.apiPrefix) || '/h5', "/machinecode/lowcode/list"), params);
         case 3:
           _yield$request$getReq = _context.sent;
           data = _yield$request$getReq.data;
@@ -65,7 +65,7 @@ export var getWalletPassList = /*#__PURE__*/function () {
       }
     }, _callee, null, [[0, 8]]);
   }));
-  return function getWalletPassList(_x) {
+  return function getWalletPassList(_x, _x2) {
     return _ref.apply(this, arguments);
   };
 }();
@@ -94,7 +94,7 @@ export var bindCodeToCustomer = /*#__PURE__*/function () {
       }
     }, _callee2);
   }));
-  return function bindCodeToCustomer(_x2) {
+  return function bindCodeToCustomer(_x3) {
     return _ref2.apply(this, arguments);
   };
 }();
@@ -123,7 +123,7 @@ export var getUnbindList = /*#__PURE__*/function () {
       }
     }, _callee3);
   }));
-  return function getUnbindList(_x3) {
+  return function getUnbindList(_x4) {
     return _ref3.apply(this, arguments);
   };
 }();
@@ -162,7 +162,7 @@ export var goOrder = /*#__PURE__*/function () {
       }
     }, _callee4, null, [[0, 8]]);
   }));
-  return function goOrder(_x4) {
+  return function goOrder(_x5) {
     return _ref4.apply(this, arguments);
   };
 }();
@@ -197,7 +197,7 @@ export var getAssetList = /*#__PURE__*/function () {
       }
     }, _callee5);
   }));
-  return function getAssetList(_x5) {
+  return function getAssetList(_x6) {
     return _ref5.apply(this, arguments);
   };
 }();
@@ -223,7 +223,7 @@ export var getActiveLogs = /*#__PURE__*/function () {
       }
     }, _callee6);
   }));
-  return function getActiveLogs(_x6) {
+  return function getActiveLogs(_x7) {
     return _ref6.apply(this, arguments);
   };
 }();
@@ -259,7 +259,7 @@ export var getDetailApi = /*#__PURE__*/function () {
       }
     }, _callee7);
   }));
-  return function getDetailApi(_x7) {
+  return function getDetailApi(_x8) {
     return _ref7.apply(this, arguments);
   };
 }();
@@ -291,7 +291,7 @@ export var orderRechargeProduct = /*#__PURE__*/function () {
       }
     }, _callee8);
   }));
-  return function orderRechargeProduct(_x8) {
+  return function orderRechargeProduct(_x9) {
     return _ref8.apply(this, arguments);
   };
 }();
@@ -313,7 +313,7 @@ export var getWalletDetail = /*#__PURE__*/function () {
       }
     }, _callee9);
   }));
-  return function getWalletDetail(_x9) {
+  return function getWalletDetail(_x10) {
     return _ref9.apply(this, arguments);
   };
 }();
@@ -342,7 +342,7 @@ export var updateWalletPassHolder = /*#__PURE__*/function () {
       }
     }, _callee10);
   }));
-  return function updateWalletPassHolder(_x10, _x11) {
+  return function updateWalletPassHolder(_x11, _x12) {
     return _ref10.apply(this, arguments);
   };
 }();
@@ -370,7 +370,7 @@ export var getWalletPassDetail = /*#__PURE__*/function () {
       }
     }, _callee11);
   }));
-  return function getWalletPassDetail(_x12, _x13) {
+  return function getWalletPassDetail(_x13, _x14) {
     return _ref11.apply(this, arguments);
   };
 }();

package/es/pro/NumericStepper/index.d.ts

@@ -7,6 +7,12 @@ declare global {
         }
     }
 }
+/**
+ * 样式变体类型
+ * - separated: 分离式，按钮独立显示（默认）
+ * - capsule: 胶囊式，按钮和数字在一个圆角容器内
+ */
+export declare type NumericStepperVariant = 'separated' | 'capsule';
 export interface NumericStepperProps {
     /** 当前值 */
     value?: number;
@@ -28,16 +34,35 @@ export interface NumericStepperProps {
     styles?: {
         container?: React.CSSProperties;
     };
+    horizontalPadding?: number | string;
     /** 尺寸 */
     size?: 'small' | 'middle' | 'large';
-    /** 按钮形状 */
+    /** 按钮形状（仅在 variant='separated' 时生效） */
     shape?: 'round' | 'square';
-    /** 是否显示输入框 */
-    showInput?: boolean;
     /** 减号按钮的自定义内容 */
     minusIcon?: React.ReactNode;
     /** 加号按钮的自定义内容 */
     plusIcon?: React.ReactNode;
+    /**
+     * 样式变体
+     * - separated: 分离式，按钮独立显示（默认）
+     * - capsule: 胶囊式，按钮和数字在一个圆角容器内
+     * @default 'separated'
+     */
+    variant?: NumericStepperVariant;
+    /**
+     * 是否启用输入功能（点击数字弹出键盘）
+     * - 开启时：展示区域 cursor 为 pointer，点击弹出键盘
+     * - 关闭后：展示区域无边框，点击不会弹出键盘
+     * @default true
+     */
+    enableInput?: boolean;
+    /**
+     * 展示区域最大宽度（仅胶囊模式生效）
+     * - 设置后：展示区域最大宽度受限，超出部分截断
+     * - 不设置：展示区域宽度随内容自适应
+     */
+    displayMaxWidth?: number | string;
 }
 declare const NumericStepper: React.FC<NumericStepperProps>;
 export default NumericStepper;