Search dropdown

docs/.vitepress/config.js

@@ -46,6 +46,7 @@ export default {
           { text: 'Notifications', link: '/components/notifications' },
           { text: 'Share Modal', link: '/components/share-modal' },
           { text: 'Analytics', link: '/components/analytics' },
+          { text: 'Search dropdown', link: '/components/search-dropdown' },
         ],
       },
     ],

docs/components/search-dropdown.md

@@ -0,0 +1,93 @@
+# Search Dropdown
+
+<script setup>
+import { ref } from "vue";
+
+const options = ref([]);
+const text = ref("");
+const onSelected = (option) => {
+  options.value.push(option);
+};
+</script>
+
+<DemoContainer>
+{{options}}
+{{text}}
+
+<SearchDropdown
+  placeholder="Search for dependencies"
+  @on-selected="onSelected"
+  v-model="text"
+  :options="[
+    {
+      title: 'Project 1',
+      subtitle: 'Author 1',
+      icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+      id: 'ejnfwfinj',
+    },
+    {
+      title: 'Project 2',
+      subtitle: 'Author 1',
+      icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+      id: 'ejnfwfinj',
+    },
+    {
+      title: 'Project 3',
+      subtitle: 'Author 1',
+      icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+      id: 'ejnfwfinj',
+    },
+    {
+      title: 'Project 3',
+      subtitle: 'Author 1',
+      icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+      id: 'ejnfwfinj',
+    },
+    {
+      title: 'Project 1',
+      subtitle: 'Author 1',
+      icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+      id: 'ejnfwfinj',
+    },
+    {
+      title: 'Project 2',
+      subtitle: 'Author 1',
+      icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+      id: 'ejnfwfinj',
+    },
+    {
+      title: 'Project 3',
+      subtitle: 'Author 1',
+      icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+      id: 'ejnfwfinj',
+    },
+    {
+      title: 'Project 3',
+      subtitle: 'Author 1',
+      icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+      id: 'ejnfwfinj',
+    }
+  ]"
+/>
+
+</DemoContainer>
+
+```vue
+<SearchDropdown
+  placeholder="Search for dependencies"
+  @on-selected="onSelected"
+  v-model="text"
+  disabled
+  render-up
+  circled-icons
+  :options="[
+    {
+      title: 'Project 1',
+      subtitle: 'Author 1',
+      icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+      ...
+    },
+    ...
+  ]"
+/>
+```

lib/components/index.js

@@ -27,6 +27,7 @@ export { default as ShareModal } from './base/ShareModal.vue'
 export { default as LineChart } from './base/LineChart.vue'
 export { default as PieChart } from './base/PieChart.vue'
 export { default as BarChart } from './base/BarChart.vue'
+export { default as SearchDropdown } from './search/SearchDropdown.vue'
 
 export { default as Categories } from './search/Categories.vue'
 export { default as SearchFilter } from './search/SearchFilter.vue'