Skip to content

Commit b6bfb0e

Browse files
KirylDrutskoKirylDrutsko
authored
FIO-8611: Added default classes for each template for new template system (#138)
* Moved all default templatge styles here * Refactoring
1 parent ce0dcc6 commit b6bfb0e

72 files changed

Lines changed: 1936 additions & 87 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/bootstrap5.ts‎

Lines changed: 133 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,145 @@
1-
import label from './templates/bootstrap5/label/form.js';
1+
import { getFrameworkTemplates } from '@formio/standard-template';
2+
import addressClasses from './templates/bootstrap5/address/classes.js';
3+
import builderClasses from './templates/bootstrap5/builder/classes.js';
4+
import builderComponentClasses from './templates/bootstrap5/builderComponent/classes.js';
5+
import builderComponentsClasses from './templates/bootstrap5/builderComponents/classes.js';
6+
import builderEditFormClasses from './templates/bootstrap5/builderEditForm/classes.js';
7+
import builderPlaceholderClasses from './templates/bootstrap5/builderPlaceholder/classes.js';
8+
import builderSidebarClasses from './templates/bootstrap5/builderSidebar/classes.js';
9+
import builderSidebarGroupClasses from './templates/bootstrap5/builderSidebarGroup/classes.js';
10+
import builderWizardClasses from './templates/bootstrap5/builderWizard/classes.js';
11+
import buttonClasses from './templates/bootstrap5/button/classes.js';
12+
import checkboxClasses from './templates/bootstrap5/checkbox/classes.js';
13+
import columnsClasses from './templates/bootstrap5/columns/classes.js';
14+
import componentClasses from './templates/bootstrap5/component/classes.js';
15+
import componentModalClasses from './templates/bootstrap5/componentModal/classes.js';
16+
import componentsClasses from './templates/bootstrap5/components/classes.js';
17+
import tableComponentsClasses from './templates/bootstrap5/tableComponents/classes.js';
18+
import containerClasses from './templates/bootstrap5/container/classes.js';
19+
import datagridClasses from './templates/bootstrap5/datagrid/classes.js';
20+
import dayClasses from './templates/bootstrap5/day/classes.js';
21+
import dialogClasses from './templates/bootstrap5/dialog/classes.js';
22+
import editgridClasses from './templates/bootstrap5/editgrid/classes.js';
23+
import editgridTableClasses from './templates/bootstrap5/editgridTable/classes.js';
24+
import fieldClasses from './templates/bootstrap5/field/classes.js';
25+
import fieldsetClasses from './templates/bootstrap5/fieldset/classes.js';
26+
import fileClasses from './templates/bootstrap5/file/classes.js';
27+
import htmlClasses from './templates/bootstrap5/html/classes.js';
28+
import iconClasses from './templates/bootstrap5/icon/classes.js';
229
import inputClasses from './templates/bootstrap5/input/classes.js';
330
import labelClasses from './templates/bootstrap5/label/classes.js';
4-
import componentClasses from './templates/bootstrap5/component/classes.js';
5-
import { getFrameworkTemplates } from '@formio/standard-template'
31+
import loaderClasses from './templates/bootstrap5/loader/classes.js';
32+
import loadingClasses from './templates/bootstrap5/loading/classes.js';
33+
import mapClasses from './templates/bootstrap5/map/classes.js';
34+
import messageClasses from './templates/bootstrap5/message/classes.js';
35+
import modaldialogClasses from './templates/bootstrap5/modaldialog/classes.js';
36+
import modaleditClasses from './templates/bootstrap5/modaledit/classes.js';
37+
import modalPreviewClasses from './templates/bootstrap5/modalPreview/classes.js';
38+
import multipleMasksInputClasses from './templates/bootstrap5/multipleMasksInput/classes.js';
39+
import multiValueRowClasses from './templates/bootstrap5/multiValueRow/classes.js';
40+
import multiValueTableClasses from './templates/bootstrap5/multiValueTable/classes.js';
41+
import panelClasses from './templates/bootstrap5/panel/classes.js';
42+
import pdfClasses from './templates/bootstrap5/pdf/classes.js';
43+
import pdfBuilderClasses from './templates/bootstrap5/pdfBuilder/classes.js';
44+
import pdfBuilderUploadClasses from './templates/bootstrap5/pdfBuilderUpload/classes.js';
45+
import radioClasses from './templates/bootstrap5/radio/classes.js';
46+
import resourceAddClasses from './templates/bootstrap5/resourceAdd/classes.js';
47+
import selectClasses from './templates/bootstrap5/select/classes.js';
48+
import selectOptionClasses from './templates/bootstrap5/selectOption/classes.js';
49+
import signatureClasses from './templates/bootstrap5/signature/classes.js';
50+
import surveyClasses from './templates/bootstrap5/survey/classes.js';
51+
import tabClasses from './templates/bootstrap5/tab/classes.js';
52+
import tableClasses from './templates/bootstrap5/table/classes.js';
53+
import treeClasses from './templates/bootstrap5/tree/classes.js';
54+
import treePartialsClasses from './templates/bootstrap5/tree/partials/classes.js';
55+
import webformClasses from './templates/bootstrap5/webform/classes.js';
56+
import wellClasses from './templates/bootstrap5/well/classes.js';
57+
import wizardClasses from './templates/bootstrap5/wizard/classes.js';
58+
import wizardHeaderClasses from './templates/bootstrap5/wizardHeader/classes.js';
59+
import wizardHeaderClassicClasses from './templates/bootstrap5/wizardHeaderClassic/classes.js';
60+
import wizardHeaderVerticalClasses from './templates/bootstrap5/wizardHeaderVertical/classes.js';
61+
import wizardNavClasses from './templates/bootstrap5/wizardNav/classes.js';
62+
import errorsListClasses from './templates/bootstrap5/errorsList/classes.js';
63+
import alertClasses from './templates/bootstrap5/alert/classes.js';
64+
import gridClasses from './templates/bootstrap5/grid/classes.js';
65+
import paginationClasses from './templates/bootstrap5/pagination/classes.js';
66+
import columnMenuClasses from './templates/bootstrap5/column-menu/classes.js';
67+
import tbodyClasses from './templates/bootstrap5/tbody/classes.js';
68+
import paginationBottomClasses from './templates/bootstrap5/pagination-bottom/classes.js';
69+
import selectAllContentClasses from './templates/bootstrap5/selectAllContent/classes.js';
670

771
const classes = {
72+
address: addressClasses,
73+
builder: builderClasses,
74+
builderComponent: builderComponentClasses,
75+
builderComponents: builderComponentsClasses,
76+
builderEditForm: builderEditFormClasses,
77+
builderPlaceholder: builderPlaceholderClasses,
78+
builderSidebar: builderSidebarClasses,
79+
builderSidebarGroup: builderSidebarGroupClasses,
80+
builderWizard: builderWizardClasses,
81+
button: buttonClasses,
82+
checkbox: checkboxClasses,
83+
columns: columnsClasses,
884
component: componentClasses,
85+
componentModal: componentModalClasses,
86+
components: componentsClasses,
87+
tableComponents: tableComponentsClasses,
88+
container: containerClasses,
89+
datagrid: datagridClasses,
90+
day: dayClasses,
91+
dialog: dialogClasses,
92+
editgrid: editgridClasses,
93+
editgridTable: editgridTableClasses,
94+
field: fieldClasses,
95+
fieldset: fieldsetClasses,
96+
file: fileClasses,
97+
html: htmlClasses,
98+
icon: iconClasses,
99+
input: inputClasses,
9100
label: labelClasses,
10-
input: inputClasses
101+
loader: loaderClasses,
102+
loading: loadingClasses,
103+
map: mapClasses,
104+
message: messageClasses,
105+
modaledit: modaleditClasses,
106+
modaldialog: modaldialogClasses,
107+
modalPreview: modalPreviewClasses,
108+
multipleMasksInput: multipleMasksInputClasses,
109+
multiValueRow: multiValueRowClasses,
110+
multiValueTable: multiValueTableClasses,
111+
panel: panelClasses,
112+
pdf: pdfClasses,
113+
pdfBuilder: pdfBuilderClasses,
114+
pdfBuilderUpload: pdfBuilderUploadClasses,
115+
radio: radioClasses,
116+
resourceAdd: resourceAddClasses,
117+
select: selectClasses,
118+
selectOption: selectOptionClasses,
119+
signature: signatureClasses,
120+
survey: surveyClasses,
121+
tab: tabClasses,
122+
table: tableClasses,
123+
tbody: tbodyClasses,
124+
tree: treeClasses,
125+
...treePartialsClasses,
126+
webform: webformClasses,
127+
well: wellClasses,
128+
wizard: wizardClasses,
129+
wizardHeader: wizardHeaderClasses,
130+
wizardHeaderClassic: wizardHeaderClassicClasses,
131+
wizardHeaderVertical: wizardHeaderVerticalClasses,
132+
wizardNav: wizardNavClasses,
133+
errorsList: errorsListClasses,
134+
alert: alertClasses,
135+
grid: gridClasses,
136+
pagination: paginationClasses,
137+
columnMenu: columnMenuClasses,
138+
paginationBottom: paginationBottomClasses,
139+
selectAllContent: selectAllContentClasses,
11140
};
12141

13142
const templates = {
14-
label: {
15-
form: label
16-
},
17143
};
18144

19145

‎src/templates/bootstrap5/address/classes.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default {
2+
form: {
3+
autocomplete: ['address-autocomplete-container'],
4+
removeValueIcon: ['address-autocomplete-remove-value-icon', 'fa', 'fa-times', 'bi', 'bi-x'],
5+
formCheck: ['form-check', 'checkbox'],
6+
formCheckLabel: ['form-check-label'],
7+
formCheckInput: ['form-check-input'],
8+
},
9+
};

‎src/templates/bootstrap5/alert/classes.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default {
2+
form: {
3+
visuallyHidden: ['visually-hidden'],
4+
},
5+
};

‎src/templates/bootstrap5/builder/classes.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
export default {
2+
form: {
3+
builder: [
4+
'formio',
5+
'builder',
6+
'row',
7+
'formbuilder',
8+
],
9+
sidebar: [
10+
'col-xs-4',
11+
'col-sm-3',
12+
'col-md-2',
13+
'formcomponents',
14+
],
15+
form: [
16+
'col-xs-8',
17+
'col-sm-9',
18+
'col-md-10',
19+
'formarea',
20+
]
21+
},
22+
};

‎src/templates/bootstrap5/builderComponent/classes.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export default {
2+
form: {
3+
dragComponent: ['builder-component'],
4+
builderActions: ['component-btn-group'],
5+
removeComponent: ['btn', 'btn-xxs', 'btn-danger', 'component-settings-button', 'component-settings-button-remove'],
6+
buttonRemoveIcons: ['{{iconClass(\'remove\')}}'],
7+
buttonCopyIcons: ['{{iconClass(\'сopy\')}}'],
8+
buttonPasteIcon: ['{{iconClass(\'save\')}}'],
9+
buttonEditJsonIcon: ['{{iconClass(\'wrench\')}}'],
10+
buttonMoveIcon: ['{{iconClass(\'move\')}}'],
11+
buttonEditIcon: ['{{iconClass(\'cog\')}}'],
12+
copyComponent: ['btn', 'btn-xxs', 'btn-default', 'component-settings-button', 'component-settings-button-copy'],
13+
pasteComponent: ['btn', 'btn-xxs', 'btn-default', 'component-settings-button', 'component-settings-button-paste'],
14+
editJson: ['btn', 'btn-xxs', 'btn-default', 'component-settings-button', 'component-settings-button-edit-json'],
15+
moveComponent: ['btn', 'btn-xxs', 'btn-default', 'component-settings-button', 'component-settings-button-move'],
16+
editComponent: ['btn', 'btn-xxs', 'btn-secondary', 'component-settings-button', 'component-settings-button-edit']
17+
},
18+
};

‎src/templates/bootstrap5/builderComponents/classes.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default {
2+
form: {
3+
componentsContainer: [
4+
'builder-components',
5+
'drag-container',
6+
'formio-builder-{{type}}',
7+
],
8+
},
9+
};

‎src/templates/bootstrap5/builderEditForm/classes.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export default {
2+
form: {
3+
componentTitleRow: ['row'],
4+
componentTitleCol: ['col', 'col-sm-6'],
5+
helplinksCol: ['col', 'col-sm-6'],
6+
previewCol: ['col', 'col-sm-6'],
7+
helplinksIcon: ['iconClass(\'new-window\')'],
8+
editFormRow: ['row'],
9+
editTabs: ['col', 'component-edit-tabs'],
10+
editTabsPreviewOn: ['col-sm-6'],
11+
editTabsPreviewOff: ['col-sm-12'],
12+
saveButton: ['btn', 'btn-success'],
13+
cancelButton: ['btn', 'btn-secondary'],
14+
removeButton: ['btn', 'btn-danger'],
15+
previewButton: ['btn', 'btn-primary', 'float-right'],
16+
previewPanel: ['card', 'panel', 'preview-panel'],
17+
previewHeader: ['card', 'panel', 'preview-panel'],
18+
previewTitle: ['card-title', 'mb-0'],
19+
previewBody: ['card-body'],
20+
preview: ['component-preview'],
21+
help: ['card', 'card-body', 'bg-light', 'formio-settings-help']
22+
},
23+
};

‎src/templates/bootstrap5/builderPlaceholder/classes.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default {
2+
form: {
3+
placeholder: [
4+
'drag-and-drop-alert',
5+
'alert',
6+
'alert-info',
7+
'no-drag',
8+
],
9+
},
10+
};

‎src/templates/bootstrap5/builderSidebar/classes.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export default {
2+
form: {
3+
sidebar: [
4+
'accordion',
5+
'builder-sidebar',
6+
],
7+
sidebarScroll: [
8+
'builder-sidebar_scroll',
9+
],
10+
sidebarSearch: [
11+
'form-control',
12+
'builder-sidebar_search',
13+
],
14+
sidebarGroups: [],
15+
},
16+
};

‎src/templates/bootstrap5/builderSidebarGroup/classes.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export default {
2+
form: {
3+
groupPanel: [
4+
'card', 'form-builder-panel', 'accordion-item'
5+
],
6+
groupHeader: [
7+
'card-header',
8+
'form-builder-group-header',
9+
'p-0',
10+
],
11+
groupTitle: ['mb-0', 'mt-0', 'd-grid', 'accordion-header'],
12+
sidebarAnchor: [
13+
'btn',
14+
'builder-group-button',
15+
],
16+
sidebarDefault: [
17+
'show',
18+
],
19+
sidebarGroup: ['accordion-collapse', 'collapse'],
20+
sidebarContainer: ['d-grid', 'gap-1', 'no-drop', 'p-2', 'w-100'],
21+
groupComponent: ['btn', 'btn-outline-primary', 'btn-sm', 'formcomponent', 'drag-copy', 'm-0'],
22+
},
23+
};

0 commit comments

Comments
 (0)