Add component API to built docs + Add Checkbox, CheckboxList, & CheckboxVirtualList

This commit is contained in:
venashial
2022-03-29 22:06:43 -07:00
parent 1da281de8a
commit 1d7949ded6
15 changed files with 374 additions and 56 deletions

View File

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

View File

@@ -0,0 +1,33 @@
```svelte example
<script lang="ts">
import CheckboxList from "omorphia/components/CheckboxList.svelte";
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',
},
]}
/>
Selected: {selected}
```

View File

@@ -0,0 +1,23 @@
```svelte example
<script lang="ts">
import CheckboxVirtualList from "omorphia/components/CheckboxVirtualList.svelte";
import IconStar from 'virtual:icons/heroicons-outline/star'
import uniqueId from 'lodash.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}
```

View File

@@ -13,8 +13,8 @@
label: 'Button'
},
{
href: '/Link',
label: 'Link'
href: '/Chips',
label: 'Chips'
},
{
href: '/NavRow',