mirror of
https://github.com/optim-enterprises-bv/vault.git
synced 2025-11-01 11:08:10 +00:00
e61bd967e3
* move script to scripts folder * add docfy to router and scripts * add docfy to router and scripts * fix jsdoc syntax * add component markdown files to gitignore * improve error handling for scripts * tidy up remaining jsdoc syntax * add sample jsdoc components * add known issue info * make not using multi-line components clearer * make generating docs clearer * update copy * final how to docfy cleanup * fix ts file @module syntax * fix read more syntax * make docfy typescript compatible
56 lines
1.9 KiB
JavaScript
56 lines
1.9 KiB
JavaScript
/**
|
|
* Copyright (c) HashiCorp, Inc.
|
|
* SPDX-License-Identifier: BUSL-1.1
|
|
*/
|
|
|
|
import Component from '@glimmer/component';
|
|
import { action } from '@ember/object';
|
|
|
|
/**
|
|
* @module AutocompleteInput
|
|
* AutocompleteInput components are used as standard string inputs or optionally select options to append to input value
|
|
*
|
|
* @example
|
|
* <AutocompleteInput @label="Label here" @subText="subtext here" @value="foo" @onChange={{log "on change called"}} />
|
|
*
|
|
* @param {string} value - input value
|
|
* @param {function} onChange - fires when input value changes to mutate value param by caller
|
|
* @param {string} [optionsTrigger] - display options dropdown when trigger character is input
|
|
* @param {array} [options] - array of `{ label, value }` objects where label is displayed in options dropdown and value is appended to input value
|
|
* @param {string} [label] - label to display above input
|
|
* @param {string} [subText] - text to display below label
|
|
* @param {string} [placeholder] - input placeholder
|
|
*/
|
|
|
|
export default class AutocompleteInputComponent extends Component {
|
|
dropdownAPI;
|
|
inputElement;
|
|
|
|
@action
|
|
setElement(element) {
|
|
this.inputElement = element.querySelector('.input');
|
|
}
|
|
@action
|
|
setDropdownAPI(dropdownAPI) {
|
|
this.dropdownAPI = dropdownAPI;
|
|
}
|
|
@action
|
|
onInput(event) {
|
|
const { options = [], optionsTrigger } = this.args;
|
|
if (optionsTrigger && options.length) {
|
|
const method = event.data === optionsTrigger ? 'open' : 'close';
|
|
this.dropdownAPI.actions[method]();
|
|
}
|
|
this.args.onChange(event.target.value);
|
|
}
|
|
@action
|
|
selectOption(value) {
|
|
// if trigger character is at start of value it needs to be trimmed
|
|
const appendValue = value.startsWith(this.args.optionsTrigger) ? value.slice(1) : value;
|
|
const newValue = this.args.value + appendValue;
|
|
this.args.onChange(newValue);
|
|
this.dropdownAPI.actions.close();
|
|
this.inputElement.focus();
|
|
}
|
|
}
|