@pisell/materials 6.3.25 → 6.3.27

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

@@ -0,0 +1,68 @@
+import type { PisellNumberProps } from '../pisellNumber';
+import type { ProgressProps, SliderSingleProps } from 'antd';
+/**
+ * 从 @pisell/utils 重新导出公共类型
+ */
+export type { DisplayState, ValidationResult, NumberInputState, BaseNumberInputProps, } from '@pisell/utils';
+/**
+ * PisellPercent 组件 Props 类型定义
+ *
+ * 基于 PisellNumber 扩展，专门处理百分比数据
+ */
+export interface PisellPercentProps extends PisellNumberProps {
+    /**
+     * 是否显示百分号 %
+     * @default true
+     */
+    showPercentSymbol?: boolean;
+    /**
+     * 百分比范围
+     * @default [0, 100]
+     * @example [0, 100] - 常用范围，值直接作为百分比
+     * @example [0, 1] - 小数范围，值会乘以100转换
+     * @example [0, 1000] - 自定义范围，按比例转换
+     */
+    range?: [number, number];
+    /**
+     * 展示变体
+     * - text: 纯文本显示（如 85.5%）
+     * - progress: 进度条显示
+     * - circle: 环形进度显示
+     * @default 'text'
+     */
+    variant?: 'text' | 'progress' | 'circle';
+    /**
+     * 进度条额外配置（variant='progress' 时使用）
+     */
+    progressProps?: ProgressProps;
+    /**
+     * 环形进度额外配置（variant='circle' 时使用）
+     */
+    circleProps?: ProgressProps;
+    /**
+     * 编辑态是否显示滑块
+     * @default false
+     * @description 启用后，会在输入框上方显示滑块，便于快速调整
+     */
+    showSlider?: boolean;
+    /**
+     * 滑块额外配置
+     */
+    sliderProps?: SliderSingleProps;
+    /**
+     * 小数精度
+     * @default 1
+     * @description 百分比默认保留1位小数
+     */
+    precision?: number;
+    /**
+     * 最小值
+     * @default 0
+     */
+    min?: number;
+    /**
+     * 最大值
+     * @default 100
+     */
+    max?: number;
+}

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

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

@@ -0,0 +1,6 @@
+/**
+ * PisellPercent 工具函数导出
+ */
+export { formatPercent } from './percentFormatter';
+export type { PercentFormatOptions } from './percentFormatter';
+export { convertToPercent, convertFromPercent } from './rangeConverter';

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

@@ -0,0 +1,34 @@
+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/pisellPercent/utils/index.ts
+var utils_exports = {};
+__export(utils_exports, {
+  convertFromPercent: () => import_rangeConverter.convertFromPercent,
+  convertToPercent: () => import_rangeConverter.convertToPercent,
+  formatPercent: () => import_percentFormatter.formatPercent
+});
+module.exports = __toCommonJS(utils_exports);
+var import_percentFormatter = require("./percentFormatter");
+var import_rangeConverter = require("./rangeConverter");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  convertFromPercent,
+  convertToPercent,
+  formatPercent
+});

package/lib/components/pisellPercent/utils/percentFormatter.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 百分比格式化选项
+ */
+export interface PercentFormatOptions {
+    /** 是否显示百分号 */
+    showPercentSymbol: boolean;
+    /** 小数精度 */
+    precision: number;
+    /** 百分比范围 */
+    range: [number, number];
+}
+/**
+ * 格式化百分比数值
+ *
+ * @param value 数值
+ * @param options 格式化选项
+ * @returns 格式化后的百分比字符串
+ *
+ * @example
+ * formatPercent(85.5, { showPercentSymbol: true, precision: 1, range: [0, 100] })
+ * // 返回: '85.5%'
+ *
+ * @example
+ * formatPercent(0.855, { showPercentSymbol: true, precision: 1, range: [0, 1] })
+ * // 返回: '85.5%'
+ */
+export declare function formatPercent(value: number | null | undefined, options: PercentFormatOptions): string | null;

package/lib/components/pisellPercent/utils/percentFormatter.js

@@ -0,0 +1,48 @@
+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/pisellPercent/utils/percentFormatter.ts
+var percentFormatter_exports = {};
+__export(percentFormatter_exports, {
+  formatPercent: () => formatPercent
+});
+module.exports = __toCommonJS(percentFormatter_exports);
+var import_utils = require("@pisell/utils");
+var import_rangeConverter = require("./rangeConverter");
+function formatPercent(value, options) {
+  if (value === null || value === void 0) {
+    return null;
+  }
+  const { showPercentSymbol, precision, range } = options;
+  const percentValue = (0, import_rangeConverter.convertToPercent)(value, range);
+  if (percentValue === null) {
+    return null;
+  }
+  const formatted = (0, import_utils.formatNumber)(percentValue, { precision });
+  if (!formatted) {
+    return null;
+  }
+  if (showPercentSymbol) {
+    return `${formatted}%`;
+  }
+  return formatted;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  formatPercent
+});

package/lib/components/pisellPercent/utils/rangeConverter.js

@@ -0,0 +1,59 @@
+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/pisellPercent/utils/rangeConverter.ts
+var rangeConverter_exports = {};
+__export(rangeConverter_exports, {
+  convertFromPercent: () => convertFromPercent,
+  convertToPercent: () => convertToPercent
+});
+module.exports = __toCommonJS(rangeConverter_exports);
+function convertToPercent(value, range) {
+  if (value === null || value === void 0) {
+    return null;
+  }
+  const [min, max] = range;
+  if (min === 0 && max === 100) {
+    return value;
+  }
+  if (min === 0 && max === 1) {
+    return value * 100;
+  }
+  if (max !== 0) {
+    return value / max * 100;
+  }
+  return value;
+}
+function convertFromPercent(percent, range) {
+  if (percent === null || percent === void 0) {
+    return null;
+  }
+  const [min, max] = range;
+  if (min === 0 && max === 100) {
+    return percent;
+  }
+  if (min === 0 && max === 1) {
+    return percent / 100;
+  }
+  return percent / 100 * max;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  convertFromPercent,
+  convertToPercent
+});

package/lib/components/pisellPhone/PisellPhone.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { PisellPhoneProps } from './types';
+import './PisellPhone.less';
+/**
+ * PisellPhone 电话号码组件
+ *
+ * 电话号码输入/展示组件，支持只读、编辑、禁用三种状态。
+ * 基于 Ant Design Input 和 Select 组件开发，提供国家码选择、自动格式化、格式校验和拨号功能。
+ *
+ * @param props 组件 Props
+ *
+ * @example
+ * // 编辑态（中国手机号）
+ * <PisellPhone
+ *   placeholder="请输入手机号"
+ *   required
+ * />
+ *
+ * @example
+ * // 只读态（可拨号）
+ * <PisellPhone
+ *   mode="read"
+ *   value="13800000000"
+ *   countryCode="+86"
+ * />
+ *
+ * @example
+ * // 国家码选择
+ * <PisellPhone
+ *   showCountrySelector
+ *   availableCountryCodes={['+86', '+1', '+44']}
+ * />
+ */
+export declare const PisellPhone: React.FC<PisellPhoneProps>;
+declare const _default: React.NamedExoticComponent<PisellPhoneProps>;
+export default _default;

package/lib/components/pisellPhone/PisellPhone.js

@@ -0,0 +1,62 @@
+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/pisellPhone/PisellPhone.tsx
+var PisellPhone_exports = {};
+__export(PisellPhone_exports, {
+  PisellPhone: () => PisellPhone,
+  default: () => PisellPhone_default
+});
+module.exports = __toCommonJS(PisellPhone_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@pisell/utils");
+var import_ReadOnlyView = __toESM(require("./components/ReadOnlyView"));
+var import_EditView = __toESM(require("./components/EditView"));
+var import_DisabledView = __toESM(require("./components/DisabledView"));
+var import_PisellPhone = require("./PisellPhone.less");
+var PisellPhone = (props) => {
+  const { mode = "edit", disabled = false } = props;
+  const displayState = (0, import_utils.getDisplayState)(mode, disabled);
+  switch (displayState) {
+    case "read":
+      return /* @__PURE__ */ import_react.default.createElement(import_ReadOnlyView.default, { ...props });
+    case "edit":
+      return /* @__PURE__ */ import_react.default.createElement(import_EditView.default, { ...props });
+    case "disabled":
+      return /* @__PURE__ */ import_react.default.createElement(import_DisabledView.default, { ...props });
+    default:
+      return null;
+  }
+};
+var PisellPhone_default = import_react.default.memo(PisellPhone, (prevProps, nextProps) => {
+  return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled && prevProps.countryCode === nextProps.countryCode;
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellPhone
+});

package/lib/components/pisellPhone/PisellPhone.less

@@ -0,0 +1,85 @@
+/**
+ * PisellPhone 组件样式
+ */
+
+.pisell-phone {
+  &-edit {
+    position: relative;
+    width: 100%;
+
+    .ant-space-compact {
+      width: 100%;
+
+      // 国家码选择器样式
+      .ant-select {
+        flex-shrink: 0;
+
+        .ant-select-selector {
+          // 去掉右边框
+          border-right: none !important;
+          // 右侧不要圆角
+          border-top-right-radius: 0 !important;
+          border-bottom-right-radius: 0 !important;
+        }
+      }
+
+      // 输入框样式
+      .ant-input-affix-wrapper,
+      .ant-input {
+        flex: 1;
+        // 去掉左边框
+        border-left: none !important;
+        // 左侧不要圆角
+        border-top-left-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
+      }
+    }
+  }
+
+  &-error {
+    margin-top: 4px;
+    font-size: 12px;
+    color: #ff4d4f;
+    line-height: 1.5;
+    animation: fadeIn 0.3s ease-in-out;
+  }
+
+  &-read {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &-flag {
+    font-size: 18px;
+    line-height: 1;
+  }
+
+  &-clickable {
+    transition: color 0.2s ease-in-out;
+
+    &:hover {
+      color: #6D48C4 !important;
+    }
+
+    &:active {
+      color: #5F3DA8 !important;
+    }
+  }
+
+  &-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+// 错误提示淡入动画
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/lib/components/pisellPhone/PisellPhone.stories.d.ts

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellPhone } from './PisellPhone';
+/**
+ * PisellPhone 是一个电话号码输入/展示组件。
+ *
+ * ## 功能特性
+ * - 支持三种状态：只读、编辑、禁用
+ * - 国家码选择（预设24个常见国家）
+ * - 自动格式化
+ * - 格式校验
+ * - 移动端拨号
+ * - 号码脱敏
+ */
+declare const meta: Meta<typeof PisellPhone>;
+export default meta;
+declare type Story = StoryObj<typeof PisellPhone>;
+/**
+ * 基础编辑态（中国手机号）
+ */
+export declare const Basic: Story;
+/**
+ * 国家码选择器（显示所有国家）
+ */
+export declare const WithCountrySelector: Story;
+/**
+ * 国家码选择器（过滤显示）
+ */
+export declare const FilteredCountries: Story;
+/**
+ * 国家码选择器（常用国家置顶）
+ */
+export declare const CommonCountriesTop: Story;
+/**
+ * 只读态 - 格式化显示
+ */
+export declare const ReadMode: Story;
+/**
+ * 只读态 - 脱敏显示（中间）
+ */
+export declare const ReadModeMaskedMiddle: Story;
+/**
+ * 只读态 - 脱敏显示（末尾）
+ */
+export declare const ReadModeMaskedLast: Story;
+/**
+ * 只读态 - 可拨号（移动端）
+ */
+export declare const ReadModeDialable: Story;
+/**
+ * 禁用态
+ */
+export declare const Disabled: Story;
+/**
+ * 必填校验
+ */
+export declare const Required: Story;
+/**
+ * 格式校验
+ */
+export declare const FormatValidation: Story;
+/**
+ * 美国号码
+ */
+export declare const USPhone: Story;
+/**
+ * 自动格式化对比
+ */
+export declare const AutoFormatComparison: Story;
+/**
+ * 多国号码展示
+ */
+export declare const MultiCountryDisplay: Story;
+/**
+ * 脱敏模式对比
+ */
+export declare const MaskingComparison: Story;
+/**
+ * 完整功能示例
+ */
+export declare const CompleteExample: Story;