@pisell/materials 1.0.983 → 1.0.987

package/lib/components/PisellCards/components/index.js

@@ -0,0 +1,51 @@
+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/PisellCards/components/index.tsx
+var components_exports = {};
+__export(components_exports, {
+  GraphicTextCard: () => import_GraphicTextCard.default,
+  MultilevelCard: () => import_MultilevelCard.default,
+  PisellImageCard: () => import_PisellImageCard.default,
+  TabCard: () => import_TabCard.default,
+  TextCard: () => import_TextCard.default
+});
+module.exports = __toCommonJS(components_exports);
+var import_GraphicTextCard = __toESM(require("./GraphicTextCard"));
+var import_TextCard = __toESM(require("./TextCard"));
+var import_TabCard = __toESM(require("./TabCard"));
+var import_MultilevelCard = __toESM(require("./MultilevelCard"));
+var import_PisellImageCard = __toESM(require("./PisellImageCard"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GraphicTextCard,
+  MultilevelCard,
+  PisellImageCard,
+  TabCard,
+  TextCard
+});

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

@@ -0,0 +1,14 @@
+declare const PisellCards: {
+    TabCard: (props: any) => JSX.Element;
+    TextCard: (props: any) => JSX.Element;
+    GraphicTextCard: (props: import("./components/GraphicTextCard").GraphicTextCardProps) => JSX.Element;
+    MultilevelCard: (props: any) => JSX.Element;
+    PisellImageCard: (props: import("./components/PisellImageCard").PisellImageCardProps) => JSX.Element;
+};
+export default PisellCards;
+export type { PisellBasicCardProps } from './types';
+export type { TabCardProps, BadgeConfig } from './components/TabCard/types';
+export type { TextCardProps } from './components/TextCard/types';
+export type { GraphicTextCardProps, GraphicTextCardVariant, GraphicTextCardSize, GraphicConfig, } from './components/GraphicTextCard/types';
+export type { MultilevelCardProps } from './components/MultilevelCard/types';
+export type { PisellImageCardProps, ImageDataSource, ImageFillMode, } from './components/PisellImageCard/types';

package/lib/components/PisellCards/index.js

@@ -0,0 +1,47 @@
+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/PisellCards/index.tsx
+var PisellCards_exports = {};
+__export(PisellCards_exports, {
+  default: () => PisellCards_default
+});
+module.exports = __toCommonJS(PisellCards_exports);
+var import_TabCard = __toESM(require("./components/TabCard"));
+var import_TextCard = __toESM(require("./components/TextCard"));
+var import_GraphicTextCard = __toESM(require("./components/GraphicTextCard"));
+var import_MultilevelCard = __toESM(require("./components/MultilevelCard"));
+var import_PisellImageCard = __toESM(require("./components/PisellImageCard"));
+var PisellCards = {
+  TabCard: import_TabCard.default,
+  TextCard: import_TextCard.default,
+  GraphicTextCard: import_GraphicTextCard.default,
+  MultilevelCard: import_MultilevelCard.default,
+  PisellImageCard: import_PisellImageCard.default
+};
+var PisellCards_default = PisellCards;

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

@@ -0,0 +1,48 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * 基础卡片 Props 定义
+ * 所有业务卡片都应该基于此 Props 进行扩展
+ * 注意：这只是类型定义，不是实体组件
+ */
+export interface PisellBasicCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    __designMode?: boolean;
+    dataSource?: any;
+    /**
+     * 激活状态配置
+     * 用于标识卡片是否处于激活/选中状态
+     */
+    active?: {
+        value: boolean;
+        style?: CSSProperties;
+        className?: string;
+        onChange?: (value: boolean) => void;
+        extra?: any;
+    };
+    /**
+     * 禁用状态配置
+     * 用于标识卡片是否处于禁用状态
+     */
+    disabled?: {
+        value: boolean;
+        style?: CSSProperties;
+        className?: string;
+        onChange?: (value: boolean) => void;
+        extra?: any;
+    };
+    /**
+     * 加载状态配置
+     * 用于标识卡片是否处于加载状态
+     */
+    loading?: {
+        value: boolean;
+        style?: CSSProperties;
+        className?: string;
+        onChange?: (value: boolean) => void;
+        extra?: any;
+    };
+    /**
+     * 卡片内容
+     */
+    children?: ReactNode;
+    onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}

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

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

@@ -3,25 +3,10 @@ import type { PisellProcedureProps } from './types';
 import './PisellProcedure.less';
 /**
  * PisellProcedure 流程容器组件
- * 用于管理多步骤流程，集成步骤导航、内容操作、实时信息反馈和动作执行功能
  *
- * @example
- * ```tsx
- * <PisellProcedure
- *   current={current}
- *   steps={[
- *     { title: '选择服务' },
- *     { title: '填写信息' },
- *     { title: '确认订单' },
- *   ]}
- *   onStepChange={handleStepChange}
- *   contentRender={(current) => <Content step={current} />}
- *   summaryRender={(current) => <Summary step={current} />}
- *   actions={[
- *     { key: 'next', label: '下一步', type: 'primary', onClick: handleNext },
- *   ]}
- * />
- * ```
+ * @description 用于管理多步骤流程的复合容器组件，基于 PisellLayout 实现三段式布局
+ * @author Pisell Team
+ * @version 1.0.0
  */
 declare const PisellProcedure: React.FC<PisellProcedureProps>;
 export default PisellProcedure;

package/lib/components/PisellProcedure/PisellProcedure.js

@@ -33,232 +33,112 @@ __export(PisellProcedure_exports, {
 });
 module.exports = __toCommonJS(PisellProcedure_exports);
 var import_react = __toESM(require("react"));
-var import_classnames = __toESM(require("classnames"));
-var import_ProcedureHeader = __toESM(require("./components/ProcedureHeader"));
-var import_ProcedureContent = __toESM(require("./components/ProcedureContent"));
-var import_ProcedureSummary = __toESM(require("./components/ProcedureSummary"));
-var import_ProcedureAction = __toESM(require("./components/ProcedureAction"));
-var import_useResponsive = require("./hooks/useResponsive");
+var import_pisellLayout = __toESM(require("../pisellLayout"));
+var import_components = require("./components");
+var import_hooks = require("./hooks");
+var import_utils = require("./utils");
+var import_useMobile = require("../../hooks/useMobile");
 var import_PisellProcedure = require("./PisellProcedure.less");
-var PisellProcedure = ({
-  // 基础配置
-  current: controlledCurrent,
-  steps,
-  onStepChange,
-  onClose,
-  onPrev,
-  // 内容渲染
-  contentRender,
-  summaryRender,
-  actions = [],
-  // 布局配置
-  layout = "vertical",
-  bodyLayout = "horizontal",
-  contentWidth = "auto",
-  summaryWidth = 405,
-  // 显示控制
-  showHeader = true,
-  showSummary = true,
-  showAction = true,
-  showPrevButton = true,
-  showCloseButton = true,
-  // 定位配置
-  headerFixed = false,
-  actionMode = "embedded",
-  actionPosition = "bottom",
-  // 交互配置
-  summaryCollapsible = false,
-  summaryDefaultCollapsed = false,
-  validateOnStepChange = true,
-  onValidate,
-  clearOnBack = false,
-  confirmOnDataChange = true,
-  // 样式配置
-  headerClassName,
-  headerStyle,
-  contentClassName,
-  contentStyle,
-  summaryClassName,
-  summaryStyle,
-  actionClassName,
-  actionStyle,
-  className,
-  style,
-  // 插槽配置
-  headerExtra,
-  summaryExtra,
-  actionExtra,
-  // 组件属性透传
-  stepsProps,
-  prevButtonProps,
-  closeButtonProps,
-  // 状态配置
-  loading = false,
-  disabled = false
-}) => {
-  const [internalCurrent, setInternalCurrent] = (0, import_react.useState)(0);
-  const current = controlledCurrent ?? internalCurrent;
-  const [isLoading, setIsLoading] = (0, import_react.useState)(false);
-  const [summaryCollapsed, setSummaryCollapsed] = (0, import_react.useState)(
-    summaryDefaultCollapsed
-  );
-  const responsive = (0, import_useResponsive.useResponsive)();
-  const isMobile = responsive.sm;
-  const mergedLoading = loading || isLoading;
-  (0, import_react.useEffect)(() => {
-    document.body.id = "body";
-  }, []);
-  const showSummaryArea = (0, import_react.useMemo)(() => {
-    return showSummary && !isMobile;
-  }, [showSummary, isMobile]);
-  const bodyStyle = (0, import_react.useMemo)(() => {
-    const baseStyle = {
-      flexDirection: bodyLayout === "vertical" ? "column" : "row"
-    };
-    return baseStyle;
-  }, [bodyLayout]);
-  const mergedContentStyle = (0, import_react.useMemo)(() => {
-    const baseStyle = {
-      ...contentStyle
-    };
-    if (contentWidth !== "auto") {
-      baseStyle.width = typeof contentWidth === "number" ? `${contentWidth}px` : contentWidth;
-    }
-    return baseStyle;
-  }, [contentStyle, contentWidth]);
-  const mergedSummaryStyle = (0, import_react.useMemo)(() => {
-    const baseStyle = {
-      ...summaryStyle
-    };
-    if (summaryWidth) {
-      baseStyle.width = typeof summaryWidth === "number" ? `${summaryWidth}px` : summaryWidth;
-    }
-    return baseStyle;
-  }, [summaryStyle, summaryWidth]);
-  const handleStepChange = (0, import_react.useCallback)(
-    async (nextStep) => {
-      if (validateOnStepChange && onValidate) {
-        setIsLoading(true);
-        try {
-          const isValid = await onValidate(current);
-          if (!isValid) {
-            setIsLoading(false);
-            return;
-          }
-        } catch (error) {
-          console.error("Validation error:", error);
-          setIsLoading(false);
-          return;
-        }
+var PisellProcedure = (props) => {
+  const {
+    // 通用属性
+    className,
+    style,
+    showHeader = true,
+    showSidebar = true,
+    showFooter = true,
+    // 步骤控制
+    defaultCurrent = 0,
+    onStepsChange,
+    // 区域配置
+    headerProps,
+    bodyProps,
+    footerProps,
+    // 事件回调
+    onClose,
+    onPrev,
+    onNext,
+    onFirstStepBack,
+    onBackConfirm,
+    onCloseConfirm,
+    // 低代码属性
+    __designMode,
+    __id,
+    ...other
+  } = props;
+  const isMobile = (0, import_useMobile.useMobile)(744);
+  const { currentStep, goPrev, goNext, goToStep } = (0, import_hooks.useStepManager)({
+    stepsProps: headerProps == null ? void 0 : headerProps.stepsProps,
+    defaultCurrent,
+    onPrev,
+    onNext,
+    onStepsChange
+  });
+  const [summaryModalOpen, setSummaryModalOpen] = (0, import_react.useState)(false);
+  const openSummaryModal = (0, import_react.useCallback)(() => setSummaryModalOpen(true), []);
+  const closeSummaryModal = (0, import_react.useCallback)(() => setSummaryModalOpen(false), []);
+  const footerPosition = (0, import_react.useMemo)(() => {
+    if (isMobile) return "float-all";
+    return (footerProps == null ? void 0 : footerProps.position) || "float-sidebar";
+  }, [isMobile, footerProps == null ? void 0 : footerProps.position]);
+  const containerCls = (0, import_react.useMemo)(() => {
+    return (0, import_utils.mergeClassNames)(
+      "pisell-procedure",
+      className,
+      (0, import_utils.modifierClassName)("pisell-procedure", `footer-${footerPosition}`)
+    );
+  }, [className, footerPosition]);
+  const footerIsGlobal = (0, import_utils.isFooterGlobal)(footerPosition);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: containerCls,
+      style,
+      "data-component": "pisell-procedure",
+      "data-id": __id,
+      ...other
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_pisellLayout.default, null, showHeader && /* @__PURE__ */ import_react.default.createElement(
+      import_components.ProcedureHeader,
+      {
+        headerProps,
+        currentStep,
+        goPrev,
+        onClose,
+        onFirstStepBack,
+        onBackConfirm,
+        onCloseConfirm,
+        goToStep
       }
-      try {
-        await (onStepChange == null ? void 0 : onStepChange(nextStep));
-      } catch (error) {
-        console.error("Step change error:", error);
-        setIsLoading(false);
-        return;
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_components.ProcedureBody,
+      {
+        bodyProps,
+        footerProps,
+        footerPosition,
+        showFooter: showFooter && !footerIsGlobal,
+        showSidebar,
+        summaryModalOpen,
+        onOpenSummaryModal: openSummaryModal,
+        onCloseSummaryModal: closeSummaryModal,
+        goPrev,
+        goNext
       }
-      if (controlledCurrent === void 0) {
-        setInternalCurrent(nextStep);
+    ), showFooter && footerIsGlobal && /* @__PURE__ */ import_react.default.createElement(
+      import_components.ProcedureFooter,
+      {
+        footerProps,
+        position: footerPosition,
+        isGlobal: true,
+        sidebarContent: bodyProps == null ? void 0 : bodyProps.sidebarSlot,
+        summaryModalOpen,
+        onOpenSummaryModal: openSummaryModal,
+        onCloseSummaryModal: closeSummaryModal,
+        goPrev,
+        goNext
       }
-      setIsLoading(false);
-    },
-    [current, controlledCurrent, validateOnStepChange, onValidate, onStepChange]
+    ))
   );
-  const handlePrev = (0, import_react.useCallback)(() => {
-    if (current > 0) {
-      if (onPrev) {
-        onPrev();
-      } else {
-        handleStepChange(current - 1);
-      }
-    }
-  }, [current, onPrev, handleStepChange]);
-  const handleClose = (0, import_react.useCallback)(() => {
-    onClose == null ? void 0 : onClose();
-  }, [onClose]);
-  const handleSummaryCollapseChange = (0, import_react.useCallback)((collapsed) => {
-    setSummaryCollapsed(collapsed);
-  }, []);
-  const mergedClassName = (0, import_react.useMemo)(() => {
-    return (0, import_classnames.default)(
-      "pisell-procedure",
-      `pisell-procedure-layout-${layout}`,
-      `pisell-procedure-body-${bodyLayout}`,
-      {
-        "pisell-procedure-loading": mergedLoading,
-        "pisell-procedure-disabled": disabled,
-        "pisell-procedure-mobile": isMobile,
-        "pisell-procedure-header-fixed": headerFixed,
-        "pisell-procedure-action-float": actionMode === "float",
-        "pisell-procedure-action-embedded": actionMode === "embedded"
-      },
-      className
-    );
-  }, [
-    layout,
-    bodyLayout,
-    mergedLoading,
-    disabled,
-    isMobile,
-    headerFixed,
-    actionMode,
-    className
-  ]);
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: mergedClassName, style }, showHeader && /* @__PURE__ */ import_react.default.createElement(
-    import_ProcedureHeader.default,
-    {
-      current,
-      steps,
-      stepsProps,
-      showPrevButton,
-      showCloseButton,
-      onPrev: handlePrev,
-      onClose: handleClose,
-      onStepClick: handleStepChange,
-      headerExtra,
-      prevButtonProps,
-      closeButtonProps,
-      fixed: headerFixed,
-      className: headerClassName,
-      style: headerStyle,
-      disabled: disabled || mergedLoading
-    }
-  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-body", style: bodyStyle }, /* @__PURE__ */ import_react.default.createElement(
-    import_ProcedureContent.default,
-    {
-      current,
-      contentRender,
-      className: contentClassName,
-      style: mergedContentStyle,
-      loading: mergedLoading
-    }
-  ), showSummaryArea && summaryRender && /* @__PURE__ */ import_react.default.createElement(
-    import_ProcedureSummary.default,
-    {
-      current,
-      summaryRender,
-      collapsible: summaryCollapsible,
-      defaultCollapsed: summaryDefaultCollapsed,
-      onCollapseChange: handleSummaryCollapseChange,
-      summaryExtra,
-      className: summaryClassName,
-      style: mergedSummaryStyle,
-      visible: !summaryCollapsed
-    }
-  )), showAction && actions.length > 0 && /* @__PURE__ */ import_react.default.createElement(
-    import_ProcedureAction.default,
-    {
-      actions,
-      mode: actionMode,
-      position: actionPosition,
-      actionExtra,
-      className: actionClassName,
-      style: actionStyle,
-      disabled,
-      loading: mergedLoading
-    }
-  ));
 };
 PisellProcedure.displayName = "PisellProcedure";
 var PisellProcedure_default = PisellProcedure;