lu-lowcode-package-form 0.10.35 → 0.10.37

Sign up to get free protection for your applications and to get access to all the features.
Files changed (10) hide show
  1. package/dist/index.cjs.js +318 -318
  2. package/dist/index.es.js +22732 -22656
  3. package/dist/style.css +1 -1
  4. package/package.json +1 -1
  5. package/src/App.jsx +22 -2
  6. package/src/components/field/table/index.jsx +6 -4
  7. package/src/components/field/table/with-table.jsx +17 -0
  8. package/src/components/form-container/index.jsx +6 -4
  9. package/src/components/form-container/layout/form-row.jsx +69 -31
  10. package/src/components/index.jsx +12 -3
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}.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-10{height:2.5rem}.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%}.fh-screen{height:100vh}.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-\[1336px\]{width:1336px}.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}.foverflow-y-auto{overflow-y: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-100{--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity))}.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-green-300{--tw-bg-opacity: 1;background-color:rgb(134 239 172 / 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-400{--tw-text-opacity: 1;color:rgb(156 163 175 / 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}.fshadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.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-10{height:2.5rem}.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%}.fh-screen{height:100vh}.fmax-h-full{max-height:100%}.fmin-h-10{min-height:2.5rem}.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-\[1336px\]{width:1336px}.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}.foverflow-y-auto{overflow-y: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-100{--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity))}.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-green-300{--tw-bg-opacity: 1;background-color:rgb(134 239 172 / 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-400{--tw-text-opacity: 1;color:rgb(156 163 175 / 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}.fshadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.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.10.35",
3
+ "version": "0.10.37",
4
4
  "dependencies": {
5
5
  "@ant-design/icons": "^4.8.1",
6
6
  "@dnd-kit/core": "^6.1.0",
package/src/App.jsx CHANGED
@@ -1,4 +1,4 @@
1
- import { FormContainer, Field, FormContainerWrapper, Layout, Setter, EditorQuill, EditorWang, EditorWang2, EditorWang3, WangEditor, WangEditorNext } from './components';
1
+ import { FormContainer, Field, FormContainerWrapper, Layout, Setter, EditorQuill, EditorWang, EditorWang2, EditorWang3, WangEditor, WangEditorNext, Show } from './components';
2
2
  import './App.css';
3
3
  import { Button, Input, Select } from 'antd';
4
4
  import React, { useEffect, useState } from 'react';
@@ -178,7 +178,26 @@ function App() {
178
178
 
179
179
 
180
180
  <FormContainerWrapper cols={cols} className="" ref={formRef} >
181
-
181
+ <Layout.FormRow layout={'1'}>
182
+ <Show.WithTable label="测试关联子表" __id="withtable1"
183
+ filterRules={[
184
+ {
185
+ "value": {
186
+ "parent": "",
187
+ "field_key": "aa2",
188
+ "group_key": "fieldsValue",
189
+ "field_name": "当前表单.测试"
190
+ },
191
+ "valueType": "variable",
192
+ "column": {
193
+ "label": "库存表.所在仓库",
194
+ "value": "node_ocm009lpxt2",
195
+ "column_name": "node_ocm009lpxt2",
196
+ "column_type": ""
197
+ }
198
+ }
199
+ ]} />
200
+ </Layout.FormRow>
182
201
  <Field.Number label="测试" __id="aa2" />
183
202
  <Field.Number label="测试" __id="aa3" />
184
203
  <Field.Number label="测试" __id="aa1" isRequired={true} calcHidden={true} />
@@ -345,6 +364,7 @@ function App() {
345
364
  "group_key": "fieldsValue",
346
365
  "field_name": "当前表单.税率"
347
366
  },
367
+ "valueType": "variable",
348
368
  "column": {
349
369
  "label": "库存表.所在仓库",
350
370
  "value": "node_ocm009lpxt2",
package/src/components/field/table/index.jsx CHANGED
@@ -120,12 +120,12 @@ const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow,
120
120
  for (let rule of otherProps.filterRules) {
121
121
  let prevFieldValue, curFieldValue;
122
122
  if (rule.valueType != "variable") continue
123
- if ("parent" in rule?.value && rule.value.parent === "") {
124
- prevFieldValue = prevValues?.[rule.value.field_key];
125
- curFieldValue = curValues?.[rule.value.field_key];
126
- } else {
123
+ if ("parent" in rule?.value && rule.value.parent != "") {
127
124
  prevFieldValue = prevValues?.[rule?.value?.parent]?.[field.name]?.[rule?.value?.field_key];
128
125
  curFieldValue = curValues?.[rule?.value?.parent]?.[field.name]?.[rule?.value?.field_key];
126
+ } else {
127
+ prevFieldValue = prevValues?.[rule.value.field_key];
128
+ curFieldValue = curValues?.[rule.value.field_key];
129
129
  }
130
130
 
131
131
  if (prevFieldValue !== curFieldValue) {
@@ -196,3 +196,5 @@ const TableWrapper = (props) => {
196
196
  TableWrapper.displayName = "Table"
197
197
  export default TableWrapper;
198
198
  export { TableCol, TableAction };
199
+
200
+ export { WithTable } from "./with-table"
package/src/components/field/table/with-table.jsx ADDED
@@ -0,0 +1,17 @@
1
+ import { useEffect } from "react"
2
+ import { BaseWrapper } from "../base.jsx"
3
+ import { useState } from "react"
4
+
5
+
6
+ const WithTable = ({ customComponent: CustomComponent, form, fieldsValue, ...props }) => {
7
+ const [text, setText] = useState()
8
+ useEffect(()=>{
9
+ setText(JSON.stringify(fieldsValue))
10
+ },[fieldsValue])
11
+ if (!CustomComponent) return <BaseWrapper {...props}>
12
+ <div className=" fmin-h-10 fborder fw-full fborder-gray-100 ">{text}</div>
13
+ </BaseWrapper>
14
+ else return <CustomComponent {...props} form={form} fieldsValue={fieldsValue} />
15
+ }
16
+
17
+ export {WithTable}
package/src/components/form-container/index.jsx CHANGED
@@ -489,11 +489,12 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
489
489
  let childComponent
490
490
  if (isTable || isLayoutComponent)
491
491
  childComponent = React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange,initializeFormRender,mode })
492
- else if (componentName === "Field.WithSingleSelect" || componentName === "Field.WithMultipleSelect") {
492
+ else if (componentName === "Field.WithSingleSelect" || componentName === "Field.WithMultipleSelect" || componentName === "Show.WithTable") {
493
493
  childComponent = <Form.Item
494
494
  hidden={hidden}
495
495
  style={{ margin: 0 }}
496
496
  shouldUpdate={(prevValues, curValues) => {
497
+ console.log(`componentName:${componentName}; identifier:${identifier};`,props.filterRules)
497
498
  let result = false;
498
499
  if (Array.isArray(props.filterRules) &&
499
500
  props.filterRules.length > 0
@@ -501,7 +502,6 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
501
502
  // 验证关联表字段是否需要重新渲染
502
503
  for (let rule of props.filterRules) {
503
504
  if (rule.valueType != "variable") continue
504
- if ("parent" in rule?.value && rule.value.parent != "") continue
505
505
  let prevFieldValue, curFieldValue;
506
506
 
507
507
  prevFieldValue = prevValues?.[rule.value.field_key];
@@ -513,18 +513,20 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
513
513
  }
514
514
  }
515
515
 
516
+ console.log(`componentName:${componentName}; identifier:${identifier}; result:`, result)
516
517
  return result;
517
518
  }}
518
519
  >
519
520
  {({getFieldsValue}) => {
520
521
  const fieldsValue = getFieldsValue();
521
- return <Form.Item
522
+ let element = React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange, fieldsValue,initializeFormRender })
523
+ return componentName === "show.WithTable" ? <>{element}</> : <Form.Item
522
524
  style={{ marginBottom: 0 }}
523
525
  label=""
524
526
  name={identifier}
525
527
  rules={rules}
526
528
  >
527
- {React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange, fieldsValue,initializeFormRender })}
529
+ {element}
528
530
  </Form.Item>
529
531
  }}
530
532
  </Form.Item>
package/src/components/form-container/layout/form-row.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { useMemo } from 'react';
2
2
  import { Form, Row, Col } from 'antd';
3
3
 
4
- const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form,initializeFormRender ,mode}) => {
4
+ const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form, initializeFormRender, mode }) => {
5
5
  layout = layout || '1';
6
6
  const getColSpan = (layoutStr) => {
7
7
  const layoutArray = layoutStr.split(',').map(Number);
@@ -16,52 +16,90 @@ const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form
16
16
  return React.Children.toArray(children).map((child, index) => {
17
17
  const props = child.props;
18
18
  const name = props?.componentId || props?.__id;
19
+ const identifier = name
19
20
  var componentName = child.type?.displayName || child.props?._componentName;
20
21
  // console.log("initializeDependencyMap componentName", componentName)
21
22
  // let childComponent = child;
22
23
  // if (componentName == 'Field.Table')
23
24
  // childComponent = React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow })
24
25
 
25
-
26
+ const hidden = props?.calcHidden && mode != "desgin";
27
+ const rules = []
28
+ if (props?.isRequired)
29
+ rules.push({ required: true, message: `${props.label}必须填写` });
30
+ if (props?.rules)
31
+ if (Array.isArray(props.rules)) {
32
+ const pattern = props.rules.join("|")
33
+ rules.push({ pattern: new RegExp(pattern), message: props.rulesFailMessage ? props.rulesFailMessage : `${props.label}格式错误` })
34
+ }
35
+ else {
36
+ rules.push({ pattern: new RegExp(props.rules), message: props.rulesFailMessage ? props.rulesFailMessage : `${props.label}格式错误` })
37
+ }
38
+ const onCustomChange = (value) => {
39
+ form.setFieldValue(identifier, value)
40
+ }
26
41
  let childComponent = null
27
42
  if (componentName == 'Field.Table')
28
- childComponent = React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow, form: form ,fieldName:name,initializeFormRender,mode})
29
- else if (React.isValidElement(child))
30
- childComponent = React.cloneElement(child, { form: form ,fieldName:name,initializeFormRender })
31
- else childComponent = child
43
+ childComponent = React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow, form: form, fieldName: name, initializeFormRender, mode })
44
+ else if (componentName === "Field.WithSingleSelect" || componentName === "Field.WithMultipleSelect" || componentName === "Show.WithTable") {
45
+ childComponent = <Form.Item
46
+ hidden={hidden}
47
+ style={{ margin: 0 }}
48
+ shouldUpdate={(prevValues, curValues) => {
49
+ let result = false;
50
+ if (Array.isArray(props.filterRules) &&
51
+ props.filterRules.length > 0
52
+ ) {
53
+ // 验证关联表字段是否需要重新渲染
54
+ for (let rule of props.filterRules) {
55
+ if (rule.valueType != "variable") continue
56
+ let prevFieldValue, curFieldValue;
32
57
 
33
- if (name) {
34
- const rules = []
35
- if (props.isRequired)
36
- rules.push({ required: true, message: `${props.label}必须填写` });
37
- if (props.rules)
38
- if (Array.isArray(props.rules)) {
39
- const pattern = props.rules.join("|")
40
- rules.push({ pattern: new RegExp(pattern), message: props.rulesFailMessage ? props.rulesFailMessage : `${props.label}格式错误` })
41
- }
42
- else {
43
- rules.push({ pattern: new RegExp(props.rules), message: props.rulesFailMessage ? props.rulesFailMessage : `${props.label}格式错误` })
58
+ prevFieldValue = prevValues?.[rule.value.field_key];
59
+ curFieldValue = curValues?.[rule.value.field_key];
60
+ if (prevFieldValue !== curFieldValue) {
61
+ result = true;
62
+ break;
63
+ }
64
+ }
44
65
  }
45
- return (
46
- colSpans?.[index] && <Col span={colSpans[index]} key={index}>
47
- <Form.Item
66
+ return result;
67
+ }}
68
+ >
69
+ {({ getFieldsValue }) => {
70
+ const fieldsValue = getFieldsValue();
71
+ let element = React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow, form: form, fieldName: identifier, onCustomChange, fieldsValue, initializeFormRender })
72
+ return componentName === "Show.WithTable" ? <>{element}</> : <Form.Item
48
73
  style={{ marginBottom: 0 }}
49
74
  label=""
50
- key={`${name}-form-item`}
51
- name={name}
75
+ name={identifier}
52
76
  rules={rules}
53
77
  >
54
- {childComponent}
78
+ {element}
55
79
  </Form.Item>
56
- </Col>
57
- );
58
- } else {
59
- return (
60
- colSpans?.[index] && <Col span={colSpans[index]} key={index}>
61
- {childComponent}
62
- </Col>
63
- );
80
+ }}
81
+ </Form.Item>
64
82
  }
83
+ else if (React.isValidElement(child))
84
+ childComponent = <Form.Item
85
+ style={{ marginBottom: 0 }}
86
+ label=""
87
+ key={`${name}-form-item`}
88
+ name={name}
89
+ rules={rules}
90
+ >
91
+ {React.cloneElement(child, { form: form, fieldName: name, initializeFormRender })}
92
+ </Form.Item>
93
+ else childComponent = child
94
+
95
+
96
+ return (
97
+ colSpans?.[index] && <Col span={colSpans[index]} key={index}>
98
+ {childComponent}
99
+ </Col>
100
+ );
101
+
102
+
65
103
  });
66
104
  }, [children, colSpans]);
67
105
 
package/src/components/index.jsx CHANGED
@@ -8,7 +8,7 @@ import { default as RadioGroup } from './field/radio/index.jsx'
8
8
  import { UploadFile,UploadImage } from './field/upload'
9
9
  import {default as Switch} from './field/switch'
10
10
  import {default as DatePicker } from './field/date-picker'
11
- import { default as Table , TableCol } from './field/table'
11
+ import { default as Table , TableCol, WithTable } from './field/table'
12
12
  const Field = {
13
13
  Input,
14
14
  TextArea,
@@ -36,7 +36,7 @@ const Field = {
36
36
  Custom,
37
37
  UserSelect,
38
38
  DeptSelect,
39
- PostSelect,
39
+ PostSelect
40
40
  }
41
41
  Object.keys(Field).forEach(key => {
42
42
  Field[key].displayName = `Field.${key}`;
@@ -49,10 +49,19 @@ const Layout = {
49
49
  FormGroupTitle: LayoutFormGroupTitle,
50
50
  TableCol
51
51
  }
52
+
52
53
  Object.keys(Layout).forEach(key => {
53
54
  Layout[key].displayName = `Layout.${key}`;
54
55
  });
55
- export { FormContainer, Field ,FormContainerWrapper,Layout }
56
+ // 纯显示类型的组件
57
+ const Show = {
58
+ WithTable
59
+ }
60
+ Object.keys(Show).forEach(key => {
61
+ Show[key].displayName = `Show.${key}`;
62
+ });
63
+
64
+ export { FormContainer, Field ,FormContainerWrapper,Layout,Show }
56
65
  import { default as OptionSetter} from './setter/optionsetter'
57
66
  const Setter = {
58
67
  OptionSetter