diff --git a/nodes/icons/endevent_finished_listener_002.svg b/nodes/icons/endevent_finished_listener_002.svg
deleted file mode 100644
index ea54f4d..0000000
--- a/nodes/icons/endevent_finished_listener_002.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/nodes/icons/ui_dynamic_form.svg b/nodes/icons/ui_dynamic_form.svg
new file mode 100644
index 0000000..92fe836
--- /dev/null
+++ b/nodes/icons/ui_dynamic_form.svg
@@ -0,0 +1,6 @@
+
diff --git a/nodes/ui-dynamic-form.html b/nodes/ui-dynamic-form.html
index 381a829..3128875 100644
--- a/nodes/ui-dynamic-form.html
+++ b/nodes/ui-dynamic-form.html
@@ -40,7 +40,7 @@
outputLabels: function (index) {
return this.options[index].label;
},
- icon: 'endevent_finished_listener_002.svg',
+ icon: 'ui_dynamic_form.svg',
label: function () {
return this.name || 'dynamic-form';
},
diff --git a/ui/components/UIDynamicForm.vue b/ui/components/UIDynamicForm.vue
index 2af7097..2bbb196 100644
--- a/ui/components/UIDynamicForm.vue
+++ b/ui/components/UIDynamicForm.vue
@@ -5,7 +5,14 @@
-
+
+ {{ createComponent(field).innerText }}
+
+
@@ -131,6 +138,7 @@ export default {
methods: {
createComponent(field) {
const hint = field.customForm ? JSON.parse(field.customForm).hint : undefined;
+ const placeholder = field.customForm ? JSON.parse(field.customForm).placeholder : undefined;
switch (field.type) {
case 'long':
return {
@@ -189,6 +197,24 @@ export default {
wrapperClass: '$remove:formkit-wrapper',
},
};
+ case 'select':
+ const selections = JSON.parse(field.customForm).entries.map((obj) => {
+ return { value: obj.key, label: obj.value };
+ });
+ return {
+ type: 'FormKit',
+ props: {
+ type: 'select', // JSON.parse(field.customForm).displayAs
+ id: field.id,
+ label: field.label,
+ required: field.required,
+ value: field.defaultValue,
+ options: selections,
+ placeholder: placeholder,
+ help: hint,
+ wrapperClass: '$remove:formkit-wrapper',
+ },
+ };
case 'string':
return {
type: 'FormKit',
@@ -199,6 +225,7 @@ export default {
required: field.required,
value: field.defaultValue,
help: hint,
+ placeholder: placeholder,
wrapperClass: '$remove:formkit-wrapper',
},
};
@@ -228,6 +255,222 @@ export default {
wrapperClass: '$remove:formkit-wrapper',
},
};
+ case 'checkbox':
+ const options = JSON.parse(field.customForm).entries.map((obj) => {
+ return { value: obj.key, label: obj.value };
+ });
+ return {
+ type: 'FormKit',
+ props: {
+ type: 'checkbox',
+ id: field.id,
+ label: field.label,
+ required: field.required,
+ value: field.defaultValue,
+ options: options,
+ help: hint,
+ fieldsetClass: 'custom-fieldset',
+ },
+ };
+ case 'color':
+ return {
+ type: 'FormKit',
+ props: {
+ type: 'color',
+ id: field.id,
+ label: field.label,
+ required: field.required,
+ value: field.defaultValue,
+ help: hint,
+ },
+ };
+ case 'datetime-local':
+ return {
+ type: 'FormKit',
+ props: {
+ type: 'datetime-local',
+ id: field.id,
+ label: field.label,
+ required: field.required,
+ value: field.defaultValue,
+ help: hint,
+ wrapperClass: '$remove:formkit-wrapper',
+ },
+ };
+ case 'email':
+ return {
+ type: 'FormKit',
+ props: {
+ type: 'email',
+ id: field.id,
+ label: field.label,
+ required: field.required,
+ value: field.defaultValue,
+ help: hint,
+ validation: 'email',
+ validationVisibility: 'live',
+ placeholder: placeholder,
+ wrapperClass: '$remove:formkit-wrapper',
+ },
+ };
+ case 'header':
+ let typeToUse = 'h1';
+ if (field.customForm && JSON.parse(field.customForm).style == 'heading_2') {
+ typeToUse = 'h2';
+ }
+ if (field.customForm && JSON.parse(field.customForm).style == 'heading_3') {
+ typeToUse = 'h3';
+ }
+ return {
+ type: typeToUse,
+ innerText: field.defaultValue,
+ };
+ case 'hidden':
+ return {
+ type: 'input',
+ props: {
+ type: 'hidden',
+ value: field.defaultValue,
+ },
+ };
+ case 'month':
+ return {
+ type: 'FormKit',
+ props: {
+ type: 'month',
+ id: field.id,
+ label: field.label,
+ required: field.required,
+ value: field.defaultValue,
+ help: hint,
+ wrapperClass: '$remove:formkit-wrapper',
+ },
+ };
+ case 'paragraph':
+ return {
+ type: 'p',
+ innerText: field.defaultValue,
+ };
+ case 'password':
+ return {
+ type: 'FormKit',
+ props: {
+ type: 'password',
+ id: field.id,
+ label: field.label,
+ required: field.required,
+ value: field.defaultValue,
+ help: hint,
+ placeholder: placeholder,
+ wrapperClass: '$remove:formkit-wrapper',
+ },
+ };
+ case 'radio':
+ const radioOptions = JSON.parse(field.customForm).entries.map((obj) => {
+ return { value: obj.key, label: obj.value };
+ });
+ return {
+ type: 'FormKit',
+ props: {
+ type: 'radio',
+ id: field.id,
+ label: field.label,
+ required: field.required,
+ value: field.defaultValue,
+ options: radioOptions,
+ help: hint,
+ fieldsetClass: 'custom-fieldset',
+ },
+ };
+ case 'range':
+ const customForm = JSON.parse(field.customForm);
+ return {
+ type: 'FormKit',
+ props: {
+ type: 'range',
+ id: field.id,
+ label: field.label,
+ required: field.required,
+ value: field.defaultValue,
+ help: hint,
+ min: customForm.min,
+ max: customForm.max,
+ step: customForm.step, //step is not supported by formkit free version
+ wrapperClass: '$remove:formkit-wrapper',
+ },
+ };
+ case 'tel':
+ return {
+ type: 'FormKit',
+ props: {
+ type: 'tel' /* with pro component mask more good */,
+ id: field.id,
+ label: field.label,
+ required: field.required,
+ value: field.defaultValue,
+ help: hint,
+ placeholder: placeholder,
+ wrapperClass: '$remove:formkit-wrapper',
+ },
+ };
+ case 'textarea':
+ return {
+ type: 'FormKit',
+ props: {
+ type: 'textarea' /* with pro component mask more good */,
+ id: field.id,
+ label: field.label,
+ required: field.required,
+ value: field.defaultValue,
+ help: hint,
+ placeholder: placeholder,
+ wrapperClass: '$remove:formkit-wrapper',
+ },
+ };
+ case 'time':
+ return {
+ type: 'FormKit',
+ props: {
+ type: 'time' /* with pro component mask more good */,
+ id: field.id,
+ label: field.label,
+ required: field.required,
+ value: field.defaultValue,
+ help: hint,
+ placeholder: placeholder,
+ wrapperClass: '$remove:formkit-wrapper',
+ },
+ };
+ case 'url':
+ return {
+ type: 'FormKit',
+ props: {
+ type: 'url',
+ id: field.id,
+ label: field.label,
+ required: field.required,
+ value: field.defaultValue,
+ help: hint,
+ placeholder: placeholder,
+ validation: 'url',
+ validationVisibility: 'live',
+ wrapperClass: '$remove:formkit-wrapper',
+ },
+ };
+ case 'week':
+ return {
+ type: 'FormKit',
+ props: {
+ type: 'week',
+ id: field.id,
+ label: field.label,
+ required: field.required,
+ value: field.defaultValue,
+ help: hint,
+ placeholder: placeholder,
+ wrapperClass: '$remove:formkit-wrapper',
+ },
+ };
default:
return {
type: 'FormKit',
diff --git a/ui/stylesheets/ui-dynamic-form.css b/ui/stylesheets/ui-dynamic-form.css
index b3dc65c..421fe8d 100644
--- a/ui/stylesheets/ui-dynamic-form.css
+++ b/ui/stylesheets/ui-dynamic-form.css
@@ -44,13 +44,19 @@ code {
}
.ui-dynamic-form-wrapper {
- --fk-color-primary: rgb(var(--v-theme-primary));
- --fk-color-border: rgb(var(--v-border-color));
+ --fk-color-primary: rgb(var(--v-theme-primary)) !important;
+ --fk-color-border: rgb(var(--v-theme-group-outline)); /* Does not work somehow */
--fk-bg-input: rgb(var(--v-theme-group-background));
--fk-color-input: rgb(var(--v-theme-on-group-background));
+ --fk-color-help: rgb(var(--v-theme-on-group-background));
+ --fk-color-border-focus: rgb(var(--v-theme-primary));
}
.reset-background {
--fk-bg-input: rgb(var(--does-not-exist, #000));
/* i dont know why this works but it works */
}
+
+.custom-fieldset {
+ max-width: none !important;
+}