@pisell/materials 6.7.4 → 6.8.2

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

@@ -0,0 +1,249 @@
+import type { StepsProps, StepProps } from 'antd';
+import type { CSSProperties, ReactNode } from 'react';
+/**
+ * 步骤状态类型
+ */
+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;
+    /**
+     * 连接器自定义样式
+     */
+    connectorStyle?: CSSProperties;
+    /**
+     * 是否开启栅格布局
+     * @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;
+    /**
+     * 设计模式标识（低代码引擎使用）
+     */
+    __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/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/PisellSteps/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

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;

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

@@ -0,0 +1,88 @@
+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/utils/index.ts
+var utils_exports = {};
+__export(utils_exports, {
+  calculateProgress: () => calculateProgress,
+  getChangeDirection: () => getChangeDirection,
+  getStepStatus: () => getStepStatus,
+  isStepClickable: () => isStepClickable,
+  isValidStepIndex: () => isValidStepIndex,
+  mergeStepClassName: () => mergeStepClassName
+});
+module.exports = __toCommonJS(utils_exports);
+function calculateProgress(current, total) {
+  if (total <= 0) return 0;
+  if (current < 0) return 0;
+  if (current >= total) return 100;
+  return Math.round((current + 1) / total * 100);
+}
+function isStepClickable(index, current, status, clickable, allowClickFinished) {
+  if (!clickable) {
+    return false;
+  }
+  if (index === current) {
+    return false;
+  }
+  if (status === "finish" || index < current) {
+    return allowClickFinished;
+  }
+  if (status === "wait") {
+    return false;
+  }
+  if (status === "error") {
+    return true;
+  }
+  return true;
+}
+function getStepStatus(index, current, customStatus) {
+  if (customStatus) {
+    return customStatus;
+  }
+  if (index < current) {
+    return "finish";
+  } else if (index === current) {
+    return "process";
+  } else {
+    return "wait";
+  }
+}
+function mergeStepClassName(baseClass, status, customClass) {
+  const classes = [baseClass];
+  classes.push(`${baseClass}-${status}`);
+  if (customClass) {
+    classes.push(customClass);
+  }
+  return classes.join(" ");
+}
+function getChangeDirection(from, to) {
+  return to > from ? "forward" : "backward";
+}
+function isValidStepIndex(index, total) {
+  return index >= 0 && index < total;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  calculateProgress,
+  getChangeDirection,
+  getStepStatus,
+  isStepClickable,
+  isValidStepIndex,
+  mergeStepClassName
+});

package/lib/components/PisellSuperTabs/PisellSuperTabs.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { PisellSuperTabsProps } from './types';
+import './PisellSuperTabs.less';
+/**
+ * PisellSuperTabs 组件
+ * @description 通用导航框架封装的全能型 Tab 组件
+ * @template T - 数据源项的类型
+ */
+declare const PisellSuperTabs: {
+    <T>(props: PisellSuperTabsProps<T>): React.JSX.Element;
+    displayName: string;
+};
+export default PisellSuperTabs;

package/lib/components/PisellSuperTabs/PisellSuperTabs.js

@@ -0,0 +1,188 @@
+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/PisellSuperTabs/PisellSuperTabs.tsx
+var PisellSuperTabs_exports = {};
+__export(PisellSuperTabs_exports, {
+  default: () => PisellSuperTabs_default
+});
+module.exports = __toCommonJS(PisellSuperTabs_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_hooks = require("./hooks");
+var import_utils = require("./utils");
+var import_PisellBasicGrid = __toESM(require("../PisellBasicGrid"));
+var import_PisellScrollView = require("../PisellScrollView");
+var import_PisellSuperTabs = require("./PisellSuperTabs.less");
+var PisellSuperTabs = (props) => {
+  const {
+    // 基础属性
+    className,
+    style,
+    dataSource = [],
+    rowKey = "key",
+    value,
+    id,
+    defaultValue,
+    onChange,
+    renderItem,
+    // Grid Props（已分组）
+    gridProps = {},
+    // ScrollView Props（已分组）
+    scrollViewProps = {},
+    children,
+    slotLeft,
+    slotRight,
+    slotTop,
+    slotBottom,
+    tabItemClassName,
+    tabItemStyle,
+    slotLeftClassName,
+    slotRightClassName,
+    slotTopClassName,
+    slotBottomClassName,
+    slotLeftStyle,
+    slotRightStyle,
+    slotTopStyle,
+    slotBottomStyle
+  } = props;
+  const { activeKey, handleTabChange } = (0, import_hooks.useTabsState)({
+    value,
+    defaultValue,
+    onChange
+  });
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)("pisell-super-tabs", className),
+      style,
+      id
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)(
+          "pisell-super-tabs-slot-top-" + id,
+          slotTopClassName
+        ),
+        style: slotTopStyle
+      },
+      slotTop
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)(
+          "pisell-super-tabs-slot-left-" + id,
+          slotLeftClassName
+        ),
+        style: slotLeftStyle
+      },
+      slotLeft
+    ),
+    /* @__PURE__ */ import_react.default.createElement(import_PisellScrollView.PisellScrollView, { ...scrollViewProps }, /* @__PURE__ */ import_react.default.createElement(
+      import_PisellBasicGrid.default,
+      {
+        ...gridProps,
+        dataSource,
+        rowKey,
+        renderItem: (item, index) => {
+          const key = (0, import_utils.getRowKey)(item, index, rowKey);
+          const active = key === String(activeKey);
+          let content;
+          if (renderItem) {
+            if (typeof renderItem === "function") {
+              content = renderItem({
+                dataSource: item,
+                index,
+                onClick: () => {
+                  if (item.customClick) {
+                    return;
+                  }
+                  handleTabChange(key, item);
+                },
+                tabsState: {
+                  activeKey,
+                  handleTabChange
+                },
+                tabsProps: props,
+                active: {
+                  value: active
+                }
+              });
+            } else {
+              content = renderItem;
+            }
+          } else {
+            content = item["label"];
+          }
+          return /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              key,
+              className: (0, import_classnames.default)(
+                "pisell-super-tabs-item",
+                {
+                  "pisell-super-tabs-item--active": active
+                },
+                tabItemClassName
+              ),
+              style: tabItemStyle
+            },
+            content
+          );
+        }
+      }
+    )),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-super-tabs-content" }, children),
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)(
+          "pisell-super-tabs-slot-right-" + id,
+          slotRightClassName
+        ),
+        style: slotRightStyle
+      },
+      slotRight
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)(
+          "pisell-super-tabs-slot-bottom-" + id,
+          slotBottomClassName
+        ),
+        style: slotBottomStyle
+      },
+      slotBottom
+    )
+  );
+};
+PisellSuperTabs.displayName = "PisellSuperTabs";
+var PisellSuperTabs_default = PisellSuperTabs;

package/lib/components/PisellSuperTabs/PisellSuperTabs.less

@@ -0,0 +1,35 @@
+/**
+ * PisellSuperTabs 组件样式
+ */
+
+.pisell-super-tabs {
+  // 基础容器样式
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+
+  // TabItem 基础样式
+  &-item {
+    // 基础样式
+    cursor: pointer;
+    user-select: none;
+    box-sizing: border-box;
+    height: 100%;
+    // 过渡动画
+    // transition: all 0.3s ease;
+
+    // 激活状态
+    &--active {
+      // 激活状态由具体的 Card 组件自己实现
+      // 这里只提供一个默认的 class，方便外部自定义样式
+    }
+
+    // 禁用样式（预留）
+    &--disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+}

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

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

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

@@ -0,0 +1,29 @@
+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/PisellSuperTabs/hooks/index.ts
+var hooks_exports = {};
+__export(hooks_exports, {
+  useTabsState: () => import_useTabsState.useTabsState
+});
+module.exports = __toCommonJS(hooks_exports);
+var import_useTabsState = require("./useTabsState");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useTabsState
+});

package/lib/components/PisellSuperTabs/hooks/useTabsState.d.ts

@@ -0,0 +1,7 @@
+import { UseTabsStateParams, UseTabsStateReturn } from '../types';
+/**
+ * Tabs 状态管理 Hook
+ * @description 处理受控/非受控模式的状态管理
+ * @template T - 数据项类型
+ */
+export declare const useTabsState: <T = any>(params: UseTabsStateParams<T>) => UseTabsStateReturn<T>;