828185db49
* add SelectDropdown * use SelectDropdown instead of HttpRequestsDropdown * use html selector instead of class name * ensure SelectDropdown still works when rendered inside a Toolbar * add tests * remove old HttpRequests component * make SelectDropdown example easier to read in Storybook * add isFullwidth prop * add SelectDropbown inside a Toolbar story * fix tests * remove actions block and call this.onChange directly * replace dropdownLabel with label * rename SelectDropdown to SelecT * add test for onChange * remove selectedItem prop since we don't need it * make Select accept options as an array of strings or objects * Revert "remove selectedItem prop since we don't need it" This reverts commit 7278516de87bb1df60482edb005137252819931e. * use Select inside TtlPicker * remove debugger * use a test selector * fix pki test selectors * improve storybook docs * fix selected value in ttl picker * ensure httprequests dropdown updates the selected item * ensure select dropdown correctly matches selectedItem * rename selectedItem to selectedValue * remove debugger lol * update selectedItem test * add valueAttribute and labelAttribute to Storybook knobs * udpate jsdocs * remove old httprequestsdropdown component * add note that onChange will receive value of select * use Select inside AuthForm * use correct test selector
35 lines
1.6 KiB
JavaScript
35 lines
1.6 KiB
JavaScript
import Component from '@ember/component';
|
|
|
|
/**
|
|
* @module Select
|
|
* Select components are used to render a dropdown.
|
|
*
|
|
* @example
|
|
* ```js
|
|
* <Select @label='Date Range' @options={{[{ value: 'berry', label: 'Berry' }]}} @onChange={{onChange}}/>
|
|
* ```
|
|
*
|
|
* @param label=null {String} - The label for the select element.
|
|
* @param options=null {Array} - A list of items that the user will select from. This can be an array of strings or objects.
|
|
* @param [selectedValue=null] {String} - The currently selected item. Can also be used to set the default selected item. This should correspond to the `value` of one of the `<option>`s.
|
|
* @param [name=null] {String} - The name of the select, used for the test selector.
|
|
* @param [valueAttribute=value] {String} - When `options` is an array objects, the key to check for when assigning the option elements value.
|
|
* @param [labelAttribute=label] {String} - When `options` is an array objects, the key to check for when assigning the option elements' inner text.
|
|
* @param [isInline=false] {Bool} - Whether or not the select should be displayed as inline-block or block.
|
|
* @param [isFullwidth=false] {Bool} - Whether or not the select should take up the full width of the parent element.
|
|
* @param onChange=null {Func} - The action to take once the user has selected an item. This method will be passed the `value` of the select.
|
|
*/
|
|
|
|
export default Component.extend({
|
|
classNames: ['field'],
|
|
label: null,
|
|
selectedValue: null,
|
|
name: null,
|
|
options: null,
|
|
valueAttribute: 'value',
|
|
labelAttribute: 'label',
|
|
isInline: false,
|
|
isFullwidth: false,
|
|
onChange() {},
|
|
});
|