From 0cdd98fa99c6bb6d46dc6b511625e098ce4b7051 Mon Sep 17 00:00:00 2001
From: ajdj100 <AJCampbell@conestogac.on.ca>
Date: Thu, 18 May 2023 23:13:51 -0400
Subject: [PATCH] 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                | 20 +++++++++++++++++++
 17th Website/package.json                     |  1 +
 .../src/components/dropdown/Dropdown.vue      |  6 +++++-
 .../src/components/dropdown/DropdownItem.vue  | 12 +++++++----
 17th Website/src/views/users.vue              |  2 --
 5 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/17th Website/package-lock.json b/17th Website/package-lock.json
index c4ff8fd..92774d0 100644
--- a/17th Website/package-lock.json	
+++ b/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",
diff --git a/17th Website/package.json b/17th Website/package.json
index a58583c..33144cf 100644
--- a/17th Website/package.json	
+++ b/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"
   },
diff --git a/17th Website/src/components/dropdown/Dropdown.vue b/17th Website/src/components/dropdown/Dropdown.vue
index 48f0125..7ad6130 100644
--- a/17th Website/src/components/dropdown/Dropdown.vue	
+++ b/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>
diff --git a/17th Website/src/components/dropdown/DropdownItem.vue b/17th Website/src/components/dropdown/DropdownItem.vue
index 014d300..d051f17 100644
--- a/17th Website/src/components/dropdown/DropdownItem.vue	
+++ b/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>
\ No newline at end of file
diff --git a/17th Website/src/views/users.vue b/17th Website/src/views/users.vue
index 05b5299..d08de6e 100644
--- a/17th Website/src/views/users.vue	
+++ b/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>