@pisell/materials 3.3.81 → 3.3.83

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

@@ -0,0 +1,56 @@
+import type { PisellNumberProps } from '../pisellNumber';
+/**
+ * 从 @pisell/utils 重新导出公共类型
+ */
+export type { DisplayState, ValidationResult, NumberInputState, BaseNumberInputProps, } from '@pisell/utils';
+/**
+ * PisellCurrency 组件 Props 类型定义
+ *
+ * 基于 PisellNumber 扩展，专门处理货币数据
+ */
+export interface PisellCurrencyProps extends PisellNumberProps {
+    /**
+     * 货币符号
+     * @default '¥'
+     * @example '¥', '$', '€', '£', '₩', '₽'
+     */
+    currencySymbol?: string;
+    /**
+     * 货币符号位置
+     * - before: 前置，如 ¥100
+     * - after: 后置，如 100€
+     * @default 'before'
+     */
+    symbolPosition?: 'before' | 'after';
+    /**
+     * 是否显示货币符号
+     * @default true
+     */
+    showSymbol?: boolean;
+    /**
+     * 货币代码（用于国际化标识）
+     * @example 'CNY', 'USD', 'EUR', 'GBP'
+     */
+    currencyCode?: string;
+    /**
+     * 是否允许负数
+     * @default true
+     * @description
+     * - true: 允许负数（如退款场景）
+     * - false: 不允许负数（如商品价格）
+     */
+    allowNegative?: boolean;
+    /**
+     * 小数精度
+     * @default 2
+     * @description 货币默认保留2位小数，符合财务规范
+     */
+    precision?: number;
+    /**
+     * 是否使用千分位分隔符
+     * @default true
+     * @description 货币默认启用千分位，符合财务规范
+     * @example 1234.56 → 1,234.56
+     */
+    useGrouping?: boolean;
+}

package/lib/components/pisellCurrency/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/pisellCurrency/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/components/pisellCurrency/utils/currencyFormatter.d.ts

@@ -0,0 +1,31 @@
+/**
+ * 货币格式化选项
+ */
+export interface CurrencyFormatOptions {
+    /** 货币符号 */
+    currencySymbol: string;
+    /** 符号位置 */
+    symbolPosition: 'before' | 'after';
+    /** 是否显示符号 */
+    showSymbol: boolean;
+    /** 小数精度 */
+    precision: number;
+    /** 是否使用千分位 */
+    useGrouping: boolean;
+}
+/**
+ * 格式化货币数值
+ *
+ * @param value 数值
+ * @param options 格式化选项
+ * @returns 格式化后的货币字符串
+ *
+ * @example
+ * formatCurrency(1234.56, { currencySymbol: '¥', symbolPosition: 'before', showSymbol: true, precision: 2, useGrouping: true })
+ * // 返回: '¥1,234.56'
+ *
+ * @example
+ * formatCurrency(999.99, { currencySymbol: '€', symbolPosition: 'after', showSymbol: true, precision: 2, useGrouping: true })
+ * // 返回: '999.99€'
+ */
+export declare function formatCurrency(value: number | null | undefined, options: CurrencyFormatOptions): string | null;

package/lib/components/pisellCurrency/utils/currencyFormatter.js

@@ -0,0 +1,56 @@
+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/pisellCurrency/utils/currencyFormatter.ts
+var currencyFormatter_exports = {};
+__export(currencyFormatter_exports, {
+  formatCurrency: () => formatCurrency
+});
+module.exports = __toCommonJS(currencyFormatter_exports);
+var import_utils = require("@pisell/utils");
+function formatCurrency(value, options) {
+  if (value === null || value === void 0) {
+    return null;
+  }
+  const {
+    currencySymbol,
+    symbolPosition,
+    showSymbol,
+    precision,
+    useGrouping
+  } = options;
+  const formatted = (0, import_utils.formatNumber)(value, {
+    precision,
+    useGrouping
+  });
+  if (!formatted) {
+    return null;
+  }
+  if (!showSymbol) {
+    return formatted;
+  }
+  if (symbolPosition === "before") {
+    return `${currencySymbol}${formatted}`;
+  } else {
+    return `${formatted}${currencySymbol}`;
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  formatCurrency
+});

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

@@ -0,0 +1,5 @@
+/**
+ * PisellCurrency 工具函数导出
+ */
+export { formatCurrency } from './currencyFormatter';
+export type { CurrencyFormatOptions } from './currencyFormatter';

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

@@ -0,0 +1,29 @@
+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/pisellCurrency/utils/index.ts
+var utils_exports = {};
+__export(utils_exports, {
+  formatCurrency: () => import_currencyFormatter.formatCurrency
+});
+module.exports = __toCommonJS(utils_exports);
+var import_currencyFormatter = require("./currencyFormatter");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  formatCurrency
+});

package/lib/components/pisellDataSourceContainer/PisellDataSourceContainer.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { DataSourceContainerProps } from './type';
-declare const PisellDataSourceContainer: (props: DataSourceContainerProps) => JSX.Element;
+declare const PisellDataSourceContainer: (props: DataSourceContainerProps) => React.JSX.Element;
 export default PisellDataSourceContainer;

package/lib/components/pisellDataSourceContainer/hooks/useDataSourceKey.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const useDataSourceKey: () => {
     dataSourceKey: string | undefined;
     dataSourceKeyRef: import("react").MutableRefObject<string | undefined>;

package/lib/components/pisellDataSourceContainer/provider/HandleActions.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { DataSourceContainerProps, HandleActionContextType } from '../type';
 export declare const HandleActionContext: React.Context<HandleActionContextType | null>;
-export declare const HandleActionsProvider: (props: DataSourceContainerProps) => JSX.Element;
+export declare const HandleActionsProvider: (props: DataSourceContainerProps) => React.JSX.Element;
 export declare const useHandleActionProvider: () => HandleActionContextType;

package/lib/components/pisellDatePicker/datePickerCpt.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { PickerDateProps } from 'antd/es/date-picker/generatePicker';
 import { Dayjs } from 'dayjs';
 import './detePickerCpt.less';
@@ -17,5 +18,5 @@ export interface DatePickerCptProps extends PickerDateProps<Dayjs> {
  * @param props
  * @constructor
  */
-declare const DatePickerCpt: (props: DatePickerCptProps) => JSX.Element;
+declare const DatePickerCpt: (props: DatePickerCptProps) => React.JSX.Element;
 export default DatePickerCpt;

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const PisellDatePicker: (props: any) => JSX.Element;
+declare const PisellDatePicker: (props: any) => import("react").JSX.Element;
 export default PisellDatePicker;

package/lib/components/pisellDateTimeDisplay/PisellDateTimeDisplay.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+import type { PisellDateTimeDisplayProps } from './types';
+import './PisellDateTimeDisplay.less';
+/**
+ * PisellDateTimeDisplay 组件
+ *
+ * @description
+ * 专注于展示当前时间的组件，支持：
+ * - 当前日期、时间、星期展示
+ * - 多种布局方式（水平、垂直、单行）
+ * - 丰富的格式化配置
+ * - 自动刷新
+ * - 国际化支持
+ *
+ * @example
+ * // 基础用法
+ * <PisellDateTimeDisplay />
+ *
+ * // 自定义格式
+ * <PisellDateTimeDisplay
+ *   layout="vertical"
+ *   timeFormat={{ use12Hour: true, showSeconds: true }}
+ *   dateFormat={{ showYear: true, showChineseUnit: true }}
+ * />
+ *
+ * // 自定义格式化字符串
+ * <PisellDateTimeDisplay
+ *   customFormat="YYYY-MM-DD HH:mm:ss"
+ * />
+ */
+export declare const PisellDateTimeDisplay: React.FC<PisellDateTimeDisplayProps>;
+declare const _default: React.NamedExoticComponent<PisellDateTimeDisplayProps>;
+export default _default;

package/lib/components/pisellDateTimeDisplay/PisellDateTimeDisplay.js

@@ -0,0 +1,240 @@
+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/pisellDateTimeDisplay/PisellDateTimeDisplay.tsx
+var PisellDateTimeDisplay_exports = {};
+__export(PisellDateTimeDisplay_exports, {
+  PisellDateTimeDisplay: () => PisellDateTimeDisplay,
+  default: () => PisellDateTimeDisplay_default
+});
+module.exports = __toCommonJS(PisellDateTimeDisplay_exports);
+var import_react = __toESM(require("react"));
+var import_dayjs = __toESM(require("dayjs"));
+var import_zh_cn = require("dayjs/locale/zh-cn");
+var import_en = require("dayjs/locale/en");
+var import_hooks = require("./hooks");
+var import_utils = require("./utils");
+var import_components = require("./components");
+var import_dateTimeDisplayFormats = require("./formats/dateTimeDisplayFormats");
+var import_PisellDateTimeDisplay = require("./PisellDateTimeDisplay.less");
+var PisellDateTimeDisplay = (props) => {
+  const {
+    layout = "horizontal",
+    textAlign = "center",
+    fields,
+    formatByLocale,
+    timeFormat,
+    dateFormat,
+    weekdayFormat,
+    customFormat,
+    inlineSeparator = " · ",
+    containerStyle,
+    timeStyle,
+    dateStyle,
+    weekdayStyle,
+    refreshInterval,
+    disableAutoRefresh = false,
+    locale,
+    onTimeUpdate,
+    onClick,
+    className,
+    style
+  } = props;
+  const localeKey = (0, import_utils.getDayjsLocale)(locale);
+  const baseLocale = localeKey.split("-")[0];
+  const presetSource = formatByLocale ?? import_dateTimeDisplayFormats.DATETIME_DISPLAY_FORMATS;
+  const preset = presetSource[localeKey] ?? presetSource[baseLocale] ?? {};
+  const effectiveFields = { ...preset.fields, ...fields };
+  const effectiveDateFormat = { ...preset.dateFormat, ...dateFormat };
+  const effectiveTimeFormat = { ...preset.timeFormat, ...timeFormat };
+  const effectiveWeekdayFormat = { ...preset.weekdayFormat, ...weekdayFormat };
+  const computedRefreshInterval = refreshInterval ?? (0, import_utils.getRefreshInterval)(effectiveTimeFormat);
+  const currentTime = (0, import_hooks.useCurrentTime)({
+    refreshInterval: computedRefreshInterval,
+    disabled: disableAutoRefresh,
+    locale,
+    onUpdate: onTimeUpdate
+  });
+  if (customFormat) {
+    const formattedTime = currentTime.format(customFormat);
+    const containerInlineStyle2 = {
+      background: containerStyle == null ? void 0 : containerStyle.background,
+      borderRadius: containerStyle == null ? void 0 : containerStyle.borderRadius,
+      border: containerStyle == null ? void 0 : containerStyle.border,
+      boxShadow: containerStyle == null ? void 0 : containerStyle.boxShadow,
+      padding: containerStyle == null ? void 0 : containerStyle.padding,
+      textAlign,
+      ...style
+    };
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `pisell-datetime-display pisell-datetime-display-custom ${className || ""}`.trim(),
+        style: containerInlineStyle2,
+        onClick
+      },
+      /* @__PURE__ */ import_react.default.createElement("span", null, formattedTime)
+    );
+  }
+  const {
+    showTime = true,
+    showDate = true,
+    showWeekday = true,
+    fieldOrder = ["time", "date", "weekday"]
+  } = effectiveFields || {};
+  const referenceDate = (0, import_dayjs.default)();
+  const relativeDay = (effectiveDateFormat == null ? void 0 : effectiveDateFormat.showRelativeDay) ? (0, import_utils.getRelativeDay)(currentTime, referenceDate) : null;
+  const hideWeekdayWhenDateRelative = showDate && relativeDay !== null;
+  const containerInlineStyle = {
+    background: containerStyle == null ? void 0 : containerStyle.background,
+    borderRadius: containerStyle == null ? void 0 : containerStyle.borderRadius,
+    border: containerStyle == null ? void 0 : containerStyle.border,
+    boxShadow: containerStyle == null ? void 0 : containerStyle.boxShadow,
+    padding: containerStyle == null ? void 0 : containerStyle.padding,
+    gap: containerStyle == null ? void 0 : containerStyle.gap,
+    textAlign,
+    ...style
+  };
+  const renderField = (fieldType) => {
+    switch (fieldType) {
+      case "time":
+        return showTime ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.TimeDisplay,
+          {
+            key: "time",
+            time: currentTime,
+            format: effectiveTimeFormat,
+            style: timeStyle
+          }
+        ) : null;
+      case "date":
+        return showDate ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.DateDisplay,
+          {
+            key: "date",
+            date: currentTime,
+            format: effectiveDateFormat,
+            referenceDate: (0, import_dayjs.default)(),
+            style: dateStyle
+          }
+        ) : null;
+      case "weekday":
+        return showWeekday && !hideWeekdayWhenDateRelative ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.WeekdayDisplay,
+          {
+            key: "weekday",
+            weekday: currentTime,
+            format: effectiveWeekdayFormat,
+            style: weekdayStyle
+          }
+        ) : null;
+      default:
+        return null;
+    }
+  };
+  if (layout === "inline") {
+    const inlineSeparators = effectiveFields == null ? void 0 : effectiveFields.inlineSeparators;
+    const renderedFields2 = fieldOrder.map(renderField).filter((field) => field !== null);
+    if (renderedFields2.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `pisell-datetime-display pisell-datetime-display-inline ${className || ""}`.trim(),
+        style: containerInlineStyle,
+        onClick
+      },
+      renderedFields2.map((field, index) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: index }, field, index < renderedFields2.length - 1 && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-datetime-display-separator" }, (inlineSeparators == null ? void 0 : inlineSeparators[index]) ?? inlineSeparator)))
+    );
+  }
+  const renderedFields = fieldOrder.map(renderField).filter((field) => field !== null);
+  if (renderedFields.length === 0) {
+    return null;
+  }
+  if (layout === "horizontal") {
+    const timeField = showTime ? renderField("time") : null;
+    const currentLocale = currentTime.locale();
+    const isChinese = (0, import_utils.isChinese)(currentLocale);
+    if (showDate && showWeekday) {
+      const labels = effectiveDateFormat == null ? void 0 : effectiveDateFormat.relativeDayLabels;
+      const dateStr = relativeDay ? (labels == null ? void 0 : labels[relativeDay]) ?? (0, import_utils.getRelativeDayLabel)(relativeDay, currentTime.locale()) : isChinese ? currentTime.format("M月D日") : currentTime.format("D MMM");
+      const weekdayStr = currentTime.format("ddd");
+      const combinedStr = relativeDay ? dateStr : isChinese ? `${weekdayStr} ${dateStr}` : `${weekdayStr}, ${dateStr}`;
+      const dateInlineStyle = {
+        fontSize: dateStyle == null ? void 0 : dateStyle.fontSize,
+        fontWeight: dateStyle == null ? void 0 : dateStyle.fontWeight,
+        color: dateStyle == null ? void 0 : dateStyle.color,
+        lineHeight: dateStyle == null ? void 0 : dateStyle.lineHeight
+      };
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `pisell-datetime-display pisell-datetime-display-${layout} ${className || ""}`.trim(),
+          style: containerInlineStyle,
+          onClick
+        },
+        timeField,
+        /* @__PURE__ */ import_react.default.createElement(
+          "span",
+          {
+            className: "pisell-datetime-display-date pisell-datetime-display-combined",
+            style: dateInlineStyle
+          },
+          combinedStr
+        )
+      );
+    }
+    const dateField = showDate ? renderField("date") : null;
+    const weekdayField = showWeekday ? renderField("weekday") : null;
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `pisell-datetime-display pisell-datetime-display-${layout} ${className || ""}`.trim(),
+        style: containerInlineStyle,
+        onClick
+      },
+      timeField,
+      (dateField || weekdayField) && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-datetime-display-date-weekday-row" }, dateField, weekdayField)
+    );
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: `pisell-datetime-display pisell-datetime-display-${layout} ${className || ""}`.trim(),
+      style: containerInlineStyle,
+      onClick
+    },
+    renderedFields
+  );
+};
+var PisellDateTimeDisplay_default = import_react.default.memo(PisellDateTimeDisplay);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellDateTimeDisplay
+});

package/lib/components/pisellDateTimeDisplay/PisellDateTimeDisplay.less

@@ -0,0 +1,96 @@
+.pisell-datetime-display {
+  display: flex;
+  color: #000;
+
+  // 水平布局（默认）
+  &-horizontal {
+    flex-direction: column;
+    gap: 4px;
+
+    .pisell-datetime-display-time {
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 1.2;
+    }
+
+    .pisell-datetime-display-date,
+    .pisell-datetime-display-weekday {
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 1.2;
+    }
+
+    // 合并显示的日期星期（Sat, 21 Mar 或 周五 1月30日）
+    .pisell-datetime-display-combined {
+      font-size: 12px;
+    }
+
+    // 日期和星期同一行的容器
+    .pisell-datetime-display-date-weekday-row {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+
+  // 垂直布局
+  &-vertical {
+    flex-direction: column;
+    gap: 8px;
+
+    .pisell-datetime-display-time {
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 1.2;
+    }
+
+    .pisell-datetime-display-date,
+    .pisell-datetime-display-weekday {
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 1.2;
+    }
+  }
+
+  // 单行布局
+  &-inline {
+    flex-direction: row;
+    align-items: center;
+    gap: 0;
+
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.2;
+  }
+
+  // 分隔符
+  &-separator {
+    display: inline-block;
+  }
+
+  // 自定义格式化
+  &-custom {
+    display: inline-block;
+  }
+
+  // 时间
+  &-time {
+    display: inline-block;
+  }
+
+  // 日期
+  &-date {
+    display: inline-block;
+
+    // 英文环境合并格式（Sat, 21 Mar）
+    &.pisell-datetime-display-combined {
+      display: block;
+    }
+  }
+
+  // 星期
+  &-weekday {
+    display: inline-block;
+  }
+}