SwitchableListWithSidebar

O componente SwitchableListWithSidebar é uma versão do SwitchableList encapsulada em um sidebar, permitindo uma interface mais compacta e modular. É perfeito para aplicações onde você precisa manter o editor de listas em um painel lateral.

Nota: Veja também a documentação do componente base em SwitchableList

Exemplo

Clique para visualizar o código

<script setup>
import { ref } from 'vue';
import LxSwitchableListWithSidebar from '@/components/LxSwitch/LxSwitchableListWithSidebar.vue';

const isOpen = ref(false);
const selectedItems = ref([]);

const items = [
	{ id: 'item1', label: 'Item 1', checked: true },
	{ id: 'item2', label: 'Item 2', checked: true },
	{ id: 'item3', label: 'Item 3', checked: false },
	{ id: 'item4', label: 'Item 4', checked: false },
	{ id: 'item5', label: 'Item 5', checked: false }
];

const handleSave = (newItems) => {
	selectedItems.value = newItems.filter((item) => item.checked);
	isOpen.value = false;
};
</script>

<template>
	<div>
		<button class="btn btn-primary btn-sm" @click="isOpen = true">Selecionar Itens</button>

		<ul class="mt-3">
			<li v-for="item in selectedItems" :key="item.id">{{ item.label }}</li>
		</ul>

		<LxSwitchableListWithSidebar v-if="isOpen" id="example-items" title="Selecionar Itens" close-on-backdrop :items="items" @save="handleSave" @close="isOpen = false" />
	</div>
</template>

<style scoped>
ul {
	margin: 0;
	padding-left: 1.5rem;
}
</style>

Props

Property	Descrição	Tipo	Padrão
title	Título do topo do sidebar	String	Selecionar itens
showSidebarFooter	Exibe o footer com botões	Boolean	true
items	Array de itens para exibição	Array	Ver SwitchableList
maxSelections	Limite de items que podem ser selecionados	Number	Ver SwitchableList
selectedOnTop	Mostra items selecionados no topo	Boolean	Ver SwitchableList
size	Tamanho dos labels e switches	String	Ver SwitchableList
headerConfig	Configurações do header	Object	Ver SwitchableList
itemConfig	Configurações de propriedades dos items	Object	Ver SwitchableList
textConfig	Textos customizáveis	Object	Ver SwitchableList
behaviorConfig	Comportamentos do componente	Object	Ver SwitchableList

Emits

Event	Descrição
@save	Disparado quando usuário clica em "Salvar"
@close	Disparado quando usuário fecha o sidebar

Casos de Uso

O SwitchableListWithSidebar é ideal para:

• Edição em Sidebar: Manter a seleção isolada em um painel lateral
• Fluxo de Trabalho Compacto: Não interferir no conteúdo principal da página
• Gerenciamento de Permissões: Interface dedicada para atribuir/revogar permissões
• Configurações do Usuário: Personalizar preferências em um painel deslizante
• Filtros Avançados: Manter filtros em um sidebar para economizar espaço