vue-intergrall-plugins v1.0.19

: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