Skip to content

Commit c4eed4d

Browse files
metonymmetonym
committed
fix(table-header): implement translateWithId 
1 parent ace3376 commit c4eed4d

File tree

4 files changed

+80
-19
lines changed

4 files changed

+80
-19
lines changed

‎COMPONENT_INDEX.md‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3940,16 +3940,25 @@ None.
39403940

39413941
## `TableHeader`
39423942

3943+
### Types
3944+
3945+
```ts
3946+
export type TableHeaderTranslationId =
3947+
| "columnSortAscending"
3948+
| "columnSortDescending";
3949+
```
3950+
39433951
### Props
39443952

3945-
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
3946-
| :-------------- | :------- | :--------------- | :------- | ---------------------------------------------------------- | ------------------------------------------------ | -------------------------------------- |
3947-
| sortable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
3948-
| sortDirection | No | <code>let</code> | No | <code>"none" &#124; "ascending" &#124; "descending"</code> | <code>"none"</code> | Specify the sort direction |
3949-
| active | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the column sorting |
3950-
| scope | No | <code>let</code> | No | <code>string</code> | <code>"col"</code> | Specify the `scope` attribute |
3951-
| translateWithId | No | <code>let</code> | No | <code>() => string</code> | -- | Override the default id translations |
3952-
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
3953+
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
3954+
| :-------------- | :------- | :----------------- | :------- | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------------- |
3955+
| sortable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
3956+
| sortDirection | No | <code>let</code> | No | <code>"none" &#124; "ascending" &#124; "descending"</code> | <code>"none"</code> | Specify the sort direction |
3957+
| active | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the column sorting |
3958+
| scope | No | <code>let</code> | No | <code>string</code> | <code>"col"</code> | Specify the `scope` attribute |
3959+
| translationIds | No | <code>const</code> | No | <code>{ columnSortAscending: "columnSortAscending", columnSortDescending: "columnSortDescending", }</code> | <code>{ columnSortAscending: "columnSortAscending", columnSortDescending: "columnSortDescending", }</code> | Default translation ids |
3960+
| translateWithId | No | <code>let</code> | No | <code>(id: TableHeaderTranslationId) => string</code> | -- | Override the default translation ids |
3961+
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
39533962

39543963
### Slots
39553964

‎docs/src/COMPONENT_API.json‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15660,11 +15660,23 @@
1566015660
"constant": false,
1566115661
"reactive": false
1566215662
},
15663+
{
15664+
"name": "translationIds",
15665+
"kind": "const",
15666+
"description": "Default translation ids",
15667+
"type": "{ columnSortAscending: \"columnSortAscending\", columnSortDescending: \"columnSortDescending\", }",
15668+
"value": "{\n columnSortAscending:\n \"columnSortAscending\",\n columnSortDescending:\n \"columnSortDescending\",\n}",
15669+
"isFunction": false,
15670+
"isFunctionDeclaration": false,
15671+
"isRequired": false,
15672+
"constant": true,
15673+
"reactive": false
15674+
},
1566315675
{
1566415676
"name": "translateWithId",
1566515677
"kind": "let",
15666-
"description": "Override the default id translations",
15667-
"type": "() => string",
15678+
"description": "Override the default translation ids",
15679+
"type": "(id: TableHeaderTranslationId) => string",
1566815680
"isFunction": true,
1566915681
"isFunctionDeclaration": false,
1567015682
"isRequired": false,
@@ -15714,7 +15726,13 @@
1571415726
"element": "button"
1571515727
}
1571615728
],
15717-
"typedefs": [],
15729+
"typedefs": [
15730+
{
15731+
"type": "\"columnSortAscending\" | \"columnSortDescending\"",
15732+
"name": "TableHeaderTranslationId",
15733+
"ts": "type TableHeaderTranslationId =\n | \"columnSortAscending\"\n | \"columnSortDescending\";\n"
15734+
}
15735+
],
1571815736
"generics": null,
1571915737
"rest_props": {
1572015738
"type": "Element",

‎src/DataTable/TableHeader.svelte‎

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
<script>
2+
/**
3+
* @typedef {"columnSortAscending" | "columnSortDescending"} TableHeaderTranslationId
4+
*/
5+
26
/** Set to `true` for the sortable variant */
37
export let sortable = false;
48
@@ -14,20 +18,38 @@
1418
/** Specify the `scope` attribute */
1519
export let scope = "col";
1620
21+
/** Default translation ids */
22+
export const translationIds = {
23+
columnSortAscending: "columnSortAscending",
24+
columnSortDescending: "columnSortDescending",
25+
};
26+
1727
/**
18-
* Override the default id translations
19-
* @type {() => string}
28+
* Override the default translation ids
29+
* @type {(id: TableHeaderTranslationId) => string}
2030
*/
21-
export let translateWithId = () => "";
31+
export let translateWithId = (id) => defaultTranslations[id];
2232
2333
/** Set an id for the top-level element */
2434
export let id = "ccs-" + Math.random().toString(36);
2535
2636
import ArrowsVertical from "../icons/ArrowsVertical.svelte";
2737
import ArrowUp from "../icons/ArrowUp.svelte";
2838
29-
// TODO: translate with id
30-
$: ariaLabel = translateWithId();
39+
const defaultTranslations = {
40+
[translationIds.columnSortAscending]:
41+
"Sort rows by this header in ascending order",
42+
[translationIds.columnSortDescending]:
43+
"Sort rows by this header in descending order",
44+
};
45+
46+
$: translationId = active
47+
? sortDirection === "descending"
48+
? translationIds.columnSortAscending
49+
: translationIds.columnSortDescending
50+
: translationIds.columnSortAscending;
51+
$: ariaLabel =
52+
translateWithId?.(translationId) ?? defaultTranslations[translationId];
3153
</script>
3254
3355
<!-- svelte-ignore a11y-mouse-events-have-key-events -->

‎types/DataTable/TableHeader.svelte.d.ts‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import type { SvelteComponentTyped } from "svelte";
22
import type { SvelteHTMLElements } from "svelte/elements";
33

4+
export type TableHeaderTranslationId =
5+
| "columnSortAscending"
6+
| "columnSortDescending";
7+
48
type $RestProps = SvelteHTMLElements["th"];
59

610
type $Props = {
@@ -29,9 +33,9 @@ type $Props = {
2933
scope?: string;
3034

3135
/**
32-
* Override the default id translations
36+
* Override the default translation ids
3337
*/
34-
translateWithId?: () => string;
38+
translateWithId?: (id: TableHeaderTranslationId) => string;
3539

3640
/**
3741
* Set an id for the top-level element
@@ -53,4 +57,12 @@ export default class TableHeader extends SvelteComponentTyped<
5357
click: WindowEventMap["click"];
5458
},
5559
{ default: Record<string, never> }
56-
> {}
60+
> {
61+
/**
62+
* Default translation ids
63+
*/
64+
translationIds: {
65+
columnSortAscending: "columnSortAscending";
66+
columnSortDescending: "columnSortDescending";
67+
};
68+
}

0 commit comments

Comments
 (0)