mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
fix: remove translateWithIdMenu, use translateWithId instead, rename translateWithIdInput (#1285)
* fix: remove translateWithIdMenu, use translateWithId instead * chore: rename translateWithIdInput to translateWithIdSelection
This commit is contained in:
metonym
GitHub
parent
0c39506dcb
commit
f7146b61dc
8 changed files with 81 additions and 135 deletions
|
|
@ -649,33 +649,32 @@ 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 |
|
||||
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value |
|
||||
| selectedId | <code>let</code> | Yes | <code>ComboBoxItemId</code> | <code>undefined</code> | Set the selected item by value id |
|
||||
| items | <code>let</code> | No | <code>ComboBoxItem[]</code> | <code>[]</code> | Set the combobox items |
|
||||
| itemToString | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text || item.id</code> | Override the display of a combobox item |
|
||||
| direction | <code>let</code> | No | <code>"bottom" | "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the combobox |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox |
|
||||
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox |
|
||||
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
||||
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
||||
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
||||
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid 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 |
|
||||
| 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: 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 |
|
||||
| translateWithIdMenu | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the menu label based on the open state.<br />Defaults to "Open menu" and "Close menu" |
|
||||
| translateWithIdInput | <code>let</code> | No | <code>(id: "clearSelection") => string</code> | <code>undefined</code> | Override the label of the clear button when the input has a selection.<br />Defaults to "Clear selected item" |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value |
|
||||
| selectedId | <code>let</code> | Yes | <code>ComboBoxItemId</code> | <code>undefined</code> | Set the selected item by value id |
|
||||
| items | <code>let</code> | No | <code>ComboBoxItem[]</code> | <code>[]</code> | Set the combobox items |
|
||||
| itemToString | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text || item.id</code> | Override the display of a combobox item |
|
||||
| direction | <code>let</code> | No | <code>"bottom" | "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the combobox |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox |
|
||||
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox |
|
||||
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
||||
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
||||
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
||||
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid 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 |
|
||||
| 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: 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 |
|
||||
| translateWithIdSelection | <code>let</code> | No | <code>(id: "clearSelection") => string</code> | <code>undefined</code> | Override the label of the clear button when the input has a selection.<br />Defaults to "Clear selected item" since a combo box can only have on selection. |
|
||||
| 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 |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -2327,44 +2326,43 @@ 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 |
|
||||
| multiSelectRef | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the outer div element |
|
||||
| inputRef | <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 dropdown |
|
||||
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the multiselect value |
|
||||
| selectedIds | <code>let</code> | Yes | <code>MultiSelectItemId[]</code> | <code>[]</code> | Set the selected ids |
|
||||
| items | <code>let</code> | Yes | <code>MultiSelectItem[]</code> | <code>[]</code> | Set the multiselect items |
|
||||
| itemToString | <code>let</code> | No | <code>(item: MultiSelectItem) => any</code> | <code>(item) => item.text || item.id</code> | Override the display of a multiselect item |
|
||||
| itemToInput | <code>let</code> | No | <code>(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; }</code> | <code>(item) => {}</code> | Override the item name, title, labelText passed to the checkbox input |
|
||||
| size | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>undefined</code> | Set the size of the combobox |
|
||||
| type | <code>let</code> | No | <code>"default" | "inline"</code> | <code>"default"</code> | Specify the type of multiselect |
|
||||
| direction | <code>let</code> | No | <code>"bottom" | "top"</code> | <code>"bottom"</code> | Specify the direction of the multiselect dropdown menu |
|
||||
| selectionFeedback | <code>let</code> | No | <code>"top" | "fixed" | "top-after-reopen"</code> | <code>"top-after-reopen"</code> | Specify the selection feedback after selecting items |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown |
|
||||
| filterable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to filter items |
|
||||
| filterItem | <code>let</code> | No | <code>(item: MultiSelectItem, value: string) => string</code> | <code>(item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase())</code> | Override the filtering logic<br />The default filtering is an exact string comparison |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| locale | <code>let</code> | No | <code>string</code> | <code>"en"</code> | Specify the locale |
|
||||
| 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: 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 |
|
||||
| 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: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string</code> | <code>undefined</code> | Override the label of the clear button when the input has a selection.<br />Defaults to "Clear selected item" and "Clear all items" |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| label | <code>let</code> | No | <code>string</code> | <code>""</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 |
|
||||
| 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 select |
|
||||
| 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 |
|
||||
| multiSelectRef | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the outer div element |
|
||||
| inputRef | <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 dropdown |
|
||||
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the multiselect value |
|
||||
| selectedIds | <code>let</code> | Yes | <code>MultiSelectItemId[]</code> | <code>[]</code> | Set the selected ids |
|
||||
| items | <code>let</code> | Yes | <code>MultiSelectItem[]</code> | <code>[]</code> | Set the multiselect items |
|
||||
| itemToString | <code>let</code> | No | <code>(item: MultiSelectItem) => any</code> | <code>(item) => item.text || item.id</code> | Override the display of a multiselect item |
|
||||
| itemToInput | <code>let</code> | No | <code>(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; }</code> | <code>(item) => {}</code> | Override the item name, title, labelText passed to the checkbox input |
|
||||
| size | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>undefined</code> | Set the size of the combobox |
|
||||
| type | <code>let</code> | No | <code>"default" | "inline"</code> | <code>"default"</code> | Specify the type of multiselect |
|
||||
| direction | <code>let</code> | No | <code>"bottom" | "top"</code> | <code>"bottom"</code> | Specify the direction of the multiselect dropdown menu |
|
||||
| selectionFeedback | <code>let</code> | No | <code>"top" | "fixed" | "top-after-reopen"</code> | <code>"top-after-reopen"</code> | Specify the selection feedback after selecting items |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown |
|
||||
| filterable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to filter items |
|
||||
| filterItem | <code>let</code> | No | <code>(item: MultiSelectItem, value: string) => string</code> | <code>(item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase())</code> | Override the filtering logic<br />The default filtering is an exact string comparison |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| locale | <code>let</code> | No | <code>string</code> | <code>"en"</code> | Specify the locale |
|
||||
| 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: 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 |
|
||||
| translateWithIdSelection | <code>let</code> | No | <code>(id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string</code> | <code>undefined</code> | Override the label of the clear button when the input has a selection.<br />Defaults to "Clear selected item" and "Clear all items" if more than one item is selected |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| label | <code>let</code> | No | <code>string</code> | <code>""</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 |
|
||||
| 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 select |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
|
|||
|
|
@ -1563,19 +1563,9 @@
|
|||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "translateWithIdMenu",
|
||||
"name": "translateWithIdSelection",
|
||||
"kind": "let",
|
||||
"description": "Override the menu label based on the open state.\nDefaults to \"Open menu\" and \"Close menu\"",
|
||||
"type": "(id: any) => string",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "translateWithIdInput",
|
||||
"kind": "let",
|
||||
"description": "Override the label of the clear button when the input has a selection.\nDefaults to \"Clear selected item\"",
|
||||
"description": "Override the label of the clear button when the input has a selection.\nDefaults to \"Clear selected item\" since a combo box can only have on selection.",
|
||||
"type": "(id: \"clearSelection\") => string",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
|
|
@ -6611,19 +6601,9 @@
|
|||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "translateWithIdMenu",
|
||||
"name": "translateWithIdSelection",
|
||||
"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 label of the clear button when the input has a selection.\nDefaults to \"Clear selected item\" and \"Clear all items\"",
|
||||
"description": "Override the label of the clear button when the input has a selection.\nDefaults to \"Clear selected item\" and \"Clear all items\" if more than one item is selected",
|
||||
"type": "(id: import(\"../ListBox/ListBoxSelection.svelte\").ListBoxSelectionTranslationId) => string",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
|
|
|
|||
|
|
@ -82,19 +82,12 @@
|
|||
*/
|
||||
export let translateWithId = undefined;
|
||||
|
||||
/**
|
||||
* Override the menu label based on the open state.
|
||||
* Defaults to "Open menu" and "Close menu"
|
||||
* @type {(id: any) => string}
|
||||
*/
|
||||
export let translateWithIdMenu = undefined;
|
||||
|
||||
/**
|
||||
* Override the label of the clear button when the input has a selection.
|
||||
* Defaults to "Clear selected item" since a combo box can only have on selection.
|
||||
* @type {(id: "clearSelection") => string}
|
||||
*/
|
||||
export let translateWithIdInput = undefined;
|
||||
export let translateWithIdSelection = undefined;
|
||||
|
||||
/** Set an id for the list box component */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
|
@ -246,7 +239,7 @@
|
|||
}}"
|
||||
id="{id}"
|
||||
disabled="{disabled}"
|
||||
translateWithId="{translateWithIdMenu}"
|
||||
translateWithId="{translateWithId}"
|
||||
>
|
||||
<input
|
||||
bind:this="{ref}"
|
||||
|
|
@ -340,7 +333,7 @@
|
|||
<ListBoxSelection
|
||||
on:clear
|
||||
on:clear="{clear}"
|
||||
translateWithId="{translateWithIdInput}"
|
||||
translateWithId="{translateWithIdSelection}"
|
||||
disabled="{disabled}"
|
||||
open="{open}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -101,18 +101,12 @@
|
|||
*/
|
||||
export let translateWithId = undefined;
|
||||
|
||||
/**
|
||||
* Override the default translation ids for the menu
|
||||
* @type {(id: any) => string}
|
||||
*/
|
||||
export let translateWithIdMenu = undefined;
|
||||
|
||||
/**
|
||||
* Override the label of the clear button when the input has a selection.
|
||||
* Defaults to "Clear selected item" and "Clear all items"
|
||||
* Defaults to "Clear selected item" and "Clear all items" if more than one item is selected
|
||||
* @type {(id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string}
|
||||
*/
|
||||
export let translateWithIdInput = undefined;
|
||||
export let translateWithIdSelection = undefined;
|
||||
|
||||
/** Specify the title text */
|
||||
export let titleText = "";
|
||||
|
|
@ -375,7 +369,7 @@
|
|||
}}"
|
||||
id="{id}"
|
||||
disabled="{disabled}"
|
||||
translateWithId="{translateWithIdMenu}"
|
||||
translateWithId="{translateWithId}"
|
||||
>
|
||||
{#if checked.length > 0}
|
||||
<ListBoxSelection
|
||||
|
|
@ -388,7 +382,7 @@
|
|||
}));
|
||||
if (fieldRef) fieldRef.blur();
|
||||
}}"
|
||||
translateWithId="{translateWithIdInput}"
|
||||
translateWithId="{translateWithIdSelection}"
|
||||
disabled="{disabled}"
|
||||
/>
|
||||
{/if}
|
||||
|
|
@ -453,7 +447,7 @@
|
|||
inputValue = '';
|
||||
open = false;
|
||||
}}"
|
||||
translateWithId="{translateWithIdInput}"
|
||||
translateWithId="{translateWithIdSelection}"
|
||||
disabled="{disabled}"
|
||||
open="{open}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -27,10 +27,7 @@
|
|||
console.log(id); // "open" | "close"
|
||||
return id;
|
||||
}}"
|
||||
translateWithIdMenu="{(id) => {
|
||||
return id;
|
||||
}}"
|
||||
translateWithIdInput="{(id) => {
|
||||
translateWithIdSelection="{(id) => {
|
||||
console.log(id); // "clearSelection"
|
||||
return id;
|
||||
}}"
|
||||
|
|
|
|||
|
|
@ -24,10 +24,7 @@
|
|||
console.log(id); // "open" | "close"
|
||||
return id;
|
||||
}}"
|
||||
translateWithIdMenu="{(id) => {
|
||||
return id;
|
||||
}}"
|
||||
translateWithIdInput="{(id) => {
|
||||
translateWithIdSelection="{(id) => {
|
||||
console.log(id); // "clearAll" | "clearSelection"
|
||||
return id;
|
||||
}}"
|
||||
|
|
|
|||
11
types/ComboBox/ComboBox.svelte.d.ts
vendored
11
types/ComboBox/ComboBox.svelte.d.ts
vendored
|
|
@ -121,19 +121,12 @@ export interface ComboBoxProps
|
|||
id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId
|
||||
) => string;
|
||||
|
||||
/**
|
||||
* Override the menu label based on the open state.
|
||||
* Defaults to "Open menu" and "Close menu"
|
||||
* @default undefined
|
||||
*/
|
||||
translateWithIdMenu?: (id: any) => string;
|
||||
|
||||
/**
|
||||
* Override the label of the clear button when the input has a selection.
|
||||
* Defaults to "Clear selected item"
|
||||
* Defaults to "Clear selected item" since a combo box can only have on selection.
|
||||
* @default undefined
|
||||
*/
|
||||
translateWithIdInput?: (id: "clearSelection") => string;
|
||||
translateWithIdSelection?: (id: "clearSelection") => string;
|
||||
|
||||
/**
|
||||
* Set an id for the list box component
|
||||
|
|
|
|||
10
types/MultiSelect/MultiSelect.svelte.d.ts
vendored
10
types/MultiSelect/MultiSelect.svelte.d.ts
vendored
|
|
@ -131,18 +131,12 @@ export interface MultiSelectProps
|
|||
id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId
|
||||
) => string;
|
||||
|
||||
/**
|
||||
* Override the default translation ids for the menu
|
||||
* @default undefined
|
||||
*/
|
||||
translateWithIdMenu?: (id: any) => string;
|
||||
|
||||
/**
|
||||
* Override the label of the clear button when the input has a selection.
|
||||
* Defaults to "Clear selected item" and "Clear all items"
|
||||
* Defaults to "Clear selected item" and "Clear all items" if more than one item is selected
|
||||
* @default undefined
|
||||
*/
|
||||
translateWithIdInput?: (
|
||||
translateWithIdSelection?: (
|
||||
id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId
|
||||
) => string;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue