@pisell/materials 1.0.967 → 1.0.969

package/lib/components/PisellProcedure/components/ProcedureSummary.js

@@ -0,0 +1,96 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellProcedure/components/ProcedureSummary.tsx
+var ProcedureSummary_exports = {};
+__export(ProcedureSummary_exports, {
+  default: () => ProcedureSummary_default
+});
+module.exports = __toCommonJS(ProcedureSummary_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_classnames = __toESM(require("classnames"));
+var ProcedureSummary = ({
+  current,
+  summaryRender,
+  width,
+  collapsible,
+  defaultCollapsed,
+  onCollapseChange,
+  summaryExtra,
+  className,
+  style,
+  visible = true
+}) => {
+  const [collapsed, setCollapsed] = (0, import_react.useState)(defaultCollapsed);
+  (0, import_react.useEffect)(() => {
+    setCollapsed(defaultCollapsed);
+  }, [defaultCollapsed]);
+  const mergedClassName = (0, import_react.useMemo)(() => {
+    return (0, import_classnames.default)(
+      "pisell-procedure-summary",
+      {
+        "pisell-procedure-summary-collapsed": collapsed,
+        "pisell-procedure-summary-collapsible": collapsible
+      },
+      className
+    );
+  }, [collapsed, collapsible, className]);
+  const mergedStyle = (0, import_react.useMemo)(() => {
+    const baseStyle = {
+      ...style
+    };
+    if (width) {
+      baseStyle.width = typeof width === "number" ? `${width}px` : width;
+    }
+    if (!visible) {
+      baseStyle.display = "none";
+    }
+    return baseStyle;
+  }, [style, width, visible]);
+  const handleToggleCollapse = (0, import_react.useCallback)(() => {
+    const newCollapsed = !collapsed;
+    setCollapsed(newCollapsed);
+    onCollapseChange == null ? void 0 : onCollapseChange(newCollapsed);
+  }, [collapsed, onCollapseChange]);
+  if (!summaryRender) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: mergedClassName, style: mergedStyle }, collapsible && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-summary-header" }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Button,
+    {
+      type: "text",
+      icon: collapsed ? /* @__PURE__ */ import_react.default.createElement(import_icons.DownOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.UpOutlined, null),
+      onClick: handleToggleCollapse,
+      className: "pisell-procedure-summary-toggle"
+    },
+    collapsed ? "展开" : "收起"
+  )), !collapsed && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-summary-content" }, summaryRender(current)), !collapsed && summaryExtra && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-summary-extra" }, summaryExtra));
+};
+var ProcedureSummary_default = ProcedureSummary;

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

@@ -0,0 +1,6 @@
+import type { ResponsiveInfo } from '../types';
+/**
+ * useResponsive Hook
+ * 监听视口宽度变化，返回当前断点信息
+ */
+export declare const useResponsive: () => ResponsiveInfo;

package/lib/components/PisellProcedure/hooks/useResponsive.js

@@ -0,0 +1,63 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellProcedure/hooks/useResponsive.ts
+var useResponsive_exports = {};
+__export(useResponsive_exports, {
+  useResponsive: () => useResponsive
+});
+module.exports = __toCommonJS(useResponsive_exports);
+var import_react = require("react");
+var BREAKPOINTS = {
+  xs: 430,
+  sm: 744,
+  md: 960,
+  lg: 1133,
+  xl: 1366
+};
+var useResponsive = () => {
+  const [responsive, setResponsive] = (0, import_react.useState)({
+    xs: false,
+    sm: false,
+    md: false,
+    lg: false,
+    xl: false
+  });
+  (0, import_react.useEffect)(() => {
+    const handleResize = () => {
+      const width = window.innerWidth;
+      setResponsive({
+        xs: width < BREAKPOINTS.xs,
+        sm: width < BREAKPOINTS.sm,
+        md: width < BREAKPOINTS.md,
+        lg: width < BREAKPOINTS.lg,
+        xl: width < BREAKPOINTS.xl
+      });
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return responsive;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useResponsive
+});

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

@@ -0,0 +1,4 @@
+import PisellProcedure from './PisellProcedure';
+export { default as PisellProcedure } from './PisellProcedure';
+export type { PisellProcedureProps, ActionItem, LayoutDirection, ActionMode, ActionPosition, HeaderFixed, ProcedureHeaderProps, ProcedureContentProps, ProcedureSummaryProps, ProcedureActionProps, MobileSummaryDrawerProps, ResponsiveInfo, ValidationResult, DataSyncConfig, StepItem, PisellStepsProps, } from './types';
+export default PisellProcedure;

package/lib/components/PisellProcedure/index.js

@@ -0,0 +1,42 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellProcedure/index.tsx
+var PisellProcedure_exports = {};
+__export(PisellProcedure_exports, {
+  PisellProcedure: () => import_PisellProcedure2.default,
+  default: () => PisellProcedure_default
+});
+module.exports = __toCommonJS(PisellProcedure_exports);
+var import_PisellProcedure = __toESM(require("./PisellProcedure"));
+var import_PisellProcedure2 = __toESM(require("./PisellProcedure"));
+var PisellProcedure_default = import_PisellProcedure.default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellProcedure
+});

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

@@ -0,0 +1,303 @@
+import React from 'react';
+import type { ButtonProps } from 'antd';
+import type { PisellStepsProps, StepItem } from '../PisellSteps/types';
+/**
+ * 布局方向类型
+ */
+export declare type LayoutDirection = 'vertical' | 'horizontal';
+/**
+ * 操作区定位模式
+ */
+export declare type ActionMode = 'fixed' | 'embedded' | 'float';
+/**
+ * 操作区定位位置
+ */
+export declare type ActionPosition = 'bottom' | 'content' | 'summary';
+/**
+ * 头部固定模式
+ */
+export declare type HeaderFixed = boolean | 'scroll';
+/**
+ * 操作按钮配置项
+ */
+export interface ActionItem {
+    /** 唯一标识 */
+    key: string;
+    /** 按钮文本 */
+    label: React.ReactNode;
+    /** 按钮类型 */
+    type?: 'primary' | 'default' | 'dashed' | 'link' | 'text';
+    /** 点击回调 */
+    onClick?: () => void | Promise<void>;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否加载中 */
+    loading?: boolean;
+    /** 按钮图标 */
+    icon?: React.ReactNode;
+    /** 排序权重（越小越靠前） */
+    order?: number;
+    /** 是否隐藏 */
+    hidden?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 其他按钮属性 */
+    [key: string]: any;
+}
+/**
+ * PisellProcedure 组件属性
+ */
+export interface PisellProcedureProps {
+    /** 当前步骤索引（从 0 开始） */
+    current?: number;
+    /** 步骤配置数组（传递给 PisellSteps 组件） */
+    steps: StepItem[];
+    /** 步骤改变时的回调 */
+    onStepChange?: (current: number) => void | Promise<void>;
+    /** 点击关闭按钮的回调 */
+    onClose?: () => void;
+    /** 点击上一步按钮的回调 */
+    onPrev?: () => void;
+    /** 内容区渲染函数 */
+    contentRender: (current: number) => React.ReactNode;
+    /** 信息总结区渲染函数 */
+    summaryRender?: (current: number) => React.ReactNode;
+    /** 操作按钮配置数组 */
+    actions?: ActionItem[];
+    /** 整体布局方向 */
+    layout?: LayoutDirection;
+    /** 主体区域布局方向 */
+    bodyLayout?: LayoutDirection;
+    /** 内容区宽度（百分比或固定值） */
+    contentWidth?: string | number;
+    /** 信息总结区宽度（固定值） */
+    summaryWidth?: string | number;
+    /** 是否显示头部区域 */
+    showHeader?: boolean;
+    /** 是否显示信息总结区 */
+    showSummary?: boolean;
+    /** 是否显示操作区 */
+    showAction?: boolean;
+    /** 是否显示上一步按钮 */
+    showPrevButton?: boolean;
+    /** 是否显示关闭按钮 */
+    showCloseButton?: boolean;
+    /** 头部区域是否固定定位 */
+    headerFixed?: HeaderFixed;
+    /** 操作区定位模式 */
+    actionMode?: ActionMode;
+    /** 操作区定位位置 */
+    actionPosition?: ActionPosition;
+    /** 信息总结区是否可折叠 */
+    summaryCollapsible?: boolean;
+    /** 信息总结区默认是否折叠 */
+    summaryDefaultCollapsed?: boolean;
+    /** 步骤切换前是否自动验证 */
+    validateOnStepChange?: boolean;
+    /** 步骤验证函数 */
+    onValidate?: (current: number) => boolean | Promise<boolean>;
+    /** 返回上一步是否清除当前步骤数据 */
+    clearOnBack?: boolean;
+    /** 数据改变影响当前步骤时是否弹窗确认 */
+    confirmOnDataChange?: boolean;
+    /** 头部区域自定义类名 */
+    headerClassName?: string;
+    /** 头部区域自定义样式 */
+    headerStyle?: React.CSSProperties;
+    /** 内容区自定义类名 */
+    contentClassName?: string;
+    /** 内容区自定义样式 */
+    contentStyle?: React.CSSProperties;
+    /** 信息总结区自定义类名 */
+    summaryClassName?: string;
+    /** 信息总结区自定义样式 */
+    summaryStyle?: React.CSSProperties;
+    /** 操作区自定义类名 */
+    actionClassName?: string;
+    /** 操作区自定义样式 */
+    actionStyle?: React.CSSProperties;
+    /** 组件根节点自定义类名 */
+    className?: string;
+    /** 组件根节点自定义样式 */
+    style?: React.CSSProperties;
+    /** 头部区域额外内容插槽 */
+    headerExtra?: React.ReactNode;
+    /** 信息总结区额外内容插槽 */
+    summaryExtra?: React.ReactNode;
+    /** 操作区额外内容插槽 */
+    actionExtra?: React.ReactNode;
+    /** 传递给 PisellSteps 组件的额外属性 */
+    stepsProps?: Partial<PisellStepsProps>;
+    /** 上一步按钮的属性 */
+    prevButtonProps?: ButtonProps;
+    /** 关闭按钮的属性 */
+    closeButtonProps?: ButtonProps;
+    /** 是否显示加载状态 */
+    loading?: boolean;
+    /** 是否禁用所有操作 */
+    disabled?: boolean;
+}
+/**
+ * ProcedureHeader 组件属性（内部子组件）
+ */
+export interface ProcedureHeaderProps {
+    /** 当前步骤索引 */
+    current: number;
+    /** 步骤配置数组 */
+    steps: StepItem[];
+    /** 传递给 PisellSteps 的额外属性 */
+    stepsProps?: Partial<PisellStepsProps>;
+    /** 是否显示上一步按钮 */
+    showPrevButton: boolean;
+    /** 是否显示关闭按钮 */
+    showCloseButton: boolean;
+    /** 点击上一步的回调 */
+    onPrev?: () => void;
+    /** 点击关闭的回调 */
+    onClose?: () => void;
+    /** 点击步骤的回调 */
+    onStepClick?: (index: number) => void;
+    /** 额外内容插槽 */
+    headerExtra?: React.ReactNode;
+    /** 上一步按钮属性 */
+    prevButtonProps?: ButtonProps;
+    /** 关闭按钮属性 */
+    closeButtonProps?: ButtonProps;
+    /** 是否固定定位 */
+    fixed?: HeaderFixed;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 是否禁用 */
+    disabled?: boolean;
+}
+/**
+ * ProcedureContent 组件属性（内部子组件）
+ */
+export interface ProcedureContentProps {
+    /** 当前步骤索引 */
+    current: number;
+    /** 内容渲染函数 */
+    contentRender: (current: number) => React.ReactNode;
+    /** 宽度 */
+    width?: string | number;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 是否加载中 */
+    loading?: boolean;
+}
+/**
+ * ProcedureSummary 组件属性（内部子组件）
+ */
+export interface ProcedureSummaryProps {
+    /** 当前步骤索引 */
+    current: number;
+    /** 信息总结区渲染函数 */
+    summaryRender?: (current: number) => React.ReactNode;
+    /** 宽度 */
+    width?: string | number;
+    /** 是否可折叠 */
+    collapsible?: boolean;
+    /** 默认是否折叠 */
+    defaultCollapsed?: boolean;
+    /** 折叠状态改变的回调 */
+    onCollapseChange?: (collapsed: boolean) => void;
+    /** 额外内容插槽 */
+    summaryExtra?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 是否显示 */
+    visible?: boolean;
+}
+/**
+ * ProcedureAction 组件属性（内部子组件）
+ */
+export interface ProcedureActionProps {
+    /** 操作按钮配置数组 */
+    actions: ActionItem[];
+    /** 定位模式 */
+    mode?: ActionMode;
+    /** 定位位置 */
+    position?: ActionPosition;
+    /** 额外内容插槽 */
+    actionExtra?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 是否禁用所有按钮 */
+    disabled?: boolean;
+    /** 是否加载中 */
+    loading?: boolean;
+}
+/**
+ * MobileSummaryDrawer 组件属性（内部子组件）
+ */
+export interface MobileSummaryDrawerProps {
+    /** 当前步骤索引 */
+    current: number;
+    /** 信息总结区渲染函数 */
+    summaryRender?: (current: number) => React.ReactNode;
+    /** 是否可见 */
+    visible: boolean;
+    /** 可见状态改变的回调 */
+    onVisibleChange: (visible: boolean) => void;
+    /** 额外内容插槽 */
+    summaryExtra?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+/**
+ * 响应式信息类型
+ */
+export interface ResponsiveInfo {
+    /** < 430px */
+    xs: boolean;
+    /** < 744px */
+    sm: boolean;
+    /** < 960px */
+    md: boolean;
+    /** < 1133px */
+    lg: boolean;
+    /** < 1366px */
+    xl: boolean;
+}
+/**
+ * 步骤验证结果
+ */
+export interface ValidationResult {
+    /** 是否验证通过 */
+    valid: boolean;
+    /** 错误信息 */
+    message?: string;
+    /** 错误字段 */
+    errors?: Record<string, string>;
+}
+/**
+ * 数据同步配置
+ */
+export interface DataSyncConfig {
+    /** 是否需要确认 */
+    needConfirm: boolean;
+    /** 确认标题 */
+    confirmTitle?: string;
+    /** 确认内容 */
+    confirmContent?: string;
+    /** 确认按钮文本 */
+    confirmOkText?: string;
+    /** 取消按钮文本 */
+    confirmCancelText?: string;
+}
+/**
+ * 导出所有类型
+ */
+export type { StepItem, PisellStepsProps, } from '../PisellSteps/types';

package/lib/components/PisellProcedure/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellProcedure/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { PisellStepsProps } from './types';
+import './PisellSteps.less';
+/**
+ * PisellSteps 步骤条组件
+ * 基于 Ant Design Steps 进行二次封装，提供更强大的功能和更灵活的样式定制
+ *
+ * @example
+ * ```tsx
+ * <PisellSteps
+ *   current={1}
+ *   items={[
+ *     { title: 'Finished', description: 'This is a description.' },
+ *     { title: 'In Progress', description: 'This is a description.' },
+ *     { title: 'Waiting', description: 'This is a description.' },
+ *   ]}
+ *   onChange={(current) => console.log('Step changed to:', current)}
+ * />
+ * ```
+ */
+declare const PisellSteps: React.FC<PisellStepsProps>;
+export default PisellSteps;