diff --git a/src/bootstrap5.ts b/src/bootstrap5.ts index 176d669af..769fd487d 100644 --- a/src/bootstrap5.ts +++ b/src/bootstrap5.ts @@ -1,19 +1,145 @@ -import label from './templates/bootstrap5/label/form.js'; +import { getFrameworkTemplates } from '@formio/standard-template'; +import addressClasses from './templates/bootstrap5/address/classes.js'; +import builderClasses from './templates/bootstrap5/builder/classes.js'; +import builderComponentClasses from './templates/bootstrap5/builderComponent/classes.js'; +import builderComponentsClasses from './templates/bootstrap5/builderComponents/classes.js'; +import builderEditFormClasses from './templates/bootstrap5/builderEditForm/classes.js'; +import builderPlaceholderClasses from './templates/bootstrap5/builderPlaceholder/classes.js'; +import builderSidebarClasses from './templates/bootstrap5/builderSidebar/classes.js'; +import builderSidebarGroupClasses from './templates/bootstrap5/builderSidebarGroup/classes.js'; +import builderWizardClasses from './templates/bootstrap5/builderWizard/classes.js'; +import buttonClasses from './templates/bootstrap5/button/classes.js'; +import checkboxClasses from './templates/bootstrap5/checkbox/classes.js'; +import columnsClasses from './templates/bootstrap5/columns/classes.js'; +import componentClasses from './templates/bootstrap5/component/classes.js'; +import componentModalClasses from './templates/bootstrap5/componentModal/classes.js'; +import componentsClasses from './templates/bootstrap5/components/classes.js'; +import tableComponentsClasses from './templates/bootstrap5/tableComponents/classes.js'; +import containerClasses from './templates/bootstrap5/container/classes.js'; +import datagridClasses from './templates/bootstrap5/datagrid/classes.js'; +import dayClasses from './templates/bootstrap5/day/classes.js'; +import dialogClasses from './templates/bootstrap5/dialog/classes.js'; +import editgridClasses from './templates/bootstrap5/editgrid/classes.js'; +import editgridTableClasses from './templates/bootstrap5/editgridTable/classes.js'; +import fieldClasses from './templates/bootstrap5/field/classes.js'; +import fieldsetClasses from './templates/bootstrap5/fieldset/classes.js'; +import fileClasses from './templates/bootstrap5/file/classes.js'; +import htmlClasses from './templates/bootstrap5/html/classes.js'; +import iconClasses from './templates/bootstrap5/icon/classes.js'; import inputClasses from './templates/bootstrap5/input/classes.js'; import labelClasses from './templates/bootstrap5/label/classes.js'; -import componentClasses from './templates/bootstrap5/component/classes.js'; -import { getFrameworkTemplates } from '@formio/standard-template' +import loaderClasses from './templates/bootstrap5/loader/classes.js'; +import loadingClasses from './templates/bootstrap5/loading/classes.js'; +import mapClasses from './templates/bootstrap5/map/classes.js'; +import messageClasses from './templates/bootstrap5/message/classes.js'; +import modaldialogClasses from './templates/bootstrap5/modaldialog/classes.js'; +import modaleditClasses from './templates/bootstrap5/modaledit/classes.js'; +import modalPreviewClasses from './templates/bootstrap5/modalPreview/classes.js'; +import multipleMasksInputClasses from './templates/bootstrap5/multipleMasksInput/classes.js'; +import multiValueRowClasses from './templates/bootstrap5/multiValueRow/classes.js'; +import multiValueTableClasses from './templates/bootstrap5/multiValueTable/classes.js'; +import panelClasses from './templates/bootstrap5/panel/classes.js'; +import pdfClasses from './templates/bootstrap5/pdf/classes.js'; +import pdfBuilderClasses from './templates/bootstrap5/pdfBuilder/classes.js'; +import pdfBuilderUploadClasses from './templates/bootstrap5/pdfBuilderUpload/classes.js'; +import radioClasses from './templates/bootstrap5/radio/classes.js'; +import resourceAddClasses from './templates/bootstrap5/resourceAdd/classes.js'; +import selectClasses from './templates/bootstrap5/select/classes.js'; +import selectOptionClasses from './templates/bootstrap5/selectOption/classes.js'; +import signatureClasses from './templates/bootstrap5/signature/classes.js'; +import surveyClasses from './templates/bootstrap5/survey/classes.js'; +import tabClasses from './templates/bootstrap5/tab/classes.js'; +import tableClasses from './templates/bootstrap5/table/classes.js'; +import treeClasses from './templates/bootstrap5/tree/classes.js'; +import treePartialsClasses from './templates/bootstrap5/tree/partials/classes.js'; +import webformClasses from './templates/bootstrap5/webform/classes.js'; +import wellClasses from './templates/bootstrap5/well/classes.js'; +import wizardClasses from './templates/bootstrap5/wizard/classes.js'; +import wizardHeaderClasses from './templates/bootstrap5/wizardHeader/classes.js'; +import wizardHeaderClassicClasses from './templates/bootstrap5/wizardHeaderClassic/classes.js'; +import wizardHeaderVerticalClasses from './templates/bootstrap5/wizardHeaderVertical/classes.js'; +import wizardNavClasses from './templates/bootstrap5/wizardNav/classes.js'; +import errorsListClasses from './templates/bootstrap5/errorsList/classes.js'; +import alertClasses from './templates/bootstrap5/alert/classes.js'; +import gridClasses from './templates/bootstrap5/grid/classes.js'; +import paginationClasses from './templates/bootstrap5/pagination/classes.js'; +import columnMenuClasses from './templates/bootstrap5/column-menu/classes.js'; +import tbodyClasses from './templates/bootstrap5/tbody/classes.js'; +import paginationBottomClasses from './templates/bootstrap5/pagination-bottom/classes.js'; +import selectAllContentClasses from './templates/bootstrap5/selectAllContent/classes.js'; const classes = { + address: addressClasses, + builder: builderClasses, + builderComponent: builderComponentClasses, + builderComponents: builderComponentsClasses, + builderEditForm: builderEditFormClasses, + builderPlaceholder: builderPlaceholderClasses, + builderSidebar: builderSidebarClasses, + builderSidebarGroup: builderSidebarGroupClasses, + builderWizard: builderWizardClasses, + button: buttonClasses, + checkbox: checkboxClasses, + columns: columnsClasses, component: componentClasses, + componentModal: componentModalClasses, + components: componentsClasses, + tableComponents: tableComponentsClasses, + container: containerClasses, + datagrid: datagridClasses, + day: dayClasses, + dialog: dialogClasses, + editgrid: editgridClasses, + editgridTable: editgridTableClasses, + field: fieldClasses, + fieldset: fieldsetClasses, + file: fileClasses, + html: htmlClasses, + icon: iconClasses, + input: inputClasses, label: labelClasses, - input: inputClasses + loader: loaderClasses, + loading: loadingClasses, + map: mapClasses, + message: messageClasses, + modaledit: modaleditClasses, + modaldialog: modaldialogClasses, + modalPreview: modalPreviewClasses, + multipleMasksInput: multipleMasksInputClasses, + multiValueRow: multiValueRowClasses, + multiValueTable: multiValueTableClasses, + panel: panelClasses, + pdf: pdfClasses, + pdfBuilder: pdfBuilderClasses, + pdfBuilderUpload: pdfBuilderUploadClasses, + radio: radioClasses, + resourceAdd: resourceAddClasses, + select: selectClasses, + selectOption: selectOptionClasses, + signature: signatureClasses, + survey: surveyClasses, + tab: tabClasses, + table: tableClasses, + tbody: tbodyClasses, + tree: treeClasses, + ...treePartialsClasses, + webform: webformClasses, + well: wellClasses, + wizard: wizardClasses, + wizardHeader: wizardHeaderClasses, + wizardHeaderClassic: wizardHeaderClassicClasses, + wizardHeaderVertical: wizardHeaderVerticalClasses, + wizardNav: wizardNavClasses, + errorsList: errorsListClasses, + alert: alertClasses, + grid: gridClasses, + pagination: paginationClasses, + columnMenu: columnMenuClasses, + paginationBottom: paginationBottomClasses, + selectAllContent: selectAllContentClasses, }; const templates = { - label: { - form: label - }, }; diff --git a/src/templates/bootstrap5/address/classes.ts b/src/templates/bootstrap5/address/classes.ts new file mode 100644 index 000000000..0e76f4bbd --- /dev/null +++ b/src/templates/bootstrap5/address/classes.ts @@ -0,0 +1,9 @@ +export default { + form: { + autocomplete: ['address-autocomplete-container'], + removeValueIcon: ['address-autocomplete-remove-value-icon', 'fa', 'fa-times', 'bi', 'bi-x'], + formCheck: ['form-check', 'checkbox'], + formCheckLabel: ['form-check-label'], + formCheckInput: ['form-check-input'], + }, +}; diff --git a/src/templates/bootstrap5/alert/classes.ts b/src/templates/bootstrap5/alert/classes.ts new file mode 100644 index 000000000..07af7625e --- /dev/null +++ b/src/templates/bootstrap5/alert/classes.ts @@ -0,0 +1,5 @@ +export default { + form: { + visuallyHidden: ['visually-hidden'], + }, +}; diff --git a/src/templates/bootstrap5/builder/classes.ts b/src/templates/bootstrap5/builder/classes.ts new file mode 100644 index 000000000..4e0b7026a --- /dev/null +++ b/src/templates/bootstrap5/builder/classes.ts @@ -0,0 +1,22 @@ +export default { + form: { + builder: [ + 'formio', + 'builder', + 'row', + 'formbuilder', + ], + sidebar: [ + 'col-xs-4', + 'col-sm-3', + 'col-md-2', + 'formcomponents', + ], + form: [ + 'col-xs-8', + 'col-sm-9', + 'col-md-10', + 'formarea', + ] + }, +}; diff --git a/src/templates/bootstrap5/builderComponent/classes.ts b/src/templates/bootstrap5/builderComponent/classes.ts new file mode 100644 index 000000000..2f8aff599 --- /dev/null +++ b/src/templates/bootstrap5/builderComponent/classes.ts @@ -0,0 +1,18 @@ +export default { + form: { + dragComponent: ['builder-component'], + builderActions: ['component-btn-group'], + removeComponent: ['btn', 'btn-xxs', 'btn-danger', 'component-settings-button', 'component-settings-button-remove'], + buttonRemoveIcons: ['{{iconClass(\'remove\')}}'], + buttonCopyIcons: ['{{iconClass(\'сopy\')}}'], + buttonPasteIcon: ['{{iconClass(\'save\')}}'], + buttonEditJsonIcon: ['{{iconClass(\'wrench\')}}'], + buttonMoveIcon: ['{{iconClass(\'move\')}}'], + buttonEditIcon: ['{{iconClass(\'cog\')}}'], + copyComponent: ['btn', 'btn-xxs', 'btn-default', 'component-settings-button', 'component-settings-button-copy'], + pasteComponent: ['btn', 'btn-xxs', 'btn-default', 'component-settings-button', 'component-settings-button-paste'], + editJson: ['btn', 'btn-xxs', 'btn-default', 'component-settings-button', 'component-settings-button-edit-json'], + moveComponent: ['btn', 'btn-xxs', 'btn-default', 'component-settings-button', 'component-settings-button-move'], + editComponent: ['btn', 'btn-xxs', 'btn-secondary', 'component-settings-button', 'component-settings-button-edit'] + }, +}; diff --git a/src/templates/bootstrap5/builderComponents/classes.ts b/src/templates/bootstrap5/builderComponents/classes.ts new file mode 100644 index 000000000..dc6bbd38b --- /dev/null +++ b/src/templates/bootstrap5/builderComponents/classes.ts @@ -0,0 +1,9 @@ +export default { + form: { + componentsContainer: [ + 'builder-components', + 'drag-container', + 'formio-builder-{{type}}', + ], + }, +}; diff --git a/src/templates/bootstrap5/builderEditForm/classes.ts b/src/templates/bootstrap5/builderEditForm/classes.ts new file mode 100644 index 000000000..21b63ae9d --- /dev/null +++ b/src/templates/bootstrap5/builderEditForm/classes.ts @@ -0,0 +1,23 @@ +export default { + form: { + componentTitleRow: ['row'], + componentTitleCol: ['col', 'col-sm-6'], + helplinksCol: ['col', 'col-sm-6'], + previewCol: ['col', 'col-sm-6'], + helplinksIcon: ['iconClass(\'new-window\')'], + editFormRow: ['row'], + editTabs: ['col', 'component-edit-tabs'], + editTabsPreviewOn: ['col-sm-6'], + editTabsPreviewOff: ['col-sm-12'], + saveButton: ['btn', 'btn-success'], + cancelButton: ['btn', 'btn-secondary'], + removeButton: ['btn', 'btn-danger'], + previewButton: ['btn', 'btn-primary', 'float-right'], + previewPanel: ['card', 'panel', 'preview-panel'], + previewHeader: ['card', 'panel', 'preview-panel'], + previewTitle: ['card-title', 'mb-0'], + previewBody: ['card-body'], + preview: ['component-preview'], + help: ['card', 'card-body', 'bg-light', 'formio-settings-help'] + }, +}; diff --git a/src/templates/bootstrap5/builderPlaceholder/classes.ts b/src/templates/bootstrap5/builderPlaceholder/classes.ts new file mode 100644 index 000000000..4b798b91b --- /dev/null +++ b/src/templates/bootstrap5/builderPlaceholder/classes.ts @@ -0,0 +1,10 @@ +export default { + form: { + placeholder: [ + 'drag-and-drop-alert', + 'alert', + 'alert-info', + 'no-drag', + ], + }, +}; diff --git a/src/templates/bootstrap5/builderSidebar/classes.ts b/src/templates/bootstrap5/builderSidebar/classes.ts new file mode 100644 index 000000000..48b0124cf --- /dev/null +++ b/src/templates/bootstrap5/builderSidebar/classes.ts @@ -0,0 +1,16 @@ +export default { + form: { + sidebar: [ + 'accordion', + 'builder-sidebar', + ], + sidebarScroll: [ + 'builder-sidebar_scroll', + ], + sidebarSearch: [ + 'form-control', + 'builder-sidebar_search', + ], + sidebarGroups: [], + }, +}; diff --git a/src/templates/bootstrap5/builderSidebarGroup/classes.ts b/src/templates/bootstrap5/builderSidebarGroup/classes.ts new file mode 100644 index 000000000..fc21c158e --- /dev/null +++ b/src/templates/bootstrap5/builderSidebarGroup/classes.ts @@ -0,0 +1,23 @@ +export default { + form: { + groupPanel: [ + 'card', 'form-builder-panel', 'accordion-item' + ], + groupHeader: [ + 'card-header', + 'form-builder-group-header', + 'p-0', + ], + groupTitle: ['mb-0', 'mt-0', 'd-grid', 'accordion-header'], + sidebarAnchor: [ + 'btn', + 'builder-group-button', + ], + sidebarDefault: [ + 'show', + ], + sidebarGroup: ['accordion-collapse', 'collapse'], + sidebarContainer: ['d-grid', 'gap-1', 'no-drop', 'p-2', 'w-100'], + groupComponent: ['btn', 'btn-outline-primary', 'btn-sm', 'formcomponent', 'drag-copy', 'm-0'], + }, +}; diff --git a/src/templates/bootstrap5/builderWizard/classes.ts b/src/templates/bootstrap5/builderWizard/classes.ts new file mode 100644 index 000000000..a61904b37 --- /dev/null +++ b/src/templates/bootstrap5/builderWizard/classes.ts @@ -0,0 +1,14 @@ +export default { + form: { + builder: ['formio', 'builder', 'row', 'formbuilder'], + formComponents: ['col-xs-4', 'col-sm-3', 'col-md-2', 'formcomponents'], + formArea: ['col-xs-8', 'col-sm-9', 'col-md-10', 'formarea'], + wizardPages: ['breadcrumb', 'wizard-pages'], + gotoPageActive: ['bg-primary'], + gotoPageInactive: ['bg-info'], + gotoPageCommon: ['wizard-add-page'], + addPageWrapper: ['col-xs-4', 'col-sm-9', 'col-md-10', 'formarea'], + addPage: ['me-2', 'badge', 'bg-success', 'wizard-page-label'], + addPageIcon: ['{{iconClass(\'plus\')}}'], + }, +}; diff --git a/src/templates/bootstrap5/button/classes.ts b/src/templates/bootstrap5/button/classes.ts new file mode 100644 index 000000000..371ff61b6 --- /dev/null +++ b/src/templates/bootstrap5/button/classes.ts @@ -0,0 +1,11 @@ +export default { + form: { + helpBlock: [ + 'help-block' + ], + tooltipIcon: [ + '{{iconClass(\'question-sign\')}}', + 'text-muted' + ] + }, +}; diff --git a/src/templates/bootstrap5/checkbox/classes.ts b/src/templates/bootstrap5/checkbox/classes.ts new file mode 100644 index 000000000..a35f73e9b --- /dev/null +++ b/src/templates/bootstrap5/checkbox/classes.ts @@ -0,0 +1,24 @@ +export default { + form: { + inputWrapper: [ + 'form-check', + 'checkbox' + ], + label: [ + '{{input.labelClass}}', + 'form-check-label' + ], + tooltipIcon: [ + 'text-muted', + '{{iconClass(\'question-sign\')}}' + ], + input: [ + 'form-check-input' + ], + }, + html: { + label: [ + '{{input.labelClass}}' + ] + }, +}; diff --git a/src/templates/bootstrap5/column-menu/classes.ts b/src/templates/bootstrap5/column-menu/classes.ts new file mode 100644 index 000000000..5cd3cabde --- /dev/null +++ b/src/templates/bootstrap5/column-menu/classes.ts @@ -0,0 +1,63 @@ +export default { + html: { + menu: [ + 'dropdown' + ], + dropdown: [ + 'dropdown-menu', + 'checkbox-menu', + 'allow-focus' + ], + dropdownItem: [ + 'dropdown-item' + ], + arrowRight: [ + 'arrow-right' + ], + nestedDropdown: [ + 'dropdown-menu' + ], + nestedDropdownFilter: [ + 'dropdown-menu' + ], + radioButton: [ + 'form-check', + 'form-check-label' + ], + checkLabel: [ + 'form-check-label' + ], + checkInput: [ + 'form-check-input' + ], + divider: [ + 'dropdown-divider' + ], + filterForm: [ + 'px-3', + 'py-2' + ], + filterFormGroup: [ + 'form-group' + ], + filterSelect: [ + 'form-control' + ], + filterInput: [ + 'form-control' + ], + filterToolbar: [ + 'form-row', + 'btn-toolbar' + ], + filterButton: [ + 'btn', + 'btn-primary' + ], + clearButton: [ + 'btn', + 'btn-secondary', + 'ml-1' + ] + }, +}; diff --git a/src/templates/bootstrap5/columns/classes.ts b/src/templates/bootstrap5/columns/classes.ts new file mode 100644 index 000000000..d864cf86f --- /dev/null +++ b/src/templates/bootstrap5/columns/classes.ts @@ -0,0 +1,9 @@ +export default { + form: { + column: [ + // TODO: some classes here have to be interpolated inside of the cycle + 'col-{{column.size}}-{{column.currentWidth}}', + 'offset-{{column.size}}-{{column.offset}}' + ] + }, +}; diff --git a/src/templates/bootstrap5/component/classes.ts b/src/templates/bootstrap5/component/classes.ts index d1c9eb4ed..8cdac20c3 100644 --- a/src/templates/bootstrap5/component/classes.ts +++ b/src/templates/bootstrap5/component/classes.ts @@ -1,9 +1,11 @@ export default { - form: { - component: [], - messageContainer: [ - "formio-errors", - "invalid-feedback" - ] - } -} \ No newline at end of file + form: { + component: [ + '{{classes}}' + ], + messageContainer: [ + 'formio-errors', + 'invalid-feedback' + ] + }, +}; diff --git a/src/templates/bootstrap5/componentModal/classes.ts b/src/templates/bootstrap5/componentModal/classes.ts new file mode 100644 index 000000000..61a3bfeab --- /dev/null +++ b/src/templates/bootstrap5/componentModal/classes.ts @@ -0,0 +1,50 @@ +export default { + form: { + componentModalWrapper: [ + 'formio-component-modal-wrapper', + 'formio-component-modal-wrapper-{{component.type}}' + ], + modalWrapper: [ + 'formio-dialog', + 'formio-dialog-theme-default', + 'component-rendering-hidden' + ], + modalOverlay: [ + 'formio-dialog-overlay' + ], + modalContents: [ + 'formio-dialog-content' + ], + label: [ + 'visually-hidden' + ], + modalCloseButton: [ + 'formio-dialog-close', + 'float-end' + ], + modalCloseButtonSecondary: [ + 'formio-dialog-close', + 'float-end', + 'btn', + 'btn-secondary', + 'btn-sm' + ], + componentContent: [], + dialogButtons: [ + 'formio-dialog-buttons' + ], + modalClose: [ + 'btn', + 'btn-secondary', + 'formio-dialog-button' + ], + modalSave: [ + 'btn', + 'btn-success', + 'formio-dialog-button' + ], + modalLiveRegion: [ + 'visually-hidden' + ] + }, +}; diff --git a/src/templates/bootstrap5/components/classes.ts b/src/templates/bootstrap5/components/classes.ts new file mode 100644 index 000000000..704889dcd --- /dev/null +++ b/src/templates/bootstrap5/components/classes.ts @@ -0,0 +1,3 @@ +export default { + form: {}, +}; diff --git a/src/templates/bootstrap5/container/classes.ts b/src/templates/bootstrap5/container/classes.ts new file mode 100644 index 000000000..704889dcd --- /dev/null +++ b/src/templates/bootstrap5/container/classes.ts @@ -0,0 +1,3 @@ +export default { + form: {}, +}; diff --git a/src/templates/bootstrap5/datagrid/classes.ts b/src/templates/bootstrap5/datagrid/classes.ts new file mode 100644 index 000000000..161b9420e --- /dev/null +++ b/src/templates/bootstrap5/datagrid/classes.ts @@ -0,0 +1,86 @@ +export default { + form: { + dataGrid: [ + 'table', + 'datagrid-table', + 'table-bordered', + ], + striped: [ + 'table-striped', + ], + hover: [ + 'table-hover', + ], + condensed: [ + 'table-sm', + ], + fieldRequired: [ + 'field-required', + ], + tooltip: [ + '{{iconClass(\'question-sign\')}}', + 'text-muted', + ], + addRow: [ + 'btn', + 'btn-primary', + 'formio-button-add-row', + ], + addRowIcon: [ + '{{iconClass(\'plus\')}}', + ], + groupHeader: [ + 'datagrid-group-header', + ], + groupHeaderToggle: [ + 'clickable', + ], + groupLabel: [ + 'datagrid-group-label', + ], + reorderCell: [], + reorderButton: [ + 'formio-drag-button', + 'btn', + 'btn-default', + 'bi', + 'bi-list', + ], + removeButtonCell: [], + removeRow: [ + 'btn', + 'btn-secondary', + 'formio-button-remove-row', + ], + removeRowIcon: [ + '{{iconClass(\'remove-circle\')}}', + ], + addColumn: [], + visuallyHidden: [ + 'visually-hidden' + ], + }, + html: { + dataGrid: [ + 'table', + 'datagrid-table', + 'table-bordered', + ], + striped: [ + 'table-striped', + ], + hover: [ + 'table-hover', + ], + condensed: [ + 'table-sm', + ], + fieldRequired: [ + 'field-required', + ], + tooltip: [ + '{{iconClass(\'question-sign\')}}', + 'text-muted', + ], + }, +}; diff --git a/src/templates/bootstrap5/day/classes.ts b/src/templates/bootstrap5/day/classes.ts new file mode 100644 index 000000000..390a29478 --- /dev/null +++ b/src/templates/bootstrap5/day/classes.ts @@ -0,0 +1,25 @@ +export default { + form: { + input: [ + 'form-control' + ], + wrapper: [ + 'row' + ], + fieldRequired: [ + 'field-required' + ], + day: [ + 'col', + 'col-xs-3' + ], + month: [ + 'col', + 'col-xs-4' + ], + year: [ + 'col', + 'col-xs-5' + ] + }, +}; diff --git a/src/templates/bootstrap5/dialog/classes.ts b/src/templates/bootstrap5/dialog/classes.ts new file mode 100644 index 000000000..5ecba71d6 --- /dev/null +++ b/src/templates/bootstrap5/dialog/classes.ts @@ -0,0 +1,20 @@ +export default { + form: { + dialog: [ + 'formio-dialog', + 'formio-dialog-theme-default', + 'component-settings' + ], + dialogOverlay: [ + 'formio-dialog-overlay' + ], + dialogContents: [ + 'formio-dialog-content' + ], + dialogClose: [ + 'formio-dialog-close', + 'float-end', + 'btn-sm' + ] + }, +}; diff --git a/src/templates/bootstrap5/editgrid/classes.ts b/src/templates/bootstrap5/editgrid/classes.ts new file mode 100644 index 000000000..9de3ee3f6 --- /dev/null +++ b/src/templates/bootstrap5/editgrid/classes.ts @@ -0,0 +1,102 @@ +export default { + form: { + editGrid: [ + 'editgrid-listgroup', + 'list-group' + ], + striped: [ + 'table-striped' + ], + hover: [ + 'table-hover' + ], + condensed: [ + 'table-sm' + ], + bordered: [ + 'table-bordered' + ], + row: [ + 'list-group-item' + ], + errorsContainer: [ + 'has-error' + ], + rowError: [ + 'editgrid-row-error' + ], + editGridActions: [ + 'editgrid-actions' + ], + saveRowButton: [ + 'btn', + 'btn-primary' + ], + removeRowButton: [ + 'btn', + 'btn-danger' + ], + footer: [ + 'list-group-item', + 'list-group-footer' + ], + addRowButton: [ + 'btn', + 'btn-primary' + ], + addRowButtonIcon: [ + '{{iconClass(\'plus\')}}' + ], + header: [ + 'list-group-item', + 'list-group-header' + ] + }, + html: { + editGrid: [ + 'editgrid-listgroup', + 'list-group' + ], + striped: [ + 'table-striped' + ], + hover: [ + 'table-hover' + ], + condensed: [ + 'table-sm' + ], + bordered: [ + 'table-bordered' + ], + header: [ + 'list-group-item', + 'list-group-header' + ], + footer: [ + 'list-group-item', + 'list-group-footer' + ], + row: [ + 'list-group-item' + ], + errorsContainer: [ + 'has-error' + ], + rowError: [ + 'editgrid-row-error', + 'help-block' + ], + editGridActions: [ + 'editgrid-actions' + ], + saveRowButton: [ + 'btn', + 'btn-primary' + ], + removeRowButton: [ + 'btn', + 'btn-danger' + ] + }, +}; diff --git a/src/templates/bootstrap5/editgridTable/classes.ts b/src/templates/bootstrap5/editgridTable/classes.ts new file mode 100644 index 000000000..56824b94f --- /dev/null +++ b/src/templates/bootstrap5/editgridTable/classes.ts @@ -0,0 +1,85 @@ +export default { + form: { + errorsContainer: [ + 'has-error' + ], + container: [ + 'editgrid-table-container' + ], + responsive: [ + 'table-responsive' + ], + table: [ + 'table' + ], + header: [ + 'editgrid-table-head' + ], + body: [ + 'editgrid-table-body' + ], + column: [ + 'editgrid-table-column' + ], + actions: [ + 'editgrid-actions' + ], + saveRow: [ + 'btn', + 'btn-primary' + ], + cancelRow: [ + 'btn', + 'btn-danger' + ], + rowError: [ + 'editgrid-row-error', + 'help-block' + ], + addButton: [ + 'btn', + 'btn-primary' + ], + addAnotherIcon: [ + 'iconClass(\'plus\')' + ] + }, + html: { + errorsContainer: [ + 'has-error' + ], + container: [ + 'editgrid-table-container' + ], + responsive: [ + 'table-responsive' + ], + table: [ + 'table' + ], + header: [ + 'editgrid-table-head' + ], + body: [ + 'editgrid-table-body' + ], + column: [ + 'editgrid-table-column' + ], + actions: [ + 'editgrid-actions' + ], + saveRow: [ + 'btn', + 'btn-primary' + ], + cancelRow: [ + 'btn', + 'btn-danger' + ], + rowError: [ + 'editgrid-row-error', + 'help-block' + ] + }, +}; diff --git a/src/templates/bootstrap5/errorsList/classes.ts b/src/templates/bootstrap5/errorsList/classes.ts new file mode 100644 index 000000000..d46a6cc91 --- /dev/null +++ b/src/templates/bootstrap5/errorsList/classes.ts @@ -0,0 +1,7 @@ +export default { + form: { + errorTooltip: [ + 'iconClass(\'question-sign\')' + ] + }, +}; diff --git a/src/templates/bootstrap5/field/classes.ts b/src/templates/bootstrap5/field/classes.ts new file mode 100644 index 000000000..07a629180 --- /dev/null +++ b/src/templates/bootstrap5/field/classes.ts @@ -0,0 +1,34 @@ +export default { + form: { + label: [], + description: [ + 'form-text', + 'text-muted' + ] + }, + align: { + wrapper: [ + 'field-wrapper', + 'flex-fill' + ], + wrapperRight: [ + 'field-wrapper--reverse' + ], + labelWrapper: [ + 'field-label' + ], + labelWrapperRight: [ + 'field-label--right' + ], + label: [ + '{{label.className}}' + ], + content: [ + 'field-content' + ], + description: [ + 'form-text', + 'text-muted' + ] + }, +}; diff --git a/src/templates/bootstrap5/fieldset/classes.ts b/src/templates/bootstrap5/fieldset/classes.ts new file mode 100644 index 000000000..7d38b4dda --- /dev/null +++ b/src/templates/bootstrap5/fieldset/classes.ts @@ -0,0 +1,9 @@ +export default { + form: { + header: [], + clickable: [ + 'formio-clickable' + ], + fieldsetBody: [] + }, +}; diff --git a/src/templates/bootstrap5/file/classes.ts b/src/templates/bootstrap5/file/classes.ts new file mode 100644 index 000000000..dde979472 --- /dev/null +++ b/src/templates/bootstrap5/file/classes.ts @@ -0,0 +1,145 @@ +export default { + form: { + warning: [ + 'alert', + 'alert-warning' + ], + filesList: [ + 'list-group', + 'list-group-striped' + ], + filesListHeader: [ + 'list-group-item', + 'list-group-header', + 'hidden-xs', + 'hidden-sm' + ], + fileSelector: [ + 'fileSelector' + ], + galleryButton: [ + 'btn', + 'btn-primary' + ], + galleryIcon: [ + '{{iconClass(\'book\')}}' + ], + cameraButton: [ + 'btn', + 'btn-primary' + ], + cameraIcon: [ + '{{iconClass(\'camera\')}}' + ], + fileDrop: [ + 'fileSelector' + ], + fileDropIcon: [ + '{{iconClass(\'cloud-upload\')}}' + ], + fileBrowse: [ + 'browse' + ], + videoContainer: [ + 'video-container' + ], + videoPlayer: [ + 'video' + ], + takePictureButton: [ + 'btn', + 'btn-primary' + ], + toggleCameraMode: [ + 'btn', + 'btn-primary' + ], + fileType: [ + 'file-type' + ], + fileTypeOption: [ + 'test' + ], + visuallyHidden: [ + 'visually-hidden' + ], + captureVideo: [ + '{{iconClass(\'video\')}}' + ], + captureAudio: [ + '{{iconClass(\'microphone\')}}' + ], + captureImage: [ + '{{iconClass(\'camera\')}}' + ], + browseFiles: [ + '{{iconClass(\'folder-open\')}}' + ], + restoreFile: [ + '{{iconClass(\'arrow-counterclockwise\')}}' + ], + removeLink: [ + '{{iconClass(\'remove\')}}' + ], + listItem: [ + 'list-group-item' + ], + row: [ + 'row', + 'align-center' + ], + colName: [ + 'col-md-{{columns.name}}' + ], + colSize: [ + 'col-md-{{columns.size}}' + ], + colType: [ + 'col-md-{{columns.type}}' + ], + colActions: [ + 'col-md-{{columns.actions}}', + 'justify-center' + ], + progressBar: [ + 'progress-bar' + ], + statusProgress: [ + 'status', + 'progress' + ], + statusTextDanger: [ + 'status', + 'text-danger' + ], + statusText: [ + 'status', + 'text' + ], + abortIcon: [ + 'icon', + 'icon-ban' + ], + removeIcon: [ + 'icon', + 'icon-remove' + ], + select: [ + 'file-type' + ], + status: [ + 'status' + ], + statusError: [ + 'danger' + ], + syncNow: [ + 'btn', + 'btn-primary', + 'btn-sm' + ], + statusDefault: [ + '{{file.status}}' + ] + }, +}; diff --git a/src/templates/bootstrap5/grid/classes.ts b/src/templates/bootstrap5/grid/classes.ts new file mode 100644 index 000000000..4ae28bee6 --- /dev/null +++ b/src/templates/bootstrap5/grid/classes.ts @@ -0,0 +1,82 @@ +export default { + html: { + gridWrapper: [ + 'data-grid-wrapper' + ], + dataGrid: [ + 'data-grid' + ], + menuContainer: [ + 'menu-container' + ], + menu: [ + 'dropdown' + ], + pagination: [ + 'formio-pagination' + ], + loader: [ + 'spinner-wrapper' + ], + tableWrapper: [ + 'responsive-table' + ], + spinner: [ + 'spinner-grow' + ], + table: [ + 'table', + '{{classes}}', + 'formio-grid' + ], + sort: [ + 'sort-btn' + ], + sorted: [ + 'sorted' + ], + componentMenu: [ + 'menu' + ], + componentMenuContainer: [ + 'menu-container' + ], + menuButton: [ + 'menu-btn' + ], + filtersApplied: [ + 'filters-applied' + ], + gridActionsHeaderCol: [ + 'formio-grid-ops', + 'position-sticky', + 'p-0', + 'border-left-0' + ], + gridActionsHeader: [ + 'border-left', + 'border-right' + ], + deleteAll: [ + 'btn', + 'p-0', + 'delete-all-btn', + 'formio-grid-ops-button' + ], + buttonDisabled: [ + 'disabled' + ], + deleteAllIcon: [ + 'fa', + 'fa-trash' + ], + gridBottom: [ + 'formio-grid-bottom' + ], + addRow: [ + 'btn', + 'btn-primary', + 'formio-new-button' + ] + }, +}; diff --git a/src/templates/bootstrap5/html/classes.ts b/src/templates/bootstrap5/html/classes.ts new file mode 100644 index 000000000..923471844 --- /dev/null +++ b/src/templates/bootstrap5/html/classes.ts @@ -0,0 +1,8 @@ +export default { + form: { + htmlElement: [ + 'formio-component-htmlelement', + '{{component.className}}' + ] + }, +}; diff --git a/src/templates/bootstrap5/icon/classes.ts b/src/templates/bootstrap5/icon/classes.ts new file mode 100644 index 000000000..c49bfb7d0 --- /dev/null +++ b/src/templates/bootstrap5/icon/classes.ts @@ -0,0 +1,7 @@ +export default { + form: { + icon: [ + '{{className}}' + ] + }, +}; diff --git a/src/templates/bootstrap5/input/__tests__/classes.ts b/src/templates/bootstrap5/input/__tests__/classes.ts new file mode 100644 index 000000000..02a61bed5 --- /dev/null +++ b/src/templates/bootstrap5/input/__tests__/classes.ts @@ -0,0 +1,2 @@ +export default { +}; diff --git a/src/templates/bootstrap5/input/classes.ts b/src/templates/bootstrap5/input/classes.ts index 98dd14134..0f149b77f 100644 --- a/src/templates/bootstrap5/input/classes.ts +++ b/src/templates/bootstrap5/input/classes.ts @@ -1,5 +1,42 @@ export default { form: { - input: [], + input: [ + 'form-control' + ], + inputGroup: [ + 'input-group' + ], + suffix: [ + 'input-group-text' + ], + prefix: [ + 'input-group-text' + ], + formFloating: [ + 'form-floating' + ], + formLabel: [ + 'col-form-label', + '{{label.class}}' + ], + liveRegion: [ + 'visually-hidden' + ], + charWordCount: [ + 'form-text' + ], + charWordCountHasDescription: [ + 'float-end' + ], + charWordCountNoDescription: [ + 'text-end' + ], + wordCount: [ + 'text-muted' + ], + charCount: [ + 'text-muted' + ] }, + html: {}, }; diff --git a/src/templates/bootstrap5/label/__tests__/classes.ts b/src/templates/bootstrap5/label/__tests__/classes.ts new file mode 100644 index 000000000..02a61bed5 --- /dev/null +++ b/src/templates/bootstrap5/label/__tests__/classes.ts @@ -0,0 +1,2 @@ +export default { +}; diff --git a/src/templates/bootstrap5/label/classes.ts b/src/templates/bootstrap5/label/classes.ts index 71da3accf..79585c1db 100644 --- a/src/templates/bootstrap5/label/classes.ts +++ b/src/templates/bootstrap5/label/classes.ts @@ -1,7 +1,15 @@ export default { form: { - label: ['col-form-label', '{{ctx.label.className}}'], - tooltipIcon: ["{{ctx.iconClass('question-sign')}}", 'text-muted'], - hiddenForNumbers: ['visually-hidden'], + label: [ + 'col-form-label', + '{{label.className}}' + ], + tooltipIcon: [ + '{{iconClass(\'question-sign\')}}', + 'text-muted' + ], + hiddenForNumbers: [ + 'visually-hidden' + ] }, }; diff --git a/src/templates/bootstrap5/label/form.tsx b/src/templates/bootstrap5/label/form.tsx deleted file mode 100644 index f338f85b3..000000000 --- a/src/templates/bootstrap5/label/form.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { Component } from '@formio/core'; -import {templateUtils } from '@formio/standard-template'; - -type LabelContext = { - component: Component; - iconClass: (icon: string) => string; - t: (val: string, options?: { _userInput: boolean }) => string; - instance: { id: string }; - customStyles?: { - [refName: string]: { - classes: string[] | undefined, - override?: boolean - } - }; -}; - -type DefaultClasses = { - [refName: string]: string[] | undefined, -} | undefined; - -// const defaultClasses = { -// // label: { -// label: [ -// "col-form-label", -// "{{ctx.label.className}}" -// ], -// tooltipIcon: [ -// "{{ctx.iconClass('question-sign')}}", -// "text-muted" -// ], -// hiddenForNumbers: [ -// "visually-hidden" -// ] -// // } -// }; - -export default (classes: DefaultClasses) => { - return (context: LabelContext) => { - const defaultClasses: DefaultClasses = classes; - const { component, t, instance, customStyles } = context; - const templateClasses = templateUtils.getTemplateClasses(defaultClasses, customStyles, context); - const numericOnly = - component.type === 'number' || - component.type === 'phoneNumber' || - component.type === 'currency'; - - return ( - - ); - } -}; diff --git a/src/templates/bootstrap5/loader/classes.ts b/src/templates/bootstrap5/loader/classes.ts new file mode 100644 index 000000000..73da989ed --- /dev/null +++ b/src/templates/bootstrap5/loader/classes.ts @@ -0,0 +1,14 @@ +export default { + form: { + loader: [ + 'formio-loader' + ], + wrapper: [ + 'loader-wrapper' + ], + inner: [ + 'loader', + 'text-center' + ] + }, +}; diff --git a/src/templates/bootstrap5/loading/classes.ts b/src/templates/bootstrap5/loading/classes.ts new file mode 100644 index 000000000..704889dcd --- /dev/null +++ b/src/templates/bootstrap5/loading/classes.ts @@ -0,0 +1,3 @@ +export default { + form: {}, +}; diff --git a/src/templates/bootstrap5/map/classes.ts b/src/templates/bootstrap5/map/classes.ts new file mode 100644 index 000000000..704889dcd --- /dev/null +++ b/src/templates/bootstrap5/map/classes.ts @@ -0,0 +1,3 @@ +export default { + form: {}, +}; diff --git a/src/templates/bootstrap5/message/classes.ts b/src/templates/bootstrap5/message/classes.ts new file mode 100644 index 000000000..05a1ff355 --- /dev/null +++ b/src/templates/bootstrap5/message/classes.ts @@ -0,0 +1,13 @@ +export default { + form: { + message: [ + 'help-block' + ], + level: [ + '{{level}},' + ], + error: [ + 'error' + ] + }, +}; diff --git a/src/templates/bootstrap5/modalPreview/classes.ts b/src/templates/bootstrap5/modalPreview/classes.ts new file mode 100644 index 000000000..7e69d93a0 --- /dev/null +++ b/src/templates/bootstrap5/modalPreview/classes.ts @@ -0,0 +1,26 @@ +export default { + form: { + label: [ + 'control-label', + '{{label.className}}' + ], + modalLabelValue: [ + 'visually-hidden' + ], + modalPreviewLiveRegion: [ + 'visually-hidden' + ], + openModal: [ + 'btn', + 'btn-light', + 'btn-md', + 'open-modal-button', + 'form-control', + '{{openModalBtnClasses || \'\'}}' + ], + messages: [ + 'formio-errors', + 'invalid-feedback' + ] + }, +}; diff --git a/src/templates/bootstrap5/modaldialog/classes.ts b/src/templates/bootstrap5/modaldialog/classes.ts new file mode 100644 index 000000000..191716942 --- /dev/null +++ b/src/templates/bootstrap5/modaldialog/classes.ts @@ -0,0 +1,24 @@ +export default { + form: { + dialog: [ + 'formio-dialog', + 'formio-dialog-theme-default', + 'formio-modaledit-dialog' + ], + overlay: [ + 'formio-dialog-overlay' + ], + content: [ + 'formio-modaledit-content' + ], + close: [ + 'btn', + 'btn-primary', + 'btn-xs', + 'formio-modaledit-close' + ], + inner: [ + 'reset-margins' + ] + }, +}; diff --git a/src/templates/bootstrap5/modaledit/classes.ts b/src/templates/bootstrap5/modaledit/classes.ts new file mode 100644 index 000000000..58cf88e73 --- /dev/null +++ b/src/templates/bootstrap5/modaledit/classes.ts @@ -0,0 +1,20 @@ +export default { + form: { + container: [ + 'formio-modaledit-view-container' + ], + edit: [ + 'btn', + 'btn-xxs', + 'btn-warning', + 'formio-modaledit-edit' + ], + editIcon: [ + '{{iconClass(\'edit\')}}' + ], + input: [ + 'modaledit-view-inner', + 'reset-margins' + ] + }, +}; diff --git a/src/templates/bootstrap5/multiValueRow/classes.ts b/src/templates/bootstrap5/multiValueRow/classes.ts new file mode 100644 index 000000000..0347860b7 --- /dev/null +++ b/src/templates/bootstrap5/multiValueRow/classes.ts @@ -0,0 +1,11 @@ +export default { + form: { + removeRow: [ + 'btn', + 'btn-secondary' + ], + removeRowIcon: [ + '{{iconClass(\'remove-circle\')}}' + ] + }, +}; diff --git a/src/templates/bootstrap5/multiValueTable/classes.ts b/src/templates/bootstrap5/multiValueTable/classes.ts new file mode 100644 index 000000000..814e27f18 --- /dev/null +++ b/src/templates/bootstrap5/multiValueTable/classes.ts @@ -0,0 +1,16 @@ +export default { + form: { + table: [ + 'table', + 'table-bordered' + ], + addButton: [ + 'btn', + 'btn-primary', + 'formio-button-add-another' + ], + addButtonIcon: [ + '{{iconClass(\'plus\')}}' + ] + }, +}; diff --git a/src/templates/bootstrap5/multipleMasksInput/classes.ts b/src/templates/bootstrap5/multipleMasksInput/classes.ts new file mode 100644 index 000000000..61f298873 --- /dev/null +++ b/src/templates/bootstrap5/multipleMasksInput/classes.ts @@ -0,0 +1,12 @@ +export default { + form: { + container: [ + 'input-group', + 'formio-multiple-mask-container' + ], + select: [ + 'form-control', + 'formio-multiple-mask-select' + ] + }, +}; diff --git a/src/templates/bootstrap5/pagination-bottom/classes.ts b/src/templates/bootstrap5/pagination-bottom/classes.ts new file mode 100644 index 000000000..b267ba110 --- /dev/null +++ b/src/templates/bootstrap5/pagination-bottom/classes.ts @@ -0,0 +1,22 @@ +export default { + html: { + pagination: [ + 'pagination-bottom' + ], + paginationContainer: [ + 'hidden' + ], + firstPage: [ + 'btn' + ], + lastPage: [ + 'btn' + ], + nextPage: [ + 'btn' + ], + prevPage: [ + 'btn' + ] + }, +}; diff --git a/src/templates/bootstrap5/pagination/classes.ts b/src/templates/bootstrap5/pagination/classes.ts new file mode 100644 index 000000000..6e30e4c42 --- /dev/null +++ b/src/templates/bootstrap5/pagination/classes.ts @@ -0,0 +1,44 @@ +export default { + html: { + pagination: [ + 'common-pagination', + 'btn-toolbar', + 'align-items-center', + 'ml-auto' + ], + itemsPerPageInputWrapper: [ + 'items-per-page', + 'input-group', + 'mr-2', + 'd-flex', + 'align-items-center' + ], + itemsPerPageLabelWrapper: [ + 'input-group-append' + ], + itemsPerPageLabel: [], + itemsPerPage: [ + 'mr-1' + ], + itemsCount: [ + 'items-count', + 'p-1' + ], + firstPage: [ + 'btn', + 'shadow-none' + ], + lastPage: [ + 'btn', + 'shadow-none' + ], + nextPage: [ + 'btn', + 'shadow-none' + ], + prevPage: [ + 'btn', + 'shadow-none' + ] + }, +}; diff --git a/src/templates/bootstrap5/panel/classes.ts b/src/templates/bootstrap5/panel/classes.ts new file mode 100644 index 000000000..aff7e91d0 --- /dev/null +++ b/src/templates/bootstrap5/panel/classes.ts @@ -0,0 +1,37 @@ +export default { + form: { + panel: [ + 'mb-2', + 'card', + 'border' + ], + header: [ + 'card-header', + '{{transform(\'class\', \'bg-\' + component.theme)}}' + ], + title: [ + 'mb-0', + 'card-title' + ], + titleLight: [ + 'text-light' + ], + collapseIcon: [ + 'formio-collapse-icon', + 'text-muted' + ], + openIcon: [ + '{{iconClass(\'plus-square-o\')}}' + ], + closeIcon: [ + '{{iconClass(\'minus-square-o\')}}' + ], + tooltip: [ + 'text-muted', + '{{iconClass(\'question-sign\')}}' + ], + body: [ + 'card-body' + ] + }, +}; diff --git a/src/templates/bootstrap5/pdf/classes.ts b/src/templates/bootstrap5/pdf/classes.ts new file mode 100644 index 000000000..778a41fc5 --- /dev/null +++ b/src/templates/bootstrap5/pdf/classes.ts @@ -0,0 +1,25 @@ +export default { + form: { + webform: [ + '{{classes}}' + ], + zoomIn: [ + 'btn', + 'btn-default', + 'btn-secondary', + 'no-disable' + ], + zoomOut: [ + 'btn', + 'btn-default', + 'btn-secondary', + 'no-disable' + ], + zoomInIcon: [ + '{{iconClass(\'zoom-in\')}}' + ], + zoomOutIcon: [ + '{{iconClass(\'zoom-out\')}}' + ] + }, +}; diff --git a/src/templates/bootstrap5/pdfBuilder/classes.ts b/src/templates/bootstrap5/pdfBuilder/classes.ts new file mode 100644 index 000000000..15bf9f9e3 --- /dev/null +++ b/src/templates/bootstrap5/pdfBuilder/classes.ts @@ -0,0 +1,25 @@ +export default { + form: { + builder: [ + 'formio', + 'builder', + 'row', + 'formbuilder' + ], + formComponents: [ + 'col-xs-4', + 'col-sm-3', + 'col-md-2', + 'formcomponents' + ], + form: [ + 'col-xs-8', + 'col-sm-9', + 'col-md-10', + 'formarea' + ], + iframeDropzone: [ + 'formio-drop-zone' + ] + }, +}; diff --git a/src/templates/bootstrap5/pdfBuilderUpload/classes.ts b/src/templates/bootstrap5/pdfBuilderUpload/classes.ts new file mode 100644 index 000000000..10944cd06 --- /dev/null +++ b/src/templates/bootstrap5/pdfBuilderUpload/classes.ts @@ -0,0 +1,32 @@ +export default { + form: { + container: [ + 'pdf-upload', + 'formio-component-file' + ], + label: [ + 'label' + ], + hiddenInput: [], + fileSelector: [ + 'fileSelector' + ], + dragDropTextIcon: [ + '{{iconClass(\'cloud-upload\')}}' + ], + fileBrowse: [ + 'browse' + ], + uploadProgressWrapper: [ + 'progress', + 'pdf-progress' + ], + uploadProgress: [ + 'progress-bar' + ], + uploadError: [ + 'alert', + 'alert-danger' + ] + }, +}; diff --git a/src/templates/bootstrap5/radio/classes.ts b/src/templates/bootstrap5/radio/classes.ts new file mode 100644 index 000000000..cd795ca30 --- /dev/null +++ b/src/templates/bootstrap5/radio/classes.ts @@ -0,0 +1,26 @@ +export default { + form: { + radioGroup: [ + 'form-radio', + 'radio' + ], + wrapper: [ + '{{input.attr.type}}', + 'form-check{{inline ? \'-inline\' : \'\'}}', + ], + wrapperLabelRight: [], + wrapperLabelNonRight: [ + 'ps-0', + ], + label: [ + 'form-check-label', + 'label-position-{{component.optionsLabelPosition}}' + ], + input: [ + 'form-check-input' + ], + }, + html: { + radio: [] + }, +}; diff --git a/src/templates/bootstrap5/resourceAdd/classes.ts b/src/templates/bootstrap5/resourceAdd/classes.ts new file mode 100644 index 000000000..337ff7c7c --- /dev/null +++ b/src/templates/bootstrap5/resourceAdd/classes.ts @@ -0,0 +1,16 @@ +export default { + form: { + table: [ + 'table', + 'table-bordered' + ], + addResource: [ + 'btn', + 'btn-primary', + 'formio-button-add-resource' + ], + addResourceIcon: [ + '{{iconClass(\'plus\')}}' + ] + }, +}; diff --git a/src/templates/bootstrap5/select/classes.ts b/src/templates/bootstrap5/select/classes.ts new file mode 100644 index 000000000..81ce46e31 --- /dev/null +++ b/src/templates/bootstrap5/select/classes.ts @@ -0,0 +1,10 @@ +export default { + form: { + autocompleteInput: [ + 'formio-select-autocomplete-input' + ] + }, + html: { + selectValue: [] + }, +}; diff --git a/src/templates/bootstrap5/selectAllContent/classes.ts b/src/templates/bootstrap5/selectAllContent/classes.ts new file mode 100644 index 000000000..dab970082 --- /dev/null +++ b/src/templates/bootstrap5/selectAllContent/classes.ts @@ -0,0 +1,20 @@ +export default { + html: { + wrapper: [ + 'formio-grid-select-wrapper', + 'alert', + 'text-secondary', + 'text-center' + ], + info: [ + 'formio-grid-select-info' + ], + spinner: [ + 'formio-grid-select-spinner' + ], + selectAllBtn: [ + 'formio-grid-select-btn', + 'text-primary' + ] + }, +}; diff --git a/src/templates/bootstrap5/selectOption/classes.ts b/src/templates/bootstrap5/selectOption/classes.ts new file mode 100644 index 000000000..0e1a629f8 --- /dev/null +++ b/src/templates/bootstrap5/selectOption/classes.ts @@ -0,0 +1,8 @@ +export default { + form: { + option: [] + }, + html: { + option: [] + }, +}; diff --git a/src/templates/bootstrap5/signature/classes.ts b/src/templates/bootstrap5/signature/classes.ts new file mode 100644 index 000000000..67adfd755 --- /dev/null +++ b/src/templates/bootstrap5/signature/classes.ts @@ -0,0 +1,33 @@ +export default { + form: { + padBody: [ + 'signature-pad-body' + ], + fieldRequired: [ + 'form-control-feedback', + 'field-required-inline', + 'text-danger' + ], + fieldRequiredIcon: [ + '{{iconClass(\'asterisk\')}}' + ], + refresh: [ + 'btn', + 'btn-sm', + 'btn-light', + 'signature-pad-refresh' + ], + refreshIcon: [ + '{{iconClass(\'refresh\')}}' + ], + canvas: [ + 'signature-pad-canvas' + ], + padFooter: [ + 'signature-pad-footer' + ] + }, + html: { + signatureImage: [] + }, +}; diff --git a/src/templates/bootstrap5/survey/classes.ts b/src/templates/bootstrap5/survey/classes.ts new file mode 100644 index 000000000..4a5b5c197 --- /dev/null +++ b/src/templates/bootstrap5/survey/classes.ts @@ -0,0 +1,24 @@ +export default { + form: { + table: [ + 'table', + 'table-striped', + 'table-bordered' + ], + tooltip: [ + '{{iconClass(\'question-sign\')}}', + 'text-muted' + ], + questionTooltip: [ + '{{iconClass(\'question-sign\')}}', + 'text-muted' + ] + }, + html: { + table: [ + 'table', + 'table-striped', + 'table-bordered' + ] + }, +}; diff --git a/src/templates/bootstrap5/tab/classes.ts b/src/templates/bootstrap5/tab/classes.ts new file mode 100644 index 000000000..a29ac345d --- /dev/null +++ b/src/templates/bootstrap5/tab/classes.ts @@ -0,0 +1,62 @@ +export default { + form: { + tabsNav: [ + 'tab-component-tabs', + 'nav', + 'nav-tabs', + 'card-header-tabs' + ], + tabsNavVertical: [ + 'nav-tabs-vertical' + ], + header: [ + 'card-header' + ], + container: [ + 'card' + ], + containerVertical: [ + 'card-vertical' + ], + tab: [ + 'nav-item' + ], + tabActive: [ + 'active' + ], + tabLink: [ + 'nav-link' + ], + tabLinkActive: [ + 'active' + ], + tabLinkVertical: [ + 'nav-link-vertical' + ], + tabPanel: [ + 'tab-pane', + 'card-body' + ], + tabPanelActive: [ + 'active' + ] + }, + flat: { + wrapper: [ + 'mb-2', + 'card', + 'border' + ], + header: [ + 'card-header', + 'bg-default' + ], + title: [ + 'card-tilte', + 'mb-0' + ], + body: [ + 'card-body' + ] + }, +}; diff --git a/src/templates/bootstrap5/table/classes.ts b/src/templates/bootstrap5/table/classes.ts new file mode 100644 index 000000000..94a37e911 --- /dev/null +++ b/src/templates/bootstrap5/table/classes.ts @@ -0,0 +1,25 @@ +export default { + form: { + table: [ + 'table' + ], + tableStriped: [ + 'table-striped' + ], + tableBordered: [ + 'table-bordered' + ], + tableHover: [ + 'table-hover' + ], + tableCondensed: [ + 'table-sm' + ], + caption: [ + 'visually-hidden' + ], + cell: [ + '{{cellClassName}}' + ] + }, +}; diff --git a/src/templates/bootstrap5/tableComponents/classes.ts b/src/templates/bootstrap5/tableComponents/classes.ts new file mode 100644 index 000000000..281b6938d --- /dev/null +++ b/src/templates/bootstrap5/tableComponents/classes.ts @@ -0,0 +1,7 @@ +export default { + form: { + column: [ + 'editgrid-table-column' + ] + }, +}; diff --git a/src/templates/bootstrap5/tbody/classes.ts b/src/templates/bootstrap5/tbody/classes.ts new file mode 100644 index 000000000..39f8a1dde --- /dev/null +++ b/src/templates/bootstrap5/tbody/classes.ts @@ -0,0 +1,49 @@ +export default { + html: { + cell: [], + clippedCell: [ + 'clip' + ], + gridActions: [ + 'formio-grid-ops', + 'formio-actions-col', + 'position-sticky', + 'p-0', + 'border-0' + ], + rowMenu: [ + 'row-menu-btn', + 'border-left', + 'border-right' + ], + menu: [ + 'dropdown' + ], + deleteRow: [ + 'dropdown-item' + ], + editRow: [ + 'dropdown-item' + ], + editRowButton: [ + 'btn', + 'formio-grid-ops-button' + ], + actionDisabled: [ + 'disabled' + ], + deleteRowButton: [ + 'btn', + 'btn-xxs', + 'formio-grid-ops-button' + ], + dropdown: [ + 'dropdown-menu', + 'p-0' + ], + deleteRowIcon: [ + 'fa', + 'fa-trash' + ] + }, +}; diff --git a/src/templates/bootstrap5/tree/classes.ts b/src/templates/bootstrap5/tree/classes.ts new file mode 100644 index 000000000..07f6ea156 --- /dev/null +++ b/src/templates/bootstrap5/tree/classes.ts @@ -0,0 +1,26 @@ +export default { + form: { + childNodes: [ + 'tree__node-children', + 'list-group', + 'row' + ], + content: [ + 'tree__node-content' + ], + root: [ + 'list-group-item' + ], + node: [ + 'list-group-item', + 'col-sm-12', + 'tree__level' + ], + nodeOdd: [ + 'tree__level_odd' + ], + nodeEven: [ + 'tree__level_even' + ] + }, +}; diff --git a/src/templates/bootstrap5/tree/partials/classes.ts b/src/templates/bootstrap5/tree/partials/classes.ts new file mode 100644 index 000000000..06280e7fc --- /dev/null +++ b/src/templates/bootstrap5/tree/partials/classes.ts @@ -0,0 +1,22 @@ +export default { + treeEdit: { + form: { + nodeEdit: ['node-edit'], + nodeActions: ['node-actions'], + saveNode: ['btn', 'btn-primary', 'saveNode'], + cancelNode: ['btn', 'btn-danger', 'cancelNode'] + }, + }, + treeView: { + form: { + row: ['row'], + col: ['col-sm-2'], + btnGroup: ['btn-group', 'pull-right'], + toggleNode: ['btn', 'btn-default', 'btn-sm', 'toggleNode'], + addChild: ['btn', 'btn-default', 'btn-sm', 'addChild'], + editNode: ['btn', 'btn-default', 'btn-sm', 'editNode'], + removeNode: ['btn', 'btn-danger', 'btn-sm', 'removeNode'], + revertNode: ['btn', 'btn-danger', 'btn-sm', 'revertNode'], + }, + }, +}; diff --git a/src/templates/bootstrap5/webform/classes.ts b/src/templates/bootstrap5/webform/classes.ts new file mode 100644 index 000000000..7be35c744 --- /dev/null +++ b/src/templates/bootstrap5/webform/classes.ts @@ -0,0 +1,14 @@ +export default { + form: { + webform: [ + '{{classes}}' + ] + }, + builder: { + webform: [ + 'text-muted', + 'text-center', + 'p-2' + ] + }, +}; diff --git a/src/templates/bootstrap5/well/classes.ts b/src/templates/bootstrap5/well/classes.ts new file mode 100644 index 000000000..7632c8a1e --- /dev/null +++ b/src/templates/bootstrap5/well/classes.ts @@ -0,0 +1,10 @@ +export default { + form: { + well: [ + 'card', + 'card-body', + 'bg-light', + 'mb-3' + ] + }, +}; diff --git a/src/templates/bootstrap5/wizard/classes.ts b/src/templates/bootstrap5/wizard/classes.ts new file mode 100644 index 000000000..77315f55d --- /dev/null +++ b/src/templates/bootstrap5/wizard/classes.ts @@ -0,0 +1,32 @@ +export default { + form: { + wizardContainer: [ + '{{className}}' + ], + wizardPage: [ + 'wizard-page', + 'col-sm-10' + ], + wrapper: [ + 'row' + ], + header: [ + 'col-sm-2' + ], + wizardNav: [ + 'col-sm-offset-2', + 'col-sm-10' + ], + wizardNavHeaderRight: [ + 'col-sm-offset-0', + 'col-md-offset-0' + ] + }, + builder: { + wizard: [ + 'text-muted', + 'text-center', + 'p-2' + ] + }, +}; diff --git a/src/templates/bootstrap5/wizardHeader/classes.ts b/src/templates/bootstrap5/wizardHeader/classes.ts new file mode 100644 index 000000000..df3c5b30b --- /dev/null +++ b/src/templates/bootstrap5/wizardHeader/classes.ts @@ -0,0 +1,20 @@ +export default { + form: { + pagination: [ + 'pagination' + ], + pageAvtive: [ + 'active' + ], + page: [ + 'page-item' + ], + pageLink: [ + 'page-link' + ], + tooltip: [ + '{{iconClass(\'question-sign\')}}', + 'text-muted' + ] + }, +}; diff --git a/src/templates/bootstrap5/wizardHeaderClassic/classes.ts b/src/templates/bootstrap5/wizardHeaderClassic/classes.ts new file mode 100644 index 000000000..3d7504072 --- /dev/null +++ b/src/templates/bootstrap5/wizardHeaderClassic/classes.ts @@ -0,0 +1,37 @@ +export default { + form: { + pagination: [ + 'classic-pagination', + 'row', + 'justify-content-center' + ], + pageAvtive: [ + 'active' + ], + page: [ + 'classic-pagination-page', + 'col-xs-12', + 'col-sm-6', + 'col-md-3' + ], + pageDisabled: [ + 'disabled' + ], + pageCompleted: [ + 'complete' + ], + progress: [ + 'progress' + ], + progressBar: [ + 'progress-bar' + ], + title: [ + 'text-center', + 'classic-pagination-title' + ], + paginationDot: [ + 'classic-pagination-dot' + ] + }, +}; diff --git a/src/templates/bootstrap5/wizardHeaderVertical/classes.ts b/src/templates/bootstrap5/wizardHeaderVertical/classes.ts new file mode 100644 index 000000000..84de6fc64 --- /dev/null +++ b/src/templates/bootstrap5/wizardHeaderVertical/classes.ts @@ -0,0 +1,22 @@ +export default { + form: { + pagination: [ + 'pagination', + 'flex-column' + ], + pageAvtive: [ + 'active' + ], + page: [ + 'col-xs-12', + 'page-item' + ], + pageLink: [ + 'page-link' + ], + tooltip: [ + '{{iconClass(\'question-sign\')}}', + 'text-muted' + ] + }, +}; diff --git a/src/templates/bootstrap5/wizardNav/classes.ts b/src/templates/bootstrap5/wizardNav/classes.ts new file mode 100644 index 000000000..9e69f8b25 --- /dev/null +++ b/src/templates/bootstrap5/wizardNav/classes.ts @@ -0,0 +1,28 @@ +export default { + form: { + wizardNav: [ + 'list-inline', + 'formio-wizard-nav-container' + ], + cancel: [ + 'btn', + 'btn-secondary', + 'btn-wizard-nav-cancel' + ], + previous: [ + 'btn', + 'btn-primary', + 'btn-wizard-nav-previous' + ], + next: [ + 'btn', + 'btn-primary', + 'btn-wizard-nav-next' + ], + submit: [ + 'btn', + 'btn-primary', + 'btn-wizard-nav-submit' + ] + }, +};