VueSwal Advance

A Vue.js Plugin

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script src="https://unpkg.com/vue-swal"></script>
<script src="https://unpkg.com/vue-star-rating/dist/star-rating.min.js"></script>
<div id="app">
  <job></job>
</div>

CSS

body {
  font-family: Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  color: #444;
}

.rating {
  padding: 30px 0 0 0;
}

.vue-star-rating {
    margin: 20px auto;
}

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  background-color: #42b983;
  cursor: pointer;
  color: #fff;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  border-radius: 4px;
}

JavaScript

// We want to retrieve RatingComponent as a pure DOM node 
let wrapper = document.createElement('div');

// shared state
let state = {
	note: 0
}

// crate component to content
let RatingComponent = Vue.extend({
	data() {
  	return {rating: 0}
  },
  watch: {
  	rating (newVal) { state.note = newVal }
  },
	template: `
  	<div class="rating">
    	How was your experience getting help with this issues?
      <star-rating v-model="rating" :show-rating="false"></star-rating>
    </div>`,
  components: {'star-rating': VueStarRating.default}
})

let component = new RatingComponent().$mount(wrapper)

Vue.component('job', {
  template: '<button class="btn" @click="rate">Click me!</button>',
  methods: {
    rate() {
      this.$swal({
      	content: component.$el,
        buttons: {
        	confirm: {
          	value: 0
          }
        }
      }).then(() => {
      	this.$swal('Thanks for note ' + state.note);
      })
    }
  }
});

// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
  el: '#app'
});