[U] Rewrite BlogPost in composition api

src/components/BlogPost.vue

@@ -26,105 +26,89 @@
     </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import {Options, Vue} from 'vue-class-component';
+import Tag from "@/components/Tag.vue";
-import {Prop, Watch} from "vue-property-decorator";
+import {BlogPost} from "@/scripts/models";
+import {pushQuery} from "@/scripts/router";
 import {$, hosts} from "@/scripts/constants";
 import {marked} from "marked";
-import Tag from "@/components/Tag.vue";
+import moment from "moment/moment";
-import moment from "moment";
+import {computed, onMounted, watch} from 'vue';
-import {pushQuery} from "@/scripts/router";
 
-export interface BlogPost
+const p = withDefaults(defineProps<{
+    meta: BlogPost
+    imageOnTop?: boolean
+    tagOnTop?: boolean
+    active?: boolean
+}>(), {
+    imageOnTop: false,
+    tagOnTop: true,
+    active: false
+})
+
+const uid = (Math.random() + 1).toString(36).substring(7)
+
+let isActiveChangeDueToClickTitle = false
+
+function clickTitle(): void
 {
-    id: number
+    console.log(`Blog Post: ClickTitle called on`, p.meta.title)
-    title: string
+    isActiveChangeDueToClickTitle = true
-    tags: string[]
-    file: string
-    date: string
-    url_name: string
-
-    content: string
-
-    subtitle?: string
-    title_image?: string
-    category?: string
-    pinned?: number
-}
-
-@Options({components: {Tag}})
-export default class BlogPostPreview extends Vue
-{
-    @Prop({required: true}) meta!: BlogPost
-    @Prop({default: false}) imageOnTop = false
-    @Prop({default: true}) tagOnTop = true
-    @Prop({default: false}) active = false
-
-    readonly uid = (Math.random() + 1).toString(36).substring(7)
-
-    isActiveChangeDueToClickTitle = false
-
-    clickTitle(): void
-    {
-        console.log(`Blog Post: ClickTitle called on`, this.meta.title)
-        this.isActiveChangeDueToClickTitle = true
 
     // Change url
-        if (!this.active) pushQuery({post: this.meta.url_name})
+    if (!p.active) pushQuery({post: p.meta.url_name})
     else pushQuery({post: null})
 }
 
-    mounted(): void
+onMounted(() => {
-    {
+    updateTitle()
-        this.updateTitle()
 
     // Create accordion
-        $(`.${this.uid}`).accordion({collapsible: true, header: '#titles', heightStyle: 'content',
+    $(`.${uid}`).accordion({
-            active: this.active ? 0 : false})
+        collapsible: true, header: '#titles', heightStyle: 'content',
-    }
+        active: p.active ? 0 : false
+    })
+})
 
 /**
  * Watch active status change, use this to change accordions' activation on history back/forward
  *
  * Also use this to change the title
  */
-    @Watch('active')
+watch(() => p.active, (active, _) => {
-    onActiveChange(): void
+    updateTitle()
-    {
-        this.updateTitle()
 
     // Ignore active status changes due to clicking the title
-        console.log('Blog Post: onActiveChange Called on', this.meta.title)
+    console.log('Blog Post: onActiveChange Called on', p.meta.title)
-        if (this.isActiveChangeDueToClickTitle)
+    if (isActiveChangeDueToClickTitle)
     {
-            this.isActiveChangeDueToClickTitle = false
+        isActiveChangeDueToClickTitle = false
         return
     }
 
     // Change accordion activation status
-        $(`.${this.uid}`).accordion('option', {active: this.active ? 0 : false});
+    $(`.${uid}`).accordion('option', {active: active ? 0 : false});
-    }
+})
 
-    updateTitle(): void
+function updateTitle(): void
 {
-        if (this.active) document.title = `Blog: ${this.meta.title}`
+    if (p.active) document.title = `Blog: ${p.meta.title}`
 }
 
 /**
  * Element classes
  */
-    get elClass(): string[]
+const elClass = computed(() =>
 {
-        let classes = [this.uid]
+    let classes = [uid]
-        if (this.imageOnTop) classes.push('image-top')
+    if (p.imageOnTop) classes.push('image-top')
-        if (this.tagOnTop) classes.push('tag-top')
+    if (p.tagOnTop) classes.push('tag-top')
     return classes
-    }
+})
 
-    get content(): string { return marked(this.meta.content.replaceAll('\n', '  \n')) }
+const content = computed(() => marked(p.meta.content.replaceAll('\n', '  \n')))
-    get date(): moment.Moment { return moment(this.meta.date) }
+const date = moment(p.meta.date)
-    get image(): string | null { return this.meta.title_image ? hosts.content + '/' + this.meta.title_image : null }
+const image = p.meta.title_image ? hosts.content + '/' + p.meta.title_image : null
-}
 </script>
 
 <style lang="sass" scoped>