Afiq
f48eee7cdb
- Introduced a new 'customHtml' component in FormBuilderComponents.vue, allowing users to create custom designs using HTML, CSS, and JavaScript. - Enhanced ComponentPreview.vue to render the custom HTML component with appropriate props for live preview functionality. - Updated FormBuilderFieldSettingsModal.vue to include configuration options for the custom HTML component, such as HTML, CSS, and JavaScript content, as well as settings for preview mode and script allowance. - Implemented safe and full HTML preview methods to ensure secure rendering of custom content. - Added relevant icons and descriptions for the custom HTML component in the form builder, improving user experience and clarity.
29 lines
1020 B
JavaScript
29 lines
1020 B
JavaScript
import { createInput } from "@formkit/vue";
|
|
import OneTimePassword from "~/components/formkit/OneTimePassword.vue";
|
|
import MaskText from "~/components/formkit/TextMask.vue";
|
|
import FileDropzone from "~/components/formkit/FileDropzone.vue";
|
|
import Switch from "~/components/formkit/Switch.vue";
|
|
import SearchSelect from "~/components/formkit/SearchSelect.vue";
|
|
import CustomHtml from "~/components/formkit/CustomHtml.vue";
|
|
|
|
export default {
|
|
otp: createInput(OneTimePassword, {
|
|
props: ["digits"],
|
|
}),
|
|
mask: createInput(MaskText, {
|
|
props: ["mask"],
|
|
}),
|
|
dropzone: createInput(FileDropzone, {
|
|
props: ["accept", "multiple", "maxSize", "minSize", "maxFiles", "disabled"],
|
|
}),
|
|
switch: createInput(Switch, {
|
|
props: ["value", "disabled", "name", "id"],
|
|
}),
|
|
searchSelect: createInput(SearchSelect, {
|
|
props: ["options", "placeholder"],
|
|
}),
|
|
customHtml: createInput(CustomHtml, {
|
|
props: ["htmlContent", "cssContent", "jsContent", "allowScripts", "previewMode", "showInPreview"],
|
|
}),
|
|
};
|