filtros-complexos
v1.0.1
Published
Documentação do componente Filtros complexos
Downloads
15
Readme
Filtros Complexos
Sobre
Componente usado para os filtros da listagem de produtos complexo, contem campo para busca do filtro, pode possuir filtros selecionados, toggle, etc.
Dependências
Não há.
Instalação
- Instale o app através do seu terminal
npm install @wapstore/filtros-complexo
- Valide se seu arquivo package.json possui a dependência
"dependencies": {
"@wapstore/filtros-complexo": "^0.1.4"
}
Agora a loja está apta para o uso da aplicação.
Uso
O componente de Filtros Complexos pode ser inserido em qualquer lugar da pasta "components". Neste arquivo você pode inserir todas as props e slots que o componente aceita, além de seus estilos.
Exemplo
-Este é um exemplo da aplicação de um arquivo padrão para a filtros no departamento:
<template>
<filtros :key="JSON.stringify(pageData.conteudo)" :pageData="pageData" />
</template>
<script>
...
[
{
"nome":"Categoria",
"pesquisaFiltro":false,
"showStatus":true,
"type":"categoria",
"valores": [
{
"id":16,
"nome":"Almofadas",
"rota":{
"name":"product/listing/category",
"route":"/decoracao/almofadas",
"params":{
"categoriaNivel2":"decoracao",
"categoriaNivel3":"almofadas"
},
"query":{
"order":"Popularidade"
}
},
"url":"https://lojateste.wapstore.com.br/demo/equipe/decoracao/almofadas?order=Popularidade",
"ativo":true
}
]
},
{
"nome":"Marcas",
type":"marca",
"pesquisaFiltro":true,
"showStatus":true,
"valores":[
{
"id":8,
"nome":"Riachuelo",
"imagem":"",
"imagemOriginal":"",
"ativo":false,
"rota":{
"name":"product/listing/category",
"route":"/decoracao/almofadas",
"params":{
"categoriaNivel2":"decoracao",
"categoriaNivel3":"almofadas"
},
"query":{
"order":"Popularidade",
"marca":"8"
}
},
"url":"https://lojateste.wapstore.com.br/demo/equipe/decoracao/almofadas?order=Popularidade&marca=8"
}
/*...etc*/
]
}
/*...etc*/
]
...
</script>
<style>
...
</style>
Recursos
Props
| Prop | Descrição | Tipo |
|---|---|---|
| filtros 0.1.4
| Array dos filtros desejado. | Array
|
| preventNavigation 0.1.4
| Define se a navegação será ao clicar no filtro ou apenas na chamada do método "aplicarFiltro", por padrão o valor é falso. | Boolean
|
| showFilter 0.1.4
| Para ativar o slider range para filtro de preço. Por padrão é desativado. | Boolean
|
| isRangePrice 0.1.4
| Para ativar o slider range para filtro de preço. Por padrão é desativado. | Boolean
|
| mergeRangePrice 0.1.4
| Define quando deve mesclar a tooltip. Conforme a documentação do range slider | Number
|
Configuração por filtro:
| Prop | Descrição | Tipo | Valores |
|---|---|---|---|
| nome 0.1.4
| Nome do conjunto de filtro. | String
| - |
| pesquisaFiltro 0.1.4
| Define se deve ou não exibir o input de pesquisa do filtro. | Boolean
| - |
| showStatus 0.1.4
| Define se o filtro deve iniciar o toggle aberto ou fechado. | Boolean
| - |
| type 0.1.4
| Define o tipo de filtro, o tipo deve ser um dos seguinte valores: categoria, marca, preco, atributo ou filtro. | String
| categoria, marca, preco, atributo ou filtro
|
| valores 0.1.4
| Opções do conjunto de filtro. | Array
| - |
Configuração por valor de filtro:
| Configuração | Descrição | Tipo | Campos |
|---|---|---|---|
| id 0.1.4
| Id do filtro, conforme retornado pela API. | Number
| - |
| imagem 0.1.4
| Caso seja um filtro com o tipo diferente de categoria e preço, esse campo é obrigatório. | String
| - |
| imagemOriginal 0.1.4
| Caso seja um filtro com o tipo diferente de categoria e preço, esse campo é obrigatório. | String
| - |
| ate 0.1.4
| Valores retornado pela API para o filtro do tipo preço. | Number
| - |
| de 0.1.4
| Valores retornado pela API para o filtro do tipo preço. | Number
| - |
| label ou nome 0.1.4
| Texto a ser exibido na opção de filtro. | String
| - |
| url 0.1.4
| Url retornado pela API. | String
| - |
| ativo 0.1.4
| Obrigatório para saber se o filtro está ativado ou desativado, por padrão a api wapstore já retorna corretamente. | Boolean
| - |
| rota 0.1.4
| Objeto rota padrão Vue Router, formato retornado pela api wapstore. Usado para criar o link para o filtro. | Objeto
| name, params, query ou route
|
Slots
| Slot | Descrição | Name | Props do slot | Exemplo de uso |
|---|---|---|---|---|
| Topo do filtro 0.1.4
| Campo para inserção de topo personalizado no filtro, por padrão já possui um. É recomandado inserir aqui a funcionalidade de "Filtros Selecionados" caso seu projeto necessite. | topoFiltro
| filtrosAtivos Descrição: Todos os filtros ativos no momento. Tipo: Array
| <filtros><template #topoFiltro={ filtrosAtivos }><div>/*...*/</div></template></filtros>
|
| Titulo no topo do filtro 0.1.4
| Caso opte por apenas alterar o texto no topo padrão do filtro. | tituloCabecalho
| - | <filtros><template #tituloCabecalho>/*...*/</template></filtros>
|
| Titulo limpar filtro 0.1.4
| Caso queira apenas alterar o texto referente a limpar filtros. | tituloLimparFiltros
| - | <filtros><template #tituloLimparFiltros>/*...*/</template></filtros>
|
| Icone seta 0.1.4
| Icone exibido no toggle do filtro. | iconeToggle
| - | <filtros><template #iconeToggle>/*...*/</template></filtros>
|
| Icone de visto 0.1.4
| Icone exibido no checkbox na opção do filtro. | iconeCheckbox
| - | <filtros><template #iconeCheckbox>/*...*/</template></filtros>
|
| Icone de lupa 0.1.4
| Icone exibido no input de pesquisa no conjunto de filtros. | iconeSearch
| - | <filtros><template #iconeSearch>/*...*/</template></filtros>
|
| Conjunto de filtro opcional 0.1.4
| Caso tenha necessidade pode ser incluso um conjunto de filtros utilizando esse slot, ele é renderizado abaixo do conjunto de filtro padrão. | filtroOpcaoAdicional
| - | <filtros><template #filtroOpcaoAdicional>/*...*/</template></filtros>
|
| Botão aplicar filtro 0.1.4
| Caso tenha necessidade de adicionar um botão "Aplicar Filtro". | btnAplicarFiltro
| - | <filtros><template #btnAplicarFiltro>/*...*/</template></filtros>
|
| Titulo para o Range slider 0.1.4
| Caso tenha necessidade de adicionar um texto para o RangePrice use esse slot para inserir. | titleRangePrice
| - | <filtros><template #titleRangePrice><p>Isso é o titulo do RangePrice</p></template></filtros>
|
Eventos
| Slot | Descrição | Argumentos |
|---|---|---|
| changeFiltro 0.1.4
| Quando é clicado em algum filtro. | filtro Descrição: Filtro que recebeu o clique. Tipo: Objeto
|
| clearFiltro 0.1.4
| Após todos os filtros selecionados ser resetado. | - |
| initFiltros 0.1.4
| Primeira inicialização do componente no DOM. | element Descrição: Referencia do HTML da aba no DOM. Tipo: HTMLDivElement
|
| updateFiltros 0.1.4
| Toda atualização no DOM. | element Descrição: Referencia do HTML da aba no DOM. Tipo: HTMLDivElement
|
Métodos
-Exemplo genérico da chamada de um método:
<template>
<filtros ref="refFiltro">
/*...*/
</filtros>
</template>
<script>
export default {
methods: {
handleAplicarFiltro() {
this.$refs.refFiltro.aplicaFiltro();
},
},
}
</script>
| Método | Descrição | Exemplo de uso |
|---|---|---|
| aplicaFiltro 0.1.4
| Método usado quando a propriedade preventNavigation esta definida como true. Com esse método é realizado a navegação conforme todos os filtros selecionado pelo usuário. | <template><filtros ref="refFiltro">/*...*/</filtros></template><script>export default { methods: { handleAplicarFiltro() { this.$refs.refFiltro.aplicaFiltro(); } } }</script>
|
| limparFiltro 0.1.4
| Método usado para limpar os filtros selecionado. | <template><filtros ref="refFiltro">/*...*/</filtros></template><script>export default { methods: { handleLimparFiltro() { this.$refs.refFiltro.limparFiltro(); } } }</script>
|
Estilização
Para a estilização, basta utilizar estilos sem escopos dentro do componente onde for inserido, utilizando sempre de um ID ou classe específica para a chamada do componente, para que em outras chamadas o estilo não influencie. Caso o estilo seja para várias chamadas do componente é recomendado a inserção dos estilos em um arquivos CSS separado.