mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
fix: ComboBox, MultiSelect should have multiple translateWithId functions (#1283)
* fix(combo-box): ListBoxField and ListBoxSelection have different `translateWithId` props * fix(multi-select): ListBoxField and ListBoxSelection have different `translateWithId` props * Run "yarn build docs" * test: assert translateWithIdMenu, translateWIthIdInput props
This commit is contained in:
metonym
GitHub
parent
877173df59
commit
ff2e6276db
8 changed files with 176 additions and 66 deletions
|
|
@ -650,7 +650,7 @@ export interface ComboBoxItem {
|
|||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------------- | :-------------------- | :------- | :---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
|
||||
| :------------------- | :-------------------- | :------- | :---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
|
||||
| listRef | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the list HTML element |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown |
|
||||
|
|
@ -671,6 +671,8 @@ export interface ComboBoxItem {
|
|||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| shouldFilterItem | <code>let</code> | No | <code>(item: ComboBoxItem, value: string) => boolean</code> | <code>() => true</code> | Determine if an item should be filtered given the current combobox value |
|
||||
| translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids |
|
||||
| translateWithIdMenu | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids for the menu |
|
||||
| translateWithIdInput | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids for the input |
|
||||
| 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 input |
|
||||
| clear | <code>function</code> | No | <code>(options?: { focus?: boolean; }) => void</code> | <code>() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = ""; if (options?.focus !== false) ref?.focus(); }</code> | Clear the combo box programmatically |
|
||||
|
|
@ -2326,7 +2328,7 @@ export interface MultiSelectItem {
|
|||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- |
|
||||
| :------------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- |
|
||||
| highlightedId | <code>let</code> | Yes | <code>null | MultiSelectItemId</code> | <code>null</code> | Id of the highlighted ListBoxMenuItem |
|
||||
| selectionRef | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the selection element |
|
||||
| fieldRef | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the field box element |
|
||||
|
|
@ -2350,6 +2352,8 @@ export interface MultiSelectItem {
|
|||
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
||||
| sortItem | <code>let</code> | No | <code>((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void)</code> | <code>(a, b) => a.text.localeCompare(b.text, locale, { numeric: true })</code> | Override the sorting logic<br />The default sorting compare the item text value |
|
||||
| translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids |
|
||||
| translateWithIdMenu | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids for the menu |
|
||||
| translateWithIdInput | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids for the input |
|
||||
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
|
||||
| useTitleInItem | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to pass the item to `itemToString` in the checkbox |
|
||||
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||
|
|
|
|||
|
|
@ -1562,6 +1562,26 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "translateWithIdMenu",
|
||||
"kind": "let",
|
||||
"description": "Override the default translation ids for the menu",
|
||||
"type": "(id: any) => string",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "translateWithIdInput",
|
||||
"kind": "let",
|
||||
"description": "Override the default translation ids for the input",
|
||||
"type": "(id: any) => string",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "id",
|
||||
"kind": "let",
|
||||
|
|
@ -6590,6 +6610,26 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "translateWithIdMenu",
|
||||
"kind": "let",
|
||||
"description": "Override the default translation ids for the menu",
|
||||
"type": "(id: any) => string",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "translateWithIdInput",
|
||||
"kind": "let",
|
||||
"description": "Override the default translation ids for the input",
|
||||
"type": "(id: any) => string",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "titleText",
|
||||
"kind": "let",
|
||||
|
|
|
|||
|
|
@ -81,6 +81,18 @@
|
|||
*/
|
||||
export let translateWithId = undefined;
|
||||
|
||||
/**
|
||||
* Override the default translation ids for the menu
|
||||
* @type {(id: any) => string}
|
||||
*/
|
||||
export let translateWithIdMenu = undefined;
|
||||
|
||||
/**
|
||||
* Override the default translation ids for the input
|
||||
* @type {(id: any) => string}
|
||||
*/
|
||||
export let translateWithIdInput = undefined;
|
||||
|
||||
/** Set an id for the list box component */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
|
|
@ -231,7 +243,7 @@
|
|||
}}"
|
||||
id="{id}"
|
||||
disabled="{disabled}"
|
||||
translateWithId="{translateWithId}"
|
||||
translateWithId="{translateWithIdMenu}"
|
||||
>
|
||||
<input
|
||||
bind:this="{ref}"
|
||||
|
|
@ -325,7 +337,7 @@
|
|||
<ListBoxSelection
|
||||
on:clear
|
||||
on:clear="{clear}"
|
||||
translateWithId="{translateWithId}"
|
||||
translateWithId="{translateWithIdInput}"
|
||||
disabled="{disabled}"
|
||||
open="{open}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -100,6 +100,18 @@
|
|||
*/
|
||||
export let translateWithId = undefined;
|
||||
|
||||
/**
|
||||
* Override the default translation ids for the menu
|
||||
* @type {(id: any) => string}
|
||||
*/
|
||||
export let translateWithIdMenu = undefined;
|
||||
|
||||
/**
|
||||
* Override the default translation ids for the input
|
||||
* @type {(id: any) => string}
|
||||
*/
|
||||
export let translateWithIdInput = undefined;
|
||||
|
||||
/** Specify the title text */
|
||||
export let titleText = "";
|
||||
|
||||
|
|
@ -361,7 +373,7 @@
|
|||
}}"
|
||||
id="{id}"
|
||||
disabled="{disabled}"
|
||||
translateWithId="{translateWithId}"
|
||||
translateWithId="{translateWithIdMenu}"
|
||||
>
|
||||
{#if checked.length > 0}
|
||||
<ListBoxSelection
|
||||
|
|
@ -374,7 +386,7 @@
|
|||
}));
|
||||
if (fieldRef) fieldRef.blur();
|
||||
}}"
|
||||
translateWithId="{translateWithId}"
|
||||
translateWithId="{translateWithIdInput}"
|
||||
disabled="{disabled}"
|
||||
/>
|
||||
{/if}
|
||||
|
|
@ -439,7 +451,7 @@
|
|||
inputValue = '';
|
||||
open = false;
|
||||
}}"
|
||||
translateWithId="{translateWithId}"
|
||||
translateWithId="{translateWithIdInput}"
|
||||
disabled="{disabled}"
|
||||
open="{open}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,15 @@
|
|||
on:select="{(e) => {
|
||||
console.log(e.detail.selectedId);
|
||||
}}"
|
||||
translateWithId="{(id) => {
|
||||
return id;
|
||||
}}"
|
||||
translateWithIdMenu="{(id) => {
|
||||
return id;
|
||||
}}"
|
||||
translateWithIdInput="{(id) => {
|
||||
return id;
|
||||
}}"
|
||||
let:item
|
||||
let:index
|
||||
>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,15 @@
|
|||
on:blur="{(e) => {
|
||||
e.detail; // number | FocusEvent
|
||||
}}"
|
||||
translateWithId="{(id) => {
|
||||
return id;
|
||||
}}"
|
||||
translateWithIdMenu="{(id) => {
|
||||
return id;
|
||||
}}"
|
||||
translateWithIdInput="{(id) => {
|
||||
return id;
|
||||
}}"
|
||||
let:item
|
||||
let:index
|
||||
>
|
||||
|
|
|
|||
12
types/ComboBox/ComboBox.svelte.d.ts
vendored
12
types/ComboBox/ComboBox.svelte.d.ts
vendored
|
|
@ -118,6 +118,18 @@ export interface ComboBoxProps
|
|||
*/
|
||||
translateWithId?: (id: any) => string;
|
||||
|
||||
/**
|
||||
* Override the default translation ids for the menu
|
||||
* @default undefined
|
||||
*/
|
||||
translateWithIdMenu?: (id: any) => string;
|
||||
|
||||
/**
|
||||
* Override the default translation ids for the input
|
||||
* @default undefined
|
||||
*/
|
||||
translateWithIdInput?: (id: any) => string;
|
||||
|
||||
/**
|
||||
* Set an id for the list box component
|
||||
* @default "ccs-" + Math.random().toString(36)
|
||||
|
|
|
|||
12
types/MultiSelect/MultiSelect.svelte.d.ts
vendored
12
types/MultiSelect/MultiSelect.svelte.d.ts
vendored
|
|
@ -128,6 +128,18 @@ export interface MultiSelectProps
|
|||
*/
|
||||
translateWithId?: (id: any) => string;
|
||||
|
||||
/**
|
||||
* Override the default translation ids for the menu
|
||||
* @default undefined
|
||||
*/
|
||||
translateWithIdMenu?: (id: any) => string;
|
||||
|
||||
/**
|
||||
* Override the default translation ids for the input
|
||||
* @default undefined
|
||||
*/
|
||||
translateWithIdInput?: (id: any) => string;
|
||||
|
||||
/**
|
||||
* Specify the title text
|
||||
* @default ""
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue