From 712da967ce4d44f84382c642c439892cab344144 Mon Sep 17 00:00:00 2001
From: Marley <marleyrae1997@gmail.com>
Date: Fri, 14 Jul 2023 20:32:41 -0700
Subject: [PATCH] Improve dropdown

---
 frontend/components/Dropdown.vue | 11 ++++++++---
 frontend/pages/medias/index.vue  |  7 ++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/components/Dropdown.vue b/frontend/components/Dropdown.vue
index 6e2fd2a..4c832e2 100644
--- a/frontend/components/Dropdown.vue
+++ b/frontend/components/Dropdown.vue
@@ -7,19 +7,24 @@ const emit = defineEmits<{
   select: [item: string | number]
 }>()
 
-const open = ref(false)
+const [open, toggleOpen] = useToggle()
 
 const select = function (item) {
   emit('select', typeof item === 'object' ? item.id : item)
+  toggleOpen(false)
 }
+
+const dropdown = ref(null)
+onClickOutside(dropdown, () => toggleOpen(false))
 </script>
 
 <template>
-  <div>
-    <PrimaryButton @click="open = !open">
+  <div ref="dropdown">
+    <PrimaryButton @click="toggleOpen()">
       <slot /> &downarrow;
     </PrimaryButton>
 
+    <!--suppress VueUnrecognizedDirective -->
     <ul v-show="open" v-bind="$attrs">
       <li v-for="(item, index) in options" :key="index" @click="select(item)">
         <template v-if="typeof item === 'object'">
diff --git a/frontend/pages/medias/index.vue b/frontend/pages/medias/index.vue
index 808850a..74024c3 100644
--- a/frontend/pages/medias/index.vue
+++ b/frontend/pages/medias/index.vue
@@ -4,6 +4,8 @@ import medias from '@data/medias'
 const mediaList = computed(() => {
   return medias.filter((m) => m.type === 'book')
 })
+
+const category = ref('Books')
 </script>
 
 <template>
@@ -15,7 +17,10 @@ const mediaList = computed(() => {
           <TableTh>Copies</TableTh>
           <TableTh>Checked Out</TableTh>
           <TableTh actions>
-            <Dropdown :options="['books', 'films', 'albums']">Type</Dropdown>
+            <Dropdown :options="['Books', 'Films', 'Albums']"
+                      @select="(i) => category = (i as string)">
+              {{ category }}
+            </Dropdown>
             <PrimaryButton>Add New</PrimaryButton>
           </TableTh>
         </tr>