lu-lowcode-package-form 0.9.16 → 0.9.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/index.cjs.js +170 -158
  2. package/dist/index.es.js +9828 -8642
  3. package/dist/style.css +1 -1
  4. package/package.json +1 -1
  5. package/src/App.jsx +16 -12
  6. package/src/components/field/base.jsx +17 -4
  7. package/src/components/field/checkbox/index.jsx +2 -16
  8. package/src/components/field/input/index.jsx +44 -9
  9. package/src/components/field/table/index.jsx +1 -1
  10. package/src/components/field/upload/upload-file.jsx +1 -2
  11. package/src/components/field/upload/upload-image.jsx +1 -4
  12. package/src/components/form-container/index.jsx +42 -15
  13. package/src/components/index.jsx +10 -1
  14. package/src/utils/formula.js +2 -1
package/dist/style.css CHANGED
@@ -1,4 +1,4 @@
1
- *,: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-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))}/*!
1
+ *,: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))}/*!
2
2
  * Quill Editor v1.3.7
3
3
  * https://quilljs.com/
4
4
  * Copyright (c) 2014, Jason Chen
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lu-lowcode-package-form",
3
- "version": "0.9.16",
3
+ "version": "0.9.19",
4
4
  "dependencies": {
5
5
  "@ant-design/icons": "^4.8.1",
6
6
  "@testing-library/jest-dom": "^5.17.0",
package/src/App.jsx CHANGED
@@ -60,7 +60,7 @@ function App() {
60
60
  console.log("formData", JSON.stringify(formData));
61
61
  }
62
62
  const setFormFields = () => {
63
- 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 })
63
+ 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})
64
64
  }
65
65
  const handleCols = () => {
66
66
  setCols(cols - 1)
@@ -82,7 +82,7 @@ function App() {
82
82
 
83
83
 
84
84
  <FormContainerWrapper cols={cols} className="" ref={formRef} >
85
- <Layout.FormRow _componentName="Layout.FormRow" layout={'1'}>
85
+ <Layout.FormRow layout={'1'}>
86
86
  <Field.Table label="子表格" __id="table" >
87
87
  <Field.Input label="商品价格" __id="product_price1" />
88
88
  <Field.Input label="商品数量" __id="product_num1" />
@@ -145,6 +145,9 @@ function App() {
145
145
  "content": "当前表单.标签.小计"
146
146
  }
147
147
  },
148
+ {
149
+ "insert": ".reduce((acc, curr) => parseFloat(acc||0) + parseFloat(curr||0), 0).toFixed(2)"
150
+ },
148
151
  {
149
152
  "insert": "\n"
150
153
  }
@@ -155,9 +158,10 @@ function App() {
155
158
  ]
156
159
  }}
157
160
  />
158
- <Field.SearchSelect label="搜组件" option_search="username" option_label="username" setValue={()=>{}} option_value="id"></Field.SearchSelect>
161
+ <Field.SearchSelect label="搜组件" option_search="username" option_label="username" setValue={() => { }} option_value="id"></Field.SearchSelect>
159
162
  <Field.Input label="商品价格" __id="product_price" />
160
163
  <Field.Input label="商品数量" __id="product_num" />
164
+ <Field.NumberRange label="数量范围" __id="product_num_range" />
161
165
  <Field.Input label="商品总价" __id="product_sum"
162
166
  withIds={["product_price", "product_num"]}
163
167
  withFill={{
@@ -211,25 +215,25 @@ function App() {
211
215
  <Field.DatePicker label="日期时间" prompt="" datetype="datetime" value={'2022-10-22'} __id="datetime3" />
212
216
  <Field.DatePicker label="年" prompt="" datetype="year" value={'2022-10-22'} __id="datetime4" />
213
217
  <Field.Input label="角色名称" __id="name" />
214
- <Layout.FormRow _componentName="Layout.FormRow" layout={'1,1,1'}>
218
+ <Layout.FormRow layout={'1,1,1'}>
215
219
  <Field.Input label="角色名称布局" __id="name1" />
216
220
  <Field.Input label="角色名称布局2" __id="name2" />
217
221
  <Field.Input label="角色名称布局3" __id="name3" />
218
222
  </Layout.FormRow>
219
223
  <Field.CheckboxTree label="角色权限" __id="permissions" addRoot={false} treeData={treeData} />
220
- <Layout.FormGroupTitle _componentName="Layout.FormGroupTitle" title={"关联信息"} />
224
+ <Layout.FormGroupTitle title={"关联信息"} />
221
225
  <Field.WithSingleSelect label="测试关联单选" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} __id="remark11" />
222
226
  <Field.WithMultipleSelect label="测试关联多选" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} __id="remark12" />
223
- <Layout.FormRow _componentName="Layout.FormRow"> <Field.TextArea label="备注" __id="remark" /></Layout.FormRow>
227
+ <Layout.FormRow > <Field.TextArea label="备注" __id="remark" /></Layout.FormRow>
224
228
 
225
- <Layout.FormRow _componentName="Layout.FormRow" layout={'1'}>
226
- <Field.RadioGroup _componentName="Field.RadioGroup" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} label="单选框" __id="radio" ></Field.RadioGroup>
229
+ <Layout.FormRow layout={'1'}>
230
+ <Field.RadioGroup options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} label="单选框" __id="radio" ></Field.RadioGroup>
227
231
  </Layout.FormRow>
228
- <Layout.FormRow _componentName="Layout.FormRow" layout={'1'}>
229
- <Field.CheckboxGroup _componentName="Field.CheckboxGroup" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} label="多选框" __id="CheckboxGroup" ></Field.CheckboxGroup>
232
+ <Layout.FormRow layout={'1'}>
233
+ <Field.CheckboxGroup options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} label="多选框" __id="CheckboxGroup" ></Field.CheckboxGroup>
230
234
  </Layout.FormRow>
231
- <Field.UploadFile _componentName="Field.UploadFile" label="上传文件" __id="UploadFile" ></Field.UploadFile>
232
- <Field.UploadImage _componentName="Field.UploadImage" label="上传图片" __id="UploadImage" ></Field.UploadImage>
235
+ <Field.UploadFile label="上传文件" __id="UploadFile" ></Field.UploadFile>
236
+ <Field.UploadImage label="上传图片" __id="UploadImage" ></Field.UploadImage>
233
237
 
234
238
  </FormContainerWrapper>
235
239
  <div class="fgroup">11111
package/src/components/field/base.jsx CHANGED
@@ -1,3 +1,14 @@
1
+ import { useEffect, useState } from "react";
2
+
3
+ const FieldLable = ({value,onChange})=>{
4
+ const [text, setText] = useState("");
5
+ useEffect(() => {
6
+ setText(value);
7
+ console.log("value changed", value)
8
+ }, [value]);
9
+ return <>{text}</>
10
+ }
11
+
1
12
  export const BaseWrapper = function BaseWrapper({
2
13
  label,
3
14
  children,
@@ -10,9 +21,10 @@ export const BaseWrapper = function BaseWrapper({
10
21
  if (!addWrapper) return children;
11
22
  const formWarpper = (
12
23
  <div className="frelative">
13
- {label && <div className='fh-8 ftext-sm fflex fjustify-between fitems-center'>{label}</div>}
14
- <div className="fw-full fflex fitems-stretch">
15
- {children}
24
+ {label && <div className='fh-8 ftext-gray-500 ftext-sm fflex fjustify-between fitems-center'>{label}</div>}
25
+ <div className="fw-full fflex fitems-stretch ftext-gray-900">
26
+ {/* <FieldLable value={otherProps?.value} /> */}
27
+ {children}
16
28
  </div>
17
29
  {!subTable && <div className="ftext-xs ftext-gray-500 fmin-h-5 fflex fitems-center">{prompt}</div>}
18
30
  </div>
@@ -22,7 +34,8 @@ export const BaseWrapper = function BaseWrapper({
22
34
  <div className="frelative fw-full">
23
35
  {label && subTableIndex === 0 && <div className='fh-12 ffont-semibold fbg-gray-100 ftext-sm fflex fjustify-between fitems-center fpx-2 fborder-b'>{label}</div>}
24
36
  <div className="fw-full fflex fitems-stretch fp-2 ">
25
- {children}
37
+ {/* <FieldLable value={otherProps?.value} /> */}
38
+ {children}
26
39
  </div>
27
40
  </div>
28
41
  )
package/src/components/field/checkbox/index.jsx CHANGED
@@ -11,24 +11,10 @@ export const Checkbox = (props) => {
11
11
  );
12
12
  }
13
13
 
14
- export const CheckboxGroup = ({value, onChange,...props}) => {
15
- const [nValue, setNValue] = useState([])
16
-
17
- useEffect(() => {
18
- if (typeof value === "string") {
19
- try {
20
- value = JSON.parse(value)
21
- onChange(value)
22
- } catch (error) {
23
-
24
- }
25
- }
26
-
27
- setNValue(value)
28
- }, [value])
14
+ export const CheckboxGroup = (props) => {
29
15
  return (
30
16
  <BaseWrapper {...props}>
31
- <OriginalCheckbox.Group {...props} value={nValue} />
17
+ <OriginalCheckbox.Group {...props} />
32
18
  </BaseWrapper>
33
19
  );
34
20
  }
package/src/components/field/input/index.jsx CHANGED
@@ -1,13 +1,17 @@
1
1
  import { Input as OriginalInput } from 'antd';
2
+ import { InputNumber } from 'antd';
2
3
  import { BaseWrapper } from "../base.jsx"
3
- import React from 'react';
4
+ import React, { useEffect } from 'react';
5
+ import _ from 'lodash';
4
6
  const {
5
7
  TextArea: OriginalTextArea,
6
8
  Password: OriginalPassword,
7
9
  Search: OriginalSearch,
8
10
  } = OriginalInput;
9
11
 
10
- const Input = (props) =>{
12
+
13
+
14
+ const Input = (props) => {
11
15
  return (
12
16
  <BaseWrapper {...props}>
13
17
  <OriginalInput {...props} />
@@ -15,16 +19,16 @@ const Input = (props) =>{
15
19
  );
16
20
  }
17
21
 
18
- const CodeMachine = ({value,...props}) =>{
19
- value = value|| "系统自动生成"
22
+ const CodeMachine = ({ value, ...props }) => {
23
+ value = value || "系统自动生成"
20
24
  return (
21
25
  <BaseWrapper {...props}>
22
- <OriginalInput {...props} disabled value={value} />
26
+ <OriginalInput {...props} disabled value={value} />
23
27
  </BaseWrapper>
24
28
  )
25
29
  }
26
30
 
27
- const TextArea = (props) =>{
31
+ const TextArea = (props) => {
28
32
 
29
33
  return (
30
34
  <BaseWrapper {...props}>
@@ -33,14 +37,14 @@ const TextArea = (props) =>{
33
37
  );
34
38
  }
35
39
 
36
- const Password = (props) =>{
40
+ const Password = (props) => {
37
41
  return (
38
42
  <BaseWrapper {...props}>
39
43
  <OriginalPassword {...props} />
40
44
  </BaseWrapper>
41
45
  );
42
46
  }
43
- const Search = (props) =>{
47
+ const Search = (props) => {
44
48
  return (
45
49
  <BaseWrapper {...props}>
46
50
  <OriginalSearch {...props} />
@@ -48,4 +52,35 @@ const Search = (props) =>{
48
52
  );
49
53
  }
50
54
 
51
- export {Input,TextArea,Password,Search,CodeMachine};
55
+ const NumberRange = ({ value, onChange, ...props }) => {
56
+ const [arrayValue, setArrayValue] = React.useState(["",""])
57
+ useEffect(()=>{
58
+ if (Array.isArray(value) && value.length === 2 && !_.isEqual(value, arrayValue)) {
59
+ setArrayValue(value)
60
+ }
61
+ },[value])
62
+
63
+ return (
64
+ <BaseWrapper {...props}>
65
+ <div className='fw-full fflex fitems-center fgap-x-1'>
66
+ <div className='flex-1'><InputNumber style={{ width: '100%' }} value={arrayValue[0]} onChange={begin=>{
67
+ onChange([begin, arrayValue[1]])
68
+ }} /></div>
69
+ <svg t="1721266030064" className='ftext-gray-300 fw-5 fh-5'
70
+ 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>
71
+ <div className='flex-1'><InputNumber value={arrayValue[1]} onChange={end=>{
72
+ onChange([arrayValue[0], end])
73
+ }} style={{ width: '100%' }} /></div>
74
+ </div>
75
+ </BaseWrapper>
76
+ )
77
+ }
78
+
79
+ const Number = (props) => {
80
+ return (
81
+ <BaseWrapper {...props}>
82
+ <InputNumber {...props} style={{ width: '100%' }} />
83
+ </BaseWrapper>
84
+ );
85
+ }
86
+ export { Input, TextArea, Password, Search, CodeMachine, Number, NumberRange };
package/src/components/field/table/index.jsx CHANGED
@@ -242,7 +242,7 @@ const Table = ({ children, value, onChange, ...props }) => {
242
242
  {React.Children.map(children, (child, childIndex) => {
243
243
  const col_id = child?.props?.__id || childIndex;
244
244
  if (row?.[col_id] === undefined) row[col_id] = "";
245
- return <TableCol width={200} key={`row_${rowIndex}_col_${childIndex}`}>
245
+ return <TableCol width={100} key={`row_${rowIndex}_col_${childIndex}`}>
246
246
  {React.cloneElement(child, {
247
247
  key: `row_${rowIndex}_child_${childIndex}`,
248
248
  subTable: true,
package/src/components/field/upload/upload-file.jsx CHANGED
@@ -49,8 +49,7 @@ const UploadFile = ({ value, maxCount, onChange, ...props }) => {
49
49
  maxCount={maxCount}
50
50
  onChange={handleChange}
51
51
  fileList={fileList}>
52
- <div className=" fmin-w-36 fgap-1 frounded fborder-gray-300 fborder hover:fborder-[#3e92f8] hover:ftext-[#3e92f8] fcursor-pointer fh-8 fflex fitems-center fbg-white fjustify-center "><UploadOutlined />点击上传文件</div>
53
-
52
+ { !props?.disabled && <div className=" fmin-w-36 fgap-1 frounded fborder-gray-300 fborder hover:fborder-[#3e92f8] hover:ftext-[#3e92f8] fcursor-pointer fh-8 fflex fitems-center fbg-white fjustify-center "><UploadOutlined />点击上传文件</div>}
54
53
  </OriginalUpload>
55
54
  </BaseWrapper>
56
55
  );
package/src/components/field/upload/upload-image.jsx CHANGED
@@ -72,7 +72,6 @@ const UploadImage = ({ maxCount, value, onChange, ...props }) => {
72
72
 
73
73
  let handleFileList = []
74
74
 
75
- console.log("fileMap.current", JSON.parse(JSON.stringify(fileMap.current)))
76
75
  for (let i = 0; i < newFileList.length; i++) {
77
76
  var file = newFileList[i];
78
77
  file.version = new Date().getTime()
@@ -88,8 +87,6 @@ const UploadImage = ({ maxCount, value, onChange, ...props }) => {
88
87
  handleFileList.push(file)
89
88
  }
90
89
  }
91
- console.log("newFileList", JSON.parse(JSON.stringify(newFileList)))
92
- console.log("handleFileList", JSON.parse(JSON.stringify(handleFileList)))
93
90
  fileMap.current = handleFileList
94
91
  setFileList(handleFileList);
95
92
  onChange(handleFileList.map((file) => {
@@ -152,7 +149,7 @@ const UploadImage = ({ maxCount, value, onChange, ...props }) => {
152
149
  onPreview={handlePreview}
153
150
  onChange={handleChange}
154
151
  >
155
- {fileList.length >= maxCount ? null : uploadButton}
152
+ {fileList.length >= maxCount || props?.disabled ? null : uploadButton}
156
153
  </OriginalUpload>
157
154
  </div>
158
155
 
package/src/components/form-container/index.jsx CHANGED
@@ -16,8 +16,8 @@ function batchElements(elements, groupSize) {
16
16
 
17
17
  for (const element of elements) {
18
18
  const { _componentName } = element?.props || {};
19
-
20
- if (_componentName && _componentName.startsWith('Layout.')) {
19
+ const componentName = element.type?.displayName || _componentName;
20
+ if (componentName && componentName.startsWith('Layout.')) {
21
21
  if (tempArray.length > 0) {
22
22
  fillWithReactElement(groupSize, tempArray);
23
23
  groupedElements.push(tempArray);
@@ -32,7 +32,7 @@ function batchElements(elements, groupSize) {
32
32
  }
33
33
  }
34
34
  }
35
-
35
+
36
36
  if (tempArray.length > 0) {
37
37
  fillWithReactElement(groupSize, tempArray);
38
38
  groupedElements.push(tempArray);
@@ -58,16 +58,32 @@ const FormContainer = forwardRef(({ cols = 1, children }, ref) => {
58
58
  }, [children, cols]);
59
59
 
60
60
  const initializeDependencyMap = () => {
61
- console.log("initializeDependencyMap**********")
61
+ const fields = [];
62
+ function traverse(currentNode) {
63
+ var componentName = currentNode.type?.displayName || currentNode.props?._componentName;
64
+ const { props } = currentNode;
65
+ if (componentName && componentName.startsWith('Field.')) {
66
+ fields.push(currentNode);
67
+ }
68
+
69
+ if (props?.children){
70
+ let children = React.Children.toArray(props?.children)
71
+ children.forEach(child => traverse(child));
72
+ }
73
+ }
62
74
  dependencyMap.current = new Map();
63
75
  const childrenArray = React.Children.toArray(children);
64
-
65
- childrenArray.forEach(child => {
66
- const { componentId, __id, ...props } = child.props;
67
- console.log("child.props**********", child.props)
76
+ for (let index = 0; index < childrenArray.length; index++) {
77
+ const element = childrenArray[index];
78
+ traverse(element)
79
+ }
80
+ fields.forEach(child => {
81
+ const { componentId, __id, ...props } = child?.props;
68
82
  const identifier = componentId || __id;
69
83
  dependencyMap.current.set(identifier, {
70
- children: childrenArray.filter(item => item.props.withId === identifier || item.props.withIds?.includes(identifier)),
84
+ children: childrenArray.filter(item => item.props.withId === identifier || item.props.withIds?.some(item=>{
85
+ return identifier == item || item.startsWith(identifier + '.')
86
+ })),
71
87
  show: true,
72
88
  });
73
89
  });
@@ -77,12 +93,10 @@ const FormContainer = forwardRef(({ cols = 1, children }, ref) => {
77
93
 
78
94
  // 初始化字段的级联关系
79
95
  const initializeFieldVisibility = (reloadFields = false) => {
80
- console.log("initializeFieldVisibility**********")
81
96
  const fieldValues = form.getFieldsValue();
82
97
  for (let key of dependencyMap.current.keys()) {
83
98
  handleFieldsWith(key, fieldValues);
84
99
  }
85
-
86
100
  if (reloadFields) setFormContent(renderChildren());
87
101
  };
88
102
 
@@ -161,14 +175,15 @@ const FormContainer = forwardRef(({ cols = 1, children }, ref) => {
161
175
  if (typeof insert !== "string") {
162
176
  if (insert?.span && attributes && attributes.tagKey && attributes.id) {
163
177
  result = getParamValue(attributes.tagKey, attributes.id, fieldValues, withDatas)
164
- if (result) result = `"${result}"`
178
+ if (Array.isArray(result)) result = JSON.stringify(result)
179
+ else if (result) result = `"${result}"`
165
180
  }
166
181
  }
167
182
  else result = insert
168
183
  return result
169
184
  })
170
185
  }
171
-
186
+ console.log("formula",formula)
172
187
  if (formula && formula.length > 0) {
173
188
  const childIdentifier = child.props.componentId || child.props.__id;
174
189
  form.setFieldValue(childIdentifier, evalFormula(formula))
@@ -178,7 +193,18 @@ const FormContainer = forwardRef(({ cols = 1, children }, ref) => {
178
193
  const getParamValue = (tagKey, id, fieldValues, withDatas) => {
179
194
  let result = "";
180
195
  // 从当前表单字段取值
181
- if (tagKey == "fieldsValue") result = fieldValues?.[id] || ""
196
+ if (tagKey == "fieldsValue") {
197
+ if (id.indexOf(".") >= 0) {
198
+ const [parentKey, childKey] = id.split(".");
199
+ const parentValue = fieldValues?.[parentKey] || [];
200
+ if (Array.isArray(parentValue))
201
+ result = parentValue.map(item => {
202
+ return item?.[childKey] || ""
203
+ })
204
+ else result = parentValue?.[childKey] || ""
205
+ }
206
+ else result = fieldValues?.[id] || ""
207
+ }
182
208
  // 从依赖数据取值
183
209
  else {
184
210
  let withData = withDatas.find(item => item.id === tagKey)
@@ -218,8 +244,9 @@ const FormContainer = forwardRef(({ cols = 1, children }, ref) => {
218
244
  <Row key={`row-${index}`} gutter={[24, 24]}>
219
245
  {group.map((child, index) => {
220
246
  const { componentId, __id, _componentName, ...props } = child.props;
247
+ const componentName = child.type?.displayName || _componentName;
221
248
  const identifier = componentId || __id;
222
- const isLayoutComponent = _componentName && _componentName.startsWith('Layout.');
249
+ const isLayoutComponent = componentName && componentName.startsWith('Layout.');
223
250
 
224
251
  return (
225
252
  <Col key={identifier || `col-${index}`} span={isLayoutComponent ? 24 : 24 / group.length} style={{ marginBottom: 0 }}>
package/src/components/index.jsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Input, TextArea, Password, Search ,CodeMachine} from './field/input/index.jsx'
1
+ import { Input, TextArea, Password, Search ,CodeMachine, Number, NumberRange} from './field/input/index.jsx'
2
2
  import '../App.css';
3
3
  import { TreeSelect, Select, WithSingleSelect,WithMultipleSelect, SingleSelect, MultipleSelect, SearchSelect } from './field/select/index.jsx'
4
4
  import Custom from './field/custom/index.jsx'
@@ -14,6 +14,8 @@ const Field = {
14
14
  TextArea,
15
15
  Password,
16
16
  Search,
17
+ Number,
18
+ NumberRange,
17
19
  TreeSelect,
18
20
  Select,
19
21
  SearchSelect,
@@ -33,11 +35,18 @@ const Field = {
33
35
  Table,
34
36
  Custom,
35
37
  }
38
+ Object.keys(Field).forEach(key => {
39
+ Field[key].displayName = `Field.${key}`;
40
+ });
41
+
36
42
  const Layout = {
37
43
  FormRow: LayoutFormRow,
38
44
  FormGroupTitle: LayoutFormGroupTitle,
39
45
  TableCol
40
46
  }
47
+ Object.keys(Layout).forEach(key => {
48
+ Layout[key].displayName = `Layout.${key}`;
49
+ });
41
50
  export { FormContainer, Field ,FormContainerWrapper,Layout }
42
51
  import { default as OptionSetter} from './setter/optionsetter'
43
52
  const Setter = {
package/src/utils/formula.js CHANGED
@@ -1,3 +1,4 @@
1
+ // 不安全的eval函数，有时间的话需要重新编写公式编译器
1
2
  const evalFormula =(formula) => {
2
3
  let result = "";
3
4
  try {
@@ -8,4 +9,4 @@ const evalFormula =(formula) => {
8
9
  return result.toString();
9
10
  };
10
11
 
11
- export {evalFormula};
12
+ export {evalFormula};