mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
feat: rebuild types, component api
This commit is contained in:
Eric Liu
parent
dfc00f6668
commit
e39efc5668
5 changed files with 52 additions and 25 deletions
|
|
@ -654,30 +654,31 @@ 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 |
|
||||
| selectedIndex | <code>let</code> | Yes | <code>number</code> | <code>-1</code> | Set the selected item by value index |
|
||||
| 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> | -- | 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: any) => string</code> | -- | Override the default translation ids |
|
||||
| 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> | -- | Specify a name attribute for the input |
|
||||
| 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 |
|
||||
| selectedIndex | <code>let</code> | Yes | <code>number</code> | <code>-1</code> | Set the selected item by value index |
|
||||
| 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> | -- | 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: any) => string</code> | -- | Override the default translation ids |
|
||||
| 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> | -- | Specify a name attribute for the input |
|
||||
| clear | <code>function</code> | No | <code>() => void</code> | <code>() => { selectedIndex = -1; highlightedIndex = -1; open = false; inputValue = ""; ref?.focus(); }</code> | Clear the combo box programmatically |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
|
|||
|
|
@ -1588,6 +1588,17 @@
|
|||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "clear",
|
||||
"kind": "function",
|
||||
"description": "Clear the combo box programmatically",
|
||||
"type": "() => void",
|
||||
"value": "() => { selectedIndex = -1; highlightedIndex = -1; open = false; inputValue = \"\"; ref?.focus(); }",
|
||||
"isFunction": true,
|
||||
"isFunctionDeclaration": true,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"slots": [],
|
||||
|
|
|
|||
|
|
@ -123,6 +123,10 @@
|
|||
highlightedIndex = index;
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear the combo box programmatically
|
||||
* @type {() => void}
|
||||
*/
|
||||
export function clear() {
|
||||
selectedIndex = -1;
|
||||
highlightedIndex = -1;
|
||||
|
|
|
|||
|
|
@ -7,9 +7,14 @@
|
|||
{ id: "1", text: "Email" },
|
||||
{ id: "2", text: "Fax" },
|
||||
];
|
||||
|
||||
let ref: ComboBox;
|
||||
|
||||
$: ref?.clear();
|
||||
</script>
|
||||
|
||||
<ComboBox
|
||||
bind:this="{ref}"
|
||||
direction="top"
|
||||
titleText="Contact"
|
||||
placeholder="Select contact method"
|
||||
|
|
|
|||
8
types/ComboBox/ComboBox.d.ts
vendored
8
types/ComboBox/ComboBox.d.ts
vendored
|
|
@ -154,4 +154,10 @@ export default class ComboBox extends SvelteComponentTyped<
|
|||
scroll: WindowEventMap["scroll"];
|
||||
},
|
||||
{}
|
||||
> {}
|
||||
> {
|
||||
/**
|
||||
* Clear the combo box programmatically
|
||||
* @default () => { selectedIndex = -1; highlightedIndex = -1; open = false; inputValue = ""; ref?.focus(); }
|
||||
*/
|
||||
clear: () => void;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue