@pisell/materials 3.3.81 → 3.3.83

package/es/components/pisellNumber/index.js

@@ -0,0 +1,7 @@
+/**
+ * PisellNumber 组件导出
+ */
+
+export { default as PisellNumber } from "./PisellNumber";
+
+// 公共类型从 types 中重新导出，方便使用

package/es/components/pisellNumber/types.d.ts

@@ -0,0 +1,168 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { BaseNumberInputProps } from '@pisell/utils';
+/**
+ * 从 @pisell/utils 重新导出公共类型
+ */
+export type { DisplayState, ValidationResult, NumberInputState, BaseNumberInputProps, } from '@pisell/utils';
+/**
+ * PisellNumber 组件 Props 类型定义
+ *
+ * 基于 Ant Design InputNumber，提供三态视图（只读/编辑/禁用）
+ */
+export interface PisellNumberProps extends BaseNumberInputProps {
+    /**
+     * 显示模式
+     * - read: 只读态，纯文本展示
+     * - edit: 编辑态，显示输入控件
+     * @default 'edit'
+     */
+    mode?: 'read' | 'edit';
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 回车键回调
+     * @param value 当前值
+     */
+    onPressEnter?: (value: number | null) => void;
+    /**
+     * 步进值
+     * @default 1
+     */
+    step?: number;
+    /**
+     * 小数精度（小数位数）
+     * @example precision={2} 表示保留2位小数
+     */
+    precision?: number;
+    /**
+     * 是否使用千分位分隔符
+     * @default false
+     * @example 1234567 → 1,234,567
+     */
+    useGrouping?: boolean;
+    /**
+     * 自定义格式化函数
+     * @param value 数值
+     * @returns 格式化后的字符串
+     * @example
+     * formatter={(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+     */
+    formatter?: (value: number | null) => string;
+    /**
+     * 自定义解析函数（将显示值转换为数值）
+     * @param displayValue 显示的字符串
+     * @returns 解析后的数值
+     * @example
+     * parser={(value) => value.replace(/\$\s?|(,*)/g, '')}
+     */
+    parser?: (displayValue: string | undefined) => number | null;
+    /**
+     * 是否自动修正超出范围的值
+     * @default false
+     * @description 当值超出 min/max 范围时，自动修正为边界值
+     */
+    autoCorrect?: boolean;
+    /**
+     * 占位文本
+     * @default '请输入数字'
+     */
+    placeholder?: string;
+    /**
+     * 是否显示清空按钮
+     * @default false
+     */
+    allowClear?: boolean;
+    /**
+     * 是否自动聚焦
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * 前缀图标或文本
+     */
+    prefix?: ReactNode;
+    /**
+     * 后缀图标或文本
+     */
+    suffix?: ReactNode;
+    /**
+     * 前置标签
+     * @example addonBefore="￥"
+     */
+    addonBefore?: ReactNode;
+    /**
+     * 后置标签
+     * @example addonAfter="元"
+     */
+    addonAfter?: ReactNode;
+    /**
+     * 输入框尺寸
+     * @default 'middle'
+     */
+    size?: 'large' | 'middle' | 'small';
+    /**
+     * 是否启用键盘上下键
+     * @default true
+     */
+    keyboard?: boolean;
+    /**
+     * 控制字符
+     * @description 自定义控制字符，用于格式化显示
+     */
+    controls?: boolean | {
+        upIcon?: ReactNode;
+        downIcon?: ReactNode;
+    };
+    /**
+     * 字号
+     * @example '14px' 或 14
+     */
+    fontSize?: string | number;
+    /**
+     * 字重
+     * @example 'bold' 或 600
+     */
+    fontWeight?: string | number;
+    /**
+     * 文本颜色
+     * @example '#000000' 或 'rgba(0, 0, 0, 0.85)'
+     */
+    color?: string;
+    /**
+     * 文本对齐方式
+     * @default 'left'
+     */
+    textAlign?: 'left' | 'center' | 'right';
+    /**
+     * 空值时的显示文本
+     * @default '-'
+     */
+    emptyText?: string;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * ARIA 标签
+     */
+    'aria-label'?: string;
+    /**
+     * ARIA 描述
+     */
+    'aria-describedby'?: string;
+    /**
+     * HTML id 属性
+     */
+    id?: string;
+    /**
+     * HTML name 属性
+     */
+    name?: string;
+}

package/es/components/pisellNumber/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/pisellPercent/PisellPercent.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { PisellPercentProps } from './types';
+import './PisellPercent.less';
+/**
+ * PisellPercent 百分比组件
+ *
+ * 基于 PisellNumber 派生，专门处理百分比数据。
+ * 支持文本、进度条、环形进度三种展示变体。
+ *
+ * @param props 组件 Props
+ *
+ * @example
+ * // 基础使用
+ * const [value, setValue] = useState(85.5);
+ * <PisellPercent
+ *   value={value}
+ *   onChange={setValue}
+ * />
+ *
+ * @example
+ * // 进度条展示
+ * <PisellPercent
+ *   mode="read"
+ *   value={75}
+ *   variant="progress"
+ * />
+ *
+ * @example
+ * // 滑块 + 输入框
+ * <PisellPercent
+ *   value={value}
+ *   onChange={setValue}
+ *   showSlider
+ * />
+ */
+export declare const PisellPercent: React.FC<PisellPercentProps>;
+declare const MemoizedPisellPercent: React.NamedExoticComponent<PisellPercentProps>;
+export default MemoizedPisellPercent;

package/es/components/pisellPercent/PisellPercent.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { getDisplayState } from '@pisell/utils';
+import ReadOnlyView from "./components/ReadOnlyView";
+import EditView from "./components/EditView";
+import DisabledView from "./components/DisabledView";
+import "./PisellPercent.less";
+
+/**
+ * PisellPercent 百分比组件
+ * 
+ * 基于 PisellNumber 派生，专门处理百分比数据。
+ * 支持文本、进度条、环形进度三种展示变体。
+ * 
+ * @param props 组件 Props
+ * 
+ * @example
+ * // 基础使用
+ * const [value, setValue] = useState(85.5);
+ * <PisellPercent 
+ *   value={value}
+ *   onChange={setValue}
+ * />
+ * 
+ * @example
+ * // 进度条展示
+ * <PisellPercent 
+ *   mode="read"
+ *   value={75}
+ *   variant="progress"
+ * />
+ * 
+ * @example
+ * // 滑块 + 输入框
+ * <PisellPercent 
+ *   value={value}
+ *   onChange={setValue}
+ *   showSlider
+ * />
+ */
+export var PisellPercent = function PisellPercent(props) {
+  var _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'edit' : _props$mode,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled;
+
+  // 计算显示状态
+  var displayState = getDisplayState(mode, disabled);
+
+  // 根据状态渲染对应子组件
+  switch (displayState) {
+    case 'read':
+      return /*#__PURE__*/React.createElement(ReadOnlyView, props);
+    case 'edit':
+      return /*#__PURE__*/React.createElement(EditView, props);
+    case 'disabled':
+      return /*#__PURE__*/React.createElement(DisabledView, props);
+    default:
+      return null;
+  }
+};
+
+// 性能优化
+var MemoizedPisellPercent = /*#__PURE__*/React.memo(PisellPercent, function (prevProps, nextProps) {
+  return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled && prevProps.variant === nextProps.variant;
+});
+export default MemoizedPisellPercent;

package/es/components/pisellPercent/PisellPercent.less

@@ -0,0 +1,54 @@
+// PisellPercent 组件样式
+
+.pisell-percent {
+  // 基础样式
+  display: inline-block;
+
+  // 只读态样式 - text 变体
+  &-read {
+    color: rgba(0, 0, 0, 0.85);
+    line-height: 1.5715;
+  }
+
+  // 进度条变体
+  &-progress {
+    width: 100%;
+    
+    // 默认进度条宽度
+    .ant-progress {
+      width: 100%;
+    }
+  }
+
+  // 环形进度变体
+  &-circle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  // 编辑态样式
+  &-edit {
+    position: relative;
+
+    // 错误提示
+    .pisell-percent-error {
+      margin-top: 4px;
+      color: #ff4d4f;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+  }
+
+  // 带滑块的编辑态
+  &-with-slider {
+    .ant-slider {
+      margin-bottom: 16px;
+    }
+  }
+
+  // 禁用态样式
+  &-disabled {
+    // 继承 Ant Design InputNumber 的禁用样式
+  }
+}

package/es/components/pisellPercent/PisellPercent.stories.d.ts

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellPercent } from './PisellPercent';
+/**
+ * PisellPercent 组件 Storybook
+ */
+declare const meta: Meta<typeof PisellPercent>;
+export default meta;
+declare type Story = StoryObj<typeof PisellPercent>;
+/**
+ * 基础示例 - Text 变体
+ */
+export declare const Basic: Story;
+/**
+ * 只读态 - Text
+ */
+export declare const ReadOnlyText: Story;
+/**
+ * 只读态 - Progress 进度条
+ */
+export declare const ReadOnlyProgress: Story;
+/**
+ * 只读态 - Circle 环形进度
+ */
+export declare const ReadOnlyCircle: Story;
+/**
+ * 进度条 - 不同状态
+ */
+export declare const ProgressStates: Story;
+/**
+ * 环形进度 - 不同配置
+ */
+export declare const CircleVariants: Story;
+/**
+ * 范围转换
+ */
+export declare const RangeConversion: Story;
+/**
+ * 编辑态 - 仅输入框
+ */
+export declare const EditWithInput: Story;
+/**
+ * 编辑态 - 滑块 + 输入框
+ */
+export declare const EditWithSlider: Story;
+/**
+ * 项目进度看板
+ */
+export declare const ProjectDashboard: Story;
+/**
+ * 禁用态
+ */
+export declare const Disabled: Story;