@pisell/materials 3.3.82 → 3.3.83

package/es/components/pisellMetricCard/components/TrendIcon.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
+/**
+ * TrendIcon 趋势箭头组件
+ * 
+ * 根据趋势类型显示上升或下降箭头
+ * - up: 显示上升箭头 ↑
+ * - down: 显示下降箭头 ↓
+ * - neutral: 不显示箭头
+ * 
+ * @param props 组件属性
+ */
+var TrendIcon = function TrendIcon(_ref) {
+  var trend = _ref.trend,
+    color = _ref.color;
+  // neutral 状态不显示图标
+  if (trend === 'neutral') {
+    return null;
+  }
+
+  // 根据趋势选择图标
+  var Icon = trend === 'up' ? ArrowUpOutlined : ArrowDownOutlined;
+  return /*#__PURE__*/React.createElement(Icon, {
+    className: "pisell-metric-card-trend-icon",
+    style: {
+      color: color
+    }
+  });
+};
+export default TrendIcon;

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

@@ -0,0 +1,7 @@
+/**
+ * 子组件导出
+ */
+export { default as TrendIcon } from './TrendIcon';
+export { default as MetricValue } from './MetricValue';
+export { default as MetricTitle } from './MetricTitle';
+export { default as MetricComparison } from './MetricComparison';

package/es/components/pisellMetricCard/components/index.js

@@ -0,0 +1,8 @@
+/**
+ * 子组件导出
+ */
+
+export { default as TrendIcon } from "./TrendIcon";
+export { default as MetricValue } from "./MetricValue";
+export { default as MetricTitle } from "./MetricTitle";
+export { default as MetricComparison } from "./MetricComparison";

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

@@ -0,0 +1,6 @@
+/**
+ * PisellMetricCard 组件导出
+ */
+export { default as PisellMetricCard } from './PisellMetricCard';
+export type { PisellMetricCardProps, TrendType, FormatOptions, MetricTitleProps, MetricValueProps, MetricComparisonProps, TrendIconProps, } from './types';
+export { default } from './PisellMetricCard';

package/es/components/pisellMetricCard/index.js

@@ -0,0 +1,7 @@
+/**
+ * PisellMetricCard 组件导出
+ */
+
+export { default as PisellMetricCard } from "./PisellMetricCard";
+// 默认导出
+export { default } from "./PisellMetricCard";

package/es/components/pisellMetricCard/types.js

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

package/es/components/pisellMetricCard/utils/calculateTrend.js

@@ -0,0 +1,29 @@
+/**
+ * 计算趋势方向
+ * 
+ * @param comparison 环比数值
+ * @returns 'up' | 'down' | 'neutral'
+ * 
+ * @example
+ * calculateTrend(120) // 'up'
+ * calculateTrend(-230) // 'down'
+ * calculateTrend(0) // 'neutral'
+ * calculateTrend(null) // 'neutral'
+ */
+export function calculateTrend(comparison) {
+  // 处理空值
+  if (comparison === null || comparison === undefined) {
+    return 'neutral';
+  }
+
+  // 转换为数字
+  var numComparison = typeof comparison === 'string' ? parseFloat(comparison) : comparison;
+
+  // 处理非数字或零值
+  if (isNaN(numComparison) || numComparison === 0) {
+    return 'neutral';
+  }
+
+  // 判断正负
+  return numComparison > 0 ? 'up' : 'down';
+}

package/es/components/pisellMetricCard/utils/formatMetricValue.d.ts

@@ -0,0 +1,34 @@
+import type { FormatOptions } from '../types';
+/**
+ * 格式化指标数值
+ *
+ * 支持以下格式化选项：
+ * - 小数精度控制
+ * - 千分位分隔符
+ * - 货币符号显示
+ * - 自定义格式化函数
+ * - 整数时隐藏小数部分
+ *
+ * @param value 数值
+ * @param options 格式化选项
+ * @returns 格式化后的字符串，null 时返回 null
+ *
+ * @example
+ * formatMetricValue(1234.56, { precision: 2, useGrouping: true })
+ * // 返回: "1,234.56"
+ *
+ * @example
+ * formatMetricValue(1580, {
+ *   showCurrencySymbol: true,
+ *   currencySymbol: '$'
+ * })
+ * // 返回: "$1580"
+ *
+ * @example
+ * formatMetricValue(100.00, {
+ *   precision: 2,
+ *   hideDecimalForWholeNumbers: true
+ * })
+ * // 返回: "100"
+ */
+export declare function formatMetricValue(value: number | string | null | undefined, options?: FormatOptions): string | null;

package/es/components/pisellMetricCard/utils/formatMetricValue.js

@@ -0,0 +1,63 @@
+import { formatAmountWithOptions } from '@pisell/utils';
+/**
+ * 格式化指标数值
+ * 
+ * 支持以下格式化选项：
+ * - 小数精度控制
+ * - 千分位分隔符
+ * - 货币符号显示
+ * - 自定义格式化函数
+ * - 整数时隐藏小数部分
+ * 
+ * @param value 数值
+ * @param options 格式化选项
+ * @returns 格式化后的字符串，null 时返回 null
+ * 
+ * @example
+ * formatMetricValue(1234.56, { precision: 2, useGrouping: true })
+ * // 返回: "1,234.56"
+ * 
+ * @example
+ * formatMetricValue(1580, { 
+ *   showCurrencySymbol: true, 
+ *   currencySymbol: '$' 
+ * })
+ * // 返回: "$1580"
+ * 
+ * @example
+ * formatMetricValue(100.00, { 
+ *   precision: 2,
+ *   hideDecimalForWholeNumbers: true 
+ * })
+ * // 返回: "100"
+ */
+export function formatMetricValue(value) {
+  var _options$precision, _options$useGrouping, _options$showCurrency, _options$hideDecimalF;
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  // 处理空值
+  if (value === null || value === undefined) {
+    return null;
+  }
+
+  // 转换为数字
+  var numValue = typeof value === 'string' ? parseFloat(value) : value;
+
+  // 处理非数字
+  if (isNaN(numValue)) {
+    return null;
+  }
+
+  // 优先使用自定义格式化函数
+  if (options.formatter) {
+    return options.formatter(numValue);
+  }
+
+  // 使用 @pisell/utils 的格式化工具
+  var formatted = formatAmountWithOptions(numValue, options.currencySymbol || '', {
+    precision: (_options$precision = options.precision) !== null && _options$precision !== void 0 ? _options$precision : 0,
+    useThousandsSeparator: (_options$useGrouping = options.useGrouping) !== null && _options$useGrouping !== void 0 ? _options$useGrouping : false,
+    showCurrencySymbol: (_options$showCurrency = options.showCurrencySymbol) !== null && _options$showCurrency !== void 0 ? _options$showCurrency : false,
+    hideDecimalForWholeNumbers: (_options$hideDecimalF = options.hideDecimalForWholeNumbers) !== null && _options$hideDecimalF !== void 0 ? _options$hideDecimalF : true
+  });
+  return String(formatted);
+}

package/es/components/pisellMetricCard/utils/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 工具函数导出
+ */
+export { formatMetricValue } from './formatMetricValue';
+export { calculateTrend } from './calculateTrend';

package/es/components/pisellMetricCard/utils/index.js

@@ -0,0 +1,6 @@
+/**
+ * 工具函数导出
+ */
+
+export { formatMetricValue } from "./formatMetricValue";
+export { calculateTrend } from "./calculateTrend";

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

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

package/es/components/pisellMultipleSelect/PisellMultipleSelect.js

@@ -0,0 +1,99 @@
+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); }
+/**
+ * PisellMultipleSelect - 多选下拉组件
+ * 基于 Ant Design Select 封装，提供符合 Pisell 设计规范的多选功能
+ */
+
+import React, { forwardRef, useRef, useImperativeHandle, useCallback } from 'react';
+import { message } from 'antd';
+import { useMultipleSelectState } from '@pisell/utils';
+import EditView from "./components/EditView";
+import DisabledView from "./components/DisabledView";
+import ReadOnlyView from "./components/ReadOnlyView";
+import "./PisellMultipleSelect.less";
+var PisellMultipleSelect = /*#__PURE__*/forwardRef(function (props, ref) {
+  var value = props.value,
+    defaultValue = props.defaultValue,
+    onChange = props.onChange,
+    options = props.options,
+    disabled = props.disabled,
+    readOnly = props.readOnly,
+    maxCount = props.maxCount;
+
+  // Select 内部 ref
+  var selectRef = useRef(null);
+
+  // 状态管理（从 @pisell/utils 导入）
+  var state = useMultipleSelectState({
+    value: value,
+    defaultValue: defaultValue,
+    onChange: onChange,
+    mode: 'multiple'
+  });
+
+  // 处理 maxCount 限制
+  var handleChange = useCallback(function (newValue) {
+    if (maxCount && newValue.length > maxCount) {
+      message.warning("\u6700\u591A\u53EA\u80FD\u9009\u62E9 ".concat(maxCount, " \u9879"));
+      return;
+    }
+    var selectedOptions = newValue.map(function (v) {
+      return options.find(function (opt) {
+        return opt.value === v;
+      });
+    }).filter(Boolean);
+
+    // 更新内部状态（非受控模式需要）
+    state.setValue(newValue);
+
+    // 触发外部回调
+    onChange === null || onChange === void 0 || onChange(newValue, selectedOptions);
+  }, [maxCount, onChange, options, state]);
+
+  // 暴露 Ref 方法
+  useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        var _selectRef$current;
+        return (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.focus();
+      },
+      blur: function blur() {
+        var _selectRef$current2;
+        return (_selectRef$current2 = selectRef.current) === null || _selectRef$current2 === void 0 ? void 0 : _selectRef$current2.blur();
+      },
+      getValue: function getValue() {
+        return state.value;
+      },
+      setValue: function setValue(newValue) {
+        return state.setValue(newValue);
+      },
+      clearValue: function clearValue() {
+        return state.clearValue();
+      },
+      addValue: function addValue(val) {
+        return state.addValue(val);
+      },
+      removeValue: function removeValue(val) {
+        return state.removeValue(val);
+      }
+    };
+  });
+
+  // 根据不同状态渲染不同视图
+  if (disabled) {
+    return /*#__PURE__*/React.createElement(DisabledView, _extends({}, props, {
+      ref: selectRef
+    }));
+  }
+  if (readOnly) {
+    return /*#__PURE__*/React.createElement(ReadOnlyView, props);
+  }
+  return /*#__PURE__*/React.createElement(EditView, _extends({}, props, {
+    value: state.value,
+    state: state,
+    onChangeInternal: handleChange,
+    ref: selectRef
+  }));
+});
+PisellMultipleSelect.displayName = 'PisellMultipleSelect';
+export default PisellMultipleSelect;

package/es/components/pisellMultipleSelect/PisellMultipleSelect.less

@@ -0,0 +1,231 @@
+/**
+ * PisellMultipleSelect 组件样式
+ * 
+ * 注意：大部分样式通过 tokens.ts 中的 Select Token 配置实现
+ * 此文件仅包含 Token 无法实现的样式
+ */
+
+.pisell-multiple-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;
+  }
+
+  // 多选模式下的特殊样式（Token 部分支持，Less 补充细节）
+  :global {
+    // 选择框垂直内边距（多选时需要更小的内边距以容纳标签）
+    .pisell-lowcode-select-multiple .pisell-lowcode-select-selector {
+      padding: 6px 16px !important;
+    }
+
+    // 标签圆角（Token 不支持 multipleItemBorderRadius）
+    .pisell-lowcode-select-selection-item {
+      border-radius: 6px !important;
+      padding: 6px 10px !important;
+      margin-inline-end: 4px !important;
+
+      // 确保标签内容垂直居中
+      &-content {
+        line-height: 24px !important;
+      }
+
+      // 删除图标样式微调
+      &-remove {
+        margin-left: 4px !important;
+
+        &:hover {
+          background-color: transparent !important;
+        }
+      }
+    }
+
+    // hover 边框颜色（Token 不支持 colorBorderHover）
+    .pisell-lowcode-select-multiple:not(.pisell-lowcode-select-disabled):not(.pisell-lowcode-select-customize-input):not(.ant-select-open) {
+      .ant-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;
+
+    .ant-input {
+      font-size: 14px !important;
+      color: #344054 !important;
+
+      &::placeholder {
+        color: #98A2B3 !important;
+        font-size: 12px !important;
+      }
+    }
+
+    &:hover,
+    &:focus-within {
+      background-color: transparent !important;
+    }
+  }
+}
+
+.pisell-multiple-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;
+    }
+  }
+
+  // 自定义聚合标签样式（用于 maxTagPlaceholder 返回的元素，不受 Token 控制）
+  &-more-tag {
+    display: inline-flex;
+    align-items: center;
+    background-color: #EAECF0;
+    color: #344054;
+    border: none;
+    border-radius: 6px;
+    padding: 6px 10px;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: #D0D5DD;
+    }
+  }
+
+  // 只读状态（完全自定义的显示，不使用 Select 组件）
+  &-readonly {
+    &-display {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      padding: 12px 16px;
+      background-color: #F9FAFB;
+      border: 1px solid #EAECF0;
+      border-radius: 8px;
+      min-height: 48px;
+    }
+
+    &-tag {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 6px 10px;
+      background-color: #EAECF0;
+      border: none;
+      border-radius: 6px;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      color: #344054;
+
+      &-icon {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    &-more-tag {
+      display: inline-flex;
+      align-items: center;
+      padding: 6px 10px;
+      background-color: #EAECF0;
+      color: #344054;
+      border: none;
+      border-radius: 6px;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      cursor: pointer;
+    }
+
+    &-empty {
+      color: #667085;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+    }
+  }
+}
+
+// 动画
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/es/components/pisellMultipleSelect/PisellMultipleSelect.stories.d.ts

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PisellMultipleSelect from './PisellMultipleSelect';
+/**
+ * PisellMultipleSelect 组件 Storybook
+ *
+ * 用于展示和测试组件的各种状态和配置
+ */
+declare const meta: Meta<typeof PisellMultipleSelect>;
+export default meta;
+declare type Story = StoryObj<typeof PisellMultipleSelect>;
+/**
+ * 基础示例
+ */
+export declare const Basic: Story;
+/**
+ * 带标签
+ */
+export declare const WithLabel: Story;
+/**
+ * 标签聚合功能
+ */
+export declare const TagAggregation: Story;
+/**
+ * 最大可选数量限制
+ */
+export declare const WithMaxCount: Story;
+/**
+ * 带搜索功能
+ */
+export declare const WithSearch: Story;
+/**
+ * 带清空按钮
+ */
+export declare const WithClear: Story;
+/**
+ * 禁用态
+ */
+export declare const Disabled: Story;
+/**
+ * 只读态
+ */
+export declare const ReadOnly: Story;
+/**
+ * 只读态 - 标签聚合
+ */
+export declare const ReadOnlyWithAggregation: Story;
+/**
+ * 只读态 - 空值
+ */
+export declare const ReadOnlyEmpty: Story;
+/**
+ * 错误状态
+ */
+export declare const WithError: Story;
+/**
+ * 不同尺寸
+ */
+export declare const Sizes: Story;
+/**
+ * 表单场景
+ */
+export declare const InForm: Story;
+/**
+ * 回调事件演示
+ */
+export declare const WithCallbacks: Story;
+/**
+ * 所有状态组合
+ */
+export declare const AllStates: Story;