@pisell/materials 6.3.25 → 6.3.27

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

@@ -0,0 +1,38 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellMetricCard/utils/calculateTrend.ts
+var calculateTrend_exports = {};
+__export(calculateTrend_exports, {
+  calculateTrend: () => calculateTrend
+});
+module.exports = __toCommonJS(calculateTrend_exports);
+function calculateTrend(comparison) {
+  if (comparison === null || comparison === void 0) {
+    return "neutral";
+  }
+  const numComparison = typeof comparison === "string" ? parseFloat(comparison) : comparison;
+  if (isNaN(numComparison) || numComparison === 0) {
+    return "neutral";
+  }
+  return numComparison > 0 ? "up" : "down";
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  calculateTrend
+});

package/lib/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/lib/components/pisellMetricCard/utils/formatMetricValue.js

@@ -0,0 +1,52 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellMetricCard/utils/formatMetricValue.ts
+var formatMetricValue_exports = {};
+__export(formatMetricValue_exports, {
+  formatMetricValue: () => formatMetricValue
+});
+module.exports = __toCommonJS(formatMetricValue_exports);
+var import_utils = require("@pisell/utils");
+function formatMetricValue(value, options = {}) {
+  if (value === null || value === void 0) {
+    return null;
+  }
+  const numValue = typeof value === "string" ? parseFloat(value) : value;
+  if (isNaN(numValue)) {
+    return null;
+  }
+  if (options.formatter) {
+    return options.formatter(numValue);
+  }
+  const formatted = (0, import_utils.formatAmountWithOptions)(
+    numValue,
+    options.currencySymbol || "",
+    {
+      precision: options.precision ?? 0,
+      useThousandsSeparator: options.useGrouping ?? false,
+      showCurrencySymbol: options.showCurrencySymbol ?? false,
+      hideDecimalForWholeNumbers: options.hideDecimalForWholeNumbers ?? true
+    }
+  );
+  return String(formatted);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  formatMetricValue
+});

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

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

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

@@ -0,0 +1,32 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellMetricCard/utils/index.ts
+var utils_exports = {};
+__export(utils_exports, {
+  calculateTrend: () => import_calculateTrend.calculateTrend,
+  formatMetricValue: () => import_formatMetricValue.formatMetricValue
+});
+module.exports = __toCommonJS(utils_exports);
+var import_formatMetricValue = require("./formatMetricValue");
+var import_calculateTrend = require("./calculateTrend");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  calculateTrend,
+  formatMetricValue
+});

package/lib/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/lib/components/pisellMultipleSelect/PisellMultipleSelect.js

@@ -0,0 +1,97 @@
+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/pisellMultipleSelect/PisellMultipleSelect.tsx
+var PisellMultipleSelect_exports = {};
+__export(PisellMultipleSelect_exports, {
+  default: () => PisellMultipleSelect_default
+});
+module.exports = __toCommonJS(PisellMultipleSelect_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_utils = require("@pisell/utils");
+var import_EditView = __toESM(require("./components/EditView"));
+var import_DisabledView = __toESM(require("./components/DisabledView"));
+var import_ReadOnlyView = __toESM(require("./components/ReadOnlyView"));
+var import_PisellMultipleSelect = require("./PisellMultipleSelect.less");
+var PisellMultipleSelect = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const {
+      value,
+      defaultValue,
+      onChange,
+      options,
+      disabled,
+      readOnly,
+      maxCount
+    } = props;
+    const selectRef = (0, import_react.useRef)(null);
+    const state = (0, import_utils.useMultipleSelectState)({
+      value,
+      defaultValue,
+      onChange,
+      mode: "multiple"
+    });
+    const handleChange = (0, import_react.useCallback)(
+      (newValue) => {
+        if (maxCount && newValue.length > maxCount) {
+          import_antd.message.warning(`最多只能选择 ${maxCount} 项`);
+          return;
+        }
+        const selectedOptions = newValue.map((v) => options.find((opt) => opt.value === v)).filter(Boolean);
+        state.setValue(newValue);
+        onChange == null ? void 0 : onChange(newValue, selectedOptions);
+      },
+      [maxCount, onChange, options, state]
+    );
+    (0, import_react.useImperativeHandle)(ref, () => ({
+      focus: () => {
+        var _a;
+        return (_a = selectRef.current) == null ? void 0 : _a.focus();
+      },
+      blur: () => {
+        var _a;
+        return (_a = selectRef.current) == null ? void 0 : _a.blur();
+      },
+      getValue: () => state.value,
+      setValue: (newValue) => state.setValue(newValue),
+      clearValue: () => state.clearValue(),
+      addValue: (val) => state.addValue(val),
+      removeValue: (val) => state.removeValue(val)
+    }));
+    if (disabled) {
+      return /* @__PURE__ */ import_react.default.createElement(import_DisabledView.default, { ...props, ref: selectRef });
+    }
+    if (readOnly) {
+      return /* @__PURE__ */ import_react.default.createElement(import_ReadOnlyView.default, { ...props });
+    }
+    return /* @__PURE__ */ import_react.default.createElement(import_EditView.default, { ...props, value: state.value, state, onChangeInternal: handleChange, ref: selectRef });
+  }
+);
+PisellMultipleSelect.displayName = "PisellMultipleSelect";
+var PisellMultipleSelect_default = PisellMultipleSelect;

package/lib/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/lib/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;