@pisell/materials 6.9.4 → 6.11.1

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

@@ -0,0 +1,201 @@
+import type { CSSProperties, ReactNode } from 'react';
+/**
+ * 趋势类型
+ */
+export declare type TrendType = 'up' | 'down' | 'neutral';
+/**
+ * 数值格式化配置
+ */
+export interface ValueFormatConfig {
+    /** 小数精度（小数位数），默认 0 */
+    precision?: number;
+    /** 是否使用千分位分隔符，默认 false */
+    useGrouping?: boolean;
+    /** 是否显示货币符号，默认 false */
+    showCurrencySymbol?: boolean;
+    /** 货币符号（如 $, ¥），默认 '' */
+    currencySymbol?: string;
+    /** 自定义格式化函数 */
+    formatter?: (value: number | null) => string;
+    /** 整数时隐藏小数部分，默认 true */
+    hideDecimalForWholeNumbers?: boolean;
+}
+/**
+ * 环比配置
+ */
+export interface ComparisonConfig {
+    /** 环比数值（支持正负值） */
+    value: number | string | null;
+    /** 环比前缀文本，默认 'v.s. pre' */
+    text?: string;
+    /** 是否显示趋势箭头，默认 true */
+    showTrendIcon?: boolean;
+    /** 正向趋势颜色，默认 '#52c41a' */
+    positiveColor?: string;
+    /** 负向趋势颜色，默认 '#ff4d4f' */
+    negativeColor?: string;
+    /** 环比字号，默认 14 */
+    size?: number | string;
+}
+/**
+ * 样式配置
+ */
+export interface MetricCardStyleConfig {
+    /** 卡片容器样式 */
+    card?: {
+        /** 是否显示边框，默认 true */
+        bordered?: boolean;
+        /** 圆角大小（px），默认 12 */
+        borderRadius?: number;
+        /** 内边距（px），默认 16 */
+        padding?: number;
+        /** 阴影效果，默认 true */
+        shadow?: boolean | string;
+        /** 背景色，默认 '#ffffff' */
+        background?: string;
+        /** 卡片宽度，默认 'auto' */
+        width?: string | number;
+    };
+    /** 标题样式 */
+    title?: {
+        /** 字号，默认 14 */
+        size?: number | string;
+        /** 字重，默认 400 */
+        weight?: number | string;
+        /** 颜色，默认 'rgba(0, 0, 0, 0.45)' */
+        color?: string;
+    };
+    /** 数值样式 */
+    value?: {
+        /** 字号，默认 30 */
+        size?: number | string;
+        /** 字重，默认 600 */
+        weight?: number | string;
+        /** 颜色，默认 'rgba(0, 0, 0, 0.85)' */
+        color?: string;
+    };
+}
+/**
+ * PisellMetricCard 组件 Props
+ *
+ * 采用扁平 + 对象组合的设计，降低复杂度和耦合
+ *
+ * @example 基础用法
+ * ```tsx
+ * <PisellMetricCard
+ *   title="Total Sales"
+ *   value={1580}
+ * />
+ * ```
+ *
+ * @example 带格式化和环比
+ * ```tsx
+ * <PisellMetricCard
+ *   title="Revenue"
+ *   value={1580}
+ *   format={{
+ *     showCurrencySymbol: true,
+ *     currencySymbol: '$',
+ *     useGrouping: true
+ *   }}
+ *   comparison={{
+ *     value: 120,
+ *     text: 'v.s. last month'
+ *   }}
+ * />
+ * ```
+ */
+export interface PisellMetricCardProps {
+    /** 标题文本 */
+    title: string | ReactNode;
+    /** 主数值 */
+    value: number | string | null;
+    /** 副标题文本（可选） */
+    subtitle?: string | ReactNode;
+    /** 标签内容（可选） */
+    tag?: ReactNode;
+    /** 提示信息内容（可选） */
+    tooltip?: string | ReactNode;
+    /**
+     * 数值格式化配置
+     * @example format={{ precision: 2, useGrouping: true, currencySymbol: '$' }}
+     */
+    format?: ValueFormatConfig;
+    /**
+     * 环比配置
+     * @example comparison={{ value: 120, text: 'v.s. pre' }}
+     */
+    comparison?: ComparisonConfig;
+    /**
+     * 样式配置
+     * @example
+     * styleConfig={{
+     *   card: { borderRadius: 8, padding: 24 },
+     *   title: { size: 16, weight: 600 },
+     *   value: { size: 36, color: '#1890ff' }
+     * }}
+     */
+    styleConfig?: MetricCardStyleConfig;
+    /** 是否显示副标题，默认 false */
+    showSubtitle?: boolean;
+    /** 是否显示标签，默认 false */
+    showTag?: boolean;
+    /** 是否显示提示信息，默认 false */
+    showTooltip?: boolean;
+    /** 是否显示加载状态，默认 false */
+    loading?: boolean;
+    /** 鼠标悬停是否有交互效果，默认 true */
+    hoverable?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 点击卡片回调 */
+    onClick?: () => void;
+}
+/**
+ * FormatOptions (别名，用于导出)
+ */
+export interface FormatOptions extends ValueFormatConfig {
+}
+/**
+ * MetricTitle 组件 Props
+ */
+export interface MetricTitleProps {
+    title: string | ReactNode;
+    subtitle?: string | ReactNode;
+    tooltip?: string | ReactNode;
+    titleSize?: number | string;
+    titleWeight?: number | string;
+    titleColor?: string;
+}
+/**
+ * MetricValue 组件 Props
+ */
+export interface MetricValueProps {
+    value: string | null;
+    valueSize?: number | string;
+    valueWeight?: number | string;
+    valueColor?: string;
+}
+/**
+ * MetricComparison 组件 Props
+ */
+export interface MetricComparisonProps {
+    comparison: number | string | null;
+    comparisonText?: string;
+    showTrendIcon?: boolean;
+    positiveColor?: string;
+    negativeColor?: string;
+    comparisonSize?: number | string;
+    precision?: number;
+    showCurrencySymbol?: boolean;
+    currencySymbol?: string;
+}
+/**
+ * TrendIcon 组件 Props
+ */
+export interface TrendIconProps {
+    trend: TrendType;
+    color?: string;
+}

package/lib/components/pisellMetricCard/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

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

@@ -0,0 +1,14 @@
+import type { TrendType } from '../types';
+/**
+ * 计算趋势方向
+ *
+ * @param comparison 环比数值
+ * @returns 'up' | 'down' | 'neutral'
+ *
+ * @example
+ * calculateTrend(120) // 'up'
+ * calculateTrend(-230) // 'down'
+ * calculateTrend(0) // 'neutral'
+ * calculateTrend(null) // 'neutral'
+ */
+export declare function calculateTrend(comparison: number | string | null | undefined): TrendType;

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;