diff --git a/.eslintrc.js b/.eslintrc.js index ac3cc19a..b26f9479 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -19,13 +19,11 @@ module.exports = { 'no-multiple-empty-lines': [2, { max: 1 }], 'ember/no-jquery': 'off', - 'ember/no-observers': 'off', 'ember/no-get': 'off', 'ember/avoid-leaking-state-in-ember-objects': 'off', 'ember/no-classic-classes': 'off', 'ember/no-classic-components': 'off', 'ember/require-tagless-components': 'off', - 'ember/no-actions-hash': 'off', 'ember/no-component-lifecycle-hooks': 'off' }, overrides: [ diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index c08e0d73..258218da 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -24,7 +24,7 @@ jobs: with: ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }} - uses: actions/checkout@v3 - - uses: pnpm/action-setup@v2 + - uses: pnpm/action-setup@v4 with: version: 8 - uses: actions/setup-node@v3 @@ -46,7 +46,7 @@ jobs: timeout-minutes: 10 steps: - uses: actions/checkout@v3 - - uses: pnpm/action-setup@v2 + - uses: pnpm/action-setup@v4 with: version: 8 - uses: actions/setup-node@v3 @@ -78,7 +78,7 @@ jobs: timeout-minutes: 10 steps: - uses: actions/checkout@v3 - - uses: pnpm/action-setup@v2 + - uses: pnpm/action-setup@v4 with: version: 8 - uses: actions/setup-node@v3 diff --git a/addon/components/upf-table/column.js b/addon/components/upf-table/column.js deleted file mode 100644 index 67e1f03e..00000000 --- a/addon/components/upf-table/column.js +++ /dev/null @@ -1,12 +0,0 @@ -import Component from '@ember/component'; -import { not } from '@ember/object/computed'; - -export default Component.extend({ - tagName: 'td', - classNames: ['upf-datatable__column'], - classNameBindings: ['uneditable:upf-datatable__column--uneditable'], - attributeBindings: ['valign'], - - valign: 'middle', - uneditable: not('editable') -}); diff --git a/addon/components/upf-table/header-cell.js b/addon/components/upf-table/header-cell.js deleted file mode 100644 index d8ac4662..00000000 --- a/addon/components/upf-table/header-cell.js +++ /dev/null @@ -1,24 +0,0 @@ -import { alias } from '@ember/object/computed'; -import Component from '@ember/component'; -import { computed } from '@ember/object'; - -export default Component.extend({ - tagName: 'th', - classNames: ['upf-datatable__column'], - classNameBindings: ['column.titleIcon:text-size-6', 'sort'], - attributeBindings: ['width'], - width: alias('column.width'), - - sort: computed('column.{sorted,direction}', function () { - if (!this.get('column.sorted')) { - return 'upf-datatable__column--unsorted'; - } - - // class inversed ? - if (this.get('column.direction') === 'asc') { - return 'upf-datatable__column--descending'; - } - - return 'upf-datatable__column--ascending'; - }) -}); diff --git a/addon/components/upf-table/index.js b/addon/components/upf-table/index.js deleted file mode 100644 index 8e144a03..00000000 --- a/addon/components/upf-table/index.js +++ /dev/null @@ -1,114 +0,0 @@ -import Component from '@ember/component'; -import EmberObject, { observer, computed } from '@ember/object'; -import { filterBy } from '@ember/object/computed'; -import { run } from '@ember/runloop'; - -export default Component.extend({ - classNames: ['upf-table__container'], - classNameBindings: ['isCompact:upf-table__container--compact'], - - hasSelection: false, - hasPagination: false, - hasSearch: false, - hasPolymorphicColumns: false, - hasToggleableColumns: true, - isCompact: false, - - allRowsSelected: false, - displayedColumnsPanel: false, - isLoading: false, - contentChanging: false, - _contentPlaceholder: new Array(3), - - _searchQuery: null, - searchInputPlaceholder: 'Search...', - - currentPage: 1, - totalPages: 1, - perPage: 1, - itemTotal: 0, - itemCount: 0, - itemName: '', - - init() { - this._super(); - - this.set('_searchQuery', this.get('searchQuery')); - }, - - _columns: computed('columns', function () { - return this.get('columns').map((column) => { - column.visible = column.visible !== false; - column.sorted = column.sorted === true; - column.editable = column.editable !== false; - column.unhideable = column.unhideable === true; - - return EmberObject.create(column); - }); - }), - - _initiallyDisplayedColumns: filterBy('_columns', 'visible'), - _fullSizeColumnColspan: computed('_initiallyDisplayedColumns', 'hasSelection', function () { - if (this.get('hasSelection')) { - return this.get('_initiallyDisplayedColumns').length + 1; - } - - return this.get('_initiallyDisplayedColumns').length; - }), - - _selectAllObserver: observer('allRowsSelected', function () { - this.get('collection').map((item) => { - if (this.get('allRowsSelected')) { - item.set('selected', true); - } else { - item.set('selected', false); - } - }); - }), - - _bubbleSearch: function () { - if (this.performSearch) { - this.performSearch(this.get('_searchQuery')); - } - }, - - _searchQueryObserver: observer('_searchQuery', function () { - run.debounce(this, this._bubbleSearch, 500); - }), - - actions: { - callOnRowClickCallback(action, record) { - this.onRowClick(record); - }, - - didPageChange(page) { - this.didPageChange(page); - }, - - onClickHeader(column) { - if (!column.get('sortKey')) { - return; - } - - if (!column.get('sorted')) { - this.get('_columns').forEach((c) => c.set('sorted', false)); - // default direction - column.set('sorted', true); - column.set('direction', 'desc'); - } else { - let direction = column.get('direction') === 'desc' ? 'asc' : 'desc'; - column.set('direction', direction); - } - - this.didSortColumn(column); - }, - - triggerObjectCreation() { - this.triggerAction({ action: 'handleObjectCreation' }); - }, - - setContentChanging(contentChanging) { - this.set('contentChanging', contentChanging); - } - } -}); diff --git a/addon/components/upf-table/pagination.hbs b/addon/components/upf-table/pagination.hbs deleted file mode 100644 index f9835c02..00000000 --- a/addon/components/upf-table/pagination.hbs +++ /dev/null @@ -1,6 +0,0 @@ - - {{t "oss-components.upf-table.pagination" from=this.from to=this.to total=this.itemTotal item_name=this.itemName}} - - - - diff --git a/addon/components/upf-table/pagination.js b/addon/components/upf-table/pagination.js deleted file mode 100644 index a25afacf..00000000 --- a/addon/components/upf-table/pagination.js +++ /dev/null @@ -1,61 +0,0 @@ -import Component from '@ember/component'; -import { computed } from '@ember/object'; - -export default Component.extend({ - tagName: 'span', - classNames: ['margin-left-xx-sm'], - currentPage: 1, - totalPages: 1, - perPage: 1, - itemTotal: 0, - itemCount: 0, - itemName: '', - didPageChange: '', - - previousPage: computed('currentPage', function () { - return this.get('currentPage') - 1; - }), - - nextPage: computed('currentPage', function () { - return this.get('currentPage') + 1; - }), - - hasNext: computed('nextPage', 'totalPages', function () { - return this.get('nextPage') <= this.get('totalPages'); - }), - - hasPrevious: computed.gte('previousPage', 1), - - from: computed('currentPage', 'perPage', function () { - return (this.get('currentPage') - 1) * this.get('perPage') + 1; - }), - - to: computed('from', 'itemCount', function () { - return this.get('from') + this.get('itemCount') - 1; - }), - - _triggerChange(page) { - this.triggerAction({ - action: 'didPageChange', - actionContext: [page] - }); - }, - - actions: { - previousPage() { - if (!this.get('hasPrevious')) { - return; - } - - this._triggerChange(this.get('previousPage')); - }, - - nextPage() { - if (!this.get('hasNext')) { - return; - } - - this._triggerChange(this.get('nextPage')); - } - } -}); diff --git a/addon/components/upf-table/row.hbs b/addon/components/upf-table/row.hbs deleted file mode 100644 index d43dd3c9..00000000 --- a/addon/components/upf-table/row.hbs +++ /dev/null @@ -1,6 +0,0 @@ - - {{yield}} - diff --git a/addon/components/upf-table/row.js b/addon/components/upf-table/row.js deleted file mode 100644 index 7132b2be..00000000 --- a/addon/components/upf-table/row.js +++ /dev/null @@ -1,26 +0,0 @@ -import Component from '@ember/component'; -import { computed } from '@ember/object'; -import { bool } from '@ember/object/computed'; - -export default Component.extend({ - tagName: '', - - isSelected: bool('ref.selected'), - - computedClasses: computed('isHeaderRow', 'isSelected', 'isHovering', function () { - const classes = ['upf-datatable__row']; - - if (this.isHeaderRow) classes.push('upf-datatable__row--header'); - if (this.isSelected) classes.push('upf-datatable__row--selected'); - if (this.isHovering) classes.push('upf-datatable__row--polymorphic'); - - return classes.join(' '); - }), - - actions: { - onRowClick(event) { - event.stopPropagation(); - this.onRowClick?.(this.ref); - } - } -}); diff --git a/app/components/upf-table.js b/app/components/upf-table.js deleted file mode 100644 index c5ac574e..00000000 --- a/app/components/upf-table.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from '@upfluence/oss-components/components/upf-table'; diff --git a/app/components/upf-table/column.js b/app/components/upf-table/column.js deleted file mode 100644 index a1b21dde..00000000 --- a/app/components/upf-table/column.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from '@upfluence/oss-components/components/upf-table/column'; diff --git a/app/components/upf-table/header-cell.js b/app/components/upf-table/header-cell.js deleted file mode 100644 index 5679d425..00000000 --- a/app/components/upf-table/header-cell.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from '@upfluence/oss-components/components/upf-table/header-cell'; diff --git a/app/components/upf-table/pagination.js b/app/components/upf-table/pagination.js deleted file mode 100644 index f73a66df..00000000 --- a/app/components/upf-table/pagination.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from '@upfluence/oss-components/components/upf-table/pagination'; diff --git a/app/components/upf-table/row.js b/app/components/upf-table/row.js deleted file mode 100644 index 733dcd09..00000000 --- a/app/components/upf-table/row.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from '@upfluence/oss-components/components/upf-table/row'; diff --git a/app/styles/base/_all.less b/app/styles/base/_all.less index 659ff167..2c6c8ab4 100644 --- a/app/styles/base/_all.less +++ b/app/styles/base/_all.less @@ -1,7 +1,6 @@ @import '_buttons'; @import '_cards'; @import '_checkboxes'; -@import '_datatables'; @import '_icons'; @import '_images'; @import '_inputs'; @@ -12,7 +11,6 @@ @import '_progress'; @import '_slider'; @import '_stats'; -@import '_tables'; // TO_BE_DEPRECATED @import '_tags'; @import '_transitions'; @import '_toggle-switch'; diff --git a/app/styles/base/_datatables.less b/app/styles/base/_datatables.less deleted file mode 100644 index 356a7fd1..00000000 --- a/app/styles/base/_datatables.less +++ /dev/null @@ -1,207 +0,0 @@ -@keyframes skeleton-content { - 0% { - background-position: -200px 0; - } - - 100% { - background-position: calc(200px + 100%) 0; - } -} - -.upf-datatable__table { - position: relative; - left: 0; - right: 0; - - table-layout: fixed; - width: 100%; -} - -.upf-datatable__actions-header { - background-color: @upf-gray-light; - display: flex; - list-style-type: none; - color: @upf-gray-dark; - padding: @spacing-x-sm @spacing-sm; - margin-bottom: 0px; - - .upf-datatable__actions-pull-right { - display: flex; - margin-left: auto !important; - } -} - -.upf-datatable__contextual-actions { - display: inline-flex; - flex-grow: 1; - - .upf-datatable__selected-count { - background-color: var(--color-gray-300); - border-radius: var(--border-radius-sm); - color: var(--color-white); - font-size: 18/@rem; - display: flex; - align-items: center; - - height: 36px; - padding: var(--spacing-px-6) var(--spacing-px-12); - text-align: center; - } - - .right-actions { - margin-left: auto; - } -} - -.upf-datatable__row { - border-bottom: 1px solid lighten(@upf-gray, 15%); - - th:first-of-type, td:first-of-type { - padding-left: @spacing-xx-sm; - } - - th, td { - color: @color-text; - padding: @spacing-xxx-sm; - overflow: hidden; - } -} - -.upf-datatable__row:not(.upf-datatable__row--header) { - &:hover { - background-color: @upf-gray-light; - } - - .upf-datatable__column { - height: @spacing-xx-lg; - - &:hover:not(.upf-datatable__column--unsortable):not(.upf-datatable__column--uneditable) { - cursor: pointer; - color: var(--color-primary-500); - transition: color 0.4s; - } - } - - .upf-datatable__column--hideable { - display: none; - opacity: 0; - } - - .upf-datatable__column--locked .skeleton-placeholder { - height: 10px; - animation: skeleton-content 1.2s ease-in-out infinite; - background-color: #eee; - background-image: linear-gradient(90deg, #eee, #f5f5f5, #eee); - background-size: 200px 100%; - background-repeat: no-repeat; - border-radius: var(--border-radius-sm); - display: inline-block; - line-height: 1; - width: 100%; - } - - td:not(:last-child) { - border-right: 1px solid lighten(@upf-gray, 15%); - } -} - -.upf-datatable__row--selected, .upf-datatable__row--selected:hover { - background-color: @upf-gray-light !important; -} - -.upf-datatable__row.upf-datatable__row--polymorphic { - .upf-datatable__column--default { - display: none; - opacity: 0; - transition: opacity 0.25s ease; - } - - .upf-datatable__column--hideable { - display: block; - opacity: 1; - transition: opacity 0.25s ease; - } -} - - -.upf-datatable__row--header { - overflow: hidden; - text-transform: capitalize; - background-color: @upf-gray-light; - - .subtitle { - font-weight: 400; - } - - .upf-datatable__column:hover:not(.upf-datatable__column--unsortable) { - border-bottom: 1px solid var(--color-primary-500); - color: var(--color-primary-500); - cursor: pointer; - } - - .upf-datatable__column.upf-datatable__column--descending:after { - content: " ↑"; - } - - .upf-datatable__column.upf-datatable__column--ascending:after { - content: " ↓"; - } -} - -.upf-datatable__side-panel { - position: absolute; - background-color: @upf-gray-light; - box-shadow: 0px 0px 75px 0px rgba(0,0,0,0.25); - display: block; - z-index: 1; - height: 500px; - overflow-y: auto; - padding: @spacing-md; - width: 21%; - max-width: 395px; - opacity: 0; - - transform: translate(-30px, 18px); - - &.side-panel--appearance { - animation-name: appearance; - animation-duration: 0.3s; - animation-fill-mode: forwards; - } - - .upf-checkbox__label span { - color: @color-text; - } -} - -.upf-datatable__side-panel--arrow-up { - position: absolute; - z-index: 2; - border-left: 8px solid transparent; - border-right: 8px solid transparent; - border-bottom: 12px solid @upf-gray-light; - - transform: translate(35px, 6px); -} - -@keyframes appearance { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -.upf-table__container--compact { - .upf-datatable__row { - border-bottom: none; - } - - .upf-datatable__row:not(.upf-datatable__row--header) .upf-datatable__column { - border-right: none; - padding-right: @spacing-sm; - height: 3.5em; - } -} diff --git a/app/styles/base/_tables.less b/app/styles/base/_tables.less deleted file mode 100644 index 53f75762..00000000 --- a/app/styles/base/_tables.less +++ /dev/null @@ -1,71 +0,0 @@ -@import '../mixins/_grid'; - -// -// Tables throughout the apps. -// -.upf-table { - /*.table-striped; // FROM_BOOTSTRAP*/ - - border-collapse: inherit; - border: 1px solid @upf-gray-dark; - border-radius: var(--border-radius-sm); - - td, th { - text-align: left; - } - - thead { - border-radius: var(--border-radius-sm); - background-color: @upf-gray-light; - - tr th { - border: none; - border-bottom: 1px solid @upf-gray-dark; - vertical-align: middle; - } - } - - tbody { - // Zebra-style the table rows with alternate grey background. - & > tr:nth-of-type(odd) { - background-color: lighten(@upf-gray-light, 30); - } - - td { - border: none; - padding-top: 1em; - padding-bottom: 1em; - vertical-align: middle !important; - } - - tr:first-child td { - border-top: none; - } - } -} - -// -// A primary information in a grouped column of a table. -// -.upf-table__group-column { - color: @color-text; -} - - // - // Any secondary information in a grouped column of a table. - // - .upf-table__group-column--secondary { - color: @color-text-light; - font-size: 0.9em; - } - -// -// Placing of the checkbox for selecting a table's row. -// -.upf-table__row-selector { - width: 4em; - - .row-selector__input-wrapper { - .horizontally-center-block; - } -} diff --git a/app/templates/components/upf-table.hbs b/app/templates/components/upf-table.hbs deleted file mode 100644 index 6b5103ea..00000000 --- a/app/templates/components/upf-table.hbs +++ /dev/null @@ -1,111 +0,0 @@ - - - - - - {{#if this.hasSelection}} - {{#unless this.contentChanging}} - - {{/unless}} - {{/if}} - - {{#each this._columns as |column|}} - {{#unless (eq column.visible false)}} - {{upf-table/header_cell column=column click=(action "onClickHeader" column)}} - {{/unless}} - {{/each}} - - - - - {{#if this.isLoading}} - - - - {{else}} - {{#if this.contentChanging}} - {{#each this._contentPlaceholder}} - - - - - {{/each}} - {{else}} - {{#each collection as |item index|}} - - {{#if this.hasSelection}} - - {{/if}} - - {{#each this._columns as |column|}} - {{#unless (eq column.visible false)}} - - {{#if column.component}} - {{component column.component item=item column=column}} - {{else}} - {{#if (eq column.helper "money")}} - {{format-money (get item column.property) (get item column.currency)}} - {{else if (eq column.helper "numeric")}} - {{format-numeric (get item column.property)}} - {{else}} - {{#if (and (not (get item column.property)) column.emptyValue)}} - - {{column.emptyValue}} - - {{else}} - {{get item column.property}} - {{/if}} - {{/if}} - {{/if}} - - {{/unless}} - {{/each}} - - {{else}} - - - - {{/each}} - - {{#if (and this.hasPagination this.isCompact)}} - - - - {{/if}} - {{/if}} - {{/if}} - -
- -
- {{loading-state}} -
-
-
-
-
- -
- {{yield}} -
- {{upf-table/pagination currentPage=this.currentPage perPage=this.perPage - totalPages=this.totalPages itemTotal=this.itemTotal - itemCount=this.itemCount itemName=this.itemName}} -
diff --git a/app/templates/components/upf-table/header-cell.hbs b/app/templates/components/upf-table/header-cell.hbs deleted file mode 100644 index 0aac21e0..00000000 --- a/app/templates/components/upf-table/header-cell.hbs +++ /dev/null @@ -1,13 +0,0 @@ -{{#if column.titleIcon}} - -{{else}} - {{column.title}} -{{/if}} - -{{#if column.tooltip}} - -{{/if}} - -{{#if column.subtitle}} -
{{column.subtitle}}
-{{/if}} diff --git a/translations/en-us.yaml b/translations/en-us.yaml index 53631cd5..8d70bc48 100644 --- a/translations/en-us.yaml +++ b/translations/en-us.yaml @@ -1,6 +1,4 @@ oss-components: - upf-table: - pagination: '{from} to {to} out of {total} {item_name}' badge: image_alt: Badge Icon infinite-select: