fix event embed filters + new clipboard mixin

pages/event/_slug.vue

@@ -41,15 +41,14 @@ v-container#event.pa-0.pa-sm-2
             //- tags, hashtags
             v-card-text(v-if='event.tags.length')
               v-chip.p-category.ml-1.mt-3(v-for='tag in event.tags' color='primary'
-                outlined :key='tag' v-text='tag')
+                outlined :key='tag')
+                span(v-text='tag')
 
             //- info & actions
             v-toolbar
               v-tooltip(bottom) {{$t('common.copy_link')}}
                 template(v-slot:activator="{on, attrs} ")
-                  v-btn.ml-2(large icon v-on='on' color='primary'
-                    v-clipboard:success='copyLink'
-                    v-clipboard:copy='`${settings.baseurl}/event/${event.slug || event.id}`')
+                  v-btn.ml-2(large icon v-on='on' color='primary' @click='clipboard(`${settings.baseurl}/event/${event.slug || event.id}`)')
                     v-icon mdi-content-copy
               v-tooltip(bottom) {{$t('common.embed')}}
                 template(v-slot:activator="{on, attrs} ")
@@ -136,10 +135,13 @@ import EventAdmin from './eventAdmin'
 import EmbedEvent from './embedEvent'
 import get from 'lodash/get'
 import moment from 'dayjs'
+import clipboard from '../../assets/clipboard'
+
 const htmlToText = require('html-to-text')
 
 export default {
   name: 'Event',
+  mixins: [clipboard],
   components: { EventAdmin, EmbedEvent },
   async asyncData ({ $axios, params, error, store }) {
     try {

pages/event/embedEvent.vue

@@ -3,10 +3,8 @@ v-card
   v-card-title(v-text="$t('common.embed_title')")
   v-card-text
         v-alert.mb-3.mt-1(type='info' show-icon) {{$t('common.embed_help')}}
-        v-alert.pa-5.my-4.blue-grey.darken-4.text-body-1.lime--text.text--lighten-3 {{code.script}}<br/>{{code.el}}<br/><br/>
-          v-btn.float-end(text  color='primary'
-            v-clipboard:copy='code'
-            v-clipboard:success='copyLink') {{$t("common.copy")}}
+        v-alert.pa-5.my-4.blue-grey.darken-4.text-body-1.lime--text.text--lighten-3 <pre>{{code}}</pre>
+          v-btn.float-end(text  color='primary' @click='clipboard(code)') {{$t("common.copy")}}
             v-icon.ml-1 mdi-content-copy
         p.mx-auto
           .mx-auto
@@ -14,27 +12,22 @@ v-card
   v-card-actions
     v-spacer
     v-btn(text color='warning' @click="$emit('close')") {{$t("common.cancel")}}
-    v-btn(text v-clipboard:copy='code' v-clipboard:success='copyLink' color="primary") {{$t("common.copy")}}
+    v-btn(text @click='clipboard(code)' color="primary") {{$t("common.copy")}}
 </template>
 <script>
 import { mapState } from 'vuex'
+import clipboard from '../../assets/clipboard'
 
 export default {
   name: 'EmbedEvent',
+  mixins: [clipboard],
   props: {
     event: { type: Object, default: () => ({}) }
   },
   computed: {
     ...mapState(['settings']),
     code () {
-      const script = `<script src='${this.settings.baseurl}/gancio-events.es.js'/>`
-      const el = `<gancio-event id='${this.event.id}' baseurl='${this.settings.baseurl}'></gancio-event>`
-      return { script, el }
-    }
-  },
-  methods: {
-    copyLink () {
-      this.$root.$message('common.copied', { color: 'success' })
+      return `<script src='${this.settings.baseurl}/gancio-events.es.js'/>\n<gancio-event baseurl='${this.settings.baseurl}' id=${this.event.id}></gancio-event>\n\n`
     }
   }
 }