MultiSelect

Visão geral

Permite o usuário pesquisar e selecionar uma opção ou mais em uma lista.

Exemplo MultiSelect (objetos)

Exemplo MultiSelect (valores)

Clique para exibir o código

vue

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

const objSelecionado = ref();
const tecnologias = ref([
	{ Nome: 'Vue.js', Id: 'vu' },
	{ Nome: 'Javascript', Id: 'js' },
	{ Nome: 'Open Source', Id: 'os' },
	{ Nome: 'CSS', Id: 'css' },
	{ Nome: '.NET', Id: 'net' },
	{ Nome: 'HTML', Id: 'ht' }
]);

const statusSelecionado = ref();
const status = ref(['Análise', 'Processando', 'Finalizado', 'Cancelado']);
</script>

<template>
	<div class="row">
		<div class="col-6">
			<LxMultiSelect
				v-model="objSelecionado"
				label="Exemplo MultiSelect (objetos)"
				:options="tecnologias"
				:options-label="({ Nome, Id }) => `${Nome} (Cód: ${Id})`"
				options-key="Id"
			/>
		</div>

		<div class="col-6">
			<LxMultiSelect v-model="statusSelecionado" label="Exemplo MultiSelect (valores)" :options="status" />
		</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
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`	-
group-label	Define qual a propriedade do objeto será exibida em caso de agrupamento de opções	`String`	-
group-values	Define qual a propriedade do objeto será exibida como 'options' do agrupamento	`String`	-
mega-options	Habilita a opção descrica no ComboBox.	`Boolean`	false

Playground

Exemplo MultiSelect (objetos)

options: [ { "Nome": "Vue.js", "Id": "vu" }, { "Nome": "Javascript", "Id": "js" }, { "Nome": "Open Source", "Id": "os" }, { "Nome": "CSS", "Id": "css" }, { "Nome": ".NET", "Id": "net" }, { "Nome": "HTML", "Id": "ht" } ]

modelValue:

Nome	Controle
disabled
label
error-text
help-text
placeholder

Exemplo MultiSelect (grupos)

options: [ { "Tipo": "Front-end", "Tecs": [ { "Nome": "Vue.js", "Id": "vu" }, { "Nome": "Javascript", "Id": "js" }, { "Nome": "CSS", "Id": "css" }, { "Nome": "HTML", "Id": "ht" } ] }, { "Tipo": "Back-end", "Tecs": [ { "Nome": ".NET", "Id": "net" }, { "Nome": "Java", "Id": "java" } ] } ]

modelValue:

Clique para exibir o código

vue

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

const objSelecionado = ref();
const tecnologias = ref([
	{ Nome: 'Vue.js', Id: 'vu' },
	{ Nome: 'Javascript', Id: 'js' },
	{ Nome: 'Open Source', Id: 'os' },
	{ Nome: 'CSS', Id: 'css' },
	{ Nome: '.NET', Id: 'net' },
	{ Nome: 'HTML', Id: 'ht' }
]);

const objSelecionadoGrupo = ref();
const stacks = ref([
	{
		Tipo: 'Front-end',
		Tecs: [
			{ Nome: 'Vue.js', Id: 'vu' },
			{ Nome: 'Javascript', Id: 'js' },
			{ Nome: 'CSS', Id: 'css' },
			{ Nome: 'HTML', Id: 'ht' }
		]
	},
	{
		Tipo: 'Back-end',
		Tecs: [
			{ Nome: '.NET', Id: 'net' },
			{ Nome: 'Java', Id: 'java' }
		]
	}
]);

const disabled = ref(false);
const errorText = ref('');
const helpText = ref('');
const placeholder = ref('Selecione');
const label = ref('Combo exemplo');
</script>

<template>
	<div class="row">
		<div class="col-12">
			<LxMultiSelect
				v-model="objSelecionado"
				label="Exemplo MultiSelect (objetos)"
				options-key="Id"
				:options="tecnologias"
				:options-label="({ Nome, Id }) => `${Nome} (Cód: ${Id})`"
				:error-text="errorText"
				:help-text="helpText"
				:placeholder="placeholder"
				:disabled="disabled"
			/>
		</div>
	</div>

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

	<div class="row">
		<div class="col-12">
			<strong>modelValue: </strong>
			<small>{{ objSelecionado }}</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>
		</tbody>
	</table>

	<div class="row">
		<div class="col-12">
			<LxMultiSelect
				v-model="objSelecionadoGrupo"
				label="Exemplo MultiSelect (grupos)"
				options-key="Id"
				group-label="Tipo"
				group-values="Tecs"
				:options="stacks"
				:options-label="({ Nome, Id }) => `${Nome} (Cód: ${Id})`"
			/>
		</div>
	</div>

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

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

MultiSelect ​

Visão geral ​

Variações ​

Propriedades ​

Playground ​

MultiSelect

Visão geral

Variações

Propriedades

Playground