lu-lowcode-package-form 0.9.31 → 0.9.33

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 +96 -96
  2. package/dist/index.es.js +6746 -6775
  3. package/dist/style.css +1 -1
  4. package/package.json +1 -1
  5. package/src/App.jsx +5 -0
  6. package/src/components/field/base.jsx +18 -11
  7. package/src/components/field/checkbox/checkbox-tree.jsx +0 -1
  8. package/src/components/field/table/index copy 2.jsx +268 -0
  9. package/src/components/field/table/index copy 3.jsx +163 -0
  10. package/src/components/field/table/index copy.jsx +268 -0
  11. package/src/components/field/table/index.jsx +88 -245
  12. package/src/components/form-container/index copy.jsx +302 -0
  13. package/src/components/form-container/index.jsx +77 -42
  14. package/src/components/form-container/layout/form-row.jsx +0 -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}.fmy-2{margin-top:.5rem;margin-bottom:.5rem}.fmt-2{margin-top:.5rem}.fbox-border{box-sizing:border-box}.fflex{display: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-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-not-allowed{cursor:not-allowed}.fcursor-pointer{cursor:pointer}.fflex-col{flex-direction:column}.fflex-wrap{flex-wrap:wrap}.fflex-nowrap{flex-wrap:nowrap}.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}.fgap-y-2{row-gap:.5rem}.foverflow-hidden{overflow:hidden}.foverflow-x-auto{overflow-x:auto}.ftext-nowrap{text-wrap:nowrap}.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-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / 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-0{padding:0}.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-bold{font-weight:700}.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-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity))}.ftext-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.fopacity-5{opacity:.05}.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}.fsticky{position:-webkit-sticky;position:sticky}.fleft-0{left:0}.fright-0{right:0}.ftop-0{top:0}.fz-10{z-index:10}.f-mx-1{margin-left:-.25rem;margin-right:-.25rem}.fmy-2{margin-top:.5rem;margin-bottom:.5rem}.fmt-2{margin-top:.5rem}.fbox-border{box-sizing:border-box}.fflex{display: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-12{width:3rem}.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-not-allowed{cursor:not-allowed}.fcursor-pointer{cursor:pointer}.fflex-col{flex-direction:column}.fflex-wrap{flex-wrap:wrap}.fflex-nowrap{flex-wrap:nowrap}.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}.fgap-y-2{row-gap:.5rem}.foverflow-hidden{overflow:hidden}.foverflow-x-auto{overflow-x:auto}.ftext-nowrap{text-wrap:nowrap}.frounded{border-radius:.25rem}.fborder{border-width:1px}.fborder-b{border-bottom-width:1px}.fborder-l-4{border-left-width:4px}.fborder-r{border-right-width:1px}.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))}.fborder-r-\[\#e9e9e9\]{--tw-border-opacity: 1;border-right-color:rgb(233 233 233 / var(--tw-border-opacity))}.fbg-\[\#fafafa\]{--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.fbg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.fbg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / 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-0{padding:0}.fp-2{padding:.5rem}.fp-4{padding:1rem}.fp-6{padding:1.5rem}.fpx-1{padding-left:.25rem;padding-right:.25rem}.fpx-2{padding-left:.5rem;padding-right:.5rem}.fpy-2{padding-top:.5rem;padding-bottom:.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-xl{font-size:1.25rem;line-height:1.75rem}.ftext-xs{font-size:.75rem;line-height:1rem}.ffont-bold{font-weight:700}.ffont-medium{font-weight:500}.ffont-semibold{font-weight:600}.ftext-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.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-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity))}.ftext-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.fopacity-5{opacity:.05}.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.31",
3
+ "version": "0.9.33",
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
@@ -104,7 +104,12 @@ function App() {
104
104
  <Layout.FormGroupTitle title={"基本信息"} />
105
105
  <Layout.FormRow layout={'1'}>
106
106
  <Field.Table label="子表格" __id="table" >
107
+ <Field.Input isRequired={true} label="商品价格" __id="product_price11" />
108
+ <Field.Input isRequired={true} label="商品价格" __id="product_price12" />
109
+ <Field.Input isRequired={true} label="商品价格" __id="product_price13" />
110
+ <Field.Input isRequired={true} label="商品价格" __id="product_price14" />
107
111
  <Field.Input isRequired={true} label="商品价格" __id="product_price1" />
112
+ <Field.Input isRequired={true} label="商品个数" __id="product_num1" />
108
113
  <Field.Input label="商品总价" __id="product_sum1"
109
114
  withIds={["table.product_price1", "table.product_num1"]}
110
115
  withFill={{
package/src/components/field/base.jsx CHANGED
@@ -1,6 +1,6 @@
1
- import { useEffect, useState } from "react";
1
+ import React, { useEffect, useState } from "react";
2
2
 
3
- const FieldLable = ({value,onChange})=>{
3
+ const FieldLable = ({ value, onChange }) => {
4
4
  const [text, setText] = useState("");
5
5
  useEffect(() => {
6
6
  setText(value);
@@ -11,9 +11,11 @@ const FieldLable = ({value,onChange})=>{
11
11
 
12
12
  export const BaseWrapper = function BaseWrapper({
13
13
  label,
14
+ higLabel = false,
14
15
  children,
15
16
  prompt,
16
17
  subTable,
18
+ subTableHead = false,
17
19
  hidePrompt = false,
18
20
  subTableIndex,
19
21
  addWrapper = true,
@@ -21,14 +23,18 @@ export const BaseWrapper = function BaseWrapper({
21
23
  isRequired,
22
24
  ...otherProps
23
25
  }) {
26
+
24
27
  if (!addWrapper) return children;
25
- const formWarpper = (
28
+ const formWarpper = (
26
29
  <div className={`frelative`}>
27
- {label && <div className='fh-8 ftext-gray-500 ftext-sm fflex fitems-center'>{label}{ isRequired && <span className="ftext-red-500 ffont-bold">*</span>}</div>}
30
+ {label && <>
31
+ {!higLabel && <div className={`fh-8 ftext-gray-500 ftext-sm fflex fitems-center ${higLabel ? " ftext-xl fmy-2 ftext-black" : ""}`}>{label}{isRequired && <span className="ftext-red-500 ffont-bold">*</span>}</div>}
32
+ {higLabel && <div className="fh-11 fflex fitems-center ftext-lg ffont-medium "><span className="fborder-l-4 fborder-slate-300 fpl-2 ">{label}</span>{isRequired && <span className="ftext-red-500 ffont-bold">*</span>}</div>}
33
+ </>}
28
34
  <div className={`fw-full fflex fitems-stretch ftext-gray-900 frelative`}>
29
35
  {readonly && <div className="fw-full fh-full fbg-gray-100 fopacity-5 fcursor-not-allowed fabsolute fleft-0 ftop-0 fz-10"></div>}
30
- {/* <FieldLable value={otherProps?.value} /> */}
31
- {children}
36
+ {/* <FieldLable value={otherProps?.value} /> */}
37
+ {children}
32
38
  </div>
33
39
  {!hidePrompt && prompt && <div className="ftext-xs ftext-gray-500 fmin-h-5 fflex fitems-center">{prompt}</div>}
34
40
  </div>
@@ -36,14 +42,15 @@ export const BaseWrapper = function BaseWrapper({
36
42
 
37
43
  const tableWarpper = (
38
44
  <div className="frelative fw-full">
39
- {label && subTableIndex === 0 && <div className='fh-12 ffont-semibold fbg-gray-100 ftext-sm fflex fitems-center fpx-2 fborder-b'>{label}{ isRequired && <span className="ftext-red-500">*</span>}</div>}
40
- <div className="fw-full fflex fitems-stretch fp-2 frelative">
45
+ {subTableHead && label && <div className='fh-12 ffont-semibold fbg-[#fafafa] ftext-sm fflex fitems-center fborder-b fpl-2 f-mx-1'><div className="fw-full fborder-r fborder-r-[#e9e9e9]">{label}{isRequired && <span className="ftext-red-500">*</span>}</div></div>}
46
+ {!subTableHead && <div className="fw-full fflex fitems-stretch frelative fpy-2">
41
47
  {readonly && <div className="fw-full fh-full fbg-gray-50 fopacity-5 fcursor-not-allowed fabsolute fleft-0 ftop-0 fz-10"></div>}
42
- {/* <FieldLable value={otherProps?.value} /> */}
43
- {children}
48
+ {/* <FieldLable value={otherProps?.value} /> */}
49
+ {children}
44
50
  </div>
51
+ }
45
52
  </div>
46
53
  )
47
-
54
+
48
55
  return subTable ? tableWarpper : formWarpper;
49
56
  };
package/src/components/field/checkbox/checkbox-tree.jsx CHANGED
@@ -56,7 +56,6 @@ const CheckboxTree = ({ request, value, onChange,callError,disabledValue, addRoo
56
56
  }, [])
57
57
 
58
58
  useEffect(() => {
59
- console.log("CheckboxTree value ", value)
60
59
  if ( typeof value == 'string') {
61
60
  try {
62
61
  value = JSON.parse(value)
package/src/components/field/table/index copy 2.jsx ADDED
@@ -0,0 +1,268 @@
1
+ import React, { useEffect, useState, useRef, useCallback } from "react";
2
+ import { Button } from "antd";
3
+ import { DeleteOutlined } from "@ant-design/icons";
4
+ import { isEqual, debounce } from 'lodash';
5
+ import { evalFormula } from "../../../utils/formula";
6
+
7
+ const TableCol = ({ children, width, ...props }) => {
8
+ const [sWidth, setSWidth] = useState(0);
9
+ useEffect(() => {
10
+ setSWidth(width);
11
+ }, [width]);
12
+ return <div className="fflex-1" style={{ minWidth: `${sWidth}px` }} {...props}>
13
+ {children}
14
+ </div>
15
+ }
16
+
17
+ const TableAction = ({ label, subTableIndex, children, ...props }) => {
18
+ return <div className="">
19
+ <div className="frelative fw-full fh-full fflex fflex-col foverflow-hidden">
20
+ {label && subTableIndex === 0 && <div className='fh-12 ffont-semibold fbg-gray-100 ftext-sm fflex fflex-nowrap ftext-nowrap fjustify-between fitems-center fpx-2 fborder-b'>{label}</div>}
21
+ <div className="fw-full fflex-1 fflex fitems-center fjustify-center fp-2 fbox-border ">
22
+ {children}
23
+ </div>
24
+ </div>
25
+ </div>
26
+ }
27
+
28
+ const Table = ({ children, value, onChange, ...props }) => {
29
+ const [rows, setRows] = useState([{}]);
30
+ const prevRowsRef = useRef(rows);
31
+ const dependencyMap = useRef(new Map());
32
+ const [updateField, setUpdateField] = useState({});
33
+ const tableId = props.componentId || props.__id;
34
+ const setPrevRows = (newValue) => {
35
+ setRows(newValue);
36
+ prevRowsRef.current = newValue;
37
+ }
38
+
39
+ useEffect(() => {
40
+ console.log("value useEffect ", JSON.stringify(value));
41
+ if (value && typeof value === "string") {
42
+ try {
43
+ value = JSON.parse(value);
44
+ onChange(value);
45
+ } catch (error) { }
46
+ }
47
+ if (value && Array.isArray(value) && !isEqual(prevRowsRef.current, value)) {
48
+ console.log("useEffect setRows");
49
+ setPrevRows(value);
50
+ }
51
+ }, [value]);
52
+
53
+ useEffect(() => {
54
+ console.log("children useEffect ",children);
55
+ initializeDependencyMap();
56
+ }, [children]);
57
+
58
+ const initializeDependencyMap = useCallback(() => {
59
+ dependencyMap.current.clear();
60
+ const childrenArray = React.Children.toArray(children);
61
+ childrenArray.forEach(child => {
62
+ const { componentId, __id, ...props } = child.props;
63
+ const identifier = `${tableId}.${(componentId || __id)}`;
64
+
65
+ dependencyMap.current.set(identifier, {
66
+ children: childrenArray.filter(item => item.props.withId === identifier || item.props.withIds?.includes(identifier)),
67
+ show: true,
68
+ });
69
+ });
70
+ initializeFieldVisibility();
71
+ }, [children, tableId]);
72
+
73
+ const handleRowValues = useCallback((rowValues) => {
74
+ const result = {};
75
+ for (let key in rowValues) {
76
+ result[`${tableId}.${key}`] = rowValues[key] || '';
77
+ }
78
+ return result;
79
+ }, [tableId]);
80
+
81
+ const initializeFieldVisibility = useCallback(() => {
82
+ rows.forEach((row, rowIndex) => {
83
+ const fieldValues = handleRowValues(row);
84
+ for (let key of dependencyMap.current.keys()) {
85
+ handleFieldsWith(key, fieldValues, rowIndex);
86
+ }
87
+ });
88
+ }, [rows, handleRowValues]);
89
+
90
+ const handleFieldsWith = useCallback((identifier, fieldValues, rowIndex) => {
91
+ let needRefresh = false;
92
+ const fullIdentifier = `${tableId}.${identifier}`;
93
+ if (dependencyMap.current.has(fullIdentifier)) {
94
+ const dependentChildren = dependencyMap.current.get(fullIdentifier).children;
95
+ dependentChildren.forEach(child => {
96
+ if (child.props.withFunc && typeof child.props.withFunc === 'function') {
97
+ needRefresh = handleFieldsVisible(fieldValues, child);
98
+ }
99
+
100
+ if (child.props.withFill) {
101
+ handleFieldsWithFill(fieldValues, child, rowIndex);
102
+ }
103
+ });
104
+ }
105
+ return needRefresh;
106
+ }, [tableId, rows]);
107
+
108
+ const handleFieldsVisible = useCallback((fieldValues, child) => {
109
+ let needRefresh = false;
110
+ const childShouldBeVisible = child.props.withFunc(fieldValues);
111
+ const childIdentifier = child.props.componentId || child.props.__id;
112
+ if (dependencyMap.current.has(childIdentifier)) {
113
+ const childData = dependencyMap.current.get(childIdentifier);
114
+ if (childData.show !== childShouldBeVisible) {
115
+ childData.show = childShouldBeVisible;
116
+ dependencyMap.current.set(childIdentifier, childData);
117
+ needRefresh = true;
118
+ }
119
+ }
120
+ return needRefresh;
121
+ }, []);
122
+
123
+ const handleFieldsWithFill = useCallback(async (fieldValues, child, rowIndex) => {
124
+ const withFill = child.props.withFill;
125
+ const withDataFetch = child.props.withDataFetch;
126
+
127
+ let withDatas = [];
128
+ if (withFill?.withData && withFill?.withData.length > 0 && withDataFetch && typeof withDataFetch === 'function') {
129
+ for (let index = 0; index < withFill?.withData.length; index++) {
130
+ const element = withFill?.withData[index];
131
+ let params = {}
132
+ params.tableName = element.withTable.table_name;
133
+ params.filter = {};
134
+ for (let index = 0; index < element.withCondition.length; index++) {
135
+ const { value: condition_value, column: condition_column } = element.withCondition[index];
136
+ params.filter[condition_column.column_name] = getParamValue(condition_value.group_key, condition_value.field_key, fieldValues, withDatas);
137
+ }
138
+
139
+ const response = await withDataFetch(params);
140
+ if (response.code === 0 && response.data.list) {
141
+ withDatas.push({
142
+ id: element.id,
143
+ data: response.data.list
144
+ });
145
+ }
146
+ }
147
+ }
148
+
149
+ let formula;
150
+ if (withFill.value && withFill.value.length > 0) {
151
+ formula = withFill.value.map(item => {
152
+ let result = "";
153
+ const { insert, attributes } = item;
154
+ if (typeof insert !== "string") {
155
+ if (insert?.span && attributes && attributes.tagKey && attributes.id) {
156
+ result = getParamValue(attributes.tagKey, attributes.id, fieldValues, withDatas);
157
+ if(result) result = `"${result}"`
158
+ }
159
+ } else {
160
+ result = insert;
161
+ }
162
+ return result;
163
+ });
164
+ }
165
+ console.log("formula", formula);
166
+ if (formula && formula.length > 0) {
167
+ const childIdentifier = child.props.componentId || child.props.__id;
168
+ const formulaResult = evalFormula(formula);
169
+ console.log("formulaResult", formulaResult);
170
+ console.log("handleFieldsWithFill setRows");
171
+ const newRows = [...rows]
172
+ newRows[rowIndex][childIdentifier] = formulaResult;
173
+ setPrevRows(newRows)
174
+ }
175
+ }, [rows])
176
+
177
+ const getParamValue = useCallback((tagKey, id, fieldValues, withDatas) => {
178
+ let result = "";
179
+ if (tagKey === "fieldsValue") result = fieldValues?.[id] || "";
180
+ else {
181
+ let withData = withDatas.find(item => item.id === tagKey);
182
+ if (withData && withData.data && withData.data.length > 0) {
183
+ result = withData.data[0]?.[id] || "";
184
+ }
185
+ }
186
+ return result;
187
+ }, []);
188
+
189
+
190
+
191
+ const handleInputChange = useCallback((rowIndex, childIndex, e) => {
192
+ console.log(e)
193
+ const newRows = [...rows];
194
+ newRows[rowIndex] = {
195
+ ...newRows[rowIndex],
196
+ [childIndex]: e?.target?.value || e || '',
197
+ };
198
+ console.log("handleInputChange setRows")
199
+ setPrevRows(newRows);
200
+
201
+ setUpdateField({
202
+ rowIndex: rowIndex,
203
+ identifier: childIndex,
204
+ value: handleRowValues(newRows[rowIndex]),
205
+ });
206
+
207
+ }, [rows, handleFieldsWith, handleRowValues, onChange]);
208
+
209
+
210
+ const handleDeleteRow = (rowIndex) => {
211
+ const newRows = [...rows];
212
+ newRows.splice(rowIndex, 1);
213
+ console.log("handleDeleteRow setRows")
214
+ setPrevRows(newRows);
215
+ }
216
+
217
+ const addRow = () => {
218
+ console.log("addRow setRows")
219
+ setPrevRows([...rows, {}]);
220
+ }
221
+
222
+ useEffect(() => {
223
+ console.log("rows changed rows", JSON.stringify(prevRowsRef.current));
224
+ console.log("rows changed value", JSON.stringify(value));
225
+ if (isEqual(prevRowsRef.current, value)) return;
226
+ console.log("noreq")
227
+ typeof onChange === "function" && onChange(prevRowsRef.current);
228
+ }, [rows]);
229
+
230
+ useEffect(() => {
231
+ if (updateField && updateField.identifier) {
232
+ handleFieldsWith(updateField.identifier, updateField.value, updateField.rowIndex);
233
+ }
234
+ }, [updateField])
235
+
236
+
237
+ return (
238
+ <>
239
+ <div className="fw-full frelative fmin-h-20 foverflow-x-auto">
240
+
241
+ {rows.map((row, rowIndex) => (
242
+ <div className="fborder-b fflex flex-nowrap fmin-w-full" key={rowIndex}>
243
+ {React.Children.map(children, (child, childIndex) => {
244
+ const col_id = child?.props?.__id || childIndex;
245
+ if (row?.[col_id] === undefined) row[col_id] = "";
246
+ return <TableCol width={150} key={`row_${rowIndex}_col_${childIndex}`}>
247
+ {React.cloneElement(child, {
248
+ key: `row_${rowIndex}_child_${childIndex}`,
249
+ subTable: true,
250
+ subTableIndex: rowIndex,
251
+ value: row[col_id] || '',
252
+ onChange: (e) => handleInputChange(rowIndex, col_id, e),
253
+ })}
254
+ </TableCol>
255
+ })}
256
+ <TableAction key={`row_${rowIndex}_action`} subTable={true} subTableIndex={rowIndex} label={"操作"}>
257
+ <DeleteOutlined className="fcursor-pointer" onClick={() => handleDeleteRow(rowIndex)} />
258
+ </TableAction>
259
+ </div>
260
+ ))}
261
+ </div>
262
+ <Button onClick={addRow} className="fmy-2">新增一行</Button>
263
+ </>
264
+ );
265
+ };
266
+
267
+ export default Table;
268
+ export { TableCol, TableAction };
package/src/components/field/table/index copy 3.jsx ADDED
@@ -0,0 +1,163 @@
1
+ import React, { useEffect, useState, useRef } from "react";
2
+ import { Button, Form, Input } from "antd";
3
+ import { DeleteOutlined } from "@ant-design/icons";
4
+ import { BaseWrapper } from "../base.jsx"
5
+
6
+ const TableAction = ({ height, label, subTableIndex, children, subTableHead = false, ...props }) => {
7
+ return <div className="fw-12" style={height ? { height: `${height}px` } : {}}>
8
+ <div className="frelative fw-full fh-full fflex fflex-col foverflow-hidden">
9
+ {label && subTableHead && <div className='fh-12 ffont-semibold fbg-[#fafafa] ftext-sm fflex fflex-nowrap ftext-nowrap fjustify-between fitems-center fpx-2 fborder-b'>{label}</div>}
10
+ {!subTableHead && <div className="fw-full fflex-1 fflex fitems-center fjustify-center fp-2 fbox-border ">
11
+ {children}
12
+ </div>
13
+ }
14
+ </div>
15
+ </div>
16
+ }
17
+
18
+
19
+ const TableCol = ({ children, width, ...props }) => {
20
+ const [sWidth, setSWidth] = useState(0);
21
+ useEffect(() => {
22
+ setSWidth(width);
23
+ }, [width]);
24
+ return <div className="fflex-1 fpx-1" style={{ minWidth: `${sWidth}px` }} {...props}>
25
+ {children}
26
+ </div>
27
+ }
28
+
29
+ const Table = ({ children, ...props }) => {
30
+ const name = props.componentId || props.__id
31
+ const rules = []
32
+ const rowsRef = useRef([]);
33
+ const [fieldsLength, setFieldsLength] = useState(0);
34
+ const [heights, setHeights] = useState([]);
35
+ useEffect(() => {
36
+ console.log("rowsRef.heights", heights)
37
+ }, [heights])
38
+
39
+ useEffect(() => {
40
+ // 清空当前的 observers
41
+ rowsRef.current.forEach((row, index) => {
42
+ if (row && row.observer) {
43
+ row.observer.disconnect();
44
+ }
45
+ });
46
+ // 重新设置 observers
47
+ rowsRef.current.forEach((row, index) => {
48
+ if (row) {
49
+ const observer = new ResizeObserver(entries => {
50
+ for (let entry of entries) {
51
+ setHeights(prevHeights => {
52
+ const newHeights = [...prevHeights];
53
+ newHeights[index] = entry.contentRect.height;
54
+ return newHeights;
55
+ });
56
+ }
57
+ });
58
+ observer.observe(row);
59
+ row.observer = observer; // 将 observer 保存到 row 对象中，以便后续可以清理
60
+ }
61
+ else setHeights(prevHeights => { return heights.slice(0, index) });
62
+ });
63
+
64
+
65
+ // 清理函数
66
+ return () => {
67
+ rowsRef.current.forEach((row, index) => {
68
+ if (row && row.observer) {
69
+ row.observer.disconnect();
70
+ }
71
+ });
72
+ };
73
+ }, [fieldsLength]);
74
+ if (props.isRequired)
75
+ rules.push({ required: true, message: `子表[${props.label}]必须填写` });
76
+ return <Form.List name={name} rules={rules}>
77
+ {(fields, { add, remove }) => {
78
+ if (fields.length !== fieldsLength) {
79
+ setFieldsLength(fields.length);
80
+ }
81
+
82
+ if (fields.length === 0) add();
83
+ return <div className="fw-full ">
84
+ <div className="fflex ">
85
+ <div className="fflex-1 frelative fmin-h-20 foverflow-x-auto">
86
+ <div key={`tableHead`} className="fborder-b fflex flex-nowrap fmin-w-full ">
87
+ {React.Children.map(children, (child, childIndex) => {
88
+ return <TableCol width={150} key={`row_${0}_col_${childIndex}`}>
89
+ {React.cloneElement(child, {
90
+ key: `row_${0}_child_${childIndex}`,
91
+ subTable: true,
92
+ subTableHead: true
93
+ })}
94
+ </TableCol>
95
+ })}
96
+ <TableAction subTableHead={true} key={`row_${0}_action`} subTable={true} subTableIndex={0} label={"操作"}>
97
+ </TableAction>
98
+ </div>
99
+ {fields.map((field, index) => (
100
+ <div key={field.key} className="fborder-b fflex flex-nowrap fmin-w-full " ref={el => (rowsRef.current[index] = el)}>
101
+ {React.Children.map(children, (child, childIndex) => {
102
+ let { props } = child;
103
+ const col_id = child?.props?.componentId || child?.props?.__id || childIndex;
104
+ if (field?.[col_id] === undefined) field[col_id] = "";
105
+ const rules = []
106
+ if (props.isRequired)
107
+ rules.push({ required: true, message: `${props.label}必须填写` });
108
+ if (props.rules)
109
+ if (Array.isArray(props.rules)) {
110
+ const pattern = props.rules.join("|")
111
+ rules.push({ pattern: new RegExp(pattern), message: props.rulesFailMessage ? props.rulesFailMessage : `${props.label}格式错误` })
112
+ }
113
+ else {
114
+ rules.push({ pattern: new RegExp(props.rules), message: props.rulesFailMessage ? props.rulesFailMessage : `${props.label}格式错误` })
115
+ }
116
+
117
+ return <TableCol width={150} key={`row_${index}_col_${childIndex}`}>
118
+ <Form.Item
119
+ style={{ marginBottom: 0 }}
120
+ label=""
121
+ name={[field.name, col_id]}
122
+ rules={rules}
123
+ >
124
+ {React.cloneElement(child, {
125
+ key: `row_${index}_child_${childIndex}`,
126
+ subTable: true,
127
+ subTableIndex: index,
128
+ })}
129
+ </Form.Item>
130
+ </TableCol>
131
+ })}
132
+ <TableAction key={`row_${index}_action`} subTable={true} subTableIndex={index} label={"操作"}>
133
+ <DeleteOutlined className="fcursor-pointer" onClick={() => remove(index)} />
134
+ </TableAction>
135
+ </div>
136
+ ))}
137
+ </div>
138
+ <div className="fw-12">
139
+ <TableAction subTableHead={true} key={`row_${0}_action`} subTable={true} subTableIndex={0} label={"操作"}>
140
+ </TableAction>
141
+ {heights.map((height, index) => (
142
+ <TableAction height={height} key={`row_${index}_action`} subTable={true} subTableIndex={index} label={"操作"}>
143
+ <DeleteOutlined className="fcursor-pointer" onClick={() => remove(index)} />
144
+ </TableAction>
145
+ ))}
146
+
147
+ </div>
148
+ </div>
149
+
150
+ <Button onClick={() => add()} className="fmy-2">新增一行</Button>
151
+ </div>
152
+ }}
153
+ </Form.List>
154
+ }
155
+ const TableWrapper = (props) => {
156
+ return (
157
+ <BaseWrapper {...props} higLabel={true} >
158
+ <Table {...props} />
159
+ </BaseWrapper>
160
+ );
161
+ }
162
+ export default TableWrapper;
163
+ export { TableCol, TableAction };