:earth_americas: Vue IntergrAll Plugins

Biblioteca de plugins feitos em Vue para serem utilizados em qualquer lugar dentro das necessidades do Sistema IntergrAll.

Template Generator:

Props:

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.

Emitters:

@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

Text Footer:

Props:

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)

Emitters:

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

Dependências:

Desenvolvido por Konecta Brasil