From 1232da53ed6c9b8657e74f2031e52e5ec2fce17e Mon Sep 17 00:00:00 2001
From: Hykilpikonna <me@hydev.org>
Date: Mon, 27 Dec 2021 12:28:15 -0500
Subject: [PATCH] [M] Move clickTag to inside Tag

---
 src/components/BlogPost.vue | 10 ++--------
 src/components/Tag.vue      | 17 ++++++++++++++---
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/BlogPost.vue b/src/components/BlogPost.vue
index f326ac1..d1722cf 100644
--- a/src/components/BlogPost.vue
+++ b/src/components/BlogPost.vue
@@ -8,7 +8,7 @@
             <div id="subtitle" v-if="meta.subtitle">{{meta.subtitle}}</div>
             <div class="tags">
                 <div v-if="tagOnTop" style="display: inline-block">
-                    <Tag v-for="t in meta.tags" :key="t" direction="left" @click="e => clickTag(e, t)">{{t}}</Tag>
+                    <Tag v-for="t in meta.tags" :key="t" direction="left">{{t}}</Tag>
                 </div>
                 <i id="pin" class="fas fa-thumbtack" v-if="meta.pinned"></i>
             </div>
@@ -20,7 +20,7 @@
                 <Dynamic :template="content"></Dynamic>
             </div>
             <div class="tags" v-if="!tagOnTop">
-                <Tag v-for="t in meta.tags" :key="t" direction="right" @click="e => clickTag(e, t)">{{t}}</Tag>
+                <Tag v-for="t in meta.tags" :key="t" direction="right">{{t}}</Tag>
             </div>
         </div>
     </div>
@@ -112,12 +112,6 @@ export default class BlogPostPreview extends Vue
         if (this.active) document.title = `Blog: ${this.meta.title}`
     }
 
-    clickTag(e: PointerEvent, t: string): void
-    {
-        e.stopPropagation()
-        pushQuery({tag: t})
-    }
-
     /**
      * Element classes
      */
diff --git a/src/components/Tag.vue b/src/components/Tag.vue
index 5d517c5..01a88ed 100644
--- a/src/components/Tag.vue
+++ b/src/components/Tag.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="tag-wrap">
+    <div class="tag-wrap unselectable clickable" @click="e => clickTag(e)">
         <div class="tag fbox-vcenter" :class="direction">
-            <slot></slot>
+            <div ref="el"><slot></slot></div>
             <div class="after"></div>
         </div>
     </div>
@@ -9,12 +9,23 @@
 
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
-import {Prop} from "vue-property-decorator";
+import {Prop, Ref} from "vue-property-decorator";
+import {pushQuery} from "@/scripts/router";
 
 @Options({components: {}})
 export default class Tag extends Vue
 {
     @Prop({default: 'left'}) direction: 'left' | 'right' = 'left'
+    @Prop() tagName?: string
+
+    @Ref() readonly el!: HTMLDivElement
+
+    clickTag(e: PointerEvent): void
+    {
+        const t = this.tagName ?? this.el.innerText
+        e.stopPropagation()
+        pushQuery({tag: t})
+    }
 }
 </script>