lu-lowcode-package-form 0.10.34 → 0.10.36
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.cjs.js +316 -316
- package/dist/index.es.js +17534 -17468
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/App.jsx +21 -1
- package/src/components/field/select/search-select.jsx +0 -12
- package/src/components/field/table/index.jsx +13 -12
- package/src/components/field/table/with-table.jsx +17 -0
- package/src/components/form-container/index.jsx +4 -2
- package/src/components/form-container/layout/form-row.jsx +81 -12
- package/src/components/index.jsx +2 -1
package/dist/style.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.fabsolute{position:absolute}.frelative{position:relative}.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
package/src/App.jsx
CHANGED
|
@@ -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
|
+
<Field.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",
|
|
@@ -71,18 +71,6 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
|
|
|
71
71
|
const initData = async (params) => {
|
|
72
72
|
let item = null
|
|
73
73
|
const ruleParams = {}
|
|
74
|
-
// if (Array.isArray(props?.filterRules)) {
|
|
75
|
-
// // 验证关联表字段是否需要重新渲染
|
|
76
|
-
// for (let rule of props?.filterRules) {
|
|
77
|
-
// let ruleValue;
|
|
78
|
-
// if (rule.value.parent === "")
|
|
79
|
-
// ruleValue = fieldsValue?.[rule.value.field_key];
|
|
80
|
-
// else
|
|
81
|
-
// ruleValue = fieldsValue?.[rule.value.parent]?.[fieldName?.[1]]?.[rule.value.field_key];
|
|
82
|
-
// if (ruleValue && ruleValue?.value) ruleValue = ruleValue.value;
|
|
83
|
-
// ruleParams[rule.column.column_name] = ruleValue ?? "##norequest##";
|
|
84
|
-
// }
|
|
85
|
-
// }
|
|
86
74
|
if (request && typeof request === 'function') {
|
|
87
75
|
debounceFetchOptions(params, ruleParams)
|
|
88
76
|
}
|
|
@@ -119,19 +119,18 @@ const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow,
|
|
|
119
119
|
// 验证关联表字段是否需要重新渲染
|
|
120
120
|
for (let rule of otherProps.filterRules) {
|
|
121
121
|
let prevFieldValue, curFieldValue;
|
|
122
|
-
if (rule
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
122
|
+
if (rule.valueType != "variable") continue
|
|
123
|
+
if ("parent" in rule?.value && rule.value.parent != "") {
|
|
124
|
+
prevFieldValue = prevValues?.[rule?.value?.parent]?.[field.name]?.[rule?.value?.field_key];
|
|
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
|
+
}
|
|
130
130
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
}
|
|
131
|
+
if (prevFieldValue !== curFieldValue) {
|
|
132
|
+
result = true;
|
|
133
|
+
break;
|
|
135
134
|
}
|
|
136
135
|
}
|
|
137
136
|
}
|
|
@@ -197,3 +196,5 @@ const TableWrapper = (props) => {
|
|
|
197
196
|
TableWrapper.displayName = "Table"
|
|
198
197
|
export default TableWrapper;
|
|
199
198
|
export { TableCol, TableAction };
|
|
199
|
+
|
|
200
|
+
export { WithTable } from "./with-table"
|
|
@@ -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}
|
|
@@ -489,18 +489,19 @@ 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 === "Field.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
|
|
500
501
|
) {
|
|
501
502
|
// 验证关联表字段是否需要重新渲染
|
|
502
503
|
for (let rule of props.filterRules) {
|
|
503
|
-
if (rule.
|
|
504
|
+
if (rule.valueType != "variable") continue
|
|
504
505
|
let prevFieldValue, curFieldValue;
|
|
505
506
|
|
|
506
507
|
prevFieldValue = prevValues?.[rule.value.field_key];
|
|
@@ -512,6 +513,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
|
|
|
512
513
|
}
|
|
513
514
|
}
|
|
514
515
|
|
|
516
|
+
console.log(`componentName:${componentName}; identifier:${identifier}; result:`, result)
|
|
515
517
|
return result;
|
|
516
518
|
}}
|
|
517
519
|
>
|
|
@@ -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
|
|
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,32 +16,101 @@ 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
|
|
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 === "Field.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;
|
|
57
|
+
|
|
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
|
+
}
|
|
65
|
+
}
|
|
66
|
+
return result;
|
|
67
|
+
}}
|
|
68
|
+
>
|
|
69
|
+
{({ getFieldsValue }) => {
|
|
70
|
+
const fieldsValue = getFieldsValue();
|
|
71
|
+
return <Form.Item
|
|
72
|
+
style={{ marginBottom: 0 }}
|
|
73
|
+
label=""
|
|
74
|
+
name={identifier}
|
|
75
|
+
rules={rules}
|
|
76
|
+
>
|
|
77
|
+
{React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow, form: form, fieldName: identifier, onCustomChange, fieldsValue, initializeFormRender })}
|
|
78
|
+
</Form.Item>
|
|
79
|
+
}}
|
|
80
|
+
</Form.Item>
|
|
81
|
+
}
|
|
29
82
|
else if (React.isValidElement(child))
|
|
30
|
-
childComponent =
|
|
83
|
+
childComponent = <Form.Item
|
|
84
|
+
style={{ marginBottom: 0 }}
|
|
85
|
+
label=""
|
|
86
|
+
key={`${name}-form-item`}
|
|
87
|
+
name={name}
|
|
88
|
+
rules={rules}
|
|
89
|
+
>
|
|
90
|
+
{React.cloneElement(child, { form: form, fieldName: name, initializeFormRender })}
|
|
91
|
+
</Form.Item>
|
|
31
92
|
else childComponent = child
|
|
32
93
|
|
|
94
|
+
|
|
95
|
+
return (
|
|
96
|
+
colSpans?.[index] && <Col span={colSpans[index]} key={index}>
|
|
97
|
+
{childComponent}
|
|
98
|
+
</Col>
|
|
99
|
+
);
|
|
100
|
+
|
|
101
|
+
|
|
33
102
|
if (name) {
|
|
34
103
|
const rules = []
|
|
35
104
|
if (props.isRequired)
|
|
36
|
-
|
|
105
|
+
rules.push({ required: true, message: `${props.label}必须填写` });
|
|
37
106
|
if (props.rules)
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
107
|
+
if (Array.isArray(props.rules)) {
|
|
108
|
+
const pattern = props.rules.join("|")
|
|
109
|
+
rules.push({ pattern: new RegExp(pattern), message: props.rulesFailMessage ? props.rulesFailMessage : `${props.label}格式错误` })
|
|
110
|
+
}
|
|
111
|
+
else {
|
|
112
|
+
rules.push({ pattern: new RegExp(props.rules), message: props.rulesFailMessage ? props.rulesFailMessage : `${props.label}格式错误` })
|
|
113
|
+
}
|
|
45
114
|
return (
|
|
46
115
|
colSpans?.[index] && <Col span={colSpans[index]} key={index}>
|
|
47
116
|
<Form.Item
|
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,
|
|
@@ -37,6 +37,7 @@ const Field = {
|
|
|
37
37
|
UserSelect,
|
|
38
38
|
DeptSelect,
|
|
39
39
|
PostSelect,
|
|
40
|
+
WithTable
|
|
40
41
|
}
|
|
41
42
|
Object.keys(Field).forEach(key => {
|
|
42
43
|
Field[key].displayName = `Field.${key}`;
|