ComboBox

Visão geral

Permite o usuário pesquisar e selecionar uma opção em uma lista. Ele também permite o usuário criar uma nova opção, quando não encontra pelo termo pesquisado

Valor selecionado:

Clique para exibir o código

vue

<script setup>
import { ref } from 'vue';
import { LxComboBox } from '@lde/lxcomponents';

const selecionado = ref();
const opcoes = ref([
	{ name: 'Vue.js', code: 'vu' },
	{ name: 'Javascript', code: 'js' },
	{ name: 'Open Source', code: 'os' }
]);
</script>

<template>
	<div class="mb-3">
		<LxComboBox id="lx-combo-box-example" v-model="selecionado" :options="opcoes" options-label="name" />
		<div class="form-text">Valor selecionado: {{ selecionado }}</div>
	</div>
</template>

Variações

Variação	Descrição
ComboBox	Permite o usuário pesquisar e selecionar uma opção em uma lista. Ele também permite o usuário criar uma nova opção
ComboBoxMega	Variação ampliada do ComboBox, com imagem/ícone, título e texto para cada opção
MultiSelect	Permite o usuário pesquisar e selecionar uma opção ou mais em uma lista
MultiSelectMega	Variação ampliada do MultiSelect, com imagem/ícone, título e texto para cada opção

Propriedades

Nome	Descrição	Tipo	Padrão
id	`⚠️ obr` Define o identificado único(id) que o input irá receber	`String`	-
disabled	Define se o campo está desabilitado	`Boolean`	`false`
label	Define a label do input	`String`	-
placeholder	Define o placeholder (texto quando não se há nenhuma opção selecionada) do input	`String`	`"Selecione"`
error-text	Mensagem de erro quando o campo é inválido	`String`	-
help-text	Define uma mensagem abaixo do campo para fornecer uma ajuda adicional	`String`	-
options*	`⚠️ obr` Define quais serão as opções disponíveis para seleção. Quando for objetos, defina também as propriedades `track-by` e `options-label`	`Array`	-
options-key	Define qual a chave unica em uma lista de objetos	`String`	-
options-label	Define qual a propriedade do Objeto que será exibido no combo. Também pode ser passada uma `Function` em casos de label customizado (ex: :customLabel="({ id, descricao }) => ``${id} - ${descricao}`)	`String` `Function`	-
create-new	Define um texto e habilita a opção de adicionar um novo caso não encontre o resultado.	`String`	-

Eventos

Nome	Atributos	Listener	Descrição
add	`(searchQuery)`	`@add`	Emitido quando clica em "Criar novo registro"

Playground

Combo exemplo

options: [ { "uid": "vu", "name": "Vue.js", "ativo": false }, { "uid": "js", "name": "Javascript", "ativo": true }, { "uid": "re", "name": "React", "ativo": true }, { "uid": "an", "name": "Angular", "ativo": false } ]

modelValue:

Nome	Controle
disabled
label
error-text
help-text
placeholder
create-new

Clique para exibir o código

vue

<script setup>
import { ref } from 'vue';
import { LxComboBox } from '@lde/lxcomponents';

const defaultOptions = ref([
	{ uid: 'vu', name: 'Vue.js', ativo: false },
	{ uid: 'js', name: 'Javascript', ativo: true },
	{ uid: 're', name: 'React', ativo: true },
	{ uid: 'an', name: 'Angular', ativo: false }
]);

const selecionado = ref();
const disabled = ref(false);
const errorText = ref('');
const helpText = ref('');
const createNew = ref('');
const placeholder = ref('Selecione');
const label = ref('Combo exemplo');

const optObj = ref(defaultOptions.value);

const criarNovo = (newValue) => {
	alert(newValue);
};
</script>

<template>
	<div class="row">
		<LxComboBox
			v-model="selecionado"
			:label="label"
			:options="optObj"
			:error-text="errorText"
			:help-text="helpText"
			:placeholder="placeholder"
			:disabled="disabled"
			:create-new="createNew"
			options-key="uid"
			:options-label="({ uid, name }) => `${uid} - ${name}`"
			@add="criarNovo"
		/>
	</div>

	<div class="row">
		<div class="col-12">
			<strong>options: </strong>
			<small>{{ optObj }}</small>
		</div>
	</div>

	<div class="row">
		<div class="col-12">
			<strong>modelValue: </strong>
			<small>{{ selecionado }}</small>
		</div>
	</div>

	<!-- playground controls -->
	<table style="max-height: 50vh">
		<thead>
			<tr>
				<th style="width: 140px">Nome</th>
				<th class="">Controle</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					<label class="form-label m-0"> disabled </label>
				</td>
				<td>
					<input v-model="disabled" class="form-check-input" type="checkbox" />
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">label</label>
				</td>
				<td>
					<input v-model="label" type="text" class="form-control" />
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">error-text</label>
				</td>
				<td>
					<input v-model="errorText" type="text" class="form-control" />
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">help-text</label>
				</td>
				<td>
					<input v-model="helpText" type="text" class="form-control" />
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">placeholder</label>
				</td>
				<td>
					<input v-model="placeholder" type="text" class="form-control" />
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">create-new</label>
				</td>
				<td>
					<input v-model="createNew" type="text" class="form-control" />
				</td>
			</tr>
		</tbody>
	</table>
</template>

ComboBox ​

Visão geral ​

Variações ​

Propriedades ​

Eventos ​