@pisell/materials 1.8.6 → 1.8.8

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;

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/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/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.less

@@ -64,8 +64,8 @@
   // hover 边框颜色（Token 不支持 colorBorderHover）
   :global {
     // hover 边框颜色
-    .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-select-open) {
-      .ant-select-selector: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;
       }
     }
@@ -82,17 +82,17 @@
   .pisell-select-search-input {
     padding: 9px 10px !important;
     font-size: 14px;
-    
-    .ant-input {
+
+    .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;

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;

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

@@ -0,0 +1,8 @@
+/**
+ * PisellSingleSelect - DisabledView (禁用态视图)
+ * 禁用状态下的渲染
+ */
+import React from 'react';
+import type { DisabledViewProps } from '../types';
+declare const DisabledView: React.ForwardRefExoticComponent<DisabledViewProps<string | number> & React.RefAttributes<any>>;
+export default DisabledView;

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

@@ -0,0 +1,8 @@
+/**
+ * PisellSingleSelect - EditView (编辑态视图)
+ * 正常可编辑状态下的渲染
+ */
+import React from 'react';
+import type { EditViewProps } from '../types';
+declare const EditView: React.ForwardRefExoticComponent<EditViewProps<string | number> & React.RefAttributes<any>>;
+export default EditView;

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

@@ -0,0 +1,8 @@
+/**
+ * PisellSingleSelect - ReadOnlyView (只读态视图)
+ * 只读状态下的渲染
+ */
+import React from 'react';
+import type { ReadOnlyViewProps } from '../types';
+declare const ReadOnlyView: React.FC<ReadOnlyViewProps>;
+export default ReadOnlyView;

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

@@ -0,0 +1,6 @@
+/**
+ * PisellSingleSelect 组件导出
+ */
+export { default as PisellSingleSelect } from './PisellSingleSelect';
+export type { PisellSingleSelectProps, SingleSelectRef, EditViewProps, DisabledViewProps, ReadOnlyViewProps, } from './types';
+export type { SelectOption, FilterOptionFunc, SortDirection, SelectState, } from './types';

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

@@ -0,0 +1,92 @@
+import type { BaseSelectProps, SelectOption } from '@pisell/utils';
+/**
+ * PisellSingleSelect 组件 Props 类型定义
+ *
+ * 继承 BaseSelectProps，添加单选特有的配置
+ * @template T 选项值的类型，默认为 string | number
+ */
+export interface PisellSingleSelectProps<T = string | number> extends BaseSelectProps<T> {
+    /**
+     * 受控模式：当前选中值
+     */
+    value?: T | null;
+    /**
+     * 非受控模式：默认选中值
+     */
+    defaultValue?: T;
+    /**
+     * 值变化回调
+     * @param value 新的选中值
+     * @param option 选中的选项对象（如果值为 null 则 option 也为 null）
+     */
+    onChange?: (value: T | null, option: SelectOption<T> | null) => void;
+    /**
+     * ARIA 标签
+     */
+    'aria-label'?: string;
+    /**
+     * ARIA 是否必填
+     */
+    'aria-required'?: boolean;
+    /**
+     * ARIA 是否无效
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * ARIA 描述关联 ID
+     */
+    'aria-describedby'?: string;
+}
+/**
+ * PisellSingleSelect 组件 Ref 方法
+ * @template T 选项值的类型
+ */
+export interface SingleSelectRef<T = string | number> {
+    /**
+     * 聚焦到组件
+     */
+    focus: () => void;
+    /**
+     * 失焦
+     */
+    blur: () => void;
+    /**
+     * 获取当前选中值
+     */
+    getValue: () => T | null;
+    /**
+     * 设置选中值
+     */
+    setValue: (value: T | null) => void;
+    /**
+     * 清空选中值
+     */
+    clearValue: () => void;
+}
+/**
+ * EditView 组件 Props
+ * @template T 选项值的类型
+ */
+export interface EditViewProps<T = string | number> extends PisellSingleSelectProps<T> {
+    /**
+     * 内部状态管理对象（从 useSelectState Hook 传入）
+     */
+    state?: {
+        value: T | null | undefined;
+        setValue: (value: T | null) => void;
+        clearValue: () => void;
+    };
+}
+/**
+ * DisabledView 组件 Props
+ * @template T 选项值的类型
+ */
+export interface DisabledViewProps<T = string | number> extends PisellSingleSelectProps<T> {
+}
+/**
+ * ReadOnlyView 组件 Props
+ * @template T 选项值的类型
+ */
+export interface ReadOnlyViewProps<T = string | number> extends PisellSingleSelectProps<T> {
+}
+export type { SelectOption, FilterOptionFunc, SortDirection, SelectState, } from '@pisell/utils';

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

@@ -0,0 +1,3 @@
+import { PisellSortProps } from './type';
+declare const PisellSort: (props: PisellSortProps) => JSX.Element;
+export default PisellSort;

package/lib/components/pisellSort/type.d.ts

@@ -0,0 +1,7 @@
+import { SortListProps } from '../sort/types';
+import { FormInstance } from 'antd';
+export declare type PisellSortProps = SortListProps & {
+    name?: string;
+} & FormInstance & {
+    hasForm?: boolean;
+};

package/lib/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+import type { PisellTimeRangeDisplayProps } from './types';
+import './PisellTimeRangeDisplay.less';
+/**
+ * PisellTimeRangeDisplay 组件
+ *
+ * @description
+ * 纯展示型时间区间组件，将 startAt / endAt 格式化为「时间区间 + 持续时间」。
+ * - 同一天：HH:mm-HH:mm，可选显示日期/星期
+ * - 跨天：起止日期时间
+ * - 持续时间：d h m s 格式
+ * - 字段顺序由 fieldOrder 控制，可将 duration 放在中间
+ *
+ * @example
+ * <PisellTimeRangeDisplay
+ *   startAt="2026-02-04 09:00"
+ *   endAt="2026-02-04 18:00"
+ * />
+ * // => "09:00-18:00" + "9h"
+ *
+ * <PisellTimeRangeDisplay
+ *   startAt={start}
+ *   endAt={end}
+ *   fields={{ fieldOrder: ['time', 'duration', 'date', 'weekday'] }}
+ *   showDateForSameDay
+ * />
+ */
+export declare const PisellTimeRangeDisplay: React.FC<PisellTimeRangeDisplayProps>;
+declare const _default: React.NamedExoticComponent<PisellTimeRangeDisplayProps>;
+export default _default;

package/lib/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.js

@@ -0,0 +1,193 @@
+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/pisellTimeRangeDisplay/PisellTimeRangeDisplay.tsx
+var PisellTimeRangeDisplay_exports = {};
+__export(PisellTimeRangeDisplay_exports, {
+  PisellTimeRangeDisplay: () => PisellTimeRangeDisplay,
+  default: () => PisellTimeRangeDisplay_default
+});
+module.exports = __toCommonJS(PisellTimeRangeDisplay_exports);
+var import_react = __toESM(require("react"));
+var import_dayjs = __toESM(require("dayjs"));
+var import_zh_cn = require("dayjs/locale/zh-cn");
+var import_en = require("dayjs/locale/en");
+var import_utils = require("./utils");
+var import_components = require("./components");
+var import_PisellTimeRangeDisplay = require("./PisellTimeRangeDisplay.less");
+var PisellTimeRangeDisplay = (props) => {
+  const {
+    startAt,
+    endAt,
+    textAlign = "center",
+    fields,
+    showDateForSameDay = true,
+    timeFormat,
+    dateFormat,
+    weekdayFormat,
+    durationFormat,
+    containerStyle,
+    timeStyle,
+    dateStyle,
+    weekdayStyle,
+    durationStyle,
+    locale: localeProp,
+    className,
+    style,
+    onClick
+  } = props;
+  const effectiveLocale = (0, import_react.useMemo)(
+    () => localeProp ?? (0, import_utils.getDayjsLocale)(),
+    [localeProp]
+  );
+  const { start, end, isSameDay } = (0, import_react.useMemo)(
+    () => (0, import_utils.parseTimeRange)(startAt, endAt, effectiveLocale),
+    [startAt, endAt, effectiveLocale]
+  );
+  const durationMs = (0, import_react.useMemo)(() => end.diff(start), [start, end]);
+  const {
+    showTimeRange = true,
+    showDate = true,
+    showWeekday = true,
+    showDuration = true,
+    fieldOrder = ["weekday", "date", "time", "duration"]
+  } = fields || {};
+  const showSeconds = (durationFormat == null ? void 0 : durationFormat.showSeconds) ?? false;
+  const effectiveDateFormat = (0, import_react.useMemo)(
+    () => ({ showRelativeDay: true, ...dateFormat }),
+    [dateFormat]
+  );
+  const referenceDate = (0, import_dayjs.default)();
+  const relativeDay = (effectiveDateFormat == null ? void 0 : effectiveDateFormat.showRelativeDay) ? (0, import_utils.getRelativeDay)(start, referenceDate) : null;
+  const hideWeekdayWhenDateRelative = showDate && relativeDay !== null;
+  const justifyContent = textAlign === "right" ? "flex-end" : textAlign === "left" ? "flex-start" : "center";
+  const containerInlineStyle = {
+    background: containerStyle == null ? void 0 : containerStyle.background,
+    borderRadius: containerStyle == null ? void 0 : containerStyle.borderRadius,
+    border: containerStyle == null ? void 0 : containerStyle.border,
+    boxShadow: containerStyle == null ? void 0 : containerStyle.boxShadow,
+    padding: containerStyle == null ? void 0 : containerStyle.padding,
+    gap: containerStyle == null ? void 0 : containerStyle.gap,
+    textAlign,
+    justifyContent,
+    ...style
+  };
+  const renderField = (fieldType) => {
+    switch (fieldType) {
+      case "time":
+        return showTimeRange ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.TimeRangeBlock,
+          {
+            key: "time",
+            start,
+            end,
+            isSameDay,
+            timeFormat,
+            dateFormat: effectiveDateFormat,
+            weekdayFormat,
+            referenceDate: (0, import_dayjs.default)(),
+            style: timeStyle
+          }
+        ) : null;
+      case "date":
+        if (!showDate) return null;
+        if (!isSameDay) return null;
+        if (!showDateForSameDay) return null;
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_components.DateBlock,
+          {
+            key: "date",
+            date: start,
+            format: effectiveDateFormat,
+            referenceDate: (0, import_dayjs.default)(),
+            style: dateStyle
+          }
+        );
+      case "weekday":
+        if (!showWeekday) return null;
+        if (!isSameDay) return null;
+        if (!showDateForSameDay) return null;
+        if (hideWeekdayWhenDateRelative) return null;
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_components.WeekdayBlock,
+          {
+            key: "weekday",
+            weekday: start,
+            format: weekdayFormat,
+            style: weekdayStyle
+          }
+        );
+      case "duration":
+        return showDuration ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.DurationBlock,
+          {
+            key: "duration",
+            durationMs,
+            showSeconds,
+            locale: effectiveLocale,
+            style: durationStyle
+          }
+        ) : null;
+      default:
+        return null;
+    }
+  };
+  const items = [];
+  fieldOrder.forEach((fieldType) => {
+    const node = renderField(fieldType);
+    if (node != null) {
+      items.push({ type: fieldType, node });
+    }
+  });
+  if (items.length === 0) {
+    return null;
+  }
+  const renderedWithSeparator = items.flatMap(({ type, node }, index) => {
+    const needDotBefore = type === "duration" && index > 0;
+    const needDotAfter = type === "duration" && index < items.length - 1;
+    const sep = /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-time-range-display-sep", "aria-hidden": true }, " · ");
+    const el = import_react.default.cloneElement(node, { key: type });
+    if (needDotBefore) return [sep, el];
+    if (needDotAfter) return [el, sep];
+    return [el];
+  });
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: `pisell-time-range-display ${className || ""}`.trim(),
+      style: containerInlineStyle,
+      onClick
+    },
+    renderedWithSeparator
+  );
+};
+var PisellTimeRangeDisplay_default = import_react.default.memo(PisellTimeRangeDisplay);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellTimeRangeDisplay
+});