form-driver 0.4.17 → 0.4.18

package/es/m3.js

@@ -19224,7 +19224,7 @@ var ASpecInputBox = /*#__PURE__*/function (_BaseViewer) {
             children: [item.country, " +", item.value]
           }, item.countryCode);
         })
-      }), jsx(Input, {
+      }), jsx(InputNumber, {
         style: {
           width: "calc(100% - " + selectWidth + "px)"
         },
@@ -19232,9 +19232,10 @@ var ASpecInputBox = /*#__PURE__*/function (_BaseViewer) {
         bordered: !this.props.hideBorder,
         disabled: this.props.disable,
         defaultValue: phoneValue.phone,
-        onChange: function onChange(e) {
+        min: "0",
+        onChange: function onChange(value) {
           var updated = _objectSpread$l(_objectSpread$l({}, _this.getPhoneValue()), {}, {
-            phone: e.target.value
+            phone: value
           });
 
           _this.changeValueEx(updated, false, false);

package/lib/m3.js

@@ -19248,7 +19248,7 @@ var ASpecInputBox = /*#__PURE__*/function (_BaseViewer) {
             children: [item.country, " +", item.value]
           }, item.countryCode);
         })
-      }), jsxRuntime.jsx(antd.Input, {
+      }), jsxRuntime.jsx(antd.InputNumber, {
         style: {
           width: "calc(100% - " + selectWidth + "px)"
         },
@@ -19256,9 +19256,10 @@ var ASpecInputBox = /*#__PURE__*/function (_BaseViewer) {
         bordered: !this.props.hideBorder,
         disabled: this.props.disable,
         defaultValue: phoneValue.phone,
-        onChange: function onChange(e) {
+        min: "0",
+        onChange: function onChange(value) {
           var updated = _objectSpread$l(_objectSpread$l({}, _this.getPhoneValue()), {}, {
-            phone: e.target.value
+            phone: value
           });
 
           _this.changeValueEx(updated, false, false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-driver",
-  "version": "0.4.17",
+  "version": "0.4.18",
   "description": "An efficient framework for creating forms.",
   "license": "MIT",
   "authors": [

package/src/ui/editor/basic/ASpecInputBox.tsx

@@ -1,18 +1,17 @@
 import React from "react";
-import _ from "lodash"
-import { Input, Select } from "antd";
-import { BaseViewer } from '../../BaseViewer';
-import { AREA_CODE_LIST } from '../../../data/areaCodeData';
+import _ from "lodash";
+import { Input, InputNumber, Select } from "antd";
+import { BaseViewer } from "../../BaseViewer";
+import { AREA_CODE_LIST } from "../../../data/areaCodeData";
 
 /**
  * 手机号/邮箱等输入框
  * cnPhone/tel/email
- * 
+ *
  * 当 type 为 tel 或 cnPhone 时，渲染为区号选择器 + 手机号输入框的复合组件
  * 数据格式为 {areaCode: "86", phone: "13800138000"}
  */
 export class ASpecInputBox extends BaseViewer {
-
   /**
    * 判断当前 schema 类型是否为手机号类型
    */
@@ -42,54 +41,65 @@ export class ASpecInputBox extends BaseViewer {
     const phoneValue = this.getPhoneValue();
     const selectWidth = 120;
 
-    return <Input.Group compact key={this.props.path}>
-      <Select
-        style={{ width: selectWidth }}
-        value={phoneValue.areaCode}
-        showSearch
-        optionLabelProp="shortLabel"
-        filterOption={(input, option) => {
-          const searchText = input.toLowerCase();
-          // 支持按区号、国家中文名、英文名搜索
-          const country = ((option as any)?.["data-country"] as string || "").toLowerCase();
-          const englishName = ((option as any)?.["data-english"] as string || "").toLowerCase();
-          const value = (option?.value as string || "");
-          return value.includes(searchText) || country.includes(searchText) || englishName.includes(searchText);
-        }}
-        disabled={this.props.disable}
-        onChange={(newAreaCode: string) => {
-          const updated = { ...this.getPhoneValue(), areaCode: newAreaCode };
-          this.changeValueEx(updated, false, true);
-        }}
-      >
-        {AREA_CODE_LIST.map(item => (
-          <Select.Option
-            key={item.countryCode}
-            value={item.value}
-            shortLabel={`+${item.value}`}
-            data-country={item.country}
-            data-english={item.englishName}
-          >
-            {item.country} +{item.value}
-          </Select.Option>
-        ))}
-      </Select>
-      <Input
-        style={{ width: `calc(100% - ${selectWidth}px)` }}
-        placeholder={super.getPlaceholder()}
-        bordered={!this.props.hideBorder}
-        disabled={this.props.disable}
-        defaultValue={phoneValue.phone}
-        key={this.props.path + "/phone/" + this.state.ctrlVersion}
-        onChange={(e) => {
-          const updated = { ...this.getPhoneValue(), phone: e.target.value };
-          this.changeValueEx(updated, false, false);
-        }}
-        onBlur={() => {
-          this.changeValueEx(this.getPhoneValue(), false, true);
-        }}
-      />
-    </Input.Group>;
+    return (
+      <Input.Group compact key={this.props.path}>
+        <Select
+          style={{ width: selectWidth }}
+          value={phoneValue.areaCode}
+          showSearch
+          optionLabelProp="shortLabel"
+          filterOption={(input, option) => {
+            const searchText = input.toLowerCase();
+            // 支持按区号、国家中文名、英文名搜索
+            const country = (
+              ((option as any)?.["data-country"] as string) || ""
+            ).toLowerCase();
+            const englishName = (
+              ((option as any)?.["data-english"] as string) || ""
+            ).toLowerCase();
+            const value = (option?.value as string) || "";
+            return (
+              value.includes(searchText) ||
+              country.includes(searchText) ||
+              englishName.includes(searchText)
+            );
+          }}
+          disabled={this.props.disable}
+          onChange={(newAreaCode: string) => {
+            const updated = { ...this.getPhoneValue(), areaCode: newAreaCode };
+            this.changeValueEx(updated, false, true);
+          }}
+        >
+          {AREA_CODE_LIST.map((item) => (
+            <Select.Option
+              key={item.countryCode}
+              value={item.value}
+              shortLabel={`+${item.value}`}
+              data-country={item.country}
+              data-english={item.englishName}
+            >
+              {item.country} +{item.value}
+            </Select.Option>
+          ))}
+        </Select>
+        <InputNumber
+          style={{ width: `calc(100% - ${selectWidth}px)` }}
+          placeholder={super.getPlaceholder()}
+          bordered={!this.props.hideBorder}
+          disabled={this.props.disable}
+          defaultValue={phoneValue.phone}
+          min={"0"}
+          key={this.props.path + "/phone/" + this.state.ctrlVersion}
+          onChange={(value) => {
+            const updated = { ...this.getPhoneValue(), phone: value };
+            this.changeValueEx(updated, false, false);
+          }}
+          onBlur={() => {
+            this.changeValueEx(this.getPhoneValue(), false, true);
+          }}
+        />
+      </Input.Group>
+    );
   }
 
   element() {
@@ -100,20 +110,21 @@ export class ASpecInputBox extends BaseViewer {
 
     // 其他类型（如 email）：保持原有纯 Input 行为
     const p = this.props.schema.props ?? {};
-    const deepCloneP = _.cloneDeep(p)
-    const selfOnChange = p.onChange
-    delete deepCloneP.onChange
-    
-    return <Input
-      {...super.antProp()}
-      defaultValue={super.getValue()}
-      onBlur={() => this.changeValueEx(super.getValue(), false, true)}
-      onChange={(v) => {
-        this.changeValueEx(v.target.value, false, false);
-        selfOnChange && selfOnChange(v)
-      }}
-      {...deepCloneP}
-    />;
+    const deepCloneP = _.cloneDeep(p);
+    const selfOnChange = p.onChange;
+    delete deepCloneP.onChange;
+
+    return (
+      <Input
+        {...super.antProp()}
+        defaultValue={super.getValue()}
+        onBlur={() => this.changeValueEx(super.getValue(), false, true)}
+        onChange={(v) => {
+          this.changeValueEx(v.target.value, false, false);
+          selfOnChange && selfOnChange(v);
+        }}
+        {...deepCloneP}
+      />
+    );
   }
 }
-

package/types/ui/editor/basic/ASpecInputBox.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseViewer } from '../../BaseViewer';
+import { BaseViewer } from "../../BaseViewer";
 /**
  * 手机号/邮箱等输入框
  * cnPhone/tel/email