LxCheckboxSelectAll

Visão geral

O componente LxCheckboxSelectAll é utilizado para fazer a seleção de itens em uma lista, permitindo selecionar apenas os itens da página atual, todos os itens de todas as páginas ou remover toda a seleção realizada.

Ele possui dois modos de funcionamento:

1. Modo automático (com o parâmetro list): Ao passar a propriedade list, o componente gerencia automaticamente a seleção dos itens com base no array informado. Esse modo é ideal para casos em que se deseja uma implementação pronta, com controle interno da seleção.

2. Modo manual/personalizado (sem o parâmetro list): Quando a propriedade list não é utilizada, o controle da seleção é feito de forma externa e personalizada através do evento update:modelValue. Nesse caso, é responsabilidade do desenvolvedor escutar esse evento e atualizar os dados conforme necessário, permitindo maior flexibilidade em integrações com lógicas mais complexas.

Clique para visualizar o código

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

const modelValue = ref({});
const loading = ref(false);
const disabled = ref(false);
const partialSelected = ref(false);
const hasPagination = ref(true);

const lista = ref([
	{ selected: false, situacao: 'Ativo', texto: 'Item 1', valor: 1 },
	{ selected: false, situacao: 'Inativo', texto: 'Item 2', valor: 2 },
	{ selected: false, situacao: 'Ativo', texto: 'Item 3', valor: 3 },
	{ selected: false, situacao: 'Inativo', texto: 'Item 4', valor: 4 }
]);
</script>
<template>
	<LxCheckboxSelectAll
		id="lxcheckboxselectall"
		v-model="modelValue"
		:loading="loading"
		:disabled="disabled"
		:partial-selected="partialSelected"
		:list="lista"
		:selection-rule="(item) => (item.situacao === 'Ativo' ? true : false)"
		:property-to-select="'selected'"
		:current-page-range="{ startIndex: 1, endIndex: 2 }"
		:has-pagination="hasPagination"
		@update:partialSelected="partialSelected"
	/>
</template>

Formato do v-model

ℹ️ O v-model do LxCheckboxSelectAll armazena um objeto SelectAllType que indica o estado da seleção.

const selecaoTudo = ref({ selected: false, currentPage: false })

// tipos possíveis:
// { selected: false, currentPage: false }  — nenhum item selecionado
// { selected: true, currentPage: true }    — apenas a página atual selecionada
// { selected: true, currentPage: false }   — todos os itens selecionados

Modo automático (com :list): passe a lista e property-to-select — o componente gerencia automaticamente a seleção.

Modo manual (sem :list): ouça @update:modelValue para implementar lógica de seleção personalizada.

Inicialização: ref({ selected: false, currentPage: false }).

Propriedades

Nome	Descrição	Tipo	Padrão
id	Identificador único do checkbox	String	'lx-checkbox-select-all'
modelValue	Valor indicando se tem itens selecionados. Nota: Utilizar a implementação padrão com o v-model.	SelectAllType
loading	Indica se o campo está carregando.	Boolean
disabled	Indica se o campo está desabilitado.	Boolean
partialSelected	Indica se selecionou parcialmente os itens. Nota: Se for passado o list, não é necessário.	Boolean
list	Lista de itens para seleção.	Array, Set ou null	null
selectionRule	Regra para ser atendida no momento de seleção dos itens, necessária somente se a seleção tiver alguma condição. Nota: Deve ser passado somente se list existir.	Function	true
propertyToSelect	Indique qual propriedade na lista, deve ser marcada. Nota: Deve ser passado somente se list existir.	String
currentPageRange	Indique o intervalo de itens que deseja selecionar na página. Nota: Deve ser passado somente se list existir e hasPagination for true.	CurrentPageRange
hasPagination	Indica se tem paginação na lista e deve exibir o menu.	Boolean	true

Tipos

Nome	Dica	Estrutura
CurrentPageRange	Caso não deseja passar esse intervalo, deixe vazio, pois o default é startIndex e endIndex -1.	{ startIndex: -1, endIndex: -1 }
SelectAllType	currentPage indica que foi selecionado apenas a pagina atual e selectedindica que foi selecionado.	{ selected: true, currentPage: true }

Eventos

Nome	Descrição	Parâmetro
update:modelValue	Emitido ao clicar no botão de selecão. Nota: Utilizar a implementação padrão com o v-model. Atenção: Usar esse evento somente se, não passar list, e, quiser fazer uma seleção personalizada.	SelectAllType

Playground

Desabilitado

Loading

Seleção Parcial

Tem Paginação

Regra de Seleção:

Propriedade para Selecionar:

	Situação	Texto	Valor
	Ativo	Item 1	1
	Inativo	Item 2	2
	Ativo	Item 3	3
	Inativo	Item 4	4