From 2c6f825c6d1be427bc029c84e3ccf2a879aaefbf Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 7 Dec 2022 13:13:36 +0100
Subject: [PATCH] remove component scope

---
 .../TagsMultiselect/StatelessTags.vue         | 23 ++++++++-----------
 client/src/components/TagsMultiselect/Tag.vue | 13 ++++-------
 2 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index b3c15de2f4c..3363fa524a8 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -6,15 +6,17 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useUserTags } from "composables/user";
 import { useToast } from "composables/toast";
 import { useUid } from "composables/utils/uid";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faTags, faCheck, faTimes, faPlus } from "@fortawesome/free-solid-svg-icons";
 
 import type { Ref } from "vue";
 
 export interface StatelessTagsProps {
-    value: string[];
-    disabled: boolean;
-    clickable: boolean;
-    useToggleLink: boolean;
-    maxVisibleTags: number;
+    value?: string[];
+    disabled?: boolean;
+    clickable?: boolean;
+    useToggleLink?: boolean;
+    maxVisibleTags?: number;
 }
 
 const props = withDefaults(defineProps<StatelessTagsProps>(), {
@@ -30,6 +32,9 @@ const emit = defineEmits<{
     (e: "tag-click", tag: string): void;
 }>();
 
+//@ts-ignore bad library types
+library.add(faTags, faCheck, faTimes, faPlus);
+
 const { userTags, addLocalTag } = useUserTags();
 const { warning } = useToast();
 
@@ -108,14 +113,6 @@ function onTagClicked(tag: string) {
 }
 </script>
 
-<script lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faTags, faCheck, faTimes, faPlus } from "@fortawesome/free-solid-svg-icons";
-
-//@ts-ignore bad library types
-library.add(faTags, faCheck, faTimes, faPlus);
-</script>
-
 <template>
     <div class="stateless-tags px-1">
         <Multiselect
diff --git a/client/src/components/TagsMultiselect/Tag.vue b/client/src/components/TagsMultiselect/Tag.vue
index 4de7a184bcc..87dd4396e1b 100644
--- a/client/src/components/TagsMultiselect/Tag.vue
+++ b/client/src/components/TagsMultiselect/Tag.vue
@@ -2,6 +2,8 @@
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { keyedColorScheme } from "utils/color";
 import { computed } from "vue";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
 
 export interface TagProps {
     option: string;
@@ -17,6 +19,9 @@ const emit = defineEmits<{
     (e: "deleted", tag: string): void;
 }>();
 
+//@ts-ignore bad types
+library.add(faTimes);
+
 const color = computed(() => keyedColorScheme(props.option));
 
 function onClick() {
@@ -31,14 +36,6 @@ const named = computed(() => props.option?.startsWith("#"));
 const searched = computed(() => props.option?.toLowerCase() === props.search?.toLowerCase());
 </script>
 
-<script lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
-
-//@ts-ignore bad library types
-library.add(faTimes);
-</script>
-
 <template>
     <div
         class="tag btn-transparent-background"