vue-feedback-dialog

Feedback dialog for Vue/Vuetify

Demo

Icon (right bottom corner fixed):

Info screen:

Input screen:

Install

1. Install Vuetify See documentation

2. Install component:

npm install @dsb-norge/vue-feedback-dialog --save

Usage

Setup

Import in component (or use global):

import VueFeedbackDialog from '@dsb-norge/vue-feedback-dialog'

components: {
    VueFeedbackDialog
}

<VueFeedbackDialog
    :messages="messages"
    :options="options"
    @feedback="handleFeedback"
/>

Messages format: (optional)

      messages: [
        {
          header: 'Maintenance 23.02.20', (h5)
          info: 'Describing text' (p)
        },
        {
          header: 'Down time 10.05.20', (h5)
          info: 'Describing text' (p)
        }
      ]

Options format: (optional)

    defaultOptions: {
        text: {
            headerInfo: 'Information: ',
            headerDialog: 'Report error or suggestion: ',
            dialogLeftControlText: 'Back',
            infoLeftControlText: 'Close',
            dialogRightControlText: 'Send',
            infoRightControlText: 'Report bug',
            reporter: 'Reporter',
            reporterError: 'This field is required',
            description: 'Description...',
            descriptionError: 'This field is required',
            email: 'Email',
            emailError: 'Invalid email address'
        },
        layout: {
            color: '#34495e',
            border: '#34495e',
            background: '#FFF'
        }
    }

Options

| Name | Type | Default | | --- | --- | --- | | headerInfo | String | Information: (h4) | | headerDialog | String | Report error or suggestion: (h4) | | dialogLeftControlText | String | Back | | infoLeftControlText | String | Close | | dialogRightControlText| String | Send | | infoRightControlText | String | Report bug | | reporter | String | Reporter | | reporterError | String | This field is required | | description | String | Description... | | descriptionError | String | This field is required | | email | String | Email | | emailError | String | Invalid email address | | color | String | #34495e | | border | String | #34495e | | background | String | #FFF |

Props

| Name | Type | Description | | --- | --- | --- | | options | Object | Options object as described above | | messages | Array | Info messages to user | | meta | String | Additional meta information, ie: App version, date time etc |

Events

| Name | Description | | --- | --- | | feedback | Triggered on send, user click send on input form |

Value in feedback event:

    {
        reporter: this.reporter,
        description: this.description,
        path: window.location.href,
        email: this.email,
        meta: this.meta
    }

Feedback only mode

If no messages is provided only the feedback form will be visible.

Build:

Compile and build for production

npm run build

Publish to NPM

# Do some work...

# x.x.1 -> x.x.2
npm version patch

# x.1.0 -> x.2.0
npm version minor

# 1.0.0 -> 2.0.0
npm version major

All these will:

1. Set the version number in package.json
2. Build the plugin
3. Commit version to git and push upstream
4. Publish the plugin to NPM registry