@pisell/materials 6.12.26 → 6.12.27

package/lib/components/pisellMetricCard/components/TrendIcon.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { TrendIconProps } from '../types';
+/**
+ * TrendIcon 趋势箭头组件
+ *
+ * 根据趋势类型显示上升或下降箭头
+ * - up: 显示上升箭头 ↑
+ * - down: 显示下降箭头 ↓
+ * - neutral: 不显示箭头
+ *
+ * @param props 组件属性
+ */
+declare const TrendIcon: React.FC<TrendIconProps>;
+export default TrendIcon;

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

@@ -0,0 +1,7 @@
+/**
+ * 子组件导出
+ */
+export { default as TrendIcon } from './TrendIcon';
+export { default as MetricValue } from './MetricValue';
+export { default as MetricTitle } from './MetricTitle';
+export { default as MetricComparison } from './MetricComparison';

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

@@ -0,0 +1,6 @@
+/**
+ * PisellMetricCard 组件导出
+ */
+export { default as PisellMetricCard } from './PisellMetricCard';
+export type { PisellMetricCardProps, TrendType, FormatOptions, MetricTitleProps, MetricValueProps, MetricComparisonProps, TrendIconProps, } from './types';
+export { default } from './PisellMetricCard';

package/lib/components/pisellMetricCard/types.d.ts

@@ -0,0 +1,201 @@
+import type { CSSProperties, ReactNode } from 'react';
+/**
+ * 趋势类型
+ */
+export declare type TrendType = 'up' | 'down' | 'neutral';
+/**
+ * 数值格式化配置
+ */
+export interface ValueFormatConfig {
+    /** 小数精度（小数位数），默认 0 */
+    precision?: number;
+    /** 是否使用千分位分隔符，默认 false */
+    useGrouping?: boolean;
+    /** 是否显示货币符号，默认 false */
+    showCurrencySymbol?: boolean;
+    /** 货币符号（如 $, ¥），默认 '' */
+    currencySymbol?: string;
+    /** 自定义格式化函数 */
+    formatter?: (value: number | null) => string;
+    /** 整数时隐藏小数部分，默认 true */
+    hideDecimalForWholeNumbers?: boolean;
+}
+/**
+ * 环比配置
+ */
+export interface ComparisonConfig {
+    /** 环比数值（支持正负值） */
+    value: number | string | null;
+    /** 环比前缀文本，默认 'v.s. pre' */
+    text?: string;
+    /** 是否显示趋势箭头，默认 true */
+    showTrendIcon?: boolean;
+    /** 正向趋势颜色，默认 '#52c41a' */
+    positiveColor?: string;
+    /** 负向趋势颜色，默认 '#ff4d4f' */
+    negativeColor?: string;
+    /** 环比字号，默认 14 */
+    size?: number | string;
+}
+/**
+ * 样式配置
+ */
+export interface MetricCardStyleConfig {
+    /** 卡片容器样式 */
+    card?: {
+        /** 是否显示边框，默认 true */
+        bordered?: boolean;
+        /** 圆角大小（px），默认 12 */
+        borderRadius?: number;
+        /** 内边距（px），默认 16 */
+        padding?: number;
+        /** 阴影效果，默认 true */
+        shadow?: boolean | string;
+        /** 背景色，默认 '#ffffff' */
+        background?: string;
+        /** 卡片宽度，默认 'auto' */
+        width?: string | number;
+    };
+    /** 标题样式 */
+    title?: {
+        /** 字号，默认 14 */
+        size?: number | string;
+        /** 字重，默认 400 */
+        weight?: number | string;
+        /** 颜色，默认 'rgba(0, 0, 0, 0.45)' */
+        color?: string;
+    };
+    /** 数值样式 */
+    value?: {
+        /** 字号，默认 30 */
+        size?: number | string;
+        /** 字重，默认 600 */
+        weight?: number | string;
+        /** 颜色，默认 'rgba(0, 0, 0, 0.85)' */
+        color?: string;
+    };
+}
+/**
+ * PisellMetricCard 组件 Props
+ *
+ * 采用扁平 + 对象组合的设计，降低复杂度和耦合
+ *
+ * @example 基础用法
+ * ```tsx
+ * <PisellMetricCard
+ *   title="Total Sales"
+ *   value={1580}
+ * />
+ * ```
+ *
+ * @example 带格式化和环比
+ * ```tsx
+ * <PisellMetricCard
+ *   title="Revenue"
+ *   value={1580}
+ *   format={{
+ *     showCurrencySymbol: true,
+ *     currencySymbol: '$',
+ *     useGrouping: true
+ *   }}
+ *   comparison={{
+ *     value: 120,
+ *     text: 'v.s. last month'
+ *   }}
+ * />
+ * ```
+ */
+export interface PisellMetricCardProps {
+    /** 标题文本 */
+    title: string | ReactNode;
+    /** 主数值 */
+    value: number | string | null;
+    /** 副标题文本（可选） */
+    subtitle?: string | ReactNode;
+    /** 标签内容（可选） */
+    tag?: ReactNode;
+    /** 提示信息内容（可选） */
+    tooltip?: string | ReactNode;
+    /**
+     * 数值格式化配置
+     * @example format={{ precision: 2, useGrouping: true, currencySymbol: '$' }}
+     */
+    format?: ValueFormatConfig;
+    /**
+     * 环比配置
+     * @example comparison={{ value: 120, text: 'v.s. pre' }}
+     */
+    comparison?: ComparisonConfig;
+    /**
+     * 样式配置
+     * @example
+     * styleConfig={{
+     *   card: { borderRadius: 8, padding: 24 },
+     *   title: { size: 16, weight: 600 },
+     *   value: { size: 36, color: '#1890ff' }
+     * }}
+     */
+    styleConfig?: MetricCardStyleConfig;
+    /** 是否显示副标题，默认 false */
+    showSubtitle?: boolean;
+    /** 是否显示标签，默认 false */
+    showTag?: boolean;
+    /** 是否显示提示信息，默认 false */
+    showTooltip?: boolean;
+    /** 是否显示加载状态，默认 false */
+    loading?: boolean;
+    /** 鼠标悬停是否有交互效果，默认 true */
+    hoverable?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 点击卡片回调 */
+    onClick?: () => void;
+}
+/**
+ * FormatOptions (别名，用于导出)
+ */
+export interface FormatOptions extends ValueFormatConfig {
+}
+/**
+ * MetricTitle 组件 Props
+ */
+export interface MetricTitleProps {
+    title: string | ReactNode;
+    subtitle?: string | ReactNode;
+    tooltip?: string | ReactNode;
+    titleSize?: number | string;
+    titleWeight?: number | string;
+    titleColor?: string;
+}
+/**
+ * MetricValue 组件 Props
+ */
+export interface MetricValueProps {
+    value: string | null;
+    valueSize?: number | string;
+    valueWeight?: number | string;
+    valueColor?: string;
+}
+/**
+ * MetricComparison 组件 Props
+ */
+export interface MetricComparisonProps {
+    comparison: number | string | null;
+    comparisonText?: string;
+    showTrendIcon?: boolean;
+    positiveColor?: string;
+    negativeColor?: string;
+    comparisonSize?: number | string;
+    precision?: number;
+    showCurrencySymbol?: boolean;
+    currencySymbol?: string;
+}
+/**
+ * TrendIcon 组件 Props
+ */
+export interface TrendIconProps {
+    trend: TrendType;
+    color?: string;
+}

package/lib/components/pisellMetricCard/utils/calculateTrend.d.ts

@@ -0,0 +1,14 @@
+import type { TrendType } from '../types';
+/**
+ * 计算趋势方向
+ *
+ * @param comparison 环比数值
+ * @returns 'up' | 'down' | 'neutral'
+ *
+ * @example
+ * calculateTrend(120) // 'up'
+ * calculateTrend(-230) // 'down'
+ * calculateTrend(0) // 'neutral'
+ * calculateTrend(null) // 'neutral'
+ */
+export declare function calculateTrend(comparison: number | string | null | undefined): TrendType;

package/lib/components/pisellMetricCard/utils/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 工具函数导出
+ */
+export { formatMetricValue } from './formatMetricValue';
+export { calculateTrend } from './calculateTrend';

package/lib/components/pisellMobileDateRangePicker/PisellMobileDateRangePicker.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { PisellMobileDateRangePickerProps } from './types';
+import 'antd-mobile/es/global/global.css';
+import './PisellMobileDateRangePicker.less';
+/**
+ * antd-mobile CalendarPicker（range）薄封装：受控 value/onChange 与 RecordBoard 快筛 dayjs[] 对齐。
+ */
+export declare const PisellMobileDateRangePicker: React.FC<PisellMobileDateRangePickerProps>;

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

@@ -0,0 +1,2 @@
+export { PisellMobileDateRangePicker } from './PisellMobileDateRangePicker';
+export type { PisellMobileDateRangePickerProps } from './types';

package/lib/components/pisellMobileDateRangePicker/types.d.ts

@@ -0,0 +1,28 @@
+import type { Dayjs } from 'dayjs';
+import type { CSSProperties, ReactNode } from 'react';
+import type { CalendarPickerProps } from 'antd-mobile';
+/** toolbar：顶栏快筛 32px；filter：Filter 弹层内与 Select 对齐的 48px 触发器 */
+export declare type PisellMobileDateRangePickerVariant = 'toolbar' | 'filter';
+export declare const PISELL_MOBILE_DATE_RANGE_PICKER_FILTER_POPUP_CLASS = "pisell-mobile-date-range-picker__popup";
+export interface PisellMobileDateRangePickerProps {
+    value?: unknown;
+    onChange?: (value: [Dayjs, Dayjs] | undefined) => void;
+    /** 展示格式，默认 DD/MM/YYYY */
+    format?: string;
+    placeholder?: string;
+    className?: string;
+    style?: CSSProperties;
+    title?: ReactNode;
+    confirmText?: string;
+    allowClear?: boolean;
+    min?: Date;
+    max?: Date;
+    /** 默认 toolbar；filter 用于手机 Filter 弹层 */
+    variant?: PisellMobileDateRangePickerVariant;
+    getContainer?: CalendarPickerProps['getContainer'];
+    popupClassName?: CalendarPickerProps['popupClassName'];
+    popupStyle?: CalendarPickerProps['popupStyle'];
+    /** Filter 弹层：日历打开时通知外层保持 Popover 不收起 */
+    onOpen?: () => void;
+    onClose?: () => void;
+}

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { ModalProps, ButtonProps } from 'antd';
+import { PisellContextType } from '../pisell-config-provider/context';
+export interface PisellModalProps extends ModalProps {
+    /** 平台 */
+    platform?: PisellContextType['platform'];
+    /**
+     * 弹窗大小
+     * large 800
+     * middle 600
+     * small 400
+     * */
+    size?: 'large' | 'middle' | 'small';
+    /** 头部分割线是否展示 */
+    headerDivider?: boolean;
+    /** 底部分割线是否展示 */
+    footerDivider?: boolean;
+    /** 删除按钮props */
+    deleteButtonProps?: ButtonProps | null;
+    /** 删除事件 */
+    onDelete?: () => void;
+    /** 移动端展示时弹窗高度 默认null 在移动端全屏 */
+    mobileModalHeight?: string | number;
+    /** footer中额外操作按钮 */
+    actions?: React.ReactNode;
+    /** 取消按钮是否展示 */
+    cancelVisible?: boolean;
+    /** 确认按钮是否展示 */
+    okVisible?: boolean;
+    /** 是否展示header */
+    header?: boolean | null;
+    /**
+     * 透传至底层 Dialog 遮罩（antd Modal 运行时支持，但 ModalProps 类型未声明）
+     */
+    maskProps?: React.HTMLAttributes<HTMLDivElement>;
+}
+declare const PisellModal: {
+    (props: PisellModalProps): React.JSX.Element;
+    confirm: (props: import("./components/functions").PisellModalFuncProps) => {
+        destroy: () => void;
+        update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
+    };
+    info: (props: import("./components/functions").PisellModalFuncProps) => {
+        destroy: () => void;
+        update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
+    };
+    error: (props: import("./components/functions").PisellModalFuncProps) => {
+        destroy: () => void;
+        update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
+    };
+    warn: (props: import("./components/functions").PisellModalFuncProps) => any;
+    warning: (props: import("./components/functions").PisellModalFuncProps) => {
+        destroy: () => void;
+        update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
+    };
+    success: (props: import("./components/functions").PisellModalFuncProps) => {
+        destroy: () => void;
+        update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
+    };
+    Information: (props: import("./components/Information").InformationProps) => React.JSX.Element;
+};
+export default PisellModal;

package/lib/components/pisellMultipleSelect/PisellMultipleSelect.stories.d.ts

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PisellMultipleSelect from './PisellMultipleSelect';
+/**
+ * PisellMultipleSelect 组件 Storybook
+ *
+ * 用于展示和测试组件的各种状态和配置
+ */
+declare const meta: Meta<typeof PisellMultipleSelect>;
+export default meta;
+declare type Story = StoryObj<typeof PisellMultipleSelect>;
+/**
+ * 基础示例
+ */
+export declare const Basic: Story;
+/**
+ * 带标签
+ */
+export declare const WithLabel: Story;
+/**
+ * 标签聚合功能
+ */
+export declare const TagAggregation: Story;
+/**
+ * 最大可选数量限制
+ */
+export declare const WithMaxCount: Story;
+/**
+ * 带搜索功能
+ */
+export declare const WithSearch: Story;
+/**
+ * 带清空按钮
+ */
+export declare const WithClear: Story;
+/**
+ * 禁用态
+ */
+export declare const Disabled: Story;
+/**
+ * 只读态
+ */
+export declare const ReadOnly: Story;
+/**
+ * 只读态 - 标签聚合
+ */
+export declare const ReadOnlyWithAggregation: Story;
+/**
+ * 只读态 - 空值
+ */
+export declare const ReadOnlyEmpty: Story;
+/**
+ * 错误状态
+ */
+export declare const WithError: Story;
+/**
+ * 不同尺寸
+ */
+export declare const Sizes: Story;
+/**
+ * 表单场景
+ */
+export declare const InForm: Story;
+/**
+ * 回调事件演示
+ */
+export declare const WithCallbacks: Story;
+/**
+ * 所有状态组合
+ */
+export declare const AllStates: Story;

package/lib/components/pisellMultipleSelect/components/DisabledView.d.ts

@@ -0,0 +1,8 @@
+/**
+ * PisellMultipleSelect - DisabledView (禁用态视图)
+ * 禁用状态下的渲染
+ */
+import React from 'react';
+import type { DisabledViewProps } from '../types';
+declare const DisabledView: React.ForwardRefExoticComponent<DisabledViewProps<string | number> & React.RefAttributes<any>>;
+export default DisabledView;

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

@@ -0,0 +1,7 @@
+/**
+ * PisellMultipleSelect 组件导出
+ */
+import PisellMultipleSelect from './PisellMultipleSelect';
+export { PisellMultipleSelect };
+export type { PisellMultipleSelectProps, MultipleSelectRef, EditViewProps, DisabledViewProps, ReadOnlyViewProps, TagRendererProps, } from './types';
+export type { SelectOption, FilterOptionFunc, SortDirection, MultipleSelectState, TagDisplayInfo, } from './types';

package/lib/components/pisellNumber/PisellNumber.stories.d.ts

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellNumber } from './PisellNumber';
+/**
+ * PisellNumber 组件 Storybook
+ *
+ * 用于展示和测试组件的各种状态和配置
+ */
+declare const meta: Meta<typeof PisellNumber>;
+export default meta;
+declare type Story = StoryObj<typeof PisellNumber>;
+/**
+ * 基础示例 - 编辑态
+ */
+export declare const Basic: Story;
+/**
+ * 只读态展示
+ */
+export declare const ReadOnly: Story;
+/**
+ * 禁用态
+ */
+export declare const Disabled: Story;
+/**
+ * 带范围限制
+ */
+export declare const WithRange: Story;
+/**
+ * 带精度控制
+ */
+export declare const WithPrecision: Story;
+/**
+ * 千分位分隔符
+ */
+export declare const WithGrouping: Story;
+/**
+ * 带前后缀
+ */
+export declare const WithAddon: Story;
+/**
+ * 带校验 - 必填
+ */
+export declare const WithValidationRequired: Story;
+/**
+ * 带校验 - 范围校验
+ */
+export declare const WithValidationRange: Story;
+/**
+ * 带校验 - 自定义校验
+ */
+export declare const WithCustomValidation: Story;
+/**
+ * 不同尺寸
+ */
+export declare const Sizes: Story;
+/**
+ * 只读态样式配置
+ */
+export declare const ReadOnlyStyles: Story;
+/**
+ * 表单场景
+ */
+export declare const InForm: Story;
+/**
+ * 空值处理
+ */
+export declare const EmptyValue: Story;

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

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

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

@@ -0,0 +1,6 @@
+/**
+ * PisellNumber 子组件导出
+ */
+export { default as ReadOnlyView } from './ReadOnlyView';
+export { default as EditView } from './EditView';
+export { default as DisabledView } from './DisabledView';

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

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

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;

package/lib/components/pisellPercent/components/DisabledView.d.ts

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

package/lib/components/pisellPercent/components/ReadOnlyView.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { PisellPercentProps } from '../types';
+/**
+ * PisellPercent 只读态视图组件
+ *
+ * 根据 variant 渲染不同形式：
+ * - text: 纯文本（85.5%）
+ * - progress: 进度条
+ * - circle: 环形进度
+ *
+ * @param props 组件 Props
+ */
+declare const ReadOnlyView: React.FC<PisellPercentProps>;
+export default ReadOnlyView;

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

@@ -0,0 +1,6 @@
+/**
+ * PisellPercent 子组件导出
+ */
+export { default as ReadOnlyView } from './ReadOnlyView';
+export { default as EditView } from './EditView';
+export { default as DisabledView } from './DisabledView';

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

@@ -0,0 +1,7 @@
+/**
+ * PisellPercent 组件导出
+ */
+import PisellPercent from './PisellPercent';
+export { PisellPercent };
+export type { PisellPercentProps } from './types';
+export type { DisplayState, ValidationResult, NumberInputState, BaseNumberInputProps } from './types';

package/lib/components/pisellPercent/utils/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * PisellPercent 工具函数导出
+ */
+export { formatPercent } from './percentFormatter';
+export type { PercentFormatOptions } from './percentFormatter';
+export { convertToPercent, convertFromPercent } from './rangeConverter';