@pisell/materials 3.3.82 → 3.3.84

package/lib/components/pisellNumber/components/index.js

@@ -0,0 +1,45 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellNumber/components/index.tsx
+var components_exports = {};
+__export(components_exports, {
+  DisabledView: () => import_DisabledView.default,
+  EditView: () => import_EditView.default,
+  ReadOnlyView: () => import_ReadOnlyView.default
+});
+module.exports = __toCommonJS(components_exports);
+var import_ReadOnlyView = __toESM(require("./ReadOnlyView"));
+var import_EditView = __toESM(require("./EditView"));
+var import_DisabledView = __toESM(require("./DisabledView"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DisabledView,
+  EditView,
+  ReadOnlyView
+});

package/lib/components/pisellNumber/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * PisellNumber 组件导出
+ */
+export { default as PisellNumber } from './PisellNumber';
+export type { PisellNumberProps } from './types';
+export type { DisplayState, ValidationResult, NumberInputState, BaseNumberInputProps } from './types';

package/lib/components/pisellNumber/index.js

@@ -0,0 +1,39 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellNumber/index.tsx
+var pisellNumber_exports = {};
+__export(pisellNumber_exports, {
+  PisellNumber: () => import_PisellNumber.default
+});
+module.exports = __toCommonJS(pisellNumber_exports);
+var import_PisellNumber = __toESM(require("./PisellNumber"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellNumber
+});

package/lib/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/lib/components/pisellNumber/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellNumber/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/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/lib/components/pisellPercent/PisellPercent.js

@@ -0,0 +1,63 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellPercent/PisellPercent.tsx
+var PisellPercent_exports = {};
+__export(PisellPercent_exports, {
+  PisellPercent: () => PisellPercent,
+  default: () => PisellPercent_default
+});
+module.exports = __toCommonJS(PisellPercent_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@pisell/utils");
+var import_ReadOnlyView = __toESM(require("./components/ReadOnlyView"));
+var import_EditView = __toESM(require("./components/EditView"));
+var import_DisabledView = __toESM(require("./components/DisabledView"));
+var import_PisellPercent = require("./PisellPercent.less");
+var PisellPercent = (props) => {
+  const { mode = "edit", disabled = false } = props;
+  const displayState = (0, import_utils.getDisplayState)(mode, disabled);
+  switch (displayState) {
+    case "read":
+      return /* @__PURE__ */ import_react.default.createElement(import_ReadOnlyView.default, { ...props });
+    case "edit":
+      return /* @__PURE__ */ import_react.default.createElement(import_EditView.default, { ...props });
+    case "disabled":
+      return /* @__PURE__ */ import_react.default.createElement(import_DisabledView.default, { ...props });
+    default:
+      return null;
+  }
+};
+var MemoizedPisellPercent = import_react.default.memo(PisellPercent, (prevProps, nextProps) => {
+  return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled && prevProps.variant === nextProps.variant;
+});
+var PisellPercent_default = MemoizedPisellPercent;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellPercent
+});

package/lib/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/lib/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;