@pisell/materials 6.3.25 → 6.3.27

package/es/components/pisellMultipleSelect/components/EditView.js

@@ -0,0 +1,176 @@
+var _excluded = ["value", "options", "label", "helperText", "error", "errorText", "required", "placeholder", "showSearch", "allowClear", "maxTagCount", "showTooltipOnOverflow", "size", "className", "style", "onSearch", "filterOption", "onChangeInternal"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * PisellMultipleSelect - EditView (编辑态视图)
+ * 正常可编辑状态下的渲染
+ */
+
+import React, { forwardRef, useMemo, useCallback, useState } from 'react';
+import { Select, Tooltip, Input } from 'antd';
+import { CheckOutlined, SearchOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import { useDebouncedSearch } from '@pisell/utils';
+var EditView = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$value = props.value,
+    value = _props$value === void 0 ? [] : _props$value,
+    options = props.options,
+    label = props.label,
+    helperText = props.helperText,
+    error = props.error,
+    errorText = props.errorText,
+    required = props.required,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? '请选择' : _props$placeholder,
+    _props$showSearch = props.showSearch,
+    showSearch = _props$showSearch === void 0 ? false : _props$showSearch,
+    _props$allowClear = props.allowClear,
+    allowClear = _props$allowClear === void 0 ? false : _props$allowClear,
+    _props$maxTagCount = props.maxTagCount,
+    maxTagCount = _props$maxTagCount === void 0 ? 3 : _props$maxTagCount,
+    _props$showTooltipOnO = props.showTooltipOnOverflow,
+    showTooltipOnOverflow = _props$showTooltipOnO === void 0 ? true : _props$showTooltipOnO,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'middle' : _props$size,
+    className = props.className,
+    style = props.style,
+    onSearch = props.onSearch,
+    filterOption = props.filterOption,
+    onChangeInternal = props.onChangeInternal,
+    restProps = _objectWithoutProperties(props, _excluded);
+
+  // 转换为 Ant Design 需要的格式
+  var antdOptions = useMemo(function () {
+    return options.map(function (opt) {
+      return {
+        label: opt.label,
+        value: opt.value,
+        disabled: opt.disabled
+      };
+    });
+  }, [options]);
+
+  // 搜索关键词状态
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchKeyword = _useState2[0],
+    setSearchKeyword = _useState2[1];
+
+  // 处理搜索输入（防抖）
+  var _useDebouncedSearch = useDebouncedSearch('', 300, function (text) {
+      onSearch === null || onSearch === void 0 || onSearch(text);
+    }),
+    _useDebouncedSearch2 = _slicedToArray(_useDebouncedSearch, 2),
+    setSearchInput = _useDebouncedSearch2[1];
+  var handleSearchInput = function handleSearchInput(e) {
+    var text = e.target.value;
+    setSearchKeyword(text);
+    setSearchInput(text);
+  };
+
+  // 过滤选项
+  var filteredAntdOptions = useMemo(function () {
+    if (!showSearch || !searchKeyword) return antdOptions;
+    if (filterOption) {
+      // 使用自定义过滤
+      return antdOptions.filter(function (opt) {
+        var selectOption = options.find(function (o) {
+          return o.value === opt.value;
+        });
+        return selectOption ? filterOption(searchKeyword, selectOption) : false;
+      });
+    }
+
+    // 默认按 label 过滤
+    return antdOptions.filter(function (opt) {
+      return opt.label.toLowerCase().includes(searchKeyword.toLowerCase());
+    });
+  }, [antdOptions, searchKeyword, showSearch, filterOption, options]);
+
+  // 自定义选中图标
+  var menuItemSelectedIcon = /*#__PURE__*/React.createElement(CheckOutlined, {
+    style: {
+      color: '#7F56D9',
+      fontSize: 16
+    }
+  });
+
+  // 自定义下拉框渲染（在顶部添加搜索框）
+  var dropdownRender = useCallback(function (menu) {
+    if (!showSearch) return menu;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "pisell-select-search-wrapper"
+    }, /*#__PURE__*/React.createElement(Input, {
+      placeholder: "Search",
+      prefix: /*#__PURE__*/React.createElement(SearchOutlined, {
+        style: {
+          color: '#98A2B3',
+          fontSize: 16
+        }
+      }),
+      value: searchKeyword,
+      onChange: handleSearchInput,
+      className: "pisell-select-search-input",
+      bordered: false,
+      autoFocus: true
+    })), menu);
+  }, [showSearch, searchKeyword, handleSearchInput]);
+
+  // 自定义聚合标签渲染
+  var maxTagPlaceholder = useCallback(function (omittedValues) {
+    if (!showTooltipOnOverflow) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: "pisell-multiple-select-more-tag"
+      }, "+", omittedValues.length);
+    }
+    var tooltipContent = omittedValues.map(function (v) {
+      var _options$find;
+      return (_options$find = options.find(function (opt) {
+        return opt.value === v.value;
+      })) === null || _options$find === void 0 ? void 0 : _options$find.label;
+    }).filter(Boolean).join(', ');
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      title: tooltipContent
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "pisell-multiple-select-more-tag"
+    }, "+", omittedValues.length));
+  }, [options, showTooltipOnOverflow]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-multiple-select-wrapper', className),
+    style: style
+  }, label && /*#__PURE__*/React.createElement("label", {
+    className: classNames('pisell-multiple-select-label', {
+      'pisell-multiple-select-label-required': required
+    })
+  }, label), /*#__PURE__*/React.createElement(Select, _extends({}, restProps, {
+    ref: ref,
+    mode: "multiple",
+    value: value,
+    options: filteredAntdOptions,
+    placeholder: placeholder,
+    showSearch: false,
+    allowClear: allowClear,
+    menuItemSelectedIcon: menuItemSelectedIcon,
+    dropdownRender: dropdownRender,
+    onChange: onChangeInternal,
+    maxTagCount: maxTagCount,
+    maxTagPlaceholder: maxTagPlaceholder,
+    size: size,
+    className: classNames('pisell-multiple-select', {
+      'pisell-multiple-select-error': error
+    })
+  })), helperText && !error && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-multiple-select-helper-text"
+  }, helperText), error && errorText && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-multiple-select-error-text"
+  }, errorText));
+});
+EditView.displayName = 'PisellMultipleSelectEditView';
+export default EditView;

package/es/components/pisellMultipleSelect/components/ReadOnlyView.d.ts

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

package/es/components/pisellMultipleSelect/components/ReadOnlyView.js

@@ -0,0 +1,57 @@
+/**
+ * PisellMultipleSelect - ReadOnlyView (只读态视图)
+ * 只读状态下的渲染
+ */
+
+import React, { useMemo } from 'react';
+import { Tooltip } from 'antd';
+import classNames from 'classnames';
+import { findOptionsByValues, calculateTagDisplay } from '@pisell/utils';
+var ReadOnlyView = function ReadOnlyView(props) {
+  var _props$value = props.value,
+    value = _props$value === void 0 ? [] : _props$value,
+    options = props.options,
+    label = props.label,
+    required = props.required,
+    _props$maxTagCount = props.maxTagCount,
+    maxTagCount = _props$maxTagCount === void 0 ? 3 : _props$maxTagCount,
+    className = props.className,
+    style = props.style;
+
+  // 查找选中的选项
+  var selectedOptions = useMemo(function () {
+    return findOptionsByValues(value, options);
+  }, [value, options]);
+
+  // 标签聚合信息
+  var tagDisplayInfo = useMemo(function () {
+    return calculateTagDisplay(value, options, maxTagCount);
+  }, [value, options, maxTagCount]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-multiple-select-wrapper', 'pisell-multiple-select-readonly', className),
+    style: style
+  }, label && /*#__PURE__*/React.createElement("label", {
+    className: classNames('pisell-multiple-select-label', {
+      'pisell-multiple-select-label-required': required
+    })
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-multiple-select-readonly-display"
+  }, selectedOptions.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, tagDisplayInfo.visibleTags.map(function (option) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: option.value,
+      className: "pisell-multiple-select-readonly-tag"
+    }, option.icon && /*#__PURE__*/React.createElement("span", {
+      className: "pisell-multiple-select-readonly-tag-icon"
+    }, option.icon), option.label);
+  }), tagDisplayInfo.hiddenCount > 0 && /*#__PURE__*/React.createElement(Tooltip, {
+    title: tagDisplayInfo.hiddenTags.map(function (t) {
+      return t.label;
+    }).join(', ')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "pisell-multiple-select-readonly-more-tag"
+  }, "+", tagDisplayInfo.hiddenCount))) : /*#__PURE__*/React.createElement("span", {
+    className: "pisell-multiple-select-readonly-empty"
+  }, "-")));
+};
+ReadOnlyView.displayName = 'PisellMultipleSelectReadOnlyView';
+export default ReadOnlyView;

package/es/components/pisellMultipleSelect/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * PisellMultipleSelect 组件导出
+ */
+export { default as PisellMultipleSelect } from './PisellMultipleSelect';
+export type { PisellMultipleSelectProps, MultipleSelectRef, EditViewProps, DisabledViewProps, ReadOnlyViewProps, TagRendererProps, } from './types';
+export type { SelectOption, FilterOptionFunc, SortDirection, MultipleSelectState, TagDisplayInfo, } from './types';

package/es/components/pisellMultipleSelect/index.js

@@ -0,0 +1,7 @@
+/**
+ * PisellMultipleSelect 组件导出
+ */
+
+export { default as PisellMultipleSelect } from "./PisellMultipleSelect";
+
+// 公共类型从 types 中重新导出，方便使用

package/es/components/pisellMultipleSelect/types.d.ts

@@ -0,0 +1,160 @@
+import type { BaseSelectProps, SelectOption } from '@pisell/utils';
+/**
+ * PisellMultipleSelect 组件 Props 类型定义
+ *
+ * 继承 BaseSelectProps，添加多选特有的配置
+ * @template T 选项值的类型，默认为 string | number
+ */
+export interface PisellMultipleSelectProps<T = string | number> extends BaseSelectProps<T> {
+    /**
+     * 受控模式：当前选中值数组
+     */
+    value?: T[];
+    /**
+     * 非受控模式：默认选中值数组
+     */
+    defaultValue?: T[];
+    /**
+     * 值变化回调
+     * @param value 新的选中值数组
+     * @param options 选中的选项对象数组
+     */
+    onChange?: (value: T[], options: SelectOption<T>[]) => void;
+    /**
+     * 最多显示的标签数量
+     * 超出部分会显示 "+N" 聚合标签
+     * @default 3
+     */
+    maxTagCount?: number;
+    /**
+     * 超出标签 hover 时是否显示 Tooltip
+     * @default true
+     */
+    showTooltipOnOverflow?: boolean;
+    /**
+     * 最大可选数量
+     * 达到上限时阻止继续选择
+     * @default undefined（无限制）
+     */
+    maxCount?: number;
+    /**
+     * 取消选中某项时触发
+     * @param value 被取消选中的值
+     * @param option 被取消选中的选项对象
+     */
+    onDeselect?: (value: T, option: SelectOption<T>) => void;
+    /**
+     * ARIA 标签
+     */
+    'aria-label'?: string;
+    /**
+     * ARIA 是否必填
+     */
+    'aria-required'?: boolean;
+    /**
+     * ARIA 是否无效
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * ARIA 描述关联 ID
+     */
+    'aria-describedby'?: string;
+    /**
+     * ARIA 多选标识
+     * @default true
+     */
+    'aria-multiselectable'?: boolean;
+}
+/**
+ * PisellMultipleSelect 组件 Ref 方法
+ * @template T 选项值的类型
+ */
+export interface MultipleSelectRef<T = string | number> {
+    /**
+     * 聚焦到组件
+     */
+    focus: () => void;
+    /**
+     * 失焦
+     */
+    blur: () => void;
+    /**
+     * 获取当前选中值数组
+     */
+    getValue: () => T[];
+    /**
+     * 设置选中值数组
+     */
+    setValue: (value: T[]) => void;
+    /**
+     * 清空所有选中值
+     */
+    clearValue: () => void;
+    /**
+     * 添加一个选中值
+     */
+    addValue: (value: T) => void;
+    /**
+     * 移除一个选中值
+     */
+    removeValue: (value: T) => void;
+}
+/**
+ * EditView 组件 Props
+ * @template T 选项值的类型
+ */
+export interface EditViewProps<T = string | number> extends PisellMultipleSelectProps<T> {
+    /**
+     * 内部状态管理对象（从 useSelectState Hook 传入）
+     */
+    state?: {
+        value: T[];
+        setValue: (value: T[]) => void;
+        addValue: (value: T) => void;
+        removeValue: (value: T) => void;
+        clearValue: () => void;
+    };
+    /**
+     * 内部 onChange 处理（包含 maxCount 限制等逻辑）
+     */
+    onChangeInternal?: (value: T[]) => void;
+}
+/**
+ * DisabledView 组件 Props
+ * @template T 选项值的类型
+ */
+export interface DisabledViewProps<T = string | number> extends PisellMultipleSelectProps<T> {
+}
+/**
+ * ReadOnlyView 组件 Props
+ * @template T 选项值的类型
+ */
+export interface ReadOnlyViewProps<T = string | number> extends PisellMultipleSelectProps<T> {
+}
+/**
+ * TagRenderer 组件 Props（可选，用于自定义标签渲染）
+ * @template T 选项值的类型
+ */
+export interface TagRendererProps<T = string | number> {
+    /**
+     * 当前选中值数组
+     */
+    value: T[];
+    /**
+     * 所有选项列表
+     */
+    options: SelectOption<T>[];
+    /**
+     * 最多显示的标签数量
+     */
+    maxTagCount: number;
+    /**
+     * 是否显示 Tooltip
+     */
+    showTooltip: boolean;
+    /**
+     * 移除标签回调
+     */
+    onRemove?: (value: T) => void;
+}
+export type { SelectOption, FilterOptionFunc, SortDirection, MultipleSelectState, TagDisplayInfo, } from '@pisell/utils';

package/es/components/pisellMultipleSelect/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/pisellNumber/PisellNumber.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { PisellNumberProps } from './types';
+import './PisellNumber.less';
+/**
+ * PisellNumber 数值组件
+ *
+ * 通用的数值输入/展示组件，支持只读、编辑、禁用三种状态。
+ * 基于 Ant Design InputNumber 组件开发，提供完整的校验框架。
+ *
+ * @param props 组件 Props
+ *
+ * @example
+ * // 受控模式
+ * const [value, setValue] = useState(0);
+ * <PisellNumber
+ *   value={value}
+ *   onChange={setValue}
+ *   min={0}
+ *   max={100}
+ * />
+ *
+ * @example
+ * // 非受控模式
+ * <PisellNumber
+ *   defaultValue={10}
+ *   min={0}
+ *   max={999}
+ *   step={10}
+ * />
+ *
+ * @example
+ * // 只读态
+ * <PisellNumber
+ *   mode="read"
+ *   value={1234.567}
+ *   precision={2}
+ *   useGrouping
+ * />
+ */
+export declare const PisellNumber: React.FC<PisellNumberProps>;
+declare const MemoizedPisellNumber: React.NamedExoticComponent<PisellNumberProps>;
+export default MemoizedPisellNumber;

package/es/components/pisellNumber/PisellNumber.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { getDisplayState } from '@pisell/utils';
+import ReadOnlyView from "./components/ReadOnlyView";
+import EditView from "./components/EditView";
+import DisabledView from "./components/DisabledView";
+import "./PisellNumber.less";
+
+/**
+ * PisellNumber 数值组件
+ * 
+ * 通用的数值输入/展示组件，支持只读、编辑、禁用三种状态。
+ * 基于 Ant Design InputNumber 组件开发，提供完整的校验框架。
+ * 
+ * @param props 组件 Props
+ * 
+ * @example
+ * // 受控模式
+ * const [value, setValue] = useState(0);
+ * <PisellNumber 
+ *   value={value}
+ *   onChange={setValue}
+ *   min={0}
+ *   max={100}
+ * />
+ * 
+ * @example
+ * // 非受控模式
+ * <PisellNumber 
+ *   defaultValue={10}
+ *   min={0}
+ *   max={999}
+ *   step={10}
+ * />
+ * 
+ * @example
+ * // 只读态
+ * <PisellNumber 
+ *   mode="read"
+ *   value={1234.567}
+ *   precision={2}
+ *   useGrouping
+ * />
+ */
+export var PisellNumber = function PisellNumber(props) {
+  var _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'edit' : _props$mode,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled;
+
+  // 计算显示状态
+  var displayState = getDisplayState(mode, disabled);
+
+  // 根据状态渲染对应子组件
+  switch (displayState) {
+    case 'read':
+      return /*#__PURE__*/React.createElement(ReadOnlyView, props);
+    case 'edit':
+      return /*#__PURE__*/React.createElement(EditView, props);
+    case 'disabled':
+      return /*#__PURE__*/React.createElement(DisabledView, props);
+    default:
+      return null;
+  }
+};
+
+// 性能优化：使用 memo 避免不必要的重渲染
+var MemoizedPisellNumber = /*#__PURE__*/React.memo(PisellNumber, function (prevProps, nextProps) {
+  return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled;
+});
+export default MemoizedPisellNumber;

package/es/components/pisellNumber/PisellNumber.less

@@ -0,0 +1,30 @@
+// PisellNumber 组件样式
+
+.pisell-number {
+  // 基础样式
+  display: inline-block;
+
+  // 只读态样式
+  &-read {
+    color: rgba(0, 0, 0, 0.85);
+    line-height: 1.5715;
+  }
+
+  // 编辑态样式
+  &-edit {
+    position: relative;
+
+    // 错误提示
+    .pisell-number-error {
+      margin-top: 4px;
+      color: #ff4d4f;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+  }
+
+  // 禁用态样式
+  &-disabled {
+    // 继承 Ant Design InputNumber 的禁用样式
+  }
+}

package/es/components/pisellNumber/PisellNumber.stories.d.ts

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellNumber } from './PisellNumber';
+/**
+ * PisellNumber 组件 Storybook
+ *
+ * 用于展示和测试组件的各种状态和配置
+ */
+declare const meta: Meta<typeof PisellNumber>;
+export default meta;
+declare type Story = StoryObj<typeof PisellNumber>;
+/**
+ * 基础示例 - 编辑态
+ */
+export declare const Basic: Story;
+/**
+ * 只读态展示
+ */
+export declare const ReadOnly: Story;
+/**
+ * 禁用态
+ */
+export declare const Disabled: Story;
+/**
+ * 带范围限制
+ */
+export declare const WithRange: Story;
+/**
+ * 带精度控制
+ */
+export declare const WithPrecision: Story;
+/**
+ * 千分位分隔符
+ */
+export declare const WithGrouping: Story;
+/**
+ * 带前后缀
+ */
+export declare const WithAddon: Story;
+/**
+ * 带校验 - 必填
+ */
+export declare const WithValidationRequired: Story;
+/**
+ * 带校验 - 范围校验
+ */
+export declare const WithValidationRange: Story;
+/**
+ * 带校验 - 自定义校验
+ */
+export declare const WithCustomValidation: Story;
+/**
+ * 不同尺寸
+ */
+export declare const Sizes: Story;
+/**
+ * 只读态样式配置
+ */
+export declare const ReadOnlyStyles: Story;
+/**
+ * 表单场景
+ */
+export declare const InForm: Story;
+/**
+ * 空值处理
+ */
+export declare const EmptyValue: Story;