From f74e0097364b2c9342b80581c649fc25e7f734ee Mon Sep 17 00:00:00 2001 From: tshimber Date: Wed, 31 Jul 2024 11:40:44 +0200 Subject: [PATCH 1/3] feat: table options localization --- .../src/components/data-grid/data-grid.tsx | 9 ++++- .../src/components/data-grid/readme.md | 40 +++++++++---------- packages/components/src/html/data-grid.html | 8 ++++ 3 files changed, 35 insertions(+), 22 deletions(-) diff --git a/packages/components/src/components/data-grid/data-grid.tsx b/packages/components/src/components/data-grid/data-grid.tsx index 24d643781a..c22a971f05 100644 --- a/packages/components/src/components/data-grid/data-grid.tsx +++ b/packages/components/src/components/data-grid/data-grid.tsx @@ -112,13 +112,14 @@ export class DataGrid { /** (optional) Title for sortable columns */ @Prop() sortableColumnTitle?: string = 'Activate to sort column'; /** - * (optional) set localization for sort, toggle and select/deselect table + * (optional) set localization for sort, toggle, select/deselect, table options * Default is English. */ @Prop() localization?: { sortBy: string; toggle: string; select: string; + tableOptions: string; }; /* 4. Events (alphabetical) */ /** Event triggered every time the editable cells are changed, updating the original rows data */ @@ -797,7 +798,11 @@ export class DataGrid { icon-only data-sortable={this.isSortable} > - + {this.isSortable && ( diff --git a/packages/components/src/components/data-grid/readme.md b/packages/components/src/components/data-grid/readme.md index c607a5f84e..e789dd4384 100644 --- a/packages/components/src/components/data-grid/readme.md +++ b/packages/components/src/components/data-grid/readme.md @@ -5,26 +5,26 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------------- | ----------------------- | -------------------------------------------------------------------------------------------- | ----------------------------------------------------- | --------------------------- | -| `fields` | `fields` | Input fields config array | `any` | `undefined` | -| `freezeHeader` | `freeze-header` | (optional) Freeze header row from scrolling | `boolean` | `false` | -| `heading` | `heading` | (optional) Heading string | `string` | `''` | -| `height` | `height` | (optional) Set static table height, by default will auto-resize | `string` | `undefined` | -| `hideBorder` | `hide-border` | (optional) Set to true to remove border | `boolean` | `false` | -| `hideHeader` | `hide-header` | (optional) Set to true to hide header row | `boolean` | `false` | -| `hideInfo` | `hide-info` | (optional) Set to true to remove info footer block including pagination and selection status | `boolean` | `false` | -| `hideMenu` | `hide-menu` | (optional) Set to true to hide settings menu | `boolean` | `false` | -| `localization` | -- | (optional) set localization for sort, toggle and select/deselect table Default is English. | `{ sortBy: string; toggle: string; select: string; }` | `undefined` | -| `numbered` | `numbered` | (optional) Set to true to add numbers column | `boolean` | `false` | -| `pageSize` | `page-size` | (optional) Set number of rows to display per pagination page | `number` | `Infinity` | -| `rows` | `rows` | Input data array | `any` | `undefined` | -| `selectable` | `selectable` | (optional) Set to true to add selection column | `boolean` | `false` | -| `selection` | -- | Read-only selection array - populated with raw data from selected rows | `string[]` | `[]` | -| `shadeAlternate` | `shade-alternate` | (optional) Shade every second row darker | `boolean` | `true` | -| `sortableColumnTitle` | `sortable-column-title` | (optional) Title for sortable columns | `string` | `'Activate to sort column'` | -| `styles` | `styles` | (optional) Injected css styles | `any` | `undefined` | -| `visible` | `visible` | (optional) Set to false to hide table, used for nested tables to re-render upon toggle | `boolean` | `true` | +| Property | Attribute | Description | Type | Default | +| --------------------- | ----------------------- | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- | --------------------------- | +| `fields` | `fields` | Input fields config array | `any` | `undefined` | +| `freezeHeader` | `freeze-header` | (optional) Freeze header row from scrolling | `boolean` | `false` | +| `heading` | `heading` | (optional) Heading string | `string` | `''` | +| `height` | `height` | (optional) Set static table height, by default will auto-resize | `string` | `undefined` | +| `hideBorder` | `hide-border` | (optional) Set to true to remove border | `boolean` | `false` | +| `hideHeader` | `hide-header` | (optional) Set to true to hide header row | `boolean` | `false` | +| `hideInfo` | `hide-info` | (optional) Set to true to remove info footer block including pagination and selection status | `boolean` | `false` | +| `hideMenu` | `hide-menu` | (optional) Set to true to hide settings menu | `boolean` | `false` | +| `localization` | -- | (optional) set localization for sort, toggle, select/deselect, table options Default is English. | `{ sortBy: string; toggle: string; select: string; tableOptions: string; }` | `undefined` | +| `numbered` | `numbered` | (optional) Set to true to add numbers column | `boolean` | `false` | +| `pageSize` | `page-size` | (optional) Set number of rows to display per pagination page | `number` | `Infinity` | +| `rows` | `rows` | Input data array | `any` | `undefined` | +| `selectable` | `selectable` | (optional) Set to true to add selection column | `boolean` | `false` | +| `selection` | -- | Read-only selection array - populated with raw data from selected rows | `string[]` | `[]` | +| `shadeAlternate` | `shade-alternate` | (optional) Shade every second row darker | `boolean` | `true` | +| `sortableColumnTitle` | `sortable-column-title` | (optional) Title for sortable columns | `string` | `'Activate to sort column'` | +| `styles` | `styles` | (optional) Injected css styles | `any` | `undefined` | +| `visible` | `visible` | (optional) Set to false to hide table, used for nested tables to re-render upon toggle | `boolean` | `true` | ## Events diff --git a/packages/components/src/html/data-grid.html b/packages/components/src/html/data-grid.html index ca25564166..4ea19cfe14 100644 --- a/packages/components/src/html/data-grid.html +++ b/packages/components/src/html/data-grid.html @@ -805,11 +805,19 @@ ], ]; + const localization = { + sortBy: 'SortLoc', + toggle: 'ToggleLoc', + select: 'SelectLoc', + tableOptions: 'OptionsLoc', + }; + // Pass in data const table = document.querySelector('#table1'); table.fields = fields; table.rows = rows; + table.localization = localization; // table.addEventListener('scaleEdit', ({ detail }) => { // const { rows, rowIndex, columnIndex, value } = detail; From 35693249b9d901e8c3040dcb625823a740d23cde Mon Sep 17 00:00:00 2001 From: tshimber Date: Thu, 29 Aug 2024 12:15:28 +0200 Subject: [PATCH 2/3] feat: localization for expand / collapse in data grid --- .../data-grid/cell-handlers/cell-interface.ts | 1 + .../data-grid/cell-handlers/html-cell.tsx | 16 ++++++-- .../src/components/data-grid/data-grid.tsx | 5 ++- .../src/components/data-grid/readme.md | 40 +++++++++---------- packages/components/src/html/data-grid.html | 2 + 5 files changed, 39 insertions(+), 25 deletions(-) diff --git a/packages/components/src/components/data-grid/cell-handlers/cell-interface.ts b/packages/components/src/components/data-grid/cell-handlers/cell-interface.ts index 59ed61527c..4ea393cb61 100644 --- a/packages/components/src/components/data-grid/cell-handlers/cell-interface.ts +++ b/packages/components/src/components/data-grid/cell-handlers/cell-interface.ts @@ -30,5 +30,6 @@ export interface Cell { rowIndex, columnIndex, isAutoWidthCheck, + localization, }): HTMLElement; } diff --git a/packages/components/src/components/data-grid/cell-handlers/html-cell.tsx b/packages/components/src/components/data-grid/cell-handlers/html-cell.tsx index 00a2acd381..f77e71ce8e 100644 --- a/packages/components/src/components/data-grid/cell-handlers/html-cell.tsx +++ b/packages/components/src/components/data-grid/cell-handlers/html-cell.tsx @@ -20,16 +20,24 @@ export const HTMLCell: Cell = { // Skip check as content width is always the same return rows[0][columnIndex]; }, - render: ({ content, component }) => { + render: ({ content, component, localization }) => { + const getAriaLabel = () => { + if (localization?.expand && localization?.collapse) { + return content.isExpanded + ? localization?.collapse + : localization?.expand; + } + return `Activate to ${ + content.isExpanded ? 'collapse' : 'expand' + } content`; + }; return ( content && ( { content.isExpanded = !content.isExpanded; component.forceRender++; diff --git a/packages/components/src/components/data-grid/data-grid.tsx b/packages/components/src/components/data-grid/data-grid.tsx index c22a971f05..668df71cd7 100644 --- a/packages/components/src/components/data-grid/data-grid.tsx +++ b/packages/components/src/components/data-grid/data-grid.tsx @@ -112,7 +112,7 @@ export class DataGrid { /** (optional) Title for sortable columns */ @Prop() sortableColumnTitle?: string = 'Activate to sort column'; /** - * (optional) set localization for sort, toggle, select/deselect, table options + * (optional) set localization for sort, toggle, select/deselect, table options, expand / collapse (html cell) * Default is English. */ @Prop() localization?: { @@ -120,6 +120,8 @@ export class DataGrid { toggle: string; select: string; tableOptions: string; + expand?: string; + collapse?: string; }; /* 4. Events (alphabetical) */ /** Event triggered every time the editable cells are changed, updating the original rows data */ @@ -1316,6 +1318,7 @@ export class DataGrid { component: this, rowIndex, columnIndex, + localization: this.localization, })} ); diff --git a/packages/components/src/components/data-grid/readme.md b/packages/components/src/components/data-grid/readme.md index e789dd4384..69c9ba55fc 100644 --- a/packages/components/src/components/data-grid/readme.md +++ b/packages/components/src/components/data-grid/readme.md @@ -5,26 +5,26 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------------- | ----------------------- | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- | --------------------------- | -| `fields` | `fields` | Input fields config array | `any` | `undefined` | -| `freezeHeader` | `freeze-header` | (optional) Freeze header row from scrolling | `boolean` | `false` | -| `heading` | `heading` | (optional) Heading string | `string` | `''` | -| `height` | `height` | (optional) Set static table height, by default will auto-resize | `string` | `undefined` | -| `hideBorder` | `hide-border` | (optional) Set to true to remove border | `boolean` | `false` | -| `hideHeader` | `hide-header` | (optional) Set to true to hide header row | `boolean` | `false` | -| `hideInfo` | `hide-info` | (optional) Set to true to remove info footer block including pagination and selection status | `boolean` | `false` | -| `hideMenu` | `hide-menu` | (optional) Set to true to hide settings menu | `boolean` | `false` | -| `localization` | -- | (optional) set localization for sort, toggle, select/deselect, table options Default is English. | `{ sortBy: string; toggle: string; select: string; tableOptions: string; }` | `undefined` | -| `numbered` | `numbered` | (optional) Set to true to add numbers column | `boolean` | `false` | -| `pageSize` | `page-size` | (optional) Set number of rows to display per pagination page | `number` | `Infinity` | -| `rows` | `rows` | Input data array | `any` | `undefined` | -| `selectable` | `selectable` | (optional) Set to true to add selection column | `boolean` | `false` | -| `selection` | -- | Read-only selection array - populated with raw data from selected rows | `string[]` | `[]` | -| `shadeAlternate` | `shade-alternate` | (optional) Shade every second row darker | `boolean` | `true` | -| `sortableColumnTitle` | `sortable-column-title` | (optional) Title for sortable columns | `string` | `'Activate to sort column'` | -| `styles` | `styles` | (optional) Injected css styles | `any` | `undefined` | -| `visible` | `visible` | (optional) Set to false to hide table, used for nested tables to re-render upon toggle | `boolean` | `true` | +| Property | Attribute | Description | Type | Default | +| --------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | --------------------------- | +| `fields` | `fields` | Input fields config array | `any` | `undefined` | +| `freezeHeader` | `freeze-header` | (optional) Freeze header row from scrolling | `boolean` | `false` | +| `heading` | `heading` | (optional) Heading string | `string` | `''` | +| `height` | `height` | (optional) Set static table height, by default will auto-resize | `string` | `undefined` | +| `hideBorder` | `hide-border` | (optional) Set to true to remove border | `boolean` | `false` | +| `hideHeader` | `hide-header` | (optional) Set to true to hide header row | `boolean` | `false` | +| `hideInfo` | `hide-info` | (optional) Set to true to remove info footer block including pagination and selection status | `boolean` | `false` | +| `hideMenu` | `hide-menu` | (optional) Set to true to hide settings menu | `boolean` | `false` | +| `localization` | -- | (optional) set localization for sort, toggle, select/deselect, table options, expand / collapse (html cell) Default is English. | `{ sortBy: string; toggle: string; select: string; tableOptions: string; expand?: string; collapse?: string; }` | `undefined` | +| `numbered` | `numbered` | (optional) Set to true to add numbers column | `boolean` | `false` | +| `pageSize` | `page-size` | (optional) Set number of rows to display per pagination page | `number` | `Infinity` | +| `rows` | `rows` | Input data array | `any` | `undefined` | +| `selectable` | `selectable` | (optional) Set to true to add selection column | `boolean` | `false` | +| `selection` | -- | Read-only selection array - populated with raw data from selected rows | `string[]` | `[]` | +| `shadeAlternate` | `shade-alternate` | (optional) Shade every second row darker | `boolean` | `true` | +| `sortableColumnTitle` | `sortable-column-title` | (optional) Title for sortable columns | `string` | `'Activate to sort column'` | +| `styles` | `styles` | (optional) Injected css styles | `any` | `undefined` | +| `visible` | `visible` | (optional) Set to false to hide table, used for nested tables to re-render upon toggle | `boolean` | `true` | ## Events diff --git a/packages/components/src/html/data-grid.html b/packages/components/src/html/data-grid.html index 4ea19cfe14..d7b917b42f 100644 --- a/packages/components/src/html/data-grid.html +++ b/packages/components/src/html/data-grid.html @@ -810,6 +810,8 @@ toggle: 'ToggleLoc', select: 'SelectLoc', tableOptions: 'OptionsLoc', + expand: 'Klicken Sie zu expanden', + collapse: 'Klicken Sie zu collapsen', }; // Pass in data From 61d53f2d9640ac4c8403e669d40353794df8e79f Mon Sep 17 00:00:00 2001 From: tshimber Date: Thu, 29 Aug 2024 16:26:41 +0200 Subject: [PATCH 3/3] fix: storybook fixed --- .../src/components/data-grid/data-grid.tsx | 2 +- .../src/components/data-grid/readme.md | 40 +++++++++---------- .../components/data-grid/DataGrid.stories.mdx | 4 +- 3 files changed, 23 insertions(+), 23 deletions(-) diff --git a/packages/components/src/components/data-grid/data-grid.tsx b/packages/components/src/components/data-grid/data-grid.tsx index 668df71cd7..240b978ad9 100644 --- a/packages/components/src/components/data-grid/data-grid.tsx +++ b/packages/components/src/components/data-grid/data-grid.tsx @@ -112,7 +112,7 @@ export class DataGrid { /** (optional) Title for sortable columns */ @Prop() sortableColumnTitle?: string = 'Activate to sort column'; /** - * (optional) set localization for sort, toggle, select/deselect, table options, expand / collapse (html cell) + * (optional) set localization for sort, toggle, select/deselect, table options, expand/collapse (html cell) * Default is English. */ @Prop() localization?: { diff --git a/packages/components/src/components/data-grid/readme.md b/packages/components/src/components/data-grid/readme.md index 69c9ba55fc..ba1f894f5b 100644 --- a/packages/components/src/components/data-grid/readme.md +++ b/packages/components/src/components/data-grid/readme.md @@ -5,26 +5,26 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | --------------------------- | -| `fields` | `fields` | Input fields config array | `any` | `undefined` | -| `freezeHeader` | `freeze-header` | (optional) Freeze header row from scrolling | `boolean` | `false` | -| `heading` | `heading` | (optional) Heading string | `string` | `''` | -| `height` | `height` | (optional) Set static table height, by default will auto-resize | `string` | `undefined` | -| `hideBorder` | `hide-border` | (optional) Set to true to remove border | `boolean` | `false` | -| `hideHeader` | `hide-header` | (optional) Set to true to hide header row | `boolean` | `false` | -| `hideInfo` | `hide-info` | (optional) Set to true to remove info footer block including pagination and selection status | `boolean` | `false` | -| `hideMenu` | `hide-menu` | (optional) Set to true to hide settings menu | `boolean` | `false` | -| `localization` | -- | (optional) set localization for sort, toggle, select/deselect, table options, expand / collapse (html cell) Default is English. | `{ sortBy: string; toggle: string; select: string; tableOptions: string; expand?: string; collapse?: string; }` | `undefined` | -| `numbered` | `numbered` | (optional) Set to true to add numbers column | `boolean` | `false` | -| `pageSize` | `page-size` | (optional) Set number of rows to display per pagination page | `number` | `Infinity` | -| `rows` | `rows` | Input data array | `any` | `undefined` | -| `selectable` | `selectable` | (optional) Set to true to add selection column | `boolean` | `false` | -| `selection` | -- | Read-only selection array - populated with raw data from selected rows | `string[]` | `[]` | -| `shadeAlternate` | `shade-alternate` | (optional) Shade every second row darker | `boolean` | `true` | -| `sortableColumnTitle` | `sortable-column-title` | (optional) Title for sortable columns | `string` | `'Activate to sort column'` | -| `styles` | `styles` | (optional) Injected css styles | `any` | `undefined` | -| `visible` | `visible` | (optional) Set to false to hide table, used for nested tables to re-render upon toggle | `boolean` | `true` | +| Property | Attribute | Description | Type | Default | +| --------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | --------------------------- | +| `fields` | `fields` | Input fields config array | `any` | `undefined` | +| `freezeHeader` | `freeze-header` | (optional) Freeze header row from scrolling | `boolean` | `false` | +| `heading` | `heading` | (optional) Heading string | `string` | `''` | +| `height` | `height` | (optional) Set static table height, by default will auto-resize | `string` | `undefined` | +| `hideBorder` | `hide-border` | (optional) Set to true to remove border | `boolean` | `false` | +| `hideHeader` | `hide-header` | (optional) Set to true to hide header row | `boolean` | `false` | +| `hideInfo` | `hide-info` | (optional) Set to true to remove info footer block including pagination and selection status | `boolean` | `false` | +| `hideMenu` | `hide-menu` | (optional) Set to true to hide settings menu | `boolean` | `false` | +| `localization` | -- | (optional) set localization for sort, toggle, select/deselect, table options, expand/collapse (html cell) Default is English. | `{ sortBy: string; toggle: string; select: string; tableOptions: string; expand?: string; collapse?: string; }` | `undefined` | +| `numbered` | `numbered` | (optional) Set to true to add numbers column | `boolean` | `false` | +| `pageSize` | `page-size` | (optional) Set number of rows to display per pagination page | `number` | `Infinity` | +| `rows` | `rows` | Input data array | `any` | `undefined` | +| `selectable` | `selectable` | (optional) Set to true to add selection column | `boolean` | `false` | +| `selection` | -- | Read-only selection array - populated with raw data from selected rows | `string[]` | `[]` | +| `shadeAlternate` | `shade-alternate` | (optional) Shade every second row darker | `boolean` | `true` | +| `sortableColumnTitle` | `sortable-column-title` | (optional) Title for sortable columns | `string` | `'Activate to sort column'` | +| `styles` | `styles` | (optional) Injected css styles | `any` | `undefined` | +| `visible` | `visible` | (optional) Set to false to hide table, used for nested tables to re-render upon toggle | `boolean` | `true` | ## Events diff --git a/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx b/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx index 4c38c09346..47d83e740b 100644 --- a/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx +++ b/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx @@ -42,7 +42,7 @@ import ScaleDataGrid from './ScaleDataGrid.vue'; }, description: `(optional) Title for sortable columns`, control: { type: null }, - }, + }, height: { table: { type: { summary: 'string' }, @@ -111,7 +111,7 @@ import ScaleDataGrid from './ScaleDataGrid.vue'; table: { type: { summary: 'object' }, }, - description: `(optional) localization object for sort by, toogle visibility and select/deselect all. The default value is English`, + description: `(optional) localization object for sort by, toogle visibility, select/deselect all, table settings, expand/collapse buttons. The default value is English. To provide localization, use object with next keys: 'sortBy', 'toggle', 'select', 'tableOptions', 'expand', 'collapse'`, control: { type: null }, }, shadeAlternate: {