@pisell/materials 1.0.982 → 1.0.987

package/lib/components/PisellScrollView/hooks/useScrollState.js

@@ -0,0 +1,109 @@
+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/PisellScrollView/hooks/useScrollState.ts
+var useScrollState_exports = {};
+__export(useScrollState_exports, {
+  useScrollState: () => useScrollState
+});
+module.exports = __toCommonJS(useScrollState_exports);
+var import_react = require("react");
+var useScrollState = ({ containerRef, overflow }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const [scrollState, setScrollState] = (0, import_react.useState)({
+    scrollTop: 0,
+    scrollLeft: 0,
+    percentY: 0,
+    percentX: 0,
+    scrollHeight: ((_a = containerRef.current) == null ? void 0 : _a.scrollHeight) || 0,
+    scrollWidth: ((_b = containerRef.current) == null ? void 0 : _b.scrollWidth) || 0,
+    clientHeight: ((_c = containerRef.current) == null ? void 0 : _c.clientHeight) || 0,
+    clientWidth: ((_d = containerRef.current) == null ? void 0 : _d.clientWidth) || 0,
+    direction: null,
+    isScrollToTop: overflow === "y" ? true : false,
+    isScrollToBottom: false,
+    isScrollToLeft: overflow === "x" ? true : false,
+    isScrollToRight: false,
+    isOverflows: false
+  });
+  (0, import_react.useEffect)(() => {
+    if (!containerRef.current) {
+      return;
+    }
+    const { scrollHeight, clientHeight, scrollWidth, clientWidth } = containerRef.current;
+    const isOverflows = scrollHeight > clientHeight || scrollWidth > clientWidth;
+    setScrollState((prev) => {
+      return {
+        ...prev,
+        isOverflows
+      };
+    });
+  }, [(_e = containerRef.current) == null ? void 0 : _e.scrollWidth, (_f = containerRef.current) == null ? void 0 : _f.scrollHeight, (_g = containerRef.current) == null ? void 0 : _g.clientHeight, (_h = containerRef.current) == null ? void 0 : _h.clientWidth]);
+  const updateScrollState = (0, import_react.useCallback)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const {
+      scrollTop,
+      scrollLeft,
+      scrollHeight,
+      scrollWidth,
+      clientHeight,
+      clientWidth
+    } = container;
+    const isScrollToTop = scrollTop <= 0;
+    const isScrollToBottom = scrollTop + clientHeight >= scrollHeight;
+    const isScrollToLeft = scrollLeft <= 0;
+    const isScrollToRight = scrollLeft + clientWidth >= scrollWidth;
+    setScrollState((prev) => {
+      let direction = null;
+      if (Math.abs(scrollTop - prev.scrollTop) > Math.abs(scrollLeft - prev.scrollLeft)) {
+        direction = scrollTop > prev.scrollTop ? "down" : "up";
+      } else if (scrollLeft !== prev.scrollLeft) {
+        direction = scrollLeft > prev.scrollLeft ? "right" : "left";
+      } else {
+        direction = prev.direction;
+      }
+      const maxScrollTop = scrollHeight - clientHeight;
+      const maxScrollLeft = scrollWidth - clientWidth;
+      const percentY = maxScrollTop > 0 ? scrollTop / maxScrollTop * 100 : 0;
+      const percentX = maxScrollLeft > 0 ? scrollLeft / maxScrollLeft * 100 : 0;
+      const isOverflows = scrollHeight > clientHeight || scrollWidth > clientWidth;
+      return {
+        scrollTop,
+        scrollLeft,
+        scrollHeight,
+        scrollWidth,
+        clientHeight,
+        clientWidth,
+        percentY,
+        percentX,
+        direction,
+        isScrollToTop,
+        isScrollToBottom,
+        isScrollToLeft,
+        isScrollToRight,
+        isOverflows
+      };
+    });
+  }, [containerRef]);
+  return { scrollState, updateScrollState };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useScrollState
+});

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

@@ -0,0 +1,2 @@
+export { default as PisellScrollView } from './PisellScrollView';
+export type { PisellScrollViewProps, PisellScrollViewRef } from './types';

package/lib/components/PisellScrollView/index.js

@@ -0,0 +1,39 @@
+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/PisellScrollView/index.tsx
+var PisellScrollView_exports = {};
+__export(PisellScrollView_exports, {
+  PisellScrollView: () => import_PisellScrollView.default
+});
+module.exports = __toCommonJS(PisellScrollView_exports);
+var import_PisellScrollView = __toESM(require("./PisellScrollView"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellScrollView
+});

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

@@ -0,0 +1,203 @@
+import React, { ReactNode, CSSProperties } from 'react';
+/**
+ * 滚动位置配置
+ */
+export interface ScrollPosition {
+    /** 竖向滚动位置（像素） */
+    scrollTop?: number;
+    /** 横向滚动位置（像素） */
+    scrollLeft?: number;
+    /** 滚动行为 */
+    behavior?: 'auto' | 'smooth';
+}
+/**
+ * 滚动到元素配置
+ */
+export interface ScrollToElementConfig {
+    /** 目标元素 ID */
+    targetId: string;
+    /** 对齐方式 */
+    align?: 'start' | 'center' | 'end' | 'nearest';
+    /** 滚动行为 */
+    behavior?: 'auto' | 'smooth';
+    /** 偏移量 */
+    offset?: number;
+}
+/**
+ * 滚动百分比配置
+ */
+export interface ScrollPercentage {
+    /** 竖向滚动百分比 (0-100) */
+    percentY?: number;
+    /** 横向滚动百分比 (0-100) */
+    percentX?: number;
+    /** 滚动行为 */
+    behavior?: 'auto' | 'smooth';
+}
+/**
+ * 滚动按钮配置
+ */
+export interface ScrollActionsConfig {
+    show?: boolean;
+    /** 按钮类型 */
+    type: "backTop" | "rArrows" | "lrArrows" | "tbArrows" | "custom";
+    style?: CSSProperties;
+    scrollDistance?: number;
+    /** 按钮配置 根据type不同，配置不同 */
+    config?: any;
+}
+/**
+ * 滚动事件数据
+ */
+export interface ScrollEventData {
+    /** 当前滚动位置 */
+    scrollTop: number;
+    scrollLeft: number;
+    /** 滚动百分比 */
+    percentY: number;
+    percentX: number;
+    /** 可滚动高度/宽度 */
+    scrollHeight: number;
+    scrollWidth: number;
+    /** 容器尺寸 */
+    clientHeight: number;
+    clientWidth: number;
+    /** 滚动方向 */
+    direction: 'up' | 'down' | 'left' | 'right' | null;
+    /** 是否滚动到顶部 */
+    isScrollToTop: boolean;
+    /** 是否滚动到底部 */
+    isScrollToBottom: boolean;
+    /** 是否滚动到左边 */
+    isScrollToLeft: boolean;
+    /** 是否滚动到右边 */
+    isScrollToRight: boolean;
+    /** 是否已经产生滚动条 */
+    isOverflows: boolean;
+}
+/**
+ * 视图监听配置
+ */
+export interface IntersectionConfig {
+    /** 是否启用视图监听 */
+    enabled?: boolean;
+    /** 交叉阈值 (0-1) */
+    threshold?: number | number[];
+    /** 根边距 */
+    rootMargin?: string;
+    /** 元素进入视图回调 */
+    onEnterViewport?: (entry: IntersectionObserverEntry, element: Element) => void;
+    /** 元素离开视图回调 */
+    onLeaveViewport?: (entry: IntersectionObserverEntry, element: Element) => void;
+    /** 可见度变化回调 */
+    onVisibilityChange?: (entry: IntersectionObserverEntry, element: Element) => void;
+    /** 需要监听的元素选择器 */
+    targetSelector?: string;
+}
+/**
+ * 吸附滚动配置
+ */
+export interface SnapScrollConfig {
+    /** 是否启用吸附滚动 */
+    enabled?: boolean;
+    /** 吸附类型 */
+    type?: 'mandatory' | 'proximity';
+    /** 吸附对齐方式 */
+    align?: 'start' | 'center' | 'end';
+    /** 吸附开始回调 */
+    onSnapStart?: (targetIndex: number, targetPosition: number) => void;
+    /** 吸附结束回调 */
+    onSnapEnd?: (currentIndex: number, currentPosition: number) => void;
+}
+/**
+ * PisellScrollView 组件 Props
+ */
+export interface PisellScrollViewProps {
+    /** 子元素 */
+    children?: ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 滚动方向 */
+    overflow?: 'auto' | 'scroll' | 'hidden' | 'x' | 'y' | 'both';
+    /** 滚动条样式 */
+    scrollbarStyle?: 'default' | 'thin' | 'minimal' | 'rounded' | 'overlay' | 'custom' | 'none';
+    /** 自定义滚动条类名（当 scrollbarStyle 为 'custom' 时使用） */
+    scrollbarClassName?: string;
+    /** 是否显示滚动按钮 */
+    showScrollButtons?: boolean;
+    /** 箭头操作 */
+    scrollActionsConfig?: ScrollActionsConfig;
+    /** 滚动时触发 */
+    onScroll?: (data: ScrollEventData) => void;
+    /** 开始滚动时触发 */
+    onScrollStart?: (data: ScrollEventData) => void;
+    /** 滚动结束时触发（防抖延迟，默认 150ms） */
+    onScrollEnd?: (data: ScrollEventData) => void;
+    /** 滚动结束防抖延迟时间（ms） */
+    scrollEndDelay?: number;
+    /** 到达顶部时触发 */
+    onReachTop?: (data: ScrollEventData) => void;
+    /** 到达底部时触发 */
+    onReachBottom?: (data: ScrollEventData) => void;
+    /** 到达左边时触发 */
+    onReachLeft?: (data: ScrollEventData) => void;
+    /** 到达右边时触发 */
+    onReachRight?: (data: ScrollEventData) => void;
+    /** 边界阈值（到达边界的像素阈值） */
+    reachThreshold?: number;
+    /** IntersectionObserver 配置 */
+    intersection?: IntersectionConfig;
+    /** 吸附滚动配置 */
+    snapScroll?: SnapScrollConfig;
+    /** 容器宽度 */
+    width?: number | string;
+    /** 容器高度 */
+    height?: number | string;
+    /** 最大宽度 */
+    maxWidth?: number | string;
+    /** 最大高度 */
+    maxHeight?: number | string;
+    /** 最小宽度 */
+    minWidth?: number | string;
+    /** 最小高度 */
+    minHeight?: number | string;
+    /** Ref 引用 */
+    ref?: React.Ref<PisellScrollViewRef>;
+    /** 设计模式 */
+    __designMode?: boolean;
+}
+/**
+ * 组件暴露的方法
+ */
+export interface PisellScrollViewRef {
+    /** 滚动到指定位置 */
+    scrollTo: (position: ScrollPosition) => void;
+    /** 滚动到指定元素 */
+    scrollToElement: (config: ScrollToElementConfig) => void;
+    /** 滚动到百分比位置 */
+    scrollToPercentage: (percentage: ScrollPercentage) => void;
+    /** 滚动到顶部 */
+    scrollToTop: (behavior?: 'auto' | 'smooth') => void;
+    /** 滚动到底部 */
+    scrollToBottom: (behavior?: 'auto' | 'smooth') => void;
+    /** 滚动到最左侧 */
+    scrollToLeft: (behavior?: 'auto' | 'smooth') => void;
+    /** 滚动到最右侧 */
+    scrollToRight: (behavior?: 'auto' | 'smooth') => void;
+    /** 获取当前滚动信息 */
+    getScrollData: () => ScrollEventData;
+    /** 获取滚动容器 DOM 元素 */
+    getScrollContainer: () => HTMLElement | null;
+    /** 滚动到指定吸附点（索引） */
+    scrollToSnapPoint: (index: number, behavior?: 'auto' | 'smooth') => void;
+    /** 获取所有吸附点位置 */
+    getSnapPoints: () => number[];
+    /** 获取当前吸附点索引 */
+    getCurrentSnapIndex: () => number;
+    /** 滚动到下一个吸附点 */
+    scrollToNextSnap: (behavior?: 'auto' | 'smooth') => void;
+    /** 滚动到上一个吸附点 */
+    scrollToPrevSnap: (behavior?: 'auto' | 'smooth') => void;
+}

package/lib/components/PisellScrollView/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/PisellScrollView/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import './PisellSteps.less';
+import type { PisellStepsProps } from './types';
+/**
+ * PisellSteps 步骤条组件
+ *
+ * 基于 Ant Design Steps 组件进行二次封装和增强
+ * 支持多种展示样式、布局方式和丰富的交互功能
+ *
+ * @author Pisell Team
+ * @version 1.0.0
+ */
+declare const PisellSteps: React.FC<PisellStepsProps>;
+export default PisellSteps;

package/lib/components/PisellSteps/PisellSteps.js

@@ -69,6 +69,8 @@ var PisellSteps = ({
   itemGap,
   enableAnchor = false,
   anchorContainer,
+  mobileMode = "full",
+  mobileBreakpoint = 744,
   // 低代码属性
   __designMode,
   __id,
@@ -87,7 +89,16 @@ var PisellSteps = ({
     setCurrentStep
   );
   (0, import_hooks.useAnchor)(currentStep, enableAnchor, anchorContainer);
-  const isMobile = (0, import_hooks.useResponsive)(768);
+  const isMobile = (0, import_hooks.useResponsive)(mobileBreakpoint);
+  const showMobileCurrentView = (0, import_react.useMemo)(() => {
+    if (mobileMode === "current") return true;
+    if (mobileMode === "auto" && isMobile) return true;
+    return false;
+  }, [mobileMode, isMobile]);
+  const currentStepItem = (0, import_react.useMemo)(() => {
+    const visibleItems = items.filter((item) => !item.hidden);
+    return visibleItems[currentStep - initial] || null;
+  }, [items, currentStep, initial]);
   const processedItems = (0, import_react.useMemo)(() => {
     const visibleItems = items.filter((item) => !item.hidden);
     if (__designMode === "design" && visibleItems.length === 0) {
@@ -194,12 +205,12 @@ var PisellSteps = ({
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
-      className: wrapperClassName,
-      style: wrapperStyle,
+      className: showMobileCurrentView ? `pisell-steps pisell-steps-mobile-current ${className || ""}` : wrapperClassName,
+      style: showMobileCurrentView ? style : wrapperStyle,
       "data-component": "pisell-steps",
       "data-id": __id
     },
-    /* @__PURE__ */ import_react.default.createElement(
+    showMobileCurrentView ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-steps-mobile-current__info" }, (currentStepItem == null ? void 0 : currentStepItem.title) && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-steps-mobile-current__number" }, currentStepItem.title), (currentStepItem == null ? void 0 : currentStepItem.description) && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-steps-mobile-current__title" }, currentStepItem.description)) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
       import_antd.Steps,
       {
         current: currentStep - initial,
@@ -214,8 +225,7 @@ var PisellSteps = ({
         ...restProps,
         ...other
       }
-    ),
-    showProgressPercent && percent !== void 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-steps-progress-info" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-steps-progress-percent" }, percent, "%"))
+    ), showProgressPercent && percent !== void 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-steps-progress-info" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-steps-progress-percent" }, percent, "%")))
   );
 };
 PisellSteps.displayName = "PisellSteps";

package/lib/components/PisellSteps/PisellSteps.less

@@ -83,7 +83,7 @@
 
 // ============ 可点击样式 ============
 .@{pisell-steps-prefix}-clickable {
-  .ant-steps-item {
+  .ant-steps-item, .pisell-lowcode-steps-item {
     cursor: pointer;
     transition: all 0.3s ease;
 
@@ -320,3 +320,31 @@
     }
   }
 }
+
+// ============ 移动端当前步骤视图 ============
+.@{pisell-steps-prefix}-mobile-current {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  &__number {
+    font-size: 14px;
+    color: black;
+    line-height: 20px;
+  }
+
+  &__title {
+    color: black;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 28px;
+  }
+}

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

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