From 451de06dd0d22adc862ea2573afc9f3d8a0601b6 Mon Sep 17 00:00:00 2001 From: davideraccagni Date: Wed, 20 Apr 2022 23:47:29 +0200 Subject: [PATCH] supersead PR #1260 --- COMPONENT_INDEX.md | 52 +++++++++++---------- docs/src/COMPONENT_API.json | 30 ++++++++---- examples/sveltekit/src/routes/index.svelte | 23 +++++---- types/AutoComplete/AutoComplete.svelte.d.ts | 12 +++++ 4 files changed, 70 insertions(+), 47 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index e93a52c6..ccf5b2db 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -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 | let | Yes | null | HTMLInputElement | null | Obtain a reference to the button HTML element | -| inline | let | Yes | boolean | false | Set to `true` to use the inline variant | -| open | let | Yes | boolean | false | Set to `true` to open the dropdown | -| selectedId | let | Yes | AutoCompleteItemId | undefined | Specify the selected item id | -| filteredItems | let | Yes | [] | [] | -- | -| items | let | No | AutoCompleteItem[] | [] | Set the dropdown items | -| itemToString | let | No | (item: AutoCompleteItem) => string | (item) => item.text || item.id | Override the display of a dropdown item | -| type | let | No | "default" | "inline" | "default" | Specify the type of dropdown | -| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the dropdown menu | -| size | let | No | "sm" | "lg" | "xl" | undefined | Specify the size of the dropdown field | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the dropdown | -| titleText | let | No | string | "" | Specify the title text | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | let | No | string | "" | Specify the invalid state text | -| warn | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | let | No | string | "" | Specify the warning state text | -| helperText | let | No | string | "" | Specify the helper text | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | -| name | let | No | string | undefined | Specify a name attribute for the list box | -| placeholder | let | No | -- | null | Specify the placeholder text | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :---------------------------------------------- | ----------------------------------------------------- | --------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the button HTML element | +| inline | let | Yes | boolean | false | Set to `true` to use the inline variant | +| open | let | Yes | boolean | false | Set to `true` to open the dropdown | +| selectedItem | let | Yes | AutoCompleteItem | undefined | Specify the selected item | +| selectedId | let | Yes | AutoCompleteItemId | undefined | Specify the selected item id | +| filteredItems | let | Yes | [] | [] | -- | +| items | let | No | AutoCompleteItem[] | [] | Set the dropdown items | +| itemToString | let | No | (item: AutoCompleteItem) => string | (item) => item.text || item.id | Override the display of a dropdown item | +| type | let | No | "default" | "inline" | "default" | Specify the type of dropdown | +| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the dropdown menu | +| size | let | No | "sm" | "lg" | "xl" | undefined | Specify the size of the dropdown field | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | let | No | boolean | false | Set to `true` to disable the dropdown | +| titleText | let | No | string | "" | Specify the title text | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | let | No | string | "" | Specify the invalid state text | +| warn | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | let | No | string | "" | Specify the warning state text | +| helperText | let | No | string | "" | Specify the helper text | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | +| translateWithId | let | No | (id: any) => string | undefined | Override the default translation ids | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | +| name | let | No | string | undefined | Specify a name attribute for the list box | +| placeholder | let | No | -- | null | Specify the placeholder text | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 703d982f..d45d101b 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -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", diff --git a/examples/sveltekit/src/routes/index.svelte b/examples/sveltekit/src/routes/index.svelte index 73b5af81..7d4899b3 100644 --- a/examples/sveltekit/src/routes/index.svelte +++ b/examples/sveltekit/src/routes/index.svelte @@ -1,11 +1,10 @@ @@ -17,16 +16,16 @@ {JSON.stringify(breakpoints)} Selected: {selectedItem?.text} ({selectedId}) diff --git a/types/AutoComplete/AutoComplete.svelte.d.ts b/types/AutoComplete/AutoComplete.svelte.d.ts index 2511e8ee..d22df35d 100644 --- a/types/AutoComplete/AutoComplete.svelte.d.ts +++ b/types/AutoComplete/AutoComplete.svelte.d.ts @@ -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)