Lemaf Vue Select

Componente Vue para seleção de intervalos de datas.

Como usar

• Importar o componente import LemafSelect from 'lemaf-vue-select'

• Importar o css import 'lemaf-vue-select/dist/lemaf-vue-select.css'

• Incluir o componente: <lemaf-vue-select v-model='selectProperty'></lemaf-vue-select>

Evento

Input Caso você tenha necessidade de escutar algum evento de mudança no(s) item(ns) selecionados, basta escutar o evento input do v-model;

Exemplo: <lemaf-vue-select @input='doSomething'></lemaf-vue-select>

Clicked Emitido quando é clicado em qualquer parte do componente.

Exemplo: <lemaf-vue-select @clicked='doSomething'></lemaf-vue-select>

Configurações do componente

É possível modificar alguns parâmetros do componente. A seguir tabela das propiedades disponíveis do componente.

|Propriedade | Tipo | Default | Valores Aceitos | Descrição | ---------------------|---------|-----------|---------------------------|------------| |erro | Boolean | false | - | Se true será renderizada uma borda vermelha, indicando campo com erro | |label | String | nome | - | Indica o nome da variável do objeto opcoes que possui os nomes que serão renderizados no select para cada uma das opções | |chave | String | valor | - | Indica o nome da variável do objeto opcoes que contém o valor de cada uma das opções | |filtravel | Boolean | false | - | Se true será renderizado um campo de pesquisa para filtrar as opções | |selecionarTodos | Boolean | false | - | Se true será renderizado uma opção para selecionar todas as opções de uma vez. Só é permitido caso a opção multiplos seja true | |pesquisarPlaceholder | String | Pesquisar | - | Placeholder para o campo de pesquisa. Só será visível caso o campo filtravel esteja habilitado.| |bordaArredondada | Boolean | false | - | Se true adicionará uma borda de 20px no select e no campo de pesquisa, caso esteja habilitado. | |multiplos | Boolean | false | - | Se true permitirá selecionar mais de uma opção. | |permitirNovosItens | Boolean | false | - | Se true exibirá um botão | |placeholder | String | Selecione | - | Placeholder para o campo de select. | |altura | String | media | pequena / media / grande | Define a altura do input do select. (20 /30 / 40)px respectivamente. | |podeRemoverItem | Boolean | true | - | Permiti remover itens quando a seleção múltipla não estiver habilitada(seleção única) | |opcoes | Array | [] | - | Array com as opções que populará o select. |

Funcionamento

Se o atributo da diretiva v-model for setado como undefined ou null o componente inicializará sem nenhum item selecionado, porém qualquer outro valor informado na variável v-model o componente tentará encontrar dentro das opcoes fornecidas, alguma opção que tenha o atributo chave igual ao valor de v-model.

Observação: Observe que quando a opção múltiplos está habilitada faz sentido usar v-model como um Array. Neste caso, o componente tentará encontrar uma opção correspondente para cada um dos valores do Array de v-model.