@pisell/materials 1.0.1057 → 1.0.1059

package/lib/components/pisellBaseCard/PisellBaseCard.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/pisellBaseCard/PisellBaseCard.tsx
+var PisellBaseCard_exports = {};
+__export(PisellBaseCard_exports, {
+  PisellBaseCard: () => PisellBaseCard
+});
+module.exports = __toCommonJS(PisellBaseCard_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_PisellBaseCard = require("./PisellBaseCard.less");
+function mergeStateStyle(base, hover, active, disabled, isHover, isActive, isDisabled) {
+  let s = { ...base };
+  if (isDisabled && disabled) {
+    Object.assign(s, disabled);
+    return s;
+  }
+  if (isActive && active) Object.assign(s, active);
+  if (isHover && hover) Object.assign(s, hover);
+  return s;
+}
+function PisellBaseCard({
+  children,
+  className,
+  style,
+  hoverStyle,
+  activeStyle,
+  disabledStyle,
+  clickable = true,
+  disabled = false,
+  onClick
+}) {
+  const [isHover, setIsHover] = (0, import_react.useState)(false);
+  const [isActive, setIsActive] = (0, import_react.useState)(false);
+  const mergedStyle = mergeStateStyle(
+    style,
+    hoverStyle,
+    activeStyle,
+    disabledStyle,
+    isHover,
+    isActive,
+    disabled
+  );
+  const handleClick = (0, import_react.useCallback)(
+    (e) => {
+      if (!clickable || disabled) return;
+      onClick == null ? void 0 : onClick(e);
+    },
+    [clickable, disabled, onClick]
+  );
+  const handleKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      if (!clickable || disabled) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        e.target.click();
+      }
+    },
+    [clickable, disabled]
+  );
+  const handlePointerEnter = (0, import_react.useCallback)(() => {
+    if (!disabled) setIsHover(true);
+  }, [disabled]);
+  const handlePointerLeave = (0, import_react.useCallback)(() => {
+    setIsHover(false);
+    setIsActive(false);
+  }, []);
+  const handlePointerDown = (0, import_react.useCallback)(() => {
+    if (clickable && !disabled) setIsActive(true);
+  }, [clickable, disabled]);
+  const handlePointerUp = (0, import_react.useCallback)(() => {
+    setIsActive(false);
+  }, []);
+  const canInteract = clickable && !disabled;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)("pisell-base-card-root", className),
+      style: mergedStyle,
+      "data-clickable": clickable,
+      "data-disabled": disabled,
+      role: canInteract ? "button" : void 0,
+      "aria-disabled": disabled ? true : void 0,
+      tabIndex: canInteract ? 0 : void 0,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onPointerEnter: handlePointerEnter,
+      onPointerLeave: handlePointerLeave,
+      onPointerDown: handlePointerDown,
+      onPointerUp: handlePointerUp
+    },
+    children
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellBaseCard
+});

package/lib/components/pisellBaseCard/PisellBaseCard.less

@@ -0,0 +1,25 @@
+/**
+ * PisellBaseCard 样式
+ * 默认态依设计稿写死：背景 #FFF、边框 #EAECF0、圆角 12px、padding 16px、阴影
+ */
+.pisell-base-card-root {
+  box-sizing: border-box;
+  /* 设计稿默认：背景、边框、圆角、内边距、阴影 */
+  background-color: #ffffff;
+  border: 1px solid #eaecf0;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
+  /* 最小 padding 避免内容贴边 */
+  min-height: 0;
+  min-width: 0;
+
+  /* 可点击时鼠标指针 */
+  &[data-clickable='true'] {
+    cursor: pointer;
+  }
+
+  &[data-disabled='true'] {
+    cursor: not-allowed;
+  }
+}

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellBaseCard } from './PisellBaseCard';
+declare const meta: Meta<typeof PisellBaseCard>;
+export default meta;
+declare type Story = StoryObj<typeof PisellBaseCard>;
+/** 默认：可点击、无内容 */
+export declare const Default: Story;
+/** 带内容 */
+export declare const WithChildren: Story;
+/** 可点击并带点击回调 */
+export declare const Clickable: Story;
+/** 禁用态 */
+export declare const Disabled: Story;
+/** 不可点击（仅容器） */
+export declare const NotClickable: Story;
+/** 自定义默认样式 */
+export declare const CustomStyle: Story;
+/** 悬停/按下/禁用样式 */
+export declare const StateStyles: Story;

package/lib/components/pisellBaseCard/PisellBaseCard.stories.js

@@ -0,0 +1,107 @@
+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/pisellBaseCard/PisellBaseCard.stories.tsx
+var PisellBaseCard_stories_exports = {};
+__export(PisellBaseCard_stories_exports, {
+  Clickable: () => Clickable,
+  CustomStyle: () => CustomStyle,
+  Default: () => Default,
+  Disabled: () => Disabled,
+  NotClickable: () => NotClickable,
+  StateStyles: () => StateStyles,
+  WithChildren: () => WithChildren,
+  default: () => PisellBaseCard_stories_default
+});
+module.exports = __toCommonJS(PisellBaseCard_stories_exports);
+var import_PisellBaseCard = require("./PisellBaseCard");
+var meta = {
+  title: "Data Display/PisellBaseCard",
+  component: import_PisellBaseCard.PisellBaseCard,
+  tags: ["autodocs"],
+  argTypes: {
+    clickable: {
+      description: "是否可点击",
+      control: "boolean"
+    },
+    disabled: {
+      description: "是否禁用",
+      control: "boolean"
+    },
+    children: {
+      description: "卡片内容",
+      control: "text"
+    }
+  }
+};
+var PisellBaseCard_stories_default = meta;
+var Default = {
+  args: {}
+};
+var WithChildren = {
+  args: {
+    children: /* @__PURE__ */ React.createElement("div", { style: { padding: 8 } }, /* @__PURE__ */ React.createElement("div", null, "标题"), /* @__PURE__ */ React.createElement("div", { style: { color: "#666", fontSize: 14 } }, "描述文字"))
+  }
+};
+var Clickable = {
+  args: {
+    children: "点击我",
+    onClick: () => alert("卡片被点击")
+  }
+};
+var Disabled = {
+  args: {
+    children: "禁用卡片",
+    disabled: true
+  }
+};
+var NotClickable = {
+  args: {
+    children: "不可点击，无 role",
+    clickable: false
+  }
+};
+var CustomStyle = {
+  args: {
+    children: "自定义背景与圆角",
+    style: {
+      backgroundColor: "#f0f5ff",
+      borderRadius: 16,
+      padding: 24
+    }
+  }
+};
+var StateStyles = {
+  args: {
+    children: "悬停与按下有样式变化",
+    style: { padding: 16 },
+    hoverStyle: { backgroundColor: "#e6f4ff", borderColor: "#91caff" },
+    activeStyle: { backgroundColor: "#bae0ff" },
+    disabledStyle: { opacity: 0.6 }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Clickable,
+  CustomStyle,
+  Default,
+  Disabled,
+  NotClickable,
+  StateStyles,
+  WithChildren
+});

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

@@ -0,0 +1,5 @@
+/**
+ * PisellBaseCard 组件导出
+ */
+export { PisellBaseCard } from './PisellBaseCard';
+export type { PisellBaseCardProps } from './types';

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

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

@@ -0,0 +1,45 @@
+import type { CSSProperties, ReactNode } from 'react';
+/**
+ * PisellBaseCard 组件 Props
+ * @description 基础卡片容器，支持四态样式与可点击配置，无选中逻辑（选中由低代码处理）
+ */
+export interface PisellBaseCardProps {
+    /**
+     * 卡片内容，由低代码插槽或直接传入
+     */
+    children?: ReactNode;
+    /**
+     * 自定义类名，应用于根节点
+     */
+    className?: string;
+    /**
+     * 默认状态下的内联样式（背景、圆角、边框、阴影、padding、宽高等）
+     */
+    style?: CSSProperties;
+    /**
+     * 悬停时的样式覆盖，与 style 合并后应用
+     */
+    hoverStyle?: CSSProperties;
+    /**
+     * 按下（active）时的样式覆盖，与 style 合并后应用
+     */
+    activeStyle?: CSSProperties;
+    /**
+     * 禁用时的样式覆盖，与 style 合并后应用
+     */
+    disabledStyle?: CSSProperties;
+    /**
+     * 是否可点击（可聚焦并触发 onClick）
+     * @default true
+     */
+    clickable?: boolean;
+    /**
+     * 是否禁用，禁用时应用 disabledStyle 且不响应点击与焦点
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 点击回调，仅在 clickable 且非 disabled 时触发
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}

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

package/lib/components/pisellCurrency/PisellCurrency.js

@@ -34,24 +34,30 @@ __export(PisellCurrency_exports, {
 });
 module.exports = __toCommonJS(PisellCurrency_exports);
 var import_react = __toESM(require("react"));
+var import_antd = require("antd");
 var import_utils = require("@pisell/utils");
 var import_ReadOnlyView = __toESM(require("./components/ReadOnlyView"));
 var import_EditView = __toESM(require("./components/EditView"));
 var import_DisabledView = __toESM(require("./components/DisabledView"));
+var import_pisell_components = require("../../theme/pisell-components");
 var import_PisellCurrency = require("./PisellCurrency.less");
 var PisellCurrency = (props) => {
   const { mode = "edit", disabled = false } = props;
   const displayState = (0, import_utils.getDisplayState)(mode, disabled);
-  switch (displayState) {
-    case "read":
-      return /* @__PURE__ */ import_react.default.createElement(import_ReadOnlyView.default, { ...props });
-    case "edit":
-      return /* @__PURE__ */ import_react.default.createElement(import_EditView.default, { ...props });
-    case "disabled":
-      return /* @__PURE__ */ import_react.default.createElement(import_DisabledView.default, { ...props });
-    default:
-      return null;
-  }
+  const render = () => {
+    switch (displayState) {
+      case "read":
+        return /* @__PURE__ */ import_react.default.createElement(import_ReadOnlyView.default, { ...props });
+      case "edit":
+        return /* @__PURE__ */ import_react.default.createElement(import_EditView.default, { ...props });
+      case "disabled":
+        return /* @__PURE__ */ import_react.default.createElement(import_DisabledView.default, { ...props });
+      default:
+        return null;
+    }
+  };
+  const theme = (0, import_pisell_components.getPisellComponentsThemeConfig)();
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.ConfigProvider, { theme }, render());
 };
 var MemoizedPisellCurrency = import_react.default.memo(PisellCurrency, (prevProps, nextProps) => {
   return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled && prevProps.currencySymbol === nextProps.currencySymbol && prevProps.symbolPosition === nextProps.symbolPosition;

package/lib/components/pisellCurrency/PisellCurrency.less

@@ -10,129 +10,6 @@
   &-edit {
     position: relative;
     width: 100%;
-
-    // InputNumber 外层（Figma 设计规范，无边框避免双边框）
-    .pisell-lowcode-input-number {
-      width: 100% !important;
-      font-size: 16px !important;
-      line-height: 24px !important;
-      border-radius: 8px !important;
-      border: none !important;
-      color: #101828 !important; // Gray/900
-      background-color: #ffffff !important;
-
-      // 内层 input
-      .pisell-lowcode-input-number-input {
-        height: 46px !important; // 48 - 2px border
-        padding: 12px 16px !important;
-        font-size: 16px !important;
-        line-height: 24px !important;
-        color: #101828 !important;
-        background: transparent !important;
-        border: none !important;
-
-        &::placeholder {
-          color: #667085 !important; // Gray/500
-        }
-      }
-
-      // 聚焦态
-      &.pisell-lowcode-input-number-focused,
-      &:focus,
-      &:focus-within {
-        border-color: #d6bbfb !important; // Primary/300
-        box-shadow: 0 0 0 4px #f4ebff !important; // Primary/100
-        outline: none !important;
-      }
-
-      // Hover 态
-      &:hover:not(.pisell-lowcode-input-number-disabled):not(.pisell-lowcode-input-number-focused) {
-        border-color: #b692f6 !important; // Primary/400
-      }
-
-      // 禁用态
-      &.pisell-lowcode-input-number-disabled {
-        background-color: #f9fafb !important; // Gray/50
-        border-color: #d0d5dd !important;
-        cursor: not-allowed !important;
-
-        .pisell-lowcode-input-number-input {
-          color: #98a2b3 !important; // Gray/400
-          cursor: not-allowed !important;
-        }
-      }
-
-      // 货币符号：前缀
-      .pisell-lowcode-input-number-prefix {
-        margin-right: 8px;
-        margin-left: 16px;
-        color: #667085; // Gray/500
-        font-size: 16px;
-      }
-
-      // 货币符号：后置（addonAfter）
-      .pisell-lowcode-input-number-suffix {
-        margin-left: 8px;
-        margin-right: 16px;
-        color: #667085;
-        font-size: 16px;
-      }
-
-      // addonBefore / addonAfter 包裹（InputNumber 后置符号可能用 addon 渲染）
-      .pisell-lowcode-input-number-group-addon {
-        background-color: #ffffff !important;
-        border: 1px solid #d0d5dd !important;
-        color: #344054; // Gray/700
-        font-size: 16px !important;
-        padding: 12px 16px !important;
-
-        &:first-child {
-          border-right: none !important;
-          border-radius: 8px 0 0 8px !important;
-        }
-
-        &:last-child {
-          border-left: none !important;
-          border-radius: 0 8px 8px 0 !important;
-        }
-      }
-
-      // 步进器按钮（controls）
-      .pisell-lowcode-input-number-handler-wrap {
-        border-left: 1px solid #d0d5dd !important;
-        background: #ffffff !important;
-
-        .pisell-lowcode-input-number-handler {
-          color: #667085;
-          border-color: #d0d5dd;
-
-          &:hover {
-            color: #344054;
-          }
-
-          &.pisell-lowcode-input-number-handler-up-disabled,
-          &.pisell-lowcode-input-number-handler-down-disabled {
-            color: #98a2b3;
-            cursor: not-allowed;
-          }
-        }
-      }
-
-      // 错误状态
-      &.pisell-lowcode-input-number-status-error {
-        border-color: #fda29b !important; // Error/300
-
-        &.pisell-lowcode-input-number-focused,
-        &:focus-within {
-          border-color: #f97066 !important; // Error/400
-          box-shadow: 0 0 0 4px #fee4e2 !important; // Error/100
-        }
-
-        &:hover:not(:focus-within) {
-          border-color: #f97066 !important;
-        }
-      }
-    }
   }
 
   // 错误提示（与设计体系一致）

package/lib/components/pisellCustomerBrief/PisellCustomerBrief.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { PisellCustomerBriefProps } from './types';
+import './PisellCustomerBrief.less';
+/**
+ * PisellCustomerBrief 客户简要卡片
+ * 基于 PisellEntityCard，用于展示客户（Customer）实体的核心识别信息与客户级属性。
+ * 设计文档：Customer Info (pcl_customerInfon_V1.0)
+ *
+ * - 无头像时显示默认占位 Avatar
+ * - 文本过长按配置省略
+ * - Actions 为空时不占位
+ *
+ * @param props 组件 Props
+ */
+export declare function PisellCustomerBrief({ name, subtitle, avatar, email, address, company, date, extendedFields, tags, actions, showActions, showAvatar, showPrimaryText, showSubtitle, showExtended, showTags, density, layout, width, swipeToDelete, onDelete, tagPosition, contentGap, primaryLineClamp, secondaryLineClamp, renderMedia, renderPrimary, renderSubtitle, renderSecondary, renderTags, renderActions, className, style, hoverStyle, activeStyle, disabledStyle, clickable, disabled, onClick, }: PisellCustomerBriefProps): JSX.Element;