@5minds/node-red-dashboard-2-processcube-dynamic-form 2.0.3-feature-b90ab0-mceo42ir → 2.0.3
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.
- package/nodes/ui-dynamic-form.html +321 -333
- package/nodes/ui-dynamic-form.js +41 -31
- package/package.json +3 -4
- package/resources/ui-dynamic-form.umd.js +2 -2
- package/ui/components/TitleText.vue +37 -66
- package/ui/components/UIDynamicForm.vue +593 -662
- package/ui/stylesheets/ui-dynamic-form.css +106 -117
|
@@ -1,162 +1,159 @@
|
|
|
1
1
|
.dynamic-form-wrapper {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
padding: 10px;
|
|
3
|
+
margin: 10px;
|
|
4
|
+
border: 1px solid black;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
.dynamic-form-class {
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
color: green;
|
|
9
|
+
font-weight: bold;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
h1 {
|
|
13
|
-
|
|
13
|
+
margin-bottom: 10px;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
h2 {
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
margin-top: 1.5rem;
|
|
18
|
+
margin-bottom: 0.75rem;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
h3 {
|
|
22
|
-
|
|
22
|
+
margin-top: 1rem;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
p {
|
|
26
|
-
|
|
26
|
+
margin-bottom: 5px;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
ul li {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
list-style-type: circle;
|
|
31
|
+
list-style-position: inside;
|
|
32
|
+
margin-left: 15px;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
pre {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
padding: 12px;
|
|
37
|
+
margin: 12px;
|
|
38
|
+
background-color: #eee;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
code {
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
font-size: 0.825rem;
|
|
43
|
+
color: #ae0000;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
.ui-dynamic-form-common {
|
|
47
|
-
|
|
47
|
+
border-radius: 8px;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
.ui-dynamic-form-light {
|
|
51
|
-
|
|
51
|
+
box-shadow: 0 4px 16px -3px rgba(0, 0, 0, 0.5);
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
.ui-dynamic-form-dark {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
55
|
+
box-shadow: 0 4px 16px -3px rgba(255, 255, 255, 0.9);
|
|
56
|
+
background-color: rgba(44, 44, 44, 255);
|
|
57
|
+
color: rgba(165, 165, 165, 255);
|
|
58
|
+
color-scheme: dark;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
.ui-dynamic-form-default {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
62
|
+
border-bottom: 4px solid rgb(var(--v-theme-primary));
|
|
63
|
+
box-shadow: 0px 0px 32px 0px #BABABA;
|
|
64
|
+
background-color: #FFF;
|
|
65
|
+
color: rgb(var(--v-theme-on-group-background));
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
.ui-dynamic-form-title-default {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
|
69
|
+
background: linear-gradient(131deg, #18181A 26.76%, #242326 100.16%);
|
|
70
|
+
padding: 32px;
|
|
71
|
+
color: #ffffff;
|
|
72
|
+
font-size: 36px;
|
|
73
|
+
font-weight: 700;
|
|
74
|
+
border-radius: 8px 8px 0px 0px;
|
|
75
|
+
margin-top: 0px;
|
|
76
|
+
border: 2px solid #F6F5FA;
|
|
77
|
+
border-bottom: none;
|
|
79
78
|
}
|
|
80
79
|
|
|
81
80
|
.ui-dynamic-form-title-default hr {
|
|
82
|
-
|
|
83
|
-
border-top: 6px solid rgb(var(--v-theme-primary));
|
|
84
|
-
width: calc(100% + 10px);
|
|
85
|
-
margin-left: -5px;
|
|
86
|
-
margin-right: -5px;
|
|
87
|
-
border-radius: 1px;
|
|
88
|
-
box-sizing: border-box;
|
|
81
|
+
border: 4px solid rgb(var(--v-theme-primary));
|
|
89
82
|
}
|
|
90
83
|
|
|
91
84
|
.ui-dynamic-form-title-minimal {
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
85
|
+
padding: 16px;
|
|
86
|
+
margin-top: 0px;
|
|
87
|
+
border: 2px solid #F6F5FA;
|
|
88
|
+
border-bottom: none;
|
|
96
89
|
}
|
|
97
90
|
|
|
98
91
|
.ui-dynamic-form-title-outside {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
92
|
+
padding-bottom: 24px;
|
|
93
|
+
padding-top: 24px;
|
|
94
|
+
font-size: 24px;
|
|
95
|
+
font-weight: 700;
|
|
103
96
|
}
|
|
104
97
|
|
|
105
98
|
.ui-dynamic-form-footer-common {
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
99
|
+
display: flex;
|
|
100
|
+
flex-direction: column;
|
|
101
|
+
gap: 8px;
|
|
102
|
+
margin: 0;
|
|
103
|
+
border-bottom-left-radius: 8px;
|
|
104
|
+
border-bottom-right-radius: 8px;
|
|
112
105
|
}
|
|
113
106
|
|
|
107
|
+
.ui-dynamic-form-footer-default {}
|
|
108
|
+
|
|
114
109
|
.ui-dynamic-form-footer-light {
|
|
115
|
-
|
|
110
|
+
background-color: rgba(249, 250, 251, 1);
|
|
116
111
|
}
|
|
117
112
|
|
|
118
113
|
.ui-dynamic-form-footer-dark {
|
|
119
|
-
|
|
114
|
+
background-color: rgba(35, 35, 35, 255);
|
|
120
115
|
}
|
|
121
116
|
|
|
122
117
|
.ui-dynamic-form-footer-action-primary {
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
118
|
+
border-radius: 8px;
|
|
119
|
+
background-color: rgb(var(--v-theme-primary));
|
|
120
|
+
padding: 8px;
|
|
126
121
|
}
|
|
127
122
|
|
|
128
123
|
.ui-dynamic-form-footer-action-secondary {
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
124
|
+
border-radius: 8px;
|
|
125
|
+
background-color: transparent !important;
|
|
126
|
+
border-color: rgb(var(--v-theme-primary));
|
|
127
|
+
border: 2px solid;
|
|
128
|
+
color: rgb(var(--v-theme-primary));
|
|
129
|
+
padding: 8px;
|
|
135
130
|
}
|
|
136
131
|
|
|
137
132
|
.ui-dynamic-form-wrapper {
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
@media only screen and (min-width: 600px) {
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
133
|
+
--fk-color-primary: rgb(var(--v-theme-primary)) !important;
|
|
134
|
+
--fk-color-border: rgb(var(--v-theme-group-outline)); /* Does not work somehow */
|
|
135
|
+
--fk-bg-input: #FFF;
|
|
136
|
+
--fk-color-input: rgb(var(--v-theme-on-group-background));
|
|
137
|
+
--fk-color-help: rgb(var(--v-theme-on-group-background));
|
|
138
|
+
--fk-color-border-focus: rgb(var(--v-theme-primary));
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
@media only screen and (min-width: 600px) {
|
|
142
|
+
.ui-dynamic-form-external-sizing-wrapper {
|
|
143
|
+
margin-left: 92px;
|
|
144
|
+
margin-right: 92px;
|
|
145
|
+
max-width: none;
|
|
146
|
+
max-height: 90%;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
152
149
|
|
|
153
150
|
.cardCollapse-leave-active {
|
|
154
|
-
transition: max-height
|
|
151
|
+
transition: max-height .5s ease, opacity .2s ease;
|
|
155
152
|
max-height: 100vh;
|
|
156
153
|
}
|
|
157
154
|
|
|
158
155
|
.cardCollapse-enter-active {
|
|
159
|
-
transition: max-height
|
|
156
|
+
transition: max-height .2s ease, opacity .5s ease;
|
|
160
157
|
max-height: 100vh;
|
|
161
158
|
}
|
|
162
159
|
|
|
@@ -167,43 +164,37 @@ code {
|
|
|
167
164
|
}
|
|
168
165
|
|
|
169
166
|
.ui-dynamic-form-formfield-positioner {
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
.ui-dynamic-form-formfield-positioner h1,
|
|
184
|
-
.ui-dynamic-form-formfield-positioner h2,
|
|
185
|
-
.ui-dynamic-form-formfield-positioner h3 {
|
|
167
|
+
padding: 32px;
|
|
168
|
+
padding-top: 0px;
|
|
169
|
+
max-height: 550px;
|
|
170
|
+
overflow-y: auto;
|
|
171
|
+
display: flex;
|
|
172
|
+
flex-wrap: wrap;
|
|
173
|
+
flex-direction: row;
|
|
174
|
+
column-gap: 20px;
|
|
175
|
+
border-left: 2px solid #F6F5FA;
|
|
176
|
+
border-right: 2px solid #F6F5FA;
|
|
177
|
+
border-radius: 0px 0px 6px 6px;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.ui-dynamic-form-formfield-positioner h1, .ui-dynamic-form-formfield-positioner h2, .ui-dynamic-form-formfield-positioner h3 {
|
|
186
181
|
margin: 0px;
|
|
187
182
|
}
|
|
188
183
|
|
|
189
|
-
.reset-background
|
|
190
|
-
|
|
191
|
-
--fk-bg-input: none !important; /*maybe none or (revert)*/
|
|
192
|
-
background-color: var(--fk-bg-input) !important;
|
|
184
|
+
.reset-background {
|
|
185
|
+
--fk-bg-input: none; /*maybe none or (revert)*/
|
|
193
186
|
}
|
|
194
187
|
|
|
195
188
|
.custom-fieldset {
|
|
196
|
-
|
|
189
|
+
max-width: none !important;
|
|
197
190
|
}
|
|
198
191
|
|
|
199
192
|
.input-dark {
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
}
|
|
193
|
+
background-color: rgba(85, 85, 85, 255);
|
|
194
|
+
color: white !important;
|
|
195
|
+
}
|
|
203
196
|
|
|
204
|
-
.input-light,
|
|
205
|
-
.input-default,
|
|
206
|
-
.input-dark {
|
|
197
|
+
.input-light, .input-default, .input-dark {
|
|
207
198
|
border-radius: 0px 0px 0px 8px;
|
|
208
199
|
font-size: 18px;
|
|
209
200
|
font-weight: 400;
|
|
@@ -211,10 +202,8 @@ code {
|
|
|
211
202
|
padding: 4px 8px;
|
|
212
203
|
}
|
|
213
204
|
|
|
214
|
-
.input-light:focus,
|
|
215
|
-
|
|
216
|
-
.input-default:focus {
|
|
217
|
-
background-color: #f6f5fa;
|
|
205
|
+
.input-light:focus, .input-dark:focus, .input-default:focus {
|
|
206
|
+
background-color: #F6F5FA;
|
|
218
207
|
border-radius: 0 8px 0px 5px;
|
|
219
208
|
}
|
|
220
209
|
|