mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
fix(dropdown): strongly type translateWithId (#1286)
This commit is contained in:
metonym
GitHub
parent
0e88a24a55
commit
d242849780
5 changed files with 38 additions and 30 deletions
|
|
@ -1139,30 +1139,30 @@ export interface DropdownItem {
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||||
| :-------------- | :--------------- | :------- | :------------------------------------------ | ----------------------------------------------------- | --------------------------------------------- |
|
| :-------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| ref | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
|
| ref | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
|
||||||
| inline | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
|
| inline | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
|
||||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
|
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
|
||||||
| selectedId | <code>let</code> | Yes | <code>DropdownItemId</code> | <code>undefined</code> | Specify the selected item id |
|
| selectedId | <code>let</code> | Yes | <code>DropdownItemId</code> | <code>undefined</code> | Specify the selected item id |
|
||||||
| items | <code>let</code> | No | <code>DropdownItem[]</code> | <code>[]</code> | Set the dropdown items |
|
| items | <code>let</code> | No | <code>DropdownItem[]</code> | <code>[]</code> | Set the dropdown items |
|
||||||
| itemToString | <code>let</code> | No | <code>(item: DropdownItem) => string</code> | <code>(item) => item.text || item.id</code> | Override the display of a dropdown item |
|
| itemToString | <code>let</code> | No | <code>(item: DropdownItem) => string</code> | <code>(item) => item.text || item.id</code> | Override the display of a dropdown item |
|
||||||
| type | <code>let</code> | No | <code>"default" | "inline"</code> | <code>"default"</code> | Specify the type of dropdown |
|
| type | <code>let</code> | No | <code>"default" | "inline"</code> | <code>"default"</code> | Specify the type of dropdown |
|
||||||
| direction | <code>let</code> | No | <code>"bottom" | "top"</code> | <code>"bottom"</code> | Specify the direction of the dropdown menu |
|
| direction | <code>let</code> | No | <code>"bottom" | "top"</code> | <code>"bottom"</code> | Specify the direction of the dropdown menu |
|
||||||
| size | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>undefined</code> | Specify the size of the dropdown field |
|
| size | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>undefined</code> | Specify the size of the dropdown field |
|
||||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown |
|
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown |
|
||||||
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
|
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
|
||||||
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||||
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
||||||
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
|
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
|
||||||
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
|
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
|
||||||
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
||||||
| label | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the list box label |
|
| label | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the list box label |
|
||||||
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||||
| translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids |
|
| translateWithId | <code>let</code> | No | <code>(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string</code> | <code>undefined</code> | Override the chevron icon label based on the open state.<br />Defaults to "Open menu" when closed and "Close menu" when open |
|
||||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
|
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
|
||||||
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the list box |
|
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the list box |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3207,8 +3207,8 @@
|
||||||
{
|
{
|
||||||
"name": "translateWithId",
|
"name": "translateWithId",
|
||||||
"kind": "let",
|
"kind": "let",
|
||||||
"description": "Override the default translation ids",
|
"description": "Override the chevron icon label based on the open state.\nDefaults to \"Open menu\" when closed and \"Close menu\" when open",
|
||||||
"type": "(id: any) => string",
|
"type": "(id: import(\"../ListBox/ListBoxMenuIcon.svelte\").ListBoxMenuIconTranslationId) => string",
|
||||||
"isFunction": false,
|
"isFunction": false,
|
||||||
"isFunctionDeclaration": false,
|
"isFunctionDeclaration": false,
|
||||||
"constant": false,
|
"constant": false,
|
||||||
|
|
|
||||||
|
|
@ -83,8 +83,9 @@
|
||||||
export let hideLabel = false;
|
export let hideLabel = false;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Override the default translation ids
|
* Override the chevron icon label based on the open state.
|
||||||
* @type {(id: any) => string}
|
* Defaults to "Open menu" when closed and "Close menu" when open
|
||||||
|
* @type {(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string}
|
||||||
*/
|
*/
|
||||||
export let translateWithId = undefined;
|
export let translateWithId = undefined;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,10 @@
|
||||||
on:select="{(e) => {
|
on:select="{(e) => {
|
||||||
console.log(e.detail.selectedId);
|
console.log(e.detail.selectedId);
|
||||||
}}"
|
}}"
|
||||||
|
translateWithId="{(id) => {
|
||||||
|
console.log(id); // "open" | "close"
|
||||||
|
return id;
|
||||||
|
}}"
|
||||||
let:item
|
let:item
|
||||||
let:index
|
let:index
|
||||||
>
|
>
|
||||||
|
|
|
||||||
7
types/Dropdown/Dropdown.svelte.d.ts
vendored
7
types/Dropdown/Dropdown.svelte.d.ts
vendored
|
|
@ -121,10 +121,13 @@ export interface DropdownProps
|
||||||
hideLabel?: boolean;
|
hideLabel?: boolean;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Override the default translation ids
|
* Override the chevron icon label based on the open state.
|
||||||
|
* Defaults to "Open menu" when closed and "Close menu" when open
|
||||||
* @default undefined
|
* @default undefined
|
||||||
*/
|
*/
|
||||||
translateWithId?: (id: any) => string;
|
translateWithId?: (
|
||||||
|
id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId
|
||||||
|
) => string;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Set an id for the list box component
|
* Set an id for the list box component
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue