ComboBox Mega

Visão geral

O ComboBox Mega é uma variação do ComboBox que já vem configurado para exibir uma lista ampliada com a possibilidade de inserir título, texto, imagem ou ícone. Ele é ideal para cenários onde a ação é uma das principais da página e requer uma apresentação mais detalhada das opções.

Selecione ou digite

Valor selecionado:

Clique para exibir o código

vue

<script setup>
import { ref } from 'vue';
import { LxComboBoxMega } 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">
		<LxComboBoxMega id="lx-combo-box-mega-options-example" v-model="selecionadoMegaOptions" :options="opcoesMegaOptions" open-direction="bottom" />
		<div class="form-text">Valor selecionado: {{ selecionadoMegaOptions }}</div>
	</div>
</template>

Propriedades

Nome	Descrição	Tipo	Padrão
id	`⚠️ obrigatório` Define o identificador único do input.	`String`	-
modelValue	`⚠️ obrigatório` Define o valor do campo, utilizado para vinculação bidirecional. Nota: Utilizar a implementação padrão com o `v-model`.	`Object \| null`	-
options	`⚠️ obrigatório` Define as opções disponíveis para seleção no formato detalhado abaixo.	`Array`	-
disabled	Define se o campo está desabilitado.	`Boolean`	`false`
label	Define a label do input.	`String`	-
placeholder	Define o placeholder (texto exibido quando nenhuma opção está selecionada).	`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`	-

Formato das opções

As opções enviadas para o ComboBox Mega devem seguir o seguinte padrão:

javascript

[
  {
    uid: 1, // Identificador único (obrigatório)
    title: 'Título', // Título da opção (obrigatório)
    text: 'Texto principal', // Texto principal da opção (obrigatório)
    insideText: 'Texto adicional', // Texto que aparecerá dentro da lista (opcional)
    src: 'URL da imagem', // URL absoluta de uma imagem (opcional)
    icon: 'fas fa-icone' // Classe do ícone (opcional)
  }
]

Eventos

Nome	Descrição
update:modelValue	Emite o valor selecionado no formato do objeto da opção.

Playground

Selecione uma opção

Opções: [ { "uid": "vu", "title": "Vue.js", "text": "Framework JavaScript progressivo", "icon": "fab fa-vuejs" }, { "uid": "js", "title": "Javascript", "text": "Linguagem de programação", "icon": "fab fa-js" }, { "uid": "re", "title": "React", "text": "Biblioteca JavaScript para interfaces", "icon": "fab fa-react" }, { "uid": "an", "title": "Angular", "text": "Framework para aplicações web", "icon": "fab fa-angular" } ]

Valor Selecionado:

Nome	Controle
Desabilitado
Label
Texto de Erro
Texto de Ajuda
Placeholder

Clique para exibir o código

vue

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

const megaOptionsList = ref([
	{ uid: 'vu', title: 'Vue.js', text: 'Framework JavaScript progressivo', icon: 'fab fa-vuejs' },
	{ uid: 'js', title: 'Javascript', text: 'Linguagem de programação', icon: 'fab fa-js' },
	{ uid: 're', title: 'React', text: 'Biblioteca JavaScript para interfaces', icon: 'fab fa-react' },
	{ uid: 'an', title: 'Angular', text: 'Framework para aplicações web', icon: 'fab fa-angular' }
]);

const selecionado = ref(null);
const disabled = ref(false);
const errorText = ref('');
const helpText = ref('');
const placeholder = ref('Selecione uma opção');
const label = ref('');
</script>

<template>
	<div class="row">
		<LxComboBoxMega
			v-model="selecionado"
			:label="label"
			:options="megaOptionsList"
			:error-text="errorText"
			:help-text="helpText"
			:placeholder="placeholder"
			:disabled="disabled"
		/>
	</div>

	<div class="row">
		<div class="col-12">
			<strong class="small">Opções: </strong>
			<small>{{ megaOptionsList }}</small>
		</div>
	</div>

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

	<!-- playground controls -->
	<table style="max-height: 50vh">
		<thead>
			<tr>
				<th style="width: 140px">Nome</th>
				<th>Controle</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					<label class="form-label m-0">Desabilitado</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">Texto de Erro</label>
				</td>
				<td>
					<input v-model="errorText" type="text" class="form-control" />
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">Texto de Ajuda</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>
		</tbody>
	</table>
</template>

ComboBox Mega ​

Visão geral ​

Propriedades ​

Formato das opções ​

Eventos ​