API Docs for: 3.0.1.91d25ad1
Show:

File: addon/themes/default.js

import EmberObject, {computed} from '@ember/object';
import {getOwner} from '@ember/application';

export const componentPath = (componentName) =>
  computed('componentsPath', 'defaultComponentsPath', function () {
    const owner = getOwner(this);
    const defaultPath =`${this.defaultComponentsPath}${componentName}`;
    const customPath = `${this.componentsPath}${componentName}`;
    return owner.lookup(`component:${customPath}`) ? customPath : defaultPath;
  });

/**
 * Almost empty skeleton for themes. Extend it to provide custom CSS-classes for table items and icons.
 *
 * * Every property with suffix `Component` is a path to the component used in theme
 * * Every property with suffix `Msg` is a message shown in the table
 * * Every property with suffix `Icon` is a CSS-class for font-library used as an icons (used for buttons, carets etc)
 *
 * **Difference from `v.2`:**
 *
 * * No `mergedProperties`
 * * Properties `components`, `messages` and `icons` are removed. Every their key is placed directly in theme and named with suffix `Component`, `Msg` or `Icon`.
 * * Every property name is converted to the `lowerCamelCase`
 *
 * @class DefaultTheme
 * @namespace Themes
 */
export default class DefaultTheme extends EmberObject {

  /**
   * Path to theme's components. It's used in the child-themes
   *
   * @property componentsPath
   * @default 'models-table/'
   * @type string
   */
  componentsPath = 'models-table/';

  /**
   * Default path to theme's components
   *
   * @property defaultComponentsPath
   * @default 'models-table/'
   * @type string
   */
  defaultComponentsPath = 'models-table/';

  /**
   * @property cellComponent
   * @type string
   * @default 'models-table/cell'
   */
  @componentPath('cell')
  cellComponent;

  /**
   * @property cellContentDisplayComponent
   * @type string
   * @default 'models-table/cell-content-display'
   */
  @componentPath('cell-content-display')
  cellContentDisplayComponent;

  /**
   * @property cellContentEditComponent
   * @type string
   * @default 'models-table/cell-content-edit'
   */
  @componentPath('cell-content-edit')
  cellContentEditComponent;

  /**
   * @property cellEditToggleComponent
   * @type string
   * @default 'models-table/cell-edit-toggle'
   */
  @componentPath('cell-edit-toggle')
  cellEditToggleComponent;


  /**
   * @property cellContentSummaryComponent
   * @type string
   * @default 'models-table/cell-column-summary'
   */
  @componentPath('cell-column-summary')
  cellContentSummaryComponent;

  /**
   * @property columnsDropdownComponent
   * @type string
   * @default 'models-table/columns-dropdown'
   */
  @componentPath('columns-dropdown')
  columnsDropdownComponent;

  /**
   * @property columnsHiddenComponent
   * @type string
   * @default 'models-table/columns-hidden'
   */
  @componentPath('columns-hidden')
  columnsHiddenComponent;

  /**
   * @property dataGroupBySelectComponent
   * @type string
   * @default 'models-table/data-group-by-select'
   */
  @componentPath('data-group-by-select')
  dataGroupBySelectComponent;

  /**
   * @property expandAllToggleComponent
   * @type string
   * @default 'models-table/expand-all-toggle'
   */
  @componentPath('expand-all-toggle')
  expandAllToggleComponent;

  /**
   * @property expandToggleComponent
   * @type string
   * @default 'models-table/expand-toggle'
   */
  @componentPath('expand-toggle')
  expandToggleComponent;

  /**
   * @property footerComponent
   * @type string
   * @default 'models-table/footer'
   */
  @componentPath('footer')
  footerComponent;

  /**
   * @property globalFilterComponent
   * @type string
   * @default 'models-table/global-filter'
   */
  @componentPath('global-filter')
  globalFilterComponent;

  /**
   * @property groupedHeaderComponent
   * @type string
   * @default 'models-table/grouped-header'
   */
  @componentPath('grouped-header')
  groupedHeaderComponent;

  /**
   * @property noDataComponent
   * @type string
   * @default 'models-table/no-data'
   */
  @componentPath('no-data')
  noDataComponent;

  /**
   * @property pageSizeSelectComponent
   * @type string
   * @default 'models-table/page-size-select'
   */
  @componentPath('page-size-select')
  pageSizeSelectComponent;

  /**
   * @property paginationNumericComponent
   * @type string
   * @default 'models-table/pagination-numeric'
   */
  @componentPath('pagination-numeric')
  paginationNumericComponent;

  /**
   * @property paginationSimpleComponent
   * @type string
   * @default 'models-table/pagination-simple'
   */
  @componentPath('pagination-simple')
  paginationSimpleComponent;

  /**
   * @property rowComponent
   * @type string
   * @default 'models-table/row'
   */
  @componentPath('row')
  rowComponent;

  /**
   * @property rowExpandComponent
   * @type string
   * @default 'models-table/row-expand'
   */
  @componentPath('row-expand')
  rowExpandComponent;

  /**
   * @property rowFilteringComponent
   * @type string
   * @default 'models-table/row-filtering'
   */
  @componentPath('row-filtering')
  rowFilteringComponent;

  /**
   * @property rowFilteringCellComponent
   * @type string
   * @default 'models-table/row-filtering-cell'
   */
  @componentPath('row-filtering-cell')
  rowFilteringCellComponent;

  /**
   * @property rowGroupingComponent
   * @type string
   * @default 'models-table/row-grouping'
   */
  @componentPath('row-grouping')
  rowGroupingComponent;

  /**
   * @property rowGroupToggleComponent
   * @type string
   * @default 'models-table/row-group-toggle'
   */
  @componentPath('row-group-toggle')
  rowGroupToggleComponent;

  /**
   * @property rowSelectAllCheckboxComponent
   * @type string
   * @default 'models-table/row-select-all-checkbox'
   */
  @componentPath('row-select-all-checkbox')
  rowSelectAllCheckboxComponent;

  /**
   * @property rowSelectCheckboxComponent
   * @type string
   * @default 'models-table/row-select-checkbox'
   */
  @componentPath('row-select-checkbox')
  rowSelectCheckboxComponent;

  /**
   * @property rowSortingComponent
   * @type string
   * @default 'models-table/row-sorting'
   */
  @componentPath('row-sorting')
  rowSortingComponent;

  /**
   * @property rowSortingCellComponent
   * @type string
   * @default 'models-table/row-sorting-cell'
   */
  @componentPath('row-sorting-cell')
  rowSortingCellComponent;

  /**
   * @property selectComponent
   * @type string
   * @default 'models-table/select'
   */
  @componentPath('select')
  selectComponent;

  /**
   * @property summaryComponent
   * @type string
   * @default 'models-table/summary'
   */
  @componentPath('summary')
  summaryComponent;

  /**
   * @property tableComponent
   * @type string
   * @default 'models-table/table'
   */
  @componentPath('table')
  tableComponent;

  /**
   * @property tableBodyComponent
   * @type string
   * @default 'models-table/table-body'
   */
  @componentPath('table-body')
  tableBodyComponent;

  /**
   * @property tableFooterComponent
   * @type string
   * @default 'models-table/table-footer'
   */
  @componentPath('table-footer')
  tableFooterComponent;

  /**
   * @property tableHeaderComponent
   * @type string
   * @default 'models-table/table-header'
   */
  @componentPath('table-header')
  tableHeaderComponent;

  /**
   * @property cellContentTagName
   * @type string
   * @default ''
   */
  cellContentTagName = '';

  /**
   * @property searchLabelMsg
   * Label for global filter
   *
   * @type string
   * @default 'Search:'
   */
  searchLabelMsg = 'Search:';

  /**
   * Placeholder for global filter
   *
   * @property searchPlaceholderMsg
   * @type string
   * @default ''
   */
  searchPlaceholderMsg = '';

  /**
   * Label for dropdown with columns for rows grouping
   *
   * @property groupByLabelMsg
   * @type string
   * @default 'Group by:'
   */
  groupByLabelMsg = 'Group by:';

  /**
   * Text on toggle for columns dropdown
   *
   * @property columnsTitleMsg
   * @type string
   * @default 'Columns'
   */
  columnsTitleMsg = 'Columns';

  /**
   * Label for button to show all table columns (under columns dropdown)
   *
   * @property columnsShowAllMsg
   * @type string
   * @default 'Show All'
   */
  columnsShowAllMsg = 'Show All';

  /**
   * Label for button to hide all table columns (under columns dropdown)
   *
   * @property columnsHideAllMsg
   * @type string
   * @default 'Hide All'
   */
  columnsHideAllMsg = 'Hide All';

  /**
   * Label for button to restore default visibility for table columns (under columns dropdown)
   *
   * @property columnsRestoreDefaultsMsg
   * @type string
   * @default 'Restore Defaults'
   */
  columnsRestoreDefaultsMsg = 'Restore Defaults';

  /**
   * Message shown in the table summary. It's used with three options:
   *
   * 1. First row's index
   * 2. Last row's index
   * 3. Overall rows count
   *
   * @property tableSummaryMsg
   * @type string
   * @default 'Show %@ - %@ of %@'
   */
  tableSummaryMsg = 'Show %@ - %@ of %@';

  /**
   * Message shown when all columns are hidden. It's shown inside table body
   *
   * @property allColumnsAreHiddenMsg
   * @type string
   * @default 'All columns are hidden. Use <strong>columns</strong>-dropdown to show some of them'
   */
  allColumnsAreHiddenMsg = 'All columns are hidden. Use <strong>columns</strong>-dropdown to show some of them';

  /**
   * Message shown when there are not data to display in the table. It's shown inside table body in cases when initial `data` is empty or when all records are filtered out
   *
   * @property noDataToShowMsg
   * @type string
   * @default 'No records to show'
   */
  noDataToShowMsg = 'No records to show';

  /**
   * Default label for button "Edit" inside the `cell-edit-toggle`-component
   *
   * @property editRowButtonLabelMsg
   * @type string
   * @default 'Edit'
   */
  editRowButtonLabelMsg = 'Edit';

  /**
   * Default label for button "Save" inside the `cell-edit-toggle`-component
   *
   * @property saveRowButtonLabelMsg
   * @type string
   * @default 'Save'
   */
  saveRowButtonLabelMsg = 'Save';

  /**
   * Default label for button "Cancel" inside the `cell-edit-toggle`-component
   *
   * @property cancelRowButtonLabelMsg
   * @type string
   * @default 'Cancel'
   */
  cancelRowButtonLabelMsg = 'Cancel';

  /**
   * Label for dropdown with page numbers. Used in both numeric and simple pagination
   *
   * @property currentPageNumberMsg
   * @type string
   * @default 'Page:'
   */
  currentPageNumberMsg = 'Page:';

  /**
   * Label for dropdown with rows count shown in the page
   *
   * @property rowsCountMsg
   * @type string
   * @default 'Rows:'
   */
  rowsCountMsg = 'Rows:';

  /**
   * Label for "First"-page in the numeric pagination. It's used for screen-readers and not "visible" by default
   *
   * @property goToFirstPageButtonTextMsg
   * @type string
   * @default 'Go to first page'
   */
  goToFirstPageButtonTextMsg = 'Go to first page';

  /**
   * Label for "Previous"-page in the numeric pagination. It's used for screen-readers and not "visible" by default
   *
   * @property goToPrevPageButtonTextMsg
   * @type string
   * @default 'Go to previous page'
   */
  goToPrevPageButtonTextMsg = 'Go to previous page';

  /**
   * Label for "Next"-page in the numeric pagination. It's used for screen-readers and not "visible" by default
   *
   * @property goToNextPageButtonTextMsg
   * @type string
   * @default 'Go to next page'
   */
  goToNextPageButtonTextMsg = 'Go to next page';

  /**
   * Label for "Last"-page in the numeric pagination. It's used for screen-readers and not "visible" by default
   *
   * @property goToLastPageButtonTextMsg
   * @type string
   * @default 'Go to last page'
   */
  goToLastPageButtonTextMsg = 'Go to last page';

  /**
   * Label for "Clear global filter"-button. It's used for screen-readers and not "visible" by default
   *
   * @property clearGlobalFilterMsg
   * @type string
   * @default 'Clear global filter input'
   */
  clearGlobalFilterMsg = 'Clear global filter input';

  /**
   * Label for "Clear filter"-buttons in the table header's cells. It's used for screen-readers and not "visible" by default
   *
   * @property clearFilterMsg
   * @type string
   * @default 'Clear filter input'
   */
  clearFilterMsg = 'Clear filter input';

  /**
   * Label for "Clear all filters"-button in the table summary section. It's used for screen-readers and not "visible" by default
   *
   * @property clearAllFiltersMsg
   * @type string
   * @default 'Clear all filters'
   */
  clearAllFiltersMsg = 'Clear all filters';

  /**
   * CSS-classes for `table`-tag
   *
   * @property table
   * @type string
   * @default ''
   */
  table = '';

  /**
   * @property buttonsGroup
   * @type string
   * @default ''
   */
  buttonsGroup = '';

  /**
   * CSS-classes for `div`-wrapper over components `global-filter`, `data-group-by-select` and `columns-dropdown`
   *
   * @property headerWrapper
   * @type string
   * @default ''
   */
  headerWrapper = '';

  /**
   * CSS-classes for wrapper used inside `global-filter` component
   *
   * @property globalFilterWrapper
   * @type string
   * @default ''
   */
  globalFilterWrapper = '';

  /**
   * CSS-classes for wrapper used inside `columns-dropdown` component
   *
   * @property columnsDropdownWrapper
   * @type string
   * @default ''
   */
  columnsDropdownWrapper = '';

  /**
   * @property columnsDropdownButtonWrapper
   * @type string
   * @default ''
   */
  columnsDropdownButtonWrapper = '';

  /**
   * CSS-classes for wrapper over list inside `columns-dropdown` component
   *
   * @property columnsDropdown
   * @type string
   * @default ''
   */
  columnsDropdown = '';

  /**
   * CSS-classes for divider for list inside `columns-dropdown` components. Divider is placed before single-column items by default
   *
   * @property columnsDropdownDivider
   * @type string
   * @default ''
   */
  columnsDropdownDivider = '';

  /**
   * CSS-classes for wrapper inside `data-group-by-select` component
   *
   * @property dataGroupBySelectWrapper
   * @type string
   * @default ''
   */
  dataGroupBySelectWrapper = 'data-group-by-wrapper';

  /**
   * CSS-classes for thead cells
   *
   * @property theadCell
   * @type string
   * @default 'table-header'
   */
  theadCell = 'table-header';

  /**
   * CSS-classes used for thead-cells with columns titles. This class is used only if columns is not sortable
   *
   * @property theadCellNoSorting
   * @type string
   * @default 'table-header-no-sorting'
   */
  theadCellNoSorting = 'table-header-no-sorting';

  /**
   * CSS-classes used for thead-cells with columns filters. This class is used only if columns is not filterable
   *
   * @property theadCellNoFiltering
   * @type string
   * @default 'table-header-no-filtering'
   */
  theadCellNoFiltering = 'table-header-no-filtering';

  /**
   * CSS-classes for selected rows. Used in the `row` component
   *
   * @property selectedRow
   * @type string
   * @default 'selected-row'
   */
  selectedRow = 'selected-row';

  /**
   * CSS-classes for expanded rows. Used in the `row` component
   *
   * @property expandedRow
   * @type string
   * @default 'expanded-row'
   */
  expandedRow = 'expanded-row';

  /**
   * CSS-classes for table footer
   *
   * @property tfooterWrapper
   * @type string
   * @default 'table-footer'
   */
  tfooterWrapper = 'table-footer';

  /**
   * CSS-classes for wrapper inside `footer` component
   *
   * @property tfooterInternalWrapper
   * @type string
   * @default ''
   */
  tfooterInternalWrapper = '';

  /**
   * CSS-classes for table summary block. Used in the `summary` component
   *
   * @property footerSummary
   * @type string
   * @default 'table-summary'
   */
  footerSummary = 'table-summary';

  /**
   * CSS-classes for table summary block. It's used when table has numeric pagination
   *
   * @property footerSummaryNumericPagination
   * @type string
   * @default ''
   */
  footerSummaryNumericPagination = '';

  /**
   * CSS-classes for table summary block. It's used when table has simple pagination
   *
   * @property footerSummaryDefaultPagination
   * @type string
   * @default ''
   */
  footerSummaryDefaultPagination = '';

  /**
   * CSS-classes for wrapper over "Page size"-block in the `footer` component
   *
   * @property pageSizeWrapper
   * @type string
   * @default ''
   */
  pageSizeWrapper = '';

  /**
   * @property pageSizeSelectWrapper
   * @type string
   * @default ''
   */
  pageSizeSelectWrapper = '';


  /**
   * Wrapper for select-tag in the current-page-number-select component
   *
   * @property currentPageSizeSelectWrapper
   * @type string
   * @default ''
   */
  currentPageSizeSelectWrapper = '';

  /**
   * CSS-classes for `pagination-simple` and `pagination-numeric` components
   *
   * @property paginationWrapper
   * @type string
   * @default 'table-nav'
   */
  paginationWrapper = 'table-nav';

  /**
   * CSS-classes for buttons-wrapper in the `pagination-simple` and `pagination-numeric` components
   *
   * @property paginationInternalWrapper
   * @type string
   * @default ''
   */
  paginationInternalWrapper = '';

  /**
   * CSS-classes for `pagination-numeric` component
   *
   * @property paginationWrapperNumeric
   * @type string
   * @default ''
   */
  paginationWrapperNumeric = '';

  /**
   * CSS-classes for `pagination-simple` component
   *
   * @property paginationWrapperDefault
   * @type string
   * @default ''
   */
  paginationWrapperDefault = '';

  /**
   * @property paginationBlock
   * @type string
   * @default ''
   */
  paginationBlock = '';

  /**
   * CSS-classes for items in the `pagination-numeric` component
   *
   * @property paginationNumericItem
   * @type string
   * @default ''
   */
  paginationNumericItem = '';

  /**
   * CSS-classes for active item in the `pagination-numeric` component
   *
   * @property paginationNumericItemActive
   * @type string
   * @default ''
   */
  paginationNumericItemActive = '';

  /**
   * CSS-classes for "default" buttons
   *
   * @property buttonDefault
   * @type string
   * @default ''
   */
  buttonDefault = '';

  /**
   * CSS-classes for "link"-buttons
   *
   * @property buttonLink
   * @type string
   * @default ''
   */
  buttonLink = '';

  /**
   * CSS-classes for `td` shown when all columns are hidden
   *
   * @property noDataCell
   * @type string
   * @default ''
   */
  noDataCell = '';

  /**
   * @property collapseRow
   * @type string
   * @default 'collapseRow'
   */
  collapseRow = 'collapse-row';

  /**
   * @property collapseAllRows
   * @type string
   * @default 'collapse-all-rows'
   */
  collapseAllRows = 'collapse-all-rows';

  /**
   * @property expandRow
   * @type string
   * @default 'expand-row'
   */
  expandRow = 'expand-row';

  /**
   * @property expandAllRows
   * @type string
   * @default 'expand-all-rows'
   */
  expandAllRows = 'expand-all-rows';

  /**
   * @property cellContentDisplay
   * @type string
   * @default ''
   */
  cellContentDisplay = '';

  /**
   * @property cellContentEdit
   * @type string
   * @default ''
   */
  cellContentEdit = '';

  /**
   * CSS-classes for `thead`
   *
   * @property thead
   * @type string
   * @default ''
   */
  thead = '';

  /**
   * CSS-classes for `form`
   *
   * @property form
   * @type string
   * @default ''
   */
  form = '';

  /**
   * CSS-classes for wrapper over the form elements
   *
   * @property formElementWrapper
   * @type string
   * @default ''
   */
  formElementWrapper = '';

  /**
   * CSS-classes for input elements
   *
   * @property input
   * @type string
   * @default ''
   */
  input = '';

  /**
   * CSS-classes for `select`
   *
   * @property select
   * @type string
   * @default ''
   */
  select = '';

  /**
   * CSS-classes for "Clear filter" button. Used for global filter and filters for each column
   *
   * @property clearFilterIcon
   * @type string
   * @default ''
   */
  clearFilterIcon = '';

  /**
   * CSS-classes for "Clear all filters" button inside the `summary` component
   *
   * @property clearAllFiltersIcon
   * @type string
   * @default ''
   */
  clearAllFiltersIcon = '';

  /**
   * @property globalFilterDropdownWrapper
   * @type string
   * @default ''
   */
  globalFilterDropdownWrapper = '';

  /**
   * CSS-classes for `select` inside the `data-group-by-select` component
   *
   * @property changeGroupByField
   * @type string
   * @default 'change-group-by-field'
   */
  changeGroupByField = 'change-group-by-field';

  /**
   * CSS-classes for "sort asc/desc" button inside the `data-group-by-select` component
   *
   * @property sortGroupedPropertyBtn
   * @type string
   * @default ''
   */
  sortGroupedPropertyBtn = 'sort-grouped-field';

  /**
   * CSS-class for `row-grouping` component
   *
   * @property groupingRow
   * @type string
   * @default 'grouping-row'
   */
  groupingRow = 'grouping-row';

  /**
   * CSS-classes for `td` inside `row-grouping` component
   *
   * @property groupingCell
   * @type string
   * @default 'grouping-cell'
   */
  groupingCell = 'grouping-cell';

  /**
   * CSS-classes for icons used to show that some "list" is sorted "ASC". It's used for `data-group-by-select` and `row-sorting-cell`
   *
   * @property sortAscIcon
   * @type string
   * @default ''
   */
  sortAscIcon = '';

  /**
   * CSS-classes for icons used to show that some "list" is sorted "DESC". It's used for `data-group-by-select` and `row-sorting-cell`
   *
   * @property sortDescIcon
   * @type string
   * @default ''
   */
  sortDescIcon = '';

  /**
   * CSS-classes for icons in the `columns-dropdown` related to the visible columns
   *
   * @property columnVisibleIcon
   * @type string
   * @default ''
   */
  columnVisibleIcon = '';

  /**
   * CSS-classes for icons in the `columns-dropdown` related to the hidden columns
   *
   * @property columnHiddenIcon
   * @type string
   * @default ''
   */
  columnHiddenIcon = '';

  /**
   * CSS-classes for icon used in the "First"-button (`pagination-simple`)
   *
   * @property navFirstIcon
   * @type string
   * @default ''
   */
  navFirstIcon = '';

  /**
   * CSS-classes for icon used in the "Prev"-button (`pagination-simple`)
   *
   * @property navPrevIcon
   * @type string
   * @default ''
   */
  navPrevIcon = '';

  /**
   * CSS-classes for icon used in the "Next"-button (`pagination-simple`)
   *
   * @property navNextIcon
   * @type string
   * @default ''
   */
  navNextIcon = '';

  /**
   * CSS-classes for icon used in the "Last"-button (`pagination-simple`)
   *
   * @property navLastIcon
   * @type string
   * @default ''
   */
  navLastIcon = '';

  /**
   * CSS-classes for "caret"-icon used in the `columns-dropdown`
   *
   * @property caretIcon
   * @type string
   * @default ''
   */
  caretIcon = '';

  /**
   * @property selectAllRowsIcon
   * @type string
   * @default ''
   */
  selectAllRowsIcon = '';

  /**
   * @property deselectAllRowsIcon
   * @type string
   * @default ''
   */
  deselectAllRowsIcon = '';

  /**
   * @property selectRowIcon
   * @type string
   * @default ''
   */
  selectRowIcon = '';

  /**
   * @property deselectRowIcon
   * @type string
   * @default ''
   */
  deselectRowIcon = '';

  /**
   * @property editRowButton
   * @type string
   * @default ''
   */
  editRowButton = '';

  /**
   * @property saveRowButton
   * @type string
   * @default ''
   */
  saveRowButton = '';

  /**
   * @property cancelRowButton
   * @type string
   * @default ''
   */
  cancelRowButton = '';

  /**
   * @property filteringCellInternalWrapper
   * @type string
   * @default ''
   */
  filteringCellInternalWrapper = '';

  /**
   * @property expandRowIcon
   * @type string
   * @default ''
   */
  expandRowIcon = '';

  /**
   * @property collapseRowIcon
   * @type string
   * @default ''
   */
  collapseRowIcon = '';

  /**
   * @property collapseAllRowsIcon
   * @type string
   * @default ''
   */
  collapseAllRowsIcon = '';

  /**
   * @property expandAllRowsIcon
   * @type string
   * @default ''
   */
  expandAllRowsIcon = '';
}