mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-20 04:13:02 +00:00
supersead PR #1260
This commit is contained in:
davideraccagni
parent
2f406f0328
commit
451de06dd0
4 changed files with 70 additions and 47 deletions
|
|
@ -1,6 +1,6 @@
|
|||
# Component Index
|
||||
|
||||
> 165 components exported from carbon-components-svelte@0.63.1.
|
||||
> 167 components exported from carbon-components-svelte@0.63.1.
|
||||
|
||||
## Components
|
||||
|
||||
|
|
@ -288,30 +288,32 @@ export interface AutoCompleteItem {
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------ | :--------------- | :------- | :---------------------------------------------- | ----------------------------------------------------- | --------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
|
||||
| inline | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
|
||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
|
||||
| selectedId | <code>let</code> | Yes | <code>AutoCompleteItemId</code> | <code>undefined</code> | Specify the selected item id |
|
||||
| filteredItems | <code>let</code> | Yes | <code>[]</code> | <code>[]</code> | -- |
|
||||
| items | <code>let</code> | No | <code>AutoCompleteItem[]</code> | <code>[]</code> | Set the dropdown items |
|
||||
| itemToString | <code>let</code> | No | <code>(item: AutoCompleteItem) => string</code> | <code>(item) => item.text || item.id</code> | Override the display of a dropdown item |
|
||||
| type | <code>let</code> | No | <code>"default" | "inline"</code> | <code>"default"</code> | Specify the type of dropdown |
|
||||
| direction | <code>let</code> | No | <code>"bottom" | "top"</code> | <code>"bottom"</code> | Specify the direction of the dropdown menu |
|
||||
| size | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>undefined</code> | Specify the size of the dropdown field |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown |
|
||||
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
|
||||
| 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 |
|
||||
| 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 list box |
|
||||
| placeholder | <code>let</code> | No | -- | <code>null</code> | Specify the placeholder text |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :--------------- | :------- | :---------------------------------------------- | ----------------------------------------------------- | --------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
|
||||
| inline | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
|
||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
|
||||
| selectedItem | <code>let</code> | Yes | <code>AutoCompleteItem</code> | <code>undefined</code> | Specify the selected item |
|
||||
| selectedId | <code>let</code> | Yes | <code>AutoCompleteItemId</code> | <code>undefined</code> | Specify the selected item id |
|
||||
| filteredItems | <code>let</code> | Yes | <code>[]</code> | <code>[]</code> | -- |
|
||||
| items | <code>let</code> | No | <code>AutoCompleteItem[]</code> | <code>[]</code> | Set the dropdown items |
|
||||
| itemToString | <code>let</code> | No | <code>(item: AutoCompleteItem) => string</code> | <code>(item) => item.text || item.id</code> | Override the display of a dropdown item |
|
||||
| type | <code>let</code> | No | <code>"default" | "inline"</code> | <code>"default"</code> | Specify the type of dropdown |
|
||||
| direction | <code>let</code> | No | <code>"bottom" | "top"</code> | <code>"bottom"</code> | Specify the direction of the dropdown menu |
|
||||
| size | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>undefined</code> | Specify the size of the dropdown field |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown |
|
||||
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
|
||||
| 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 |
|
||||
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||
| translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</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> | <code>undefined</code> | Specify a name attribute for the list box |
|
||||
| placeholder | <code>let</code> | No | -- | <code>null</code> | Specify the placeholder text |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
|
|||
|
|
@ -246,6 +246,16 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "filteredItems",
|
||||
"kind": "let",
|
||||
"type": "[]",
|
||||
"value": "[]",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "itemToString",
|
||||
"kind": "let",
|
||||
|
|
@ -364,16 +374,6 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "translateWithId",
|
||||
"kind": "let",
|
||||
"description": "Override the default translation ids",
|
||||
"type": "(id: any) => string",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "invalid",
|
||||
"kind": "let",
|
||||
|
|
@ -440,6 +440,16 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "translateWithId",
|
||||
"kind": "let",
|
||||
"description": "Override the default translation ids",
|
||||
"type": "(id: any) => string",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "id",
|
||||
"kind": "let",
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
<script>
|
||||
import { Button, truncate, breakpoints } from "carbon-components-svelte";
|
||||
import { Airplane } from "carbon-pictograms-svelte";
|
||||
|
||||
import { AutoComplete } from "carbon-components-svelte";
|
||||
|
||||
let selectedId = 0;
|
||||
let selectedItem = undefined;
|
||||
let selectedItem = undefined;
|
||||
</script>
|
||||
|
||||
<Button>Primary button</Button>
|
||||
|
|
@ -17,16 +16,16 @@
|
|||
{JSON.stringify(breakpoints)}
|
||||
|
||||
<AutoComplete
|
||||
titleText="Contact"
|
||||
bind:selectedId
|
||||
bind:selectedItem
|
||||
placeholder="Placeholder"
|
||||
items="{[
|
||||
{ id: '0', text: 'Slack' },
|
||||
{ id: '11', text: 'Email1' },
|
||||
{ id: '12', text: 'Email2' },
|
||||
{ id: '2', text: 'Fax' },
|
||||
]}"
|
||||
titleText="Contact"
|
||||
bind:selectedId
|
||||
bind:selectedItem
|
||||
placeholder="Placeholder"
|
||||
items="{[
|
||||
{ id: '0', text: 'Slack' },
|
||||
{ id: '11', text: 'Email1' },
|
||||
{ id: '12', text: 'Email2' },
|
||||
{ id: '2', text: 'Fax' },
|
||||
]}"
|
||||
/>
|
||||
|
||||
Selected: {selectedItem?.text} ({selectedId})
|
||||
|
|
|
|||
12
types/AutoComplete/AutoComplete.svelte.d.ts
vendored
12
types/AutoComplete/AutoComplete.svelte.d.ts
vendored
|
|
@ -35,6 +35,12 @@ export interface AutoCompleteProps
|
|||
*/
|
||||
selectedId?: AutoCompleteItemId;
|
||||
|
||||
/**
|
||||
* Specify the selected item
|
||||
* @default undefined
|
||||
*/
|
||||
selectedItem?: AutoCompleteItem;
|
||||
|
||||
/**
|
||||
* Specify the type of dropdown
|
||||
* @default "default"
|
||||
|
|
@ -119,6 +125,12 @@ export interface AutoCompleteProps
|
|||
*/
|
||||
hideLabel?: boolean;
|
||||
|
||||
/**
|
||||
* Override the default translation ids
|
||||
* @default undefined
|
||||
*/
|
||||
translateWithId?: (id: any) => string;
|
||||
|
||||
/**
|
||||
* Set an id for the list box component
|
||||
* @default "ccs-" + Math.random().toString(36)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue