tomasalias/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Search dropdown (#91)

Browse Source 
* Bar charts

* Update package.json

* Search Dropdown

* Add circle icon option
This commit is contained in:
Adrian O.V
2023-09-13 16:21:13 -04:00
committed by GitHub
parent ec35392cd1
commit ae7f7e9bd6
4 changed files with 424 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/.vitepress/config.js
View File

@@ -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' },
],
},
],

93
docs/components/search-dropdown.md Normal file
View File

@@ -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',
...
},
...
]"
/>
```