@pisell/materials 1.0.1056 → 1.0.1058

package/es/components/pisellCardList/index.d.ts

@@ -0,0 +1,107 @@
+import React from 'react';
+import { PisellCheckboxGroupProps } from '../pisellCheckboxGroup';
+import { PisellContextType } from '../pisell-config-provider/context';
+import { PisellWalletPassCardProps, FormatOption } from '../pisellWalletPassCard';
+import './index.less';
+export interface PisellCardListProps extends Omit<PisellCheckboxGroupProps, 'options'> {
+    platform?: PisellContextType['platform'];
+    /** 当用户查看完所有记录时，底部会显示此消息 */
+    endMessage?: React.ReactNode;
+    /** 加载下次数据时的加载站位 */
+    loader?: React.ReactNode;
+    /** 是否有更多数据 */
+    hasMore: boolean;
+    /** 加载更多数据回调 */
+    loadMoreData?: () => Promise<void>;
+    /** 当前list数据 */
+    data: PisellWalletPassCardProps[];
+    /** list空数据时展示内容 */
+    empty?: React.ReactNode;
+    /** 是否展示空状态 */
+    showEmpty?: boolean;
+    /** 是否展示卡片名称 */
+    showName?: boolean;
+    /** 是否展示店铺名称 */
+    showStoreName?: boolean;
+    /** 是否展示核销金额 */
+    showRedeem?: boolean;
+    /** 是否展示余额 */
+    showBalance?: boolean;
+    /** 是否展示编码 */
+    showCode?: boolean;
+    /** 是否展示到期时间 */
+    showValidDate?: boolean;
+    /** 使用日程信息计算有效期 */
+    validDateBySchedule?: boolean;
+    /** 日程列表 */
+    scheduleList?: any[];
+    /** 是否展示详情按钮 */
+    showDetail?: boolean;
+    /** 是否展示二维码 */
+    showQrCode?: boolean;
+    /** 是否展示封面图 */
+    showCover?: boolean;
+    /** 是否余额货币单位 */
+    showBalanceSymbol?: boolean;
+    /** 卡片大小 */
+    type?: 'default' | 'mini';
+    /** 展示操作按钮 */
+    showActions?: boolean;
+    /** 操作按钮配置 */
+    actions?: {
+        /** 按钮展示方式 */
+        layout: 'expanded' | 'collapsed';
+        /** detail 按钮配置 */
+        detail?: {
+            visible: boolean;
+            iconColor: string;
+        };
+        /** edit按钮配置 */
+        edit?: {
+            visible: boolean;
+            iconColor: string;
+            dialogTitle: string;
+            enableDialog: boolean;
+            fields: {
+                name: string;
+                label: string;
+            };
+        };
+    };
+    /** 编辑编辑按钮后，弹窗展示之前 */
+    beforeEdit?: (value: any, index: number) => Promise<any> | boolean | void;
+    /** 编辑弹窗点击提交 */
+    onConfirmEdit?: (value: any, index: number, data: any) => void;
+    /** 是否展示状态标识 */
+    showStatus?: boolean;
+    /** 名称标题字号字重颜色配置 */
+    nameTitleStyle?: {
+        fontSize: number;
+        fontWeight: number;
+        color: string;
+    };
+    /** 开启编辑金额 */
+    enableEditAmount?: boolean;
+    /** 编辑金额事件 */
+    onConfirmEditAmount?: (value: number, index: number, data: any) => void;
+    /** 是否使用外部详情处理 */
+    useExternalDetail?: boolean;
+    /** 详情事件 */
+    onDetail?: (value: any, index: number) => void;
+    /** 自定义余额格式化函数，如果提供则优先使用 */
+    formatBalance?: (balance?: number, option?: FormatOption) => React.ReactNode;
+    /** 自定义余额标题格式化函数，如果提供则优先使用 */
+    formatBalanceTitle?: (balanceTitle?: string, option?: FormatOption) => React.ReactNode;
+    /** 自定义使用金额格式化函数，如果提供则优先使用 */
+    formatRedeem?: (redeem?: number, option?: FormatOption) => React.ReactNode;
+    /** 自定义使用金额标题格式化函数，如果提供则优先使用 */
+    formatRedeemTitle?: (redeemTitle?: string, option?: FormatOption) => React.ReactNode;
+    /** 编辑金额前事件 */
+    onBeforeEditAmount?: (value: any, index: number, data: any) => Promise<any> | boolean | void;
+    /** 选项点击事件 */
+    onItemClick?: (e: React.MouseEvent<HTMLDivElement>, option: any) => void;
+    /** 是否展示选中状态的背景色 */
+    showActiveBackground?: boolean;
+}
+declare const _default: React.NamedExoticComponent<PisellCardListProps>;
+export default _default;

package/es/components/pisellCheckboxGroup/index.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { PisellContextType } from '../pisell-config-provider/context';
+import './index.less';
+export interface PisellCheckboxGroupOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    error?: boolean;
+    [key: string]: any;
+}
+declare type PisellCheckboxGroupValue = string | string[] | any;
+export interface PisellCheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    platform?: PisellContextType['platform'];
+    direction?: 'horizontal' | 'vertical';
+    fullWidth?: boolean;
+    gap?: number;
+    padding?: number;
+    options: PisellCheckboxGroupOption[];
+    onChange?: (value: PisellCheckboxGroupValue, item: PisellCheckboxGroupOption) => void;
+    value?: PisellCheckboxGroupValue;
+    renderOption?: (option: PisellCheckboxGroupOption, active: boolean, index: number) => React.ReactNode;
+    rowKey?: string;
+    mode?: 'multiple' | 'single';
+    iconPosition?: 'left' | 'right' | 'hide';
+    optionClassName?: string;
+    optionActiveClassName?: string;
+    onChangeDebounce?: boolean;
+    onItemClick?: (e: React.MouseEvent<HTMLDivElement>, option: PisellCheckboxGroupOption) => void;
+    showActiveBackground?: boolean;
+}
+/**
+ * @title: PisellCheckboxGroup
+ * @description: 选中组件
+ * @param {PisellCheckboxGroupProps} props
+ * @return {*}
+ * @Author: zhiwei.Wang
+ * @Date: 2024-08-16 10:34
+ */
+declare const PisellCheckboxGroup: (props: PisellCheckboxGroupProps) => JSX.Element;
+export default PisellCheckboxGroup;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { PisellCurrencyProps } from './types';
+import './PisellCurrency.less';
+/**
+ * PisellCurrency 货币组件
+ *
+ * 基于 PisellNumber 派生，专门处理货币数据。
+ * 默认启用千分位和2位小数，符合财务规范。
+ *
+ * @param props 组件 Props
+ *
+ * @example
+ * // 受控模式
+ * const [price, setPrice] = useState(0);
+ * <PisellCurrency
+ *   value={price}
+ *   onChange={setPrice}
+ *   currencySymbol="¥"
+ * />
+ *
+ * @example
+ * // 非受控模式
+ * <PisellCurrency
+ *   defaultValue={100}
+ *   currencySymbol="$"
+ * />
+ *
+ * @example
+ * // 只读态
+ * <PisellCurrency
+ *   mode="read"
+ *   value={1234.56}
+ *   currencySymbol="¥"
+ * />
+ * // 显示: ¥1,234.56
+ */
+export declare const PisellCurrency: React.FC<PisellCurrencyProps>;
+declare const MemoizedPisellCurrency: React.NamedExoticComponent<PisellCurrencyProps>;
+export default MemoizedPisellCurrency;

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

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { PisellCurrencyProps } from '../types';
+/**
+ * PisellCurrency 只读态视图组件
+ *
+ * 负责渲染只读态的纯文本展示
+ *
+ * 功能：
+ * - 格式化货币数值并展示
+ * - 添加货币符号（无空格）
+ * - 支持自定义字体样式
+ * - 处理空值显示
+ *
+ * @param props 组件 Props
+ */
+declare const ReadOnlyView: React.FC<PisellCurrencyProps>;
+export default ReadOnlyView;

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

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

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

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

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

@@ -0,0 +1,56 @@
+import type { PisellNumberProps } from '../pisellNumber';
+/**
+ * 从 @pisell/utils 重新导出公共类型
+ */
+export type { DisplayState, ValidationResult, NumberInputState, BaseNumberInputProps, } from '@pisell/utils';
+/**
+ * PisellCurrency 组件 Props 类型定义
+ *
+ * 基于 PisellNumber 扩展，专门处理货币数据
+ */
+export interface PisellCurrencyProps extends PisellNumberProps {
+    /**
+     * 货币符号
+     * @default '¥'
+     * @example '¥', '$', '€', '£', '₩', '₽'
+     */
+    currencySymbol?: string;
+    /**
+     * 货币符号位置
+     * - before: 前置，如 ¥100
+     * - after: 后置，如 100€
+     * @default 'before'
+     */
+    symbolPosition?: 'before' | 'after';
+    /**
+     * 是否显示货币符号
+     * @default true
+     */
+    showSymbol?: boolean;
+    /**
+     * 货币代码（用于国际化标识）
+     * @example 'CNY', 'USD', 'EUR', 'GBP'
+     */
+    currencyCode?: string;
+    /**
+     * 是否允许负数
+     * @default true
+     * @description
+     * - true: 允许负数（如退款场景）
+     * - false: 不允许负数（如商品价格）
+     */
+    allowNegative?: boolean;
+    /**
+     * 小数精度
+     * @default 2
+     * @description 货币默认保留2位小数，符合财务规范
+     */
+    precision?: number;
+    /**
+     * 是否使用千分位分隔符
+     * @default true
+     * @description 货币默认启用千分位，符合财务规范
+     * @example 1234.56 → 1,234.56
+     */
+    useGrouping?: boolean;
+}

package/es/components/pisellCurrency/utils/currencyFormatter.d.ts

@@ -0,0 +1,31 @@
+/**
+ * 货币格式化选项
+ */
+export interface CurrencyFormatOptions {
+    /** 货币符号 */
+    currencySymbol: string;
+    /** 符号位置 */
+    symbolPosition: 'before' | 'after';
+    /** 是否显示符号 */
+    showSymbol: boolean;
+    /** 小数精度 */
+    precision: number;
+    /** 是否使用千分位 */
+    useGrouping: boolean;
+}
+/**
+ * 格式化货币数值
+ *
+ * @param value 数值
+ * @param options 格式化选项
+ * @returns 格式化后的货币字符串
+ *
+ * @example
+ * formatCurrency(1234.56, { currencySymbol: '¥', symbolPosition: 'before', showSymbol: true, precision: 2, useGrouping: true })
+ * // 返回: '¥1,234.56'
+ *
+ * @example
+ * formatCurrency(999.99, { currencySymbol: '€', symbolPosition: 'after', showSymbol: true, precision: 2, useGrouping: true })
+ * // 返回: '999.99€'
+ */
+export declare function formatCurrency(value: number | null | undefined, options: CurrencyFormatOptions): string | null;

package/es/components/pisellCurrency/utils/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * PisellCurrency 工具函数导出
+ */
+export { formatCurrency } from './currencyFormatter';
+export type { CurrencyFormatOptions } from './currencyFormatter';

package/es/components/pisellDataSourceContainer/components/ColumnsSetting/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { DataSourceContainerContextType } from '../../type';
+export declare const COLUMNS_SHARED_STATE_KEYS: {
+    readonly columnsValue: (instanceId: string) => string;
+    readonly columnsChange: (instanceId: string) => string;
+};
+export interface ColumnsSettingProps {
+    scopeId?: string;
+    __id?: string;
+}
+export interface ColumnSettingItem {
+    key: string;
+    title: React.ReactNode;
+    titleString?: string;
+    dataIndex: string;
+    isShow: boolean;
+    sortIndex?: number;
+    fixed?: 'left' | 'right' | boolean;
+}
+/**
+ * 暴露给父组件的 ref 方法
+ */
+export interface ColumnsSettingRef {
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<ColumnsSettingProps & DataSourceContainerContextType & React.RefAttributes<ColumnsSettingRef> & {
+    refId?: string | undefined;
+}, "ref"> & React.RefAttributes<any>>;
+export default _default;

package/es/components/pisellDataSourceContainer/components/ColumnsSetting/utils.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 列设置工具：持久化复用 @pisell/utils 的 saveColumnSettingToLocal / getColumnSettingFromLocal；
+ * mergeColumnSettingSimple 为 Table 列与本地缓存的合并逻辑，保留在此。
+ */
+import React from 'react';
+import { getColumnSettingFromLocal, clearColumnSettingFromLocal } from '@pisell/utils';
+export { getColumnSettingFromLocal, clearColumnSettingFromLocal };
+/** 与 DataSourceContainer ColumnsSetting 调用处类型兼容的列设置项（含 React.ReactNode title） */
+export interface ColumnSettingItemForSave {
+    key: string;
+    dataIndex: string;
+    title?: React.ReactNode;
+    titleString?: string;
+    isShow: boolean;
+    sortIndex?: number;
+    fixed?: 'left' | 'right' | boolean;
+}
+export declare const saveColumnSettingToLocal: (params: {
+    componentId: string;
+    columnSetting: ColumnSettingItemForSave[];
+}) => void;
+export declare const mergeColumnSettingSimple: ({ columns, componentId, }: {
+    columns: Record<string, any>[];
+    componentId?: string | undefined;
+}) => {
+    isShow: any;
+    sortIndex: any;
+}[];

package/es/components/pisellDataSourceContainer/components/Table/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { DataSourceContainerContextType } from '../../type';
+declare const _default: React.ForwardRefExoticComponent<Omit<Partial<import("antd").TableProps<any>> & DataSourceContainerContextType & {
+    scopeId?: string | undefined;
+    __id?: string | undefined;
+} & React.RefAttributes<unknown> & {
+    refId?: string | undefined;
+}, "ref"> & React.RefAttributes<any>>;
+export default _default;

package/es/components/pisellDataSourceContainer/components/Table/useColumns.d.ts

@@ -0,0 +1,14 @@
+import { RefManagerContextType } from '../../type';
+/**
+ * useColumns Hook 参数
+ */
+interface UseColumnsParams {
+    columns: any[];
+    scopeId: string;
+    refManager: RefManagerContextType;
+    __id?: string;
+}
+declare const useColumns: (params: UseColumnsParams) => {
+    visibleColumns: any[];
+};
+export default useColumns;

package/es/components/pisellDataSourceContainer/utils/formatData.d.ts

@@ -0,0 +1,9 @@
+declare const formatListResult: (result: any) => {
+    list: any;
+    count: any;
+};
+declare const formatListParams: (params: any) => {
+    page: any;
+    pageSize: any;
+};
+export { formatListParams, formatListResult };

package/es/components/pisellDatePicker/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const PisellDatePicker: (props: any) => JSX.Element;
 export default PisellDatePicker;

package/es/components/pisellDateTimeDisplay/PisellDateTimeDisplay.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+import type { PisellDateTimeDisplayProps } from './types';
+import './PisellDateTimeDisplay.less';
+/**
+ * PisellDateTimeDisplay 组件
+ *
+ * @description
+ * 专注于展示当前时间的组件，支持：
+ * - 当前日期、时间、星期展示
+ * - 多种布局方式（水平、垂直、单行）
+ * - 丰富的格式化配置
+ * - 自动刷新
+ * - 国际化支持
+ *
+ * @example
+ * // 基础用法
+ * <PisellDateTimeDisplay />
+ *
+ * // 自定义格式
+ * <PisellDateTimeDisplay
+ *   layout="vertical"
+ *   timeFormat={{ use12Hour: true, showSeconds: true }}
+ *   dateFormat={{ showYear: true, showChineseUnit: true }}
+ * />
+ *
+ * // 自定义格式化字符串
+ * <PisellDateTimeDisplay
+ *   customFormat="YYYY-MM-DD HH:mm:ss"
+ * />
+ */
+export declare const PisellDateTimeDisplay: React.FC<PisellDateTimeDisplayProps>;
+declare const _default: React.NamedExoticComponent<PisellDateTimeDisplayProps>;
+export default _default;