@pisell/materials 1.0.473 → 1.0.475

package/lib/components/dataSourceComponents/dataSourceForm/provider/formSetting/FormSettingContext.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ModeType } from '../../type';
 export interface FormSettingContextType {
-    mode?: ModeType;
+    renderMode?: ModeType;
     groupInfoPosition?: 'top' | 'side';
     children?: React.ReactNode;
     currentValue?: 'server' | 'local';

package/lib/components/dataSourceComponents/dataSourceForm/provider/formSetting/FormSettingContext.js

@@ -25,7 +25,7 @@ __export(FormSettingContext_exports, {
 module.exports = __toCommonJS(FormSettingContext_exports);
 var import_react = require("react");
 var initialContext = {
-  mode: "edit"
+  renderMode: "edit"
 };
 var FormSettingContext = (0, import_react.createContext)(initialContext);
 var FormSettingContext_default = FormSettingContext;

package/lib/components/dataSourceComponents/dataSourceForm/provider/formSetting/FormSettingProvider.js

@@ -35,14 +35,14 @@ module.exports = __toCommonJS(FormSettingProvider_exports);
 var import_react = __toESM(require("react"));
 var import_FormSettingContext = __toESM(require("./FormSettingContext"));
 var FormSettingProvider = (props) => {
-  const { children, mode, groupInfoPosition, currentValue } = props;
+  const { children, renderMode, groupInfoPosition, currentValue } = props;
   const value = import_react.default.useMemo(() => {
     return {
-      mode,
+      renderMode,
       groupInfoPosition,
       currentValue
     };
-  }, [mode, groupInfoPosition, currentValue]);
+  }, [renderMode, groupInfoPosition, currentValue]);
   return /* @__PURE__ */ import_react.default.createElement(
     import_FormSettingContext.default.Provider,
     {

package/lib/components/dataSourceComponents/dataSourceForm/submitButton/index.js

@@ -56,16 +56,16 @@ var SubmitButton = (props) => {
   const [loading, setLoading] = (0, import_react.useState)(false);
   const [api, contextHolder] = import_antd.notification.useNotification();
   const form = import_antd.Form.useFormInstance();
-  const { mode } = (0, import_useFormSetting.default)();
+  const { renderMode } = (0, import_useFormSetting.default)();
   const { setVisible, refreshTableData } = (0, import_useCtxActions.default)();
   const { create, update } = (0, import_useDataSource.default)();
   const isDisabled = status === "disabled";
   const onSubmit = async (values) => {
     try {
       setLoading(true);
-      if (mode === "edit") {
+      if (renderMode === "edit") {
         await update.runAsync(values);
-      } else if (mode === "add") {
+      } else if (renderMode === "add") {
         const res = await create.runAsync(values);
         form == null ? void 0 : form.resetFields();
       }
@@ -141,7 +141,7 @@ var SubmitButton = (props) => {
     }
     handleValideFieldsSubmit(values);
   };
-  if (status === "hidden" || mode === "view") {
+  if (status === "hidden" || renderMode === "view") {
     return null;
   }
   return /* @__PURE__ */ import_react.default.createElement(import_formItem.default, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-data-source-form-submit-button-wrapper" }, /* @__PURE__ */ import_react.default.createElement(

package/lib/components/dataSourceComponents/dataSourceForm/type.d.ts

@@ -9,7 +9,7 @@ export interface DataSourceFormProps {
     showDescription: boolean;
     groupInfoPosition: 'top' | 'side';
     variables: any[];
-    mode?: ModeType;
+    renderMode?: ModeType;
     currentValue?: 'server' | 'local';
     children: React.ReactNode;
     className?: string;

package/lib/components/dataSourceComponents/dataSourceForm/utils.js

@@ -43,6 +43,7 @@ module.exports = __toCommonJS(utils_exports);
 var import_react = __toESM(require("react"));
 var import_utils = require("@pisell/utils");
 var import_antd = require("antd");
+var import_libphonenumber_js = require("libphonenumber-js");
 var import_locales = require("../../../locales");
 var import_form = __toESM(require("../../form"));
 var import_useDataSource = __toESM(require("../hooks/useDataSource"));
@@ -87,6 +88,7 @@ var withFormItem = (WrappedComponent, otherFormItemProps) => {
     name: propsName,
     label: propsLabel,
     mode: propsMode,
+    renderMode: propsRenderMode,
     tooltip,
     noStyle,
     extra,
@@ -111,10 +113,10 @@ var withFormItem = (WrappedComponent, otherFormItemProps) => {
     const { path: prefixPath = [] } = (0, import_useJsonPrefixPath.default)();
     const { dataSource } = (0, import_useDataSource.default)();
     const { fields } = dataSource || {};
-    const { mode: globalMode } = (0, import_useFormSetting.default)();
+    const { renderMode: globalRenderMode } = (0, import_useFormSetting.default)();
     const field = fields == null ? void 0 : fields.find((item) => item.name === propsName);
     const label = propsLabel || ((_a = field == null ? void 0 : field.uiSchema) == null ? void 0 : _a.title) || propsName;
-    const effectiveMode = propsMode || globalMode;
+    const effectiveMode = propsRenderMode || globalRenderMode;
     const renderComponent = (0, import_react.useMemo)(() => {
       return /* @__PURE__ */ import_react.default.createElement(
         WrappedComponent,
@@ -125,10 +127,18 @@ var withFormItem = (WrappedComponent, otherFormItemProps) => {
           style: {
             ...(otherFormItemProps == null ? void 0 : otherFormItemProps.innerStyle) || {},
             ...innerStyle
-          }
+          },
+          isVerification: typeobj == null ? void 0 : typeobj.enabled
         }
       );
-    }, [effectiveMode, otherProps, propsMode, innerStyle, otherFormItemProps == null ? void 0 : otherFormItemProps.innerStyle]);
+    }, [
+      effectiveMode,
+      otherProps,
+      propsMode,
+      innerStyle,
+      otherFormItemProps == null ? void 0 : otherFormItemProps.innerStyle,
+      typeobj == null ? void 0 : typeobj.enabled
+    ]);
     const isDesignMode = __designMode === "design";
     const isHidden = effectiveMode === "hidden";
     const name = (0, import_utils.isString)(propsName) && propsName.includes(".") ? [propsName] : propsName;
@@ -146,10 +156,23 @@ var withFormItem = (WrappedComponent, otherFormItemProps) => {
           ...typeobj,
           message: typeobj.message || (0, import_locales.getText)("pisell-data-source-form-email-message")
         });
-      } else {
+      }
+      if (typeobj.type === "url" && typeobj.enabled) {
         rules.push({
           ...typeobj,
-          message: typeobj.message || (0, import_locales.getText)("pisell-data-source-form-type-message")(typeobj == null ? void 0 : typeobj.type)
+          message: typeobj.message || (0, import_locales.getText)("pisell-data-source-form-url-message")
+        });
+      }
+      if (typeobj.type === "phone" && typeobj.enabled) {
+        rules.push({
+          validator: (_, value) => {
+            var _a2;
+            return (0, import_libphonenumber_js.isValidPhoneNumber)(value) && ((_a2 = (0, import_libphonenumber_js.parsePhoneNumberFromString)(value)) == null ? void 0 : _a2.isValid()) ? Promise.resolve() : Promise.reject(
+              new Error(
+                typeobj.message || (0, import_locales.getText)("pisell-data-source-form-phone-message")
+              )
+            );
+          }
         });
       }
     }
@@ -202,6 +225,7 @@ var withFormItem = (WrappedComponent, otherFormItemProps) => {
         validator,
         validateTrigger,
         labelCol,
+        initialValue: otherProps == null ? void 0 : otherProps.defaultValue,
         ...otherFormItemProps
       },
       renderComponent

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useColumns.js

@@ -36,7 +36,7 @@ var import_react = __toESM(require("react"));
 var import_fields = require("../../fields");
 var genFieldProps = (field) => {
   const props = {
-    mode: "view",
+    renderMode: "view",
     noStyle: true
   };
   if (!field)

package/lib/components/dataSourceComponents/fields/ColorPicker/WithMode.d.ts

@@ -1,3 +1,4 @@
-/// <reference types="react" />
-declare const ColorPickerWithMode: import("react").FC<import("antd").ColorPickerProps & import("../../dataSourceForm/utils").WithModeProps>;
+import React from 'react';
+import { ColorPickerProps } from './type';
+declare const ColorPickerWithMode: React.FC<ColorPickerProps & import("../../dataSourceForm/utils").WithModeProps>;
 export default ColorPickerWithMode;

package/lib/components/dataSourceComponents/fields/ColorPicker/WithMode.js

@@ -26,14 +26,30 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/dataSourceComponents/fields/ColorPicker/WithMode.ts
+// src/components/dataSourceComponents/fields/ColorPicker/WithMode.tsx
 var WithMode_exports = {};
 __export(WithMode_exports, {
   default: () => WithMode_default
 });
 module.exports = __toCommonJS(WithMode_exports);
+var import_react = __toESM(require("react"));
 var import_antd = require("antd");
+var import_colors = require("@ant-design/colors");
 var import_ReadPretty = __toESM(require("./ReadPretty"));
 var import_utils = require("../../dataSourceForm/utils");
-var ColorPickerWithMode = (0, import_utils.withMode)(import_antd.ColorPicker, import_ReadPretty.default);
+var genPresets = (presets = import_colors.presetPalettes) => Object.entries(presets).map(([label, colors]) => ({
+  label,
+  colors
+}));
+var ColorPicker = (props) => {
+  const { token } = import_antd.theme.useToken();
+  const presets = genPresets({
+    primary: (0, import_colors.generate)(token.colorPrimary),
+    red: import_colors.red,
+    green: import_colors.green
+  });
+  const { renderMode, ...restProps } = props;
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.ColorPicker, { ...restProps, presets });
+};
+var ColorPickerWithMode = (0, import_utils.withMode)(ColorPicker, import_ReadPretty.default);
 var WithMode_default = ColorPickerWithMode;

package/lib/components/dataSourceComponents/fields/Input.Password/ReadPretty.d.ts

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

package/lib/components/dataSourceComponents/fields/Input.Password/ReadPretty.js

@@ -33,7 +33,12 @@ __export(ReadPretty_exports, {
 });
 module.exports = __toCommonJS(ReadPretty_exports);
 var import_react = __toESM(require("react"));
+var import_utils = require("@pisell/utils");
 var PasswordReadPretty = (props) => {
-  return /* @__PURE__ */ import_react.default.createElement("span", null, props.value);
+  var _a, _b;
+  if (props.value && (0, import_utils.isString)(props.value)) {
+    return /* @__PURE__ */ import_react.default.createElement("span", null, (_b = (_a = props.value) == null ? void 0 : _a.split) == null ? void 0 : _b.call(_a, "").map(() => "•"));
+  }
+  return /* @__PURE__ */ import_react.default.createElement("span", null, "••••••");
 };
 var ReadPretty_default = PasswordReadPretty;

package/lib/components/dataSourceComponents/fields/Input.Phone/ReadPretty.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { InputProps } from "./type";
-declare const InputReadPretty: (props: InputProps) => React.JSX.Element;
-export default InputReadPretty;
+import type { PhoneInputProps } from './WithMode';
+declare const ReadPretty: React.FC<Omit<PhoneInputProps, 'onChange'>>;
+export default ReadPretty;

package/lib/components/dataSourceComponents/fields/Input.Phone/ReadPretty.js

@@ -33,7 +33,18 @@ __export(ReadPretty_exports, {
 });
 module.exports = __toCommonJS(ReadPretty_exports);
 var import_react = __toESM(require("react"));
-var InputReadPretty = (props) => {
-  return /* @__PURE__ */ import_react.default.createElement("span", null, props.value);
+var import_libphonenumber_js = require("libphonenumber-js");
+var ReadPretty = ({ value }) => {
+  if (!value)
+    return null;
+  try {
+    const phoneNumber = (0, import_libphonenumber_js.parsePhoneNumberFromString)(value);
+    if (!phoneNumber)
+      return /* @__PURE__ */ import_react.default.createElement("span", null, value);
+    const formattedValue = `(${phoneNumber.formatInternational().split(" ")[0]}) ${phoneNumber.formatNational()}`;
+    return /* @__PURE__ */ import_react.default.createElement("span", null, formattedValue);
+  } catch (error) {
+    return /* @__PURE__ */ import_react.default.createElement("span", null, value);
+  }
 };
-var ReadPretty_default = InputReadPretty;
+var ReadPretty_default = ReadPretty;

package/lib/components/dataSourceComponents/fields/Input.Phone/WithMode.d.ts

@@ -1,4 +1,9 @@
 import React from 'react';
 import { InputProps } from 'antd';
-declare const PhoneWithMode: React.FC<InputProps & import("../../dataSourceForm/utils").WithModeProps>;
+export interface PhoneInputProps extends Omit<InputProps, 'value' | 'onChange'> {
+    value?: string;
+    onChange?: (value: string) => void;
+    isVerification?: boolean;
+}
+declare const PhoneWithMode: React.FC<PhoneInputProps & import("../../dataSourceForm/utils").WithModeProps>;
 export default PhoneWithMode;

package/lib/components/dataSourceComponents/fields/Input.Phone/WithMode.js

@@ -34,10 +34,105 @@ __export(WithMode_exports, {
 module.exports = __toCommonJS(WithMode_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
+var import_libphonenumber_js = require("libphonenumber-js");
+var import_useEngineContext = __toESM(require("../../../../hooks/useEngineContext"));
+var import_serve = require("./serve");
 var import_ReadPretty = __toESM(require("./ReadPretty"));
 var import_utils = require("../../dataSourceForm/utils");
-var Phone = (props) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_antd.Input, { ...props, type: "tel" });
+var { Option } = import_antd.Select;
+var translationOriginal = (val) => val.original;
+var PhoneInput = ({ value, onChange, isVerification, ...props }) => {
+  const { data: countries = [] } = (0, import_serve.useCountries)();
+  console.log(value, "valuevaluevalue");
+  const context = (0, import_useEngineContext.default)();
+  translationOriginal = context.appHelper.utils.translationOriginal || translationOriginal;
+  const parseExternalValue = (val) => {
+    if (!val)
+      return { countryCode: "AU", phoneNumber: "" };
+    const matchedPrefix = countries.find(
+      (country) => val.startsWith(country.prefix)
+    );
+    if (matchedPrefix) {
+      return {
+        countryCode: matchedPrefix.code,
+        phoneNumber: val.slice(matchedPrefix.prefix.length)
+      };
+    }
+    return {
+      countryCode: "AU",
+      phoneNumber: val.replace(/\D/g, "")
+    };
+  };
+  const [countryCode, setCountryCode] = (0, import_react.useState)(
+    () => parseExternalValue(value).countryCode
+  );
+  const [phoneNumber, setPhoneNumber] = (0, import_react.useState)(
+    () => parseExternalValue(value).phoneNumber
+  );
+  (0, import_react.useEffect)(() => {
+    const { countryCode: newCountryCode, phoneNumber: newPhoneNumber } = parseExternalValue(value);
+    setCountryCode(newCountryCode);
+    setPhoneNumber(newPhoneNumber);
+  }, [value, countries]);
+  const handleCountryChange = (value2) => {
+    setCountryCode(value2);
+  };
+  const handlePhoneNumberChange = (e) => {
+    const cleanNumber = e.target.value.replace(/\D/g, "");
+    setPhoneNumber(cleanNumber);
+  };
+  const concatenatedNumber = (0, import_react.useMemo)(() => {
+    const selectedCountry = countries.find(
+      (c) => c.code === countryCode
+    );
+    const prefix = (selectedCountry == null ? void 0 : selectedCountry.prefix) || "";
+    return `${prefix}${phoneNumber}`;
+  }, [countryCode, phoneNumber, countries]);
+  const handleBlur = () => {
+    onChange == null ? void 0 : onChange(concatenatedNumber);
+  };
+  const status = (0, import_react.useMemo)(() => {
+    var _a;
+    if (!phoneNumber || !isVerification) {
+      return void 0;
+    }
+    return (0, import_libphonenumber_js.isValidPhoneNumber)(concatenatedNumber) && ((_a = (0, import_libphonenumber_js.parsePhoneNumberFromString)(concatenatedNumber)) == null ? void 0 : _a.isValid()) ? void 0 : "error";
+  }, [concatenatedNumber, phoneNumber, isVerification]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Input,
+    {
+      ...props,
+      status,
+      addonBefore: /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Select,
+        {
+          value: countryCode,
+          onChange: handleCountryChange,
+          style: { width: "80px" },
+          onBlur: handleBlur,
+          popupMatchSelectWidth: false,
+          optionLabelProp: "label"
+        },
+        countries.map((country) => /* @__PURE__ */ import_react.default.createElement(
+          Option,
+          {
+            key: country.code,
+            value: country.code,
+            label: country.prefix
+          },
+          translationOriginal(country.name),
+          " (",
+          country.prefix,
+          ")"
+        ))
+      ),
+      type: "tel",
+      value: phoneNumber,
+      onChange: handlePhoneNumberChange,
+      onBlur: handleBlur,
+      style: { flex: 1 }
+    }
+  );
 };
-var PhoneWithMode = (0, import_utils.withMode)(Phone, import_ReadPretty.default);
+var PhoneWithMode = (0, import_utils.withMode)(PhoneInput, import_ReadPretty.default);
 var WithMode_default = PhoneWithMode;

package/lib/components/dataSourceComponents/fields/Input.Phone/serve.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 获取nocobase数据列表
+ */
+export declare const getCountryDataList: () => Promise<any>;
+export interface Country {
+    id: number;
+    name: {
+        en: string;
+        "zh-CN": string;
+        "zh-HK": string;
+        original: string;
+    };
+    code: string;
+    calling_code: string;
+    currency_code: string;
+    sort: number;
+    status: string;
+    created_at: string;
+    updated_at: string;
+    prefix: string;
+}
+export declare const useCountries: () => {
+    data: Country[];
+};

package/lib/components/dataSourceComponents/fields/Input.Phone/serve.js

@@ -0,0 +1,55 @@
+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/dataSourceComponents/fields/Input.Phone/serve.ts
+var serve_exports = {};
+__export(serve_exports, {
+  getCountryDataList: () => getCountryDataList,
+  useCountries: () => useCountries
+});
+module.exports = __toCommonJS(serve_exports);
+var import_ahooks = require("ahooks");
+var import_utils = require("../../../table/utils");
+var getCountryDataList = async () => {
+  const { data } = await import_utils.request.getRequest().get(`/country:list`, {}, {
+    isNocobase: true,
+    fullResult: true,
+    headers: {
+      "x-data-source": "pisell2"
+    }
+  });
+  return data.map((item) => ({
+    ...item,
+    prefix: `+${item.calling_code}`
+  }));
+};
+var useCountries = () => {
+  const { data } = (0, import_ahooks.useRequest)(getCountryDataList, {
+    cacheKey: "phone-countries",
+    staleTime: 1e3 * 60 * 5,
+    // 5分钟后数据过期
+    cacheTime: 1e3 * 60 * 60
+    // 1小时后清除缓存
+  });
+  return { data };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getCountryDataList,
+  useCountries
+});

package/lib/components/dataSourceComponents/fields/InputNumber/ReadPretty.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { InputNumberProps } from './type';
-declare const InputNumberReadPretty: (props: InputNumberProps) => React.JSX.Element;
-export default InputNumberReadPretty;
+declare const ReadPretty: React.FC<InputNumberProps>;
+export default ReadPretty;

package/lib/components/dataSourceComponents/fields/InputNumber/ReadPretty.js

@@ -33,8 +33,18 @@ __export(ReadPretty_exports, {
 });
 module.exports = __toCommonJS(ReadPretty_exports);
 var import_react = __toESM(require("react"));
-var InputNumberReadPretty = (props) => {
-  const { value, addonAfter } = props;
-  return /* @__PURE__ */ import_react.default.createElement("span", null, value, addonAfter);
+var import_utils = require("./utils");
+var ReadPretty = (props) => {
+  const { value, useThousandsSeparator, previewFormatter, precision = 0, addonAfter } = props;
+  if (!value && value !== 0) {
+    return /* @__PURE__ */ import_react.default.createElement("span", null, "-");
+  }
+  const formattedValue = (0, import_utils.formatNumberWithUnit)(Number(value), precision, previewFormatter);
+  if (useThousandsSeparator && (!previewFormatter || previewFormatter === "none")) {
+    const parts = formattedValue.split(".");
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    return /* @__PURE__ */ import_react.default.createElement("span", null, parts.join("."), addonAfter);
+  }
+  return /* @__PURE__ */ import_react.default.createElement("span", null, formattedValue, addonAfter);
 };
-var ReadPretty_default = InputNumberReadPretty;
+var ReadPretty_default = ReadPretty;

package/lib/components/dataSourceComponents/fields/InputNumber/WithMode.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const InputNumberWithMode: import("react").FC<any>;
+import React from 'react';
+declare const InputNumberWithMode: React.FC<any>;
 export default InputNumberWithMode;

package/lib/components/dataSourceComponents/fields/InputNumber/WithMode.js

@@ -26,17 +26,48 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/dataSourceComponents/fields/InputNumber/WithMode.ts
+// src/components/dataSourceComponents/fields/InputNumber/WithMode.tsx
 var WithMode_exports = {};
 __export(WithMode_exports, {
   default: () => WithMode_default
 });
 module.exports = __toCommonJS(WithMode_exports);
+var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_ReadPretty = __toESM(require("./ReadPretty"));
 var import_utils = require("../../dataSourceForm/utils");
-var InputNumberWithMode = (0, import_utils.withMode)(
-  import_antd.InputNumber,
-  import_ReadPretty.default
-);
+var InputNumber = (props) => {
+  const {
+    useThousandsSeparator,
+    formatter: propsFormatter,
+    parser: propsParser,
+    ...rest
+  } = props;
+  const formatter = (0, import_react.useCallback)(
+    (value, info) => {
+      if (!value)
+        return "";
+      if (useThousandsSeparator) {
+        const parts = value.toString().split(".");
+        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        return parts.join(".");
+      }
+      return propsFormatter ? propsFormatter(value, info) : value.toString();
+    },
+    [useThousandsSeparator, propsFormatter]
+  );
+  const parser = (0, import_react.useCallback)(
+    (value) => {
+      if (!value)
+        return null;
+      if (useThousandsSeparator) {
+        return value.replace(/,/g, "");
+      }
+      return propsParser ? propsParser(value) : value;
+    },
+    [useThousandsSeparator, propsParser]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.InputNumber, { ...rest, formatter, parser });
+};
+var InputNumberWithMode = (0, import_utils.withMode)(InputNumber, import_ReadPretty.default);
 var WithMode_default = InputNumberWithMode;

package/lib/components/dataSourceComponents/fields/InputNumber/type.d.ts

@@ -2,4 +2,6 @@ import { InputNumberProps as AntInputNumberProps } from "antd/es/input-number";
 import { ModeType } from "../../dataSourceForm/type";
 export interface InputNumberProps extends AntInputNumberProps {
     renderMode: ModeType;
+    useThousandsSeparator: boolean;
+    previewFormatter?: 'none' | 'thousand' | 'million' | 'billion';
 }

package/lib/components/dataSourceComponents/fields/InputNumber/utils.d.ts

@@ -0,0 +1 @@
+export declare const formatNumberWithUnit: (value: number, precision?: number, previewFormatter?: 'none' | 'thousand' | 'million' | 'billion') => string;

package/lib/components/dataSourceComponents/fields/InputNumber/utils.js

@@ -0,0 +1,63 @@
+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/dataSourceComponents/fields/InputNumber/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  formatNumberWithUnit: () => formatNumberWithUnit
+});
+module.exports = __toCommonJS(utils_exports);
+var import_locales = require("../../../../locales");
+var THOUSAND = 1e3;
+var MILLION = 1e6;
+var BILLION = 1e9;
+var getUnitText = (key) => {
+  const textKey = `pisell-number-format-${key}`;
+  return (0, import_locales.getText)(textKey);
+};
+var formatNumberWithUnit = (value, precision = 0, previewFormatter) => {
+  if (!value)
+    return "0";
+  const units = {
+    billion: {
+      value: BILLION,
+      getText: () => getUnitText("billion")
+    },
+    million: {
+      value: MILLION,
+      getText: () => getUnitText("million")
+    },
+    thousand: {
+      value: THOUSAND,
+      getText: () => getUnitText("thousand")
+    }
+  };
+  if (!previewFormatter || previewFormatter === "none") {
+    return value.toFixed(precision);
+  }
+  const unit = units[previewFormatter];
+  if (!unit)
+    return value.toFixed(precision);
+  const convertedValue = value / unit.value;
+  const suffix = unit.getText();
+  return `${convertedValue.toFixed(precision)}${suffix}`;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  formatNumberWithUnit
+});