FIO-8611: Added default classes for each template for new template system

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
-  },
 };
 
 

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'],
+  },
+};

src/templates/bootstrap5/alert/classes.ts

@@ -0,0 +1,5 @@
+export default {
+  form: {
+    visuallyHidden: ['visually-hidden'],
+  },
+};

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',
+    ]
+  },
+};

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']
+  },
+};

src/templates/bootstrap5/builderComponents/classes.ts

@@ -0,0 +1,9 @@
+export default {
+  form: {
+    componentsContainer: [
+      'builder-components',
+      'drag-container',
+      'formio-builder-{{type}}',
+    ],
+  },
+};

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']
+  },
+};

src/templates/bootstrap5/builderPlaceholder/classes.ts

@@ -0,0 +1,10 @@
+export default {
+  form: {
+    placeholder: [
+      'drag-and-drop-alert',
+      'alert',
+      'alert-info',
+      'no-drag',
+    ],
+  },
+};

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: [],
+  },
+};

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'],
+  },
+};

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\')}}'],
+  },
+};

src/templates/bootstrap5/button/classes.ts

@@ -0,0 +1,11 @@
+export default {
+  form: {
+    helpBlock: [
+      'help-block'
+    ],
+    tooltipIcon: [
+      '{{iconClass(\'question-sign\')}}',
+      'text-muted'
+    ]
+  },
+};

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}}'
+    ]
+  },
+};