@pisell/materials 6.8.13 → 6.8.15

package/lib/components/PisellCards/components/TextCard/types.d.ts

@@ -1,270 +0,0 @@
-import { CSSProperties, ReactNode } from 'react';
-import { PisellBasicCardProps } from '../../types';
-/**
- * 样式变体类型
- */
-export declare type TextCardVariant = 'text' | 'filled' | 'outlined' | 'light' | 'gradient' | 'dashed';
-/**
- * 尺寸类型
- */
-export declare type TextCardSize = 'small' | 'default' | 'large';
-/**
- * 宽度模式
- */
-export declare type TextCardWidthMode = 'auto' | 'fixed' | 'full';
-/**
- * 图标配置
- */
-export interface IconConfig {
-    /**
-     * 图标大小（单位：px）
-     */
-    size?: number;
-    /**
-     * 图标颜色
-     */
-    color?: string;
-}
-/**
- * 标签配置
- */
-export interface TagConfig {
-    /**
-     * 标签颜色
-     */
-    color?: string;
-    /**
-     * 标签自定义样式
-     */
-    style?: CSSProperties;
-}
-/**
- * 角标类型
- */
-export declare type BadgeType = 'dot' | 'number' | 'text';
-/**
- * 角标位置
- */
-export declare type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
-/**
- * 角标配置
- */
-export interface BadgeConfig {
-    /**
-     * 角标类型
-     * @default 'dot'
-     */
-    type?: BadgeType;
-    /**
-     * 角标内容（数字或文本）
-     * 当 type 为 'number' 或 'text' 时有效
-     */
-    content?: ReactNode;
-    /**
-     * 角标位置
-     * @default 'top-right'
-     */
-    position?: BadgePosition;
-    /**
-     * 角标偏移量 [x, y]
-     * 正数向右/下偏移，负数向左/上偏移
-     */
-    offset?: [number, number];
-    /**
-     * 角标颜色
-     */
-    color?: string;
-    /**
-     * 角标自定义样式
-     */
-    style?: CSSProperties;
-}
-/**
- * 文本配置
- */
-export interface TextConfig {
-    /**
-     * 字体大小（单位：px）
-     */
-    fontSize?: number;
-    /**
-     * 字体粗细
-     */
-    fontWeight?: string | number;
-    /**
-     * 文本颜色
-     */
-    color?: string;
-    /**
-     * 最大显示行数
-     * @default 1
-     */
-    maxLines?: number;
-    /**
-     * 是否显示省略号
-     * @default true
-     */
-    ellipsis?: boolean;
-    /**
-     * 文本对齐方式
-     * @default 'left'
-     */
-    textAlign?: 'left' | 'center' | 'right';
-    flex?: string;
-}
-/**
- * TextCard 组件 Props
- * 基于 PisellBasicCardProps 扩展
- * 注意：重写 onClick 为可选属性
- */
-export interface TextCardProps extends Omit<PisellBasicCardProps, 'onClick'> {
-    /**
-     * 卡片显示的文本内容（必填）
-     */
-    text: ReactNode;
-    /**
-     * 卡片样式变体
-     * @default 'text'
-     */
-    variant?: TextCardVariant;
-    /**
-     * 卡片尺寸
-     * @default 'default'
-     */
-    size?: TextCardSize;
-    /**
-     * 是否可点击
-     * @default true
-     */
-    clickable?: boolean;
-    /**
-     * 前置图标
-     * 支持 ReactNode（如 antd Icon、svg 等）
-     */
-    prefixIcon?: ReactNode;
-    /**
-     * 后置图标
-     * 支持 ReactNode（如 antd Icon、svg 等）
-     */
-    suffixIcon?: ReactNode;
-    /**
-     * 图标配置
-     * 统一配置前置和后置图标的大小和颜色
-     */
-    iconConfig?: IconConfig;
-    /**
-     * 后置标签
-     * 支持 ReactNode（如 antd Tag、Badge 等）
-     */
-    tag?: ReactNode;
-    /**
-     * 标签配置
-     */
-    tagConfig?: TagConfig;
-    /**
-     * 角标配置
-     * 用于显示红点、数字或文本提示
-     */
-    badge?: BadgeConfig;
-    /**
-     * 前置插槽
-     * 用于替换前置图标，优先级高于 prefixIcon
-     */
-    prefixSlot?: ReactNode;
-    /**
-     * 后置插槽
-     * 用于替换后置图标和标签，优先级高于 suffixIcon 和 tag
-     */
-    suffixSlot?: ReactNode;
-    /**
-     * 文本配置
-     * 用于自定义文本样式和显示行为
-     */
-    textConfig?: TextConfig;
-    /**
-     * 宽度模式
-     * - auto: 内容撑满，最大宽度 maxWidth
-     * - fixed: 固定宽度 width
-     * - full: 撑满父容器，最小宽度 28px
-     * @default 'auto'
-     */
-    widthMode?: TextCardWidthMode;
-    /**
-     * 固定宽度值
-     * 当 widthMode='fixed' 时有效
-     */
-    width?: number | string;
-    /**
-     * 最大宽度
-     * 当 widthMode='auto' 时有效
-     * @default 400
-     */
-    maxWidth?: number | string;
-    /**
-     * 点击事件
-     * 当 clickable=true 且不在 disabled/loading 状态时触发
-     * 注意：PisellBasicCardProps 中的 onClick 是必填的，这里重新定义为可选
-     */
-    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    /**
-     * 自定义渲染函数
-     * 完全自定义组件的渲染内容
-     * 当提供此函数时，组件内置的渲染逻辑将被忽略
-     */
-    render?: (props: TextCardProps) => ReactNode;
-}
-/**
- * TextContent 组件 Props
- * 文本内容子组件
- */
-export interface TextContentProps {
-    /**
-     * 文本内容
-     */
-    text: ReactNode;
-    /**
-     * 文本配置
-     */
-    textConfig?: TextConfig;
-    /**
-     * 自定义类名
-     */
-    className?: string;
-    active?: PisellBasicCardProps['active'];
-}
-/**
- * IconWrapper 组件 Props
- * 图标包装子组件
- */
-export interface IconWrapperProps {
-    /**
-     * 图标内容
-     */
-    icon: ReactNode;
-    /**
-     * 图标配置
-     */
-    config?: IconConfig;
-    /**
-     * 图标位置
-     */
-    position: 'prefix' | 'suffix';
-    /**
-     * 自定义类名
-     */
-    className?: string;
-}
-/**
- * BadgeWrapper 组件 Props
- * 角标包装子组件
- */
-export interface BadgeWrapperProps {
-    /**
-     * 角标配置
-     */
-    badge?: BadgeConfig;
-    /**
-     * 子元素
-     */
-    children: ReactNode;
-}

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

@@ -1,10 +0,0 @@
-export { default as GraphicTextCard } from './GraphicTextCard';
-export { default as TextCard } from './TextCard';
-export { default as TabCard } from './TabCard';
-export { default as MultilevelCard } from './MultilevelCard';
-export { default as PisellImageCard } from './PisellImageCard';
-export type { GraphicTextCardProps } from './GraphicTextCard/types';
-export type { TextCardProps } from './TextCard/types';
-export type { TabCardProps } from './TabCard/types';
-export type { MultilevelCardProps } from './MultilevelCard/types';
-export type { PisellImageCardProps } from './PisellImageCard/types';

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

@@ -1,14 +0,0 @@
-declare const PisellCards: {
-    TabCard: (props: any) => JSX.Element;
-    TextCard: (props: any) => JSX.Element;
-    GraphicTextCard: (props: import("./components/GraphicTextCard").GraphicTextCardProps) => JSX.Element;
-    MultilevelCard: (props: any) => JSX.Element;
-    PisellImageCard: (props: import("./components/PisellImageCard").PisellImageCardProps) => JSX.Element;
-};
-export default PisellCards;
-export type { PisellBasicCardProps } from './types';
-export type { TabCardProps, BadgeConfig } from './components/TabCard/types';
-export type { TextCardProps } from './components/TextCard/types';
-export type { GraphicTextCardProps, GraphicTextCardVariant, GraphicTextCardSize, GraphicConfig, } from './components/GraphicTextCard/types';
-export type { MultilevelCardProps } from './components/MultilevelCard/types';
-export type { PisellImageCardProps, ImageDataSource, ImageFillMode, } from './components/PisellImageCard/types';

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

@@ -1,48 +0,0 @@
-import { CSSProperties, ReactNode } from 'react';
-/**
- * 基础卡片 Props 定义
- * 所有业务卡片都应该基于此 Props 进行扩展
- * 注意：这只是类型定义，不是实体组件
- */
-export interface PisellBasicCardProps extends React.HTMLAttributes<HTMLDivElement> {
-    __designMode?: boolean;
-    dataSource?: any;
-    /**
-     * 激活状态配置
-     * 用于标识卡片是否处于激活/选中状态
-     */
-    active?: {
-        value: boolean;
-        style?: CSSProperties;
-        className?: string;
-        onChange?: (value: boolean) => void;
-        extra?: any;
-    };
-    /**
-     * 禁用状态配置
-     * 用于标识卡片是否处于禁用状态
-     */
-    disabled?: {
-        value: boolean;
-        style?: CSSProperties;
-        className?: string;
-        onChange?: (value: boolean) => void;
-        extra?: any;
-    };
-    /**
-     * 加载状态配置
-     * 用于标识卡片是否处于加载状态
-     */
-    loading?: {
-        value: boolean;
-        style?: CSSProperties;
-        className?: string;
-        onChange?: (value: boolean) => void;
-        extra?: any;
-    };
-    /**
-     * 卡片内容
-     */
-    children?: ReactNode;
-    onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-}

package/lib/components/PisellProcedure/PisellProcedure.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-import type { PisellProcedureProps, PisellProcedureRef } from './types';
-import './PisellProcedure.less';
-/**
- * PisellProcedure 流程容器组件
- *
- * @description 用于管理多步骤流程的复合容器组件，基于 PisellLayout 实现三段式布局
- * @author Pisell Team
- * @version 1.0.0
- *
- * @example
- * // 使用 ref 调用组件方法
- * const procedureRef = useRef<PisellProcedureRef>(null);
- *
- * // 跳转到下一步
- * procedureRef.current?.goNext();
- *
- * // 获取当前步骤
- * const currentStep = procedureRef.current?.getCurrentStep();
- */
-declare const PisellProcedure: React.ForwardRefExoticComponent<PisellProcedureProps & React.RefAttributes<PisellProcedureRef>>;
-export default PisellProcedure;

package/lib/components/PisellProcedure/PisellProcedure.stories.d.ts

@@ -1,163 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import PisellProcedure from './PisellProcedure';
-/**
- * PisellProcedure 流程容器组件
- *
- * 用于管理多步骤流程的复合容器组件，基于 PisellLayout 实现三段式布局
- * 包含头部区域（步骤条）、主体区域（内容区+信息区）、底部区域（操作按钮）
- */
-declare const meta: Meta<typeof PisellProcedure>;
-export default meta;
-declare type Story = StoryObj<typeof PisellProcedure>;
-/**
- * 基础用法
- * @description 默认流程容器，包含头部、主体、底部三个区域
- */
-export declare const Default: Story;
-/**
- * 页面模式
- * @description 默认模式，支持响应式和移动端适配
- */
-export declare const PageMode: Story;
-/**
- * 弹窗模式
- * @description 用于弹窗场景，不应用移动端适配
- */
-export declare const ModalMode: Story;
-/**
- * 步骤控制
- * @description 使用 onStepsChange 监听步骤变化
- */
-export declare const StepControl: Story;
-/**
- * 步骤拦截
- * @description 通过 onNext/onPrev 返回 false 阻止步骤切换
- */
-export declare const StepIntercept: Story;
-/**
- * 无侧边栏
- */
-export declare const WithoutSidebar: Story;
-/**
- * 无头部
- */
-export declare const WithoutHeader: Story;
-/**
- * 无底部
- */
-export declare const WithoutFooter: Story;
-/**
- * 最小配置
- * @description 仅显示主体内容
- */
-export declare const MinimalConfig: Story;
-/**
- * 头部插槽顺序 - 默认
- * @description left 在左，right 在右
- */
-export declare const HeaderSlotDefault: Story;
-/**
- * 头部插槽顺序 - 反转
- * @description left 在右，right 在左
- */
-export declare const HeaderSlotReverse: Story;
-/**
- * 隐藏步骤条
- * @description 仅显示头部插槽，不显示步骤条
- */
-export declare const HideSteps: Story;
-/**
- * 第一步显示返回按钮
- * @description 通过 showBackOnFirstStep 控制
- */
-export declare const ShowBackOnFirstStep: Story;
-/**
- * 返回确认弹窗
- * @description 点击返回时弹出确认弹窗
- */
-export declare const BackConfirmModal: Story;
-/**
- * 关闭确认弹窗
- * @description 点击关闭时弹出确认弹窗
- */
-export declare const CloseConfirmModal: Story;
-/**
- * 主体布局 - 比例布局
- * @description 使用比例分配内容区和侧边栏宽度
- */
-export declare const BodyRatioLayout: Story;
-/**
- * 主体布局 - 固定宽度
- * @description 侧边栏使用固定宽度
- */
-export declare const BodyFixedLayout: Story;
-/**
- * 主体布局 - 垂直布局
- * @description 内容区和侧边栏上下排列
- */
-export declare const BodyVerticalLayout: Story;
-/**
- * 主体布局 - 内容顺序反转
- * @description 侧边栏在左/上，内容区在右/下
- */
-export declare const BodyContentOrderReverse: Story;
-/**
- * 底部位置 - 悬浮在侧边栏
- * @description 默认位置，底部悬浮在侧边栏区域
- */
-export declare const FooterFloatSidebar: Story;
-/**
- * 底部位置 - 固定在整体底部
- */
-export declare const FooterFixedBottom: Story;
-/**
- * 底部位置 - 悬浮在整体区域
- * @description 移动端默认使用此模式
- */
-export declare const FooterFloatAll: Story;
-/**
- * 底部位置 - 悬浮在内容区
- */
-export declare const FooterFloatContent: Story;
-/**
- * 底部位置 - 内嵌在内容区底部
- */
-export declare const FooterFixedContentBottom: Story;
-/**
- * 底部位置 - 内嵌在侧边栏底部
- */
-export declare const FooterFixedSidebarBottom: Story;
-/**
- * 移动端总结按钮
- * @description 移动端显示总结按钮，点击可查看侧边栏内容
- */
-export declare const MobileSummaryButton: Story;
-/**
- * 溢出收纳功能
- * @description 当宽度不足时，按钮会被收纳到 More 菜单中
- */
-export declare const OverflowActions: Story;
-/**
- * 禁用溢出收纳
- * @description 不启用溢出收纳，按钮会换行显示
- */
-export declare const DisableOverflow: Story;
-/**
- * 完整示例 - 购物流程
- * @description 模拟真实的购物流程
- */
-export declare const ShoppingFlow: Story;
-/**
- * 完整示例 - 注册流程
- * @description 模拟用户注册流程
- */
-export declare const RegistrationFlow: Story;
-/**
- * 完整示例 - 表单向导
- * @description 多步表单向导
- */
-export declare const FormWizard: Story;
-/**
- * 交互测试 - 组件渲染
- */
-export declare const InteractionTest: Story;

package/lib/components/PisellProcedure/components/FooterActions.d.ts

@@ -1,24 +0,0 @@
-import React from 'react';
-/**
- * FooterActions 底部操作区组件 Props
- */
-export interface FooterActionsProps {
-    /** 左侧插槽（自定义内容） */
-    leftSlot?: React.ReactNode;
-    /** 操作按钮插槽（右侧按钮组） */
-    children?: React.ReactNode;
-    /** 自定义类名 */
-    className?: string;
-    /** More 按钮文案 */
-    moreText?: string;
-    /** 按钮间距 */
-    gap?: number;
-}
-/**
- * FooterActions 底部操作区组件
- * @description 实现底部操作区的左右布局：左侧自定义内容 + 右侧操作按钮（支持溢出收纳）
- * 收纳规则：从左到右依次收纳（优先级低的先收纳），保留右侧的主要操作按钮
- * @author Pisell Team
- */
-declare const FooterActions: React.FC<FooterActionsProps>;
-export default FooterActions;

package/lib/components/PisellProcedure/components/ProcedureBody.d.ts

@@ -1,41 +0,0 @@
-import React from 'react';
-import type { ProcedureBodyProps as BodyProps, ProcedureFooterProps, FooterPositionMode, ProcedureMode } from '../types';
-/**
- * ProcedureBody 子组件 Props
- */
-export interface ProcedureBodyProps {
-    /** 主体配置 */
-    bodyProps?: BodyProps;
-    /** 底部配置 */
-    footerProps?: ProcedureFooterProps;
-    /** 底部位置模式 */
-    footerPosition: FooterPositionMode;
-    /** 是否显示底部 */
-    showFooter?: boolean;
-    /** 是否显示信息区 */
-    showSidebar?: boolean;
-    /** 自定义类名 */
-    className?: string;
-    /** 移动端弹窗是否打开 */
-    summaryModalOpen?: boolean;
-    /** 打开移动端弹窗 */
-    onOpenSummaryModal?: () => void;
-    /** 关闭移动端弹窗 */
-    onCloseSummaryModal?: () => void;
-    /** 上一步回调 */
-    goPrev?: () => void;
-    /** 下一步回调 */
-    goNext?: () => void;
-    /** 组件使用模式 */
-    mode?: ProcedureMode;
-    containerSize?: any;
-    responsiveClsComputed?: string;
-}
-/**
- * ProcedureBody 主体区域组件
- *
- * @description 包含内容区和信息区的布局容器，支持固定宽度和比例两种布局模式
- * @author Pisell Team
- */
-declare const ProcedureBody: React.FC<ProcedureBodyProps>;
-export default ProcedureBody;

package/lib/components/PisellProcedure/components/ProcedureContent.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-import type { CSSProperties, ReactNode } from 'react';
-/**
- * ProcedureContent 子组件 Props
- */
-export interface ProcedureContentProps {
-    /** 内容区类名 */
-    className?: string;
-    /** 内容区样式 */
-    style?: CSSProperties;
-    /** 内容区插槽 */
-    children?: ReactNode;
-    /** 额外内容（如底部操作区） */
-    extra?: ReactNode;
-}
-/**
- * ProcedureContent 内容区组件
- *
- * @description 流程容器的主要内容展示区域
- * @author Pisell Team
- */
-declare const ProcedureContent: React.FC<ProcedureContentProps>;
-export default ProcedureContent;

package/lib/components/PisellProcedure/components/ProcedureFooter.d.ts

@@ -1,38 +0,0 @@
-import React from 'react';
-import type { ProcedureFooterProps as FooterProps, FooterPositionMode, ProcedureMode } from '../types';
-import type { ReactNode } from 'react';
-/**
- * ProcedureFooter 子组件 Props
- */
-export interface ProcedureFooterProps {
-    /** 底部配置 */
-    footerProps?: FooterProps;
-    /** 底部位置模式 */
-    position: FooterPositionMode;
-    /** 自定义类名 */
-    className?: string;
-    /** 是否作为全局底部（使用 PisellFooter 包裹） */
-    isGlobal?: boolean;
-    /** 信息区内容（用于移动端弹窗展示） */
-    sidebarContent?: ReactNode;
-    /** 移动端弹窗是否打开（受控） */
-    summaryModalOpen?: boolean;
-    /** 打开移动端弹窗 */
-    onOpenSummaryModal?: () => void;
-    /** 关闭移动端弹窗 */
-    onCloseSummaryModal?: () => void;
-    /** 上一步回调 */
-    goPrev?: () => void;
-    /** 下一步回调 */
-    goNext?: () => void;
-    /** 组件使用模式 */
-    mode?: ProcedureMode;
-}
-/**
- * ProcedureFooter 底部操作区组件
- *
- * @description 包含左侧自定义内容和右侧操作按钮（支持溢出收纳功能）
- * @author Pisell Team
- */
-declare const ProcedureFooter: React.FC<ProcedureFooterProps>;
-export default ProcedureFooter;

package/lib/components/PisellProcedure/components/ProcedureHeader.d.ts

@@ -1,34 +0,0 @@
-import React from 'react';
-import type { ProcedureHeaderProps as HeaderProps } from '../types';
-export declare type ActionType = 'cancel' | 'ok' | 'confirm';
-/**
- * ProcedureHeader 子组件 Props
- */
-export interface ProcedureHeaderProps {
-    /** 头部配置 */
-    headerProps?: HeaderProps;
-    /** 当前步骤索引 */
-    currentStep: number;
-    /** 自定义类名 */
-    className?: string;
-    /** 上一步回调 */
-    goPrev?: () => void;
-    /** 跳转到指定步骤 */
-    goToStep?: (step: number) => void;
-    /** 关闭回调 */
-    onClose?: () => void;
-    /** 首步返回回调 */
-    onFirstStepBack?: () => void;
-    /** 返回确认回调 */
-    onBackConfirm?: (action: ActionType) => void;
-    /** 关闭确认回调 */
-    onCloseConfirm?: (action: ActionType) => void;
-}
-/**
- * ProcedureHeader 头部区域组件
- *
- * @description 包含左侧返回按钮、中间步骤条、右侧关闭按钮
- * @author Pisell Team
- */
-declare const ProcedureHeader: React.FC<ProcedureHeaderProps>;
-export default ProcedureHeader;