@pisell/materials 1.8.23 → 1.8.25

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 (只读态视图)
+ * 只读状态下使用 Tag 展示选中值
+ */
+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,7 @@
+/**
+ * PisellSingleSelect 组件导出
+ */
+import PisellSingleSelect from './PisellSingleSelect';
+export { 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/pisellStatisticList/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import './index.less';
+export interface PisellStatisticListProps extends React.HTMLAttributes<HTMLDivElement> {
+    isHasBorder?: boolean;
+    backgroundColors?: string[];
+    labelColor?: string;
+    valueColor?: string;
+    data: {
+        label: string;
+        value: string;
+        isLink?: boolean;
+        link?: string;
+        tip?: string;
+        onClick?: () => void;
+        children?: {
+            label: string;
+            value: string;
+        }[];
+    }[];
+}
+declare const PisellStatisticList: (props: PisellStatisticListProps) => JSX.Element;
+export default PisellStatisticList;

package/lib/components/pisellText/components/Editable/index.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import './index.less';
+export declare type MultiLanguageValue = {
+    en: string;
+    'zh-CN': string;
+    'zh-HK': string;
+    'ja': string;
+    'pt': string;
+    original: string;
+};
+export interface EditableConfig {
+    /** 是否禁用编辑 */
+    disabled?: boolean;
+    /** 最大长度 */
+    maxLength?: number;
+    /** 编辑图标 */
+    icon?: React.ReactNode;
+}
+export interface EditableProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** 文本内容，支持字符串或多语言对象 */
+    value?: string | MultiLanguageValue;
+    /** 子节点内容，优先级高于 value */
+    children?: string;
+    /** 可编辑配置，boolean 时使用默认配置 */
+    editable?: boolean | EditableConfig;
+    /** 编辑变更回调 */
+    onChange?: (value: string | MultiLanguageValue) => void;
+    /** 输入框尺寸 */
+    size?: 'large' | 'middle' | 'small';
+}
+declare const Editable: React.FC<EditableProps>;
+export default Editable;

package/lib/components/pisellTimeNavigator/PisellTimeNavigator.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { PisellTimeNavigatorProps } from './types';
+import './PisellTimeNavigator.less';
+/**
+ * PisellTimeNavigator：可拖动的时间导航轴，时间范围内浏览、选择、控制
+ */
+export declare function PisellTimeNavigator(props: PisellTimeNavigatorProps): JSX.Element;
+export declare namespace PisellTimeNavigator {
+    var displayName: string;
+}

package/lib/components/pisellTimeNavigator/PisellTimeNavigator.js

@@ -66,7 +66,7 @@ function PisellTimeNavigator(props) {
     disabledRanges,
     showNowButton = true,
     userInteractionLocked = false,
-    snapToStep = true,
+    snapToStep = false,
     inertia = false,
     businessHours,
     pastTimeFade,

package/lib/components/pisellTimeNavigator/PisellTimeNavigator.less

@@ -167,7 +167,7 @@
   z-index: 1;
 
   &--horizontal {
-    height: 48px;
+    height: 30px;
     align-items: center;
     flex-direction: row;
   }
@@ -189,8 +189,8 @@
   position: relative;
 
   &--h {
-    width: 82px;
-    padding: 10px;
+    width: 54px;
+    padding: 2px 4px;
     flex-direction: column;
     gap: 0;
     /* 整点：点固定在格子水平中心、底部；非整点：点垂直居中 */
@@ -198,7 +198,7 @@
     .pisell-time-navigator-scale-dot {
       position: absolute;
       left: 50%;
-      bottom: 10px;
+      bottom: 4px;
       transform: translateX(-50%);
     }
 
@@ -230,12 +230,14 @@
 }
 
 .pisell-time-navigator-scale-label {
-  font-size: 18px;
+  font-size: 13px;
   font-weight: 500;
-  line-height: 28px;
+  line-height: 18px;
   color: #000;
   /* 与 dot 一致：以格子水平中心为基准，避免与竖线错位 */
   text-align: center;
+  /** 窄格（cursor-moves 压缩）下小时数字不换行 */
+  white-space: nowrap;
 }
 
 .pisell-time-navigator-scale-cell--h .pisell-time-navigator-scale-label {

package/lib/components/pisellTimeNavigator/PisellTimeNavigator.stories.d.ts

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellTimeNavigator } from './PisellTimeNavigator';
+/**
+ * PisellTimeNavigator 组件 Storybook
+ * 时间导航轴：时间范围内浏览、选择、控制
+ */
+declare const meta: Meta<typeof PisellTimeNavigator>;
+export default meta;
+declare type Story = StoryObj<typeof PisellTimeNavigator>;
+/**
+ * 默认：横向、轴动、显示 Now
+ */
+export declare const Default: Story;
+/** 默认 - 竖向 */
+export declare const DefaultVertical: Story;
+/**
+ * 受控 + 默认 12:00
+ */
+export declare const Controlled: Story;
+/** 受控 - 竖向 */
+export declare const ControlledVertical: Story;
+/**
+ * 非受控 + 默认 14:30
+ */
+export declare const Uncontrolled: Story;
+/** 非受控 - 竖向 */
+export declare const UncontrolledVertical: Story;
+/**
+ * 竖向
+ */
+export declare const Vertical: Story;
+/**
+ * 指针动模式（cursor-moves）
+ */
+export declare const CursorMoves: Story;
+/** 指针动模式 - 竖向 */
+export declare const CursorMovesVertical: Story;
+/**
+ * 营业时间高亮 10:00–22:00
+ */
+export declare const BusinessHours: Story;
+/** 营业时间高亮 - 竖向 */
+export declare const BusinessHoursVertical: Story;
+/**
+ * 自定义时间范围 08:00–20:00
+ */
+export declare const CustomRange: Story;
+/** 自定义时间范围 - 竖向 */
+export declare const CustomRangeVertical: Story;
+/**
+ * 步长 30 分钟
+ */
+export declare const Step30: Story;
+/** 步长 30 分钟 - 竖向 */
+export declare const Step30Vertical: Story;
+/**
+ * 惯性滚动开启
+ */
+export declare const Inertia: Story;
+/** 惯性滚动 - 竖向 */
+export declare const InertiaVertical: Story;
+/**
+ * 吸附到整点（松手后自动吸附到 0/15/30/45 分刻度）
+ */
+export declare const SnapToStep: Story;
+/** 吸附到整点 - 竖向 */
+export declare const SnapToStepVertical: Story;
+/**
+ * 隐藏 Now 按钮
+ */
+export declare const NoNowButton: Story;
+/** 隐藏 Now 按钮 - 竖向 */
+export declare const NoNowButtonVertical: Story;
+/**
+ * 实时模式（仅演示，实际会跟随系统时间）
+ */
+export declare const Realtime: Story;
+/** 实时模式 - 竖向 */
+export declare const RealtimeVertical: Story;

package/lib/components/pisellTimeNavigator/components/BackgroundLayer.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface BackgroundLayerProps {
+    orientation: 'horizontal' | 'vertical';
+    /** 过去时间淡化色 */
+    pastTimeFade?: string;
+    /** 营业时间区间 [startPx, endPx]，用于视觉高亮 */
+    businessHoursPx?: [number, number];
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * 背景区间层：营业时间高亮、过去时间淡化等（当前时间渐变已拆为独立块，见 axis-wrap 内 .pisell-time-navigator-current-gradient）
+ */
+export declare function BackgroundLayer({ orientation, pastTimeFade, businessHoursPx, className, style, }: BackgroundLayerProps): JSX.Element;

package/lib/components/pisellTimeNavigator/components/CursorLayer.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { Dayjs } from 'dayjs';
+export interface CursorLayerProps {
+    orientation: 'horizontal' | 'vertical';
+    value: Dayjs | null;
+    timeFormat: string;
+    locale?: string;
+    isRealtime: boolean;
+    offsetPx: number;
+    /** axis-moves 时固定于视口中央，不应用 offsetPx */
+    fixedCenter?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+    /** cursor-moves：允许拖指针改时间 */
+    dragInteractive?: boolean;
+    onDragPointerDown?: React.PointerEventHandler<HTMLDivElement>;
+    onDragPointerMove?: React.PointerEventHandler<HTMLDivElement>;
+    onDragPointerUp?: React.PointerEventHandler<HTMLDivElement>;
+    onDragPointerCancel?: React.PointerEventHandler<HTMLDivElement>;
+}
+/**
+ * 时间指示器层：横向为「顶三角 + 竖长方条」SVG，竖向为横线 + 时间气泡
+ * 对齐基准为几何中心。Realtime 态 #FF692E，浏览态 #344054
+ */
+export declare function CursorLayer({ orientation, value, timeFormat, locale, isRealtime, offsetPx, fixedCenter, style, className, dragInteractive, onDragPointerDown, onDragPointerMove, onDragPointerUp, onDragPointerCancel, }: CursorLayerProps): JSX.Element | null;

package/lib/components/pisellTimeNavigator/components/GestureLayer.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { Dayjs } from 'dayjs';
+export interface GestureLayerProps {
+    orientation: 'horizontal' | 'vertical';
+    cellSizePx: number;
+    /** 轴在滚动内容中的起始边距（左/上），用于把「滚动内容坐标」转为「轴内偏移」（与 dot 对齐） */
+    axisStartMarginPx: number;
+    offsetToTime: (offset: number) => Dayjs | null;
+    onSelectTime: (t: Dayjs) => void;
+    isInDisabledRanges: (t: Dayjs) => boolean;
+    snapToStep: boolean;
+    stepMinutes: number;
+    snapFn: (t: Dayjs) => Dayjs;
+    scrollPosition: {
+        scrollLeft: number;
+        scrollTop: number;
+    };
+    viewportSize: {
+        w: number;
+        h: number;
+    };
+    onPointerDown?: React.PointerEventHandler;
+    onPointerMove?: React.PointerEventHandler;
+    onPointerUp?: React.PointerEventHandler;
+    onPointerLeave?: React.PointerEventHandler;
+    /** 轴上任意指针按下（含惯性拖轴） */
+    onUserInteraction?: () => void;
+    children: React.ReactNode;
+}
+/**
+ * 交互层：点击刻度跳转、键盘左右/上下 + 回车
+ */
+export declare function GestureLayer({ orientation, cellSizePx, axisStartMarginPx, offsetToTime, onSelectTime, isInDisabledRanges, snapToStep, stepMinutes, snapFn, scrollPosition, viewportSize, onPointerDown, onPointerMove, onPointerUp, onPointerLeave, onUserInteraction, children, }: GestureLayerProps): JSX.Element;

package/lib/components/pisellTimeNavigator/components/NowButton.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { CSSProperties } from 'react';
+export interface NowButtonProps {
+    orientation: 'horizontal' | 'vertical';
+    onClick: () => void;
+    style?: CSSProperties;
+    className?: string;
+    renderCustom?: () => React.ReactNode;
+}
+/**
+ * Now 按钮：固定入口，点击跳回当前时间并进入 Realtime
+ * 横向：右侧，左箭头；竖向：底部，上箭头
+ */
+export declare function NowButton({ orientation, onClick, style, className, renderCustom, }: NowButtonProps): JSX.Element;

package/lib/components/pisellTimeNavigator/components/ScaleLayer.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { Dayjs } from 'dayjs';
+export interface ScaleLayerProps {
+    orientation: 'horizontal' | 'vertical';
+    ticks: Dayjs[];
+    stepMinutes: number;
+    majorStepMinutes: number;
+    timeFormat: string;
+    locale?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    /**
+     * 横向每格宽度（px），须与 useTimeAxis 的 cellSizePx 一致；
+     * 不传时样式表默认 82（axis-moves）；cursor-moves 压缩比例时必传
+     */
+    horizontalCellSizePx?: number;
+}
+/**
+ * 刻度层：渲染时间刻度与标签
+ * 横向：整点数字 + 小圆点；竖向：整点/半点数字 + 分割线
+ */
+export declare function ScaleLayer({ orientation, ticks, stepMinutes, majorStepMinutes, timeFormat, locale, style, className, horizontalCellSizePx, }: ScaleLayerProps): JSX.Element;

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

@@ -0,0 +1,5 @@
+export { BackgroundLayer } from './BackgroundLayer';
+export { CursorLayer } from './CursorLayer';
+export { GestureLayer } from './GestureLayer';
+export { NowButton } from './NowButton';
+export { ScaleLayer } from './ScaleLayer';

package/lib/components/pisellTimeNavigator/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export { useTimeAxis } from './useTimeAxis';
+export type { UseTimeAxisOptions, TimeAxisState } from './useTimeAxis';
+export { useRealtime } from './useRealtime';
+export { useDragInertia } from './useDragInertia';
+export type { UseDragInertiaOptions } from './useDragInertia';

package/lib/components/pisellTimeNavigator/hooks/useDragInertia.d.ts

@@ -0,0 +1,14 @@
+export interface UseDragInertiaOptions {
+    enabled: boolean;
+    orientation: 'horizontal' | 'vertical';
+    getScrollContainer: () => HTMLElement | null;
+}
+/**
+ * 惯性滚动：根据拖动末段速度在松手后继续滚动并衰减
+ */
+export declare function useDragInertia(options: UseDragInertiaOptions): {
+    onPointerDown: (e: React.PointerEvent) => void;
+    onPointerMove: (e: React.PointerEvent) => void;
+    onPointerUp: (e: React.PointerEvent) => void;
+    stopInertia: () => void;
+};

package/lib/components/pisellTimeNavigator/hooks/useRealtime.d.ts

@@ -0,0 +1,5 @@
+import type { Dayjs } from 'dayjs';
+/**
+ * Realtime 模式：每秒将当前系统时间通过 onTick 回传
+ */
+export declare function useRealtime(enabled: boolean, onTick: (now: Dayjs) => void): void;

package/lib/components/pisellTimeNavigator/hooks/useTimeAxis.d.ts

@@ -0,0 +1,27 @@
+import type { Dayjs } from 'dayjs';
+import type { TimeRangeOption } from '../types';
+export interface UseTimeAxisOptions {
+    range?: TimeRangeOption;
+    stepMinutes: number;
+    referenceDate: Dayjs;
+    orientation: 'horizontal' | 'vertical';
+    /** 横向时每格宽度（px），竖向时每格高度（px） */
+    cellSizePx: number;
+}
+export interface TimeAxisState {
+    rangeStart: Dayjs;
+    rangeEnd: Dayjs;
+    ticks: Dayjs[];
+    /** 时间转主轴偏移（px） */
+    timeToOffset: (t: Dayjs) => number;
+    /** 主轴偏移（px）转时间（最近刻度，用于刻度对齐） */
+    offsetToTime: (offset: number) => Dayjs | null;
+    /** 主轴偏移（px）转时间（连续插值，用于拖动时按分钟步长显示） */
+    offsetToTimeContinuous: (offset: number) => Dayjs | null;
+    /** 主轴总长度（px） */
+    totalLengthPx: number;
+}
+/**
+ * 时间轴刻度与时间↔像素换算
+ */
+export declare function useTimeAxis(options: UseTimeAxisOptions): TimeAxisState;

package/lib/components/pisellTimeNavigator/locales.d.ts

@@ -0,0 +1,22 @@
+/**
+ * PisellTimeNavigator 多语言文案
+ * 使用前请在应用内通过 locales.init() 合并本模块导出的 key
+ */
+declare const _default: {
+    en: {
+        'pisell-time-navigator.now': string;
+    };
+    'zh-CN': {
+        'pisell-time-navigator.now': string;
+    };
+    'zh-HK': {
+        'pisell-time-navigator.now': string;
+    };
+    ja: {
+        'pisell-time-navigator.now': string;
+    };
+    pt: {
+        'pisell-time-navigator.now': string;
+    };
+};
+export default _default;