talquei

🧐 Why?

Forget the boring and non-intuitive forms. With talquei you can quickly build fantastic forms as in the image above.

$3

💻 Install

Install using your package manager:

``bash
$ yarn add talquei
`

Add into your app:

`js
import Vue from 'vue'
import Talquei from 'talquei'

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

Vue.use(Talquei)
`

Or import into your component:

`js
import { Talquei, TalqueiMessage } from 'talquei'

export default {
components: {
Talquei,
TalqueiMessage
}
}
`

⚙️ Usage

The Talquei component should wrapper any TalqueiMessage:

`vue

`

$3

You can request a user entry by prop or slot. The prop will basically inject your tag into a form and fill the entry in the v-model.

$3

When the user enters the text, you can format it using the prop template:

$3

If you need predefined answers (such as the select or radio tag) you can set input.type = 'select' and pass your object in the options field:

$3

Use when you want the v-if attribute to display conditional messages:

$3

If you need to build more complex input (like validations, custom components) you can use slots. After the completion remeber to call the next() method from the Talquei component.

🔎 API

$3

#### Props

| Name | Description | Type | Default |
| --------- | ------------------------------------ | --------- | ------- |
| autoRun | Starts the conversation when mounted | Boolean | true |

#### Slots

| Name | Description |
| --------- | ------------------------------------------------------------ |
| default | Insert your TalqueiMessage here. Don't need a root element |

#### Methods

init(): void

Use this method to start the conversation if you set autoRun to false.

next(): void

Search the next message. Nested messages will inject this method to call when finalizing typing.

$3

#### Props

| Name | Description | Type | Default |
| ---------- | --------------------------------------------------- | --------- | ------------- |
| input | Request a user input See details | Object | undefined |
| isUser | Define as a message written by the user | Boolean | false |
| text | Text to be displayed, if isUser will not be typed | String | undefined |
| value | Useful only for use in v-model | String | undefined |
| template | Formats user input | String | {text} |

##### input object

Will create a basic form from the tag informed, should not be defined if you prefer to use the slot.

- tag: Valid tags are currently text or select.
- options (select): Use this field to define an object with the available options.
- placeholder (text): Set the placeholder of your input field.
- type (text): Set the type of your input field. Default is text.

#### Slots

| Name | Description |
| --------- | ------------------------------------------------------------ |
| default | Use this if you need more complex or personalized user input |
| avatar` | Change the element used as avatar. Default is "🤖" |

🤝 Contribute

If you want to contribute to this project, please see our Contributing Guide.