@pisell/materials 1.0.977 → 1.0.979

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

@@ -0,0 +1,4 @@
+export { useStepsState } from './useStepsState';
+export { useStepClick } from './useStepClick';
+export { useAnchor } from './useAnchor';
+export { useResponsive } from './useResponsive';

package/lib/components/PisellSteps/hooks/index.js

@@ -0,0 +1,38 @@
+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/PisellSteps/hooks/index.ts
+var hooks_exports = {};
+__export(hooks_exports, {
+  useAnchor: () => import_useAnchor.useAnchor,
+  useResponsive: () => import_useResponsive.useResponsive,
+  useStepClick: () => import_useStepClick.useStepClick,
+  useStepsState: () => import_useStepsState.useStepsState
+});
+module.exports = __toCommonJS(hooks_exports);
+var import_useStepsState = require("./useStepsState");
+var import_useStepClick = require("./useStepClick");
+var import_useAnchor = require("./useAnchor");
+var import_useResponsive = require("./useResponsive");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useAnchor,
+  useResponsive,
+  useStepClick,
+  useStepsState
+});

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

@@ -0,0 +1,9 @@
+/**
+ * 锚链接功能 Hook
+ * 当开启锚链接时，自动滚动到当前步骤对应的锚点
+ *
+ * @param currentStep - 当前步骤索引
+ * @param enableAnchor - 是否启用锚链接
+ * @param anchorContainer - 锚链接容器选择器或元素
+ */
+export declare function useAnchor(currentStep: number, enableAnchor: boolean, anchorContainer?: string | HTMLElement): void;

package/lib/components/PisellSteps/hooks/useAnchor.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/PisellSteps/hooks/useAnchor.ts
+var useAnchor_exports = {};
+__export(useAnchor_exports, {
+  useAnchor: () => useAnchor
+});
+module.exports = __toCommonJS(useAnchor_exports);
+var import_react = require("react");
+function useAnchor(currentStep, enableAnchor, anchorContainer) {
+  const previousStepRef = (0, import_react.useRef)(currentStep);
+  (0, import_react.useEffect)(() => {
+    if (!enableAnchor) {
+      return;
+    }
+    if (previousStepRef.current === currentStep) {
+      return;
+    }
+    previousStepRef.current = currentStep;
+    const anchorId = `pisell-steps-anchor-${currentStep}`;
+    const anchorElement = document.getElementById(anchorId);
+    if (!anchorElement) {
+      return;
+    }
+    let scrollContainer = window;
+    if (anchorContainer) {
+      if (typeof anchorContainer === "string") {
+        const container = document.querySelector(anchorContainer);
+        if (container instanceof HTMLElement) {
+          scrollContainer = container;
+        }
+      } else if (anchorContainer instanceof HTMLElement) {
+        scrollContainer = anchorContainer;
+      }
+    }
+    const scrollOptions = {
+      behavior: "smooth",
+      block: "start",
+      inline: "nearest"
+    };
+    anchorElement.scrollIntoView(scrollOptions);
+  }, [currentStep, enableAnchor, anchorContainer]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useAnchor
+});

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

@@ -0,0 +1,8 @@
+/**
+ * 响应式监听 Hook
+ * 监听窗口大小变化，返回当前是否为移动端
+ *
+ * @param breakpoint - 断点宽度（默认 768px）
+ * @returns 是否为移动端
+ */
+export declare function useResponsive(breakpoint?: number): boolean;

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

@@ -0,0 +1,48 @@
+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/PisellSteps/hooks/useResponsive.ts
+var useResponsive_exports = {};
+__export(useResponsive_exports, {
+  useResponsive: () => useResponsive
+});
+module.exports = __toCommonJS(useResponsive_exports);
+var import_react = require("react");
+function useResponsive(breakpoint = 768) {
+  const [isMobile, setIsMobile] = (0, import_react.useState)(
+    typeof window !== "undefined" ? window.innerWidth < breakpoint : false
+  );
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < breakpoint);
+    };
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [breakpoint]);
+  return isMobile;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useResponsive
+});

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

@@ -0,0 +1,11 @@
+import type { PisellStepItem } from '../types';
+/**
+ * 处理步骤点击逻辑的 Hook
+ *
+ * @param currentStep - 当前步骤索引
+ * @param clickable - 是否允许点击步骤切换
+ * @param allowClickFinished - 是否允许点击已完成的步骤
+ * @param onStepChange - 步骤变更回调函数
+ * @returns 步骤点击处理函数
+ */
+export declare function useStepClick(currentStep: number, clickable: boolean, allowClickFinished: boolean, onStepChange: (step: number) => void): (index: number, item: PisellStepItem) => void;

package/lib/components/PisellSteps/hooks/useStepClick.js

@@ -0,0 +1,55 @@
+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/PisellSteps/hooks/useStepClick.ts
+var useStepClick_exports = {};
+__export(useStepClick_exports, {
+  useStepClick: () => useStepClick
+});
+module.exports = __toCommonJS(useStepClick_exports);
+var import_react = require("react");
+var import_utils = require("../utils");
+function useStepClick(currentStep, clickable, allowClickFinished, onStepChange) {
+  const handleStepClick = (0, import_react.useCallback)(
+    (index, item) => {
+      if (item.disabled) {
+        return;
+      }
+      if (!clickable) {
+        return;
+      }
+      const canClick = (0, import_utils.isStepClickable)(
+        index,
+        currentStep,
+        item.status || "wait",
+        clickable,
+        allowClickFinished
+      );
+      if (!canClick) {
+        return;
+      }
+      onStepChange(index);
+    },
+    [currentStep, clickable, allowClickFinished, onStepChange]
+  );
+  return handleStepClick;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStepClick
+});

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

@@ -0,0 +1,9 @@
+/**
+ * 管理步骤条状态的 Hook（支持受控和非受控模式）
+ *
+ * @param current - 受控模式下的当前步骤
+ * @param defaultCurrent - 非受控模式下的默认当前步骤
+ * @param onChange - 步骤变更回调函数
+ * @returns [currentStep, setCurrentStep] - 当前步骤和设置步骤的函数
+ */
+export declare function useStepsState(current?: number, defaultCurrent?: number, onChange?: (current: number) => void): [number, (value: number) => void];

package/lib/components/PisellSteps/hooks/useStepsState.js

@@ -0,0 +1,54 @@
+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/PisellSteps/hooks/useStepsState.ts
+var useStepsState_exports = {};
+__export(useStepsState_exports, {
+  useStepsState: () => useStepsState
+});
+module.exports = __toCommonJS(useStepsState_exports);
+var import_react = require("react");
+function useStepsState(current, defaultCurrent = 0, onChange) {
+  const [innerCurrent, setInnerCurrent] = (0, import_react.useState)(defaultCurrent);
+  const previousCurrentRef = (0, import_react.useRef)(defaultCurrent);
+  const isControlled = current !== void 0;
+  const currentStep = isControlled ? current : innerCurrent;
+  const setCurrentStep = (0, import_react.useCallback)(
+    (value) => {
+      const previousCurrent = previousCurrentRef.current;
+      if (!isControlled) {
+        setInnerCurrent(value);
+      }
+      if (onChange && value !== previousCurrent) {
+        onChange(value);
+      }
+      previousCurrentRef.current = value;
+    },
+    [isControlled, onChange]
+  );
+  (0, import_react.useEffect)(() => {
+    if (isControlled && current !== void 0) {
+      previousCurrentRef.current = current;
+    }
+  }, [current, isControlled]);
+  return [currentStep, setCurrentStep];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStepsState
+});

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

@@ -0,0 +1,3 @@
+import PisellSteps from './PisellSteps';
+export type { PisellStepsProps, PisellStepItem, StepStatus, StepType, StepDirection, StepSize } from './types';
+export default PisellSteps;

package/lib/components/PisellSteps/index.js

@@ -29,13 +29,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/PisellSteps/index.tsx
 var PisellSteps_exports = {};
 __export(PisellSteps_exports, {
-  PisellSteps: () => import_PisellSteps2.default,
-  default: () => import_PisellSteps.default
+  default: () => PisellSteps_default
 });
 module.exports = __toCommonJS(PisellSteps_exports);
 var import_PisellSteps = __toESM(require("./PisellSteps"));
-var import_PisellSteps2 = __toESM(require("./PisellSteps"));
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  PisellSteps
-});
+var PisellSteps_default = import_PisellSteps.default;

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

@@ -0,0 +1,271 @@
+import type { StepsProps, StepProps } from 'antd';
+import type { CSSProperties, ReactNode } from 'react';
+/**
+ * 步骤状态类型
+ */
+export declare type StepStatus = 'wait' | 'process' | 'finish' | 'error';
+/**
+ * 步骤条展示类型
+ */
+export declare type StepType = 'default' | 'dot' | 'navigation';
+/**
+ * 步骤条方向
+ */
+export declare type StepDirection = 'horizontal' | 'vertical';
+/**
+ * 步骤条尺寸
+ */
+export declare type StepSize = 'small' | 'default' | 'large';
+/**
+ * 标签放置位置
+ */
+export declare type StepLabelPlacement = 'horizontal' | 'vertical';
+/**
+ * 连接器位置
+ */
+export declare type ConnectorPosition = 'center' | 'top' | 'bottom';
+/**
+ * 单个步骤项配置
+ */
+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, 'type' | 'items' | 'onChange' | 'current' | 'status' | 'size' | 'direction'> {
+    /**
+     * 步骤条类型
+     * @default 'default'
+     */
+    type?: StepType;
+    /**
+     * 当前步骤（受控模式）
+     */
+    current?: number;
+    /**
+     * 默认当前步骤（非受控模式）
+     * @default 0
+     */
+    defaultCurrent?: number;
+    /**
+     * 步骤条方向
+     * @default 'horizontal'
+     */
+    direction?: StepDirection;
+    /**
+     * 步骤条尺寸
+     * @default 'default'
+     */
+    size?: StepSize;
+    /**
+     * 当前步骤的状态
+     * @default 'process'
+     */
+    status?: StepStatus;
+    /**
+     * 起始步骤索引
+     * @default 0
+     */
+    initial?: number;
+    /**
+     * 步骤数据配置
+     */
+    items?: PisellStepItem[];
+    /**
+     * 当前步骤的进度百分比（0-100）
+     */
+    percent?: number;
+    /**
+     * 标签文本位置
+     * @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
+     */
+    showProgressPercent?: boolean;
+    /**
+     * 图标尺寸（单位：px）
+     */
+    iconSize?: number;
+    /**
+     * 图标颜色
+     */
+    iconColor?: string;
+    /**
+     * 连接器自定义样式
+     */
+    connectorStyle?: CSSProperties;
+    /**
+     * 连接器位置
+     * @default 'center'
+     */
+    connectorPosition?: ConnectorPosition;
+    /**
+     * 是否开启动画
+     * @default true
+     */
+    animated?: boolean;
+    /**
+     * 是否开启栅格布局
+     * @default false
+     */
+    gridLayout?: boolean;
+    /**
+     * 栅格列数（仅在 gridLayout=true 时有效）
+     */
+    gridColumns?: number;
+    /**
+     * 标识区和文本区的布局方式
+     * @default 'horizontal'
+     */
+    itemLayout?: 'horizontal' | 'vertical';
+    /**
+     * 标识区和文本区的间距（单位：px）
+     */
+    itemGap?: number;
+    /**
+     * 是否开启锚链接
+     * @default false
+     */
+    enableAnchor?: boolean;
+    /**
+     * 锚链接容器选择器（仅在 enableAnchor=true 时有效）
+     */
+    anchorContainer?: string | HTMLElement;
+    /**
+     * 设计模式标识（低代码引擎使用）
+     */
+    __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/lib/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;