Emit the events from the components

src/nginxconfig/templates/domain_sections/onion.vue

@@ -56,7 +56,7 @@ THE SOFTWARE.
                         </div>
                     </template>
 
-                    <div class="control" v-if="incorrectEnding">
+                    <div v-if="incorrectEnding" class="control">
                         <label class="text message is-warning">
                             <span class="message-body">
                                 {{ $t('templates.domainSections.onion.onionLocationExpectedToEndWithOnion') }}

src/nginxconfig/templates/prism/bash.vue

@@ -25,7 +25,7 @@ THE SOFTWARE.
 -->
 
 <template>
-    <div>
+    <div @copied="copied">
         <pre><code class="language-bash">{{ cmd }}</code></pre>
     </div>
 </template>
@@ -42,5 +42,10 @@ THE SOFTWARE.
             console.info(`Highlighting ${this.$props.cmd}...`);
             Prism.highlightAllUnder(this.$el);
         },
+        methods: {
+            copied(event) {
+                this.$emit('copied', event.detail.text);
+            },
+        },
     };
 </script>

src/nginxconfig/templates/prism/docker.vue

@@ -25,7 +25,7 @@ THE SOFTWARE.
 -->
 
 <template>
-    <div :class="`column ${half ? 'is-half' : 'is-full'} is-full-mobile is-full-tablet`">
+    <div :class="`column ${half ? 'is-half' : 'is-full'} is-full-mobile is-full-tablet`" @copied="copied">
         <h3 v-html="name"></h3>
         <pre><code class="language-docker" v-html="conf"></code></pre>
     </div>
@@ -46,5 +46,10 @@ THE SOFTWARE.
             console.info(`Highlighting ${this.$props.name}...`);
             Prism.highlightAllUnder(this.$el);
         },
+        methods: {
+            copied(event) {
+                this.$emit('copied', event.detail.text);
+            },
+        },
     };
 </script>

src/nginxconfig/templates/prism/nginx.vue

@@ -25,7 +25,7 @@ THE SOFTWARE.
 -->
 
 <template>
-    <div :class="`column ${half ? 'is-half' : 'is-full'} is-full-mobile is-full-tablet`">
+    <div :class="`column ${half ? 'is-half' : 'is-full'} is-full-mobile is-full-tablet`" @copied="copied">
         <h3 v-html="name"></h3>
         <pre><code class="language-nginx" v-html="conf"></code></pre>
     </div>
@@ -45,5 +45,10 @@ THE SOFTWARE.
             console.info(`Highlighting ${this.$props.name}...`);
             Prism.highlightAllUnder(this.$el);
         },
+        methods: {
+            copied(event) {
+                this.$emit('copied', event.detail.text);
+            },
+        },
     };
 </script>

src/nginxconfig/templates/prism/yaml.vue

@@ -25,7 +25,7 @@ THE SOFTWARE.
 -->
 
 <template>
-    <div :class="`column ${half ? 'is-half' : 'is-full'} is-full-mobile is-full-tablet`">
+    <div :class="`column ${half ? 'is-half' : 'is-full'} is-full-mobile is-full-tablet`" @copied="copied">
         <h3 v-html="name"></h3>
         <pre><code class="language-yaml" v-html="conf"></code></pre>
     </div>
@@ -46,5 +46,10 @@ THE SOFTWARE.
             console.info(`Highlighting ${this.$props.name}...`);
             Prism.highlightAllUnder(this.$el);
         },
+        methods: {
+            copied(event) {
+                this.$emit('copied', event.detail.text);
+            },
+        },
     };
 </script>