Improve dropdown

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'">

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>