@pisell/private-materials 6.6.59 → 6.6.61

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (95) hide show
  1. package/build/lowcode/assets-daily.json +11 -11
  2. package/build/lowcode/assets-dev.json +2 -2
  3. package/build/lowcode/assets-prod.json +11 -11
  4. package/build/lowcode/index.js +1 -1
  5. package/build/lowcode/meta.js +2 -2
  6. package/build/lowcode/preview.js +8 -8
  7. package/build/lowcode/render/default/view.css +1 -1
  8. package/build/lowcode/render/default/view.js +11 -11
  9. package/build/lowcode/view.css +1 -1
  10. package/build/lowcode/view.js +11 -11
  11. package/es/components/booking/components/footer/utils.js +79 -75
  12. package/es/components/eftposPay/hooks.d.ts +1 -1
  13. package/es/components/eftposPay/store/index.d.ts +2 -2
  14. package/es/components/index.d.ts +2 -1
  15. package/es/components/index.js +2 -1
  16. package/es/components/pisellCashCounting/PisellCashCounting.d.ts +5 -0
  17. package/es/components/pisellCashCounting/PisellCashCounting.js +121 -0
  18. package/es/components/pisellCashCounting/PisellCashCounting.less +263 -0
  19. package/es/components/pisellCashCounting/components/CashCountingModal/index.d.ts +20 -0
  20. package/es/components/pisellCashCounting/components/CashCountingModal/index.js +250 -0
  21. package/es/components/pisellCashCounting/components/CashCountingModal/index.less +279 -0
  22. package/es/components/pisellCashCounting/hooks.d.ts +21 -0
  23. package/es/components/pisellCashCounting/hooks.js +193 -0
  24. package/es/components/pisellCashCounting/index.d.ts +2 -0
  25. package/es/components/pisellCashCounting/index.js +1 -0
  26. package/es/components/pisellCashCounting/locales.d.ts +118 -0
  27. package/es/components/pisellCashCounting/locales.js +117 -0
  28. package/es/components/pisellCashCounting/types.d.ts +85 -0
  29. package/es/components/pisellCashCounting/types.js +1 -0
  30. package/es/components/pisellCashCounting/utils.d.ts +10 -0
  31. package/es/components/pisellCashCounting/utils.js +40 -0
  32. package/es/hooks/useResponsive.d.ts +8 -0
  33. package/es/hooks/useResponsive.js +43 -0
  34. package/es/hooks/useThemeTokens.d.ts +7 -0
  35. package/es/hooks/useThemeTokens.js +20 -0
  36. package/es/index.d.ts +1 -0
  37. package/es/index.js +2 -1
  38. package/es/pro/NumericStepper/index.d.ts +75 -0
  39. package/es/pro/NumericStepper/index.js +301 -0
  40. package/es/pro/NumericStepper/index.less +364 -0
  41. package/es/pro/keyboards/index.d.ts +2 -0
  42. package/es/pro/keyboards/index.js +1 -0
  43. package/es/pro/keyboards/locales.d.ts +38 -0
  44. package/es/pro/keyboards/locales.js +57 -0
  45. package/es/pro/keyboards/numberKeyboard/index.d.ts +16 -0
  46. package/es/pro/keyboards/numberKeyboard/index.js +523 -0
  47. package/es/pro/keyboards/numberKeyboard/index.less +59 -0
  48. package/es/pro/keyboards/numberKeyboard/types.d.ts +63 -0
  49. package/es/pro/keyboards/numberKeyboard/types.js +1 -0
  50. package/es/pro/pisellPriceKeyboardModal/PisellPriceKeyboardModal.js +3 -1
  51. package/es/pro/pisellPriceKeyboardModal/types.d.ts +2 -0
  52. package/lib/components/booking/components/footer/utils.js +6 -3
  53. package/lib/components/eftposPay/hooks.d.ts +1 -1
  54. package/lib/components/eftposPay/store/index.d.ts +2 -2
  55. package/lib/components/index.d.ts +2 -1
  56. package/lib/components/index.js +3 -0
  57. package/lib/components/pisellCashCounting/PisellCashCounting.d.ts +5 -0
  58. package/lib/components/pisellCashCounting/PisellCashCounting.js +168 -0
  59. package/lib/components/pisellCashCounting/PisellCashCounting.less +263 -0
  60. package/lib/components/pisellCashCounting/components/CashCountingModal/index.d.ts +20 -0
  61. package/lib/components/pisellCashCounting/components/CashCountingModal/index.js +171 -0
  62. package/lib/components/pisellCashCounting/components/CashCountingModal/index.less +279 -0
  63. package/lib/components/pisellCashCounting/hooks.d.ts +21 -0
  64. package/lib/components/pisellCashCounting/hooks.js +189 -0
  65. package/lib/components/pisellCashCounting/index.d.ts +2 -0
  66. package/lib/components/pisellCashCounting/index.js +35 -0
  67. package/lib/components/pisellCashCounting/locales.d.ts +118 -0
  68. package/lib/components/pisellCashCounting/locales.js +141 -0
  69. package/lib/components/pisellCashCounting/types.d.ts +85 -0
  70. package/lib/components/pisellCashCounting/types.js +17 -0
  71. package/lib/components/pisellCashCounting/utils.d.ts +10 -0
  72. package/lib/components/pisellCashCounting/utils.js +59 -0
  73. package/lib/hooks/useResponsive.d.ts +8 -0
  74. package/lib/hooks/useResponsive.js +48 -0
  75. package/lib/hooks/useThemeTokens.d.ts +7 -0
  76. package/lib/hooks/useThemeTokens.js +40 -0
  77. package/lib/index.d.ts +1 -0
  78. package/lib/index.js +3 -0
  79. package/lib/pro/NumericStepper/index.d.ts +75 -0
  80. package/lib/pro/NumericStepper/index.js +338 -0
  81. package/lib/pro/NumericStepper/index.less +364 -0
  82. package/lib/pro/keyboards/index.d.ts +2 -0
  83. package/lib/pro/keyboards/index.js +39 -0
  84. package/lib/pro/keyboards/locales.d.ts +38 -0
  85. package/lib/pro/keyboards/locales.js +61 -0
  86. package/lib/pro/keyboards/numberKeyboard/index.d.ts +16 -0
  87. package/lib/pro/keyboards/numberKeyboard/index.js +400 -0
  88. package/lib/pro/keyboards/numberKeyboard/index.less +59 -0
  89. package/lib/pro/keyboards/numberKeyboard/types.d.ts +63 -0
  90. package/lib/pro/keyboards/numberKeyboard/types.js +17 -0
  91. package/lib/pro/pisellPriceKeyboardModal/PisellPriceKeyboardModal.js +3 -1
  92. package/lib/pro/pisellPriceKeyboardModal/types.d.ts +2 -0
  93. package/lowcode/pisell-cash-counting/meta.ts +167 -0
  94. package/lowcode/pisell-cash-counting/snippets.ts +13 -0
  95. package/package.json +4 -4
@@ -0,0 +1,301 @@
1
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
5
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
6
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
7
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
8
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
9
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
10
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
11
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
12
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
13
+ import * as React from 'react';
14
+ import { useMemo, useState, useCallback, useEffect } from 'react';
15
+ import classNames from 'classnames';
16
+ import { isMobile } from '@pisell/utils';
17
+ import { NumberKeyboard } from "../keyboards";
18
+ import useThemeTokens from "../../hooks/useThemeTokens";
19
+ import "./index.less";
20
+
21
+ /**
22
+ * 样式变体类型
23
+ * - separated: 分离式,按钮独立显示(默认)
24
+ * - capsule: 胶囊式,按钮和数字在一个圆角容器内
25
+ */
26
+
27
+ var NumericStepper = function NumericStepper(_ref) {
28
+ var value = _ref.value,
29
+ _ref$defaultValue = _ref.defaultValue,
30
+ defaultValue = _ref$defaultValue === void 0 ? 0 : _ref$defaultValue,
31
+ _ref$min = _ref.min,
32
+ min = _ref$min === void 0 ? 0 : _ref$min,
33
+ _ref$max = _ref.max,
34
+ max = _ref$max === void 0 ? Infinity : _ref$max,
35
+ _ref$step = _ref.step,
36
+ step = _ref$step === void 0 ? 1 : _ref$step,
37
+ _ref$disabled = _ref.disabled,
38
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
39
+ onChange = _ref.onChange,
40
+ className = _ref.className,
41
+ styles = _ref.styles,
42
+ _ref$size = _ref.size,
43
+ size = _ref$size === void 0 ? 'middle' : _ref$size,
44
+ _ref$shape = _ref.shape,
45
+ shape = _ref$shape === void 0 ? 'round' : _ref$shape,
46
+ minusIcon = _ref.minusIcon,
47
+ plusIcon = _ref.plusIcon,
48
+ _ref$horizontalPaddin = _ref.horizontalPadding,
49
+ horizontalPadding = _ref$horizontalPaddin === void 0 ? 0 : _ref$horizontalPaddin,
50
+ _ref$variant = _ref.variant,
51
+ variant = _ref$variant === void 0 ? 'separated' : _ref$variant,
52
+ _ref$enableInput = _ref.enableInput,
53
+ enableInput = _ref$enableInput === void 0 ? true : _ref$enableInput,
54
+ displayMaxWidth = _ref.displayMaxWidth,
55
+ theme = _ref.theme,
56
+ _ref$plusOnlyAtZero = _ref.plusOnlyAtZero,
57
+ plusOnlyAtZero = _ref$plusOnlyAtZero === void 0 ? true : _ref$plusOnlyAtZero;
58
+ var _useState = useState(false),
59
+ _useState2 = _slicedToArray(_useState, 2),
60
+ open = _useState2[0],
61
+ setOpen = _useState2[1];
62
+ var _useState3 = useState(value !== undefined ? value : defaultValue),
63
+ _useState4 = _slicedToArray(_useState3, 2),
64
+ internalValue = _useState4[0],
65
+ setInternalValue = _useState4[1];
66
+ var _isMobile = useMemo(function () {
67
+ return isMobile();
68
+ }, [isMobile]);
69
+ var _useThemeTokens = useThemeTokens(theme),
70
+ colorPrimary = _useThemeTokens.colorPrimary;
71
+ var _useState5 = useState(''),
72
+ _useState6 = _slicedToArray(_useState5, 2),
73
+ tempValue = _useState6[0],
74
+ setTempValue = _useState6[1];
75
+ var currentValue = value !== undefined ? value : internalValue;
76
+
77
+ // 同步外部value变化
78
+ useEffect(function () {
79
+ if (value !== undefined) {
80
+ setInternalValue(value);
81
+ }
82
+ }, [value]);
83
+
84
+ // 处理值变化
85
+ var handleValueChange = useCallback(function (newValue) {
86
+ // 确保值在有效范围内
87
+ var clampedValue = Math.max(min, Math.min(max, newValue));
88
+ if (value === undefined) {
89
+ setInternalValue(clampedValue);
90
+ }
91
+ onChange === null || onChange === void 0 || onChange(clampedValue);
92
+ }, [min, max, value, onChange]);
93
+
94
+ // 减少数值
95
+ var handleDecrease = useCallback(function () {
96
+ if (disabled) return;
97
+ var newValue = currentValue - step;
98
+ if (newValue >= min) {
99
+ handleValueChange(newValue);
100
+ }
101
+ }, [currentValue, step, min, disabled, handleValueChange]);
102
+
103
+ // 增加数值
104
+ var handleIncrease = useCallback(function () {
105
+ if (disabled) return;
106
+
107
+ // 如果当前值小于 min,直接增加到 min
108
+ if (currentValue < min) {
109
+ handleValueChange(min);
110
+ return;
111
+ }
112
+ var newValue = currentValue + step;
113
+ if (newValue <= max) {
114
+ handleValueChange(newValue);
115
+ }
116
+ }, [currentValue, step, min, max, disabled, handleValueChange]);
117
+ var handleChange = function handleChange(e) {
118
+ if (!e) {
119
+ setTempValue(min.toString());
120
+ return;
121
+ }
122
+ if (e === 'delete') {
123
+ // 删除最后一位数字
124
+ var newTempValue = tempValue.slice(0, -1);
125
+ setTempValue(newTempValue || '0');
126
+ return;
127
+ } else if (e === 'verify') {
128
+ // 确认时提交暂存的值
129
+ var newValue = parseInt(tempValue) || 0;
130
+ var clampedValue = Math.max(min, Math.min(max, newValue));
131
+ onChange === null || onChange === void 0 || onChange(clampedValue);
132
+ setOpen(false); // 手动关闭弹窗
133
+ return;
134
+ } else {
135
+ // 更新暂存值,不直接触发onChange
136
+ setTempValue(e);
137
+ }
138
+ };
139
+
140
+ // 点击数字的处理
141
+ var handleNumberClick = function handleNumberClick() {
142
+ // 禁用或关闭输入功能时不响应点击
143
+ if (disabled || !enableInput) return;
144
+ // Popover 会自动处理打开,我们只需要设置初始值
145
+ setTempValue(currentValue.toString()); // 设置临时值为当前值
146
+ if (_isMobile) {
147
+ setOpen(true);
148
+ }
149
+ };
150
+
151
+ // 处理弹窗开关时的值同步
152
+ var handleOpenChange = function handleOpenChange(visible) {
153
+ setOpen(visible);
154
+ if (visible) {
155
+ // 打开时设置临时值为当前值
156
+ setTempValue(currentValue.toString());
157
+ } else {
158
+ // 关闭时检查是否需要提交值
159
+ var tempNumber = parseInt(tempValue) || 0;
160
+ var clampedValue = Math.max(min, Math.min(max, tempNumber));
161
+ if (clampedValue !== value) {
162
+ onChange === null || onChange === void 0 || onChange(clampedValue);
163
+ }
164
+ // 重置临时值为当前值,确保下次打开时显示正确的值
165
+ setTempValue(currentValue.toString());
166
+ }
167
+ };
168
+
169
+ // 判断按钮是否应该禁用
170
+ var isDecreaseDisabled = disabled || currentValue <= min;
171
+ var isIncreaseDisabled = disabled || currentValue >= max;
172
+ // 胶囊模式下不应用 isPlusOnly 逻辑,始终显示完整的 减号-数字-加号
173
+ var isPlusOnly = variant === 'capsule' ? false : Boolean(plusOnlyAtZero && (currentValue === 0 || currentValue === undefined));
174
+ var outOfRange = currentValue < min || currentValue > max;
175
+ var stepperClasses = classNames('numeric-stepper', "numeric-stepper-".concat(size), "numeric-stepper-".concat(variant), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "numeric-stepper-".concat(shape), variant === 'separated'), 'numeric-stepper-disabled', disabled), 'numeric-stepper-simple', currentValue === 0 || currentValue === undefined), 'numeric-stepper-out-of-range', outOfRange), 'numeric-stepper-plus-only', isPlusOnly), 'numeric-stepper-input-disabled', !enableInput), className);
176
+ var _minus = !isPlusOnly && /*#__PURE__*/React.createElement("div", {
177
+ className: "numeric-stepper-button-wrapper numeric-stepper-minus-button-wrapper",
178
+ onClick: handleDecrease,
179
+ style: {
180
+ paddingLeft: horizontalPadding
181
+ }
182
+ }, /*#__PURE__*/React.createElement("button", {
183
+ type: "button",
184
+ className: classNames('numeric-stepper-button', 'numeric-stepper-minus', {
185
+ 'numeric-stepper-button-disabled': isDecreaseDisabled
186
+ }),
187
+ disabled: isDecreaseDisabled
188
+ }, minusIcon || /*#__PURE__*/React.createElement("svg", {
189
+ width: "16",
190
+ height: "16",
191
+ viewBox: "0 0 16 16",
192
+ fill: "none"
193
+ }, /*#__PURE__*/React.createElement("path", {
194
+ d: "M3 8h10",
195
+ stroke: "currentColor",
196
+ strokeWidth: "1.5",
197
+ strokeLinecap: "round"
198
+ }))));
199
+ var _display = useMemo(function () {
200
+ if (isPlusOnly) {
201
+ return null;
202
+ }
203
+
204
+ // 展示区域样式(胶囊模式下支持 displayMaxWidth)
205
+ var displayWrapperStyle = variant === 'capsule' && displayMaxWidth ? {
206
+ maxWidth: typeof displayMaxWidth === 'number' ? "".concat(displayMaxWidth, "px") : displayMaxWidth
207
+ } : {};
208
+
209
+ // 纯展示模式(enableInput 为 false)
210
+ var displayElement = /*#__PURE__*/React.createElement("span", {
211
+ className: "numeric-stepper-display-wrapper",
212
+ onClick: handleNumberClick,
213
+ style: displayWrapperStyle
214
+ }, /*#__PURE__*/React.createElement("span", {
215
+ className: classNames('numeric-stepper-display')
216
+ }, currentValue));
217
+
218
+ // 关闭输入功能时,只展示数字,不包装键盘
219
+ if (!enableInput) {
220
+ return displayElement;
221
+ }
222
+ if (_isMobile) {
223
+ return displayElement;
224
+ }
225
+ return /*#__PURE__*/React.createElement(NumberKeyboard, {
226
+ max: max,
227
+ min: min,
228
+ originalValue: currentValue.toString(),
229
+ defaultValue: currentValue.toString(),
230
+ onEnter: function onEnter(newValue) {
231
+ handleValueChange === null || handleValueChange === void 0 || handleValueChange(Number(newValue));
232
+ setOpen(false);
233
+ },
234
+ containerProps: {
235
+ className: 'numeric-stepper-keyboard-popover',
236
+ renderType: 'popover',
237
+ open: open,
238
+ onOpenChange: handleOpenChange,
239
+ content: /*#__PURE__*/React.createElement(NumberKeyboard, {
240
+ max: max,
241
+ min: min,
242
+ originalValue: currentValue.toString(),
243
+ defaultValue: currentValue.toString(),
244
+ onEnter: function onEnter(newValue) {
245
+ handleValueChange === null || handleValueChange === void 0 || handleValueChange(Number(newValue));
246
+ setOpen(false);
247
+ }
248
+ })
249
+ }
250
+ }, displayElement);
251
+ }, [_isMobile, open, isPlusOnly, currentValue, handleNumberClick, handleOpenChange, handleChange, max, min, onChange, tempValue, enableInput, variant, displayMaxWidth]);
252
+ var _plus = /*#__PURE__*/React.createElement("div", {
253
+ className: "numeric-stepper-button-wrapper numeric-stepper-plus-button-wrapper",
254
+ onClick: handleIncrease,
255
+ style: {
256
+ paddingLeft: isPlusOnly ? horizontalPadding : 0,
257
+ paddingRight: horizontalPadding
258
+ }
259
+ }, /*#__PURE__*/React.createElement("button", {
260
+ type: "button",
261
+ className: classNames('numeric-stepper-button', 'numeric-stepper-plus', {
262
+ 'numeric-stepper-button-disabled': isIncreaseDisabled
263
+ }),
264
+ disabled: isIncreaseDisabled
265
+ }, plusIcon || /*#__PURE__*/React.createElement("svg", {
266
+ width: "16",
267
+ height: "16",
268
+ viewBox: "0 0 16 16",
269
+ fill: "none"
270
+ }, /*#__PURE__*/React.createElement("path", {
271
+ d: "M8 3v10M3 8h10",
272
+ stroke: "currentColor",
273
+ strokeWidth: "1.5",
274
+ strokeLinecap: "round"
275
+ }))));
276
+ return /*#__PURE__*/React.createElement("div", {
277
+ className: stepperClasses,
278
+ style: _objectSpread(_objectSpread({}, (styles === null || styles === void 0 ? void 0 : styles.container) || {}), {}, _defineProperty({}, '--color-primary', colorPrimary)),
279
+ onClick: function onClick(e) {
280
+ return e.stopPropagation();
281
+ }
282
+ }, _minus, _display, _plus, _isMobile && /*#__PURE__*/React.createElement(NumberKeyboard, {
283
+ containerProps: {
284
+ className: 'numeric-stepper-keyboard-modal',
285
+ renderType: 'modal',
286
+ open: open,
287
+ onCancel: function onCancel() {
288
+ setOpen(false);
289
+ }
290
+ },
291
+ max: max,
292
+ min: min,
293
+ defaultValue: currentValue.toString(),
294
+ originalValue: currentValue.toString(),
295
+ onEnter: function onEnter(newValue) {
296
+ handleValueChange === null || handleValueChange === void 0 || handleValueChange(Number(newValue));
297
+ setOpen(false);
298
+ }
299
+ }));
300
+ };
301
+ export default NumericStepper;
@@ -0,0 +1,364 @@
1
+ // ========== 变量定义 ==========
2
+ @primary-color: var(--color-primary, #5d3f9f);
3
+
4
+ @text-color: #101828;
5
+ @text-secondary: #344054;
6
+ @text-disabled: #d0d5dd;
7
+
8
+ @border-color: #d0d5dd;
9
+ @border-color-light: #e4e7ec;
10
+
11
+ @bg-disabled: #d0d5dd;
12
+ @bg-hover-light: #f2f4f7;
13
+ @bg-active-light: #e4e7ec;
14
+ @bg-disabled-light: #f9fafb;
15
+
16
+ // 尺寸变量 - 分离模式
17
+ @size-small: 24px;
18
+ @size-middle: 32px;
19
+ @size-large: 40px;
20
+
21
+ // 尺寸变量 - 胶囊模式
22
+ @capsule-size-small: 28px;
23
+ @capsule-size-middle: 40px;
24
+ @capsule-size-large: 52px;
25
+
26
+ // 图标尺寸 - 分离模式
27
+ @icon-size-small: 12px;
28
+ @icon-size-middle: 16px;
29
+ @icon-size-large: 20px;
30
+
31
+ // 图标尺寸 - 胶囊模式
32
+ @capsule-icon-size-small: 14px;
33
+ @capsule-icon-size-middle: 20px;
34
+ @capsule-icon-size-large: 26px;
35
+
36
+ @font-size-small: 14px;
37
+ @font-size-middle: 16px;
38
+ @font-size-large: 18px;
39
+
40
+ // ========== 混入定义 ==========
41
+ .button-size(@size, @icon-size) {
42
+ width: @size;
43
+ height: @size;
44
+
45
+ svg {
46
+ width: @icon-size;
47
+ height: @icon-size;
48
+ }
49
+ }
50
+
51
+ .display-size(@width, @height, @font-size, @max-width: 56px, @padding: 0 4px) {
52
+ width: @width;
53
+ height: @height;
54
+ max-width: @max-width;
55
+ font-size: @font-size;
56
+ font-weight: 600;
57
+ color: @text-color;
58
+ padding: @padding;
59
+ text-align: center;
60
+ overflow: hidden;
61
+ }
62
+
63
+ // ========== 基础样式 ==========
64
+ .numeric-stepper {
65
+ align-items: center;
66
+ display: grid;
67
+ grid-template-columns: 1fr auto 1fr;
68
+ gap: 8px;
69
+ height: 100%;
70
+ width: 100%;
71
+ overflow: hidden;
72
+
73
+ // ========== 按钮容器 ==========
74
+ &-button-wrapper {
75
+ align-items: center;
76
+ display: flex;
77
+ height: 100%;
78
+ &:active .numeric-stepper-button:not(.numeric-stepper-button-disabled) {
79
+ transform: scale(0.95);
80
+ }
81
+
82
+ &:focus .numeric-stepper-button {
83
+ outline: none;
84
+ box-shadow: 0 0 0 2px rgba(127, 86, 217, 0.3);
85
+ }
86
+ }
87
+
88
+ &-minus-button-wrapper {
89
+ justify-content: flex-end;
90
+ }
91
+
92
+ // ========== 按钮样式 ==========
93
+ &-button {
94
+ display: flex;
95
+ align-items: center;
96
+ justify-content: center;
97
+ .button-size(@size-middle, @icon-size-middle);
98
+ border: none;
99
+ background-color: @primary-color;
100
+ cursor: pointer;
101
+ color: #ffffff;
102
+
103
+ svg {
104
+ stroke: currentColor;
105
+ }
106
+
107
+ &-disabled {
108
+ cursor: not-allowed;
109
+ background-color: @bg-disabled !important;
110
+
111
+ &:hover {
112
+ background-color: @bg-disabled !important;
113
+ transform: none;
114
+ }
115
+ }
116
+ }
117
+
118
+ // ========== 显示区域 ==========
119
+ &-display-wrapper {
120
+ display: flex;
121
+ align-items: center;
122
+ justify-content: center;
123
+ height: 100%;
124
+ cursor: pointer;
125
+ }
126
+
127
+ &-display {
128
+ border: 2px solid @border-color;
129
+ border-radius: 6px;
130
+ display: flex;
131
+ align-items: center;
132
+ justify-content: center;
133
+ .display-size(30px, 30px, @font-size-middle);
134
+ line-height: 1.5;
135
+ }
136
+
137
+ // ========== 尺寸变体 ==========
138
+ &-small {
139
+ gap: 8px;
140
+
141
+ .numeric-stepper-button {
142
+ .button-size(@size-small, @icon-size-small);
143
+ }
144
+
145
+ .numeric-stepper-display {
146
+ .display-size(@size-small, @size-small, @font-size-small, 40px, 0 2px);
147
+ }
148
+ }
149
+
150
+ &-middle {
151
+ gap: 8px;
152
+
153
+ .numeric-stepper-button {
154
+ .button-size(@size-middle, @icon-size-middle);
155
+ }
156
+
157
+ .numeric-stepper-display {
158
+ .display-size(30px, 30px, @font-size-middle);
159
+ }
160
+ }
161
+
162
+ &-large {
163
+ gap: 10px;
164
+
165
+ .numeric-stepper-button {
166
+ .button-size(@size-large, @icon-size-large);
167
+ }
168
+
169
+ .numeric-stepper-display {
170
+ .display-size(36px, 36px, @font-size-large, 64px, 0 6px);
171
+ text-overflow: ellipsis;
172
+ white-space: nowrap;
173
+ }
174
+ }
175
+
176
+ // ========== 形状变体(分离式下生效)==========
177
+ &-round .numeric-stepper-button {
178
+ border-radius: 50%;
179
+ }
180
+
181
+ &-square .numeric-stepper-button {
182
+ border-radius: 12px;
183
+ }
184
+
185
+ // ========== 状态样式 ==========
186
+ &-plus-only {
187
+ grid-template-columns: 1fr;
188
+
189
+ .numeric-stepper-plus-button-wrapper {
190
+ justify-content: center;
191
+ }
192
+ }
193
+
194
+ &-simple {
195
+ gap: 0;
196
+ }
197
+
198
+ &-disabled {
199
+ cursor: not-allowed;
200
+
201
+ .numeric-stepper-display {
202
+ color: #9ca3af;
203
+ }
204
+ }
205
+
206
+ &-out-of-range .numeric-stepper-display {
207
+ color: #ff4d4f;
208
+ }
209
+
210
+ &-input-disabled {
211
+ .numeric-stepper-display-wrapper {
212
+ cursor: default;
213
+ }
214
+
215
+ .numeric-stepper-display {
216
+ border: none;
217
+ }
218
+ }
219
+
220
+ // ========== 胶囊式变体 ==========
221
+ &-capsule {
222
+ display: inline-flex;
223
+ width: auto;
224
+ background-color: #fff;
225
+ border: 1px solid @border-color;
226
+ border-radius: 999px;
227
+ padding: 0;
228
+ gap: 2px;
229
+ height: @capsule-size-middle;
230
+
231
+ // 胶囊式按钮容器交互
232
+ .numeric-stepper-button-wrapper {
233
+ &:hover .numeric-stepper-button:not(.numeric-stepper-button-disabled) {
234
+ background-color: @bg-hover-light;
235
+ }
236
+
237
+ &:active .numeric-stepper-button:not(.numeric-stepper-button-disabled) {
238
+ background-color: @bg-active-light;
239
+ transform: none;
240
+ }
241
+ }
242
+
243
+ // 胶囊式按钮样式
244
+ .numeric-stepper-button {
245
+ background-color: transparent;
246
+ color: @text-secondary;
247
+ border-radius: 50%;
248
+ transition: all 0.15s ease-in-out;
249
+
250
+ &-disabled {
251
+ background-color: transparent !important;
252
+ color: @text-disabled !important;
253
+ }
254
+ }
255
+
256
+ // 胶囊式按钮默认尺寸(middle)
257
+ .numeric-stepper-button {
258
+ .button-size(@capsule-size-middle, @capsule-icon-size-middle);
259
+ }
260
+
261
+ // 胶囊式显示区域
262
+ .numeric-stepper-display-wrapper {
263
+ flex: 1;
264
+ min-width: 0; // 允许收缩
265
+ padding: 0 2px;
266
+ }
267
+
268
+ .numeric-stepper-display {
269
+ width: auto;
270
+ height: auto;
271
+ min-width: 20px;
272
+ max-width: 100%;
273
+ border: 2px solid @border-color;
274
+ border-radius: 6px;
275
+ background-color: transparent;
276
+ text-overflow: ellipsis;
277
+ white-space: nowrap;
278
+ }
279
+
280
+ // 胶囊式关闭输入
281
+ &.numeric-stepper-input-disabled .numeric-stepper-display {
282
+ border: none;
283
+ }
284
+
285
+ // 胶囊式整体禁用
286
+ &.numeric-stepper-disabled {
287
+ background-color: @bg-disabled-light;
288
+ border-color: @border-color-light;
289
+
290
+ .numeric-stepper-button {
291
+ color: @text-disabled !important;
292
+ cursor: not-allowed;
293
+ }
294
+
295
+ .numeric-stepper-button-wrapper {
296
+ &:hover,
297
+ &:active {
298
+ .numeric-stepper-button {
299
+ background-color: transparent !important;
300
+ }
301
+ }
302
+ }
303
+
304
+ .numeric-stepper-display {
305
+ color: @text-disabled;
306
+ }
307
+ }
308
+
309
+ // 胶囊式尺寸调整
310
+ &.numeric-stepper-small {
311
+ height: @capsule-size-small;
312
+
313
+ .numeric-stepper-button {
314
+ .button-size(@capsule-size-small, @capsule-icon-size-small);
315
+ }
316
+
317
+ .numeric-stepper-display {
318
+ min-width: 16px;
319
+ font-size: @font-size-small;
320
+ }
321
+ }
322
+
323
+ &.numeric-stepper-middle {
324
+ height: @capsule-size-middle;
325
+
326
+ .numeric-stepper-button {
327
+ .button-size(@capsule-size-middle, @capsule-icon-size-middle);
328
+ }
329
+
330
+ .numeric-stepper-display {
331
+ min-width: 20px;
332
+ font-size: @font-size-middle;
333
+ }
334
+ }
335
+
336
+ &.numeric-stepper-large {
337
+ height: @capsule-size-large;
338
+
339
+ .numeric-stepper-button {
340
+ .button-size(@capsule-size-large, @capsule-icon-size-large);
341
+ }
342
+
343
+ .numeric-stepper-display {
344
+ min-width: 24px;
345
+ font-size: @font-size-large;
346
+ }
347
+ }
348
+ }
349
+ }
350
+
351
+ // ========== 键盘弹窗样式 ==========
352
+ .numeric-stepper-keyboard-modal {
353
+ .ant-modal-content,
354
+ .pisell-lowcode-modal-content {
355
+ padding: 0;
356
+ background-color: transparent;
357
+ overflow: hidden;
358
+ }
359
+
360
+ .ant-modal-close,
361
+ .pisell-lowcode-modal-close {
362
+ display: none;
363
+ }
364
+ }
@@ -0,0 +1,2 @@
1
+ export { default as NumberKeyboard } from './numberKeyboard';
2
+ export type { NumberKeyboardProps, NumberKeyboardMode } from './numberKeyboard/types';
@@ -0,0 +1 @@
1
+ export { default as NumberKeyboard } from "./numberKeyboard";