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

Refactor folder structure

Browse Source
This commit is contained in:
venashial
2022-06-17 19:58:01 -07:00
parent 8204139df8
commit 137fbb638b
110 changed files with 45 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
docs/routes/components/Avatar.md Normal file
View File

@@ -0,0 +1,15 @@
Avatars are used for project icons and user profile pictures. Low resolution images are rendered pixelated to preserve pixel art.
```svelte example raised
<script lang="ts">
import { Avatar } from 'omorphia'
</script>
<Avatar size="lg" circle src="https://avatars3.githubusercontent.com/u/44736536?v=4" />
<Avatar size="md" src="https://cdn.modrinth.com/data/AANobbMI/icon.png" />
<Avatar
size="md"
src="https://staging-cdn.modrinth.com/data/d1SqMrzw/9a39b0c80a49976b0c04053682708374e18105fe.png" />
<Avatar size="sm" />
<Avatar size="xs" circle src="https://avatars1.githubusercontent.com/u/6166773?v=4" />
```

10
docs/routes/components/Badge.md Normal file
View File

@@ -0,0 +1,10 @@
```svelte example raised
<script lang="ts">
import { Badge } from 'omorphia'
</script>
<Badge color="red" label="Tomato" />
<Badge color="yellow" label="Squash" />
<Badge color="green" label="Lettuce" />
<Badge label="Onion" />
```

47
docs/routes/components/Button.md Normal file
View File

@@ -0,0 +1,47 @@
### Single example
```svelte example
<script lang="ts">
import { Button } from 'omorphia'
import IconDownload from 'virtual:icons/heroicons-outline/download'
</script>
<Button color="raised"><IconDownload /> Download</Button>
```
### Color variants example
```svelte example raised
<script lang="ts">
import { Button } from 'omorphia'
import IconDownload from 'virtual:icons/heroicons-outline/download'
</script>
<div class="button-group">
<Button>Default</Button>
<Button color="raised">Raised</Button>
<Button color="primary">Primary</Button>
<Button color="primary-light">Light primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="tertiary">Tertiary</Button>
<Button color="danger">Danger</Button>
<Button color="danger-light">Light danger</Button>
<Button color="transparent">Transparent</Button>
<Button disabled>Disabled</Button>
</div>
```
### With icons example
```svelte example raised
<script lang="ts">
import { Button } from 'omorphia'
import IconDownload from 'virtual:icons/heroicons-outline/download'
import IconHeart from 'virtual:icons/heroicons-outline/heart'
</script>
<div class="button-group">
<Button color="primary"><IconDownload /></Button>
<Button><IconHeart /> Follow mod</Button>
</div>
```

20
docs/routes/components/Checkbox.md Normal file
View File

@@ -0,0 +1,20 @@
### Text-only Example
```svelte example raised
<script lang="ts">
import { Checkbox } from 'omorphia'
</script>
<Checkbox>Extra components</Checkbox>
```
### Text with Icon Example
```svelte example raised
<script lang="ts">
import { Checkbox } from 'omorphia'
import IconCarrot from 'virtual:icons/lucide/carrot'
</script>
<Checkbox><IconCarrot /> Food</Checkbox>
```

36
docs/routes/components/CheckboxList.md Normal file
View File

@@ -0,0 +1,36 @@
```svelte example raised
<script lang="ts">
import { CheckboxList } from 'omorphia'
import IconSquare from 'virtual:icons/lucide/square'
import IconCircle from 'virtual:icons/lucide/circle'
import IconTriangle from 'virtual:icons/lucide/triangle'
let selected = []
</script>
<CheckboxList
bind:value={selected}
options={[
{
label: 'Circle',
icon: IconCircle,
value: 'CIR',
},
{
label: 'Triangle',
icon: IconTriangle,
value: 'TRI',
},
{
label: 'Square',
icon: IconSquare,
value: 'SQU',
},
{
label: 'Blank',
value: 'BLA',
},
]} />
Selected: {selected}
```

21
docs/routes/components/CheckboxVirtualList.md Normal file
View File

@@ -0,0 +1,21 @@
```svelte example raised
<script lang="ts">
import { CheckboxVirtualList } from 'omorphia'
import IconStar from 'virtual:icons/heroicons-outline/star'
import { uniqueId } from 'omorphia/utils/uniqueId'
let options = Array(100)
.fill({})
.map((option) => ({
label: 'Star-' + uniqueId(),
icon: IconStar,
value: uniqueId(),
}))
let selected = ['2', '6']
</script>
<CheckboxVirtualList bind:value={selected} {options} />
Selected: {selected}
```

47
docs/routes/components/Chips.md Normal file
View File

@@ -0,0 +1,47 @@
### Simple example
```svelte example raised
<script lang="ts">
import { Chips } from 'omorphia'
</script>
<Chips
options={[
{
label: 'One',
value: 'one',
},
{
label: 'Two',
value: 'two',
},
]} />
```
### Force an option to be selected with `neverEmpty`
```svelte example raised
<script lang="ts">
import { Chips } from 'omorphia'
let foo = 'modpack'
</script>
<Chips
neverEmpty
bind:value={foo}
options={[
{
label: 'Mod',
value: 'mod',
},
{
label: 'Modpack',
value: 'modpack',
},
{
label: 'World',
value: 'world',
},
]} />
```

12
docs/routes/components/Field.md Normal file
View File

@@ -0,0 +1,12 @@
```svelte example raised
<script lang="ts">
import { Field, Slider, TextInput } from 'omorphia'
</script>
<Field label="Favorite number" let:id>
<Slider min="0" max="100" value="69" {id} />
</Field>
<Field label="Favorite color" helper="Pick whatever color you like the most" let:id>
<TextInput placeholder="Enter another color..." {id} />
</Field>
```

13
docs/routes/components/Modal.md Normal file
View File

@@ -0,0 +1,13 @@
```svelte example raised
<script lang="ts">
import { Modal, Button } from 'omorphia'
import IconArrowRight from 'virtual:icons/heroicons-outline/arrow-right'
</script>
<Modal title="Example modal" danger cancelButton let:trigger>
<Button on:click={trigger} slot="trigger">Open modal</Button>
<p>Secret message goes here!</p>
<Button color="primary" slot="button"><IconArrowRight /> Continue</Button>
</Modal>
```

9
docs/routes/components/ModalDeletion.md Normal file
View File

@@ -0,0 +1,9 @@
```svelte example raised
<script lang="ts">
import { ModalDeletion, Button } from 'omorphia'
</script>
<ModalDeletion type="account" key="venashial" let:trigger>
<Button slot="trigger" color="danger" on:click={trigger}>Delete account</Button>
</ModalDeletion>
```

56
docs/routes/components/NavRow.md Normal file
View File

@@ -0,0 +1,56 @@
`NavRow` works well for most horizontal navigation with less than 10 items. It can be used with paths & query params, and supports specific path level (depths).
### Query example
```svelte example
<script lang="ts">
import { NavRow } from 'omorphia'
</script>
<div class="card card--strip card--pad-x">
<NavRow
level={1}
query={'tab'}
links={[
{
href: '',
label: 'All',
},
{
href: 'mods',
label: 'Mods',
},
{
href: 'modpacks',
label: 'Modpacks',
},
]} />
</div>
```
### Route example
```svelte example
<script lang="ts">
import { NavRow } from 'omorphia'
</script>
<div class="card card--strip card--pad-x">
<NavRow
level={1}
links={[
{
href: '/Button',
label: 'Button',
},
{
href: '/Chips',
label: 'Chips',
},
{
href: '/NavRow',
label: 'NavRow',
},
]} />
</div>
```

9
docs/routes/components/Pagination.md Normal file
View File

@@ -0,0 +1,9 @@
Use pagination to show a set of page numbers and navigation directions to move through paginated data.
```svelte example
<script lang="ts">
import { Pagination } from 'omorphia'
</script>
<Pagination page={20} count={500} />
```

17
docs/routes/components/Select.md Normal file
View File

@@ -0,0 +1,17 @@
```svelte example raised
<script lang="ts">
import { Select } from 'omorphia'
let sortMethod = 'downloads'
</script>
<Select
options={[
{ value: '', label: 'Relevance' },
{ value: 'downloads', label: 'Downloads' },
{ value: 'follows', label: 'Followers' },
{ value: 'newest', label: 'Recently created' },
{ value: 'updated', label: 'Recently updated' },
]}
bind:value={sortMethod} />
```

7
docs/routes/components/Slider.md Normal file
View File

@@ -0,0 +1,7 @@
```svelte example raised
<script lang="ts">
import { Slider } from 'omorphia'
</script>
<Slider min="0" max="10" value="4" />
```

9
docs/routes/components/TextInput.md Normal file
View File

@@ -0,0 +1,9 @@
```svelte example raised
<script lang="ts">
import { TextInput } from 'omorphia'
import IconSearch from 'virtual:icons/heroicons-outline/search'
</script>
<TextInput placeholder="Enter another color..." />
<TextInput icon={IconSearch} placeholder="Search..." />
```