Biblioteca de plugins feitos em Vue para serem utilizados em qualquer lugar dentro das necessidades do Sistema IntergrAll.
npm install vue-intergrall-pluginsBiblioteca de plugins feitos em Vue para serem utilizados em qualquer lugar dentro das necessidades do Sistema IntergrAll.
templates:
- type: Object
- required: true
- desc: Objeto dos templates a serem exibidos.
identifier:
- type: String
- required: true
- desc: Identificador único para o componente. Útil para caso seja necessário disparar uma função de dentro do componente.
dictionary:
- type: Object
- required: true
- desc: Dicionário de palavras a ser utilizado no componente.
hasButton:
- type: Boolean
- required: false
- default: true
- desc: Exibir botão de envio. Faz a emissão do evento @click-trigger.
iconButton:
- type: Boolean
- required: false
- desc: Estiliza o botão para ser apenas um ícone 'fas fa-paperplane'. Para funcionar a opção hasButton deve ser true (default).
columnSelect:
- type: Boolean
- required: false
- desc: Torna o container do select de templates em coluna, onde encima ficará o título, "Template:" e embaixo o select. O padrão é o título e o select na mesma linha.
resizeParentOnSelect:
- type: Boolean
- required: false
- desc: Indica ao selecionar um template que o componente pai deve ter seu tamanho corrigido caso não faça isso naturalmente. Faz a emissão do evento @resize-parent.
placement:
- type: String
- required: false
- default: "bottom"
- desc: Indica se as opções do select devem abrir para cima('top'), ou para baixo('bottom', default).
allVariables:
- type: Boolean
- required: false
- default: true
- desc: Indica se todas variáveis devem ser exibidas quando houver o clique sobre o input para digitar o valor das variáveis.
@click-trigger:
- desc: Emitido ao clicar no botão.
@selected-template:
- desc: Emitido ao selecionar alguma opção do template.
- sent_data: String - código do template ou 'envio_msg', que indica que o template é uma mensagem a ser digitada pelo usuário.
@resize-parent:
- desc: Emitido ao selecionar algum template.
@template-data:
- desc: Emitido quando é selecionado um template sem variáveis ou conforme o preenchimento da(s) variável(eis).
- sent_data: Object - envia os dados do template com os valores a serem atribuidos a variável na posição 'currentText'.
@static-message:
- desc: Emitido conforme o preenchimento do campo de texto.
- sent_data: String - valor da mensagem
textId:
- type: String
- required: true
- desc: Identificador único para o componente. Útil para caso seja necessário disparar uma função de dentro do componente.
dictionary:
- type: Object
- required: true
- desc: Dicionário de palavras a ser utilizado no componente.
buttons:
- type: Object
- required: false
- default: { hasEmojis: false, hasSendButton: false, hasFiles: false, hasAudio: false }
- desc: Objeto responsável por habilitar os possíveis botões do componente. Sendo eles, emojis, enviar, arquivos e áudio, todos aceitam Boolean, true ou false.
cssStyle:
- type: Object
- required: false
- default: { width: "full", backgroundColor: "#FFF", outsideButtons: false }
- desc: Objeto de estilização, onde:
- width: Largura do componente. Aceita a String "full" (100%), "almostFull" (95%) ou "medium" (75%).
- backgroundColor: Cor de fundo do compoennte. Aceita String com qualquer código de cor CSS válido.
- outsideButtons: Coloca os botões flutuando na parte superior direita do componente. Aceita Boolean, true ou false.
textareaSettings:
- type: Object
- required: false
- default: { placeholderMessage: "", maxCharacters: 0, sendOnEnter: false, disabled: false }
- desc: Configurações do campo de texto, onde:
- placeholderMessage: Placeholder do campo de texto. Aceita qualquer String.
- maxCharacters: Máximo de caracteres aceitos no campo de texto. Aceita qualquer número positivo.
- sendOnEnter: Faz a emissão do evento que dispara a mensagem. Aceita Boolean, true ou false.
- disabled: Desabilita o campo de texto. Aceita Boolean, true ou false.
emojiSettings:
- type: Object
- required: false
- default: { openEmojisFrom: "top", smallEmojis: false }
- desc: Configurações dos emojis, onde:
- openEmojisFrom: Direção que a caixa de seleção de emojis vai abrir. Aceita String "top" ou "bottom".
- smallEmojis: Diminui o tamanho dos emojis renderizados na caixa de seleção. Aceita Boolean, true ou false.
formattedMessageSettings:
- type: Object
- required: false
- default: { hasStandardMessages: false, msgType: 0, token_cliente: "" }
- desc: Configurações das mensagens formatadas, onde:
- hasStandardMessages: Faz a aparição do botão de mensagem formatada caso verdadeiro. Aceita Boolean, true ou false.
- msgType: Tipo da mensagem formatada. Aceita os números 0 (sem mensagem), 1 (tipo mensagem 1) ou 2 (tipo mensagem 2).
- token_cliente: Para que a requisição de obter as mensagens formatadas funcione, é necessário passar o token_cliente.
fileSettings:
- type: Object
- required: false
- default: { docsExtensions: "", imagesExtensions: "", multiple: false, systemButton: false, max: 3 }
- desc: Configurações dos arquivos, onde:
- docsExtensions, imagesExtensions aceitam uma regex contendo as possíveis extensões a serem enviadas: Faz a aparição do botão de mensagem formatada caso verdadeiro. Aceita Boolean, true ou false.
- multiple: Caso aceite múltiplos arquivos para serem enviados.
- systemButton: Caso necessite de um botão extra. Emite o evento "@open-file-system".
- max: Máximo de arquivos que podem ser selecionados.
isSending:
- type: Boolean
- required: false
- default: false
- desc: Variável de controle que, quando marcada como true, coloca um loader no campo de texto para que não sejam realizadas múltiplas requisições enquanto uma já está em andamento.
isMainChat:
- type: Boolean
- required: false
- default: false
- desc: Controle de verificação para saber se o chat em questão é o principal da tela (tende a ser excluído nas próximas implementações)
@final-message:
- desc: Emitido conforme o preenchimento do campo de texto.
- sent_data: String - valor da mensagem. Obs: Para os emojis, é enviado o seu respectivo código em HTML.
@send-message:
- desc: Emitido ao disparar mensagem pelo botão, tecla enter ou shift + enter, dependendo das props recebidas.
- sent_data: String - valor da mensagem. Obs: Para os emojis, é enviado o seu respectivo código em HTML.
@obj-message:
- desc: Emitido ao disparar mensagem pelo botão, tecla enter ou shift + enter, dependendo das props recebidas.
- sent_data: Object - Contém os seguintes valores referentes a mensagem:
- message: String, valor da mensagem;
- attachment: File, arquivo enviado;
- isDoc: Boolean, sinaliza se a mensagem é um documento;
- image: File, imagem enviada;
- isAudio: Boolean, sinaliza se a mensagem é do tipo áudio;
- audioAttachment: File, arquivo de áudio enviado.
@open-file-system
- desc: Emitido ao clicar no botão de arquivos do sistema.
1. !FontAwesome
2. !FontAwesome
3. !FontAwesome
4. !FontAwesome
5. !VueSelect
6. !PopperJS
7. !EmojiMartVue
8. !VueToasted
9. !CoreJS
> Desenvolvido por _Konecta Brasil_