@pisell/materials 1.0.1057 → 1.0.1059

package/lib/components/pisellPhone/PisellPhone.js

@@ -34,24 +34,30 @@ __export(PisellPhone_exports, {
 });
 module.exports = __toCommonJS(PisellPhone_exports);
 var import_react = __toESM(require("react"));
+var import_antd = require("antd");
 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_pisell_components = require("../../theme/pisell-components");
 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;
-  }
+  const render = () => {
+    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;
+    }
+  };
+  const theme = (0, import_pisell_components.getPisellComponentsThemeConfig)();
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.ConfigProvider, { theme }, render());
 };
 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;

package/lib/components/pisellPhone/PisellPhone.less

@@ -7,125 +7,6 @@
   &-edit {
     position: relative;
     width: 100%;
-
-    .pisell-lowcode-space-compact {
-      width: 100%;
-      position: relative;
-      border-radius: 8px;
-
-      // 聚焦时整体外圈（与 SingleLineText 一致）
-      &:focus-within {
-        box-shadow: 0 0 0 4px #f4ebff; // Primary/100
-      }
-    }
-
-    // 国家码 Select 与 号码 Input 共用 Figma 设计 token
-    .pisell-lowcode-select-selector,
-    .pisell-lowcode-input {
-      font-size: 16px !important;
-      line-height: 24px !important;
-      border: 1px solid #d0d5dd !important; // Gray/300
-      color: #101828 !important; // Gray/900
-      background-color: #ffffff !important;
-      height: 48px !important;
-      padding: 12px 16px !important;
-
-      &::placeholder {
-        color: #667085 !important; // Gray/500
-      }
-
-      &:hover:not(:focus):not(.pisell-lowcode-select-open):not([disabled]) {
-        border-color: #b692f6 !important; // Primary/400
-      }
-
-      &[disabled],
-      &.pisell-lowcode-input-disabled {
-        background-color: #f9fafb !important; // Gray/50
-        color: #98a2b3 !important; // Gray/400
-        border-color: #d0d5dd !important;
-        cursor: not-allowed !important;
-      }
-    }
-
-    // 国家码选择器：左侧部分，去掉右侧边框与圆角
-    .pisell-lowcode-select {
-      flex-shrink: 0;
-
-      .pisell-lowcode-select-selector {
-        border-right: none !important;
-        border-top-right-radius: 0 !important;
-        border-bottom-right-radius: 0 !important;
-        border-top-left-radius: 8px !important;
-        border-bottom-left-radius: 8px !important;
-        min-height: 48px !important;
-        padding: 4px 12px 4px 16px !important;
-        align-items: center !important;
-      }
-
-      &.pisell-lowcode-select-focused .pisell-lowcode-select-selector {
-        border-color: #d6bbfb !important; // Primary/300
-        box-shadow: none !important;
-      }
-    }
-
-    // 号码输入框：右侧部分，去掉左侧边框与圆角
-    .pisell-lowcode-input {
-      flex: 1;
-      border-left: none !important;
-      border-top-left-radius: 0 !important;
-      border-bottom-left-radius: 0 !important;
-      border-top-right-radius: 8px !important;
-      border-bottom-right-radius: 8px !important;
-
-      &:focus {
-        border-color: #d6bbfb !important; // Primary/300
-        box-shadow: none !important;
-        outline: none !important;
-      }
-    }
-
-    // 整体聚焦时两侧边框统一为 Primary
-    .pisell-lowcode-space-compact:focus-within .pisell-lowcode-select-selector,
-    .pisell-lowcode-space-compact:focus-within .pisell-lowcode-input {
-      border-color: #d6bbfb !important;
-    }
-
-    .pisell-lowcode-space-compact:focus-within .pisell-lowcode-select-selector {
-      box-shadow: none !important;
-    }
-
-    // 清空按钮
-    .pisell-lowcode-input-clear-icon {
-      color: #667085 !important;
-      font-size: 14px !important;
-
-      &:hover {
-        color: #344054 !important; // Gray/700
-      }
-    }
-
-    // 错误状态：Select + Input 整体
-    .pisell-lowcode-select-status-error .pisell-lowcode-select-selector,
-    .pisell-lowcode-input-status-error {
-      border-color: #fda29b !important; // Error/300
-    }
-
-    .pisell-lowcode-space-compact:has(.pisell-lowcode-select-status-error) .pisell-lowcode-select-selector,
-    .pisell-lowcode-space-compact:has(.pisell-lowcode-input-status-error) .pisell-lowcode-input {
-      border-color: #fda29b !important;
-    }
-
-    .pisell-lowcode-space-compact:focus-within:has(.pisell-lowcode-input-status-error) .pisell-lowcode-select-selector,
-    .pisell-lowcode-space-compact:focus-within:has(.pisell-lowcode-input-status-error) .pisell-lowcode-input,
-    .pisell-lowcode-space-compact:focus-within:has(.pisell-lowcode-select-status-error) .pisell-lowcode-select-selector,
-    .pisell-lowcode-space-compact:focus-within:has(.pisell-lowcode-select-status-error) .pisell-lowcode-input {
-      border-color: #f97066 !important; // Error/400
-    }
-
-    .pisell-lowcode-space-compact:focus-within:has(.pisell-lowcode-input-status-error),
-    .pisell-lowcode-space-compact:focus-within:has(.pisell-lowcode-select-status-error) {
-      box-shadow: 0 0 0 4px #fee4e2 !important; // Error/100
-    }
   }
 
   &-error {

package/lib/components/pisellPhone/components/EditView.js

@@ -57,36 +57,52 @@ var EditView = (props) => {
     setCountryCode(code);
     (_a = props.onCountryCodeChange) == null ? void 0 : _a.call(props, code);
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-phone-edit" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Space.Compact, { style: { width: "100%" } }, props.showCountrySelector !== false && /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Select,
-    {
-      value: countryCode,
-      onChange: handleCountryCodeChange,
-      style: { width: 100, height: 48 },
-      showSearch: true,
-      optionFilterProp: "children",
-      className: "pisell-phone-country-select",
-      optionLabelProp: "value",
-      popupMatchSelectWidth: false,
-      dropdownStyle: { minWidth: 200 }
-    },
-    countryCodes.map((country, index) => /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Select.Option,
-      {
-        key: `${country.code}-${country.name}-${index}`,
-        value: country.code
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: 4 }, /* @__PURE__ */ import_react.default.createElement("span", null, country.flag), /* @__PURE__ */ import_react.default.createElement("span", null, country.code), /* @__PURE__ */ import_react.default.createElement("span", null, country.name))
-    ))
-  ), /* @__PURE__ */ import_react.default.createElement(
+  const maxDigitLen = (0, import_utils2.getMaxLength)(countryCode, countryCodes);
+  const maxInputLength = (0, import_react.useMemo)(() => {
+    if (props.maxLength != null) return props.maxLength;
+    if (props.autoFormat === false) return maxDigitLen;
+    return (0, import_utils2.formatPhone)("9".repeat(maxDigitLen), countryCode).length;
+  }, [countryCode, maxDigitLen, props.maxLength, props.autoFormat]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-phone-edit" }, /* @__PURE__ */ import_react.default.createElement(
     import_antd.Input,
     {
+      prefix: countryCode ? /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-phone-prefix" }, countryCode) : void 0,
       value,
       onChange: handlePhoneChange,
+      addonBefore: props.showCountrySelector !== false ? /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Select,
+        {
+          value: countryCode,
+          onChange: handleCountryCodeChange,
+          showSearch: true,
+          optionFilterProp: "children",
+          filterOption: (input, option) => {
+            const code = option == null ? void 0 : option.value;
+            const country = countryCodes.find((c) => c.code === code);
+            if (!country) return false;
+            const search = input.trim().toLowerCase();
+            if (!search) return true;
+            return country.name.toLowerCase().includes(search) || country.code.toLowerCase().includes(search) || country.flag.toLowerCase().includes(search);
+          },
+          className: "pisell-phone-country-select",
+          optionLabelProp: "label",
+          popupMatchSelectWidth: false,
+          dropdownStyle: { minWidth: 200 }
+        },
+        countryCodes.map((country, index) => /* @__PURE__ */ import_react.default.createElement(
+          import_antd.Select.Option,
+          {
+            key: `${country.code}-${country.name}-${index}`,
+            value: country.code,
+            label: country.flag
+          },
+          /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: 4 }, /* @__PURE__ */ import_react.default.createElement("span", null, country.flag), /* @__PURE__ */ import_react.default.createElement("span", null, country.code))
+        ))
+      ) : null,
       onBlur: handleBlur,
       onFocus: handleFocus,
       placeholder: props.placeholder || "请输入电话号码",
-      maxLength: props.maxLength || (0, import_utils2.getMaxLength)(countryCode, countryCodes),
+      maxLength: maxInputLength,
       allowClear: props.allowClear,
       disabled: props.disabled,
       autoFocus: props.autoFocus,
@@ -96,6 +112,6 @@ var EditView = (props) => {
       "aria-label": props["aria-label"],
       "aria-describedby": props["aria-describedby"]
     }
-  )), !isValid && errors.length > 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-phone-error" }, errors[0]));
+  ), !isValid && errors.length > 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-phone-error" }, errors[0]));
 };
 var EditView_default = EditView;

package/lib/components/pisellPhone/constants/countryCodes.d.ts

@@ -1,6 +1,7 @@
 import type { CountryCode } from '../types';
 /**
  * 预设的国家码列表（24个常见国家）
+ * flag 使用正常文本（ISO 3166-1 alpha-2 两字母代码，如 CN、US）
  *
  * 包含：
  * - 亚洲：中国、香港、澳门、台湾、日本、韩国、新加坡、马来西亚、泰国、印度

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

@@ -29,7 +29,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+86",
     name: "中国",
-    flag: "🇨🇳",
+    flag: "CN",
     format: "XXX XXXX XXXX",
     maxLength: 11,
     pattern: /^1[3-9]\d{9}$/
@@ -37,7 +37,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+852",
     name: "香港",
-    flag: "🇭🇰",
+    flag: "HK",
     format: "XXXX XXXX",
     maxLength: 8,
     pattern: /^\d{8}$/
@@ -45,7 +45,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+853",
     name: "澳门",
-    flag: "🇲🇴",
+    flag: "MO",
     format: "XXXX XXXX",
     maxLength: 8,
     pattern: /^\d{8}$/
@@ -53,7 +53,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+886",
     name: "台湾",
-    flag: "🇹🇼",
+    flag: "TW",
     format: "XXXX XXX XXX",
     maxLength: 9,
     pattern: /^\d{9}$/
@@ -61,7 +61,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+81",
     name: "日本",
-    flag: "🇯🇵",
+    flag: "JP",
     format: "XX-XXXX-XXXX",
     maxLength: 10,
     pattern: /^\d{10}$/
@@ -69,7 +69,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+82",
     name: "韩国",
-    flag: "🇰🇷",
+    flag: "KR",
     format: "XX-XXXX-XXXX",
     maxLength: 10,
     pattern: /^\d{10}$/
@@ -77,7 +77,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+65",
     name: "新加坡",
-    flag: "🇸🇬",
+    flag: "SG",
     format: "XXXX XXXX",
     maxLength: 8,
     pattern: /^\d{8}$/
@@ -85,7 +85,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+60",
     name: "马来西亚",
-    flag: "🇲🇾",
+    flag: "MY",
     format: "XX-XXXX XXXX",
     maxLength: 10,
     pattern: /^\d{9,10}$/
@@ -93,7 +93,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+66",
     name: "泰国",
-    flag: "🇹🇭",
+    flag: "TH",
     format: "XX-XXX-XXXX",
     maxLength: 9,
     pattern: /^\d{9}$/
@@ -101,7 +101,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+91",
     name: "印度",
-    flag: "🇮🇳",
+    flag: "IN",
     format: "XXXXX XXXXX",
     maxLength: 10,
     pattern: /^\d{10}$/
@@ -110,7 +110,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+44",
     name: "英国",
-    flag: "🇬🇧",
+    flag: "GB",
     format: "XXXX XXX XXXX",
     maxLength: 10,
     pattern: /^\d{10}$/
@@ -118,7 +118,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+33",
     name: "法国",
-    flag: "🇫🇷",
+    flag: "FR",
     format: "X XX XX XX XX",
     maxLength: 9,
     pattern: /^\d{9}$/
@@ -126,7 +126,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+49",
     name: "德国",
-    flag: "🇩🇪",
+    flag: "DE",
     format: "XXX XXXXXXX",
     maxLength: 11,
     pattern: /^\d{10,11}$/
@@ -134,7 +134,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+39",
     name: "意大利",
-    flag: "🇮🇹",
+    flag: "IT",
     format: "XXX XXX XXXX",
     maxLength: 10,
     pattern: /^\d{10}$/
@@ -142,7 +142,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+34",
     name: "西班牙",
-    flag: "🇪🇸",
+    flag: "ES",
     format: "XXX XX XX XX",
     maxLength: 9,
     pattern: /^\d{9}$/
@@ -150,7 +150,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+7",
     name: "俄罗斯",
-    flag: "🇷🇺",
+    flag: "RU",
     format: "XXX XXX-XX-XX",
     maxLength: 10,
     pattern: /^\d{10}$/
@@ -159,7 +159,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+1",
     name: "美国",
-    flag: "🇺🇸",
+    flag: "US",
     format: "(XXX) XXX-XXXX",
     maxLength: 10,
     pattern: /^\d{10}$/
@@ -167,7 +167,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+1",
     name: "加拿大",
-    flag: "🇨🇦",
+    flag: "CA",
     format: "(XXX) XXX-XXXX",
     maxLength: 10,
     pattern: /^\d{10}$/
@@ -175,7 +175,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+52",
     name: "墨西哥",
-    flag: "🇲🇽",
+    flag: "MX",
     format: "XX XXXX XXXX",
     maxLength: 10,
     pattern: /^\d{10}$/
@@ -183,7 +183,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+55",
     name: "巴西",
-    flag: "🇧🇷",
+    flag: "BR",
     format: "XX XXXXX-XXXX",
     maxLength: 11,
     pattern: /^\d{10,11}$/
@@ -192,7 +192,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+61",
     name: "澳大利亚",
-    flag: "🇦🇺",
+    flag: "AU",
     format: "XXX XXX XXX",
     maxLength: 9,
     pattern: /^\d{9}$/
@@ -200,7 +200,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+64",
     name: "新西兰",
-    flag: "🇳🇿",
+    flag: "NZ",
     format: "XX XXX XXXX",
     maxLength: 9,
     pattern: /^\d{9}$/
@@ -209,7 +209,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+971",
     name: "阿联酋",
-    flag: "🇦🇪",
+    flag: "AE",
     format: "XX XXX XXXX",
     maxLength: 9,
     pattern: /^\d{9}$/
@@ -217,7 +217,7 @@ var PRESET_COUNTRY_CODES = [
   {
     code: "+966",
     name: "沙特阿拉伯",
-    flag: "🇸🇦",
+    flag: "SA",
     format: "XX XXX XXXX",
     maxLength: 9,
     pattern: /^\d{9}$/

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

@@ -15,8 +15,8 @@ export interface CountryCode {
      */
     name: string;
     /**
-     * 国旗 emoji 或图标
-     * @example '🇨🇳', '🇺🇸', '🇬🇧'
+     * 国家/地区展示用标识（正常文本，如 ISO 两字母代码 CN、US）
+     * @example 'CN', 'US', 'GB', 'HK'
      */
     flag: string;
     /**

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

@@ -1,15 +1,15 @@
 import type { CountryCode, PisellPhoneProps } from '../types';
 /**
- * 根据国家码获取国旗 emoji
+ * 根据国家码获取国家/地区展示标识（正常文本，如 CN、US）
  * @param countryCode 国家码
- * @returns 国旗 emoji
+ * @returns 展示用标识，未匹配时返回 '--'
  */
 export declare function getCountryFlag(countryCode: string): string;
 /**
- * 根据国家码获取最大长度
+ * 根据国家码获取最大长度（数字位数）
  * @param countryCode 国家码
  * @param countryCodes 国家码列表
- * @returns 最大长度
+ * @returns 最大长度（如中国 11 位数字）
  */
 export declare function getMaxLength(countryCode: string, countryCodes: CountryCode[]): number;
 /**

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

@@ -28,7 +28,7 @@ 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) || "🌐";
+  return (country == null ? void 0 : country.flag) || "--";
 }
 function getMaxLength(countryCode, countryCodes) {
   const country = countryCodes.find((c) => c.code === countryCode);

package/lib/components/pisellRating/PisellRating.js

@@ -36,6 +36,7 @@ module.exports = __toCommonJS(PisellRating_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_utils = require("@pisell/utils");
+var import_pisell_components = require("../../theme/pisell-components");
 var import_PisellRating = require("./PisellRating.less");
 var PisellRating = (props) => {
   const {
@@ -72,7 +73,8 @@ var PisellRating = (props) => {
     color,
     ...style
   };
-  return /* @__PURE__ */ import_react.default.createElement(
+  const theme = (0, import_pisell_components.getPisellComponentsThemeConfig)();
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.ConfigProvider, { theme }, /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       className: `pisell-rating pisell-rating-${displayState} ${className || ""}`,
@@ -99,7 +101,7 @@ var PisellRating = (props) => {
     ),
     showValue && value !== void 0 && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-rating-value", style: { marginLeft: 8 } }, value.toFixed(allowHalf ? 1 : 0)),
     showCount && reviewCount !== void 0 && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-rating-count", style: { marginLeft: 8, color: "#999" } }, "(", reviewCount, " 人评价)")
-  );
+  ));
 };
 var PisellRating_default = import_react.default.memo(PisellRating, (prevProps, nextProps) => {
   return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled;

package/lib/components/pisellSingleLineText/PisellSingleLineText.js

@@ -39,19 +39,25 @@ var import_ReadOnlyView = __toESM(require("./components/ReadOnlyView"));
 var import_EditView = __toESM(require("./components/EditView"));
 var import_DisabledView = __toESM(require("./components/DisabledView"));
 var import_PisellSingleLineText = require("./PisellSingleLineText.less");
+var import_antd = require("antd");
+var import_pisell_components = require("../../theme/pisell-components");
 var PisellSingleLineText = (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;
-  }
+  const render = () => {
+    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;
+    }
+  };
+  const theme = (0, import_pisell_components.getPisellComponentsThemeConfig)();
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.ConfigProvider, { theme }, render());
 };
 var PisellSingleLineText_default = import_react.default.memo(PisellSingleLineText, (prevProps, nextProps) => {
   return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled;