lu-lowcode-package-form 0.10.35 → 0.10.37

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 (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