talquei

? Por que?

Esqueça as formas chatas e não intuitivas. Com o talquei você consegue construir rapidamente formas fantásticas como na imagem acima.

Demonstração

Instalar

Instale usando seu gerenciador de pacotes:

$ yarn add talquei

Adicione ao seu aplicativo:

 import Vue from 'vue'
import Talquei from 'talquei'

// import the styles 
import 'talquei/dist/talquei.min.css'

Vue . use ( Talquei )

Ou importe para o seu componente:

 import { Talquei , TalqueiMessage } from 'talquei'

export default {
  components : {
    Talquei ,
    TalqueiMessage
  }
} 

Uso

O componente Talquei deve encapsular qualquer TalqueiMessage :

< template >
  < Talquei >
    < TalqueiMessage text = " Hi! My name is Talquei! " />
    < TalqueiMessage text = " I'm a plugin to help you. " />
  </ Talquei >
</ template >

Solicitar entrada do usuário

Você pode solicitar uma entrada de usuário por prop ou slot. A proposta basicamente injetará sua tag em um formulário e preencherá a entrada no v-model .

Exemplo

< template >
  < Talquei >
    < TalqueiMessage text = " What's your name? " />
    < TalqueiMessage
      v-model = " name "
      : input = " { tag : ' text ' , placeholder : ' Enter your name ' } "
      is-user
    />
  </ Talquei >
</ template >

< script >
export default {
  data : () => ({
    name : ' '
  })
}
</ script >

Formatar entrada do usuário

Quando o usuário insere o texto, você pode formatá-lo usando o template prop:

Exemplo

< template >
  < Talquei >
    < TalqueiMessage
      : input = " { tag : ' text ' , placeholder : ' Enter your name ' } "
      template = " My name is {text} "
      is-user
    />
  </ Talquei >
</ template >

Respostas predefinidas

Se você precisar de respostas predefinidas (como a tag select ou radio ), você pode definir input.type = 'select' e passar seu objeto no campo options :

Exemplo

< template >
  < Talquei >
    < TalqueiMessage text = " Which front-end framework do you prefer? " />
    < TalqueiMessage
      v-model = " name "
      : input = " { tag : ' select ' , options : frameworks } "
      is-user
    />
  </ Talquei >
</ template >

< script >
export default {
  data : () => ({
    frameworks : {
      vue : ' Vue.js ' ,
      angular : ' AngularJS ' ,
      ember : ' Ember.js '
    }
  })
}
</ script >

Mensagens condicionais

Use quando quiser que o atributo v-if exiba mensagens condicionais:

Exemplo

< template >
  < Talquei >
    < TalqueiMessage text = " Which front-end framework do you prefer? " />
    < TalqueiMessage
      v-model = " name "
      : input = " { tag : ' select ' , options : frameworks } "
      is-user
    />
    < TalqueiMessage text = " What plugins do you usually use in your projects? " />
    < TalqueiMessage
      v-if = " answer === ' vue ' "
      v-model = " plugin "
      : input = " { tag : ' text ' , placeholder : ' talquei ' } "
      is-user
    />
  </ Talquei >
</ template >
</ script >

Usando slots

Se precisar criar entradas mais complexas (como validações, componentes personalizados), você pode usar slots. Após a conclusão lembre-se de chamar o método next() do componente Talquei .

Exemplo

< template >
  < Talquei ref = " talquei " >
    < TalqueiMessage text = " Hello " >
      < form @ submit . stop = " onSubmit " >
        < input ref = " input " type = " text " >
        < button >Ok</ button >
      </ form >
    </ TalqueiMessage >
  </ Talquei >
</ template >

< script >
export default {
  methods : {
    onSubmit () {
      this . name = this . $refs . input . value
      this . $refs . talquei . next ()
    }
  }
}
</ script > 

? API

Componente Talquei

Adereços

Nome	Descrição	Tipo	Padrão
autoRun	Inicia a conversa quando montado	Boolean	true

Caça-níqueis

Nome	Descrição
default	Insira aqui sua TalqueiMessage . Não precisa de um elemento raiz

Métodos

init(): void

Use este método para iniciar a conversa se você definir autoRun como false .

next(): void

Pesquise a próxima mensagem. Mensagens aninhadas injetarão este método para chamar ao finalizar a digitação.

Componente TalqueiMessage

Adereços

Nome	Descrição	Tipo	Padrão
input	Solicite uma entrada do usuário Veja detalhes	Object	undefined
isUser	Definir como uma mensagem escrita pelo usuário	Boolean	false
text	Texto a ser exibido, caso isUser não será digitado	String	undefined
value	Útil apenas para uso no v-model	String	undefined
template	Formata a entrada do usuário	String	{text}

objeto input

Irá criar um formulário básico a partir da tag informada, não deverá ser definido caso prefira utilizar o slot.

• tag : tags válidas atualmente são text ou select .
• options ( select ): Utilize este campo para definir um object com as opções disponíveis.
• placeholder ( text ): Defina o espaço reservado do seu campo de entrada.
• type ( text ): Defina o tipo do seu campo de entrada. O padrão é text .

Caça-níqueis

Nome	Descrição
default	Use isto se precisar de informações do usuário mais complexas ou personalizadas
avatar	Altere o elemento usado como avatar. O padrão é "?"

? Contribuir

Se você quiser contribuir com este projeto, consulte nosso Guia de Contribuição.