@5minds/node-red-dashboard-2-processcube-dynamic-form 2.0.3-feature-80b521-mbt3b80e → 2.0.3-feature-6a41d1-mcdc8slf

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