@pisell/materials 6.3.25 → 6.3.27

package/es/components/pisellCurrency/PisellCurrency.less

@@ -0,0 +1,43 @@
+// PisellCurrency 组件样式
+
+.pisell-currency {
+  // 基础样式
+  display: inline-block;
+
+  // 只读态样式
+  &-read {
+    color: rgba(0, 0, 0, 0.85);
+    line-height: 1.5715;
+    
+    // 货币数值可以加粗显示（可选）
+    font-weight: 500;
+  }
+
+  // 编辑态样式
+  &-edit {
+    position: relative;
+
+    // 错误提示
+    .pisell-currency-error {
+      margin-top: 4px;
+      color: #ff4d4f;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+  }
+
+  // 禁用态样式
+  &-disabled {
+    // 继承 Ant Design InputNumber 的禁用样式
+  }
+  
+  // 负数显示为红色（可选）
+  &.negative {
+    color: #ff4d4f;
+  }
+  
+  // 正数显示为绿色（可选，用于收益场景）
+  &.positive {
+    color: #52c41a;
+  }
+}

package/es/components/pisellCurrency/PisellCurrency.stories.d.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellCurrency } from './PisellCurrency';
+/**
+ * PisellCurrency 组件 Storybook
+ */
+declare const meta: Meta<typeof PisellCurrency>;
+export default meta;
+declare type Story = StoryObj<typeof PisellCurrency>;
+/**
+ * 基础示例 - 人民币
+ */
+export declare const Basic: Story;
+/**
+ * 不同货币
+ */
+export declare const DifferentCurrencies: Story;
+/**
+ * 只读态展示
+ */
+export declare const ReadOnly: Story;
+/**
+ * 禁用态
+ */
+export declare const Disabled: Story;
+/**
+ * 不显示货币符号
+ */
+export declare const WithoutSymbol: Story;
+/**
+ * 禁止负数（商品价格）
+ */
+export declare const NoNegative: Story;
+/**
+ * 允许负数（退款金额）
+ */
+export declare const AllowNegative: Story;
+/**
+ * 表单场景
+ */
+export declare const InForm: Story;
+/**
+ * 表格场景
+ */
+export declare const InTable: Story;
+/**
+ * 不同精度
+ */
+export declare const DifferentPrecision: Story;
+/**
+ * 只读态样式
+ */
+export declare const ReadOnlyStyles: Story;
+/**
+ * 空值处理
+ */
+export declare const EmptyValue: Story;

package/es/components/pisellCurrency/PisellCurrency.stories.js

@@ -0,0 +1,426 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+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."); }
+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); }
+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; }
+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; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { PisellCurrency } from "./PisellCurrency";
+import { useState } from 'react';
+import { Form, Table } from 'antd';
+
+/**
+ * PisellCurrency 组件 Storybook
+ */
+var meta = {
+  title: 'Components/PisellCurrency',
+  component: PisellCurrency,
+  tags: ['autodocs'],
+  argTypes: {
+    mode: {
+      control: 'radio',
+      options: ['read', 'edit'],
+      description: '显示模式'
+    },
+    currencySymbol: {
+      control: 'text',
+      description: '货币符号'
+    },
+    symbolPosition: {
+      control: 'radio',
+      options: ['before', 'after'],
+      description: '符号位置'
+    },
+    value: {
+      control: 'number',
+      description: '当前值'
+    }
+  }
+};
+export default meta;
+/**
+ * 基础示例 - 人民币
+ */
+export var Basic = {
+  args: {
+    value: 1234.56,
+    currencySymbol: '¥'
+  },
+  render: function render(args) {
+    var _useState = useState(args.value),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+    return /*#__PURE__*/React.createElement(PisellCurrency, _extends({}, args, {
+      value: value,
+      onChange: setValue
+    }));
+  }
+};
+
+/**
+ * 不同货币
+ */
+export var DifferentCurrencies = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8,
+        width: 80,
+        display: 'inline-block'
+      }
+    }, "\u4EBA\u6C11\u5E01\uFF1A"), /*#__PURE__*/React.createElement(PisellCurrency, {
+      mode: "read",
+      value: 6999.99,
+      currencySymbol: "\xA5"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8,
+        width: 80,
+        display: 'inline-block'
+      }
+    }, "\u7F8E\u5143\uFF1A"), /*#__PURE__*/React.createElement(PisellCurrency, {
+      mode: "read",
+      value: 1234.56,
+      currencySymbol: "$"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8,
+        width: 80,
+        display: 'inline-block'
+      }
+    }, "\u6B27\u5143\uFF1A"), /*#__PURE__*/React.createElement(PisellCurrency, {
+      mode: "read",
+      value: 999.99,
+      currencySymbol: "\u20AC",
+      symbolPosition: "after"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8,
+        width: 80,
+        display: 'inline-block'
+      }
+    }, "\u82F1\u9551\uFF1A"), /*#__PURE__*/React.createElement(PisellCurrency, {
+      mode: "read",
+      value: 599.99,
+      currencySymbol: "\xA3"
+    })));
+  }
+};
+
+/**
+ * 只读态展示
+ */
+export var ReadOnly = {
+  args: {
+    mode: 'read',
+    value: 6999.99,
+    currencySymbol: '¥'
+  }
+};
+
+/**
+ * 禁用态
+ */
+export var Disabled = {
+  args: {
+    disabled: true,
+    value: 1000,
+    currencySymbol: '¥'
+  }
+};
+
+/**
+ * 不显示货币符号
+ */
+export var WithoutSymbol = {
+  args: {
+    mode: 'read',
+    value: 1234.56,
+    showSymbol: false
+  }
+};
+
+/**
+ * 禁止负数（商品价格）
+ */
+export var NoNegative = {
+  render: function render() {
+    var _useState3 = useState(100),
+      _useState4 = _slicedToArray(_useState3, 2),
+      price = _useState4[0],
+      setPrice = _useState4[1];
+    return /*#__PURE__*/React.createElement(Form.Item, {
+      label: "\u5546\u54C1\u4EF7\u683C"
+    }, /*#__PURE__*/React.createElement(PisellCurrency, {
+      value: price,
+      onChange: setPrice,
+      currencySymbol: "\xA5",
+      allowNegative: false,
+      placeholder: "\u8BF7\u8F93\u5165\u4EF7\u683C"
+    }));
+  }
+};
+
+/**
+ * 允许负数（退款金额）
+ */
+export var AllowNegative = {
+  render: function render() {
+    var _useState5 = useState(-150),
+      _useState6 = _slicedToArray(_useState5, 2),
+      refund = _useState6[0],
+      setRefund = _useState6[1];
+    return /*#__PURE__*/React.createElement(Form.Item, {
+      label: "\u9000\u6B3E\u91D1\u989D"
+    }, /*#__PURE__*/React.createElement(PisellCurrency, {
+      value: refund,
+      onChange: setRefund,
+      currencySymbol: "\xA5",
+      allowNegative: true,
+      placeholder: "\u8BF7\u8F93\u5165\u9000\u6B3E\u91D1\u989D"
+    }));
+  }
+};
+
+/**
+ * 表单场景
+ */
+export var InForm = {
+  render: function render() {
+    var _useState7 = useState(null),
+      _useState8 = _slicedToArray(_useState7, 2),
+      price = _useState8[0],
+      setPrice = _useState8[1];
+    var _useState9 = useState(null),
+      _useState10 = _slicedToArray(_useState9, 2),
+      cost = _useState10[0],
+      setCost = _useState10[1];
+    var _useState11 = useState(null),
+      _useState12 = _slicedToArray(_useState11, 2),
+      shipping = _useState12[0],
+      setShipping = _useState12[1];
+    return /*#__PURE__*/React.createElement(Form, {
+      layout: "vertical",
+      style: {
+        maxWidth: 400
+      }
+    }, /*#__PURE__*/React.createElement(Form.Item, {
+      label: "\u5546\u54C1\u4EF7\u683C",
+      required: true
+    }, /*#__PURE__*/React.createElement(PisellCurrency, {
+      value: price,
+      onChange: setPrice,
+      currencySymbol: "\xA5",
+      min: 0,
+      required: true,
+      placeholder: "\u8BF7\u8F93\u5165\u4EF7\u683C",
+      validateTrigger: "both"
+    })), /*#__PURE__*/React.createElement(Form.Item, {
+      label: "\u6210\u672C\u4EF7"
+    }, /*#__PURE__*/React.createElement(PisellCurrency, {
+      value: cost,
+      onChange: setCost,
+      currencySymbol: "\xA5",
+      min: 0,
+      placeholder: "\u8BF7\u8F93\u5165\u6210\u672C"
+    })), /*#__PURE__*/React.createElement(Form.Item, {
+      label: "\u8FD0\u8D39"
+    }, /*#__PURE__*/React.createElement(PisellCurrency, {
+      value: shipping,
+      onChange: setShipping,
+      currencySymbol: "\xA5",
+      min: 0,
+      placeholder: "\u8BF7\u8F93\u5165\u8FD0\u8D39"
+    })));
+  }
+};
+
+/**
+ * 表格场景
+ */
+export var InTable = {
+  render: function render() {
+    var dataSource = [{
+      id: 1,
+      name: '笔记本电脑',
+      price: 6999.99,
+      sales: 12345
+    }, {
+      id: 2,
+      name: '无线鼠标',
+      price: 129.5,
+      sales: 5678
+    }, {
+      id: 3,
+      name: '机械键盘',
+      price: 599,
+      sales: 8901
+    }];
+    var columns = [{
+      title: '商品名称',
+      dataIndex: 'name'
+    }, {
+      title: '单价',
+      dataIndex: 'price',
+      render: function render(value) {
+        return /*#__PURE__*/React.createElement(PisellCurrency, {
+          mode: "read",
+          value: value,
+          currencySymbol: "\xA5"
+        });
+      },
+      sorter: function sorter(a, b) {
+        return a.price - b.price;
+      }
+    }, {
+      title: '销售额',
+      dataIndex: 'sales',
+      render: function render(value) {
+        return /*#__PURE__*/React.createElement(PisellCurrency, {
+          mode: "read",
+          value: value,
+          currencySymbol: "\xA5"
+        });
+      },
+      sorter: function sorter(a, b) {
+        return a.sales - b.sales;
+      }
+    }];
+    return /*#__PURE__*/React.createElement(Table, {
+      dataSource: dataSource,
+      columns: columns,
+      pagination: false
+    });
+  }
+};
+
+/**
+ * 不同精度
+ */
+export var DifferentPrecision = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8
+      }
+    }, "\u9ED8\u8BA4\uFF082\u4F4D\u5C0F\u6570\uFF09\uFF1A"), /*#__PURE__*/React.createElement(PisellCurrency, {
+      mode: "read",
+      value: 1234.567,
+      currencySymbol: "\xA5"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8
+      }
+    }, "\u6574\u6570\uFF080\u4F4D\u5C0F\u6570\uFF09\uFF1A"), /*#__PURE__*/React.createElement(PisellCurrency, {
+      mode: "read",
+      value: 1234.567,
+      currencySymbol: "\xA5",
+      precision: 0
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8
+      }
+    }, "3\u4F4D\u5C0F\u6570\uFF1A"), /*#__PURE__*/React.createElement(PisellCurrency, {
+      mode: "read",
+      value: 1234.567,
+      currencySymbol: "\xA5",
+      precision: 3
+    })));
+  }
+};
+
+/**
+ * 只读态样式
+ */
+export var ReadOnlyStyles = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8
+      }
+    }, "\u9ED8\u8BA4\uFF1A"), /*#__PURE__*/React.createElement(PisellCurrency, {
+      mode: "read",
+      value: 1234.56,
+      currencySymbol: "\xA5"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8
+      }
+    }, "\u5927\u5B57\u53F7\uFF1A"), /*#__PURE__*/React.createElement(PisellCurrency, {
+      mode: "read",
+      value: 1234.56,
+      currencySymbol: "\xA5",
+      fontSize: 24,
+      fontWeight: "bold"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8
+      }
+    }, "\u7EA2\u8272\uFF08\u8D1F\u503A\uFF09\uFF1A"), /*#__PURE__*/React.createElement(PisellCurrency, {
+      mode: "read",
+      value: -1234.56,
+      currencySymbol: "\xA5",
+      color: "#ff4d4f"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8
+      }
+    }, "\u7EFF\u8272\uFF08\u6536\u76CA\uFF09\uFF1A"), /*#__PURE__*/React.createElement(PisellCurrency, {
+      mode: "read",
+      value: 1234.56,
+      currencySymbol: "\xA5",
+      color: "#52c41a"
+    })));
+  }
+};
+
+/**
+ * 空值处理
+ */
+export var EmptyValue = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8
+      }
+    }, "\u9ED8\u8BA4\u7A7A\u503C\uFF1A"), /*#__PURE__*/React.createElement(PisellCurrency, {
+      mode: "read",
+      value: null,
+      currencySymbol: "\xA5"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8
+      }
+    }, "\u81EA\u5B9A\u4E49\u7A7A\u503C\uFF1A"), /*#__PURE__*/React.createElement(PisellCurrency, {
+      mode: "read",
+      value: null,
+      currencySymbol: "\xA5",
+      emptyText: "\u6682\u65E0\u91D1\u989D"
+    })));
+  }
+};

package/es/components/pisellCurrency/components/DisabledView.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { PisellCurrencyProps } from '../types';
+/**
+ * PisellCurrency 禁用态视图组件
+ *
+ * 负责渲染禁用态的输入框
+ *
+ * @param props 组件 Props
+ */
+declare const DisabledView: React.FC<PisellCurrencyProps>;
+export default DisabledView;

package/es/components/pisellCurrency/components/DisabledView.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { InputNumber } from 'antd';
+/**
+ * PisellCurrency 禁用态视图组件
+ * 
+ * 负责渲染禁用态的输入框
+ * 
+ * @param props 组件 Props
+ */
+var DisabledView = function DisabledView(props) {
+  var value = props.value,
+    _props$currencySymbol = props.currencySymbol,
+    currencySymbol = _props$currencySymbol === void 0 ? '¥' : _props$currencySymbol,
+    _props$symbolPosition = props.symbolPosition,
+    symbolPosition = _props$symbolPosition === void 0 ? 'before' : _props$symbolPosition,
+    _props$showSymbol = props.showSymbol,
+    showSymbol = _props$showSymbol === void 0 ? true : _props$showSymbol,
+    _props$precision = props.precision,
+    precision = _props$precision === void 0 ? 2 : _props$precision,
+    min = props.min,
+    max = props.max,
+    step = props.step,
+    placeholder = props.placeholder,
+    size = props.size,
+    controls = props.controls,
+    className = props.className,
+    style = props.style,
+    id = props.id,
+    name = props.name;
+  var prefixNode = showSymbol && symbolPosition === 'before' ? currencySymbol : undefined;
+  var addonAfterNode = showSymbol && symbolPosition === 'after' ? currencySymbol : undefined;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-currency pisell-currency-disabled ".concat(className || '')
+  }, /*#__PURE__*/React.createElement(InputNumber, {
+    disabled: true,
+    value: value,
+    min: min,
+    max: max,
+    step: step,
+    precision: precision,
+    prefix: prefixNode,
+    addonAfter: addonAfterNode,
+    placeholder: placeholder,
+    size: size,
+    controls: controls,
+    style: style,
+    id: id,
+    name: name
+  }));
+};
+export default DisabledView;

package/es/components/pisellCurrency/components/EditView.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { PisellCurrencyProps } from '../types';
+/**
+ * PisellCurrency 编辑态视图组件
+ *
+ * 负责渲染编辑态的输入框，基于 Ant Design InputNumber 组件
+ *
+ * 功能：
+ * - 货币数值输入
+ * - 货币符号显示（prefix 或 addonAfter）
+ * - 负数校验
+ * - 实时或失焦校验
+ * - 错误提示展示
+ *
+ * @param props 组件 Props
+ */
+declare const EditView: React.FC<PisellCurrencyProps>;
+export default EditView;