For some reason the last changes didnt... go?

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

@@ -1,71 +1,32 @@
-<script>
-import { provide } from 'vue';
-import { Icon } from '@iconify/vue'
-import clickOutSide from '@mahdikhashan/vue3-click-outside'
-
-export default {
-    name: 'Dropdown',
-    provide() {
-        return {
-            sharedState: this.sharedState
-        }
-    },
-    data() {
-        return {
-            sharedState: {
-                active: false
-            }
-        }
-    },
-    methods: {
-        toggle() {
-            this.sharedState.active = !this.sharedState.active
-        },
-        away() {
-            this.sharedState.active = false
-        }
-    },
-    components: {
-        Icon
-    },
-    props: {
-        title: String
-    },
-    directives: {
-        clickOutSide,
-    }
-}
-</script>
-
 <template>
-    <div id="button" @click="toggle" v-click-out-side="away">
+    <Listbox v-model="unitFilter" class="w-32 mx-5">
-        <slot name="toggler">
+        <div class="relative">
-            <button>
+            <ListboxButton class="w-full h-full bg-gray-dark text-white px-4 rounded-md hover:bg-blue transition-all">
-                <p>{{ title }}</p>
-                <Icon icon="carbon:caret-down" />
-            </button>
 
-        </slot>
+                <span class="block w-full text-left">{{ unitFilter.name }}</span>
-        
+                <span class="absolute inset-y-0 right-0 flex items-center pr-2">
-        <slot />
+                    <Icon icon="carbon:chevron-sort" />
+                </span>
+            </ListboxButton>
+            <ListboxOptions class="w-full bg-gray-dark last:rounded-b-md first:rounded-none absolute text-white">
+                <ListboxOption v-for="unit in unitFilters" :key="unit.id" :value="unit" :disabled="unit.disabled"
+                    v-slot="{ active, selected }"
+                    class="ui-active:text-white p-3 hover:last:rounded-b-md hover:bg-blue transition-colors">
+                    <li>
+                        {{ unit.name }}
+                    </li>
+                </ListboxOption>
+            </ListboxOptions>
         </div>
+    </Listbox>
 </template>
 
-<style scoped>
+<script>
-button {
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
-    background-color: var(--background-secondary);
+
-    border: none;
+export default {
-    border-radius: 5px;
+    props: ['currentValue', 'values'],
-    font-size: 15px;
+    emits: ['update:currentValue']
-    padding: 10px;
-    padding-left: 15px;
-    color: var(--white);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
 }
 
-p {
+</script>
-    margin: 0 10px 0 0px;
-}
-</style>

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

@@ -1,29 +0,0 @@
-<script>
-import { inject } from 'vue';
-
-export default {
-    name: 'DropdownContent',
-    inject: ['sharedState'],
-    computed: {
-        active() {
-            return this.sharedState.active
-        }
-    }
-}
-</script>
-
-<template>
-    <div v-if="active">
-        <slot />
-    </div>
-</template>
-
-<style scoped>
-div {
-    display: block;
-    width: 10%;
-    position: absolute;
-    background-color: var(--background-secondary);
-    border-radius: 0px 0px 10px 10px;
-}
-</style>

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

@@ -1,31 +0,0 @@
-<script>
-export default {
-    name: 'dropdownItem',
-}
-</script>
-
-<template>
-    <div>
-        <slot></slot>
-    </div>
-</template>
-
-<style scoped>
-* {
-    color: var(--white);
-    padding: 10px;
-}
-
-div {
-    padding: 15px;
-}
-
-div:last-child {
-    border-radius: 0 0 5px 5px;
-}
-
-div:hover {
-    background-color: var(--accent-primary);
-}
-
-</style>

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

@@ -1,35 +0,0 @@
-<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

@@ -199,10 +199,10 @@ input {
     display: flex;
 }
 
-#searchRow select,
+/* #searchRow select,
 button {
     margin: 0 15px 0 0;
-}
+} */
 
 #header h1 {
     color: var(--white);
@@ -244,4 +244,5 @@ th {
     background-color: var(--background-secondary);
     font-size: 18px;
     cursor: auto;
-}</style>
+}
+</style>