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

feat(multi-select): export multiSelectRef, fieldRef, selectionRef

Browse source
This commit is contained in:
Eric Y Liu 2021-07-09 11:46:54 -07:00
commit aa5200cff5
5 changed files with 69 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

5
COMPONENT_INDEX.md
View file

@ -1471,7 +1471,7 @@ None.
| message | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a form requirement |
| messageText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the message text |
| legendText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
| legendId | <code>let</code> | No | <code>string</code> | <code>''</code> | Specify an id for the legend element |
| legendId | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify an id for the legend element |
### Slots
@ -2398,6 +2398,9 @@ export interface MultiSelectItem {
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| selectionRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the selection element |
| fieldRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the field box element |
| multiSelectRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the outer div element |
| inputRef | <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 dropdown |
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the multiselect value |

32
docs/src/COMPONENT_API.json
View file

@ -3737,7 +3737,7 @@
"kind": "let",
"description": "Specify an id for the legend element",
"type": "string",
"value": "''",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
@ -6078,6 +6078,36 @@
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "multiSelectRef",
"kind": "let",
"description": "Obtain a reference to the outer div element",
"type": "null | HTMLDivElement",
"value": "null",
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "fieldRef",
"kind": "let",
"description": "Obtain a reference to the field box element",
"type": "null | HTMLDivElement",
"value": "null",
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "selectionRef",
"kind": "let",
"description": "Obtain a reference to the selection element",
"type": "null | HTMLDivElement",
"value": "null",
"isFunction": false,
"constant": false,
"reactive": true
}
],
"slots": [],

19
src/MultiSelect/MultiSelect.svelte
View file

@ -128,6 +128,21 @@
/** Obtain a reference to the input HTML element */
export let inputRef = null;
/** Obtain a reference to the outer div element */
export let multiSelectRef = null;
/**
* Obtain a reference to the field box element
* @type {null | HTMLDivElement}
*/
export let fieldRef = null;
/**
* Obtain a reference to the selection element
* @type {null | HTMLDivElement}
*/
export let selectionRef = null;
import { afterUpdate, createEventDispatcher, setContext } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
@ -143,10 +158,6 @@
const dispatch = createEventDispatcher();
let multiSelectRef = null;
let fieldRef = null;
let selectionRef = null;
let inputValue = "";
let initialSorted = false;
let highlightedIndex = -1;

2
types/FormGroup/FormGroup.d.ts vendored
View file

@ -35,7 +35,7 @@ export interface FormGroupProps
/**
* Specify an id for the legend element
* @default ''
* @default ""
*/
legendId?: string;
}

18
types/MultiSelect/MultiSelect.d.ts vendored
View file

@ -180,6 +180,24 @@ export interface MultiSelectProps
* @default null
*/
inputRef?: null | HTMLInputElement;
/**
* Obtain a reference to the outer div element
* @default null
*/
multiSelectRef?: null | HTMLDivElement;
/**
* Obtain a reference to the field box element
* @default null
*/
fieldRef?: null | HTMLDivElement;
/**
* Obtain a reference to the selection element
* @default null
*/
selectionRef?: null | HTMLDivElement;
}
export default class MultiSelect extends SvelteComponentTyped<