@pisell/materials 6.3.25 → 6.3.27

package/lib/components/pisellSingleLineText/PisellSingleLineText.stories.js

@@ -0,0 +1,379 @@
+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/PisellSingleLineText.stories.tsx
+var PisellSingleLineText_stories_exports = {};
+__export(PisellSingleLineText_stories_exports, {
+  AllDisplayVariants: () => AllDisplayVariants,
+  Basic: () => Basic,
+  CustomStyle: () => CustomStyle,
+  CustomValidator: () => CustomValidator,
+  Disabled: () => Disabled,
+  DisplayVariantBadge: () => DisplayVariantBadge,
+  DisplayVariantBadgeText: () => DisplayVariantBadgeText,
+  DisplayVariantLink: () => DisplayVariantLink,
+  DisplayVariantTag: () => DisplayVariantTag,
+  DisplayVariantTagClosable: () => DisplayVariantTagClosable,
+  DisplayVariantTagColored: () => DisplayVariantTagColored,
+  DisplayVariantText: () => DisplayVariantText,
+  FullFeatures: () => FullFeatures,
+  LengthValidation: () => LengthValidation,
+  PatternValidation: () => PatternValidation,
+  ReadMode: () => ReadMode,
+  ReadModeEllipsis: () => ReadModeEllipsis,
+  Required: () => Required,
+  WithAddonAfter: () => WithAddonAfter,
+  WithAddonBefore: () => WithAddonBefore,
+  WithPrefix: () => WithPrefix,
+  WithSuffix: () => WithSuffix,
+  default: () => PisellSingleLineText_stories_default
+});
+module.exports = __toCommonJS(PisellSingleLineText_stories_exports);
+var import_PisellSingleLineText = require("./PisellSingleLineText");
+var import_icons = require("@ant-design/icons");
+var import_antd = require("antd");
+var import_react = __toESM(require("react"));
+var meta = {
+  title: "表单/PisellSingleLineText",
+  component: import_PisellSingleLineText.PisellSingleLineText,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: "单行文本输入/展示组件，基于 Ant Design Input 开发。"
+      }
+    }
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    mode: {
+      control: "radio",
+      options: ["read", "edit"],
+      description: "状态模式",
+      table: {
+        defaultValue: { summary: "edit" }
+      }
+    },
+    disabled: {
+      control: "boolean",
+      description: "是否禁用"
+    },
+    value: {
+      control: "text",
+      description: "当前值（受控）"
+    },
+    defaultValue: {
+      control: "text",
+      description: "默认值（非受控）"
+    },
+    placeholder: {
+      control: "text",
+      description: "占位文本"
+    },
+    maxLength: {
+      control: "number",
+      description: "最大长度"
+    },
+    showCount: {
+      control: "boolean",
+      description: "显示字数统计"
+    },
+    allowClear: {
+      control: "boolean",
+      description: "显示清空按钮"
+    },
+    required: {
+      control: "boolean",
+      description: "是否必填"
+    },
+    minLength: {
+      control: "number",
+      description: "最小长度"
+    },
+    ellipsis: {
+      control: "boolean",
+      description: "超出省略（只读态）"
+    },
+    showTooltip: {
+      control: "boolean",
+      description: "显示提示（只读态）"
+    },
+    fontSize: {
+      control: "text",
+      description: "字号（只读态）"
+    },
+    color: {
+      control: "color",
+      description: "文本颜色（只读态）"
+    },
+    displayVariant: {
+      control: "radio",
+      options: ["text", "link", "badge", "tag"],
+      description: "展示样式变体（只读态）",
+      table: {
+        defaultValue: { summary: "text" }
+      }
+    },
+    badgeStatus: {
+      control: "select",
+      options: ["success", "processing", "default", "error", "warning"],
+      description: "徽标状态（displayVariant=badge 时有效）"
+    },
+    tagColor: {
+      control: "text",
+      description: "标签颜色（displayVariant=tag 时有效）"
+    },
+    tagClosable: {
+      control: "boolean",
+      description: "标签是否可关闭（displayVariant=tag 时有效）"
+    }
+  }
+};
+var PisellSingleLineText_stories_default = meta;
+var Basic = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入内容"
+  }
+};
+var ReadMode = {
+  args: {
+    mode: "read",
+    value: "这是一段展示的文本内容"
+  }
+};
+var ReadModeEllipsis = {
+  args: {
+    mode: "read",
+    value: "这是一段非常非常非常非常非常非常非常非常非常非常长的文本内容，会被截断显示省略号",
+    ellipsis: true,
+    showTooltip: true
+  },
+  decorators: [
+    (Story) => /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "300px" } }, /* @__PURE__ */ import_react.default.createElement(Story, null))
+  ]
+};
+var Disabled = {
+  args: {
+    mode: "edit",
+    value: "禁用状态的内容",
+    disabled: true
+  }
+};
+var Required = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入（必填）",
+    required: true,
+    validateTrigger: "onChange"
+  }
+};
+var LengthValidation = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入 3-10 个字符",
+    minLength: 3,
+    maxLength: 10,
+    showCount: true,
+    validateTrigger: "onChange"
+  }
+};
+var PatternValidation = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入数字",
+    pattern: "^[0-9]+$",
+    errorMessage: "只能输入数字",
+    validateTrigger: "onChange"
+  }
+};
+var CustomValidator = {
+  args: {
+    mode: "edit",
+    placeholder: '请输入（不能包含"禁止"）',
+    validator: (value) => {
+      if (value.includes("禁止")) {
+        return "内容不能包含敏感词";
+      }
+      return true;
+    },
+    validateTrigger: "onChange"
+  }
+};
+var WithPrefix = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入用户名",
+    prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, null)
+  }
+};
+var WithSuffix = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入金额",
+    suffix: "元"
+  }
+};
+var WithAddonBefore = {
+  args: {
+    mode: "edit",
+    placeholder: "www.example.com",
+    addonBefore: "https://"
+  }
+};
+var WithAddonAfter = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入搜索内容",
+    addonAfter: /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "primary" }, "搜索")
+  }
+};
+var FullFeatures = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入",
+    maxLength: 20,
+    showCount: true,
+    allowClear: true,
+    prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.SearchOutlined, null),
+    required: true,
+    minLength: 3,
+    validateTrigger: "both"
+  }
+};
+var CustomStyle = {
+  args: {
+    mode: "read",
+    value: "这是自定义样式的文本",
+    fontSize: "20px",
+    fontWeight: "bold",
+    color: "#1890ff",
+    textAlign: "center"
+  }
+};
+var DisplayVariantText = {
+  args: {
+    mode: "read",
+    value: "普通文本样式",
+    displayVariant: "text"
+  }
+};
+var DisplayVariantLink = {
+  args: {
+    mode: "read",
+    value: "点击查看详情",
+    displayVariant: "link",
+    onLinkClick: () => alert("链接被点击")
+  }
+};
+var DisplayVariantBadge = {
+  args: {
+    mode: "read",
+    value: "5",
+    displayVariant: "badge",
+    badgeStatus: "error"
+    // 使用红色
+  }
+};
+var DisplayVariantBadgeText = {
+  args: {
+    mode: "read",
+    value: "NEW",
+    displayVariant: "badge",
+    badgeStatus: "error"
+  }
+};
+var DisplayVariantTag = {
+  args: {
+    mode: "read",
+    value: "text",
+    displayVariant: "tag"
+  }
+};
+var DisplayVariantTagColored = {
+  args: {
+    mode: "read",
+    value: "重要",
+    displayVariant: "tag",
+    tagColor: "red"
+  }
+};
+var DisplayVariantTagClosable = {
+  args: {
+    mode: "read",
+    value: "可关闭标签",
+    displayVariant: "tag",
+    tagClosable: true,
+    onTagClose: () => alert("标签被关闭")
+  }
+};
+var AllDisplayVariants = {
+  render: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "20px" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ import_react.default.createElement("strong", { style: { width: "120px" } }, "普通文本："), /* @__PURE__ */ import_react.default.createElement(import_PisellSingleLineText.PisellSingleLineText, { mode: "read", value: "Olivia Rhye", displayVariant: "text" })), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ import_react.default.createElement("strong", { style: { width: "120px" } }, "超链接："), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellSingleLineText.PisellSingleLineText,
+    {
+      mode: "read",
+      value: "Link",
+      displayVariant: "link",
+      onLinkClick: () => alert("链接被点击")
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ import_react.default.createElement("strong", { style: { width: "120px" } }, "徽标（数字）："), /* @__PURE__ */ import_react.default.createElement(import_PisellSingleLineText.PisellSingleLineText, { mode: "read", value: "5", displayVariant: "badge", badgeStatus: "error" })), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ import_react.default.createElement("strong", { style: { width: "120px" } }, "徽标（文本）："), /* @__PURE__ */ import_react.default.createElement(import_PisellSingleLineText.PisellSingleLineText, { mode: "read", value: "text", displayVariant: "badge", badgeStatus: "error" })), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ import_react.default.createElement("strong", { style: { width: "120px" } }, "标签（默认）："), /* @__PURE__ */ import_react.default.createElement(import_PisellSingleLineText.PisellSingleLineText, { mode: "read", value: "text", displayVariant: "tag" })), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ import_react.default.createElement("strong", { style: { width: "120px" } }, "标签（蓝色）："), /* @__PURE__ */ import_react.default.createElement(import_PisellSingleLineText.PisellSingleLineText, { mode: "read", value: "标签", displayVariant: "tag", tagColor: "blue" })), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ import_react.default.createElement("strong", { style: { width: "120px" } }, "标签（可关闭）："), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellSingleLineText.PisellSingleLineText,
+    {
+      mode: "read",
+      value: "可关闭",
+      displayVariant: "tag",
+      tagClosable: true,
+      onTagClose: () => alert("标签被关闭")
+    }
+  )))
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AllDisplayVariants,
+  Basic,
+  CustomStyle,
+  CustomValidator,
+  Disabled,
+  DisplayVariantBadge,
+  DisplayVariantBadgeText,
+  DisplayVariantLink,
+  DisplayVariantTag,
+  DisplayVariantTagClosable,
+  DisplayVariantTagColored,
+  DisplayVariantText,
+  FullFeatures,
+  LengthValidation,
+  PatternValidation,
+  ReadMode,
+  ReadModeEllipsis,
+  Required,
+  WithAddonAfter,
+  WithAddonBefore,
+  WithPrefix,
+  WithSuffix
+});

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { PisellSingleLineTextProps } from '../types';
+/**
+ * PisellSingleLineText 禁用态视图组件
+ *
+ * 负责渲染禁用态视图，基于原始 mode 渲染对应的视图，并添加禁用样式
+ *
+ * 设计规则：
+ * - 基于编辑态或只读态的视觉
+ * - 透明度 40%
+ * - 禁止所有交互行为
+ *
+ * @param props 组件 Props
+ */
+declare const DisabledView: React.FC<PisellSingleLineTextProps>;
+export default DisabledView;

package/lib/components/pisellSingleLineText/components/DisabledView.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/pisellSingleLineText/components/DisabledView.tsx
+var DisabledView_exports = {};
+__export(DisabledView_exports, {
+  default: () => DisabledView_default
+});
+module.exports = __toCommonJS(DisabledView_exports);
+var import_react = __toESM(require("react"));
+var import_ReadOnlyView = __toESM(require("./ReadOnlyView"));
+var import_EditView = __toESM(require("./EditView"));
+var DisabledView = (props) => {
+  const { mode = "edit" } = props;
+  const disabledStyle = {
+    opacity: 0.4,
+    pointerEvents: "none",
+    cursor: "not-allowed",
+    ...props.style
+  };
+  if (mode === "read") {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-single-line-text-disabled", style: disabledStyle }, /* @__PURE__ */ import_react.default.createElement(import_ReadOnlyView.default, { ...props }));
+  }
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-single-line-text-disabled", style: disabledStyle }, /* @__PURE__ */ import_react.default.createElement(import_EditView.default, { ...props, disabled: true }));
+};
+var DisabledView_default = DisabledView;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { PisellSingleLineTextProps } from '../types';
+/**
+ * PisellSingleLineText 编辑态视图组件
+ *
+ * 负责渲染编辑态的输入框，基于 Ant Design Input 组件
+ *
+ * 功能：
+ * - 文本输入
+ * - 实时或失焦校验
+ * - 错误提示展示
+ * - 字数统计
+ * - 清空按钮
+ * - 前后缀、前后置标签
+ *
+ * @param props 组件 Props
+ */
+declare const EditView: React.FC<PisellSingleLineTextProps>;
+export default EditView;

package/lib/components/pisellSingleLineText/components/EditView.js

@@ -0,0 +1,69 @@
+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/EditView.tsx
+var EditView_exports = {};
+__export(EditView_exports, {
+  default: () => EditView_default
+});
+module.exports = __toCommonJS(EditView_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_utils = require("@pisell/utils");
+var EditView = (props) => {
+  const { value, isValid, errors, handleChange, handleBlur, handleFocus } = (0, import_utils.useTextInputState)(props);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-single-line-text-edit" }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Input,
+    {
+      value,
+      onChange: (e) => handleChange(e.target.value),
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onPressEnter: (e) => {
+        var _a;
+        return (_a = props.onPressEnter) == null ? void 0 : _a.call(props, e.currentTarget.value);
+      },
+      placeholder: props.placeholder,
+      maxLength: props.maxLength,
+      showCount: props.showCount,
+      allowClear: props.allowClear,
+      prefix: props.prefix,
+      suffix: props.suffix,
+      addonBefore: props.addonBefore,
+      addonAfter: props.addonAfter,
+      disabled: props.disabled,
+      autoFocus: props.autoFocus,
+      status: isValid ? void 0 : "error",
+      className: props.className,
+      style: props.style,
+      "aria-label": props["aria-label"],
+      "aria-describedby": props["aria-describedby"]
+    }
+  ), !isValid && errors.length > 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-single-line-text-error" }, errors[0]));
+};
+var EditView_default = EditView;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { PisellSingleLineTextProps } from '../types';
+/**
+ * PisellSingleLineText 只读态视图组件
+ *
+ * 负责渲染只读态的文本展示，支持多种展示样式变体（基于 Figma 设计规范）
+ *
+ * 功能：
+ * - 普通文本展示（默认）- 16px, Medium, Gray/900
+ * - 超链接样式 - 链接色，带下划线
+ * - 徽标样式 - 圆形红色徽标（类似通知数量）
+ * - 标签样式 - 灰色边框标签
+ * - 文本截断（ellipsis）
+ * - Tooltip 悬停提示完整内容
+ * - 自定义样式（字号、字重、颜色、对齐）
+ *
+ * @param props 组件 Props
+ */
+declare const ReadOnlyView: React.FC<PisellSingleLineTextProps>;
+export default ReadOnlyView;