💻 Sobre o projeto

O Collection Components da LogComex, 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, sinta-se livre pra dar uma olhada (:

🚀 Como executar o projeto

Pré-requisitos

• Git
• Node.js - v14.x.x (Recomendamos a instalação pelo NVM)
• Yarn

Rodando o projeto

# 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:

# 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.

:open_file_folder: Docs

A documentação dos componentes/utilitários está disponível aqui

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
}

🛠 Tecnologias

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

• Vue.js - JS Framework
• Vuetify.js - Vue UI Framework
• TypeScript - JS Superset
• Sass - CSS Framework

Dependências do projeto no package.json

Utilitários

• Editor: Visual Studio Code → Extensions: ESLint, Prettier, Vetur, Vuetify-VSCode
• Padrão CSS: BEM
• Markdown: EmojiCopy, Markdown Emoji
• Badges: Shields.io