From 4d041b7b18932171fdf9f676d5aad51927ba7c27 Mon Sep 17 00:00:00 2001
From: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
Date: Tue, 7 Jan 2025 09:23:38 -0800
Subject: [PATCH 1/4] Convert class components to options components

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
---
 .../entity/filter/CustomFilterFacetPanel.vue  |  15 ++-
 .../entity/filter/EntityFilterChips.vue       |  90 +++++++------
 .../entity/filter/EntityFilterDialog.vue      |  25 ++--
 .../entity/filter/EntityFilterFacetPanel.vue  |  45 ++++---
 .../entity/filter/EntityFilterFacetPanels.vue | 127 ++++++++----------
 .../entity/filter/EntityFilterFacets.vue      |  50 +++----
 6 files changed, 175 insertions(+), 177 deletions(-)

diff --git a/src/components/entity/filter/CustomFilterFacetPanel.vue b/src/components/entity/filter/CustomFilterFacetPanel.vue
index b407c88..04bf874 100644
--- a/src/components/entity/filter/CustomFilterFacetPanel.vue
+++ b/src/components/entity/filter/CustomFilterFacetPanel.vue
@@ -10,12 +10,13 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component({
-  components: {},
-})
-export default class CustomFilterFacetPanel extends Vue {
-  @Prop({ default: "" }) title!: string;
+export default {
+        components: {},
+        props: {
+                title: {
+                        type:  String,
+                        default: ""
+                }
+        }
 }
 </script>
diff --git a/src/components/entity/filter/EntityFilterChips.vue b/src/components/entity/filter/EntityFilterChips.vue
index ff0b7e3..6429128 100644
--- a/src/components/entity/filter/EntityFilterChips.vue
+++ b/src/components/entity/filter/EntityFilterChips.vue
@@ -30,50 +30,52 @@ export interface EntityChips {
   filterString: string | boolean;
   filterField: string;
 }
-
-@Component({
-  computed: {
-    ...mapGetters(["getEntityFilters", "mdiClose"]),
-  },
-  methods: {
-    ...mapActions(["toggleEntityFilter"]),
-  },
-})
-export default class EntityFilterChips extends Vue {
-  getEntityFilters!: IEntityFilter;
-
-  get activeEntityFilters(): EntityChips[] {
-    var chips: EntityChips[] = [];
-    Object.keys(this.getEntityFilters).forEach((key) => {
-      if (Array.isArray(this.getEntityFilters[key])) {
-        chips.push(
-          ...(this.getEntityFilters[key] as string[]).map((item) => {
-            return { filterField: key, filterString: item };
-          })
-        );
-      } else if (
-        typeof this.getEntityFilters[key] === "string" &&
-        this.getEntityFilters[key] !== ""
-      ) {
-        let prefix = "";
-        if (key.startsWith("date")) {
-          prefix = key === "date_min" ? "From: " : "To: ";
-        }
-        chips.push({
-          filterField: key,
-          filterString: (prefix + this.getEntityFilters[key]) as string,
-        });
-      } else if (this.getEntityFilters[key]) {
-        chips.push({
-          filterField: key,
-          filterString:
+export default {
+        computed: {
+                ...mapGetters({
+                        getEntityFilters: "getEntityFilters",
+                        mdiClose: "mdiClose"
+                }),
+                activeEntityFilters: {
+                        get(): EntityChips[] {
+                                var chips: EntityChips[] = [];
+                                Object.keys(this.getEntityFilters).forEach((key) => {
+                                        if (Array.isArray(this.getEntityFilters[key])) {
+                                                chips.push(
+                                                        ...(this.getEntityFilters[key] as string[]).map((item) => {
+                                                                return { filterField: key, filterString: item };
+                                                        })
+                                                );
+                                        } else if (
+                                                typeof this.getEntityFilters[key] === "string" &&
+                                                        this.getEntityFilters[key] !== ""
+                                        ) {
+                                                let prefix = "";
+                                                if (key.startsWith("date")) {
+                                                        prefix = key === "date_min" ? "From: " : "To: ";
+                                                }
+                                                chips.push({
+                                                        filterField: key,
+                                                        filterString: (prefix + this.getEntityFilters[key]) as string,
+                                                });
+                                        } else if (this.getEntityFilters[key]) {
+                                                chips.push({
+                                                        filterField: key,
+                                                        filterString:
             key === "show_expired"
-              ? "Show Inactive Credentials"
-              : (key as string),
-        });
-      }
-    });
-    return chips;
-  }
+                    ? "Show Inactive Credentials"
+                    : (key as string),
+                                                });
+                                        }
+                                });
+                                return chips;
+                        }
+                },
+        },
+        methods: {
+                ...mapActions({
+                        toggleEntityFilter: "toggleEntityFilter"
+                }),
+        }
 }
 </script>
diff --git a/src/components/entity/filter/EntityFilterDialog.vue b/src/components/entity/filter/EntityFilterDialog.vue
index 177490b..2e24f2c 100644
--- a/src/components/entity/filter/EntityFilterDialog.vue
+++ b/src/components/entity/filter/EntityFilterDialog.vue
@@ -39,28 +39,21 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
 import { mapGetters } from "vuex";
 import EntityFilterFacetPanels from "@/components/entity/filter/EntityFilterFacetPanels.vue";
 
 interface Data {
   dialog: boolean;
 }
-
-@Component({
-  components: {
-    EntityFilterFacetPanels,
-  },
-  computed: {
-    ...mapGetters(["loading", "mdiFilterOutline", "mdiClose"]),
-  },
-})
-export default class EntityFilterDialog extends Vue {
-  data(): Data {
-    return {
-      dialog: false,
-    };
-  }
+export default {
+        data(): Data {
+                return {
+                        dialog: false,
+                };
+        },
+        computed: {
+                ...mapGetters(["loading", "mdiFilterOutline", "mdiClose"]),
+        }
 }
 </script>
 
diff --git a/src/components/entity/filter/EntityFilterFacetPanel.vue b/src/components/entity/filter/EntityFilterFacetPanel.vue
index 70b69b3..8b33509 100644
--- a/src/components/entity/filter/EntityFilterFacetPanel.vue
+++ b/src/components/entity/filter/EntityFilterFacetPanel.vue
@@ -22,8 +22,6 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
 import { IEntityFacetField } from "@/interfaces/entity-filter.interface";
 
 import EntityFilterFacets from "@/components/entity/filter/EntityFilterFacets.vue";
@@ -32,21 +30,32 @@ interface Data {
   show: boolean;
 }
 
-@Component({
-  components: {
-    EntityFilterFacets,
-  },
-})
-export default class EntityFilterFacetPanel extends Vue {
-  @Prop({ default: "" }) entityType!: string;
-  @Prop({ default: () => [] }) filterField!: string;
-  @Prop({ default: () => [] }) fields!: IEntityFacetField[];
-  @Prop({ default: () => [] }) more!: IEntityFacetField[];
-
-  data(): Data {
-    return {
-      show: false,
-    };
-  }
+export default {
+        data(): Data {
+                return {
+                        show: false,
+                }
+        },
+        components: {
+                EntityFilterFacets,
+        },
+        props: {
+                entityType: {
+                        type: String,
+                        default: "",
+                },
+                filterField: {
+                        type: String,
+                        default: () => [],
+                },
+                fields: {
+                        type:  Array<IEntityFacetField>,
+                        default: () => [],
+                },
+                more: {
+                        type: Array<IEntityFacetField>,
+                        default: () => [],
+                }
+        }
 }
 </script>
diff --git a/src/components/entity/filter/EntityFilterFacetPanels.vue b/src/components/entity/filter/EntityFilterFacetPanels.vue
index a59d7b7..c80b437 100644
--- a/src/components/entity/filter/EntityFilterFacetPanels.vue
+++ b/src/components/entity/filter/EntityFilterFacetPanels.vue
@@ -235,7 +235,6 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
 import { mapActions, mapGetters } from "vuex";
 
 import {
@@ -257,73 +256,65 @@ interface Data {
   panels: number[];
 }
 
-@Component({
-  components: {
-    Dialog,
-    EntityFilterFacetPanel,
-    CustomFilterFacetPanel,
-  },
-  computed: {
-    ...mapGetters([
-      "searchTopicFacets",
-      "getAuthorities",
-      "getCredentialTypes",
-      "getRegistrationTypes",
-      "getEntityFilters",
-      "mdiCalendar",
-      "mdiInformationOutline",
-    ]),
-  },
-  methods: {
-    ...mapActions(["setFilter"]),
-  },
-})
-export default class EntityFilterFacetPanels extends Vue {
-  @Prop({ default: "" }) entityType!: string;
-  getAuthorities!: Array<IEntityFacetField>;
-  getCredentialTypes!: Array<IEntityFacetField>;
-  getRegistrationTypes!: Array<IEntityFacetField>;
-  getEntityFilters!: IEntityFilter;
-  setFilter!: (filter: IEntityFilter) => void;
-  isEntityFilterActive: (
-    filterField: string,
-    getEntityFilters: IEntityFilter,
-    filterString?: string
-  ) => boolean = isEntityFilterActive;
-  data(): Data {
-    return {
-      menuFrom: false,
-      menuTo: false,
-      fromDate: "",
-      toDate: "",
-      panels: [0, 1, 2, 4],
-    };
-  }
-  toggleShowExpired(newVal: boolean): void {
-    var currFilters = { ...this.getEntityFilters };
-    currFilters.show_expired = !newVal;
-    this.setFilter(currFilters);
-  }
-  resetMinDate(): void {
-    var currFilters = { ...this.getEntityFilters };
-    currFilters.date_min = "";
-    this.setFilter(currFilters);
-  }
-  resetMaxDate(): void {
-    var currFilters = { ...this.getEntityFilters };
-    currFilters.date_max = "";
-    this.setFilter(currFilters);
-  }
-  handleMinDateChange(newVal: string): void {
-    var currFilters = { ...this.getEntityFilters };
-    currFilters.date_min = newVal;
-    this.setFilter(currFilters);
-  }
-  handleMaxDateChange(newVal: string): void {
-    var currFilters = { ...this.getEntityFilters };
-    currFilters.date_max = newVal;
-    this.setFilter(currFilters);
-  }
+export default {
+        props: {
+                entityType: {
+                        type: String,
+                        default: ""
+                }
+        },
+        data(): Data {
+                return {
+                        menuFrom: false,
+                        menuTo: false,
+                        fromDate: "",
+                        toDate: "",
+                        panels: [0, 1, 2, 4],
+                };
+        },
+        computed: {
+                ...mapGetters({
+                        searchTopicFacets: "searchTopicFacets",
+                        getAuthorities: "getAuthorities",
+                        getCredentialTypes: "getCredentialTypes",
+                        getRegistrationTypes: "getRegistrationTypes",
+                        getEntityFilters: "getEntityFilters",
+                        mdiCalendar: "mdiCalendar",
+                        mdiInformationOutline: "mdiInformationOutline",
+                }),
+        },
+        methods: {
+                isEntityFilterActive,
+                ...mapActions({
+                        setFilter: "setFilter"
+                }),
+                toggleShowExpired(newVal: boolean): void {
+                        var currFilters = { ...this.getEntityFilters };
+                        currFilters.show_expired = !newVal;
+                        this.setFilter(currFilters);
+                },
+                resetMinDate(): void {
+                        var currFilters = { ...this.getEntityFilters };
+                        currFilters.date_min = "";
+                        this.setFilter(currFilters);
+                },
+                resetMaxDate(): void {
+                        var currFilters = { ...this.getEntityFilters };
+                        currFilters.date_max = "";
+                        this.setFilter(currFilters);
+                },
+                handleMinDateChange(newVal: string): void {
+                        var currFilters = { ...this.getEntityFilters };
+                        currFilters.date_min = newVal;
+                        this.setFilter(currFilters);
+                },
+                handleMaxDateChange(newVal: string): void {
+                        var currFilters = { ...this.getEntityFilters };
+                        currFilters.date_max = newVal;
+                        this.setFilter(currFilters);
+                }
+
+        }
 }
 </script>
 
diff --git a/src/components/entity/filter/EntityFilterFacets.vue b/src/components/entity/filter/EntityFilterFacets.vue
index 279e581..00cce6d 100644
--- a/src/components/entity/filter/EntityFilterFacets.vue
+++ b/src/components/entity/filter/EntityFilterFacets.vue
@@ -46,7 +46,6 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
 import { mapGetters, mapActions } from "vuex";
 import {
   IEntityFacetField,
@@ -55,29 +54,32 @@ import {
 import { translate } from "@/i18n/translate";
 import { isEntityFilterActive, toTranslationFormat } from "@/utils/entity";
 
-@Component({
-  computed: {
-    ...mapGetters(["getEntityFilters"]),
-  },
-  methods: {
-    ...mapActions(["toggleEntityFilter"]),
-  },
-  directives: {
-    translate,
-  },
-})
-export default class EntityFilterFacets extends Vue {
-  @Prop({ default: "" }) entityType!: string;
-  @Prop({ default: () => [] }) filterField!: string;
-  @Prop({ default: () => [] }) fields!: IEntityFacetField[];
-
-  getEntityFilters!: IEntityFilter;
-  toTranslationFormat = toTranslationFormat;
-  isEntityFilterActive: (
-    filterField: string,
-    getEntityFilters: IEntityFilter,
-    filterString?: string
-  ) => boolean = isEntityFilterActive;
+export default {
+        computed: {
+                ...mapGetters(["getEntityFilters"]),
+        },
+        methods: {
+                ...mapActions(["toggleEntityFilter"]),
+                isEntityFilterActive,
+                toTranslationFormat
+        },
+        directives: {
+                translate,
+        },
+        props: {
+                entityType: {
+                        type:  String,
+                        default: ""
+                },
+                filterField: {
+                        type:  String,
+                        default: () => []
+                },
+                fields: {
+                        type:  Array<IEntityFacetField>,
+                        default: () => []
+                },
+        }
 }
 </script>
 

From f84156eca5aa47569cf83fa290ca71c518d407c1 Mon Sep 17 00:00:00 2001
From: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
Date: Wed, 8 Jan 2025 08:43:14 -0800
Subject: [PATCH 2/4] Migrate search and main views to options api

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
---
 src/components/about/OrgBookData.vue   |  35 ++++---
 src/components/about/ShowcaseLinks.vue |  12 +--
 src/components/contact/ContactForm.vue | 134 ++++++++++++-------------
 src/views/About.vue                    |  48 ++++-----
 src/views/Contact.vue                  |  14 +--
 src/views/Entity.vue                   |  12 +--
 src/views/Search.vue                   |  68 ++++---------
 7 files changed, 129 insertions(+), 194 deletions(-)

diff --git a/src/components/about/OrgBookData.vue b/src/components/about/OrgBookData.vue
index a25de0f..5d02752 100644
--- a/src/components/about/OrgBookData.vue
+++ b/src/components/about/OrgBookData.vue
@@ -51,26 +51,25 @@
 import i18n from "@/i18n";
 import { ICredentialType } from "@/interfaces/api/v2/credential-type.interface";
 import { unwrapTranslations } from "@/utils/entity";
-import { Component, Vue } from "vue-property-decorator";
 import { mapGetters } from "vuex";
 
-@Component({
-  computed: {
-    ...mapGetters(["credentialTypesByIssuer"]),
-  },
-})
-export default class OrgBookData extends Vue {
-  formattedDescription(type: ICredentialType): string {
-    if (type?.format === "vc_di") {
-      // TODO: Eventually, this should be a translation from OCA
-      return type?.schema?.name;
-    }
-    return (
-      unwrapTranslations(type.schema_label)?.[i18n.locale]?.description ||
-      type?.description ||
-      ""
-    );
-  }
+export default {
+        computed: {
+                ...mapGetters(["credentialTypesByIssuer"]),
+        },
+        methods: {
+                formattedDescription(type: ICredentialType): string {
+                        if (type?.format === "vc_di") {
+                                // TODO: Eventually, this should be a translation from OCA
+                                return type?.schema?.name;
+                        }
+                        return (
+                                unwrapTranslations(type.schema_label)?.[i18n.locale]?.description ||
+                                        type?.description ||
+                                        ""
+                        );
+                }
+        }
 }
 </script>
 
diff --git a/src/components/about/ShowcaseLinks.vue b/src/components/about/ShowcaseLinks.vue
index 1cfe77f..566808e 100644
--- a/src/components/about/ShowcaseLinks.vue
+++ b/src/components/about/ShowcaseLinks.vue
@@ -26,15 +26,13 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
 import { mapGetters } from "vuex";
 
-@Component({
-  computed: {
-    ...mapGetters(["showcaseLinks"]),
-  },
-})
-export default class ShowcaseLinks extends Vue {}
+export default {
+        computed: {
+                ...mapGetters(["showcaseLinks"]),
+        }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/contact/ContactForm.vue b/src/components/contact/ContactForm.vue
index e8628cf..c359a1a 100644
--- a/src/components/contact/ContactForm.vue
+++ b/src/components/contact/ContactForm.vue
@@ -135,27 +135,9 @@ interface Data {
   alwaysRequired: Array<boolean | string | ((v: string) => string | boolean)>;
   condRequired: Array<boolean | string | ((v: string) => string | boolean)>;
 }
+const emailRegexp = RegExp(/.+@.+/)
 
-@Component({
-  computed: {
-    ...mapGetters(["loading", "credentialTypes", "getLikeStatus"]),
-  },
-  methods: {
-    ...mapActions(["setLoading", "sendContact"]),
-  },
-})
-export default class ContactForm extends Vue {
-  formData!: IContactRequest;
-  credentialTypes!: ICredentialType[];
-  additionalHelp!: boolean;
-  getLikeStatus!: "like" | "dislike" | "";
-  emailRules!: Array<boolean | string | ((v: string) => string | boolean)>;
-
-  setLoading!: (loading: boolean) => void;
-  sendContact!: (feedback: IContactRequest) => Promise<void>;
-  // eslint-disable-next-line
-  emailRegexp = RegExp(/.+@.+/);
-
+export default {
   data(): Data {
     return {
       formData: {
@@ -167,66 +149,74 @@ export default class ContactForm extends Vue {
       additionalHelp: false,
       emailRules: [
         // eslint-disable-next-line
-        (v: string) => this.emailRegexp.test(v) || "E-mail must be valid",
+        (v: string) => emailRegexp.test(v) || "E-mail must be valid",
       ],
       alwaysRequired: [(v: string) => !!v || "This field is required"],
       condRequired: [
         (v: string) => !!v || this.incorrectHidden || "This field is required",
       ],
     };
-  }
-
-  get requestTypes(): Array<{ text: string; value: string }> {
-    return Object.keys(contactReason).map((key) => ({
-      text: contactReason[key],
-      value: key,
-    }));
-  }
-
-  get formattedCredentialTypes(): Array<{ text: string; value: number }> {
-    return this.credentialTypes.map((credentialType) => ({
-      // TODO: remove unwrap translations functions after backend update
-      text:
-        unwrapTranslations(credentialType.schema_label)?.[this.$i18n.locale]
-          ?.label ??
-        credentialType.description ??
-        "",
-      value: credentialType.id,
-    }));
-  }
-
-  get incorrectHidden(): boolean {
-    return this.formData.reason !== "INCORRECT_INFO";
-  }
-
-  get labelMessage(): string {
-    return this.formData.reason === "INCORRECT_INFO"
-      ? "Describe the problem"
-      : "Message";
-  }
-
-  async submit(e: Event): Promise<void> {
-    e.preventDefault();
-    const isFormValid = (
-      this.$refs.form as Vue & { validate: () => boolean }
-    ).validate();
-    if (isFormValid) {
-      this.setLoading(true);
-      if (this.getLikeStatus !== "") {
-        this.formData.comments = `${this.getLikeStatus}:\n${this.formData.comments}`;
-      }
-      const data = { ...this.formData };
-      data.reason = contactReason[this.formData.reason];
-      if (this.formData.error !== undefined) {
-        data.error = this.formattedCredentialTypes.filter(
-          (type) => String(type.value) === this.formData.error
-        )[0]?.text;
+  },
+  methods: {
+    ...mapActions({
+      setLoading: "setLoading",
+      sendContact: "sendContact"
+    }),
+    async submit(e: Event): Promise<void> {
+      e.preventDefault();
+      const isFormValid = (
+        this.$refs.form as Vue & { validate: () => boolean }
+      ).validate();
+      if (isFormValid) {
+        this.setLoading(true);
+        if (this.getLikeStatus !== "") {
+          this.formData.comments = `${this.getLikeStatus}:\n${this.formData.comments}`;
+        }
+        const data = { ...this.formData };
+        data.reason = contactReason[this.formData.reason];
+        if (this.formData.error !== undefined) {
+          data.error = this.formattedCredentialTypes.filter(
+            (type) => String(type.value) === this.formData.error
+          )[0]?.text;
+        }
+        await this.sendContact(data);
+        this.setLoading(false);
+        router.push({ name: "Search" });
       }
-      await this.sendContact(data);
-      this.setLoading(false);
-      router.push({ name: "Search" });
     }
-  }
+
+  },
+  computed: {
+    ...mapGetters({
+      loading: "loading",
+      credentialTypes: "credentialTypes",
+      getLikeStatus: "getLikeStatus"
+    }),
+    requestTypes: function(): Array<{ text: string; value: string }> {
+      return Object.keys(contactReason).map((key) => ({
+        text: contactReason[key],
+        value: key,
+      }));
+    },
+    formattedCredentialTypes: function(): Array<{ text: string; value: number }> {
+      return this.credentialTypes.map((credentialType) => ({
+        // TODO: remove unwrap translations functions after backend update
+        text: unwrapTranslations(credentialType.schema_label)?.[this.$i18n.locale]
+          ?.label ??
+          credentialType.description ??
+          "",
+        value: credentialType.id,
+      }));
+    },
+    incorrectHidden: function(): boolean {
+      return this.formData.reason !== "INCORRECT_INFO";
+    },
+    labelMessage: function(): string {
+      return this.formData.reason === "INCORRECT_INFO"
+        ? "Describe the problem"
+        : "Message";
+    },
+  },
 }
 </script>
 
diff --git a/src/views/About.vue b/src/views/About.vue
index ffcffa7..794916b 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -16,7 +16,6 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
 import BackTo from "@/components/shared/BackTo.vue";
 import OrgBookData from "@/components/about/OrgBookData.vue";
 import SubHeader from "@/components/layout/header/SubHeader.vue";
@@ -24,38 +23,29 @@ import ShowcaseLinks from "@/components/about/ShowcaseLinks.vue";
 import { mapActions, mapGetters } from "vuex";
 import { IDocRoute, IDocRouteData } from "@/interfaces/doc.interface";
 
-@Component({
-  components: {
-    BackTo,
-    OrgBookData,
-    SubHeader,
-    ShowcaseLinks,
-  },
+export default {
   computed: {
-    ...mapGetters(["docLinks", "docRoute", "showcaseLinks"]),
+    ...mapGetters({
+      docLinks: "docLinks",
+      docRoute: "docRoute",
+      showcaseLinks: "showcaseLinks"
+    }),
+    docRouteInfo: function(): IDocRoute {
+        return this.docRoute(this.$route.name || "");
+    },
+    docRouteData: function(): IDocRouteData | undefined {
+        return this.docRouteInfo?.data;
+    },
+    html: function(): string {
+        return this.docRouteData?.html || "";
+    },
   },
   methods: {
-    ...mapActions(["setLoading", "fetchCredentialTypes"]),
+    ...mapActions({
+      setLoading: "setLoading",
+      fetchCredentialTypes:  "fetchCredentialTypes"
+    })
   },
-})
-export default class About extends Vue {
-  docRoute!: (name: string) => IDocRoute;
-
-  setLoading!: (loading: boolean) => Promise<void>;
-  fetchCredentialTypes!: (paged: boolean) => Promise<void>;
-
-  get docRouteInfo(): IDocRoute {
-    return this.docRoute(this.$route.name || "");
-  }
-
-  get docRouteData(): IDocRouteData | undefined {
-    return this.docRouteInfo?.data;
-  }
-
-  get html(): string {
-    return this.docRouteData?.html || "";
-  }
-
   async created(): Promise<void> {
     this.setLoading(true);
     this.fetchCredentialTypes(false);
diff --git a/src/views/Contact.vue b/src/views/Contact.vue
index f0cc15f..6115247 100644
--- a/src/views/Contact.vue
+++ b/src/views/Contact.vue
@@ -14,24 +14,14 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
 import BackTo from "@/components/shared/BackTo.vue";
 import ContactForm from "@/components/contact/ContactForm.vue";
 import { mapActions } from "vuex";
 
-@Component({
-  components: {
-    BackTo,
-    ContactForm,
-  },
+export default {
   methods: {
-    ...mapActions(["setLoading", "fetchCredentialTypes"]),
+    ...mapActions({ setLoading: "setLoading", fetchCredentialTypes: "fetchCredentialTypes"}),
   },
-})
-export default class Contact extends Vue {
-  setLoading!: (loading: boolean) => void;
-  fetchCredentialTypes!: (paged: boolean) => Promise<void>;
-
   async created(): Promise<void> {
     this.setLoading(true);
     this.fetchCredentialTypes(false);
diff --git a/src/views/Entity.vue b/src/views/Entity.vue
index 5e7f266..1b3eed0 100644
--- a/src/views/Entity.vue
+++ b/src/views/Entity.vue
@@ -12,18 +12,10 @@ import { mapActions } from "vuex";
 
 Component.registerHooks(["beforeRouteLeave"]);
 
-@Component({
-  components: {
-    EntityResult,
-  },
+export default {
   methods: {
-    ...mapActions(["clearFilter", "setScrollY"]),
+    ...mapActions({ clearFilter: "clearFilter", setScrollY: "setScrollY"}),
   },
-})
-export default class Entity extends Vue {
-  clearFilter!: () => Promise<void>;
-  setScrollY!: (top: number) => void;
-
   async beforeRouteLeave(
     to: Route,
     from: Route,
diff --git a/src/views/Search.vue b/src/views/Search.vue
index fda7433..505b1ac 100644
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@@ -52,17 +52,11 @@ interface Data {
 
 Component.registerHooks(["beforeRouteEnter", "beforeRouteUpdate"]);
 
-@Component({
-  components: {
-    SearchBar,
-    SearchDescription,
-    SearchHelp,
-    SearchHome,
-    SearchLoading,
-    SearchResult: () =>
-      import(
-        /* webpackChunkName: "search-result" */ "@/components/search/SearchResult.vue"
-      ),
+export default {
+  data(): Data {
+    return {
+      q: null,
+    };
   },
   computed: {
     ...mapGetters(["loading", "searchQuery", "pagedSearchTopics"]),
@@ -74,22 +68,22 @@ Component.registerHooks(["beforeRouteEnter", "beforeRouteUpdate"]);
       "fetchSearchFacetedTopics",
       "resetSearch",
     ]),
+    async extractQueryAndDispatchSearch(query: ISearchQuery): Promise<void> {
+      this.q = query?.q || null;
+      const newQuery = { ...defaultQuery, ...query };
+      store.dispatch("setSearchQuery", newQuery);
+      store.dispatch("setSearchFilters", newQuery);
+      await this.search();
+    },
+    async search(): Promise<void> {
+      this.setLoading(true);
+      await Promise.all([
+        this.fetchCredentialTypes(false),
+        this.fetchSearchFacetedTopics(),
+      ]);
+      this.setLoading(false);
+    },
   },
-})
-export default class Search extends Vue {
-  q!: unknown;
-
-  setLoading!: (loading: boolean) => void;
-  fetchCredentialTypes!: (paged: boolean) => Promise<void>;
-  fetchSearchFacetedTopics!: () => Promise<void>;
-  resetSearch!: () => void;
-
-  data(): Data {
-    return {
-      q: null,
-    };
-  }
-
   async created(): Promise<void> {
     const query = this.$route.query as unknown as ISearchQuery;
     if (query?.q || query?.credential_type_id) {
@@ -97,8 +91,7 @@ export default class Search extends Vue {
     } else {
       this.resetSearch();
     }
-  }
-
+  },
   /**
    * This is executed when a filter is (de)selected. The state managed search query and filters
    * are updated in the store, which in turn active an in-place route change. The route change is
@@ -117,24 +110,7 @@ export default class Search extends Vue {
     } else {
       this.resetSearch();
     }
-  }
-
-  async extractQueryAndDispatchSearch(query: ISearchQuery): Promise<void> {
-    this.q = query?.q || null;
-    const newQuery = { ...defaultQuery, ...query };
-    store.dispatch("setSearchQuery", newQuery);
-    store.dispatch("setSearchFilters", newQuery);
-    await this.search();
-  }
-
-  async search(): Promise<void> {
-    this.setLoading(true);
-    await Promise.all([
-      this.fetchCredentialTypes(false),
-      this.fetchSearchFacetedTopics(),
-    ]);
-    this.setLoading(false);
-  }
+  },
 }
 </script>
 

From 17042a040ca87d06ea678a4d9ac7b158973791fd Mon Sep 17 00:00:00 2001
From: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
Date: Fri, 10 Jan 2025 08:55:06 -0800
Subject: [PATCH 3/4] Change format of get function

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
---
 .../entity/filter/EntityFilterChips.vue       | 86 +++++++++----------
 1 file changed, 42 insertions(+), 44 deletions(-)

diff --git a/src/components/entity/filter/EntityFilterChips.vue b/src/components/entity/filter/EntityFilterChips.vue
index 6429128..ccc645a 100644
--- a/src/components/entity/filter/EntityFilterChips.vue
+++ b/src/components/entity/filter/EntityFilterChips.vue
@@ -31,51 +31,49 @@ export interface EntityChips {
   filterField: string;
 }
 export default {
-        computed: {
-                ...mapGetters({
-                        getEntityFilters: "getEntityFilters",
-                        mdiClose: "mdiClose"
-                }),
-                activeEntityFilters: {
-                        get(): EntityChips[] {
-                                var chips: EntityChips[] = [];
-                                Object.keys(this.getEntityFilters).forEach((key) => {
-                                        if (Array.isArray(this.getEntityFilters[key])) {
-                                                chips.push(
-                                                        ...(this.getEntityFilters[key] as string[]).map((item) => {
-                                                                return { filterField: key, filterString: item };
-                                                        })
-                                                );
-                                        } else if (
-                                                typeof this.getEntityFilters[key] === "string" &&
-                                                        this.getEntityFilters[key] !== ""
-                                        ) {
-                                                let prefix = "";
-                                                if (key.startsWith("date")) {
-                                                        prefix = key === "date_min" ? "From: " : "To: ";
-                                                }
-                                                chips.push({
-                                                        filterField: key,
-                                                        filterString: (prefix + this.getEntityFilters[key]) as string,
-                                                });
-                                        } else if (this.getEntityFilters[key]) {
-                                                chips.push({
-                                                        filterField: key,
-                                                        filterString:
+  computed: {
+    ...mapGetters({
+      getEntityFilters: "getEntityFilters",
+      mdiClose: "mdiClose"
+    }),
+    get activeEntityFilters(): EntityChips[] {
+      var chips: EntityChips[] = [];
+      Object.keys(this.getEntityFilters).forEach((key) => {
+        if (Array.isArray(this.getEntityFilters[key])) {
+          chips.push(
+            ...(this.getEntityFilters[key] as string[]).map((item) => {
+              return { filterField: key, filterString: item };
+            })
+          );
+        } else if (
+          typeof this.getEntityFilters[key] === "string" &&
+            this.getEntityFilters[key] !== ""
+        ) {
+          let prefix = "";
+          if (key.startsWith("date")) {
+            prefix = key === "date_min" ? "From: " : "To: ";
+          }
+          chips.push({
+            filterField: key,
+            filterString: (prefix + this.getEntityFilters[key]) as string,
+          });
+        } else if (this.getEntityFilters[key]) {
+          chips.push({
+            filterField: key,
+            filterString:
             key === "show_expired"
-                    ? "Show Inactive Credentials"
-                    : (key as string),
-                                                });
-                                        }
-                                });
-                                return chips;
-                        }
-                },
-        },
-        methods: {
-                ...mapActions({
-                        toggleEntityFilter: "toggleEntityFilter"
-                }),
+              ? "Show Inactive Credentials"
+              : (key as string),
+          });
         }
+      });
+      return chips;
+    },
+  },
+  methods: {
+    ...mapActions({
+      toggleEntityFilter: "toggleEntityFilter"
+    }),
+  }
 }
 </script>

From 6414b4da52a139cbd51109ef00aab0b280cab792 Mon Sep 17 00:00:00 2001
From: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
Date: Fri, 10 Jan 2025 10:56:50 -0800
Subject: [PATCH 4/4] Ensure vuetify types will be properly resolved

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
---
 vite.config.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/vite.config.ts b/vite.config.ts
index 1031d28..d43c4e8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -27,7 +27,14 @@ export default defineConfig({
     alias:
       // Issue caused by https://github.com/vitejs/vite-plugin-vue2/issues/55
       // when we switch to vue 3 { "@": path.resolve(__dirname, "./src"), },
-      [{ find: "@", replacement: path.resolve(__dirname, "./src") }],
+      [
+        { find: "@", replacement: path.resolve(__dirname, "./src") },
+        // required to ensure that the vuetify types can be resolved
+        {
+          find: "vuetify/types",
+          replacement: path.resolve(__dirname, "./src"),
+        },
+      ],
   },
   css: {
     preprocessorOptions: {