Mostly finished the button for the custom dropdown component. Just need to update the text displayed to reflect the current selection.

17th Website/package-lock.json

@@ -8,6 +8,7 @@
       "name": "17th-website",
       "version": "0.0.0",
       "dependencies": {
+        "@mahdikhashan/vue3-click-outside": "^0.1.2",
         "vue": "^3.2.47",
         "vue-router": "^4.2.0"
       },
@@ -1038,6 +1039,17 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/@mahdikhashan/vue3-click-outside": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@mahdikhashan/vue3-click-outside/-/vue3-click-outside-0.1.2.tgz",
+      "integrity": "sha512-8tJI5fvjemU4bG37EcxVvuYZJj6CHj3cDx1aAiYcOD/pzU5zQ7+BoJoXyI2Fx3fNH8Nwt+iQ1GsO4HRIUaqChQ==",
+      "dependencies": {
+        "vue": "^3.2.37"
+      },
+      "peerDependencies": {
+        "vue": "3.x.x"
+      }
+    },
     "node_modules/@node-ipc/js-queue": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@node-ipc/js-queue/-/js-queue-2.0.3.tgz",
@@ -10107,6 +10119,14 @@
       "dev": true,
       "peer": true
     },
+    "@mahdikhashan/vue3-click-outside": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@mahdikhashan/vue3-click-outside/-/vue3-click-outside-0.1.2.tgz",
+      "integrity": "sha512-8tJI5fvjemU4bG37EcxVvuYZJj6CHj3cDx1aAiYcOD/pzU5zQ7+BoJoXyI2Fx3fNH8Nwt+iQ1GsO4HRIUaqChQ==",
+      "requires": {
+        "vue": "^3.2.37"
+      }
+    },
     "@node-ipc/js-queue": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@node-ipc/js-queue/-/js-queue-2.0.3.tgz",

17th Website/package.json

@@ -10,6 +10,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@mahdikhashan/vue3-click-outside": "^0.1.2",
     "vue": "^3.2.47",
     "vue-router": "^4.2.0"
   },

17th Website/src/components/dropdown/Dropdown.vue

@@ -1,6 +1,7 @@
 <script>
 import { provide } from 'vue';
 import { Icon } from '@iconify/vue'
+import clickOutSide from '@mahdikhashan/vue3-click-outside'
 
 export default {
     name: 'Dropdown',
@@ -29,12 +30,15 @@ export default {
     },
     props: {
         title: String
+    },
+    directives: {
+        clickOutSide,
     }
 }
 </script>
 
 <template>
-    <div id="button" @click="toggle" v-click-away="away">
+    <div id="button" @click="toggle" v-click-out-side="away">
         <slot name="toggler">
             <button>
                 <p>{{ title }}</p>

17th Website/src/components/dropdown/DropdownItem.vue

@@ -11,10 +11,14 @@ export default {
 </template>
 
 <style scoped>
-div {
-    background-color: aliceblue;
+* {
+    color: var(--white);
+    padding: 5px;
 }
-h1 {
-    color: black !important;
+
+div:hover {
+    background-color: var(--accent-primary);
+    transition: color 0.5s;
 }
+
 </style>

17th Website/src/views/users.vue

@@ -62,8 +62,6 @@ export default {
                     </DropdownContent>
                 </dropdown>
 
-                <Icon icon="carbon:caret-down" />
-
                 <!-- This button needs to get finished -->
                 <button @click="resetFilters()">Clear Filters</button>
             </div>