Fixed the custom dropdown menu, now I just need to style it.

17th Website/package-lock.json

@@ -8,6 +8,7 @@
       "name": "17th-website",
       "version": "0.0.0",
       "dependencies": {
+        "@headlessui/vue": "^1.7.13",
         "@mahdikhashan/vue3-click-outside": "^0.1.2",
         "vue": "^3.2.47",
         "vue-router": "^4.2.0"
@@ -909,6 +910,17 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "node_modules/@headlessui/vue": {
+      "version": "1.7.13",
+      "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.13.tgz",
+      "integrity": "sha512-obG5TdPdBDfs+jiA1mY29LPFqyJl93Q90EL86ontfRe1B6XvbjPkx+x1aAC5DA18bXbb0Juni1ayDbXo0w1u0A==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -10012,6 +10024,12 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "@headlessui/vue": {
+      "version": "1.7.13",
+      "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.13.tgz",
+      "integrity": "sha512-obG5TdPdBDfs+jiA1mY29LPFqyJl93Q90EL86ontfRe1B6XvbjPkx+x1aAC5DA18bXbb0Juni1ayDbXo0w1u0A==",
+      "requires": {}
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",

17th Website/package.json

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

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

@@ -46,6 +46,7 @@ export default {
             </button>
 
         </slot>
+        
         <slot />
     </div>
 </template>

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

@@ -21,12 +21,9 @@ export default {
 <style scoped>
 div {
     display: block;
-    /* flex-direction: column; */
     width: 10%;
     position: absolute;
     background-color: var(--background-secondary);
     border-radius: 0px 0px 10px 10px;
-    /* padding: 10px; */
-
 }
 </style>

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

@@ -0,0 +1,35 @@
+<template>
+    <Listbox v-model="selectedPerson">
+        <ListboxButton>{{ selectedPerson.name }}</ListboxButton>
+        <ListboxOptions>
+            <ListboxOption v-for="person in people" :key="person.id" :value="person" :disabled="person.unavailable">
+                {{ person.name }}
+            </ListboxOption>
+        </ListboxOptions>
+    </Listbox>
+</template>
+  
+<script setup>
+import { ref } from 'vue'
+import {
+    Listbox,
+    ListboxButton,
+    ListboxOptions,
+    ListboxOption,
+} from '@headlessui/vue'
+
+const people = [
+    { id: 1, name: 'Durward Reynolds', unavailable: false },
+    { id: 2, name: 'Kenton Towne', unavailable: false },
+    { id: 3, name: 'Therese Wunsch', unavailable: false },
+    { id: 4, name: 'Benedict Kessler', unavailable: true },
+    { id: 5, name: 'Katelyn Rohan', unavailable: false },
+]
+const selectedPerson = ref(people[0])
+</script>
+  
+<script>
+    export default {
+        name: 'testDropdown'
+    }
+</script>

17th Website/src/views/users.vue

@@ -1,7 +1,8 @@
 <script>
-import Dropdown from '../components/dropdown/Dropdown.vue'
+import { ref } from 'vue'
-import DropdownContent from '../components/dropdown/DropdownContent.vue'
+import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
-import DropdownItem from '../components/dropdown/DropDownItem.vue'
+import testDropdown from '../components/dropdown/testDropdown.vue'
+
 export default {
     data() {
         return {
@@ -10,7 +11,18 @@ export default {
             dropped: false,
             search: '',
             filter1: 'All Groups',
+
             filter2: 'All Roles',
+
+            unitFilters: [
+                { id: 1, name: 'All Groups', disabled: false },
+                { id: 2, name: 'Alpha', disabled: false },
+                { id: 3, name: 'Echo', disabled: false },
+                { id: 4, name: 'HHC', disabled: false },
+                { id: 5, name: 'Recruit', disabled: false },
+            ],
+
+            unitFilter: { id: 1, name: 'All Groups', disabled: false },
         }
     },
     methods: {
@@ -21,14 +33,21 @@ export default {
             this.filter1 = 'All Groups'
             this.filter2 = 'All Roles'
             this.search = ''
+            this.unitFilter.id = 1
+            this.unitFilter.name = 'All Groups'
         }
     },
     components: {
-        Dropdown,
+        Listbox,
-        DropdownContent,
+        ListboxButton,
-        DropdownItem
+        ListboxOption,
-    }
+        ListboxOptions,
+        testDropdown,
+    },
+
 }
+
+// const unitFilter = ref(unitFilters[1])
 </script>
 
 <template>
@@ -54,15 +73,17 @@ export default {
                     <option>RRC</option>
                 </select>
 
-                <dropdown title="All Groups">
+                <Listbox v-model="unitFilter">
-                    <DropdownContent>
+                    <ListboxButton class="lbButton">
-                        <DropdownItem>All Groups</DropdownItem>
+                        {{ unitFilter.name }}
-                        <DropdownItem>Echo</DropdownItem>
+                        <Icon icon="carbon:caret-down" />
-                        <DropdownItem>HHC</DropdownItem>
+                    </ListboxButton>
-                        <DropdownItem>Recruit</DropdownItem>
+                    <ListboxOptions class="lbOptions">
-                        <DropdownItem>Discharged</DropdownItem>
+                        <ListboxOption v-for="unit in unitFilters" :key="unit.id" :value="unit" :disabled="unit.disabled">
-                    </DropdownContent>
+                            {{ unit.name }}
-                </dropdown>
+                        </ListboxOption>
+                    </ListboxOptions>
+                </Listbox>
 
                 <!-- This button needs to get finished -->
                 <button @click="resetFilters()">Clear Filters</button>
@@ -94,6 +115,19 @@ export default {
 <style>
 @import '../assets/base.css';
 
+
+.lbButton {
+    background-color: var(--background-secondary);
+    border: none;
+    border-radius: 5px;
+}
+
+.lbOptions {
+    background-color: var(--background-secondary);
+    display: block;
+    position: absolute;
+}
+
 button {
     transition: all 0.2s ease-out;
     cursor: pointer;
@@ -143,7 +177,8 @@ input {
     display: flex;
 }
 
-#searchRow select, button {
+#searchRow select,
+button {
     margin: 0 15px 0 0;
 }