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,190 @@
+# 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',
+      author: 'Author 1',
+      icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+      id: 'ejnfwfinj',
+    },
+    {
+      title: 'Project 2',
+      author: 'Author 1',
+      icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+      id: 'ejnfwfinj',
+    },
+    {
+      title: 'Project 3',
+      author: 'Author 1',
+      icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+      id: 'ejnfwfinj',
+    },
+    {
+      title: 'Project 3',
+      author: 'Author 1',
+      icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+      id: 'ejnfwfinj',
+    },
+{
+title: 'Project 1',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 2',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 3',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 3',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+}
+  ]"
+/>
+<SearchDropdown
+placeholder="Search for dependencies"
+@on-selected="onSelected"
+v-model="text"
+disabled
+:options="[
+{
+title: 'Project 1',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 2',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 3',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 3',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 1',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 2',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 3',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 3',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+}
+]"
+/>
+
+<SearchDropdown
+placeholder="Search for dependencies"
+@on-selected="onSelected"
+v-model="text"
+render-up
+:options="[
+{
+title: 'Project 1',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 2',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 3',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 3',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 1',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 2',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 3',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+},
+{
+title: 'Project 3',
+author: 'Author 1',
+icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
+id: 'ejnfwfinj',
+}
+]"
+/>
+
+
+
+</DemoContainer>

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'