MultiSelect Mega

Visão geral

O MultiSelect Mega é uma variação do MultiSelect 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.

Exemplo MultiSelect Mega

Selecione uma ou mais opções

Selecionados: []

Clique para exibir o código

vue

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

const options = ref([
	{ uid: '1', title: 'Opção 1', text: 'Descrição da opção 1' },
	{ uid: '2', title: 'Opção 2', text: 'Descrição da opção 2' },
	{ uid: '3', title: 'Opção 3', text: 'Descrição da opção 3' },
	{ uid: '4', title: 'Opção 4', text: 'Descrição da opção 4' }
]);

const selectedOptions = ref([]);
</script>

<template>
	<LxMultiSelectMega id="example-multiselect-mega" v-model="selectedOptions" :options="options" label="Exemplo MultiSelect Mega" placeholder="Selecione uma ou mais opções" />
	<div class="mt-3">
		<strong class="small">Selecionados: </strong>
		<small>{{ selectedOptions }}</small>
	</div>
</template>

Propriedades

Nome	Descrição	Tipo	Padrão
id	`⚠️ obrigatório` Define o identificador único do input.
modelValue	`⚠️ obrigatório` Define o valor do campo, utilizado para vinculação bidirecional. Nota: Utilizar a implementação padrão com o `v-model`.	`Array \| null`	-
`String`	-
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`	-
custom-label-multiple	Define qual será a label para substituir o padrão `x itens selecionados`	`String`	`itens selecionados`

Formato das opções

As opções enviadas para o MultiSelect 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 de uma lista de objetos das opções selecionadas.

Playground

Opções sem agrupamento:[ { "uid": "vu", "title": "Vue.js", "text": "vu", "icon": "fab fa-vuejs" }, { "uid": "js", "title": "Javascript", "text": "js", "icon": "fab fa-js" }, { "uid": "css", "title": "CSS", "text": "css", "icon": "fab fa-css3-alt" }, { "uid": "ht", "title": "HTML", "text": "ht", "icon": "fab fa-html5" }, { "uid": "net", "title": ".NET", "text": "net", "icon": "fab fa-dot-net" }, { "uid": "java", "title": "Java", "text": "java", "icon": "fab fa-java" } ]

Selecione uma ou mais opções

Texto de ajuda para o campo

Selecionados:[]

Opções agrupadas:[ { "Tipo": "Front-end", "Tecs": [ { "uid": "vu", "title": "Vue.js", "text": "vu", "icon": "fab fa-vuejs" }, { "uid": "js", "title": "Javascript", "text": "js", "icon": "fab fa-js" }, { "uid": "css", "title": "CSS", "text": "css", "icon": "fab fa-css3-alt" }, { "uid": "ht", "title": "HTML", "text": "ht", "icon": "fab fa-html5" } ] }, { "Tipo": "Back-end", "Tecs": [ { "uid": "net", "title": ".NET", "text": "net", "icon": "fab fa-dot-net" }, { "uid": "java", "title": "Java", "text": "java", "icon": "fab fa-java" } ] } ]

Selecione uma ou mais opções

Texto de ajuda para o campo

Selecionados:[]

Propriedade	Controle
Label:
Placeholder:
Texto de Erro:
Texto de Ajuda:
Desabilitado:	Ativar

Clique para exibir o código

vue

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

const stackFrontendMegaOptions = [
	{ uid: 'vu', title: 'Vue.js', text: 'vu', icon: 'fab fa-vuejs' },
	{ uid: 'js', title: 'Javascript', text: 'js', icon: 'fab fa-js' },
	{ uid: 'css', title: 'CSS', text: 'css', icon: 'fab fa-css3-alt' },
	{ uid: 'ht', title: 'HTML', text: 'ht', icon: 'fab fa-html5' }
];
const stackBackendMegaOptions = [
	{ uid: 'net', title: '.NET', text: 'net', icon: 'fab fa-dot-net' },
	{ uid: 'java', title: 'Java', text: 'java', icon: 'fab fa-java' }
];

const options = ref([...stackFrontendMegaOptions, ...stackBackendMegaOptions]);
const optionsGroup = ref([
	{
		Tipo: 'Front-end',
		Tecs: [...stackFrontendMegaOptions]
	},
	{
		Tipo: 'Back-end',
		Tecs: [...stackBackendMegaOptions]
	}
]);

const selectedOptions = ref([]);
const selectedOptionsFromGroup = ref([]);
const label = ref('');
const placeholder = ref('Selecione uma ou mais opções');
const disabled = ref(false);
const errorText = ref('');
const helpText = ref('Texto de ajuda para o campo');
</script>

<template>
	<div class="d-flex flex-column gap-4">
		<div>
			<strong class="small">Opções sem agrupamento:</strong>
			<small>{{ options }}</small>
		</div>
		<LxMultiSelectMega
			id="playground-multiselect-mega"
			v-model="selectedOptions"
			:options="options"
			:label="label"
			:placeholder="placeholder"
			:disabled="disabled"
			:error-text="errorText"
			:help-text="helpText"
		/>

		<div class="mt-1">
			<strong class="small">Selecionados:</strong>
			<small>{{ selectedOptions }}</small>
		</div>

		<hr />
		<div class="mt-1">
			<strong class="small">Opções agrupadas:</strong>
			<small>{{ optionsGroup }}</small>
		</div>

		<LxMultiSelectMega
			id="playground-multiselect-mega"
			v-model="selectedOptionsFromGroup"
			:options="optionsGroup"
			:label="label"
			:placeholder="placeholder"
			:disabled="disabled"
			:error-text="errorText"
			:help-text="helpText"
			group-label="Tipo"
			group-values="Tecs"
		/>

		<div class="mt-1">
			<strong class="small">Selecionados:</strong>
			<small>{{ selectedOptionsFromGroup }}</small>
		</div>

		<table style="max-height: 50vh">
			<thead>
				<tr>
					<th scope="col">Propriedade</th>
					<th scope="col">Controle</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><label for="label" class="form-label">Label:</label></td>
					<td><input id="label" v-model="label" type="text" class="form-control" /></td>
				</tr>
				<tr>
					<td><label for="placeholder" class="form-label">Placeholder:</label></td>
					<td><input id="placeholder" v-model="placeholder" type="text" class="form-control" /></td>
				</tr>
				<tr>
					<td><label for="errorText" class="form-label">Texto de Erro:</label></td>
					<td><input id="errorText" v-model="errorText" type="text" class="form-control" /></td>
				</tr>
				<tr>
					<td><label for="helpText" class="form-label">Texto de Ajuda:</label></td>
					<td><input id="helpText" v-model="helpText" type="text" class="form-control" /></td>
				</tr>
				<tr>
					<td><label for="disabled" class="form-label">Desabilitado:</label></td>
					<td>
						<div class="form-check d-flex align-items-center gap-2">
							<input id="disabled" v-model="disabled" type="checkbox" class="form-check-input" />
							<label for="disabled" class="form-check-label">Ativar</label>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

MultiSelect Mega ​

Visão geral ​

Propriedades ​

Formato das opções ​

Eventos ​

Playground ​

MultiSelect Mega

Visão geral

Propriedades

Formato das opções

Eventos

Playground