@pisell/materials 6.11.14 → 6.11.16

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

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

@@ -1,12 +0,0 @@
-export { default as FooterActions } from './FooterActions';
-export type { FooterActionsProps } from './FooterActions';
-export { default as ProcedureHeader } from './ProcedureHeader';
-export type { ProcedureHeaderProps } from './ProcedureHeader';
-export { default as ProcedureBody } from './ProcedureBody';
-export type { ProcedureBodyProps } from './ProcedureBody';
-export { default as ProcedureContent } from './ProcedureContent';
-export type { ProcedureContentProps } from './ProcedureContent';
-export { default as ProcedureSidebar } from './ProcedureSidebar';
-export type { ProcedureSidebarProps } from './ProcedureSidebar';
-export { default as ProcedureFooter } from './ProcedureFooter';
-export type { ProcedureFooterProps } from './ProcedureFooter';

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

@@ -1,5 +0,0 @@
-/**
- * PisellProcedure 组件导出
- */
-export { default } from './PisellProcedure';
-export type { PisellProcedureProps, PisellProcedureRef, ProcedureHeaderProps, ProcedureBodyProps, ProcedureFooterProps, FooterPositionMode, BackConfirmModalConfig, BodyLayoutMode, BodyLayoutRatio, BodyDirection, StepItem, StepChangeResult, } from './types';

package/lib/components/PisellSteps/PisellSteps.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import './PisellSteps.less';
-import type { PisellStepsProps } from './types';
-/**
- * PisellSteps 步骤条组件
- *
- * 基于 Ant Design Steps 组件进行二次封装和增强
- * 支持多种展示样式、布局方式和丰富的交互功能
- *
- * @author Pisell Team
- * @version 1.0.0
- */
-declare const PisellSteps: React.FC<PisellStepsProps>;
-export default PisellSteps;

package/lib/components/PisellSuperTabs/PisellSuperTabs.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import './PisellSuperTabs.less';
-import type { PisellSuperTabsProps } from './types';
-interface PisellSuperTabsRef {
-    scrollItemByRowKey: (key: string) => void;
-}
-declare const _default: React.ForwardRefExoticComponent<PisellSuperTabsProps<unknown> & React.RefAttributes<PisellSuperTabsRef>>;
-export default _default;

package/lib/components/PisellSuperTabs/hooks/index.d.ts

@@ -1 +0,0 @@
-export { useTabsState } from './useTabsState';

package/lib/components/PisellSuperTabs/hooks/useTabsState.d.ts

@@ -1,7 +0,0 @@
-import { UseTabsStateParams, UseTabsStateReturn } from '../types';
-/**
- * Tabs 状态管理 Hook
- * @description 处理受控/非受控模式的状态管理
- * @template T - 数据项类型
- */
-export declare const useTabsState: <T = any>(params: UseTabsStateParams<T>) => UseTabsStateReturn<T>;

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

@@ -1,3 +0,0 @@
-import PisellSuperTabs from './PisellSuperTabs';
-export default PisellSuperTabs;
-export type { PisellSuperTabsProps, TabDataItem } from './types';

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

@@ -1,212 +0,0 @@
-import { CSSProperties, ReactNode } from 'react';
-import type { PisellBasicGridProps } from '../PisellBasicGrid/types';
-import type { PisellScrollViewProps } from '../PisellScrollView/types';
-import type { PisellBasicCardProps } from '../PisellCards/types';
-/**
- * useTabsState Hook 参数
- */
-export interface UseTabsStateParams<T = any> {
-    isControlled: boolean;
-    /**
-     * 当前激活的 Tab key（受控）
-     */
-    value?: string;
-    /**
-     * 默认激活的 Tab key（非受控）
-     */
-    defaultValue?: string;
-    /**
-     * Tab 切换时的回调
-     */
-    onChange?: (key: string, item: T) => void;
-}
-/**
- * useTabsState Hook 返回值
- */
-export interface UseTabsStateReturn<T = any> {
-    /**
-     * 当前激活的 Tab key
-     */
-    activeKey: string | undefined;
-    /**
-     * 切换 Tab 的方法
-     */
-    handleTabChange: (key: string, item: T) => void;
-}
-export interface RenderItemProps<T = any> extends PisellBasicCardProps {
-    index: number;
-    tabsState: UseTabsStateReturn<T>;
-    tabsProps: PisellSuperTabsProps<T>;
-}
-/**
- * PisellSuperTabs 组件 Props
- * @template T - 数据源项的类型
- * @description 通用导航框架封装的全能型 Tab 组件
- */
-export interface PisellSuperTabsProps<T = any> {
-    isControlled?: boolean;
-    /**
-     * 自定义类名
-     * @description 添加到最外层容器的类名
-     */
-    className?: string;
-    tabItemClassName?: string;
-    tabItemStyle?: CSSProperties;
-    /**
-     * 自定义样式
-     * @description 添加到最外层容器的样式
-     */
-    style?: CSSProperties;
-    /**
-     * 唯一标识
-     * @description 必填，用于区分不同的 TabItem
-     */
-    id?: string;
-    /**
-     * 数据源
-     * @description 支持多级嵌套，递归字段为 children
-     * @example
-     * [
-     *   { key: 'home', label: '首页' },
-     *   { key: 'products', label: '产品', children: [...] }
-     * ]
-     */
-    dataSource?: T[];
-    /**
-     * 数据项的唯一标识字段
-     * @default 'key'
-     * @description 可以是字符串（字段名）或函数（自定义获取逻辑）
-     * @example
-     * // 字符串形式
-     * rowKey="id"
-     *
-     * // 函数形式
-     * rowKey={(record, index) => `${record.type}-${index}`}
-     */
-    rowKey?: string | ((record: T, index: number) => string);
-    /**
-     * 当前激活的 Tab key
-     * @description 受控模式，需配合 onChange 使用
-     */
-    value?: string;
-    /**
-     * 默认激活的 Tab key
-     * @description 非受控模式，仅初始化时生效
-     */
-    defaultValue?: string;
-    /**
-     * Tab 切换时的回调
-     * @param key - 切换到的 Tab key
-     * @param item - 切换到的数据项
-     */
-    onChange?: (key: string, item: T) => void;
-    /**
-     * 自定义 TabItem 渲染
-     * @description 支持两种模式：
-     * 1. 函数模式：(item, index, active) => ReactNode
-     * 2. 插槽模式：直接传入 ReactNode
-     * @example
-     * // 函数模式
-     * renderItem={(item, index, active) => (
-     *   <PisellCards.TabCard
-     *     {...item}
-     *     active={{ value: active }}
-     *   />
-     * )}
-     *
-     * // 插槽模式
-     * renderItem={<PisellCards.TabCard />}
-     */
-    renderItem?: ((props: RenderItemProps<T>) => ReactNode) | ReactNode;
-    /**
-     * PisellBasicGrid 组件的配置
-     * @description 透传给 PisellBasicGrid 组件的所有 Props
-     * @see PisellBasicGridProps
-     * @example
-     * gridProps={{
-     *   direction: 'horizontal',
-     *   gap: 16,
-     *   wrap: 'wrap',
-     *   columns: 4,
-     * }}
-     */
-    gridProps?: Omit<PisellBasicGridProps<T>, 'dataSource' | 'renderItem' | 'rowKey' | 'children'>;
-    /**
-     * PisellScrollView 组件的配置
-     * @description 透传给 PisellScrollView 组件的所有 Props
-     * @see PisellScrollViewProps
-     * @example
-     * scrollViewProps={{
-     *   overflow: 'x',
-     *   scrollbarStyle: 'thin',
-     *   scrollActionsConfig: { show: true, type: 'lrArrows' },
-     * }}
-     */
-    scrollViewProps?: Omit<PisellScrollViewProps, 'children'>;
-    children?: ReactNode;
-    /**
-     * 左侧插槽
-     */
-    slotLeft?: ReactNode;
-    slotLeftClassName?: string;
-    slotLeftStyle?: CSSProperties;
-    /**
-     * 右侧插槽
-     */
-    slotRight?: ReactNode;
-    slotRightClassName?: string;
-    slotRightStyle?: CSSProperties;
-    /**
-     * 顶部插槽
-     */
-    slotTop?: ReactNode;
-    slotTopClassName?: string;
-    slotTopStyle?: CSSProperties;
-    /**
-     * 底部插槽
-     */
-    slotBottom?: ReactNode;
-    slotBottomClassName?: string;
-    slotBottomStyle?: CSSProperties;
-    __designMode?: boolean;
-}
-/**
- * 数据项基础类型
- * @description 建议数据源中的每一项都包含这些字段
- */
-export interface TabDataItem {
-    /**
-     * 唯一标识
-     * @description 必填，用于区分不同的 TabItem
-     */
-    key: string;
-    /**
-     * 标签文本
-     */
-    label?: string;
-    /**
-     * 图标
-     */
-    icon?: ReactNode;
-    /**
-     * 徽章配置
-     */
-    badge?: {
-        count?: number;
-        dot?: boolean;
-        text?: string;
-    };
-    /**
-     * 子级数据（多级嵌套）
-     * @description 用于多级导航场景，具体渲染逻辑由 Card 组件实现
-     */
-    children?: TabDataItem[];
-    /**
-     * 是否禁用
-     */
-    disabled?: boolean;
-    /**
-     * 其他自定义字段
-     */
-    [key: string]: any;
-}

package/lib/components/PisellTabbar/PisellTabbar.d.ts

@@ -1,20 +0,0 @@
-import React from 'react';
-import './PisellTabbar.less';
-import { PisellTabbarProps } from './types';
-/**
- * PisellTabbar - 多层级 Tabbar 组件
- *
- * 支持最多 3 层级的 Tab 导航，每层级可独立展开/收起
- *
- * @component
- * @example
- * ```tsx
- * <PisellTabbar
- *   dataSource={categoryData}
- *   value={[1, 10, 100]}
- *   onChange={(value) => console.log('当前选中:', value)}
- * />
- * ```
- */
-declare const PisellTabbar: React.FC<PisellTabbarProps>;
-export default PisellTabbar;

package/lib/components/PisellTabbar/constants.d.ts

@@ -1,47 +0,0 @@
-import { TabbarLevelConfig, ExpandConfig, LevelType } from './types';
-/**
- * 默认层级配置
- */
-export declare const DEFAULT_LEVEL_CONFIG: Record<LevelType, TabbarLevelConfig>;
-/**
- * 获取展开配置
- */
-export declare const getExpandConfig: () => ExpandConfig;
-/**
- * 默认数据项配置
- */
-export declare const DEFAULT_ITEMS: {
-    all: {
-        id: string;
-        shop_id: number;
-        parent_id: number;
-        name: any;
-        slug: string;
-        icon: string;
-    };
-    search: {
-        id: string;
-        shop_id: number;
-        parent_id: number;
-        name: any;
-        text: any;
-        slug: string;
-        key: string;
-        icon: string;
-        customClick: boolean;
-    };
-    expand: {
-        id: string;
-        shop_id: number;
-        parent_id: number;
-        key: string;
-        icon: string;
-        name: string;
-        slug: string;
-        customClick: boolean;
-    };
-};
-/**
- * 获取层级对应的添加项配置
- */
-export declare const LEVEL_ADD_ITEMS: Record<LevelType, ('all' | 'search' | 'expand')[]>;

package/lib/components/PisellTabbar/hooks/index.d.ts

@@ -1,2 +0,0 @@
-export { default as useActiveKey } from './useActiveKey';
-export { default as useExpand } from './useExpand';

package/lib/components/PisellTabbar/hooks/useActiveKey.d.ts

@@ -1,55 +0,0 @@
-/**
- * useActiveKey Hook 参数
- */
-interface UseActiveKeyProps {
-    /** 初始激活的 key 数组（对应多层级） */
-    initialActiveKey?: (string | number)[];
-    /** key 变化回调 */
-    onChange?: (value: (string | number)[]) => void;
-}
-/**
- * useActiveKey Hook 返回值
- */
-interface UseActiveKeyReturn {
-    /** 当前激活的 key 数组 */
-    activeKey: (string | number)[];
-    /** 设置指定层级的激活 key */
-    setActiveKey: (level: number, key: string | number, cKey?: string | number) => void;
-    /** 获取指定层级的激活 key */
-    getActiveKey: (level: number) => string | number;
-    /** 内部设置方法（用于同步外部值） */
-    _setActiveKey: (value: (string | number)[]) => void;
-    /** 设置缓存key */
-    setCacheActiveKey: (val: (string | number)[]) => void;
-    /** 重置value为缓存key */
-    resetActiveKey: () => void;
-    /** 获取缓存key */
-    getCacheActiveKey: () => (string | number)[];
-}
-/**
- * Tabbar 激活状态管理 Hook
- *
- * 用于管理多层级 Tabbar 的激活状态，支持级联选择
- *
- * @param props - Hook 配置参数
- * @returns 激活状态和操作方法
- *
- * @example
- * ```tsx
- * const { activeKey, setActiveKey, getActiveKey } = useActiveKey({
- *   initialActiveKey: [1, 10],
- *   onChange: (value) => console.log('当前选中:', value)
- * });
- *
- * // 设置第 0 层级的 key，并清除后续层级
- * setActiveKey(0, '2');
- *
- * // 设置第 0 层级的 key，并同时设置第 1 层级
- * setActiveKey(0, '2', '20');
- *
- * // 获取第 0 层级的 key
- * const level0Key = getActiveKey(0);
- * ```
- */
-declare const useActiveKey: (props: UseActiveKeyProps) => UseActiveKeyReturn;
-export default useActiveKey;