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 '@/index';

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 v-model="selecionado" :options="opcoes" options-label="name"/>
		<div class="form-text">
			Valor selecionado: {{ selecionado }}
		</div>
	</div>
</template>

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

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 v-model="selecionado" :options="opcoes" options-label="name"/>
		<div class="form-text">
			Valor selecionado: {{ selecionado }}
		</div>
	</div>
</template>

Variações

Variação	Descrição
MultiSelect	Permite o usuário pesquisar e selecionar uma opção ou mais em uma lista.
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
Select	Este componente permite que o usuário selecione uma opção dentre uma lista de valores disponíveis. Uma diferença significativa desse componente em relação aos demais é que sua aparência pode variar de acordo com o navegador e dispositivo utilizado.

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: [ { "name": "Vue.js", "uid": "vu", "ativo": false }, { "name": "Javascript", "uid": "js", "ativo": true }, { "name": "React", "uid": "re", "ativo": true }, { "name": "Angular", "uid": "an", "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 '@/index';

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

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

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>

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

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

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

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 ​