Reworked modals

src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="app-backdrop"></div>
   <router-view/>
+  <div id="modalSpot" />
 </template>
 
 <style lang="scss">

src/components/Modal.vue

@@ -1,14 +1,16 @@
 <template>
-  <div
-    class="modal"
-    :class="{hidden: !active}"
-  >
-    <div class="bg" @click="close" />
-    <div class="window">
-      <div class="close" @click="close">×</div>
-      <slot />
+  <teleport to="#modalSpot">
+    <div
+      class="modal"
+      :class="{hidden: !active}"
+    >
+      <div class="bg" @click="close" />
+      <div class="window">
+        <div class="close" @click="close">×</div>
+        <slot />
+      </div>
     </div>
-  </div>
+  </teleport>
 </template>
 
 <script>

src/views/Home/CategoryModal.vue

@@ -0,0 +1,66 @@
+<template>
+  <Modal ref="modal">
+    <div class="title">Assign Category</div>
+    <div
+      v-for="category in categories"
+      :key="category"
+      class="category"
+      :style="{ background: stringToColor(category) }"
+      @click="assignCategory(category)"
+    >
+      {{ category }}
+    </div>
+  </Modal>
+</template>
+
+<script>
+import { ref, computed } from 'vue';
+import { useStore } from 'vuex';
+import Modal from '@/components/Modal.vue';
+import toColor from '@/stringToColor';
+
+export default {
+  components: { Modal },
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const store = useStore();
+    const modal = ref(null);
+
+    const open = () => {
+      modal.value.open();
+    };
+    const close = () => {
+      modal.value.close();
+    };
+
+    const stringToColor = (str) => toColor(str);
+
+    const assignCategory = (category) => {
+      store.commit('assignCategory', { name: props.name, category });
+      modal.value.close();
+    };
+
+    return {
+      modal,
+      open,
+      close,
+      assignCategory,
+      stringToColor,
+      categories: computed(() => store.state.categories),
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.category {
+  margin-top: 12px;
+  border-radius: 24px !important;
+  padding: 12px 24px !important;
+}
+</style>

src/views/Home/Task.vue

@@ -34,18 +34,10 @@
       </div>
     </div>
 
-    <Modal ref="categorySelect" class="modal">
-      <div class="title">Assign Category</div>
-      <div
-        v-for="category in categories"
-        :key="category"
-        class="category"
-        :style="{ background: stringToColor(category) }"
-        @click="assignCategory(category)"
-      >
-        {{ category }}
-      </div>
-    </Modal>
+    <CategoryModal
+      ref="categorySelect"
+      :name="task.name"
+    />
 
     <div class="delete" @click="removeTask">
       <img src="@/assets/trash.svg" />
@@ -54,16 +46,13 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
 import toColor from '@/stringToColor';
 
-// import CategoryDropdown from './CategoryDropdown.vue';
-import Modal from '@/components/Modal.vue';
+import CategoryModal from './CategoryModal.vue';
 
 export default {
   components: {
-    // CategoryDropdown,
-    Modal,
+    CategoryModal,
   },
   props: {
     task: Object,
@@ -81,10 +70,6 @@ export default {
     stopTask() {
       this.$store.commit('stopTask', this.task.name);
     },
-    assignCategory(category) {
-      this.$store.commit('assignCategory', { name: this.task.name, category });
-      this.$refs.categorySelect.close();
-    },
     removeCategory() {
       this.$store.commit('assignCategory', {
         name: this.task.name,
@@ -120,9 +105,6 @@ export default {
 
       return `${days}d ${hours}h ${mins}m`;
     },
-    ...mapState({
-      categories: (state) => state.categories,
-    }),
   },
   mounted() {
     setInterval(() => {
@@ -194,14 +176,6 @@ export default {
     margin-left: 16px;
     cursor: pointer;
   }
-
-  .modal {
-    .category {
-      margin-top: 12px;
-      border-radius: 24px !important;
-      padding: 12px 24px !important;
-    }
-  }
 }
 
 @keyframes pulse {