mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
fix(time-picker): use native binding for value prop (#1344)
This commit is contained in:
metonym
GitHub
parent
8e52e13ee9
commit
b21718ccfd
4 changed files with 29 additions and 57 deletions
|
|
@ -652,32 +652,32 @@ export interface ComboBoxItem {
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :----------------------- | :------- | :-------------------- | :------- | ----------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| listRef | No | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the list HTML element |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown |
|
||||
| value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value |
|
||||
| selectedId | No | <code>let</code> | Yes | <code>ComboBoxItemId</code> | <code>undefined</code> | Set the selected item by value id |
|
||||
| items | No | <code>let</code> | No | <code>ReadonlyArray<ComboBoxItem></code> | <code>[]</code> | Set the combobox items |
|
||||
| itemToString | No | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text || item.id</code> | Override the display of a combobox item |
|
||||
| direction | No | <code>let</code> | No | <code>"bottom" | "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the combobox |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox |
|
||||
| titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox |
|
||||
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
||||
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
||||
| invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
||||
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||
| warn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
|
||||
| warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
|
||||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| shouldFilterItem | No | <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 | No | <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 | No | <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 | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
|
||||
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
|
||||
| clear | No | <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 | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :----------------------- | :------- | :-------------------- | :------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| listRef | No | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the list HTML element |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown |
|
||||
| value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value |
|
||||
| selectedId | No | <code>let</code> | Yes | <code>ComboBoxItemId</code> | <code>undefined</code> | Set the selected item by value id |
|
||||
| items | No | <code>let</code> | No | <code>ReadonlyArray<ComboBoxItem></code> | <code>[]</code> | Set the combobox items |
|
||||
| itemToString | No | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text || item.id</code> | Override the display of a combobox item |
|
||||
| direction | No | <code>let</code> | No | <code>"bottom" | "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the combobox |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox |
|
||||
| titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox |
|
||||
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
||||
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
||||
| invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
||||
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||
| warn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
|
||||
| warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
|
||||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| shouldFilterItem | No | <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 | No | <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 | No | <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 | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
|
||||
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
|
||||
| clear | No | <code>function</code> | No | <code>(options?: { focus?: boolean; }) => void</code> | <code>() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; value = ""; if (options?.focus !== false) ref?.focus(); }</code> | Clear the combo box programmatically |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -4234,7 +4234,6 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
|
|||
| ref | No | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the input value |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Specify the size of the input |
|
||||
| type | No | <code>let</code> | No | <code>string</code> | <code>"text"</code> | Specify the input type |
|
||||
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>"hh:mm"</code> | Specify the input placeholder text |
|
||||
| pattern | No | <code>let</code> | No | <code>string</code> | <code>"(1[012]|[1-9]):[0-5][0-9](\\s)?"</code> | Specify the `pattern` attribute for the input element |
|
||||
| maxlength | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the `maxlength` input attribute |
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue