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>

megaOptions

Com essa propriedade ativa, o ComboBox passa a exibir uma lista ampliada com a possibilidade de inserir título, texto, imagem ou ícone. Sendo assim, seu options precisa ser enviado no padrão [{ uid: 1, title: 'Título', text: 'Texto principal', insideText: 'Texto que aparecerá dentro da lista (mas não no trigger)', src: 'URL absoluta de uma imagem (preferencialmente na CDN)', icon: 'fas fa-qq-coisa' }], sendo os únicos obrigatórios uid, title e text.

Ideal para utilizar fora de formulários e preferencialmente quando sua ação é uma das principais da página.

Selecione

Valor selecionado:

Clique para exibir o código

vue

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

const selecionadoMegaOptions = ref();

const opcoesMegaOptions = ref([
	{
		uid: 1,
		title: 'Opção 1',
		text: 'Descrição principal do item fica aqui e caso não caiba vai ser cortada',
		src: 'https://cdn.prod.website-files.com/6365d860c7b7a7191055eb8a/66404ae94581179b14b183c4_3Portals.svg',
		insideText: 'Texto interno opcional 1'
	},
	{
		uid: 2,
		title: 'Opção 2',
		text: 'Descrição principal do item fica aqui e caso não caiba vai ser cortada',
		icon: 'far fa-grimace'
	},
	{
		uid: 3,
		title: 'Opção 3',
		text: 'Descrição principal do item fica aqui e caso não caiba vai ser cortada',
		src: 'https://cdn.prod.website-files.com/6365d860c7b7a7191055eb8a/66404ae94fe39eba6eb7485b_AlphaWave.svg',
		insideText: 'Texto interno opcional 3'
	},
	{
		uid: 4,
		title: 'Opção 4',
		text: 'Descrição principal do item fica aqui e caso não caiba vai ser cortada',
		src: 'https://cdn.prod.website-files.com/6365d860c7b7a7191055eb8a/66404ae94581179b14b18455_Alt%252BShift.svg',
		insideText: 'Texto interno opcional 4'
	},
	{
		uid: 5,
		title: 'Opção 5',
		text: 'Descrição principal do item fica aqui e caso não caiba vai ser cortada',
		src: 'https://cdn.prod.website-files.com/6365d860c7b7a7191055eb8a/66404aeae06b23b2ce0bef2f_Boltshift.svg'
	},
	{
		uid: 6,
		title: 'Opção 6',
		text: 'Descrição principal do item fica aqui e caso não caiba vai ser cortada',
		src: 'https://cdn.prod.website-files.com/6365d860c7b7a7191055eb8a/66405e7fc8496d0b6dee227c_BuildingBlocks.svg',
		insideText: 'Texto interno opcional 5'
	}
]);
</script>

<template>
	<div class="mb-3">
		<LxComboBox id="lx-combo-box-mega-options-example" v-model="selecionadoMegaOptions" :options="opcoesMegaOptions" open-direction="bottom" megaOptions />
		<div class="form-text">Valor selecionado: {{ selecionadoMegaOptions }}</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

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`	-
mega-options	Habilita a opção detalhada acima.	`Boolean`	false

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
megaOptions
label
error-text
help-text
placeholder
create-new

Clique para exibir o código

vue

<script setup>
import { ref, watch } 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 megaOptionsList = ref([
	{ uid: 'vu', title: 'Vue.js', text: 'vu', icon: 'fab fa-vuejs' },
	{ uid: 'js', title: 'Javascript', text: 'js', icon: 'fab fa-js' },
	{ uid: 're', title: 'React', text: 're', icon: 'fab fa-react' },
	{ uid: 'an', title: 'Angular', text: 'an', icon: 'fab fa-angular' }
]);

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 megaOptions = ref(false);

const optObj = ref(defaultOptions.value);

const criarNovo = (newValue) => {
	alert(newValue);
};

watch(megaOptions, (newValue) => {
	const currentOption = selecionado.value;
	selecionado.value = null; // Reset selected option
	optObj.value = newValue ? megaOptionsList.value : defaultOptions.value;

	// Find and set the equivalent selected option in the new list
	if (currentOption) {
		const equivalentOption = optObj.value.find((opt) => opt.uid === currentOption.uid);
		selecionado.value = equivalentOption || null;
	}
});
</script>

<template>
	<div class="row">
		<LxComboBox
			:key="'lx-combo-box-' + megaOptions"
			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}`"
			:megaOptions="megaOptions"
			@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"> megaOptions </label>
				</td>
				<td>
					<input v-model="megaOptions" class="form-check-input" type="checkbox" />
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">label</label>
				</td>
				<td>
					<input v-model="label" :disabled="megaOptions" 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 ​

megaOptions ​

Variações ​

Propriedades ​

Eventos ​

Playground ​

ComboBox

Visão geral

megaOptions

Variações

Propriedades

Eventos

Playground