@pisell/materials 6.3.25 → 6.3.27

package/lib/components/pisellSingleLineText/components/ReadOnlyView.js

@@ -0,0 +1,164 @@
+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/pisellSingleLineText/components/ReadOnlyView.tsx
+var ReadOnlyView_exports = {};
+__export(ReadOnlyView_exports, {
+  default: () => ReadOnlyView_default
+});
+module.exports = __toCommonJS(ReadOnlyView_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var ReadOnlyView = (props) => {
+  const {
+    value,
+    displayVariant = "text",
+    onLinkClick,
+    badgeStatus = "default",
+    tagColor,
+    tagClosable = false,
+    onTagClose,
+    ellipsis = true,
+    showTooltip = true,
+    fontSize,
+    fontWeight,
+    color,
+    textAlign = "left",
+    className,
+    style
+  } = props;
+  const defaultTextStyle = {
+    fontSize: fontSize || 16,
+    fontWeight: fontWeight || 500,
+    // Medium
+    color: color || "#101828",
+    // Gray/900
+    lineHeight: "24px",
+    textAlign
+  };
+  const textStyle = {
+    ...defaultTextStyle,
+    ...style
+  };
+  const renderContent = () => {
+    switch (displayVariant) {
+      case "link":
+        return /* @__PURE__ */ import_react.default.createElement(
+          "span",
+          {
+            className: `pisell-single-line-text-link ${className || ""}`,
+            onClick: onLinkClick,
+            style: {
+              fontSize: fontSize || 16,
+              fontWeight: fontWeight || 500,
+              color: color || "#7F56DA",
+              // 使用项目统一链接色
+              textDecoration: "underline",
+              textDecorationStyle: "double",
+              cursor: "pointer",
+              display: "inline-block",
+              lineHeight: "24px",
+              ...style
+            },
+            role: "link",
+            tabIndex: 0,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                onLinkClick == null ? void 0 : onLinkClick();
+              }
+            }
+          },
+          value || ""
+        );
+      case "badge":
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_antd.Badge,
+          {
+            count: value || "",
+            style: {
+              backgroundColor: badgeStatus === "error" ? "#D92D20" : void 0,
+              color: "#FFFFFF",
+              fontSize: "14px",
+              fontWeight: 400,
+              lineHeight: "20px",
+              borderRadius: "16px",
+              padding: "0 4px",
+              minWidth: "20px",
+              height: "20px",
+              border: "1px solid white",
+              ...style
+            },
+            className
+          }
+        );
+      case "tag":
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_antd.Tag,
+          {
+            color: tagColor,
+            closable: tagClosable,
+            onClose: onTagClose,
+            style: {
+              backgroundColor: tagColor ? void 0 : "#F9FAFB",
+              // Gray/50
+              borderColor: tagColor ? void 0 : "#EAECF0",
+              // Gray/200
+              color: tagColor ? void 0 : "#344054",
+              // Gray/700
+              fontSize: "14px",
+              fontWeight: 500,
+              // Medium
+              lineHeight: "20px",
+              padding: "4px 12px",
+              borderRadius: "16px",
+              ...textStyle
+            },
+            className
+          },
+          value || ""
+        );
+      case "text":
+      default:
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_antd.Typography.Text,
+          {
+            ellipsis,
+            style: textStyle,
+            className: `pisell-single-line-text-read ${className || ""}`
+          },
+          value || ""
+        );
+    }
+  };
+  const content = renderContent();
+  if (showTooltip && ellipsis && value && (displayVariant === "text" || displayVariant === "link")) {
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: value }, content);
+  }
+  return content;
+};
+var ReadOnlyView_default = ReadOnlyView;

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

@@ -0,0 +1,6 @@
+/**
+ * PisellSingleLineText 组件导出
+ */
+export { default as PisellSingleLineText } from './PisellSingleLineText';
+export type { PisellSingleLineTextProps } from './types';
+export type { DisplayState, ValidationResult, TextInputState } from './types';

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

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

@@ -0,0 +1,139 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { BaseTextInputProps } from '@pisell/utils';
+/**
+ * PisellSingleLineText 组件 Props 类型定义
+ *
+ * 继承 BaseTextInputProps，添加单行文本特有的配置
+ */
+export interface PisellSingleLineTextProps extends BaseTextInputProps {
+    /**
+     * 状态模式
+     * @default 'edit'
+     */
+    mode?: 'read' | 'edit';
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 展示样式变体
+     * - text: 普通文本（默认）
+     * - link: 超链接样式
+     * - badge: 徽标样式
+     * - tag: 标签样式
+     * @default 'text'
+     */
+    displayVariant?: 'text' | 'link' | 'badge' | 'tag';
+    /**
+     * 超链接点击回调（displayVariant='link' 时有效）
+     */
+    onLinkClick?: () => void;
+    /**
+     * 徽标状态（displayVariant='badge' 时有效）
+     */
+    badgeStatus?: 'success' | 'processing' | 'default' | 'error' | 'warning';
+    /**
+     * 标签颜色（displayVariant='tag' 时有效）
+     */
+    tagColor?: string;
+    /**
+     * 标签是否可关闭（displayVariant='tag' 时有效）
+     */
+    tagClosable?: boolean;
+    /**
+     * 标签关闭回调（displayVariant='tag' 时有效）
+     */
+    onTagClose?: () => void;
+    /**
+     * 超出是否省略
+     * @default true
+     */
+    ellipsis?: boolean;
+    /**
+     * 悬停是否显示完整内容（Tooltip）
+     * @default true
+     */
+    showTooltip?: boolean;
+    /**
+     * 字号
+     * @example '14px' 或 14
+     */
+    fontSize?: string | number;
+    /**
+     * 字重
+     * @example 'bold' 或 600
+     */
+    fontWeight?: string | number;
+    /**
+     * 文本颜色
+     * @example '#000000'
+     */
+    color?: string;
+    /**
+     * 文本对齐方式
+     * @default 'left'
+     */
+    textAlign?: 'left' | 'center' | 'right';
+    /**
+     * 占位文本
+     */
+    placeholder?: string;
+    /**
+     * 最大长度（字符数）
+     */
+    maxLength?: number;
+    /**
+     * 是否显示字数统计
+     * @default false
+     */
+    showCount?: boolean;
+    /**
+     * 是否显示清空按钮
+     * @default false
+     */
+    allowClear?: boolean;
+    /**
+     * 是否自动聚焦
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * 前缀图标或文本
+     */
+    prefix?: ReactNode;
+    /**
+     * 后缀图标或文本
+     */
+    suffix?: ReactNode;
+    /**
+     * 前置标签
+     */
+    addonBefore?: ReactNode;
+    /**
+     * 后置标签
+     */
+    addonAfter?: ReactNode;
+    /**
+     * 回车键回调
+     * @param value 当前值
+     */
+    onPressEnter?: (value: string) => void;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * ARIA 标签
+     */
+    'aria-label'?: string;
+    /**
+     * ARIA 描述
+     */
+    'aria-describedby'?: string;
+}
+export type { DisplayState, ValidationResult, TextInputState } from '@pisell/utils';

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

package/lib/components/pisellSingleSelect/PisellSingleSelect.d.ts

@@ -0,0 +1,9 @@
+/**
+ * PisellSingleSelect - 单选下拉组件
+ * 基于 Ant Design Select 封装，提供符合 Pisell 设计规范的单选功能
+ */
+import React from 'react';
+import type { PisellSingleSelectProps, SingleSelectRef } from './types';
+import './PisellSingleSelect.less';
+declare const PisellSingleSelect: React.ForwardRefExoticComponent<PisellSingleSelectProps<string | number> & React.RefAttributes<SingleSelectRef<string | number>>>;
+export default PisellSingleSelect;

package/lib/components/pisellSingleSelect/PisellSingleSelect.js

@@ -0,0 +1,78 @@
+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/pisellSingleSelect/PisellSingleSelect.tsx
+var PisellSingleSelect_exports = {};
+__export(PisellSingleSelect_exports, {
+  default: () => PisellSingleSelect_default
+});
+module.exports = __toCommonJS(PisellSingleSelect_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@pisell/utils");
+var import_EditView = __toESM(require("./components/EditView"));
+var import_DisabledView = __toESM(require("./components/DisabledView"));
+var import_ReadOnlyView = __toESM(require("./components/ReadOnlyView"));
+var import_PisellSingleSelect = require("./PisellSingleSelect.less");
+var PisellSingleSelect = (0, import_react.forwardRef)((props, ref) => {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    disabled,
+    readOnly
+  } = props;
+  const selectRef = (0, import_react.useRef)(null);
+  const state = (0, import_utils.useSelectState)({
+    value,
+    defaultValue,
+    onChange,
+    mode: "single"
+  });
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    focus: () => {
+      var _a;
+      return (_a = selectRef.current) == null ? void 0 : _a.focus();
+    },
+    blur: () => {
+      var _a;
+      return (_a = selectRef.current) == null ? void 0 : _a.blur();
+    },
+    getValue: () => state.value ?? null,
+    setValue: (newValue) => state.setValue(newValue),
+    clearValue: () => state.clearValue()
+  }));
+  if (disabled) {
+    return /* @__PURE__ */ import_react.default.createElement(import_DisabledView.default, { ...props, ref: selectRef });
+  }
+  if (readOnly) {
+    return /* @__PURE__ */ import_react.default.createElement(import_ReadOnlyView.default, { ...props });
+  }
+  return /* @__PURE__ */ import_react.default.createElement(import_EditView.default, { ...props, state, ref: selectRef });
+});
+PisellSingleSelect.displayName = "PisellSingleSelect";
+var PisellSingleSelect_default = PisellSingleSelect;

package/lib/components/pisellSingleSelect/PisellSingleSelect.less

@@ -0,0 +1,159 @@
+/**
+ * PisellSingleSelect 组件样式
+ * 
+ * 注意：大部分样式通过 tokens.ts 中的 Select Token 配置实现
+ * 此文件仅包含 Token 无法实现的样式
+ */
+
+.pisell-single-select {
+  width: 100%;
+
+  // 包装器布局（Token 无法配置）
+  &-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  // 标签（Token 无法配置的自定义元素）
+  &-label {
+    font-family: 'Inter', sans-serif;
+    font-size: 14px;
+    font-weight: 600;
+    color: #344054;
+    line-height: 20px;
+
+    &-required::after {
+      content: ' *';
+      color: #D92D20;
+      margin-left: 0;
+    }
+  }
+
+  // 辅助文本（Token 无法配置的自定义元素）
+  &-helper-text {
+    font-size: 14px;
+    font-weight: 400;
+    color: #667085;
+    line-height: 20px;
+  }
+
+  // 错误文本（Token 无法配置的自定义元素）
+  &-error-text {
+    font-size: 14px;
+    font-weight: 400;
+    color: #D92D20;
+    line-height: 20px;
+    animation: fadeIn 0.3s ease-in-out;
+  }
+
+  // 下拉选项中的勾选图标（Figma 设计）
+  &-option-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &-option-check {
+    color: #7F56D9; // Primary/600
+    font-size: 16px;
+    margin-left: 8px;
+  }
+
+  // hover 边框颜色（Token 不支持 colorBorderHover）
+  :global {
+    // hover 边框颜色
+    .pisell-lowcode-select:not(.pisell-lowcode-select-disabled):not(.pisell-lowcode-select-customize-input):not(.pisell-lowcode-select-open) {
+      .pisell-lowcode-select-selector:hover {
+        border-color: #D6BBFB !important;
+      }
+    }
+  }
+}
+
+// 下拉框内的搜索框样式（Figma 设计）
+:global {
+  .pisell-select-search-wrapper {
+    padding: 6px;
+    border-bottom: 1px solid #EAECF0;
+  }
+
+  .pisell-select-search-input {
+    padding: 9px 10px !important;
+    font-size: 14px;
+
+    .pisell-lowcode-input {
+      font-size: 14px !important;
+      color: #344054 !important;
+
+      &::placeholder {
+        color: #98A2B3 !important;
+        font-size: 12px !important;
+      }
+    }
+
+    &:hover,
+    &:focus-within {
+      background-color: transparent !important;
+    }
+  }
+}
+
+.pisell-single-select {
+  // 错误状态（Token 无法单独配置错误边框颜色）
+  &-error {
+    :global(.ant-select-selector) {
+      border-color: #D92D20 !important;
+
+      &:hover {
+        border-color: #D92D20 !important;
+      }
+    }
+
+    :global(.ant-select-focused .ant-select-selector) {
+      border-color: #D92D20 !important;
+      box-shadow: 0px 0px 0px 4px rgba(217, 45, 32, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+    }
+  }
+
+  // 只读状态（完全自定义的显示，不使用 Select 组件）
+  &-readonly {
+    &-display {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 16px;
+      background-color: #F9FAFB;
+      border: 1px solid #EAECF0;
+      border-radius: 8px;
+      min-height: 48px;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      color: #101828;
+    }
+
+    &-icon {
+      display: flex;
+      align-items: center;
+    }
+
+    &-empty {
+      color: #667085;
+      font-weight: 400;
+    }
+  }
+}
+
+// 动画
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/lib/components/pisellSingleSelect/PisellSingleSelect.stories.d.ts

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PisellSingleSelect from './PisellSingleSelect';
+/**
+ * PisellSingleSelect 组件 Storybook
+ *
+ * 用于展示和测试组件的各种状态和配置
+ */
+declare const meta: Meta<typeof PisellSingleSelect>;
+export default meta;
+declare type Story = StoryObj<typeof PisellSingleSelect>;
+/**
+ * 基础示例
+ */
+export declare const Basic: Story;
+/**
+ * 带标签
+ */
+export declare const WithLabel: Story;
+/**
+ * 带辅助文本
+ */
+export declare const WithHelperText: Story;
+/**
+ * 带搜索功能
+ */
+export declare const WithSearch: Story;
+/**
+ * 带清空按钮
+ */
+export declare const WithClear: Story;
+/**
+ * 禁用态
+ */
+export declare const Disabled: Story;
+/**
+ * 只读态
+ */
+export declare const ReadOnly: Story;
+/**
+ * 只读态 - 空值
+ */
+export declare const ReadOnlyEmpty: Story;
+/**
+ * 错误状态
+ */
+export declare const WithError: Story;
+/**
+ * 不同尺寸
+ */
+export declare const Sizes: Story;
+/**
+ * 表单场景
+ */
+export declare const InForm: Story;
+/**
+ * 自定义过滤
+ */
+export declare const CustomFilter: Story;
+/**
+ * 回调事件演示
+ */
+export declare const WithCallbacks: Story;
+/**
+ * 所有状态组合
+ */
+export declare const AllStates: Story;