@pisell/materials 6.11.14 → 6.11.15

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

@@ -0,0 +1,257 @@
+import type { StepsProps, StepProps } from 'antd';
+import type { CSSProperties, ReactNode } from 'react';
+import type { ScrollActionsConfig } from '../PisellScrollView/types';
+/**
+ * 步骤状态类型
+ */
+export declare type StepStatus = 'wait' | 'process' | 'finish' | 'error';
+/**
+ * 步骤条方向
+ */
+export declare type StepDirection = 'horizontal' | 'vertical';
+/**
+ * 步骤条尺寸
+ */
+export declare type StepSize = 'small' | 'default' | 'large';
+/**
+ * 标签放置位置
+ */
+export declare type StepLabelPlacement = 'horizontal' | 'vertical';
+/**
+ * 单个步骤项配置
+ */
+export interface PisellStepItem extends Omit<StepProps, 'status' | 'onClick'> {
+    /**
+     * 步骤标题
+     */
+    title?: ReactNode;
+    /**
+     * 步骤副标题
+     */
+    subTitle?: ReactNode;
+    /**
+     * 步骤描述
+     */
+    description?: ReactNode;
+    /**
+     * 步骤状态
+     * @default 'wait'
+     */
+    status?: StepStatus;
+    /**
+     * 步骤图标
+     */
+    icon?: ReactNode;
+    /**
+     * 是否禁用点击
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 是否隐藏该步骤（用于动态步骤）
+     * @default false
+     */
+    hidden?: boolean;
+    /**
+     * 步骤点击回调
+     */
+    onClick?: () => void;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * 额外的数据（可用于业务扩展）
+     */
+    extra?: Record<string, any>;
+}
+/**
+ * PisellSteps 组件 Props
+ */
+export interface PisellStepsProps extends Omit<StepsProps, 'items' | 'onChange' | 'current' | 'status' | 'size' | 'direction'> {
+    /**
+     * 步骤条类型（直接使用 antd 的 type）
+     * @description 'default' - 默认样式，'navigation' - 导航样式
+     * @description dot 模式通过 progressDot 属性来控制，不需要单独的 type
+     * @default 'default'
+     */
+    type?: StepsProps['type'];
+    /**
+     * 当前步骤（受控模式）
+     */
+    current?: number;
+    /**
+     * 默认当前步骤（非受控模式）
+     * @default 0
+     */
+    defaultCurrent?: number;
+    /**
+     * 步骤条方向
+     * @default 'horizontal'
+     */
+    direction?: StepDirection;
+    /**
+     * 步骤条尺寸
+     * @default 'default'
+     */
+    size?: StepSize;
+    /**
+     * 当前步骤的状态
+     * @default 'process'
+     */
+    status?: StepStatus;
+    /**
+     * 起始步骤索引
+     * @default 0
+     */
+    initial?: number;
+    /**
+     * 步骤数据配置
+     */
+    items?: PisellStepItem[];
+    /**
+     * 标签文本位置（标识区和文本区的布局方式）
+     * @description 'horizontal' - 文本在图标右侧（水平布局），'vertical' - 文本在图标下方（垂直布局）
+     * @description 仅在 direction='horizontal' 时生效
+     * @default 'horizontal'
+     */
+    labelPlacement?: StepLabelPlacement;
+    /**
+     * 是否开启响应式
+     * @default true
+     */
+    responsive?: boolean;
+    /**
+     * 步骤变更回调
+     */
+    onChange?: (current: number) => void;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * 点状步骤条是否显示点（也可以传入自定义渲染函数）
+     * @default false
+     */
+    progressDot?: boolean | ((dot: ReactNode, info: {
+        index: number;
+        status: StepStatus;
+        title?: ReactNode;
+        description?: ReactNode;
+    }) => ReactNode);
+    /**
+     * 是否允许点击步骤切换
+     * @default false
+     */
+    clickable?: boolean;
+    /**
+     * 是否允许点击已完成的步骤
+     * @default true
+     */
+    allowClickFinished?: boolean;
+    /**
+     * 是否开启栅格布局
+     * @default false
+     */
+    gridLayout?: boolean;
+    /**
+     * 栅格列数（仅在 gridLayout=true 时有效）
+     */
+    gridColumns?: number;
+    /**
+     * 标识区和文本区的间距（单位：px）
+     * @description 控制图标和文本之间的间距
+     */
+    itemGap?: number;
+    /**
+     * 是否开启锚链接
+     * @default false
+     */
+    enableAnchor?: boolean;
+    /**
+     * 锚链接容器选择器（仅在 enableAnchor=true 时有效）
+     */
+    anchorContainer?: string | HTMLElement;
+    /**
+     * 移动端显示模式
+     * - 'full': 显示完整步骤条（默认）
+     * - 'current': 只显示当前步骤信息
+     * - 'auto': 自动根据屏幕宽度切换（<744px 时显示当前步骤）
+     * @default 'full'
+     */
+    mobileMode?: 'full' | 'current' | 'auto';
+    /**
+     * 移动端断点宽度（单位：px）
+     * @default 744
+     */
+    mobileBreakpoint?: number;
+    /**
+     * 是否启用横向滚动模式
+     * @description 当步骤条宽度不足时，启用横向滚动并显示左右箭头按钮
+     * @default false
+     */
+    enableScrollMode?: boolean;
+    /**
+     * 滚动箭头配置
+     * @description 配置滚动箭头的显示类型和滚动距离
+     */
+    scrollActionsConfig?: ScrollActionsConfig;
+    /**
+     * 设计模式标识（低代码引擎使用）
+     */
+    __designMode?: 'design' | 'preview';
+    /**
+     * 组件唯一标识（低代码引擎使用）
+     */
+    __id?: string;
+    /**
+     * 其他扩展配置
+     */
+    other?: Record<string, any>;
+}
+/**
+ * 步骤点击事件参数
+ */
+export interface StepClickInfo {
+    /**
+     * 步骤索引
+     */
+    index: number;
+    /**
+     * 步骤配置
+     */
+    item: PisellStepItem;
+    /**
+     * 步骤状态
+     */
+    status: StepStatus;
+    /**
+     * 是否可点击
+     */
+    clickable: boolean;
+}
+/**
+ * 步骤变更事件参数
+ */
+export interface StepChangeInfo {
+    /**
+     * 当前步骤索引
+     */
+    current: number;
+    /**
+     * 上一个步骤索引
+     */
+    previous: number;
+    /**
+     * 步骤变更方向
+     */
+    direction: 'forward' | 'backward';
+}

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

@@ -0,0 +1,54 @@
+import type { StepStatus } from '../types';
+/**
+ * 计算当前步骤的进度百分比
+ *
+ * @param current - 当前步骤索引
+ * @param total - 总步骤数
+ * @returns 进度百分比（0-100）
+ */
+export declare function calculateProgress(current: number, total: number): number;
+/**
+ * 判断步骤是否可点击
+ *
+ * @param index - 步骤索引
+ * @param current - 当前步骤索引
+ * @param status - 步骤状态
+ * @param clickable - 全局是否可点击
+ * @param allowClickFinished - 是否允许点击已完成步骤
+ * @returns 是否可点击
+ */
+export declare function isStepClickable(index: number, current: number, status: StepStatus, clickable: boolean, allowClickFinished: boolean): boolean;
+/**
+ * 获取步骤状态
+ *
+ * @param index - 步骤索引
+ * @param current - 当前步骤索引
+ * @param customStatus - 自定义状态（优先级最高）
+ * @returns 步骤状态
+ */
+export declare function getStepStatus(index: number, current: number, customStatus?: StepStatus): StepStatus;
+/**
+ * 合并步骤类名
+ *
+ * @param baseClass - 基础类名
+ * @param status - 步骤状态
+ * @param customClass - 自定义类名
+ * @returns 合并后的类名
+ */
+export declare function mergeStepClassName(baseClass: string, status: StepStatus, customClass?: string): string;
+/**
+ * 判断步骤变更方向
+ *
+ * @param from - 原步骤索引
+ * @param to - 目标步骤索引
+ * @returns 变更方向
+ */
+export declare function getChangeDirection(from: number, to: number): 'forward' | 'backward';
+/**
+ * 验证步骤索引是否有效
+ *
+ * @param index - 步骤索引
+ * @param total - 总步骤数
+ * @returns 是否有效
+ */
+export declare function isValidStepIndex(index: number, total: number): boolean;

package/es/components/PisellSuperTabs/utils/getRowKey.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 获取数据项的唯一标识
+ * @param record - 数据项
+ * @param index - 索引
+ * @param rowKey - key 字段配置
+ * @returns 唯一标识字符串
+ */
+export declare const getRowKey: <T = any>(record: T, index: number, rowKey?: string | ((record: T, index: number) => string) | undefined) => string;

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

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

package/es/components/PisellTabbar/locales.d.ts

@@ -0,0 +1,23 @@
+declare const _default: {
+    en: {
+        expand: string;
+        minimize: string;
+    };
+    "zh-CN": {
+        expand: string;
+        minimize: string;
+    };
+    "zh-HK": {
+        expand: string;
+        minimize: string;
+    };
+    ja: {
+        expand: string;
+        minimize: string;
+    };
+    pt: {
+        expand: string;
+        minimize: string;
+    };
+};
+export default _default;

package/es/components/PisellTabbar/mock.d.ts

@@ -0,0 +1,47 @@
+declare const _default: {
+    id: number;
+    shop_id: number;
+    parent_id: number;
+    name: string;
+    slug: string;
+    icon: string;
+    status: string;
+    last_applicable_time: number;
+    sort: number;
+    create_account_id: number;
+    update_account_id: number;
+    created_at: string;
+    updated_at: string;
+    children: {
+        id: number;
+        shop_id: number;
+        parent_id: number;
+        name: string;
+        slug: string;
+        icon: string;
+        status: string;
+        last_applicable_time: number;
+        sort: number;
+        create_account_id: number;
+        update_account_id: number;
+        created_at: string;
+        updated_at: string;
+        children: {
+            id: number;
+            shop_id: number;
+            parent_id: number;
+            name: string;
+            slug: string;
+            icon: string;
+            status: string;
+            last_applicable_time: number;
+            sort: number;
+            create_account_id: number;
+            update_account_id: number;
+            created_at: string;
+            updated_at: string;
+            children: never[];
+        }[];
+    }[];
+}[];
+export default _default;

package/es/components/PisellTabbar2/constants.d.ts

@@ -0,0 +1,46 @@
+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: number;
+        shop_id: number;
+        parent_id: number;
+        name: string;
+        slug: string;
+        icon: string;
+    };
+    search: {
+        id: number;
+        shop_id: number;
+        parent_id: number;
+        name: string;
+        slug: string;
+        key: string;
+        icon: string;
+        customClick: boolean;
+    };
+    expand: {
+        id: number;
+        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/es/components/PisellTabbar2/hooks/index.d.ts

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

package/es/components/PisellTabbar2/hooks/useActiveKey.d.ts

@@ -0,0 +1,50 @@
+/**
+ * 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;
+    panelVisible: boolean;
+}
+/**
+ * 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;

package/es/components/PisellTabbar2/hooks/useExpand.d.ts

@@ -0,0 +1,41 @@
+import { ExpandState, LevelType } from '../types';
+/**
+ * useExpand Hook 参数
+ */
+interface UseExpandProps {
+    /** 初始展开状态 */
+    initialExpand?: Partial<ExpandState>;
+}
+/**
+ * useExpand Hook 返回值
+ */
+interface UseExpandReturn {
+    /** 展开状态 */
+    expand: ExpandState;
+    /** 设置展开状态 */
+    setExpand: (state: ExpandState) => void;
+    /** 切换指定层级的展开状态 */
+    toggleExpand: (level: LevelType) => void;
+    /** 获取指定层级的展开状态 */
+    getExpand: (level: LevelType) => boolean;
+}
+/**
+ * Tabbar 展开状态管理 Hook
+ * 用于管理多层级的展开/收起状态
+ *
+ * @param props - Hook 配置参数
+ * @returns 展开状态和操作方法
+ *
+ * @example
+ * ```tsx
+ * const { expand, toggleExpand, getExpand } = useExpand({
+ *   initialExpand: { level1: false }
+ * });
+ *
+ * <button onClick={() => toggleExpand('level1')}>
+ *   {getExpand('level1') ? '收起' : '展开'}
+ * </button>
+ * ```
+ */
+declare const useExpand: (props?: UseExpandProps) => UseExpandReturn;
+export default useExpand;

package/es/components/PisellTabbar2/locales.d.ts

@@ -0,0 +1,23 @@
+declare const _default: {
+    en: {
+        expand: string;
+        minimize: string;
+    };
+    "zh-CN": {
+        expand: string;
+        minimize: string;
+    };
+    "zh-HK": {
+        expand: string;
+        minimize: string;
+    };
+    ja: {
+        expand: string;
+        minimize: string;
+    };
+    pt: {
+        expand: string;
+        minimize: string;
+    };
+};
+export default _default;