Add address lists (from, to)

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>

js/components/Address.vue

+<template>
+	<span :title="email"
+		  v-tooltip="tooltipData">{{ label }}</span>
+</template>
+
+<script>
+	export default {
+		name: "Address",
+		props: [
+			'email',
+			'label',
+		],
+		data () {
+			return {
+				tooltipData: {
+					placement: 'bottom',
+				}
+			};
+		}
+	}
+</script>

js/components/AddressList.vue

+<template>
+	<span>
+		<template v-for="(entry, idx) in entries">
+			<Address :key="entry.email"
+					 :email="entry.email"
+					 :label="entry.label"/><!--
+			--><span
+				v-if="idx+1 < entries.length">, </span>
+		</template>
+	</span>
+</template>
+
+<script>
+	import Address from "./Address";
+
+	export default {
+		name: "AddressList",
+		components: {Address},
+		props: [
+			'entries'
+		]
+	}
+</script>

js/components/Message.vue

@@ -3,6 +3,9 @@
 		<div id="mail-message-header" class="section">
 			<h2 :title="subject">{{subject}}</h2>
 			<p class="transparency">
+				<AddressList :entries="from"/>
+				to <!-- TODO: translate -->
+				<AddressList :entries="to"/>
 				<!--{{printAddressList from}}
 				{{ t 'to' }}
 				{{printAddressList to}}
@@ -43,10 +46,29 @@
 </template>
 
 <script>
+	import AddressList from "./AddressList";
+
 	export default {
 		name: "Message",
-		data() {
+		components: {AddressList},
+		data () {
 			return {
+				from: [
+					{
+						label: 'Backbone Marionette',
+						email: 'backbone.marionette@frameworks.js',
+					}
+				],
+				to: [
+					{
+						label: 'React',
+						email: 'react@frameworks.js',
+					},
+					{
+						label: 'Angular',
+						email: 'angular@frameworks.js',
+					}
+				],
 				subject: 'Do you enjoy the Vue?'
 			};
 		}

js/directives/tooltip.js

+export default function tooltip (el, binding) {
+	// TODO: get rid of global dependencies
+	console.info('TOOLTIP', el, binding);
+	$(el).tooltip(binding.value);
+};

js/main.js

@@ -25,6 +25,7 @@ import App from './App';
 import router from './router';
 import store from './store';
 import {sync} from 'vuex-router-sync';
+import tooltip from './directives/tooltip';
 
 sync(store, router);
 
@@ -33,6 +34,8 @@ Vue.prototype.n = n;
 Vue.prototype.OC = OC;
 Vue.prototype.OCA = OCA;
 
+Vue.directive('tooltip', tooltip);
+
 new Vue({
 	el: '#content',
 	router,