lu-lowcode-package-form 0.9.18 → 0.9.19

package/dist/style.css

@@ -1,4 +1,4 @@
-*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.fabsolute{position:absolute}.frelative{position:relative}.fleft-0{left:0}.ftop-0{top:0}.fz-10{z-index:10}.fmt-2{margin-top:.5rem}.fflex{display:flex}.finline-flex{display:inline-flex}.fhidden{display:none}.fh-11{height:2.75rem}.fh-12{height:3rem}.fh-24{height:6rem}.fh-8{height:2rem}.fh-full{height:100%}.fmax-h-full{max-height:100%}.fmin-h-20{min-height:5rem}.fmin-h-5{min-height:1.25rem}.fw-16{width:4rem}.fw-24{width:6rem}.fw-\[960px\]{width:960px}.fw-full{width:100%}.fmin-w-36{min-width:9rem}.fmin-w-full{min-width:100%}.fmax-w-full{max-width:100%}.fflex-1{flex:1 1 0%}.fcursor-pointer{cursor:pointer}.fflex-col{flex-direction:column}.fflex-wrap{flex-wrap:wrap}.fitems-center{align-items:center}.fitems-stretch{align-items:stretch}.fjustify-center{justify-content:center}.fjustify-between{justify-content:space-between}.fgap-1{gap:.25rem}.fgap-2{gap:.5rem}.fgap-3{gap:.75rem}.foverflow-hidden{overflow:hidden}.foverflow-x-auto{overflow-x:auto}.frounded{border-radius:.25rem}.fborder{border-width:1px}.fborder-b{border-bottom-width:1px}.fborder-l-4{border-left-width:4px}.fborder-dashed{border-style:dashed}.fborder-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.fborder-red-500{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity))}.fborder-slate-300{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity))}.fbg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.fbg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.fbg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.fbg-slate-50{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.fbg-transparent{background-color:transparent}.fbg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.fbg-opacity-50{--tw-bg-opacity: .5}.fobject-contain{object-fit:contain}.fp-2{padding:.5rem}.fp-4{padding:1rem}.fp-6{padding:1.5rem}.fpx-2{padding-left:.5rem;padding-right:.5rem}.fpb-10{padding-bottom:2.5rem}.fpl-2{padding-left:.5rem}.ftext-lg{font-size:1.125rem;line-height:1.75rem}.ftext-sm{font-size:.875rem;line-height:1.25rem}.ftext-xs{font-size:.75rem;line-height:1rem}.ffont-medium{font-weight:500}.ffont-semibold{font-weight:600}.ftext-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.ftext-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.ftext-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.hover\:fborder-\[\#3e92f8\]:hover{--tw-border-opacity: 1;border-color:rgb(62 146 248 / var(--tw-border-opacity))}.hover\:ftext-\[\#3e92f8\]:hover{--tw-text-opacity: 1;color:rgb(62 146 248 / var(--tw-text-opacity))}.hover\:ftext-gray-200:hover{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity))}.fgroup:hover .group-hover\:fflex{display:flex}.fgroup:hover .group-hover\:fbg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}/*!
+*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.fabsolute{position:absolute}.frelative{position:relative}.fleft-0{left:0}.ftop-0{top:0}.fz-10{z-index:10}.fmt-2{margin-top:.5rem}.fflex{display:flex}.finline-flex{display:inline-flex}.fhidden{display:none}.fh-11{height:2.75rem}.fh-12{height:3rem}.fh-24{height:6rem}.fh-5{height:1.25rem}.fh-8{height:2rem}.fh-full{height:100%}.fmax-h-full{max-height:100%}.fmin-h-20{min-height:5rem}.fmin-h-5{min-height:1.25rem}.fw-16{width:4rem}.fw-24{width:6rem}.fw-5{width:1.25rem}.fw-\[960px\]{width:960px}.fw-full{width:100%}.fmin-w-36{min-width:9rem}.fmin-w-full{min-width:100%}.fmax-w-full{max-width:100%}.fflex-1{flex:1 1 0%}.fcursor-pointer{cursor:pointer}.fflex-col{flex-direction:column}.fflex-wrap{flex-wrap:wrap}.fitems-center{align-items:center}.fitems-stretch{align-items:stretch}.fjustify-center{justify-content:center}.fjustify-between{justify-content:space-between}.fgap-1{gap:.25rem}.fgap-2{gap:.5rem}.fgap-3{gap:.75rem}.fgap-x-1{column-gap:.25rem}.foverflow-hidden{overflow:hidden}.foverflow-x-auto{overflow-x:auto}.frounded{border-radius:.25rem}.fborder{border-width:1px}.fborder-b{border-bottom-width:1px}.fborder-l-4{border-left-width:4px}.fborder-dashed{border-style:dashed}.fborder-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.fborder-red-500{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity))}.fborder-slate-300{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity))}.fbg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.fbg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.fbg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.fbg-slate-50{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.fbg-transparent{background-color:transparent}.fbg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.fbg-opacity-50{--tw-bg-opacity: .5}.fobject-contain{object-fit:contain}.fp-2{padding:.5rem}.fp-4{padding:1rem}.fp-6{padding:1.5rem}.fpx-2{padding-left:.5rem;padding-right:.5rem}.fpb-10{padding-bottom:2.5rem}.fpl-2{padding-left:.5rem}.ftext-lg{font-size:1.125rem;line-height:1.75rem}.ftext-sm{font-size:.875rem;line-height:1.25rem}.ftext-xs{font-size:.75rem;line-height:1rem}.ffont-medium{font-weight:500}.ffont-semibold{font-weight:600}.ftext-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity))}.ftext-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.ftext-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.ftext-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.hover\:fborder-\[\#3e92f8\]:hover{--tw-border-opacity: 1;border-color:rgb(62 146 248 / var(--tw-border-opacity))}.hover\:ftext-\[\#3e92f8\]:hover{--tw-text-opacity: 1;color:rgb(62 146 248 / var(--tw-text-opacity))}.hover\:ftext-gray-200:hover{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity))}.fgroup:hover .group-hover\:fflex{display:flex}.fgroup:hover .group-hover\:fbg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}/*!
 * Quill Editor v1.3.7
 * https://quilljs.com/
 * Copyright (c) 2014, Jason Chen

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lu-lowcode-package-form",
-  "version": "0.9.18",
+  "version": "0.9.19",
   "dependencies": {
     "@ant-design/icons": "^4.8.1",
     "@testing-library/jest-dom": "^5.17.0",

package/src/App.jsx

@@ -60,7 +60,7 @@ function App() {
     console.log("formData", JSON.stringify(formData));
   }
   const setFormFields = () => {
-    formRef?.current?.formRef?.setFieldsValue({ "table": [{ "product_price1": "12", "product_num1": "123", "product_sum1": "1476", "node_oclxmzswzti": "", "select2": "" }, { "product_price1": "123", "product_num1": "213", "product_sum1": "26199", "node_oclxmzswzti": "", "select2": "" }], "product_price": "213", "product_num": "21", "product_sum": "4473", "switch": false })
+    formRef?.current?.formRef?.setFieldsValue({"table":[{"product_price1":"12","product_num1":"123","product_sum1":"1476","node_oclxmzswzti":"","select2":""},{"product_price1":"123","product_num1":"213","product_sum1":"26199","node_oclxmzswzti":"","select2":""}],"product_total_price":"0.00","product_price":"213","product_num":"21","product_num_range":[1,22],"product_sum":"4473","switch":false})
   }
   const handleCols = () => {
     setCols(cols - 1)
@@ -161,6 +161,7 @@ function App() {
           <Field.SearchSelect label="搜组件" option_search="username" option_label="username" setValue={() => { }} option_value="id"></Field.SearchSelect>
           <Field.Input label="商品价格" __id="product_price" />
           <Field.Input label="商品数量" __id="product_num" />
+          <Field.NumberRange label="数量范围" __id="product_num_range" />
           <Field.Input label="商品总价" __id="product_sum"
             withIds={["product_price", "product_num"]}
             withFill={{

package/src/components/field/input/index.jsx

@@ -1,7 +1,8 @@
 import { Input as OriginalInput } from 'antd';
 import { InputNumber } from 'antd';
 import { BaseWrapper } from "../base.jsx"
-import React from 'react'; 
+import React, { useEffect } from 'react';
+import _ from 'lodash';
 const {
   TextArea: OriginalTextArea,
   Password: OriginalPassword,
@@ -10,7 +11,7 @@ const {
 
 
 
-const Input = (props) =>{
+const Input = (props) => {
   return (
     <BaseWrapper {...props}>
       <OriginalInput {...props} />
@@ -18,16 +19,16 @@ const Input = (props) =>{
   );
 }
 
-const CodeMachine = ({value,...props}) =>{
-  value = value|| "系统自动生成"
+const CodeMachine = ({ value, ...props }) => {
+  value = value || "系统自动生成"
   return (
     <BaseWrapper {...props}>
-      <OriginalInput {...props} disabled  value={value}  />
+      <OriginalInput {...props} disabled value={value} />
     </BaseWrapper>
   )
 }
 
-const TextArea = (props) =>{
+const TextArea = (props) => {
 
   return (
     <BaseWrapper {...props}>
@@ -36,14 +37,14 @@ const TextArea = (props) =>{
   );
 }
 
-const Password = (props) =>{
+const Password = (props) => {
   return (
     <BaseWrapper {...props}>
       <OriginalPassword {...props} />
     </BaseWrapper>
   );
 }
-const Search = (props) =>{
+const Search = (props) => {
   return (
     <BaseWrapper {...props}>
       <OriginalSearch {...props} />
@@ -51,11 +52,35 @@ const Search = (props) =>{
   );
 }
 
-const Number = (props) =>{
+const NumberRange = ({ value, onChange, ...props }) => {
+  const [arrayValue, setArrayValue] = React.useState(["",""])
+  useEffect(()=>{
+    if (Array.isArray(value) && value.length === 2 && !_.isEqual(value, arrayValue))  {
+      setArrayValue(value)
+    }
+  },[value])
+  
   return (
     <BaseWrapper {...props}>
-      <InputNumber {...props} style={{width: '100%'}} />
+      <div className='fw-full fflex fitems-center fgap-x-1'>
+        <div className='flex-1'><InputNumber style={{ width: '100%' }} value={arrayValue[0]} onChange={begin=>{
+          onChange([begin, arrayValue[1]])
+        }} /></div>
+        <svg t="1721266030064" className='ftext-gray-300 fw-5 fh-5'
+          style={{ fill: "currentColor" }} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6844"><path d="M819.413333 633.6c0.341333 0 0.64 0 0.938667-0.085333 0.384 0 0.682667-0.128 1.066667-0.128l0.725333-0.085334c0.426667-0.085333 0.768-0.085333 1.109333-0.213333l0.597334-0.085333a16.426667 16.426667 0 0 0 1.066666-0.298667l0.597334-0.085333 1.109333-0.298667c0.213333-0.128 0.426667-0.128 0.597333-0.213333l1.024-0.298667a1.834667 1.834667 0 0 1 0.682667-0.213333l0.896-0.298667 0.810667-0.298667 0.810666-0.298666c0.298667-0.085333 0.597333-0.298667 0.853334-0.426667l0.725333-0.256 0.896-0.512 0.597333-0.298667 1.024-0.597333 0.512-0.298667 0.981334-0.597333 0.512-0.298667a5.504 5.504 0 0 0 0.853333-0.725333 2.176 2.176 0 0 0 0.512-0.426667 2.688 2.688 0 0 0 0.853333-0.682666l0.682667-0.597334c0.170667-0.170667 0.384-0.384 0.597333-0.469333a29.482667 29.482667 0 0 0 2.474667-2.517333c0.213333-0.213333 0.426667-0.426667 0.512-0.597334l0.597333-0.682666 0.682667-0.853334 0.426667-0.426666 0.682666-0.938667 0.298667-0.512 0.597333-0.981333 0.298667-0.512 0.597333-0.981334 0.298667-0.597333 0.512-0.896 0.298667-0.597333 0.426666-0.938667 0.298667-0.768 0.298667-0.810667 0.298666-0.896a1.834667 1.834667 0 0 0 0.170667-0.725333l0.298667-0.981333c0.128-0.213333 0.128-0.426667 0.213333-0.597334l0.298667-1.109333 0.085333-0.597333a5.12 5.12 0 0 0 0.213333-1.109334c0-0.170667 0.128-0.384 0.128-0.597333l0.170667-1.109333 0.128-0.682667 0.085333-1.109333c0-0.298667 0-0.597333 0.085334-0.853334 0-0.341333 0-0.64 0.128-0.853333a21.632 21.632 0 0 0 0-3.584c0-0.298667 0-0.597333-0.128-0.810667 0-0.298667 0-0.597333-0.085334-0.853333l-0.085333-1.152-0.128-0.682667-0.170667-1.109333-0.128-0.597333c-0.085333-0.426667-0.213333-0.810667-0.213333-1.109334l-0.085333-0.597333-0.298667-1.066667c-0.085333-0.213333-0.085333-0.426667-0.213333-0.597333l-0.298667-1.024a1.834667 1.834667 0 0 1-0.170667-0.682667l-0.298666-0.896-0.298667-0.853333c-0.128-0.256-0.213333-0.426667-0.298667-0.768l-0.426666-0.896-0.298667-0.597333-0.512-0.896-0.298667-0.597334-0.597333-1.024-0.298667-0.469333-0.597333-1.024-0.298667-0.512a5.504 5.504 0 0 0-0.682666-0.853333 2.176 2.176 0 0 0-0.426667-0.512 2.688 2.688 0 0 0-0.682667-0.853334c-0.213333-0.170667-0.426667-0.426667-0.597333-0.682666l-0.597333-0.597334c-0.426667-0.384-0.810667-0.853333-1.194667-1.28l-177.408-177.706666a35.925333 35.925333 0 0 0-50.901333 0 35.925333 35.925333 0 0 0 0 50.901333l116.010666 116.010667H185.813333a35.968 35.968 0 1 0 0 72.021333H818.645333c0.298667 0 0.597333-0.128 0.768-0.128z"  p-id="6845"></path></svg>
+        <div className='flex-1'><InputNumber value={arrayValue[1]} onChange={end=>{
+          onChange([arrayValue[0], end])
+        }} style={{ width: '100%' }} /></div>
+      </div>
+    </BaseWrapper>
+  )
+}
+
+const Number = (props) => {
+  return (
+    <BaseWrapper {...props}>
+      <InputNumber {...props} style={{ width: '100%' }} />
     </BaseWrapper>
   );
 }
-export {Input,TextArea,Password,Search,CodeMachine,Number};
+export { Input, TextArea, Password, Search, CodeMachine, Number, NumberRange };

package/src/components/form-container/index.jsx

@@ -32,7 +32,7 @@ function batchElements(elements, groupSize) {
             }
         }
     }
-
+   
     if (tempArray.length > 0) {
         fillWithReactElement(groupSize, tempArray);
         groupedElements.push(tempArray);

package/src/components/index.jsx

@@ -1,4 +1,4 @@
-import { Input, TextArea, Password, Search ,CodeMachine, Number} from './field/input/index.jsx'
+import { Input, TextArea, Password, Search ,CodeMachine, Number, NumberRange} from './field/input/index.jsx'
 import '../App.css';
 import { TreeSelect, Select, WithSingleSelect,WithMultipleSelect, SingleSelect, MultipleSelect, SearchSelect } from './field/select/index.jsx'
 import Custom from './field/custom/index.jsx'
@@ -15,6 +15,7 @@ const Field = {
     Password,
     Search,
     Number,
+    NumberRange,
     TreeSelect,
     Select,
     SearchSelect,