vue-coe-feedback

0.1.5 • Public • Published

Inspired by @VitorLuizC idea.

License


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.

Package Sidebar

Install

npm i vue-coe-feedback

Weekly Downloads

75

Version

0.1.5

License

MIT

Unpacked Size

57.9 kB

Total Files

8

Last publish

Collaborators

  • viniazvd