Skip to content

Commit

Permalink
feat(data-grid): enable localization for flyout menu (#1411)
Browse files Browse the repository at this point in the history 
* fix: add localization to flyout menu of data grid

* chore: update readme of data-grid

---------

Co-authored-by: Maomao Meyer-Zhang <[email protected]>
  • Loading branch information
@maomaoZH
maomaoZH and Maomao Meyer-Zhang authored Sep 13, 2023
1 parent 5423cb8 commit 053b10d
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 22 deletions.
16 changes: 12 additions & 4 deletions packages/components/src/components/data-grid/data-grid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,15 @@ export class DataGrid {
@Prop() styles: any;
/** (optional) Set to false to hide table, used for nested tables to re-render upon toggle */
@Prop() visible?: boolean = true;

/**
* (optional) set localization for sort, toggle and select/deselect table
* Default is English.
*/
@Prop() localization?: {
sortBy: string;
toggle: string;
select: string;
};
/* 4. Events (alphabetical) */
/** Event triggered every time the editable cells are changed, updating the original rows data */
@Event({ eventName: 'scale-edit' })
Expand Down Expand Up @@ -767,7 +775,7 @@ export class DataGrid {
onClick={this.handleMenuListClick}
>
<scale-icon-action-sort slot="prefix"></scale-icon-action-sort>
Sort By
{this.localization?.sortBy || 'Sort By'}
<scale-menu-flyout-list slot="sublist" id="sortByList">
{this.fields.map(
(
Expand Down Expand Up @@ -819,7 +827,7 @@ export class DataGrid {
onClick={this.handleMenuListClick}
>
<scale-icon-action-hide-password slot="prefix"></scale-icon-action-hide-password>
Toggle Visibility
{this.localization?.toggle || 'Toggle Visibility'}
<scale-menu-flyout-list
slot="sublist"
close-on-select="false"
Expand Down Expand Up @@ -863,7 +871,7 @@ export class DataGrid {
slot="prefix"
path="M20.9328 10.6668C20.5132 10.6668 20.1731 11.0069 20.1731 11.4265V20.3269H1.5194V1.67309H16.5049C16.9245 1.67309 17.2646 1.33292 17.2646 0.913386C17.2646 0.49385 16.9245 0.153687 16.5049 0.153687H0.759699C0.340163 0.153687 0 0.49385 0 0.913386V21.0866C0 21.5062 0.340163 21.8463 0.759699 21.8463H20.9328C21.3523 21.8463 21.6925 21.5062 21.6925 21.0866V11.4265C21.6925 11.0069 21.3524 10.6668 20.9328 10.6668ZM23.7774 0.653387C23.4807 0.356739 22.9997 0.356739 22.703 0.653387L10.3293 13.0272L7.25501 9.9529C6.9583 9.65625 6.47732 9.65625 6.18061 9.9529C5.88396 10.2496 5.88396 10.7306 6.18061 11.0273L9.7921 14.6388C9.94045 14.7871 10.1349 14.8613 10.3293 14.8613C10.5237 14.8613 10.7181 14.7871 10.8665 14.6388L23.7774 1.72778C24.0741 1.43108 24.0741 0.950095 23.7774 0.653387Z"
></scale-icon>
Select / Deselect All
{this.localization?.select || 'Select / Deselect All'}
</scale-menu-flyout-item>
)}
<slot name="menu"></slot>
Expand Down
37 changes: 19 additions & 18 deletions packages/components/src/components/data-grid/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,25 @@

## 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` |
| `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` |
| `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 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` |
| `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
Expand Down
12 changes: 12 additions & 0 deletions packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,13 @@ import ScaleDataGrid from './ScaleDataGrid.vue';
description: `(optional) Set to true to add selection column`,
control: { type: null },
},
localization: {
table: {
type: { summary: 'object' },
},
description: `(optional) localization object for sort by, toogle visibility and select/deselect all. The default value is English`,
control: { type: null },
},
shadeAlternate: {
table: {
type: { summary: 'boolean' },
Expand Down Expand Up @@ -228,6 +235,11 @@ export const Template = (args, {}) => ({
[4, 'Heidi', '3:15'],
[5, 'Muhammad', '21:45'],
];
dataGrid.localization = {
sortBy: 'Sort By',
toggle: 'Toogle Visibility',
select: 'Select / Deselect All'
}
}
</script>
</content>`}
Expand Down

0 comments on commit 053b10d

Please sign in to comment.