vue-coe-feedback ✅

✨ Example✨

Install
yarn add vue-coe-feedback or npm i add vue-coe-feedback

Configuration

import Vue from 'vue'

import { VueCoeFeedback } from 'vue-coe-feedback'

Vue.use(VueCoeFeedback, store, options)

how to use?

• inside the component:
  

this.$feedback.add({ type, message, highlighted })
or
this.$feedback.remove({ type, message, highlighted })

• inside the store:

actions: {
  SOME_ACTION: ({ commit, dispatch }) => {
    ...
    dispatch('FEEDBACKS_ADD', { type, message, highlighted })
    or
    dispatch('FEEDBACKS_REMOVE', { type, message, highlighted })
    ...
  }
}

options type

• info
• success
• error

Example

<template>
  <div id="app">
    <coe-feedback @close="feedback => $feedback.remove(feedback)" :feedbacks="$feedback.list" />

    <button @click="onSucces">show feedback success</button>
    <button @click="onInfo">show feedback info</button>
    <button @click="onError">show feedback error</button>

    <button @click="onCoe">set coe</button>
  </div>
</template>

<script>
import { CoeFeedback } from 'vue-coe-feedback'

export default {
  components: { CoeFeedback },
  
  methods: {
    onSucces () {
      this.$feedback.add({ type: 'success', message: 'A sua compra foi', highlighted: 'aprovada!' })
    },

    onInfo () {
      this.$feedback.add({ type: 'info', message: 'INFO' })
    },

    onError () {
      this.$feedback.add({ type: 'error', message: 'ERROR' })
    },

    onCoe () {
      this.$store.dispatch('COE', { type: 'success', message: 'COÉ MANÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉÉ!' })
    }
  }
}
...
</script>

Options: plugin instance

Name	Default	Required	About
storeName	coefeedback	false	store name
delay	5000	false	delay for notifications to disappear

component props

Name	Default	Required	About
feedbacks	[]	false	list of feedbacks
info	#b4b4b4	false	info color
success	#59efb2	false	success color
error	#ef5959	false	error color

Events

• close

Slots: component

• feedbacks (slot-scope: feedback, info, success, error)
• message
• button

Inspired by @VitorLuizC idea.