@pisell/materials 6.11.239 → 6.11.241

package/lib/components/pisellLookup/components/LookupResultHost.js

@@ -34,8 +34,8 @@ __export(LookupResultHost_exports, {
 module.exports = __toCommonJS(LookupResultHost_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
-var import_icons = require("@ant-design/icons");
 var import_locales = require("../../../locales");
+var import_pisellContainer = __toESM(require("../../pisellContainer"));
 var LookupResultHost = (props) => {
   const {
     displayType,
@@ -44,9 +44,14 @@ var LookupResultHost = (props) => {
     children,
     modalWidth = 834,
     modalStyle,
+    modalCentered = false,
+    modalTransitionName,
     getContainer,
     drawerWidth = 378,
+    drawerHeight,
     drawerPlacement = "right",
+    drawerTitle = (0, import_locales.getText)("pisell-lookup-confirm-button-text"),
+    drawerClosable = true,
     popupWidth,
     containerStyle,
     containerClassName,
@@ -109,26 +114,32 @@ var LookupResultHost = (props) => {
     ].filter(Boolean).join(" ");
     const wrapClassName = hasCustomContainer ? "pisell-lookup-modal-custom-container" : "";
     return /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Modal,
+      import_pisellContainer.default,
       {
-        open: visible,
-        onCancel: onClose,
-        footer: null,
-        width: modalWidth,
-        style: { top: 0, ...modalStyle },
-        getContainer,
-        mask,
-        maskClosable: effectiveMaskClosable,
-        zIndex,
-        rootClassName: modalRootClassName,
-        className: modalClassName,
-        wrapClassName,
-        closeIcon: null,
-        destroyOnClose: true,
-        title: null,
-        afterOpenChange: (open) => {
-          if (open && onAfterOpen) {
-            onAfterOpen();
+        renderType: "modal",
+        props: {
+          open: visible,
+          onCancel: onClose,
+          footer: null,
+          header: false,
+          closable: false,
+          width: modalWidth,
+          centered: modalCentered,
+          transitionName: modalTransitionName,
+          style: { top: 0, ...modalStyle },
+          getContainer,
+          mask,
+          maskClosable: effectiveMaskClosable,
+          zIndex,
+          rootClassName: modalRootClassName,
+          className: modalClassName,
+          wrapClassName,
+          destroyOnClose: true,
+          title: null,
+          afterOpenChange: (open) => {
+            if (open && onAfterOpen) {
+              onAfterOpen();
+            }
           }
         }
       },
@@ -139,22 +150,26 @@ var LookupResultHost = (props) => {
     const effectiveMaskClosable = mask ? maskClosable : false;
     const drawerClassName = `pisell-lookup-drawer-container ${!mask ? "pisell-lookup-drawer-no-mask" : ""} ${containerClassName || ""}`;
     return /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Drawer,
+      import_pisellContainer.default,
       {
-        open: visible,
-        onClose,
-        width: drawerWidth,
-        placement: drawerPlacement,
-        mask,
-        maskClosable: effectiveMaskClosable,
-        zIndex,
-        className: drawerClassName,
-        closeIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, null),
-        destroyOnClose: true,
-        title: (0, import_locales.getText)("pisell-lookup-confirm-button-text"),
-        afterOpenChange: (open) => {
-          if (open && onAfterOpen) {
-            onAfterOpen();
+        renderType: "drawer",
+        props: {
+          open: visible,
+          onClose,
+          width: drawerWidth,
+          height: drawerHeight,
+          placement: drawerPlacement,
+          mask,
+          maskClosable: effectiveMaskClosable,
+          zIndex,
+          className: drawerClassName,
+          closable: drawerClosable,
+          destroyOnClose: true,
+          title: drawerTitle,
+          afterOpenChange: (open) => {
+            if (open && onAfterOpen) {
+              onAfterOpen();
+            }
           }
         }
       },

package/lib/components/pisellLookup/components/LookupTrigger.js

@@ -196,6 +196,8 @@ var LookupTriggerComponent = (0, import_react.forwardRef)(
         {
           type: "primary",
           size,
+          loading,
+          disabled,
           onClick: handleConfirm,
           className: "pisell-lookup-input-confirm"
         },

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

@@ -84,6 +84,11 @@ export interface LookupInputRenderContext {
  * PisellLookup 组件 Props
  */
 export interface PisellLookupProps {
+    /**
+     * 是否渲染外部触发器；受控打开浮层时可关闭。
+     * @default true
+     */
+    showTrigger?: boolean;
     /**
      * 预设触发器类型（与 trigger 互斥）
      * @default 'input'
@@ -189,6 +194,12 @@ export interface PisellLookupProps {
      * @param keyword 搜索关键词
      */
     onSearch?: (keyword: string) => void;
+    /**
+     * 是否允许重复确认同一个关键词。
+     * 适用于提交失败后需要原值重试的场景；默认保持去重行为。
+     * @default false
+     */
+    allowRepeatSearch?: boolean;
     /**
      * 是否显示扫码按钮
      * @default true
@@ -299,6 +310,13 @@ export interface PisellLookupProps {
      * Modal 自定义样式
      */
     modalStyle?: React.CSSProperties;
+    /**
+     * Modal 是否使用容器原生的垂直居中布局。
+     * @default false
+     */
+    modalCentered?: boolean;
+    /** Modal 进出场动画名称。 */
+    modalTransitionName?: string;
     /**
      * Modal 挂载节点
      * - HTMLElement: 挂载到指定的 DOM 节点
@@ -313,11 +331,17 @@ export interface PisellLookupProps {
      * @default 378
      */
     drawerWidth?: number | string;
+    /** Drawer 高度；placement 为 top / bottom 时生效。 */
+    drawerHeight?: number | string;
     /**
      * Drawer 位置
      * @default 'right'
      */
     drawerPlacement?: DrawerPlacement;
+    /** Drawer 标题；传 null 可隐藏默认标题。 */
+    drawerTitle?: React.ReactNode | null;
+    /** 是否展示 Drawer 自带关闭按钮。 */
+    drawerClosable?: boolean;
     /**
      * Popup 宽度
      */
@@ -394,6 +418,8 @@ export interface PisellLookupProps {
      * ```
      */
     inputRender?: (ctx: LookupInputRenderContext) => React.ReactNode;
+    /** Modal / Drawer 内置搜索栏上方的自定义内容。 */
+    headerRender?: React.ReactNode | (() => React.ReactNode);
     /**
      * 自定义类名
      */
@@ -631,6 +657,10 @@ export interface LookupResultHostProps {
      * Modal 宽度
      */
     modalWidth?: number | string;
+    /** Modal 是否垂直居中 */
+    modalCentered?: boolean;
+    /** Modal 进出场动画名称 */
+    modalTransitionName?: string;
     /**
      * Modal 样式
      */
@@ -643,10 +673,16 @@ export interface LookupResultHostProps {
      * Drawer 宽度
      */
     drawerWidth?: number | string;
+    /** Drawer 高度 */
+    drawerHeight?: number | string;
     /**
      * Drawer 位置
      */
     drawerPlacement?: DrawerPlacement;
+    /** Drawer 标题 */
+    drawerTitle?: React.ReactNode | null;
+    /** 是否展示 Drawer 自带关闭按钮 */
+    drawerClosable?: boolean;
     /**
      * Popup 宽度
      */

package/lib/index.d.ts

@@ -128,7 +128,7 @@ export { default as PisellUpload } from './components/pisellUpload';
 export { default as Translation } from './components/translation';
 export { PisellLookup } from './components/pisellLookup';
 export type { PisellLookupProps, PisellLookupRef, LookupInputRenderContext, } from './components/pisellLookup';
-export { PisellFind } from './components/pisellFind';
+export { FIND_FALLBACK_SCANNER_COUNT_KEY, PisellFind, } from './components/pisellFind';
 export type { PisellFindProps, PisellFindRef } from './components/pisellFind';
 export { default as DataSourceForm } from './components/dataSourceComponents/dataSourceForm';
 export { default as FormGroup } from './components/dataSourceComponents/dataSourceForm/group';

package/lib/index.js

@@ -80,6 +80,7 @@ __export(src_exports, {
   Dropdown: () => import_dropdown.default,
   EMPTY_FLOOR_MAP_LAYOUT_CONTEXT: () => import_pisellFloorMapLayout.EMPTY_FLOOR_MAP_LAYOUT_CONTEXT,
   Empty: () => import_antd.Empty,
+  FIND_FALLBACK_SCANNER_COUNT_KEY: () => import_pisellFind.FIND_FALLBACK_SCANNER_COUNT_KEY,
   FLOOR_MAP_BUILTIN_SHAPES: () => import_pisellFloorMapLayout.FLOOR_MAP_BUILTIN_SHAPES,
   FLOOR_MAP_BUILTIN_SHAPE_ELEMENT_KIND: () => import_pisellFloorMapLayout.FLOOR_MAP_BUILTIN_SHAPE_ELEMENT_KIND,
   FLOOR_MAP_IMAGE_ELEMENT_KIND: () => import_pisellFloorMapLayout.FLOOR_MAP_IMAGE_ELEMENT_KIND,
@@ -590,6 +591,7 @@ var import_walletCard = __toESM(require("./components/walletCard"));
   Dropdown,
   EMPTY_FLOOR_MAP_LAYOUT_CONTEXT,
   Empty,
+  FIND_FALLBACK_SCANNER_COUNT_KEY,
   FLOOR_MAP_BUILTIN_SHAPES,
   FLOOR_MAP_BUILTIN_SHAPE_ELEMENT_KIND,
   FLOOR_MAP_IMAGE_ELEMENT_KIND,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "6.11.239",
+  "version": "6.11.241",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -96,8 +96,8 @@
     "antd-mobile": "^5.38.1",
     "vod-js-sdk-v6": "^1.4.11",
     "@pisell/date-picker": "3.0.10",
-    "@pisell/icon": "0.0.11",
-    "@pisell/utils": "3.0.4"
+    "@pisell/utils": "3.0.4",
+    "@pisell/icon": "0.0.11"
   },
   "peerDependencies": {
     "react": "^18.0.0",

package/es/components/PisellGroupView/PisellGroupView.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { PisellGroupViewProps } from './types';
-import './PisellGroupView.less';
-/**
- * 使用 memo 优化性能：props 未变化时跳过重渲染
- */
-declare const MemoizedPisellGroupView: <T>(props: PisellGroupViewProps<T>) => React.JSX.Element;
-export { MemoizedPisellGroupView as PisellGroupView };
-export default MemoizedPisellGroupView;

package/es/components/PisellGroupView/PisellGroupView.stories.d.ts

@@ -1,27 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import PisellGroupView from './PisellGroupView';
-/**
- * PisellGroupView 分组展示组件
- *
- * 通用、数据无关的「分组展示容器」：先按条件把列表分组，
- * 再为每个分组渲染 头部 / 统计 / 主体 / 操作 四块，各块均可自定义渲染。
- */
-declare const meta: Meta<typeof PisellGroupView>;
-export default meta;
-declare type Story = StoryObj<typeof PisellGroupView>;
-/**
- * 基础用法：按「商品 + 时间」组合分组，展示四块结构
- */
-export declare const Basic: Story;
-/**
- * 单字段分组 + 主体多列布局（itemLayout 对象，内部使用 PisellBasicGrid）
- */
-export declare const GridBody: Story;
-/**
- * 利用 ItemContext.groupKeys 在主体卡片中省略「头部已展示」的字段
- */
-export declare const OmitHeaderFields: Story;
-/**
- * 空数据态
- */
-export declare const Empty: Story;

package/es/components/PisellGroupView/index.d.ts

@@ -1,6 +0,0 @@
-/**
- * PisellGroupView 组件导出
- * @description 通用、数据无关的分组展示容器
- */
-export { PisellGroupView, default } from './PisellGroupView';
-export type { PisellGroupViewProps, GroupModel, GroupBlocks, ItemContext, ItemLayout, GroupViewVariant, } from './types';

package/es/components/PisellGroupView/types.d.ts

@@ -1,124 +0,0 @@
-import type { CSSProperties, ReactNode } from 'react';
-import type { GroupKey, GroupResult } from '@pisell/utils';
-/**
- * 单个分组的数据模型
- * @template T - 数据项类型
- * @description 复用 `@pisell/utils` 的 `GroupResult`，包含 groupId、keys、keyMap、items 等
- */
-export declare type GroupModel<T> = GroupResult<T>;
-/**
- * 主体（第三块）渲染单条数据时的上下文
- * @template T - 数据项类型
- */
-export interface ItemContext<T> {
-    /** 当前数据所属分组 */
-    group: GroupModel<T>;
-    /** 当前数据在分组内的下标 */
-    index: number;
-    /**
-     * 参与分组的字段名列表
-     * @description
-     * 调用方可据此在卡片中省略「头部已展示」的字段，避免重复展示。
-     * 当使用自定义函数分组时，该数组为空。
-     */
-    groupKeys: string[];
-}
-/**
- * 主体（第三块）的布局配置
- * @description
- * - `'stack'`：纵向堆叠每条卡片（默认）
- * - 对象：透传给内部 `PisellBasicGrid` 实现多列/横向布局
- */
-export declare type ItemLayout = 'stack' | {
-    /** 一行显示的卡片数 */
-    columns?: number;
-    /** 卡片间距 */
-    gap?: number | string;
-    /** 排列方向 */
-    direction?: 'horizontal' | 'vertical';
-    /** 是否换行 */
-    wrap?: 'wrap' | 'nowrap';
-};
-/**
- * 一个分组渲染出的四块内容
- * @description 透传给 `renderGroup`，便于调用方自定义整组容器但复用四块默认内容
- */
-export interface GroupBlocks {
-    /** ① 头部：分组条件对应的相同信息 */
-    header: ReactNode;
-    /** ② 统计栏：来自分组数据的统计信息 */
-    stats: ReactNode;
-    /** ③ 主体：分组内所有条目（卡片） */
-    body: ReactNode;
-    /** ④ 操作区：批量操作 */
-    actions: ReactNode;
-}
-/**
- * 多端 variant
- * @description 仅用于在根节点追加 `--${variant}` class，由 Less 控制展示差异
- */
-export declare type GroupViewVariant = 'desktop' | 'tablet' | 'pos' | 'phone';
-/**
- * PisellGroupView 组件 Props
- * @template T - 数据项类型
- * @description
- * 通用、数据无关的「分组展示容器」：先按 `groupBy` 将 `dataSource` 分组，
- * 再为每个分组渲染头部 / 统计 / 主体 / 操作四块，各块均可由外部自定义渲染。
- */
-export interface PisellGroupViewProps<T = unknown> {
-    /** 数据源（应为外部已映射好的列表） */
-    dataSource: T[];
-    /**
-     * 分组规则
-     * @description
-     * - `string`：单字段路径，支持 `'a.b.c'` 点路径
-     * - `string[]`：多字段组合（如 `['productId', 'time']`）
-     * - `(item, index) => GroupKey | GroupKey[]`：完全自定义
-     */
-    groupBy: string | string[] | ((item: T, index: number) => GroupKey | GroupKey[]);
-    /** 自定义分组 id 生成，默认各键以 `|` 拼接 */
-    getGroupId?: (keys: GroupKey[]) => string;
-    /** 分组之间的排序；不传保持首次出现顺序 */
-    sortGroups?: (a: GroupModel<T>, b: GroupModel<T>) => number;
-    /** 分组内数据项的排序；不传保持原始相对顺序 */
-    sortItems?: (a: T, b: T) => number;
-    /** ① 头部：分组条件对应的相同信息（时间、商品名、客户等） */
-    renderHeader?: (group: GroupModel<T>) => ReactNode;
-    /** ② 统计栏：可自定义展示，数据来源于分组后的数据 */
-    renderStats?: (group: GroupModel<T>) => ReactNode;
-    /** ③ 主体：渲染分组内的单条数据为卡片 */
-    renderItem?: (item: T, ctx: ItemContext<T>) => ReactNode;
-    /** ④ 操作区：批量操作（加时、编辑等） */
-    renderActions?: (group: GroupModel<T>) => ReactNode;
-    /**
-     * 主体布局
-     * @default 'stack'
-     */
-    itemLayout?: ItemLayout;
-    /**
-     * 自定义主体容器
-     * @param group - 当前分组
-     * @param defaultBody - 组件按 `itemLayout` + `renderItem` 渲染出的默认主体
-     */
-    renderBody?: (group: GroupModel<T>, defaultBody: ReactNode) => ReactNode;
-    /**
-     * 自定义整组容器
-     * @param group - 当前分组
-     * @param blocks - 四块默认内容（header/stats/body/actions）
-     * @description 提供后将完全接管单个分组的结构，调用方可自由编排四块顺序与包裹
-     */
-    renderGroup?: (group: GroupModel<T>, blocks: GroupBlocks) => ReactNode;
-    /** 数据源为空时的渲染 */
-    renderEmpty?: () => ReactNode;
-    /**
-     * 主体内单条卡片的 key
-     * @description 不传时使用 index（仅在列表无增删改时安全）
-     */
-    rowKey?: string | ((item: T, index: number) => string);
-    /** 多端 variant，仅追加根节点 class */
-    variant?: GroupViewVariant;
-    /** 自定义类名 */
-    className?: string;
-    /** 自定义样式 */
-    style?: CSSProperties;
-}

package/es/components/PisellGroupView/utils/index.d.ts

@@ -1,20 +0,0 @@
-import type { PisellGroupViewProps } from '../types';
-/**
- * 组件样式前缀
- */
-export declare const COMPONENT_PREFIX = "pisell-group-view";
-/**
- * 解析参与分组的字段名列表
- * @param groupBy - 组件的 groupBy 配置
- * @returns 字段名数组；自定义函数分组时返回空数组
- * @description 用于透传给 `renderItem`，让调用方据此省略头部已展示的字段
- */
-export declare const getGroupFieldNames: <T>(groupBy: string | string[] | ((item: T, index: number) => any)) => string[];
-/**
- * 获取主体内单条数据的稳定 key
- * @param item - 数据项
- * @param index - 索引
- * @param rowKey - rowKey 配置
- * @returns key 字符串
- */
-export declare const resolveItemKey: <T>(item: T, index: number, rowKey?: string | ((item: T, index: number) => string) | undefined) => string;

package/es/components/PisellProcedure/PisellProcedure.stories.d.ts

@@ -1,163 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import PisellProcedure from './PisellProcedure';
-/**
- * PisellProcedure 流程容器组件
- *
- * 用于管理多步骤流程的复合容器组件，基于 PisellLayout 实现三段式布局
- * 包含头部区域（步骤条）、主体区域（内容区+信息区）、底部区域（操作按钮）
- */
-declare const meta: Meta<typeof PisellProcedure>;
-export default meta;
-declare type Story = StoryObj<typeof PisellProcedure>;
-/**
- * 基础用法
- * @description 默认流程容器，包含头部、主体、底部三个区域
- */
-export declare const Default: Story;
-/**
- * 页面模式
- * @description 默认模式，支持响应式和移动端适配
- */
-export declare const PageMode: Story;
-/**
- * 弹窗模式
- * @description 用于弹窗场景，不应用移动端适配
- */
-export declare const ModalMode: Story;
-/**
- * 步骤控制
- * @description 使用 onStepsChange 监听步骤变化
- */
-export declare const StepControl: Story;
-/**
- * 步骤拦截
- * @description 通过 onNext/onPrev 返回 false 阻止步骤切换
- */
-export declare const StepIntercept: Story;
-/**
- * 无侧边栏
- */
-export declare const WithoutSidebar: Story;
-/**
- * 无头部
- */
-export declare const WithoutHeader: Story;
-/**
- * 无底部
- */
-export declare const WithoutFooter: Story;
-/**
- * 最小配置
- * @description 仅显示主体内容
- */
-export declare const MinimalConfig: Story;
-/**
- * 头部插槽顺序 - 默认
- * @description left 在左，right 在右
- */
-export declare const HeaderSlotDefault: Story;
-/**
- * 头部插槽顺序 - 反转
- * @description left 在右，right 在左
- */
-export declare const HeaderSlotReverse: Story;
-/**
- * 隐藏步骤条
- * @description 仅显示头部插槽，不显示步骤条
- */
-export declare const HideSteps: Story;
-/**
- * 第一步显示返回按钮
- * @description 通过 showBackOnFirstStep 控制
- */
-export declare const ShowBackOnFirstStep: Story;
-/**
- * 返回确认弹窗
- * @description 点击返回时弹出确认弹窗
- */
-export declare const BackConfirmModal: Story;
-/**
- * 关闭确认弹窗
- * @description 点击关闭时弹出确认弹窗
- */
-export declare const CloseConfirmModal: Story;
-/**
- * 主体布局 - 比例布局
- * @description 使用比例分配内容区和侧边栏宽度
- */
-export declare const BodyRatioLayout: Story;
-/**
- * 主体布局 - 固定宽度
- * @description 侧边栏使用固定宽度
- */
-export declare const BodyFixedLayout: Story;
-/**
- * 主体布局 - 垂直布局
- * @description 内容区和侧边栏上下排列
- */
-export declare const BodyVerticalLayout: Story;
-/**
- * 主体布局 - 内容顺序反转
- * @description 侧边栏在左/上，内容区在右/下
- */
-export declare const BodyContentOrderReverse: Story;
-/**
- * 底部位置 - 悬浮在侧边栏
- * @description 默认位置，底部悬浮在侧边栏区域
- */
-export declare const FooterFloatSidebar: Story;
-/**
- * 底部位置 - 固定在整体底部
- */
-export declare const FooterFixedBottom: Story;
-/**
- * 底部位置 - 悬浮在整体区域
- * @description 移动端默认使用此模式
- */
-export declare const FooterFloatAll: Story;
-/**
- * 底部位置 - 悬浮在内容区
- */
-export declare const FooterFloatContent: Story;
-/**
- * 底部位置 - 内嵌在内容区底部
- */
-export declare const FooterFixedContentBottom: Story;
-/**
- * 底部位置 - 内嵌在侧边栏底部
- */
-export declare const FooterFixedSidebarBottom: Story;
-/**
- * 移动端总结按钮
- * @description 移动端显示总结按钮，点击可查看侧边栏内容
- */
-export declare const MobileSummaryButton: Story;
-/**
- * 溢出收纳功能
- * @description 当宽度不足时，按钮会被收纳到 More 菜单中
- */
-export declare const OverflowActions: Story;
-/**
- * 禁用溢出收纳
- * @description 不启用溢出收纳，按钮会换行显示
- */
-export declare const DisableOverflow: Story;
-/**
- * 完整示例 - 购物流程
- * @description 模拟真实的购物流程
- */
-export declare const ShoppingFlow: Story;
-/**
- * 完整示例 - 注册流程
- * @description 模拟用户注册流程
- */
-export declare const RegistrationFlow: Story;
-/**
- * 完整示例 - 表单向导
- * @description 多步表单向导
- */
-export declare const FormWizard: Story;
-/**
- * 交互测试 - 组件渲染
- */
-export declare const InteractionTest: Story;

package/es/components/PisellScrollView/PisellScrollView.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { PisellScrollViewProps, PisellScrollViewRef } from './types';
-import './PisellScrollView.less';
-declare const PisellScrollView: React.ForwardRefExoticComponent<Omit<PisellScrollViewProps, "ref"> & React.RefAttributes<PisellScrollViewRef>>;
-export default PisellScrollView;