@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.
Files changed (7) hide show
  1. package/nodes/ui-dynamic-form.html +321 -333
  2. package/nodes/ui-dynamic-form.js +41 -31
  3. package/package.json +3 -4
  4. package/resources/ui-dynamic-form.umd.js +2 -2
  5. package/ui/components/TitleText.vue +37 -66
  6. package/ui/components/UIDynamicForm.vue +593 -662
  7. package/ui/stylesheets/ui-dynamic-form.css +106 -117
package/ui/components/UIDynamicForm.vue CHANGED
@@ -1,50 +1,60 @@
1
1
  <template>
2
2
  <div className="ui-dynamic-form-external-sizing-wrapper" :style="props.card_size_styling">
3
3
  <!-- Component must be wrapped in a block so props such as className and style can be passed in from parent -->
4
- <UIDynamicFormTitleText v-if="props.title_style === 'outside' && hasUserTask" :style="props.title_style"
5
- :title="effectiveTitle" :customStyles="props.title_custom_text_styling" :titleIcon="props.title_icon"
6
- :collapsible="props.collapsible || (props.collapse_when_finished && formIsFinished)" :collapsed="collapsed"
7
- :toggleCollapse="toggleCollapse" />
4
+ <UIDynamicFormTitleText
5
+ v-if="props.title_style === 'outside' && hasUserTask"
6
+ :style="props.title_style"
7
+ :title="props.title_text"
8
+ :customStyles="props.title_custom_text_styling"
9
+ :titleIcon="props.title_icon"
10
+ :collapsible="props.collapsible || (props.collapse_when_finished && formIsFinished)"
11
+ :collapsed="collapsed"
12
+ :toggleCollapse="toggleCollapse"
13
+ />
8
14
  <div className="ui-dynamic-form-wrapper">
9
- <p v-if="hasUserTask" style="margin-bottom: 0px">
15
+ <p v-if="hasUserTask" style="margin-bottom: 0px;">
10
16
  <v-form ref="form" v-model="form" :class="dynamicClass">
11
- <UIDynamicFormTitleText v-if="props.title_style != 'outside'" :style="props.title_style"
12
- :title="effectiveTitle" :customStyles="props.title_custom_text_styling"
17
+ <UIDynamicFormTitleText
18
+ v-if="props.title_style != 'outside'"
19
+ :style="props.title_style"
20
+ :title="props.title_text"
21
+ :customStyles="props.title_custom_text_styling"
13
22
  :titleIcon="props.title_icon"
14
23
  :collapsible="props.collapsible || (props.collapse_when_finished && formIsFinished)"
15
- :collapsed="collapsed" :toggleCollapse="toggleCollapse" />
24
+ :collapsed="collapsed"
25
+ :toggleCollapse="toggleCollapse"
26
+ />
16
27
  <Transition name="cardCollapse">
17
28
  <div v-if="!collapsed">
18
- <div className="ui-dynamic-form-formfield-positioner" :style="props.inner_card_styling">
29
+ <div className="ui-dynamic-form-formfield-positioner">
19
30
  <FormKit id="form" type="group">
20
- <v-row v-for="(field, index) in fields()" :key="field"
21
- :style="getRowWidthStyling(field, index)">
31
+ <v-row v-for="(field, index) in fields()" :key="field" :style="getRowWidthStyling(field, index)">
22
32
  <v-col cols="12">
23
- <component :is="createComponent(field).type"
33
+ <component
34
+ :is="createComponent(field).type"
24
35
  v-if="createComponent(field).innerText"
25
- v-bind="createComponent(field).props" :ref="(el) => {
26
- if (index === 0) firstFormFieldRef = el;
27
- }
28
- " v-model="formData[field.id]">
36
+ v-bind="createComponent(field).props"
37
+ v-model="formData[field.id]"
38
+ >
29
39
  {{ createComponent(field).innerText }}
30
40
  </component>
31
41
  <div v-else-if="createComponent(field).type == 'v-slider'">
32
42
  <p class="formkit-label">{{ field.label }}</p>
33
- <component :is="createComponent(field).type"
34
- v-bind="createComponent(field).props" :ref="(el) => {
35
- if (index === 0) firstFormFieldRef = el;
36
- }
37
- " v-model="field.defaultValue" />
43
+ <component
44
+ :is="createComponent(field).type"
45
+ v-bind="createComponent(field).props"
46
+ v-model="field.defaultValue"
47
+ />
38
48
  <p class="formkit-help">
39
- {{ field.customForm ? JSON.parse(field.customForm).hint : undefined
40
- }}
49
+ {{ field.customForm ? JSON.parse(field.customForm).hint : undefined }}
41
50
  </p>
42
51
  </div>
43
- <component :is="createComponent(field).type" v-else
44
- v-bind="createComponent(field).props" :ref="(el) => {
45
- if (index === 0) firstFormFieldRef = el;
46
- }
47
- " v-model="formData[field.id]" />
52
+ <component
53
+ :is="createComponent(field).type"
54
+ v-else
55
+ v-bind="createComponent(field).props"
56
+ v-model="formData[field.id]"
57
+ />
48
58
  </v-col>
49
59
  </v-row>
50
60
  </FormKit>
@@ -53,20 +63,17 @@
53
63
  <v-row v-if="errorMsg.length > 0" style="padding: 12px">
54
64
  <v-alert type="error">Error: {{ errorMsg }}</v-alert>
55
65
  </v-row>
56
- <UIDynamicFormFooterAction v-if="props.actions_inside_card && actions.length > 0"
57
- :actions="actions" :actionCallback="actionFn" :formIsFinished="formIsFinished"
58
- style="padding: 16px; padding-top: 0px" />
66
+ <UIDynamicFormFooterAction v-if="props.actions_inside_card && actions.length > 0" :actions="actions" :actionCallback="actionFn" :formIsFinished="formIsFinished" style="padding: 16px; padding-top: 0px;" />
59
67
  </v-row>
60
68
  </div>
61
69
  </Transition>
62
70
  </v-form>
63
71
  </p>
64
72
  <p v-else>
65
- <v-alert v-if="props.waiting_info.length > 0 || props.waiting_title.length > 0"
66
- :text="props.waiting_info" :title="props.waiting_title" />
73
+ <v-alert v-if="props.waiting_info.length > 0 || props.waiting_title.length > 0" :text="props.waiting_info" :title="props.waiting_title" />
67
74
  </p>
68
75
  </div>
69
- <div v-if="!props.actions_inside_card && actions.length > 0 && hasUserTask" style="padding-top: 32px">
76
+ <div v-if="!props.actions_inside_card && actions.length > 0 && hasUserTask" style="padding-top: 32px;">
70
77
  <UIDynamicFormFooterAction :actions="actions" :actionCallback="actionFn" />
71
78
  </div>
72
79
  </div>
@@ -74,39 +81,22 @@
74
81
 
75
82
  <!-- eslint-disable no-case-declarations -->
76
83
  <script>
77
- import { de } from '@formkit/i18n'
78
84
  import { FormKit, defaultConfig, plugin } from '@formkit/vue'
79
- import { getCurrentInstance, markRaw, nextTick } from 'vue'
85
+ import { getCurrentInstance, markRaw } from 'vue'
80
86
 
81
87
  // eslint-disable-next-line import/no-unresolved
82
88
  import '@formkit/themes/genesis'
83
89
  import UIDynamicFormFooterAction from './FooterActions.vue'
84
90
  import UIDynamicFormTitleText from './TitleText.vue'
85
91
 
86
- // eslint-disable-next-line no-unused-vars
87
- function requiredIf({ value }, [targetField, expectedValue], node) {
88
- console.debug(arguments)
89
-
90
- const actual = node?.root?.value?.[targetField]
91
- const isEmpty = value === '' || value === null || value === undefined
92
-
93
- if (actual === expectedValue && isEmpty) {
94
- return false // oder: `return "Dieses Feld ist erforderlich."`
95
- }
96
-
97
- return true
98
- }
99
-
100
92
  export default {
101
93
  name: 'UIDynamicForm',
102
94
  components: {
103
- FormKit,
104
- UIDynamicFormFooterAction,
105
- UIDynamicFormTitleText
95
+ FormKit, UIDynamicFormFooterAction, UIDynamicFormTitleText
106
96
  },
107
97
  inject: ['$socket'],
108
98
  props: {
109
- /* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */
99
+ /* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */
110
100
  id: { type: String, required: true },
111
101
  props: { type: Object, default: () => ({}) },
112
102
  state: {
@@ -114,7 +104,7 @@ export default {
114
104
  default: () => ({ enabled: false, visible: false })
115
105
  }
116
106
  },
117
- setup(props) {
107
+ setup (props) {
118
108
  console.info('UIDynamicForm setup with:', props)
119
109
  console.debug('Vue function loaded correctly', markRaw)
120
110
 
@@ -123,14 +113,24 @@ export default {
123
113
 
124
114
  const formkitConfig = defaultConfig({
125
115
  theme: 'genesis',
126
- locales: { de },
127
- locale: 'de',
128
- // eslint-disable-next-line object-shorthand
129
- rules: { requiredIf: requiredIf }
116
+ rules: {
117
+ requiredIf: ({ value, name }, [targetField, expectedValue], node) => {
118
+ const actual = node?.root?.value?.[targetField]
119
+ if (actual === expectedValue && (!value || value === '')) {
120
+ return `Feld ${name} ist erforderlich, wenn ${targetField} = ${expectedValue}`
121
+ }
122
+ return true
123
+ }
124
+ },
125
+ messages: {
126
+ de: {
127
+ requiredIf: 'Dieses Feld ist erforderlich.'
128
+ }
129
+ }
130
130
  })
131
131
  app.use(plugin, formkitConfig)
132
132
  },
133
- data() {
133
+ data () {
134
134
  return {
135
135
  actions: [],
136
136
  formData: {},
@@ -139,66 +139,38 @@ export default {
139
139
  errorMsg: '',
140
140
  formIsFinished: false,
141
141
  msg: null,
142
- collapsed: false,
143
- firstFormFieldRef: null
142
+ collapsed: false
144
143
  }
145
144
  },
146
145
  computed: {
147
- dynamicClass() {
146
+ dynamicClass () {
148
147
  return `ui-dynamic-form-${this.theme} ui-dynamic-form-common`
149
148
  },
150
- dynamicFooterClass() {
149
+ dynamicFooterClass () {
151
150
  return `ui-dynamic-form-footer-${this.theme} ui-dynamic-form-footer-common`
152
151
  },
153
- hasUserTask() {
152
+ hasUserTask () {
154
153
  return !!this.userTask
155
154
  },
156
- totalOutputs() {
157
- return (
158
- this.props.options.length +
159
- (this.props.handle_confirmation_dialogs ? 2 : 0) +
160
- (this.props.trigger_on_change ? 1 : 0)
161
- )
162
- },
163
- isConfirmDialog() {
164
- return this.userTask.userTaskConfig.formFields.some((field) => field.type === 'confirm')
155
+ totalOutputs () {
156
+ return this.props.options.length + (this.props.handle_confirmation_dialogs ? 2 : 0) + (this.props.trigger_on_change ? 1 : 0)
165
157
  },
166
- effectiveTitle() {
167
- if (this.props.title_text_type === 'str') {
168
- return this.props.title_text
169
- } else if (this.props.title_text_type === 'msg') {
170
- return this.msg.dynamicTitle
171
- } else {
172
- return ''
173
- }
158
+ isConfirmDialog () {
159
+ return this.userTask.userTaskConfig.formFields.some(field => field.type === 'confirm')
174
160
  }
175
161
  },
176
162
  watch: {
177
163
  formData: {
178
- handler(newData, oldData) {
164
+ handler (newData, oldData) {
179
165
  if (this.props.trigger_on_change) {
180
166
  const res = { payload: { formData: newData, userTask: this.userTask } }
181
167
  this.send(res, this.totalOutputs - 1)
182
168
  }
183
169
  },
184
- collapsed(newVal) {
185
- if (!newVal && this.hasUserTask) {
186
- nextTick(() => {
187
- this.focusFirstFormField()
188
- })
189
- }
190
- },
191
- userTask(newVal) {
192
- if (newVal && !this.collapsed) {
193
- nextTick(() => {
194
- this.focusFirstFormField()
195
- })
196
- }
197
- },
198
170
  deep: true
199
171
  }
200
172
  },
201
- created() {
173
+ created () {
202
174
  const currentPath = window.location.pathname
203
175
  const lastPart = currentPath.substring(currentPath.lastIndexOf('/'))
204
176
 
@@ -218,7 +190,7 @@ export default {
218
190
  }
219
191
  }
220
192
  },
221
- mounted() {
193
+ mounted () {
222
194
  const elements = document.querySelectorAll('.formkit-input')
223
195
 
224
196
  elements.forEach((element) => {
@@ -235,541 +207,537 @@ export default {
235
207
  // tell Node-RED that we're loading a new instance of this widget
236
208
  this.$socket.emit('widget-load', this.id)
237
209
  },
238
- unmounted() {
210
+ unmounted () {
239
211
  /* Make sure, any events you subscribe to on SocketIO are unsubscribed to here */
240
212
  this.$socket?.off('widget-load' + this.id)
241
213
  this.$socket?.off('msg-input:' + this.id)
242
214
  },
243
215
  methods: {
244
- createComponent(field) {
216
+ createComponent (field) {
245
217
  const customForm = field.customForm ? JSON.parse(field.customForm) : {}
246
218
  const hint = customForm.hint
247
219
  const placeholder = customForm.placeholder
248
220
  const validation = customForm.validation
249
221
  const name = field.id
250
222
  const customProperties = customForm.customProperties ?? []
251
- const isReadOnly =
252
- this.props.readonly ||
253
- this.formIsFinished ||
254
- customProperties.find((entry) => ['readOnly', 'readonly'].includes(entry.name) && entry.value === 'true')
255
- ? 'true'
256
- : undefined
223
+ const isReadOnly = (
224
+ this.props.readonly || this.formIsFinished || customProperties.find(entry => ['readOnly', 'readonly'].includes(entry.name) && entry.value === 'true'))
225
+ ? 'true'
226
+ : undefined
257
227
  switch (field.type) {
258
- case 'long':
259
- return {
260
- type: 'FormKit',
261
- props: {
262
- type: 'number',
263
- id: field.id,
264
- name,
265
- label: field.label,
266
- required: field.required,
267
- value: this.formData[field.id],
268
- number: 'integer',
269
- help: hint,
270
- wrapperClass: '$remove:formkit-wrapper',
271
- labelClass: 'ui-dynamic-form-input-label',
272
- inputClass: `input-${this.theme}`,
273
- innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
274
- readonly: isReadOnly,
275
- validation,
276
- validationVisibility: 'live'
277
- }
228
+ case 'long':
229
+ return {
230
+ type: 'FormKit',
231
+ props: {
232
+ type: 'number',
233
+ id: field.id,
234
+ name,
235
+ label: field.label,
236
+ required: field.required,
237
+ value: this.formData[field.id],
238
+ number: 'integer',
239
+ help: hint,
240
+ wrapperClass: '$remove:formkit-wrapper',
241
+ labelClass: 'ui-dynamic-form-input-label',
242
+ inputClass: `input-${this.theme}`,
243
+ innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
244
+ readonly: isReadOnly,
245
+ validation,
246
+ validationVisibility: 'live'
278
247
  }
279
- case 'number':
280
- const step = field.customForm ? JSON.parse(field.customForm).step : undefined
281
- return {
282
- type: 'FormKit',
283
- props: {
284
- type: 'number',
285
- id: field.id,
286
- name,
287
- label: field.label,
288
- required: field.required,
289
- value: this.formData[field.id],
290
- step,
291
- help: hint,
292
- wrapperClass: '$remove:formkit-wrapper',
293
- labelClass: 'ui-dynamic-form-input-label',
294
- inputClass: `input-${this.theme}`,
295
- innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
296
- readonly: isReadOnly,
297
- validation,
298
- validationVisibility: 'live'
299
- }
300
- }
301
- case 'date':
302
- return {
303
- type: 'FormKit',
304
- props: {
305
- type: 'date',
306
- id: field.id,
307
- name,
308
- label: field.label,
309
- required: field.required,
310
- value: this.formData[field.id],
311
- help: hint,
312
- wrapperClass: '$remove:formkit-wrapper',
313
- labelClass: 'ui-dynamic-form-input-label',
314
- inputClass: `input-${this.theme}`,
315
- innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
316
- readonly: isReadOnly,
317
- validation,
318
- validationVisibility: 'live'
319
- }
320
- }
321
- case 'enum':
322
- const enums = field.enumValues.map((obj) => {
323
- return { value: obj.id, label: obj.name }
324
- })
325
- return {
326
- type: 'FormKit',
327
- props: {
328
- type: 'select', // JSON.parse(field.customForm).displayAs
329
- id: field.id,
330
- name,
331
- label: field.label,
332
- required: field.required,
333
- value: this.formData[field.id],
334
- options: enums,
335
- help: hint,
336
- wrapperClass: '$remove:formkit-wrapper',
337
- labelClass: 'ui-dynamic-form-input-label',
338
- inputClass: `input-${this.theme}`,
339
- innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
340
- readonly: isReadOnly,
341
- disabled: isReadOnly,
342
- validation,
343
- validationVisibility: 'live'
344
- }
345
- }
346
- case 'select':
347
- const selections = JSON.parse(field.customForm).entries.map((obj) => {
348
- return { value: obj.key, label: obj.value }
349
- })
350
- return {
351
- type: 'FormKit',
352
- props: {
353
- type: 'select', // JSON.parse(field.customForm).displayAs
354
- id: field.id,
355
- name,
356
- label: field.label,
357
- required: field.required,
358
- value: this.formData[field.id],
359
- options: selections,
360
- placeholder,
361
- help: hint,
362
- wrapperClass: '$remove:formkit-wrapper',
363
- labelClass: 'ui-dynamic-form-input-label',
364
- inputClass: `input-${this.theme}`,
365
- innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
366
- readonly: isReadOnly,
367
- disabled: isReadOnly,
368
- validation,
369
- validationVisibility: 'live'
370
- }
371
- }
372
- case 'string':
373
- return {
374
- type: 'FormKit',
375
- props: {
376
- type: 'text',
377
- id: field.id,
378
- name,
379
- label: field.label,
380
- required: field.required,
381
- value: this.formData[field.id],
382
- help: hint,
383
- placeholder,
384
- wrapperClass: '$remove:formkit-wrapper',
385
- labelClass: 'ui-dynamic-form-input-label',
386
- inputClass: `input-${this.theme}`,
387
- innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
388
- readonly: isReadOnly,
389
- validation,
390
- validationVisibility: 'live'
391
- }
392
- }
393
- case 'confirm':
394
- return {
395
- type: 'h3',
396
- innerText: field.label
248
+ }
249
+ case 'number':
250
+ const step = field.customForm ? JSON.parse(field.customForm).step : undefined
251
+ return {
252
+ type: 'FormKit',
253
+ props: {
254
+ type: 'number',
255
+ id: field.id,
256
+ name,
257
+ label: field.label,
258
+ required: field.required,
259
+ value: this.formData[field.id],
260
+ step,
261
+ help: hint,
262
+ wrapperClass: '$remove:formkit-wrapper',
263
+ labelClass: 'ui-dynamic-form-input-label',
264
+ inputClass: `input-${this.theme}`,
265
+ innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
266
+ readonly: isReadOnly,
267
+ validation,
268
+ validationVisibility: 'live'
397
269
  }
398
- case 'boolean':
399
- return {
400
- type: 'FormKit',
401
- props: {
402
- type: 'checkbox',
403
- id: field.id,
404
- name,
405
- label: field.label,
406
- required: field.required,
407
- value: this.formData[field.id],
408
- help: hint,
409
- labelClass: 'ui-dynamic-form-input-label',
410
- inputClass: `input-${this.theme}`,
411
- innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
412
- readonly: isReadOnly,
413
- disabled: isReadOnly,
414
- validation,
415
- validationVisibility: 'live'
416
- }
270
+ }
271
+ case 'date':
272
+ return {
273
+ type: 'FormKit',
274
+ props: {
275
+ type: 'date',
276
+ id: field.id,
277
+ name,
278
+ label: field.label,
279
+ required: field.required,
280
+ value: this.formData[field.id],
281
+ help: hint,
282
+ wrapperClass: '$remove:formkit-wrapper',
283
+ labelClass: 'ui-dynamic-form-input-label',
284
+ inputClass: `input-${this.theme}`,
285
+ innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
286
+ readonly: isReadOnly,
287
+ validation,
288
+ validationVisibility: 'live'
417
289
  }
418
- case 'file':
419
- const multiple = field.customForm ? JSON.parse(field.customForm).multiple === 'true' : false
420
- return {
421
- type: 'FormKit',
422
- props: {
423
- type: 'file',
424
- id: field.id,
425
- name,
426
- label: field.label,
427
- required: field.required,
428
- value: this.formData[field.id],
429
- help: hint,
430
- innerClass: 'reset-background',
431
- wrapperClass: '$remove:formkit-wrapper',
432
- labelClass: 'ui-dynamic-form-input-label',
433
- inputClass: `input-${this.theme}`,
434
- // innerClass: ui-dynamic-form-input-outlines `${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
435
- readonly: isReadOnly,
436
- disabled: isReadOnly,
437
- multiple,
438
- validation,
439
- validationVisibility: 'live'
440
- }
290
+ }
291
+ case 'enum':
292
+ const enums = field.enumValues.map((obj) => {
293
+ return { value: obj.id, label: obj.name }
294
+ })
295
+ return {
296
+ type: 'FormKit',
297
+ props: {
298
+ type: 'select', // JSON.parse(field.customForm).displayAs
299
+ id: field.id,
300
+ name,
301
+ label: field.label,
302
+ required: field.required,
303
+ value: this.formData[field.id],
304
+ options: enums,
305
+ help: hint,
306
+ wrapperClass: '$remove:formkit-wrapper',
307
+ labelClass: 'ui-dynamic-form-input-label',
308
+ inputClass: `input-${this.theme}`,
309
+ innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
310
+ readonly: isReadOnly,
311
+ disabled: isReadOnly,
312
+ validation,
313
+ validationVisibility: 'live'
441
314
  }
442
- case 'checkbox':
443
- const options = JSON.parse(field.customForm).entries.map((obj) => {
444
- return { value: obj.key, label: obj.value }
445
- })
446
- return {
447
- type: 'FormKit',
448
- props: {
449
- type: 'checkbox',
450
- id: field.id,
451
- name,
452
- label: field.label,
453
- required: field.required,
454
- value: this.formData[field.id],
455
- options,
456
- help: hint,
457
- fieldsetClass: 'custom-fieldset',
458
- labelClass: 'ui-dynamic-form-input-label',
459
- inputClass: `input-${this.theme}`,
460
- innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
461
- readonly: isReadOnly,
462
- disabled: isReadOnly,
463
- validation,
464
- validationVisibility: 'live'
465
- }
315
+ }
316
+ case 'select':
317
+ const selections = JSON.parse(field.customForm).entries.map((obj) => {
318
+ return { value: obj.key, label: obj.value }
319
+ })
320
+ return {
321
+ type: 'FormKit',
322
+ props: {
323
+ type: 'select', // JSON.parse(field.customForm).displayAs
324
+ id: field.id,
325
+ name,
326
+ label: field.label,
327
+ required: field.required,
328
+ value: this.formData[field.id],
329
+ options: selections,
330
+ placeholder,
331
+ help: hint,
332
+ wrapperClass: '$remove:formkit-wrapper',
333
+ labelClass: 'ui-dynamic-form-input-label',
334
+ inputClass: `input-${this.theme}`,
335
+ innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
336
+ readonly: isReadOnly,
337
+ disabled: isReadOnly,
338
+ validation,
339
+ validationVisibility: 'live'
466
340
  }
467
- case 'color':
468
- return {
469
- type: 'FormKit',
470
- props: {
471
- type: 'color',
472
- id: field.id,
473
- name,
474
- label: field.label,
475
- required: field.required,
476
- value: this.formData[field.id],
477
- help: hint,
478
- readonly: isReadOnly,
479
- disabled: isReadOnly,
480
- validation,
481
- validationVisibility: 'live'
482
- }
341
+ }
342
+ case 'string':
343
+ return {
344
+ type: 'FormKit',
345
+ props: {
346
+ type: 'text',
347
+ id: field.id,
348
+ name,
349
+ label: field.label,
350
+ required: field.required,
351
+ value: this.formData[field.id],
352
+ help: hint,
353
+ placeholder,
354
+ wrapperClass: '$remove:formkit-wrapper',
355
+ labelClass: 'ui-dynamic-form-input-label',
356
+ inputClass: `input-${this.theme}`,
357
+ innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
358
+ readonly: isReadOnly,
359
+ validation,
360
+ validationVisibility: 'live'
483
361
  }
484
- case 'datetime-local':
485
- return {
486
- type: 'FormKit',
487
- props: {
488
- type: 'datetime-local',
489
- id: field.id,
490
- name,
491
- label: field.label,
492
- required: field.required,
493
- value: this.formData[field.id],
494
- help: hint,
495
- wrapperClass: '$remove:formkit-wrapper',
496
- labelClass: 'ui-dynamic-form-input-label',
497
- inputClass: `input-${this.theme}`,
498
- innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
499
- readonly: isReadOnly,
500
- validation,
501
- validationVisibility: 'live'
502
- }
362
+ }
363
+ case 'confirm':
364
+ return {
365
+ type: 'h3',
366
+ innerText: field.label
367
+ }
368
+ case 'boolean':
369
+ return {
370
+ type: 'FormKit',
371
+ props: {
372
+ type: 'checkbox',
373
+ id: field.id,
374
+ name,
375
+ label: field.label,
376
+ required: field.required,
377
+ value: this.formData[field.id],
378
+ help: hint,
379
+ labelClass: 'ui-dynamic-form-input-label',
380
+ inputClass: `input-${this.theme}`,
381
+ innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
382
+ readonly: isReadOnly,
383
+ disabled: isReadOnly,
384
+ validation,
385
+ validationVisibility: 'live'
503
386
  }
504
- case 'email':
505
- return {
506
- type: 'FormKit',
507
- props: {
508
- type: 'email',
509
- id: field.id,
510
- name,
511
- label: field.label,
512
- required: field.required,
513
- value: this.formData[field.id],
514
- help: hint,
515
- placeholder,
516
- wrapperClass: '$remove:formkit-wrapper',
517
- labelClass: 'ui-dynamic-form-input-label',
518
- inputClass: `input-${this.theme}`,
519
- innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
520
- readonly: isReadOnly,
521
- validation,
522
- validationVisibility: 'live'
523
- }
387
+ }
388
+ case 'file':
389
+ return {
390
+ type: 'FormKit',
391
+ props: {
392
+ type: 'file',
393
+ id: field.id,
394
+ name,
395
+ label: field.label,
396
+ required: field.required,
397
+ value: this.formData[field.id],
398
+ help: hint,
399
+ innerClass: 'reset-background',
400
+ wrapperClass: '$remove:formkit-wrapper',
401
+ labelClass: 'ui-dynamic-form-input-label',
402
+ inputClass: `input-${this.theme}`,
403
+ // innerClass: ui-dynamic-form-input-outlines `${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
404
+ readonly: isReadOnly,
405
+ disabled: isReadOnly,
406
+ validation,
407
+ validationVisibility: 'live'
524
408
  }
525
- case 'header':
526
- let typeToUse = 'h1'
527
- if (field.customForm && JSON.parse(field.customForm).style === 'heading_2') {
528
- typeToUse = 'h2'
409
+ }
410
+ case 'checkbox':
411
+ const options = JSON.parse(field.customForm).entries.map((obj) => {
412
+ return { value: obj.key, label: obj.value }
413
+ })
414
+ return {
415
+ type: 'FormKit',
416
+ props: {
417
+ type: 'checkbox',
418
+ id: field.id,
419
+ name,
420
+ label: field.label,
421
+ required: field.required,
422
+ value: this.formData[field.id],
423
+ options,
424
+ help: hint,
425
+ fieldsetClass: 'custom-fieldset',
426
+ labelClass: 'ui-dynamic-form-input-label',
427
+ inputClass: `input-${this.theme}`,
428
+ innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
429
+ readonly: isReadOnly,
430
+ disabled: isReadOnly,
431
+ validation,
432
+ validationVisibility: 'live'
529
433
  }
530
- if (field.customForm && JSON.parse(field.customForm).style === 'heading_3') {
531
- typeToUse = 'h3'
434
+ }
435
+ case 'color':
436
+ return {
437
+ type: 'FormKit',
438
+ props: {
439
+ type: 'color',
440
+ id: field.id,
441
+ name,
442
+ label: field.label,
443
+ required: field.required,
444
+ value: this.formData[field.id],
445
+ help: hint,
446
+ readonly: isReadOnly,
447
+ disabled: isReadOnly,
448
+ validation,
449
+ validationVisibility: 'live'
532
450
  }
533
- return {
534
- type: typeToUse,
535
- innerText: this.formData[field.id]
451
+ }
452
+ case 'datetime-local':
453
+ return {
454
+ type: 'FormKit',
455
+ props: {
456
+ type: 'datetime-local',
457
+ id: field.id,
458
+ name,
459
+ label: field.label,
460
+ required: field.required,
461
+ value: this.formData[field.id],
462
+ help: hint,
463
+ wrapperClass: '$remove:formkit-wrapper',
464
+ labelClass: 'ui-dynamic-form-input-label',
465
+ inputClass: `input-${this.theme}`,
466
+ innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
467
+ readonly: isReadOnly,
468
+ validation,
469
+ validationVisibility: 'live'
536
470
  }
537
- case 'hidden':
538
- return {
539
- type: 'input',
540
- props: {
541
- type: 'hidden',
542
- value: this.formData[field.id]
543
- }
471
+ }
472
+ case 'email':
473
+ return {
474
+ type: 'FormKit',
475
+ props: {
476
+ type: 'email',
477
+ id: field.id,
478
+ name,
479
+ label: field.label,
480
+ required: field.required,
481
+ value: this.formData[field.id],
482
+ help: hint,
483
+ placeholder,
484
+ wrapperClass: '$remove:formkit-wrapper',
485
+ labelClass: 'ui-dynamic-form-input-label',
486
+ inputClass: `input-${this.theme}`,
487
+ innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
488
+ readonly: isReadOnly,
489
+ validation,
490
+ validationVisibility: 'live'
544
491
  }
545
- case 'month':
546
- return {
547
- type: 'FormKit',
548
- props: {
549
- type: 'month',
550
- id: field.id,
551
- name,
552
- label: field.label,
553
- required: field.required,
554
- value: this.formData[field.id],
555
- help: hint,
556
- wrapperClass: '$remove:formkit-wrapper',
557
- labelClass: 'ui-dynamic-form-input-label',
558
- inputClass: `input-${this.theme}`,
559
- innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
560
- readonly: isReadOnly,
561
- validation,
562
- validationVisibility: 'live'
563
- }
492
+ }
493
+ case 'header':
494
+ let typeToUse = 'h1'
495
+ if (field.customForm && JSON.parse(field.customForm).style === 'heading_2') {
496
+ typeToUse = 'h2'
497
+ }
498
+ if (field.customForm && JSON.parse(field.customForm).style === 'heading_3') {
499
+ typeToUse = 'h3'
500
+ }
501
+ return {
502
+ type: typeToUse,
503
+ innerText: this.formData[field.id]
504
+ }
505
+ case 'hidden':
506
+ return {
507
+ type: 'input',
508
+ props: {
509
+ type: 'hidden',
510
+ value: this.formData[field.id]
564
511
  }
565
- case 'paragraph':
566
- return {
567
- type: 'p',
568
- innerText: this.formData[field.id]
512
+ }
513
+ case 'month':
514
+ return {
515
+ type: 'FormKit',
516
+ props: {
517
+ type: 'month',
518
+ id: field.id,
519
+ name,
520
+ label: field.label,
521
+ required: field.required,
522
+ value: this.formData[field.id],
523
+ help: hint,
524
+ wrapperClass: '$remove:formkit-wrapper',
525
+ labelClass: 'ui-dynamic-form-input-label',
526
+ inputClass: `input-${this.theme}`,
527
+ innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
528
+ readonly: isReadOnly,
529
+ validation,
530
+ validationVisibility: 'live'
569
531
  }
570
- case 'password':
571
- return {
572
- type: 'FormKit',
573
- props: {
574
- type: 'password',
575
- id: field.id,
576
- name,
577
- label: field.label,
578
- required: field.required,
579
- value: this.formData[field.id],
580
- help: hint,
581
- placeholder,
582
- wrapperClass: '$remove:formkit-wrapper',
583
- labelClass: 'ui-dynamic-form-input-label',
584
- inputClass: `input-${this.theme}`,
585
- innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
586
- readonly: isReadOnly,
587
- validation,
588
- validationVisibility: 'live'
589
- }
532
+ }
533
+ case 'paragraph':
534
+ return {
535
+ type: 'p',
536
+ innerText: this.formData[field.id]
537
+ }
538
+ case 'password':
539
+ return {
540
+ type: 'FormKit',
541
+ props: {
542
+ type: 'password',
543
+ id: field.id,
544
+ name,
545
+ label: field.label,
546
+ required: field.required,
547
+ value: this.formData[field.id],
548
+ help: hint,
549
+ placeholder,
550
+ wrapperClass: '$remove:formkit-wrapper',
551
+ labelClass: 'ui-dynamic-form-input-label',
552
+ inputClass: `input-${this.theme}`,
553
+ innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
554
+ readonly: isReadOnly,
555
+ validation,
556
+ validationVisibility: 'live'
590
557
  }
591
- case 'radio':
592
- const radioOptions = JSON.parse(field.customForm).entries.map((obj) => {
593
- return { value: obj.key, label: obj.value }
594
- })
595
- return {
596
- type: 'FormKit',
597
- props: {
598
- type: 'radio',
599
- id: field.id,
600
- name,
601
- label: field.label,
602
- required: field.required,
603
- value: this.formData[field.id],
604
- options: radioOptions,
605
- help: hint,
606
- fieldsetClass: 'custom-fieldset',
607
- labelClass: 'ui-dynamic-form-input-label',
608
- inputClass: `input-${this.theme}`,
609
- innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
610
- readonly: isReadOnly,
611
- disabled: isReadOnly,
612
- validation,
613
- validationVisibility: 'live'
614
- }
558
+ }
559
+ case 'radio':
560
+ const radioOptions = JSON.parse(field.customForm).entries.map((obj) => {
561
+ return { value: obj.key, label: obj.value }
562
+ })
563
+ return {
564
+ type: 'FormKit',
565
+ props: {
566
+ type: 'radio',
567
+ id: field.id,
568
+ name,
569
+ label: field.label,
570
+ required: field.required,
571
+ value: this.formData[field.id],
572
+ options: radioOptions,
573
+ help: hint,
574
+ fieldsetClass: 'custom-fieldset',
575
+ labelClass: 'ui-dynamic-form-input-label',
576
+ inputClass: `input-${this.theme}`,
577
+ innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
578
+ readonly: isReadOnly,
579
+ disabled: isReadOnly,
580
+ validation,
581
+ validationVisibility: 'live'
615
582
  }
616
- case 'range':
617
- const customForm = JSON.parse(field.customForm)
618
- return {
619
- type: 'v-slider',
620
- props: {
621
- id: field.id,
622
- name,
623
- // label: field.label,
624
- required: field.required,
625
- // value: this.formData[field.id],
626
- // help: hint,
627
- min: customForm.min,
628
- max: customForm.max,
629
- step: customForm.step,
630
- thumbLabel: true,
631
- // wrapperClass: '$remove:formkit-wrapper',
632
- labelClass: 'ui-dynamic-form-input-label',
633
- // inputClass: `input-${this.theme}`,
634
- // innerClass: ui-dynamic-form-input-outlines `${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
635
- readonly: isReadOnly,
636
- disabled: isReadOnly,
637
- validation,
638
- validationVisibility: 'live'
639
- }
583
+ }
584
+ case 'range':
585
+ const customForm = JSON.parse(field.customForm)
586
+ return {
587
+ type: 'v-slider',
588
+ props: {
589
+ id: field.id,
590
+ name,
591
+ // label: field.label,
592
+ required: field.required,
593
+ // value: this.formData[field.id],
594
+ // help: hint,
595
+ min: customForm.min,
596
+ max: customForm.max,
597
+ step: customForm.step,
598
+ thumbLabel: true,
599
+ // wrapperClass: '$remove:formkit-wrapper',
600
+ labelClass: 'ui-dynamic-form-input-label',
601
+ // inputClass: `input-${this.theme}`,
602
+ // innerClass: ui-dynamic-form-input-outlines `${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
603
+ readonly: isReadOnly,
604
+ disabled: isReadOnly,
605
+ validation,
606
+ validationVisibility: 'live'
640
607
  }
641
- case 'tel':
642
- return {
643
- type: 'FormKit',
644
- props: {
645
- type: 'tel' /* with pro component mask more good */,
646
- id: field.id,
647
- name,
648
- label: field.label,
649
- required: field.required,
650
- value: this.formData[field.id],
651
- help: hint,
652
- placeholder,
653
- wrapperClass: '$remove:formkit-wrapper',
654
- labelClass: 'ui-dynamic-form-input-label',
655
- inputClass: `input-${this.theme}`,
656
- innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
657
- readonly: isReadOnly,
658
- validation,
659
- validationVisibility: 'live'
660
- }
608
+ }
609
+ case 'tel':
610
+ return {
611
+ type: 'FormKit',
612
+ props: {
613
+ type: 'tel' /* with pro component mask more good */,
614
+ id: field.id,
615
+ name,
616
+ label: field.label,
617
+ required: field.required,
618
+ value: this.formData[field.id],
619
+ help: hint,
620
+ placeholder,
621
+ wrapperClass: '$remove:formkit-wrapper',
622
+ labelClass: 'ui-dynamic-form-input-label',
623
+ inputClass: `input-${this.theme}`,
624
+ innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
625
+ readonly: isReadOnly,
626
+ validation,
627
+ validationVisibility: 'live'
661
628
  }
662
- case 'textarea':
663
- const rows = field.customForm ? JSON.parse(field.customForm).rows : undefined
664
- return {
665
- type: 'FormKit',
666
- props: {
667
- type: 'textarea' /* with pro component mask more good */,
668
- id: field.id,
669
- name,
670
- label: field.label,
671
- required: field.required,
672
- value: this.formData[field.id],
673
- rows,
674
- help: hint,
675
- placeholder,
676
- wrapperClass: '$remove:formkit-wrapper',
677
- labelClass: 'ui-dynamic-form-input-label',
678
- inputClass: `input-${this.theme}`,
679
- innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
680
- readonly: isReadOnly,
681
- validation,
682
- validationVisibility: 'live'
683
- }
629
+ }
630
+ case 'textarea':
631
+ const rows = field.customForm ? JSON.parse(field.customForm).rows : undefined
632
+ return {
633
+ type: 'FormKit',
634
+ props: {
635
+ type: 'textarea' /* with pro component mask more good */,
636
+ id: field.id,
637
+ name,
638
+ label: field.label,
639
+ required: field.required,
640
+ value: this.formData[field.id],
641
+ rows,
642
+ help: hint,
643
+ placeholder,
644
+ wrapperClass: '$remove:formkit-wrapper',
645
+ labelClass: 'ui-dynamic-form-input-label',
646
+ inputClass: `input-${this.theme}`,
647
+ innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
648
+ readonly: isReadOnly,
649
+ validation,
650
+ validationVisibility: 'live'
684
651
  }
685
- case 'time':
686
- return {
687
- type: 'FormKit',
688
- props: {
689
- type: 'time' /* with pro component mask more good */,
690
- id: field.id,
691
- name,
692
- label: field.label,
693
- required: field.required,
694
- value: this.formData[field.id],
695
- help: hint,
696
- placeholder,
697
- wrapperClass: '$remove:formkit-wrapper',
698
- labelClass: 'ui-dynamic-form-input-label',
699
- inputClass: `input-${this.theme}`,
700
- innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
701
- readonly: isReadOnly,
702
- validation,
703
- validationVisibility: 'live'
704
- }
652
+ }
653
+ case 'time':
654
+ return {
655
+ type: 'FormKit',
656
+ props: {
657
+ type: 'time' /* with pro component mask more good */,
658
+ id: field.id,
659
+ name,
660
+ label: field.label,
661
+ required: field.required,
662
+ value: this.formData[field.id],
663
+ help: hint,
664
+ placeholder,
665
+ wrapperClass: '$remove:formkit-wrapper',
666
+ labelClass: 'ui-dynamic-form-input-label',
667
+ inputClass: `input-${this.theme}`,
668
+ innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
669
+ readonly: isReadOnly,
670
+ validation,
671
+ validationVisibility: 'live'
705
672
  }
706
- case 'url':
707
- return {
708
- type: 'FormKit',
709
- props: {
710
- type: 'url',
711
- id: field.id,
712
- name,
713
- label: field.label,
714
- required: field.required,
715
- value: this.formData[field.id],
716
- help: hint,
717
- placeholder,
718
- wrapperClass: '$remove:formkit-wrapper',
719
- labelClass: 'ui-dynamic-form-input-label',
720
- inputClass: `input-${this.theme}`,
721
- innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
722
- readonly: isReadOnly,
723
- validation,
724
- validationVisibility: 'live'
725
- }
673
+ }
674
+ case 'url':
675
+ return {
676
+ type: 'FormKit',
677
+ props: {
678
+ type: 'url',
679
+ id: field.id,
680
+ name,
681
+ label: field.label,
682
+ required: field.required,
683
+ value: this.formData[field.id],
684
+ help: hint,
685
+ placeholder,
686
+ wrapperClass: '$remove:formkit-wrapper',
687
+ labelClass: 'ui-dynamic-form-input-label',
688
+ inputClass: `input-${this.theme}`,
689
+ innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
690
+ readonly: isReadOnly,
691
+ validation,
692
+ validationVisibility: 'live'
726
693
  }
727
- case 'week':
728
- return {
729
- type: 'FormKit',
730
- props: {
731
- type: 'week',
732
- id: field.id,
733
- name,
734
- label: field.label,
735
- required: field.required,
736
- value: this.formData[field.id],
737
- help: hint,
738
- placeholder,
739
- wrapperClass: '$remove:formkit-wrapper',
740
- labelClass: 'ui-dynamic-form-input-label',
741
- inputClass: `input-${this.theme}`,
742
- innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
743
- readonly: isReadOnly,
744
- validation,
745
- validationVisibility: 'live'
746
- }
694
+ }
695
+ case 'week':
696
+ return {
697
+ type: 'FormKit',
698
+ props: {
699
+ type: 'week',
700
+ id: field.id,
701
+ name,
702
+ label: field.label,
703
+ required: field.required,
704
+ value: this.formData[field.id],
705
+ help: hint,
706
+ placeholder,
707
+ wrapperClass: '$remove:formkit-wrapper',
708
+ labelClass: 'ui-dynamic-form-input-label',
709
+ inputClass: `input-${this.theme}`,
710
+ innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
711
+ readonly: isReadOnly,
712
+ validation,
713
+ validationVisibility: 'live'
747
714
  }
748
- default:
749
- return {
750
- type: 'FormKit',
751
- props: {
752
- type: field.type,
753
- id: field.id,
754
- name,
755
- label: field.label,
756
- required: field.required,
757
- value: this.formData[field.id],
758
- help: hint,
759
- labelClass: 'ui-dynamic-form-input-label',
760
- inputClass: `input-${this.theme}`,
761
- innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
762
- readonly: isReadOnly,
763
- validation,
764
- validationVisibility: 'live'
765
- }
715
+ }
716
+ default:
717
+ return {
718
+ type: 'FormKit',
719
+ props: {
720
+ type: field.type,
721
+ id: field.id,
722
+ name,
723
+ label: field.label,
724
+ required: field.required,
725
+ value: this.formData[field.id],
726
+ help: hint,
727
+ labelClass: 'ui-dynamic-form-input-label',
728
+ inputClass: `input-${this.theme}`,
729
+ innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
730
+ readonly: isReadOnly,
731
+ validation,
732
+ validationVisibility: 'live'
766
733
  }
734
+ }
767
735
  }
768
736
  },
769
- toggleCollapse() {
737
+ toggleCollapse () {
770
738
  this.collapsed = !this.collapsed
771
739
  },
772
- getRowWidthStyling(field, index) {
740
+ getRowWidthStyling (field, index) {
773
741
  let style = ''
774
742
  if (index === 0) {
775
743
  style += 'margin-top: 12px;'
@@ -777,11 +745,11 @@ export default {
777
745
  if (field.type === 'header') {
778
746
  style += 'flex-basis: 100%;'
779
747
  } else {
780
- style += `flex-basis: ${(1 / this.props.form_columns) * 100}%;`
748
+ style += `flex-basis: ${1 / this.props.form_columns * 100}%;`
781
749
  }
782
750
  return style
783
751
  },
784
- fields() {
752
+ fields () {
785
753
  const aFields = this.userTask.userTaskConfig?.formFields ?? []
786
754
  const fieldMap = aFields.map((field) => ({
787
755
  ...field,
@@ -791,15 +759,15 @@ export default {
791
759
  return fieldMap
792
760
  },
793
761
  /*
794
- widget-action just sends a msg to Node-RED, it does not store the msg state server-side
795
- alternatively, you can use widget-change, which will also store the msg in the Node's datastore
796
- */
797
- send(msg, index) {
762
+ widget-action just sends a msg to Node-RED, it does not store the msg state server-side
763
+ alternatively, you can use widget-change, which will also store the msg in the Node's datastore
764
+ */
765
+ send (msg, index) {
798
766
  const msgArr = []
799
767
  msgArr[index] = msg
800
768
  this.$socket.emit('widget-action', this.id, msgArr)
801
769
  },
802
- init(msg) {
770
+ init (msg) {
803
771
  this.msg = msg
804
772
  if (!msg) {
805
773
  return
@@ -818,7 +786,7 @@ export default {
818
786
  }
819
787
 
820
788
  const formFields = this.userTask.userTaskConfig.formFields
821
- const formFieldIds = formFields.map((ff) => ff.id)
789
+ const formFieldIds = formFields.map(ff => ff.id)
822
790
  const initialValues = this.userTask.startToken
823
791
  const finishedFormData = msg.payload.formData
824
792
  this.formIsFinished = !!msg.payload.formData
@@ -834,45 +802,34 @@ export default {
834
802
  const customForm = field.customForm ? JSON.parse(field.customForm) : {}
835
803
  const confirmText = customForm.confirmButtonText ?? 'Confirm'
836
804
  const declineText = customForm.declineButtonText ?? 'Decline'
837
- this.actions = [
838
- {
839
- alignment: 'right',
840
- primary: 'false',
841
- label: declineText,
842
- condition: ''
843
- },
844
- {
845
- alignment: 'right',
846
- primary: 'true',
847
- label: confirmText,
848
- condition: ''
849
- }
850
- ]
805
+ this.actions = [{
806
+ alignment: 'right',
807
+ primary: 'false',
808
+ label: declineText,
809
+ condition: ''
810
+ }, {
811
+ alignment: 'right',
812
+ primary: 'true',
813
+ label: confirmText,
814
+ condition: ''
815
+ }]
851
816
  }
852
817
  })
853
818
  }
854
819
 
855
820
  if (initialValues) {
856
- Object.keys(initialValues)
857
- .filter((key) => formFieldIds.includes(key))
858
- .forEach((key) => {
859
- this.formData[key] = initialValues[key]
860
- })
821
+ Object.keys(initialValues).filter(key => formFieldIds.includes(key)).forEach((key) => {
822
+ this.formData[key] = initialValues[key]
823
+ })
861
824
  }
862
825
 
863
826
  if (this.formIsFinished) {
864
- Object.keys(finishedFormData)
865
- .filter((key) => formFieldIds.includes(key))
866
- .forEach((key) => {
867
- this.formData[key] = finishedFormData[key]
868
- })
827
+ Object.keys(finishedFormData).filter(key => formFieldIds.includes(key)).forEach(key => {
828
+ this.formData[key] = finishedFormData[key]
829
+ })
869
830
  }
870
-
871
- nextTick(() => {
872
- this.focusFirstFormField()
873
- })
874
831
  },
875
- actionFn(action) {
832
+ actionFn (action) {
876
833
  if (action.label === 'Speichern' || action.label === 'Speichern und nächster') {
877
834
  const formkitInputs = this.$refs.form.$el.querySelectorAll('.formkit-outer')
878
835
  let allComplete = true
@@ -900,15 +857,14 @@ export default {
900
857
  msg.payload = { formData: this.formData, userTask: this.userTask }
901
858
  this.send(
902
859
  msg,
903
- this.actions.findIndex((element) => element.label === action.label) +
904
- (this.isConfirmDialog ? this.props.options.length : 0)
860
+ this.actions.findIndex((element) => element.label === action.label) + (this.isConfirmDialog ? this.props.options.length : 0)
905
861
  )
906
862
  // TODO: mm - end
907
863
  } else {
908
864
  this.showError(action.errorMessage)
909
865
  }
910
866
  },
911
- checkCondition(condition) {
867
+ checkCondition (condition) {
912
868
  if (condition === '') return true
913
869
  try {
914
870
  // eslint-disable-next-line no-new-func
@@ -920,38 +876,13 @@ export default {
920
876
  return false
921
877
  }
922
878
  },
923
- showError(errMsg) {
879
+ showError (errMsg) {
924
880
  this.errorMsg = errMsg
925
- },
926
- focusFirstFormField() {
927
- if (this.collapsed || !this.hasUserTask) {
928
- return
929
- }
930
-
931
- if (this.firstFormFieldRef) {
932
- let inputElement = null
933
-
934
- if (this.firstFormFieldRef.node && this.firstFormFieldRef.node.input instanceof HTMLElement) {
935
- inputElement = this.firstFormFieldRef.node.input
936
- } else if (this.firstFormFieldRef.$el instanceof HTMLElement) {
937
- if (['INPUT', 'TEXTAREA', 'SELECT'].includes(this.firstFormFieldRef.$el.tagName)) {
938
- inputElement = this.firstFormFieldRef.$el
939
- } else {
940
- inputElement = this.firstFormFieldRef.$el.querySelector('input:not([type="hidden"]), textarea, select')
941
- }
942
- }
943
-
944
- if (inputElement) {
945
- inputElement.focus()
946
- } else {
947
- console.warn('Could not find a focusable input element for the first form field.')
948
- }
949
- }
950
881
  }
951
882
  }
952
883
  }
953
884
 
954
- function mapItems(type, field) {
885
+ function mapItems (type, field) {
955
886
  if (type === 'enum') {
956
887
  return field.enumValues.map((enumValue) => ({
957
888
  title: enumValue.name,