From 39fcc5ceb94f946b9f6b205d80022eb85fa3395e Mon Sep 17 00:00:00 2001 From: Xavier Carron <33637571+xav-car@users.noreply.github.com> Date: Thu, 27 Feb 2025 09:12:11 +0100 Subject: [PATCH 1/4] feat(pix-table): allow extend class on pix table using attributes --- addon/components/pix-table.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addon/components/pix-table.hbs b/addon/components/pix-table.hbs index 118551896..9b6f66756 100644 --- a/addon/components/pix-table.hbs +++ b/addon/components/pix-table.hbs @@ -1,4 +1,4 @@ -
+
From 8fc3929de249c70654e8cb9beef38b1040be9770 Mon Sep 17 00:00:00 2001 From: Xavier Carron <33637571+xav-car@users.noreply.github.com> Date: Wed, 26 Feb 2025 16:02:52 +0100 Subject: [PATCH 2/4] feat(pix-table): allow pass onClickon row --- addon/components/pix-table.hbs | 5 +- addon/components/pix-table.js | 13 +++++ addon/styles/_pix-table.scss | 24 ++++++++- app/stories/pix-table.stories.js | 6 +++ tests/dummy/app/controllers/table-page.js | 3 ++ tests/dummy/app/templates/table-page.hbs | 7 ++- .../integration/components/pix-table-test.js | 49 +++++++++++++++++++ 7 files changed, 103 insertions(+), 4 deletions(-) diff --git a/addon/components/pix-table.hbs b/addon/components/pix-table.hbs index 9b6f66756..720ca7a86 100644 --- a/addon/components/pix-table.hbs +++ b/addon/components/pix-table.hbs @@ -8,7 +8,10 @@ {{#each @data as |row|}} - + {{yield row "cell" to="columns"}} {{/each}} diff --git a/addon/components/pix-table.js b/addon/components/pix-table.js index 9cbabfae2..ef43470ea 100644 --- a/addon/components/pix-table.js +++ b/addon/components/pix-table.js @@ -1,4 +1,5 @@ import { warn } from '@ember/debug'; +import { action } from '@ember/object'; import Component from '@glimmer/component'; export default class PixTable extends Component { @@ -39,4 +40,16 @@ export default class PixTable extends Component { get headerClass() { return `pix-table-header--${this.variant}`; } + + get hasOnRowClick() { + return typeof this.args.onRowClick === 'function'; + } + + @action + onClick(row, event) { + event.stopPropagation(); + if (this.hasOnRowClick) { + this.args.onRowClick(row); + } + } } diff --git a/addon/styles/_pix-table.scss b/addon/styles/_pix-table.scss index e30558bbd..f3ed4b1ab 100644 --- a/addon/styles/_pix-table.scss +++ b/addon/styles/_pix-table.scss @@ -11,17 +11,37 @@ @extend %pix-body-s; - .pix-table__condensed { + &__condensed { th, td { padding: var(--pix-spacing-2x) var(--pix-spacing-4x); } } + &__clickable-row { + cursor: pointer; + + &:hover, &:focus, &:active { + transition: 0.25s ease; + } + + &:hover { + background-color: rgba(var(--pix-neutral-100-inline), 0.50); + } + + &:focus { + background-color: rgba(var(--pix-neutral-100-inline), 0.40); + } + + &:active { + background-color: rgba(var(--pix-neutral-100-inline), 0.75); + } + } + table { min-width: 100%; border-collapse: collapse; - tbody > tr:nth-of-type(even) { + tbody > tr:nth-of-type(even):not(.pix-table__clickable-row:hover):not(.pix-table__clickable-row:focus):not(.pix-table__clickable-row:active) { background-color: var(--pix-neutral-20); } diff --git a/app/stories/pix-table.stories.js b/app/stories/pix-table.stories.js index f446160b3..ed1474c98 100644 --- a/app/stories/pix-table.stories.js +++ b/app/stories/pix-table.stories.js @@ -20,6 +20,12 @@ export default { 'Définition du rendu des différentes colonnes de la table en utilisant ``. Expose les paramètres `row` et `context` (correspondant aux données de la ligne actuelle)', type: { name: 'block content', required: true }, }, + onRowClick: { + name: 'onRowClick', + description: + "Permet d'ajouter un onClick sur le de chaque ligne, la fonction en paramètre récupérera l'objet au complet.", + type: { name: 'function', required: false }, + }, variant: { name: 'variant', description: "Afficher le bon variant pour l'application", diff --git a/tests/dummy/app/controllers/table-page.js b/tests/dummy/app/controllers/table-page.js index d2a6d4337..a6e6f2f29 100644 --- a/tests/dummy/app/controllers/table-page.js +++ b/tests/dummy/app/controllers/table-page.js @@ -38,6 +38,9 @@ export default class TablePage extends Controller { } } + @action + onClick() {} + @action onNumSort() { this.resetOrders('num'); diff --git a/tests/dummy/app/templates/table-page.hbs b/tests/dummy/app/templates/table-page.hbs index 5bb682d99..abacc03fd 100644 --- a/tests/dummy/app/templates/table-page.hbs +++ b/tests/dummy/app/templates/table-page.hbs @@ -1,4 +1,9 @@ - + <:columns as |row context|> + <:columns as |row context|> + + <:header> + Nom + + <:cell> + {{row.name}} + + + + <:header> + Description + + <:cell> + {{row.description}} + + + + <:header> + Age + + <:cell> + il a + {{row.age}} + ans + + + +`, + ); + + //when + await click(screen.getByText('jean')); + + // then + assert.ok(this.onClick.calledWithExactly(this.data[0])); + }); + }); + module('#sort', function () { test('it should call @onSort on click', async function (assert) { // given From 76f69ade0d9d67894f4d65fab14d3c7753304384 Mon Sep 17 00:00:00 2001 From: Xavier Carron <33637571+xav-car@users.noreply.github.com> Date: Thu, 27 Feb 2025 11:45:54 +0100 Subject: [PATCH 3/4] fix(pix-table): fix zebra color --- addon/styles/_pix-table.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/addon/styles/_pix-table.scss b/addon/styles/_pix-table.scss index f3ed4b1ab..f944a0063 100644 --- a/addon/styles/_pix-table.scss +++ b/addon/styles/_pix-table.scss @@ -41,8 +41,8 @@ min-width: 100%; border-collapse: collapse; - tbody > tr:nth-of-type(even):not(.pix-table__clickable-row:hover):not(.pix-table__clickable-row:focus):not(.pix-table__clickable-row:active) { - background-color: var(--pix-neutral-20); + tbody > tr:nth-of-type(even):not(.pix-table__clickable-row:hover, .pix-table__clickable-row:focus, .pix-table__clickable-row:active) { + background-color: rgba(var(--pix-neutral-20-inline), 0.80); } thead.pix-table-header { From 4d17831d1bb52a0e84094b798a6c4d7e02c190cd Mon Sep 17 00:00:00 2001 From: Xavier Carron <33637571+xav-car@users.noreply.github.com> Date: Thu, 27 Feb 2025 16:13:23 +0100 Subject: [PATCH 4/4] feat(pix-table): expose index on row --- addon/components/pix-table.hbs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/addon/components/pix-table.hbs b/addon/components/pix-table.hbs index 720ca7a86..9dcf7b062 100644 --- a/addon/components/pix-table.hbs +++ b/addon/components/pix-table.hbs @@ -7,12 +7,12 @@ - {{#each @data as |row|}} + {{#each @data as |row index|}} - {{yield row "cell" to="columns"}} + {{yield row "cell" index to="columns"}} {{/each}}
{{this.caption}}