mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: rebuild types, component api

Browse source
This commit is contained in:
Eric Liu 2021-09-06 09:52:00 -07:00
commit e39efc5668
5 changed files with 52 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

3
COMPONENT_INDEX.md
View file

@ -655,7 +655,7 @@ export interface ComboBoxItem {
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :---------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------ |
| :--------------- | :-------------------- | :------- | :---------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| listRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the list HTML element |
| ref | <code>let</code> | Yes | <code>null &#124; 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 |
@ -678,6 +678,7 @@ export interface ComboBoxItem {
| 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

11
docs/src/COMPONENT_API.json
View file

@ -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": [],

4
src/ComboBox/ComboBox.svelte
View file

@ -123,6 +123,10 @@
highlightedIndex = index;
}
/**
* Clear the combo box programmatically
* @type {() => void}
*/
export function clear() {
selectedIndex = -1;
highlightedIndex = -1;

5
tests/ComboBox.test.svelte
View file

@ -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
View file

@ -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;
}