npm package: @logcomex/collection-components
Description: Collection components used on Logcomex systems
Author: Frontend Logcomex
Latest version: 2.9.20

<!-- Badges session -->
<p align="center">
  <img alt="Package version" src="https://img.shields.io/npm/v/@logcomex/collection-components?e&style=for-the-badge">
  
  <img alt="Downloads" src="https://img.shields.io/npm/dm/@logcomex/collection-components?color=orange&style=for-the-badge">
  
  <img alt="node-current" src="https://img.shields.io/node/v/@logcomex/collection-components?color=orange&style=for-the-badge">
</p>

</p>

<!-- Title Session -->
<h1 align="center">
  Collection Components - LogComex
</h1>

<!-- Index session-->
<p align="center">
 <a href="#-sobre-o-projeto">Sobre</a> •
 <a href="#-como-executar-o-projeto">Rodando localmente</a> • 
 <a href="#open_file_folder-docs">Documentação</a> • 
 <a href="#-tecnologias">Tecnologias</a> 
</p>

<!--About session-->
## 💻 Sobre o projeto

O Collection Components da [LogComex](https://www.logcomex.com/), foi desenvolvido para atender à necessidade de que os clientes possam realizar gestão de empresas dentro da plataforma. 
Possibilitando que após serem adicionadas a uma coleção sejam incluídas informações de status e dados adicionais informados pelo próprio usuário.
Porém precisamos que essas collections sejam genéricas para que, em cenários futuros, qualquer tipo de registro possa ser adicionado a elas.

Este projeto é privado.

O pacote NPM está presente [aqui](https://www.npmjs.com/package/@logcomex/collection-components), sinta-se livre pra dar uma olhada (:

---

<!--Running session-->
## 🚀 Como executar o projeto

### Pré-requisitos

* [Git](https://git-scm.com)
* [Node.js](https://nodejs.org/en/) - v14.x.x (Recomendamos a instalação pelo [NVM](https://github.com/nvm-sh/nvm))
* [Yarn](https://classic.yarnpkg.com/pt-BR/)

### Rodando o projeto

```bash

# Clone o repositório
$ git clone https://github.com/comexio/collection-components.git

# Acesse a pasta do projeto do pacote pelo terminal
$ cd collection-components/

# Se estiver utilizando o NVM (o NVM irá ler o arquivo .nvmrc e usar a versão do Node deste projeto)
$ nvm use

# Instale as dependências
$ yarn

# Crie um link local do pacote
$ yarn link

# Vá até a pasta do projeto que vai utilizar o pacote
$ cd ..
$ cd projeto-exemplo/

# Faça o link da dependência local do pacote no seu projeto
$ yarn link @logcomex/collection-components

# Novamente na pasta do pacote, rode
$ yarn watch

# ou então
$ yarn build

# Por fim, rode o projeto que vai utilizar o pacote
$ yarn dev

```

**Importante**: Após terminar de usar o pacote localmente, siga este procedimento:

```bash

# Na raíz do projeto que está usando o pacote localmente, rode
$ yarn unlink @logcomex/collection-components

# Na raíz do pacote, rode
$ yarn unlink

# Desta forma você desfaz o link local do pacote, e o projeto volta a referenciar o link do pacote NPM.

```

---

<!--Docs session-->
## :open_file_folder: Docs
<p align="center">

A documentação dos componentes/utilitários está disponível [aqui](https://collection-components.netlify.app/)

### Documentação antiga

#### LSSideFilters

```
  <l-s-side-filters
    :title="Titulo"
    show-save-filter
    @toggleSaveFilter="toggleSaveMode"
  >
``` 
##### Parâmetros

**title**: String com o titulo

**show-save-filter**: Boolean pra mostrar ou não o botão de salvar filtro

##### Eventos

**@toggleSaveFilter**: Evento emitido ao clicar no botão de salvar filtro


#### LSSaveFilter

```
  <l-s-save-filter
    is-tags-allowed
    @close="closeSaveFilters"
    @saveFilter="saveFilter"
  />
``` 
##### Parâmetros

**is-tags-allowed**: Boolean pra mostrar ou não o checkbox de salvar tags

##### Eventos

**@close**: Evento emitido ao clicar no botão que fecha o salvar filtro

**@saveFilter**: Evento emitido ao clicar no botão de salvar filtro, é retorno o seguinte objeto com as informações digitadas

```
{
  name: "nome filtro",
  tagged: false
}
```

---

<!--Tecnologies session-->
## 🛠 Tecnologias

As seguintes ferramentas são usadas na construção do projeto:

-   **[Vue.js](https://vuejs.org/)** - JS Framework
-   **[Vuetify.js](https://vuetifyjs.com/)** - Vue UI Framework
-   **[TypeScript](https://www.typescriptlang.org/)** - JS Superset
-   **[Sass](https://sass-lang.com/)** - CSS Framework

> Dependências do projeto no [package.json](./package.json)

#### **Utilitários**

-   Editor:  **[Visual Studio Code](https://code.visualstudio.com/)**  → Extensions:  **[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)**, **[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)**, **[Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)**, **[Vuetify-VSCode](https://marketplace.visualstudio.com/items?itemName=vuetifyjs.vuetify-vscode)**
-   Padrão CSS:  **[BEM](http://getbem.com/introduction/)**
-   Markdown:  **[EmojiCopy](https://www.emojicopy.com)**,  **[Markdown Emoji](https://gist.github.com/rxaviers/7360908)**
-   Badges:  **[Shields.io](https://shields.io)**

---

<!--Bottom session-->
<h4 align=center>
 	<a target="_blank" rel="noopener noreferrer" href="https://www.logcomex.com/">
    <img alt="LogComex" title="LogComex Logo" src=".github/assets/logcomex-logo.png"/>
  </a>
</h4>