@pisell/materials 1.0.1057 → 1.0.1059

package/lib/components/dataSourceComponents/fields/Tabs/Tabs.less

@@ -13,6 +13,14 @@
   background-color: rgba(0, 0, 0, .04);
   overflow-x: auto;
 
+  /* 隐藏滚动条：兼容 WebKit（Chrome/Safari/Edge）、Firefox、IE/Edge 旧版 */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
   &-item {
     min-height: 36px;
     min-width: 90px;

package/lib/components/pisellActionPanel/PisellActionPanel.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { PisellActionPanelProps } from './types';
+import './PisellActionPanel.less';
+/**
+ * PisellActionPanel 操作面板
+ * 用于统一承载、编排和呈现一组用户可执行操作（Actions）的 Pro 组件。
+ * 支持分组、布局、对齐、主/次/危险层级与条件显隐。
+ *
+ * 设计文档：Action Panel (pcp_ge_actionPanel_V1.0)
+ *
+ * @param props 组件 Props
+ */
+export declare function PisellActionPanel({ groups, layout, align, overflowStrategy, groupGap, itemGap, className, style, }: PisellActionPanelProps): JSX.Element;

package/lib/components/pisellActionPanel/PisellActionPanel.js

@@ -0,0 +1,124 @@
+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/pisellActionPanel/PisellActionPanel.tsx
+var PisellActionPanel_exports = {};
+__export(PisellActionPanel_exports, {
+  PisellActionPanel: () => PisellActionPanel
+});
+module.exports = __toCommonJS(PisellActionPanel_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var import_PisellActionPanel = require("./PisellActionPanel.less");
+function renderActionItem(item, index) {
+  const visible = item.visible !== false;
+  if (!visible) return null;
+  const key = item.key ?? `action-${index}`;
+  const priority = item.priority ?? "default";
+  const buttonType = priority === "danger" ? "primary" : priority === "primary" ? "primary" : "default";
+  const danger = priority === "danger";
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Button,
+    {
+      key,
+      type: buttonType,
+      danger,
+      icon: item.icon,
+      onClick: item.onClick,
+      disabled: item.disabled,
+      className: (0, import_classnames.default)("pisell-action-panel-btn", item.className),
+      style: item.style
+    },
+    item.label
+  );
+}
+function PisellActionPanel({
+  groups,
+  layout = "horizontal",
+  align = "left",
+  overflowStrategy = "wrap",
+  groupGap,
+  itemGap,
+  className,
+  style
+}) {
+  const effectiveGroups = (0, import_react.useMemo)(() => {
+    return groups.filter((g) => g.visible !== false).map((g) => ({
+      ...g,
+      items: g.items.filter((i) => i.visible !== false)
+    })).filter((g) => g.items.length > 0);
+  }, [groups]);
+  const rootStyle = (0, import_react.useMemo)(() => {
+    const s = { ...style };
+    if (groupGap !== void 0) {
+      s.gap = typeof groupGap === "number" ? `${groupGap}px` : groupGap;
+    }
+    return s;
+  }, [style, groupGap]);
+  const itemGapValue = typeof itemGap === "number" ? itemGap : itemGap ?? 8;
+  const isVertical = layout === "vertical";
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)(
+        "pisell-action-panel-root",
+        `pisell-action-panel-layout-${layout}`,
+        `pisell-action-panel-align-${align}`,
+        overflowStrategy === "scroll" && "pisell-action-panel-overflow-scroll",
+        overflowStrategy === "wrap" && "pisell-action-panel-overflow-wrap",
+        className
+      ),
+      style: rootStyle
+    },
+    effectiveGroups.map((group, groupIndex) => /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: group.key ?? `group-${groupIndex}`,
+        className: (0, import_classnames.default)("pisell-action-panel-group", group.className),
+        style: group.style
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Space,
+        {
+          size: itemGapValue,
+          direction: isVertical ? "vertical" : "horizontal",
+          wrap: !isVertical && overflowStrategy === "wrap",
+          className: "pisell-action-panel-group-space"
+        },
+        group.items.map(
+          (item, itemIndex) => renderActionItem(item, itemIndex)
+        )
+      )
+    ))
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellActionPanel
+});

package/lib/components/pisellActionPanel/PisellActionPanel.less

@@ -0,0 +1,69 @@
+/**
+ * PisellActionPanel 样式
+ * 操作面板：分组、布局、对齐；不设置 font-family，使用项目统一配置
+ * 覆盖 antd 时使用 pisell-lowcode-xxx
+ */
+
+.pisell-action-panel-root {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  min-width: 0;
+  box-sizing: border-box;
+
+  &.pisell-action-panel-layout-horizontal {
+    flex-direction: row;
+  }
+
+  &.pisell-action-panel-layout-vertical {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  &.pisell-action-panel-layout-grid {
+    display: grid;
+    grid-auto-flow: column;
+    align-items: center;
+  }
+
+  &.pisell-action-panel-align-left {
+    justify-content: flex-start;
+  }
+
+  &.pisell-action-panel-align-center {
+    justify-content: center;
+  }
+
+  &.pisell-action-panel-align-right {
+    justify-content: flex-end;
+  }
+
+  &.pisell-action-panel-align-space-between {
+    justify-content: space-between;
+  }
+
+  &.pisell-action-panel-overflow-wrap {
+    flex-wrap: wrap;
+  }
+
+  &.pisell-action-panel-overflow-scroll {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+}
+
+.pisell-action-panel-group {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.pisell-action-panel-group-space {
+  display: inline-flex;
+  min-width: 0;
+}
+
+.pisell-action-panel-btn {
+  flex-shrink: 0;
+}

package/lib/components/pisellActionPanel/PisellActionPanel.stories.d.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellActionPanel } from './PisellActionPanel';
+declare const meta: Meta<typeof PisellActionPanel>;
+export default meta;
+declare type Story = StoryObj<typeof PisellActionPanel>;
+/** 默认：单组两按钮 */
+export declare const Default: Story;
+/** 右对齐（表单底部常见） */
+export declare const AlignRight: Story;
+/** 多组：主操作 + 危险操作 */
+export declare const MultipleGroups: Story;
+/** 竖向布局 */
+export declare const VerticalLayout: Story;
+/** 条件显隐（某条 visible: false） */
+export declare const ConditionalVisible: Story;
+/** 居中 */
+export declare const AlignCenter: Story;
+/** space-between 两端对齐 */
+export declare const SpaceBetween: Story;

package/lib/components/pisellActionPanel/PisellActionPanel.stories.js

@@ -0,0 +1,186 @@
+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/pisellActionPanel/PisellActionPanel.stories.tsx
+var PisellActionPanel_stories_exports = {};
+__export(PisellActionPanel_stories_exports, {
+  AlignCenter: () => AlignCenter,
+  AlignRight: () => AlignRight,
+  ConditionalVisible: () => ConditionalVisible,
+  Default: () => Default,
+  MultipleGroups: () => MultipleGroups,
+  SpaceBetween: () => SpaceBetween,
+  VerticalLayout: () => VerticalLayout,
+  default: () => PisellActionPanel_stories_default
+});
+module.exports = __toCommonJS(PisellActionPanel_stories_exports);
+var import_icons = require("@ant-design/icons");
+var import_PisellActionPanel = require("./PisellActionPanel");
+var meta = {
+  title: "General/PisellActionPanel",
+  component: import_PisellActionPanel.PisellActionPanel,
+  tags: ["autodocs"],
+  argTypes: {
+    layout: {
+      description: "布局方式",
+      control: "select",
+      options: ["horizontal", "vertical", "grid"]
+    },
+    align: {
+      description: "对齐方式",
+      control: "select",
+      options: ["left", "center", "right", "space-between"]
+    },
+    overflowStrategy: {
+      description: "溢出策略",
+      control: "select",
+      options: ["wrap", "scroll", "moreMenu"]
+    }
+  },
+  args: {
+    groups: [
+      {
+        items: [
+          { label: "取消", onClick: () => console.log("取消") },
+          { label: "确定", priority: "primary", onClick: () => console.log("确定") }
+        ]
+      }
+    ]
+  }
+};
+var PisellActionPanel_stories_default = meta;
+var Default = {
+  args: {
+    groups: [
+      {
+        items: [
+          { label: "取消", onClick: () => console.log("取消") },
+          { label: "确定", priority: "primary", onClick: () => console.log("确定") }
+        ]
+      }
+    ]
+  }
+};
+var AlignRight = {
+  args: {
+    groups: [
+      {
+        items: [
+          { label: "取消", onClick: () => console.log("取消") },
+          { label: "提交", priority: "primary", onClick: () => console.log("提交") }
+        ]
+      }
+    ],
+    align: "right",
+    groupGap: 16,
+    itemGap: 8
+  }
+};
+var MultipleGroups = {
+  args: {
+    groups: [
+      {
+        items: [
+          { label: "编辑", icon: /* @__PURE__ */ React.createElement(import_icons.EditOutlined, null), onClick: () => console.log("编辑") },
+          { label: "删除", icon: /* @__PURE__ */ React.createElement(import_icons.DeleteOutlined, null), priority: "danger", onClick: () => console.log("删除") }
+        ]
+      },
+      {
+        items: [
+          { label: "取消", onClick: () => console.log("取消") },
+          { label: "保存", icon: /* @__PURE__ */ React.createElement(import_icons.SaveOutlined, null), priority: "primary", onClick: () => console.log("保存") }
+        ]
+      }
+    ],
+    align: "right",
+    groupGap: 24,
+    itemGap: 8
+  }
+};
+var VerticalLayout = {
+  args: {
+    layout: "vertical",
+    groups: [
+      {
+        items: [
+          { label: "主操作", priority: "primary", onClick: () => console.log("主操作") },
+          { label: "次操作", onClick: () => console.log("次操作") }
+        ]
+      }
+    ]
+  }
+};
+var ConditionalVisible = {
+  args: {
+    groups: [
+      {
+        items: [
+          { label: "始终显示", onClick: () => {
+          } },
+          { label: "隐藏项", visible: false, onClick: () => {
+          } },
+          { label: "确定", priority: "primary", onClick: () => {
+          } }
+        ]
+      }
+    ]
+  }
+};
+var AlignCenter = {
+  args: {
+    align: "center",
+    groups: [
+      {
+        items: [
+          { label: "取消", onClick: () => {
+          } },
+          { label: "确定", priority: "primary", onClick: () => {
+          } }
+        ]
+      }
+    ]
+  }
+};
+var SpaceBetween = {
+  args: {
+    align: "space-between",
+    groups: [
+      {
+        items: [
+          { label: "返回", onClick: () => console.log("返回") }
+        ]
+      },
+      {
+        items: [
+          { label: "保存草稿", onClick: () => console.log("草稿") },
+          { label: "发布", priority: "primary", onClick: () => console.log("发布") }
+        ]
+      }
+    ]
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AlignCenter,
+  AlignRight,
+  ConditionalVisible,
+  Default,
+  MultipleGroups,
+  SpaceBetween,
+  VerticalLayout
+});

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

@@ -0,0 +1,6 @@
+/**
+ * PisellActionPanel 组件导出
+ * 操作面板：统一承载、编排一组用户可执行操作
+ */
+export { PisellActionPanel } from './PisellActionPanel';
+export type { PisellActionPanelProps, PisellActionPanelGroup, PisellActionPanelItem, ActionPanelLayout, ActionPanelAlign, ActionPanelOverflowStrategy, ActionPanelItemPriority, } from './types';

package/lib/components/pisellActionPanel/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/pisellActionPanel/index.tsx
+var pisellActionPanel_exports = {};
+__export(pisellActionPanel_exports, {
+  PisellActionPanel: () => import_PisellActionPanel.PisellActionPanel
+});
+module.exports = __toCommonJS(pisellActionPanel_exports);
+var import_PisellActionPanel = require("./PisellActionPanel");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellActionPanel
+});

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

@@ -0,0 +1,83 @@
+import type { CSSProperties, ReactNode } from 'react';
+/**
+ * 操作项层级（主/次/危险）
+ */
+export declare type ActionPanelItemPriority = 'primary' | 'secondary' | 'danger' | 'default';
+/**
+ * Action Panel 单条操作项
+ * 对应设计文档 Action Item，可渲染为 Button / IconButton
+ */
+export interface PisellActionPanelItem {
+    /** 唯一 key，用于 React key；不传则用 index */
+    key?: string;
+    /** 展示文案（Button 时显示） */
+    label?: string;
+    /** 图标节点（可单独图标或与 label 同显） */
+    icon?: ReactNode;
+    /** 点击回调 */
+    onClick?: () => void;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否显示（条件显隐） @default true */
+    visible?: boolean;
+    /** 层级：主/次/危险/默认，影响按钮样式 */
+    priority?: ActionPanelItemPriority;
+    /** 单项内联样式 */
+    style?: CSSProperties;
+    /** 单项类名 */
+    className?: string;
+}
+/**
+ * Action Panel 分组
+ * 对应设计文档 Action Group，内包含多个 Action Item
+ */
+export interface PisellActionPanelGroup {
+    /** 唯一 key；不传则用 index */
+    key?: string;
+    /** 本组操作项 */
+    items: PisellActionPanelItem[];
+    /** 组内整体优先级（可影响组内按钮默认 priority） */
+    priority?: ActionPanelItemPriority;
+    /** 是否显示该组 @default true */
+    visible?: boolean;
+    /** 组内对齐方式（组内多个 item 时的对齐） */
+    align?: 'start' | 'center' | 'end';
+    /** 组容器类名 */
+    className?: string;
+    /** 组容器样式 */
+    style?: CSSProperties;
+}
+/**
+ * Panel 布局方式
+ */
+export declare type ActionPanelLayout = 'horizontal' | 'vertical' | 'grid';
+/**
+ * Panel 对齐方式
+ */
+export declare type ActionPanelAlign = 'left' | 'center' | 'right' | 'space-between';
+/**
+ * 溢出策略：换行 / 滚动 / 更多菜单收纳
+ */
+export declare type ActionPanelOverflowStrategy = 'wrap' | 'scroll' | 'moreMenu';
+/**
+ * PisellActionPanel 组件 Props
+ * 设计文档：Action Panel (pcp_ge_actionPanel_V1.0)
+ */
+export interface PisellActionPanelProps {
+    /** 操作分组列表，顺序即展示顺序 */
+    groups: PisellActionPanelGroup[];
+    /** 布局方式 @default 'horizontal' */
+    layout?: ActionPanelLayout;
+    /** 整体对齐方式 @default 'left' */
+    align?: ActionPanelAlign;
+    /** 溢出策略 @default 'wrap' */
+    overflowStrategy?: ActionPanelOverflowStrategy;
+    /** 组与组之间的间距（CSS gap 或 number px） */
+    groupGap?: number | string;
+    /** 组内操作项之间的间距（CSS gap 或 number px） */
+    itemGap?: number | string;
+    /** 根节点类名 */
+    className?: string;
+    /** 根节点样式 */
+    style?: CSSProperties;
+}

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

package/lib/components/pisellBaseCard/PisellBaseCard.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { PisellBaseCardProps } from './types';
+import './PisellBaseCard.less';
+/**
+ * PisellBaseCard 基础卡片容器
+ * 提供可定制的容器用于承载子内容，支持默认/悬停/按下/禁用四态样式，可点击时支持焦点与键盘触发
+ */
+export declare function PisellBaseCard({ children, className, style, hoverStyle, activeStyle, disabledStyle, clickable, disabled, onClick, }: PisellBaseCardProps): JSX.Element;