@pisell/materials 3.3.83 → 3.3.85

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

@@ -0,0 +1,270 @@
+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/es/components/PisellProcedure/PisellProcedure.stories.d.ts

@@ -0,0 +1,163 @@
+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/es/components/PisellProcedure/index.d.ts

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

package/es/components/PisellTabbar/locales.js

@@ -10,5 +10,13 @@ export default {
   "zh-HK": {
     expand: '展開',
     minimize: '摺疊'
+  },
+  ja: {
+    expand: '展開',
+    minimize: '折りたたむ'
+  },
+  pt: {
+    expand: 'Expandir',
+    minimize: 'Minimizar'
   }
 };

package/es/components/PisellTabbar2/locales.js

@@ -10,5 +10,13 @@ export default {
   "zh-HK": {
     expand: '展開',
     minimize: '摺疊'
+  },
+  ja: {
+    expand: '展開',
+    minimize: '折りたたむ'
+  },
+  pt: {
+    expand: 'Expandir',
+    minimize: 'Minimizar'
   }
 };

package/es/components/PisellTabbar3/locales.js

@@ -10,5 +10,13 @@ export default {
   "zh-HK": {
     expand: '展開',
     minimize: '摺疊'
+  },
+  ja: {
+    expand: '展開',
+    minimize: '折りたたむ'
+  },
+  pt: {
+    expand: 'Expandir',
+    minimize: 'Minimizar'
   }
 };

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import './index.less';
+export interface TimeSlot {
+    value: string;
+    label: string;
+    time: string;
+    remainingCount: number;
+    disabled?: boolean;
+}
+export interface TimeResourceSelectorProps {
+    timeSlots?: TimeSlot[];
+    multiple?: boolean;
+    showUnavailable?: boolean;
+    defaultExpanded?: boolean;
+    defaultSelectFirst?: boolean;
+    onChange?: (values: string | string[]) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const TimeResourceSelector: React.FC<TimeResourceSelectorProps>;
+export default TimeResourceSelector;

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

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export interface Version {
+    id: string;
+    label: string;
+    value: string;
+    name: string;
+    status: 'live' | 'draft' | 'deprecated';
+    version: string;
+    avatar?: string;
+}
+export interface AppVersionControlProps {
+    value: string;
+    versions: Version[];
+    onVersionChange: (value: string, version: Version) => void;
+    onCreateVersion: (detail: {
+        version: string;
+        baseVersion: string;
+    }) => Promise<boolean | undefined>;
+    onPromoteToLive: (value: string, version: Version) => Promise<boolean | undefined>;
+    allowPublish?: boolean;
+    allowCreate?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}

package/es/components/appVersionControl/utils.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 比较两个版本号
+ * @param version1 版本号1
+ * @param version2 版本号2
+ * @returns 如果version1大于version2返回1，相等返回0，小于返回-1
+ */
+export declare const compareVersions: (version1: string, version2: string) => number;
+/**
+ * 从版本号列表中获取最大版本号
+ * @param versions 版本号列表
+ * @returns 最大的版本号，如果列表为空返回undefined
+ */
+export declare const getMaxVersion: (versions: string[]) => string | undefined;

package/es/components/auto-resize-text/auto-text-size-standalone.d.ts

@@ -0,0 +1,20 @@
+export declare type Options = {
+    mode?: 'oneline' | 'multiline' | 'box' | 'boxoneline' | undefined;
+    minFontSizePx?: number | undefined;
+    maxFontSizePx?: number | undefined;
+    fontSizePrecisionPx?: number | undefined;
+    scrollToEnd?: boolean | undefined;
+};
+export declare function updateTextSize({ innerEl, containerEl, mode, minFontSizePx, maxFontSizePx, fontSizePrecisionPx, scrollToEnd, }: Options & {
+    innerEl: HTMLElement;
+    containerEl: HTMLElement;
+}): void;
+declare type DisconnectableFunction = {
+    (): void;
+    disconnect: () => void;
+};
+export declare function autoTextSize({ innerEl, containerEl, mode, minFontSizePx, maxFontSizePx, fontSizePrecisionPx, scrollToEnd, }: Options & {
+    innerEl: HTMLElement;
+    containerEl: HTMLElement;
+}): DisconnectableFunction;
+export {};

package/es/components/auto-resize-text/index.d.ts

@@ -0,0 +1,6 @@
+import React, { DetailedHTMLProps, HTMLAttributes, ReactElement, ReactHTML } from 'react';
+import { Options } from './auto-text-size-standalone';
+export default function AutoResizeText({ mode, minFontSizePx, maxFontSizePx, fontSizePrecisionPx, scrollToEnd, as: Comp, children, ...rest }: Options & {
+    as?: keyof ReactHTML | React.ComponentType<any>;
+    children?: React.ReactNode;
+} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>): ReactElement;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BadgeProps as OriginalBadgeprops } from 'antd';
+import './index.less';
+export interface Badgeprops extends OriginalBadgeprops {
+    styleType: 'default' | 'warning';
+}
+declare const Badge: (props: any) => React.JSX.Element;
+export default Badge;

package/es/components/batch-editor/fields/Image/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface ImageProps extends React.ComponentPropsWithoutRef<"img"> {
+    value?: string;
+}
+import "./index.less";
+declare const Image: (props: ImageProps) => React.JSX.Element | null;
+export default Image;

package/es/components/batch-editor/fields/Price/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { InputNumberProps } from "antd";
+export interface PriceProps extends InputNumberProps {
+    symbol: string;
+}
+declare const Price: React.FC<PriceProps>;
+export default Price;

package/es/components/batch-editor/fields/Text/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface TextProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+declare const Text: (props: TextProps) => React.JSX.Element;
+export default Text;

package/es/components/batch-editor/fields/index.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    price: import("react").FC<import("./Price").PriceProps>;
+    image: (props: import("./Image").ImageProps) => import("react").JSX.Element | null;
+    text: (props: import("./Text").TextProps) => import("react").JSX.Element;
+};
+export default _default;

package/es/components/batch-editor/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import "./index.less";
+interface BatchEditorProps {
+    columns: any[];
+    dataSource: any[];
+    onChange: (value: any) => void;
+    rowKey: string;
+    otherTableProps: any;
+}
+declare const BatchEditor: (props: BatchEditorProps) => React.JSX.Element;
+export default BatchEditor;

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

@@ -0,0 +1,21 @@
+import React from "react";
+import "./index.less";
+interface Option {
+    label: React.ReactNode;
+    value: string | number;
+}
+interface BrowserSelectProps extends Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, 'value' | 'onChange'> {
+    options: Option[];
+    value?: string | number;
+    onChange?: (value: string | number, option: Option) => void;
+}
+/**
+ * @title: 系统级别的下拉框
+ * @description:
+ * @param {BrowserSelectProps} props
+ * @return {*}
+ * @Author: zhiwei.Wang
+ * @Date: 2024-01-30 16:43
+ */
+declare const BrowserSelect: (props: BrowserSelectProps) => React.JSX.Element;
+export default BrowserSelect;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ButtonProps as OriginalButtonProps } from 'antd';
+export interface ButtonProps extends OriginalButtonProps {
+    __designMode?: 'design' | undefined;
+    href?: string;
+    rightIcon?: React.ReactNode;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<any>>;
+export default Button;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { MenuProps, ButtonProps } from 'antd';
+export interface ButtonGroupListItemProps {
+    id?: string;
+    isMore?: boolean;
+    menuData?: MenuProps['items'];
+    buttonProps?: ButtonProps;
+}
+interface ButtonConfigProps {
+    [id: string]: ButtonGroupListItemProps;
+}
+export declare type ButtonGroupListProps = ButtonGroupListItemProps[][];
+interface ButtonGroupPreviewProps {
+    buttonConfig?: ButtonConfigProps;
+    buttonGroupList?: ButtonGroupListProps;
+    updateButtonProps?: ButtonGroupListItemProps;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ButtonGroupPreviewProps & React.RefAttributes<any>>>;
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const Checkbox: (props: any) => import("react").JSX.Element;
+export default Checkbox;