Vue

by Ajeh Emeke

HTML

<script src="https://cdn.rawgit.com/Godofbrowser/vuejs-dialog/v1.3.0/dist/vuejs-dialog.min.js"></script>
<script src="https://cdn.rawgit.com/Godofbrowser/vuejs-dialog/v1.3.0/dist/vuejs-dialog-mixin.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/Godofbrowser/vuejs-dialog/v1.3.0/dist/vuejs-dialog.min.css">
<div id="app">
  <h2>Demo:</h2>
  <button @click="showDialog">
    show dialog
  </button>
</div>

<script id="custom-view-template" type="text/template">
<p :class="options.customClass">
	{{ messageBody }}
  <br/>
  <ul>
  	<li v-for="(item, index) in items" :key="item.name">
    	<a href="#" @click="handleSelect(index)">
      	{{ item.name }}
        <span v-if="item.count">({{ item.count }})</span>
      </a>
  	</li>
  </ul>
  <br/>
  <a href="#" @click="handleDismiss()">cancel</a>
  <a href="#" @click="handleProceed()">Save</a>
</p>
</script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

.has--list-items li:not(:last-child) {
  margin-bottom: 15px;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

Vue

Vue.use(VuejsDialog.main.default, {
    html: true, 
    loader: false,
    okText: 'Proceed',
    cancelText: 'Cancel',
    animation: 'bounce', 
    message: 'Some message'
})

const CustomView = Vue.extend({
	data() {
  	return {
    	items: [
        {name: 'Apple', count: 0},
        {name: 'Bananna', count: 0},
        {name: 'Cherry', count: 0}
      ]
    }
  },
	mixins: [VuejsDialog.mixin.default],
	template: '#custom-view-template',
  methods: {
  	handleSelect(index) {
    	let newData = this.items[index]
      newData.count = (newData.count + 1)
    	this.$set(this.items, index, newData)
    },
    handleDismiss() {
    	this.cancel()
    },
    handleProceed() {
    	this.proceed(this.items)
    }
  }
})

Vue.dialog.registerComponent('custom-view', CustomView)

new Vue({
  el: "#app",
  data: {
    
  },
  methods: {
    showDialog(){
    	this.$dialog.confirm('Choose multiple items', {
      	view: 'custom-view',
        customClass: 'has--list-items'
      })
      .then((dialog) => {
          console.log('Dialog ok: ', dialog)
          
          dialog.close && dialog.close()
          
          let text = dialog.data.map(item => {
          	return item.count ? item.count +'-'+ item.name : null
          }).filter(i => !!i).join(', ')
          
          let msg = `You selected ${text || 'none'}`

          this.$dialog.alert(msg, {
          	animation: 'zoom'
          })
       })
    }
  }
})