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

Small button refactor, overflow and popout menus

Browse Source
This commit is contained in:
Prospector
2023-10-11 08:04:50 -07:00
parent c70ebb6cce
commit a708cf7f69
13 changed files with 556 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/.vitepress/config.js
View File

@@ -30,6 +30,8 @@ export default {
{ text: 'Modal', link: '/components/modal' },
{ text: 'Dropdown Select', link: '/components/dropdown-select' },
{ text: 'Dropdown Button', link: '/components/dropdown-button' },
{ text: 'Popout Menu', link: '/components/popout-menu' },
{ text: 'Overflow Menu', link: '/components/overflow-menu' },
{ text: 'Project Card', link: '/components/project-card' },
{ text: 'Environment Indicator', link: '/components/environment-indicator' },
{ text: 'Categories', link: '/components/categories' },

100
docs/components/button.md
View File

@@ -1,35 +1,77 @@
# Button
# Buttons
## Standard
<DemoContainer>
<Button>Standard</Button>
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="highlight">Highlight</Button>
<Button color="raised">Raised</Button>
<Button color="danger">Danger</Button>
<Button><CheckIcon /> With Icon</Button>
<Button iconOnly><XIcon /></Button>
<Button large>Large button</Button>
<Button color="primary" large>Discover mods</Button>
<Button color="danger" large outline>Be warned</Button>
<Button large outline>Sign up</Button>
<Button><HeartIcon /> Follow project</Button>
<Button outline color="danger"><TrashIcon /> Delete project</Button>
<Button><BookmarkIcon /> Save</Button>
<Button color="primary"><UploadIcon /> Upload</Button>
<Button color="secondary"><PlusIcon /> Create new instance</Button>
<Button color="highlight"><ScaleIcon /> Submit for review</Button>
<Button color="danger"><TrashIcon /> Delete</Button>
</DemoContainer>
```vue
<Button>Standard</Button>
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="highlight">Highlight</Button>
<Button color="raised">Raised</Button>
<Button color="danger">Danger</Button>
<Button><CheckIcon /> With Icon</Button>
<Button iconOnly><XIcon /></Button>
<Button large>Large button</Button>
<Button color="primary" large>Discover mods</Button>
<Button color="danger" large outline>Be warned</Button>
<Button large outline>Sign up</Button>
<Button><HeartIcon /> Follow project</Button>
<Button outline color="danger"><TrashIcon /> Delete project</Button>
<Button><HeartIcon /> Like</Button>
<Button color="primary"><UploadIcon /> Upload</Button>
<Button color="secondary"><EditIcon /> Edit</Button>
<Button color="highlight"><ScaleIcon /> Submit for review</Button>
<Button color="danger"><TrashIcon /> Delete</Button>
```
## Large
<DemoContainer>
<Button color="primary" large><DownloadIcon /> Download</Button>
<Button color="blue" large><ServerIcon /> Host a Server</Button>
<Button color="purple" large><HeartIcon /> Donate</Button>
</DemoContainer>
```vue
<Button color="primary" large><DownloadIcon /> Download</Button>
<Button color="blue" large><ServerIcon /> Host a Server</Button>
<Button color="purple" large><HeartIcon /> Donate</Button>
```
## Outline
<DemoContainer>
<Button color="primary" outline><DownloadIcon/> Get Modrinth App</Button>
<Button color="red" outline><ReportIcon /> Report project</Button>
</DemoContainer>
```vue
<Button color="primary" outline><DownloadIcon/> Get Modrinth App</Button>
<Button color="red" outline><ReportIcon /> Report project</Button>
```
## Transparent
<DemoContainer>
<Button transparent><IssuesIcon /> Report issues</Button>
<Button transparent><CodeIcon /> View sources</Button>
<Button color="blue" transparent><GlobeIcon/> Visit website</Button>
</DemoContainer>
```vue
<Button transparent><IssuesIcon /> Report issues</Button>
<Button transparent><CodeIcon /> View sources</Button>
<Button color="blue" transparent><GlobeIcon/> Visit website</Button>
```
## Icon-only
<DemoContainer>
<Button icon-only><HeartIcon /></Button>
<Button icon-only><XIcon /></Button>
<Button icon-only><MoreHorizontalIcon /></Button>
<Button icon-only transparent><SunIcon /></Button>
<Button icon-only transparent><DropdownIcon /></Button>
</DemoContainer>
```vue
<Button icon-only><HeartIcon /></Button>
<Button icon-only><XIcon /></Button>
<Button icon-only><MoreHorizontalIcon /></Button>
<Button icon-only transparent><SunIcon /></Button>
<Button icon-only transparent><DropdownIcon /></Button>
```

43
docs/components/overflow-menu.md Normal file
View File

@@ -0,0 +1,43 @@
<script setup>
const options = [
{
'id': 'like',
'color': 'primary',
'action': () => {}
},
{
'id': 'report',
'action': () => {}
},
{
'id': 'delete',
'color': 'danger',
'action': () => {}
}
]
</script>
# Popout Menu
<DemoContainer>
<OverflowMenu :options="options" class="btn">
More options...
<template #like>
<HeartIcon /> Like
</template>
<template #report>
<ReportIcon /> Report
</template>
<template #delete>
<TrashIcon /> Delete
</template>
</OverflowMenu>
</DemoContainer>
```vue
<PopoutMenu class="btn" position="bottom" direction="right">
Bottom going right
<template #menu>
Menu contents!
</template>
</PopoutMenu>
```

76
docs/components/popout-menu.md Normal file
View File

@@ -0,0 +1,76 @@
# Popout Menu
<DemoContainer>
<PopoutMenu class="btn" position="bottom" direction="left">
Bottom going left
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
<PopoutMenu class="btn" position="bottom" direction="right">
Bottom going right
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
<PopoutMenu class="btn" position="top" direction="left">
Top going left
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
<PopoutMenu class="btn" position="top" direction="right">
Top going right
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
<PopoutMenu class="btn" position="left" direction="up">
Left going up
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
<PopoutMenu class="btn" position="left" direction="down">
Left going down
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
<PopoutMenu class="btn" position="right" direction="up">
Right going up
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
<PopoutMenu class="btn" position="right" direction="down">
Right going down
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
</DemoContainer>
```vue
<PopoutMenu class="btn" position="bottom" direction="right">
Bottom going right
<template #menu>
Menu contents!
</template>
</PopoutMenu>
```