@pisell/materials 3.3.81 → 3.3.83

package/lib/components/pisellPhone/constants/countryCodes.js

@@ -0,0 +1,233 @@
+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/pisellPhone/constants/countryCodes.ts
+var countryCodes_exports = {};
+__export(countryCodes_exports, {
+  COMMON_COUNTRY_CODES: () => COMMON_COUNTRY_CODES,
+  DEFAULT_COUNTRY_CODE: () => DEFAULT_COUNTRY_CODE,
+  PRESET_COUNTRY_CODES: () => PRESET_COUNTRY_CODES
+});
+module.exports = __toCommonJS(countryCodes_exports);
+var PRESET_COUNTRY_CODES = [
+  // 亚洲
+  {
+    code: "+86",
+    name: "中国",
+    flag: "🇨🇳",
+    format: "XXX XXXX XXXX",
+    maxLength: 11,
+    pattern: /^1[3-9]\d{9}$/
+  },
+  {
+    code: "+852",
+    name: "香港",
+    flag: "🇭🇰",
+    format: "XXXX XXXX",
+    maxLength: 8,
+    pattern: /^\d{8}$/
+  },
+  {
+    code: "+853",
+    name: "澳门",
+    flag: "🇲🇴",
+    format: "XXXX XXXX",
+    maxLength: 8,
+    pattern: /^\d{8}$/
+  },
+  {
+    code: "+886",
+    name: "台湾",
+    flag: "🇹🇼",
+    format: "XXXX XXX XXX",
+    maxLength: 9,
+    pattern: /^\d{9}$/
+  },
+  {
+    code: "+81",
+    name: "日本",
+    flag: "🇯🇵",
+    format: "XX-XXXX-XXXX",
+    maxLength: 10,
+    pattern: /^\d{10}$/
+  },
+  {
+    code: "+82",
+    name: "韩国",
+    flag: "🇰🇷",
+    format: "XX-XXXX-XXXX",
+    maxLength: 10,
+    pattern: /^\d{10}$/
+  },
+  {
+    code: "+65",
+    name: "新加坡",
+    flag: "🇸🇬",
+    format: "XXXX XXXX",
+    maxLength: 8,
+    pattern: /^\d{8}$/
+  },
+  {
+    code: "+60",
+    name: "马来西亚",
+    flag: "🇲🇾",
+    format: "XX-XXXX XXXX",
+    maxLength: 10,
+    pattern: /^\d{9,10}$/
+  },
+  {
+    code: "+66",
+    name: "泰国",
+    flag: "🇹🇭",
+    format: "XX-XXX-XXXX",
+    maxLength: 9,
+    pattern: /^\d{9}$/
+  },
+  {
+    code: "+91",
+    name: "印度",
+    flag: "🇮🇳",
+    format: "XXXXX XXXXX",
+    maxLength: 10,
+    pattern: /^\d{10}$/
+  },
+  // 欧洲
+  {
+    code: "+44",
+    name: "英国",
+    flag: "🇬🇧",
+    format: "XXXX XXX XXXX",
+    maxLength: 10,
+    pattern: /^\d{10}$/
+  },
+  {
+    code: "+33",
+    name: "法国",
+    flag: "🇫🇷",
+    format: "X XX XX XX XX",
+    maxLength: 9,
+    pattern: /^\d{9}$/
+  },
+  {
+    code: "+49",
+    name: "德国",
+    flag: "🇩🇪",
+    format: "XXX XXXXXXX",
+    maxLength: 11,
+    pattern: /^\d{10,11}$/
+  },
+  {
+    code: "+39",
+    name: "意大利",
+    flag: "🇮🇹",
+    format: "XXX XXX XXXX",
+    maxLength: 10,
+    pattern: /^\d{10}$/
+  },
+  {
+    code: "+34",
+    name: "西班牙",
+    flag: "🇪🇸",
+    format: "XXX XX XX XX",
+    maxLength: 9,
+    pattern: /^\d{9}$/
+  },
+  {
+    code: "+7",
+    name: "俄罗斯",
+    flag: "🇷🇺",
+    format: "XXX XXX-XX-XX",
+    maxLength: 10,
+    pattern: /^\d{10}$/
+  },
+  // 美洲
+  {
+    code: "+1",
+    name: "美国",
+    flag: "🇺🇸",
+    format: "(XXX) XXX-XXXX",
+    maxLength: 10,
+    pattern: /^\d{10}$/
+  },
+  {
+    code: "+1",
+    name: "加拿大",
+    flag: "🇨🇦",
+    format: "(XXX) XXX-XXXX",
+    maxLength: 10,
+    pattern: /^\d{10}$/
+  },
+  {
+    code: "+52",
+    name: "墨西哥",
+    flag: "🇲🇽",
+    format: "XX XXXX XXXX",
+    maxLength: 10,
+    pattern: /^\d{10}$/
+  },
+  {
+    code: "+55",
+    name: "巴西",
+    flag: "🇧🇷",
+    format: "XX XXXXX-XXXX",
+    maxLength: 11,
+    pattern: /^\d{10,11}$/
+  },
+  // 大洋洲
+  {
+    code: "+61",
+    name: "澳大利亚",
+    flag: "🇦🇺",
+    format: "XXX XXX XXX",
+    maxLength: 9,
+    pattern: /^\d{9}$/
+  },
+  {
+    code: "+64",
+    name: "新西兰",
+    flag: "🇳🇿",
+    format: "XX XXX XXXX",
+    maxLength: 9,
+    pattern: /^\d{9}$/
+  },
+  // 中东
+  {
+    code: "+971",
+    name: "阿联酋",
+    flag: "🇦🇪",
+    format: "XX XXX XXXX",
+    maxLength: 9,
+    pattern: /^\d{9}$/
+  },
+  {
+    code: "+966",
+    name: "沙特阿拉伯",
+    flag: "🇸🇦",
+    format: "XX XXX XXXX",
+    maxLength: 9,
+    pattern: /^\d{9}$/
+  }
+];
+var DEFAULT_COUNTRY_CODE = "+86";
+var COMMON_COUNTRY_CODES = ["+86", "+1", "+44"];
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  COMMON_COUNTRY_CODES,
+  DEFAULT_COUNTRY_CODE,
+  PRESET_COUNTRY_CODES
+});

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

@@ -0,0 +1,7 @@
+/**
+ * PisellPhone 组件导出
+ */
+export { default as PisellPhone } from './PisellPhone';
+export type { PisellPhoneProps, CountryCode } from './types';
+export { PRESET_COUNTRY_CODES, DEFAULT_COUNTRY_CODE, COMMON_COUNTRY_CODES } from './constants/countryCodes';
+export type { DisplayState, ValidationResult, TextInputState } from './types';

package/lib/components/pisellPhone/index.js

@@ -0,0 +1,46 @@
+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/index.tsx
+var pisellPhone_exports = {};
+__export(pisellPhone_exports, {
+  COMMON_COUNTRY_CODES: () => import_countryCodes.COMMON_COUNTRY_CODES,
+  DEFAULT_COUNTRY_CODE: () => import_countryCodes.DEFAULT_COUNTRY_CODE,
+  PRESET_COUNTRY_CODES: () => import_countryCodes.PRESET_COUNTRY_CODES,
+  PisellPhone: () => import_PisellPhone.default
+});
+module.exports = __toCommonJS(pisellPhone_exports);
+var import_PisellPhone = __toESM(require("./PisellPhone"));
+var import_countryCodes = require("./constants/countryCodes");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  COMMON_COUNTRY_CODES,
+  DEFAULT_COUNTRY_CODE,
+  PRESET_COUNTRY_CODES,
+  PisellPhone
+});

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

@@ -0,0 +1,209 @@
+import type { CSSProperties } from 'react';
+import type { BaseTextInputProps } from '@pisell/utils';
+/**
+ * 国家码配置类型
+ */
+export interface CountryCode {
+    /**
+     * 国家码
+     * @example '+86', '+1', '+44'
+     */
+    code: string;
+    /**
+     * 国家名称
+     * @example '中国', '美国', '英国'
+     */
+    name: string;
+    /**
+     * 国旗 emoji 或图标
+     * @example '🇨🇳', '🇺🇸', '🇬🇧'
+     */
+    flag: string;
+    /**
+     * 号码格式（可选，用于显示占位符）
+     * @example 'XXX XXXX XXXX', '(XXX) XXX-XXXX'
+     */
+    format?: string;
+    /**
+     * 最大长度
+     * @example 11 (中国), 10 (美国)
+     */
+    maxLength: number;
+    /**
+     * 校验正则
+     * @example /^1[3-9]\d{9}$/ (中国手机号)
+     */
+    pattern: RegExp;
+}
+/**
+ * PisellPhone 组件 Props 类型定义
+ *
+ * 继承 BaseTextInputProps，添加电话号码特有的配置
+ */
+export interface PisellPhoneProps extends BaseTextInputProps {
+    /**
+     * 状态模式
+     * @default 'edit'
+     */
+    mode?: 'read' | 'edit';
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 当前选中的国家码
+     * @default '+86'
+     * @example '+86', '+1', '+44'
+     */
+    countryCode?: string;
+    /**
+     * 默认国家码（非受控模式）
+     * @default '+86'
+     */
+    defaultCountryCode?: string;
+    /**
+     * 是否显示国家码选择器
+     * @default true
+     */
+    showCountrySelector?: boolean;
+    /**
+     * 可用的国家码列表（从预设24个中过滤）
+     * @example ['+86', '+1', '+44']
+     */
+    availableCountryCodes?: string[];
+    /**
+     * 常用国家码（置顶显示）
+     * @example ['+86', '+1']
+     */
+    commonCountryCodes?: string[];
+    /**
+     * 完全自定义国家码列表（覆盖预设）
+     */
+    countryCodes?: CountryCode[];
+    /**
+     * 国家码变更回调
+     * @param code 新的国家码
+     */
+    onCountryCodeChange?: (code: string) => void;
+    /**
+     * 是否自动格式化
+     * @default true
+     */
+    autoFormat?: boolean;
+    /**
+     * 格式化规则
+     * @default 'auto'
+     */
+    formatRule?: 'mobile' | 'landline' | 'auto';
+    /**
+     * 格式化分隔符
+     * @default ' '
+     */
+    separator?: string;
+    /**
+     * 是否启用拨号（移动端）
+     * @default true
+     */
+    enableDial?: boolean;
+    /**
+     * 是否显示拨号图标
+     * @default false
+     */
+    showDialIcon?: boolean;
+    /**
+     * 拨号回调
+     * @param phone 完整的电话号码（含国家码）
+     */
+    onDial?: (phone: string) => void;
+    /**
+     * 是否脱敏显示（只读态）
+     * @default false
+     */
+    enableMasking?: boolean;
+    /**
+     * 脱敏模式
+     * - middle: 中间4位脱敏（138****0000）
+     * - last: 后4位脱敏（1380000****）
+     * - custom: 使用自定义函数
+     * @default 'middle'
+     */
+    maskPattern?: 'middle' | 'last' | 'custom';
+    /**
+     * 自定义脱敏函数
+     * @param phone 电话号码
+     * @returns 脱敏后的号码
+     */
+    customMask?: (phone: string) => string;
+    /**
+     * 是否显示国旗图标
+     * @default true
+     */
+    showFlag?: boolean;
+    /**
+     * 字号
+     * @example '14px' 或 14
+     * @default 16
+     */
+    fontSize?: string | number;
+    /**
+     * 字重
+     * @example 'bold' 或 600
+     * @default 500
+     */
+    fontWeight?: string | number;
+    /**
+     * 文本颜色
+     * @example '#000000'
+     * @default '#101828'
+     */
+    color?: string;
+    /**
+     * 占位文本
+     * @default '请输入电话号码'
+     */
+    placeholder?: string;
+    /**
+     * 最大长度（根据国家码自动设置）
+     */
+    maxLength?: number;
+    /**
+     * 是否显示清空按钮
+     * @default false
+     */
+    allowClear?: boolean;
+    /**
+     * 是否自动聚焦
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * 是否校验格式
+     * @default true
+     */
+    validateFormat?: boolean;
+    /**
+     * 自定义校验函数
+     * @param phone 电话号码（纯数字）
+     * @param countryCode 国家码
+     * @returns true 表示校验通过，string 表示错误信息
+     */
+    customValidator?: (phone: string, countryCode: string) => boolean | string;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * ARIA 标签
+     */
+    'aria-label'?: string;
+    /**
+     * ARIA 描述
+     */
+    'aria-describedby'?: string;
+}
+export type { DisplayState, ValidationResult, TextInputState } from '@pisell/utils';

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

package/lib/components/pisellPhone/utils/countryCodeHelper.d.ts

@@ -0,0 +1,35 @@
+import type { CountryCode, PisellPhoneProps } from '../types';
+/**
+ * 根据国家码获取国旗 emoji
+ * @param countryCode 国家码
+ * @returns 国旗 emoji
+ */
+export declare function getCountryFlag(countryCode: string): string;
+/**
+ * 根据国家码获取最大长度
+ * @param countryCode 国家码
+ * @param countryCodes 国家码列表
+ * @returns 最大长度
+ */
+export declare function getMaxLength(countryCode: string, countryCodes: CountryCode[]): number;
+/**
+ * 根据国家码获取配置
+ * @param countryCode 国家码
+ * @param countryCodes 国家码列表
+ * @returns 国家码配置
+ */
+export declare function getCountryConfig(countryCode: string, countryCodes: CountryCode[]): CountryCode | undefined;
+/**
+ * 获取最终的国家码列表
+ *
+ * 优先级：
+ * 1. props.countryCodes（完全自定义）
+ * 2. props.availableCountryCodes（从预设中过滤）
+ * 3. PRESET_COUNTRY_CODES（默认全部24个）
+ *
+ * 然后根据 props.commonCountryCodes 排序（置顶）
+ *
+ * @param props 组件 Props
+ * @returns 国家码列表
+ */
+export declare function getCountryCodes(props: PisellPhoneProps): CountryCode[];

package/lib/components/pisellPhone/utils/countryCodeHelper.js

@@ -0,0 +1,64 @@
+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/pisellPhone/utils/countryCodeHelper.ts
+var countryCodeHelper_exports = {};
+__export(countryCodeHelper_exports, {
+  getCountryCodes: () => getCountryCodes,
+  getCountryConfig: () => getCountryConfig,
+  getCountryFlag: () => getCountryFlag,
+  getMaxLength: () => getMaxLength
+});
+module.exports = __toCommonJS(countryCodeHelper_exports);
+var import_countryCodes = require("../constants/countryCodes");
+function getCountryFlag(countryCode) {
+  const country = import_countryCodes.PRESET_COUNTRY_CODES.find((c) => c.code === countryCode);
+  return (country == null ? void 0 : country.flag) || "🌐";
+}
+function getMaxLength(countryCode, countryCodes) {
+  const country = countryCodes.find((c) => c.code === countryCode);
+  return (country == null ? void 0 : country.maxLength) || 15;
+}
+function getCountryConfig(countryCode, countryCodes) {
+  return countryCodes.find((c) => c.code === countryCode);
+}
+function getCountryCodes(props) {
+  let codes;
+  if (props.countryCodes && props.countryCodes.length > 0) {
+    codes = props.countryCodes;
+  } else if (props.availableCountryCodes && props.availableCountryCodes.length > 0) {
+    codes = import_countryCodes.PRESET_COUNTRY_CODES.filter(
+      (c) => props.availableCountryCodes.includes(c.code)
+    );
+  } else {
+    codes = import_countryCodes.PRESET_COUNTRY_CODES;
+  }
+  if (props.commonCountryCodes && props.commonCountryCodes.length > 0) {
+    const common = codes.filter((c) => props.commonCountryCodes.includes(c.code));
+    const others = codes.filter((c) => !props.commonCountryCodes.includes(c.code));
+    codes = [...common, ...others];
+  }
+  return codes;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getCountryCodes,
+  getCountryConfig,
+  getCountryFlag,
+  getMaxLength
+});

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

@@ -0,0 +1,6 @@
+/**
+ * 电话号码工具函数导出
+ */
+export { formatPhone, formatChinaMobile, formatUSPhone, maskPhone, detectPhoneType } from './phoneFormatter';
+export { validatePhone } from './phoneValidator';
+export { getCountryFlag, getMaxLength, getCountryConfig, getCountryCodes, } from './countryCodeHelper';

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

@@ -0,0 +1,49 @@
+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/pisellPhone/utils/index.ts
+var utils_exports = {};
+__export(utils_exports, {
+  detectPhoneType: () => import_phoneFormatter.detectPhoneType,
+  formatChinaMobile: () => import_phoneFormatter.formatChinaMobile,
+  formatPhone: () => import_phoneFormatter.formatPhone,
+  formatUSPhone: () => import_phoneFormatter.formatUSPhone,
+  getCountryCodes: () => import_countryCodeHelper.getCountryCodes,
+  getCountryConfig: () => import_countryCodeHelper.getCountryConfig,
+  getCountryFlag: () => import_countryCodeHelper.getCountryFlag,
+  getMaxLength: () => import_countryCodeHelper.getMaxLength,
+  maskPhone: () => import_phoneFormatter.maskPhone,
+  validatePhone: () => import_phoneValidator.validatePhone
+});
+module.exports = __toCommonJS(utils_exports);
+var import_phoneFormatter = require("./phoneFormatter");
+var import_phoneValidator = require("./phoneValidator");
+var import_countryCodeHelper = require("./countryCodeHelper");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  detectPhoneType,
+  formatChinaMobile,
+  formatPhone,
+  formatUSPhone,
+  getCountryCodes,
+  getCountryConfig,
+  getCountryFlag,
+  getMaxLength,
+  maskPhone,
+  validatePhone
+});