@pisell/materials 1.0.995 → 1.0.997

package/lib/components/PisellSteps/PisellSteps.stories.js

@@ -0,0 +1,570 @@
+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/PisellSteps/PisellSteps.stories.tsx
+var PisellSteps_stories_exports = {};
+__export(PisellSteps_stories_exports, {
+  Clickable: () => Clickable,
+  CustomIcon: () => CustomIcon,
+  CustomItemGap: () => CustomItemGap,
+  CustomMobileBreakpoint: () => CustomMobileBreakpoint,
+  CustomProgressDot: () => CustomProgressDot,
+  CustomStatus: () => CustomStatus,
+  Default: () => Default,
+  DisabledStep: () => DisabledStep,
+  DisallowClickFinished: () => DisallowClickFinished,
+  Dot: () => Dot,
+  ErrorStatus: () => ErrorStatus,
+  FinishIcon: () => FinishIcon,
+  FullFeature: () => FullFeature,
+  GridLayout: () => GridLayout,
+  HiddenStep: () => HiddenStep,
+  InitialIndex: () => InitialIndex,
+  InteractionTest: () => InteractionTest,
+  LabelVertical: () => LabelVertical,
+  Large: () => Large,
+  ManySteps: () => ManySteps,
+  MobileModeAuto: () => MobileModeAuto,
+  MobileModeCurrent: () => MobileModeCurrent,
+  MobileModeFull: () => MobileModeFull,
+  Navigation: () => Navigation,
+  RenderTest: () => RenderTest,
+  Responsive: () => Responsive,
+  ShoppingFlow: () => ShoppingFlow,
+  Small: () => Small,
+  Uncontrolled: () => Uncontrolled,
+  Vertical: () => Vertical,
+  WithSubTitle: () => WithSubTitle,
+  default: () => PisellSteps_stories_default
+});
+module.exports = __toCommonJS(PisellSteps_stories_exports);
+var import_test = require("@storybook/test");
+var import_react = __toESM(require("react"));
+var import_icons = require("@ant-design/icons");
+var import_PisellSteps = __toESM(require("./PisellSteps"));
+var meta = {
+  title: "Components/PisellSteps",
+  component: import_PisellSteps.default,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: "步骤条组件，用于展示流程进度和引导用户完成操作步骤。"
+      }
+    }
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["default", "navigation"],
+      description: "步骤条类型"
+    },
+    direction: {
+      control: "select",
+      options: ["horizontal", "vertical"],
+      description: "步骤条方向"
+    },
+    size: {
+      control: "select",
+      options: ["small", "default", "large"],
+      description: "步骤条尺寸"
+    },
+    status: {
+      control: "select",
+      options: ["wait", "process", "finish", "error"],
+      description: "当前步骤状态"
+    },
+    labelPlacement: {
+      control: "select",
+      options: ["horizontal", "vertical"],
+      description: "标签放置位置"
+    },
+    mobileMode: {
+      control: "select",
+      options: ["full", "current", "auto"],
+      description: "移动端显示模式"
+    },
+    clickable: {
+      control: "boolean",
+      description: "是否可点击"
+    },
+    responsive: {
+      control: "boolean",
+      description: "是否响应式"
+    },
+    progressDot: {
+      control: "boolean",
+      description: "是否使用点状步骤条"
+    },
+    gridLayout: {
+      control: "boolean",
+      description: "是否启用栅格布局"
+    },
+    enableAnchor: {
+      control: "boolean",
+      description: "是否启用锚链接"
+    }
+  }
+};
+var PisellSteps_stories_default = meta;
+var Default = {
+  args: {
+    items: [
+      { title: "步骤一", description: "这是第一步的描述" },
+      { title: "步骤二", description: "这是第二步的描述" },
+      { title: "步骤三", description: "这是第三步的描述" }
+    ],
+    current: 1
+  }
+};
+var Uncontrolled = {
+  args: {
+    items: [
+      { title: "步骤一" },
+      { title: "步骤二" },
+      { title: "步骤三" }
+    ],
+    defaultCurrent: 1,
+    clickable: true
+  }
+};
+var Vertical = {
+  args: {
+    direction: "vertical",
+    items: [
+      { title: "步骤一", description: "这是第一步的描述" },
+      { title: "步骤二", description: "这是第二步的描述" },
+      { title: "步骤三", description: "这是第三步的描述" }
+    ],
+    current: 1
+  }
+};
+var Dot = {
+  args: {
+    progressDot: true,
+    items: [
+      { title: "已完成", description: "这是第一步" },
+      { title: "进行中", description: "这是第二步" },
+      { title: "等待中", description: "这是第三步" }
+    ],
+    current: 1
+  }
+};
+var CustomProgressDot = {
+  args: {
+    progressDot: (dot, { index, status }) => /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: 24,
+          height: 24,
+          borderRadius: "50%",
+          background: status === "finish" ? "#52c41a" : status === "process" ? "#1890ff" : "#d9d9d9",
+          color: "#fff",
+          fontSize: 12
+        }
+      },
+      status === "finish" ? "✓" : index + 1
+    ),
+    items: [
+      { title: "步骤一" },
+      { title: "步骤二" },
+      { title: "步骤三" }
+    ],
+    current: 1
+  }
+};
+var Navigation = {
+  args: {
+    type: "navigation",
+    items: [
+      { title: "步骤一" },
+      { title: "步骤二" },
+      { title: "步骤三" }
+    ],
+    current: 1
+  }
+};
+var Small = {
+  args: {
+    size: "small",
+    items: [
+      { title: "步骤一" },
+      { title: "步骤二" },
+      { title: "步骤三" }
+    ],
+    current: 1
+  }
+};
+var Large = {
+  args: {
+    size: "large",
+    items: [
+      { title: "步骤一", description: "这是第一步的描述" },
+      { title: "步骤二", description: "这是第二步的描述" },
+      { title: "步骤三", description: "这是第三步的描述" }
+    ],
+    current: 1
+  }
+};
+var LabelVertical = {
+  args: {
+    labelPlacement: "vertical",
+    items: [
+      { title: "步骤一", description: "这是第一步的描述" },
+      { title: "步骤二", description: "这是第二步的描述" },
+      { title: "步骤三", description: "这是第三步的描述" }
+    ],
+    current: 1
+  }
+};
+var ErrorStatus = {
+  args: {
+    items: [
+      { title: "步骤一", status: "finish" },
+      { title: "步骤二", status: "error" },
+      { title: "步骤三" }
+    ],
+    current: 1,
+    status: "error"
+  }
+};
+var CustomStatus = {
+  args: {
+    items: [
+      { title: "步骤一", status: "finish", description: "已完成" },
+      { title: "步骤二", status: "process", description: "进行中" },
+      { title: "步骤三", status: "wait", description: "等待中" },
+      { title: "步骤四", status: "error", description: "出错了" }
+    ],
+    current: 1
+  }
+};
+var Clickable = {
+  args: {
+    clickable: true,
+    items: [
+      { title: "步骤一" },
+      { title: "步骤二" },
+      { title: "步骤三" }
+    ],
+    current: 1,
+    onChange: (current) => console.log("点击了步骤:", current)
+  }
+};
+var DisallowClickFinished = {
+  args: {
+    clickable: true,
+    allowClickFinished: false,
+    items: [
+      { title: "步骤一", description: "不可点击回去" },
+      { title: "步骤二", description: "当前步骤" },
+      { title: "步骤三", description: "点击前进" }
+    ],
+    current: 1,
+    onChange: (current) => console.log("点击了步骤:", current)
+  }
+};
+var DisabledStep = {
+  args: {
+    clickable: true,
+    items: [
+      { title: "步骤一" },
+      { title: "步骤二", disabled: true },
+      { title: "步骤三" }
+    ],
+    current: 0,
+    onChange: (current) => console.log("点击了步骤:", current)
+  }
+};
+var CustomIcon = {
+  args: {
+    items: [
+      { title: "登录", icon: import_react.default.createElement(import_icons.UserOutlined) },
+      { title: "验证", icon: import_react.default.createElement(import_icons.SolutionOutlined) },
+      { title: "付款", icon: import_react.default.createElement(import_icons.LoadingOutlined) },
+      { title: "完成", icon: import_react.default.createElement(import_icons.SmileOutlined) }
+    ],
+    current: 2
+  }
+};
+var FinishIcon = {
+  args: {
+    items: [
+      { title: "步骤一", icon: import_react.default.createElement(import_icons.CheckCircleOutlined, { style: { color: "#52c41a" } }) },
+      { title: "步骤二", icon: "2" },
+      { title: "步骤三", icon: "3" }
+    ],
+    current: 1
+  }
+};
+var GridLayout = {
+  args: {
+    gridLayout: true,
+    gridColumns: 4,
+    items: [
+      { title: "步骤一", description: "描述" },
+      { title: "步骤二", description: "描述" },
+      { title: "步骤三", description: "描述" },
+      { title: "步骤四", description: "描述" }
+    ],
+    current: 1
+  }
+};
+var CustomItemGap = {
+  args: {
+    itemGap: 16,
+    items: [
+      { title: "步骤一", description: "描述文本" },
+      { title: "步骤二", description: "描述文本" },
+      { title: "步骤三", description: "描述文本" }
+    ],
+    current: 1
+  }
+};
+var MobileModeFull = {
+  args: {
+    mobileMode: "full",
+    items: [
+      { title: "步骤一", description: "第一步描述" },
+      { title: "步骤二", description: "第二步描述" },
+      { title: "步骤三", description: "第三步描述" }
+    ],
+    current: 1
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile1"
+    }
+  }
+};
+var MobileModeCurrent = {
+  args: {
+    mobileMode: "current",
+    items: [
+      { title: "步骤一", description: "第一步描述" },
+      { title: "步骤二", description: "第二步描述" },
+      { title: "步骤三", description: "第三步描述" }
+    ],
+    current: 1
+  }
+};
+var MobileModeAuto = {
+  args: {
+    mobileMode: "auto",
+    mobileBreakpoint: 744,
+    items: [
+      { title: "步骤一", description: "第一步描述" },
+      { title: "步骤二", description: "第二步描述" },
+      { title: "步骤三", description: "第三步描述" }
+    ],
+    current: 1
+  }
+};
+var CustomMobileBreakpoint = {
+  args: {
+    mobileMode: "auto",
+    mobileBreakpoint: 500,
+    items: [
+      { title: "步骤一", description: "第一步描述" },
+      { title: "步骤二", description: "第二步描述" },
+      { title: "步骤三", description: "第三步描述" }
+    ],
+    current: 1
+  }
+};
+var InitialIndex = {
+  args: {
+    initial: 1,
+    current: 2,
+    items: [
+      { title: "步骤 1" },
+      { title: "步骤 2" },
+      { title: "步骤 3" }
+    ]
+  }
+};
+var HiddenStep = {
+  args: {
+    items: [
+      { title: "步骤一" },
+      { title: "步骤二（隐藏）", hidden: true },
+      { title: "步骤三" }
+    ],
+    current: 1
+  }
+};
+var WithSubTitle = {
+  args: {
+    items: [
+      { title: "已完成", subTitle: "00:00:05", description: "这是第一步" },
+      { title: "进行中", subTitle: "剩余 00:00:08", description: "这是第二步" },
+      { title: "等待中", subTitle: "", description: "这是第三步" }
+    ],
+    current: 1
+  }
+};
+var Responsive = {
+  args: {
+    responsive: true,
+    items: [
+      { title: "步骤一", description: "这是第一步的描述" },
+      { title: "步骤二", description: "这是第二步的描述" },
+      { title: "步骤三", description: "这是第三步的描述" }
+    ],
+    current: 1
+  }
+};
+var FullFeature = {
+  args: {
+    clickable: true,
+    responsive: true,
+    labelPlacement: "vertical",
+    items: [
+      {
+        title: "创建账户",
+        description: "填写基本信息",
+        icon: import_react.default.createElement(import_icons.UserOutlined)
+      },
+      {
+        title: "身份验证",
+        description: "验证您的身份",
+        icon: import_react.default.createElement(import_icons.SolutionOutlined)
+      },
+      {
+        title: "完成注册",
+        description: "设置完成",
+        icon: import_react.default.createElement(import_icons.SmileOutlined)
+      }
+    ],
+    current: 1,
+    onChange: (current) => console.log("当前步骤:", current)
+  }
+};
+var ManySteps = {
+  args: {
+    size: "small",
+    items: [
+      { title: "步骤 1" },
+      { title: "步骤 2" },
+      { title: "步骤 3" },
+      { title: "步骤 4" },
+      { title: "步骤 5" },
+      { title: "步骤 6" }
+    ],
+    current: 3
+  }
+};
+var ShoppingFlow = {
+  args: {
+    type: "navigation",
+    items: [
+      { title: "购物车", description: "已选 3 件商品" },
+      { title: "填写订单", description: "收货信息" },
+      { title: "支付", description: "选择支付方式" },
+      { title: "完成", description: "订单完成" }
+    ],
+    current: 1,
+    clickable: true,
+    allowClickFinished: true
+  }
+};
+var InteractionTest = {
+  args: {
+    clickable: true,
+    items: [
+      { title: "步骤一" },
+      { title: "步骤二" },
+      { title: "步骤三" }
+    ],
+    current: 1
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = (0, import_test.within)(canvasElement);
+    const step1 = canvas.getByText("步骤一");
+    await (0, import_test.expect)(step1).toBeInTheDocument();
+    await import_test.userEvent.click(step1);
+  }
+};
+var RenderTest = {
+  args: {
+    items: [
+      { title: "步骤一", description: "描述一" },
+      { title: "步骤二", description: "描述二" },
+      { title: "步骤三", description: "描述三" }
+    ],
+    current: 0
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = (0, import_test.within)(canvasElement);
+    await (0, import_test.expect)(canvas.getByText("步骤一")).toBeInTheDocument();
+    await (0, import_test.expect)(canvas.getByText("步骤二")).toBeInTheDocument();
+    await (0, import_test.expect)(canvas.getByText("步骤三")).toBeInTheDocument();
+    await (0, import_test.expect)(canvas.getByText("描述一")).toBeInTheDocument();
+    await (0, import_test.expect)(canvas.getByText("描述二")).toBeInTheDocument();
+    await (0, import_test.expect)(canvas.getByText("描述三")).toBeInTheDocument();
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Clickable,
+  CustomIcon,
+  CustomItemGap,
+  CustomMobileBreakpoint,
+  CustomProgressDot,
+  CustomStatus,
+  Default,
+  DisabledStep,
+  DisallowClickFinished,
+  Dot,
+  ErrorStatus,
+  FinishIcon,
+  FullFeature,
+  GridLayout,
+  HiddenStep,
+  InitialIndex,
+  InteractionTest,
+  LabelVertical,
+  Large,
+  ManySteps,
+  MobileModeAuto,
+  MobileModeCurrent,
+  MobileModeFull,
+  Navigation,
+  RenderTest,
+  Responsive,
+  ShoppingFlow,
+  Small,
+  Uncontrolled,
+  Vertical,
+  WithSubTitle
+});

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/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/useResponsive.d.ts

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

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/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/index.d.ts

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