Skip to content

Commit

Permalink
add correct icon; add support for more formfields from studio
Browse files Browse the repository at this point in the history
  • Loading branch information
luisthieme committed Aug 30, 2024
1 parent 8366260 commit 6c656ed
Show file tree
Hide file tree
Showing 5 changed files with 259 additions and 8 deletions.
4 changes: 0 additions & 4 deletions nodes/icons/endevent_finished_listener_002.svg

This file was deleted.

6 changes: 6 additions & 0 deletions nodes/icons/ui_dynamic_form.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion nodes/ui-dynamic-form.html
Original file line number Diff line number Diff line change
Expand Up @@ -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';
},
Expand Down
245 changes: 244 additions & 1 deletion ui/components/UIDynamicForm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,14 @@
<v-form ref="form" v-model="form">
<v-row v-for="(field, index) in fields()" :key="index">
<v-col cols="12">
<component :is="createComponent(field).type" v-bind="createComponent(field).props" />
<component
v-if="createComponent(field).innerText"
:is="createComponent(field).type"
v-bind="createComponent(field).props"
>
{{ createComponent(field).innerText }}
</component>
<component v-else :is="createComponent(field).type" v-bind="createComponent(field).props" />
</v-col>
</v-row>
<v-row style="padding: 12px">
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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',
Expand All @@ -199,6 +225,7 @@ export default {
required: field.required,
value: field.defaultValue,
help: hint,
placeholder: placeholder,
wrapperClass: '$remove:formkit-wrapper',
},
};
Expand Down Expand Up @@ -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',
Expand Down
10 changes: 8 additions & 2 deletions ui/stylesheets/ui-dynamic-form.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

0 comments on commit 6c656ed

Please sign in to comment.