Avatar, Badge, Checkbox, Chips, Pagination components (#10)

docs/.vitepress/config.js

@@ -10,20 +10,26 @@ export default {
         items: [
           { text: 'Introduction', link: '/' },
           { text: 'Setup', link: '/setup' },
-        ]
+        ],
       },
       {
         text: 'Components',
         items: [
-          { text: 'Icons', link: '/components/icons' },
+          { text: 'Avatar', link: '/components/avatar' },
+          { text: 'Badge', link: '/components/badge' },
           { text: 'Button', link: '/components/button' },
           { text: 'Card', link: '/components/card' },
-        ]
-      }
+          { text: 'Checkbox', link: '/components/checkbox' },
+          { text: 'Chips', link: '/components/chips' },
+          { text: 'Icons', link: '/components/icons' },
+          { text: 'Pagination', link: '/components/pagination' },
+        ],
+      },
     ],
     footer: {
-      message: 'Released under the <a href="https://github.com/modrinth/omoprhia/blob/main/LICENSE">GPLv3 License</a>.',
-      copyright: 'Copyright © 2023-present <a href="https://modrinth.com">Rinth, Inc.</a>'
+      message:
+        'Released under the <a href="https://github.com/modrinth/omoprhia/blob/main/LICENSE">GPLv3 License</a>.',
+      copyright: 'Copyright © 2023-present <a href="https://modrinth.com">Rinth, Inc.</a>',
     },
   },
   vite: {
@@ -40,15 +46,15 @@ export default {
               },
             },
           ],
-        }, }
-      ),
+        },
+      }),
     ],
     resolve: {
       alias: {
         '@': resolve(__dirname, '../../lib'),
-        'omorphia': resolve(__dirname, '../../lib'),
+        omorphia: resolve(__dirname, '../../lib'),
       },
       dedupe: ['vue'],
-    }
-  }
+    },
+  },
 }

docs/.vitepress/theme/DemoContainer.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="demo bg-raised radius-lg padding-md"><slot /></div>
+  <div class="demo bg-raised radius-lg padding-md"><slot /></div>
 </template>
 
 <script>
@@ -9,5 +9,9 @@ export default {}
 <style lang="scss" scoped>
 .demo {
   border: 1px solid var(--color-button-bg);
+  display: flex;
+  gap: var(--gap-md);
+  align-items: center;
+  flex-wrap: wrap;
 }
 </style>

docs/.vitepress/theme/compat.scss

@@ -3,12 +3,16 @@ body {
   background-color: var(--vp-c-bg);
 }
 
-.VPLink, .title, .pager-link, .link, .header-anchor {
+.VPLink,
+.title,
+.pager-link,
+.link,
+.header-anchor {
   color: inherit;
   transition: none;
 
   &:hover {
-     text-decoration: none;
+    text-decoration: none;
   }
 
   &:active:not(&:disabled) {

docs/.vitepress/theme/index.js

@@ -2,7 +2,6 @@ import DefaultTheme from 'vitepress/theme'
 import Omorphia from 'omorphia'
 import DemoContainer from './DemoContainer.vue'
 
-
 import './compat.scss'
 
 export default {
@@ -10,5 +9,5 @@ export default {
   enhanceApp(ctx) {
     ctx.app.use(Omorphia)
     ctx.app.component('DemoContainer', DemoContainer)
-  }
+  },
 }

docs/components/avatar.md

@@ -0,0 +1,16 @@
+# Icons
+
+<DemoContainer class="columns">
+<Avatar size="lg" circle src="https://cdn.modrinth.com/user/MpxzqsyW/eb0038489a55e7e7a188a5b50462f0b10dfc1613.jpeg" />
+<Avatar size="md" src="https://cdn.modrinth.com/data/AANobbMI/icon.png" />
+<Avatar size="md" src="https://cdn.modrinth.com/data/ssUbhMkL/icon.png" />
+<Avatar size="sm" />
+<Avatar size="xs" circle src="https://avatars1.githubusercontent.com/u/6166773?v=4" />
+</DemoContainer>
+
+```vue
+<Avatar size="lg" circle src="https://cdn.modrinth.com/user/MpxzqsyW/eb0038489a55e7e7a188a5b50462f0b10dfc1613.jpeg" />
+<Avatar size="md" src="https://cdn.modrinth.com/data/AANobbMI/icon.png" />
+<Avatar size="sm" />
+<Avatar size="xs" circle src="https://avatars1.githubusercontent.com/u/6166773?v=4" />
+```

docs/components/badge.md

@@ -0,0 +1,15 @@
+# Badge
+
+<DemoContainer>
+<Badge color="red" type="Tomato" />
+<Badge color="orange" type="Squash" />
+<Badge color="green" type="Lettuce" />
+<Badge type="Onion" />
+</DemoContainer>
+
+```vue
+<Badge color="red" type="Tomato" />
+<Badge color="orange" type="Squash" />
+<Badge color="green" type="Lettuce" />
+<Badge type="Onion" />
+```

docs/components/button.md

@@ -1,13 +1,9 @@
 # Button
 
 <DemoContainer>
-  <Button :action="() => {}" >
-  Test Button
-  </Button>
+<Button>Test Button</Button>
 </DemoContainer>
 
 ```vue
-<Button :action="() => {}" >
-Test Button
-</Button>
+<Button>Test Button</Button>
 ```

docs/components/card.md

@@ -1,9 +1,9 @@
 # Card
 
-<DemoContainer style="background-color: var(--color-bg)">
-  <Card>
-    This is a card!
-  </Card>
+<DemoContainer class="standard-body" style="background-color: var(--color-bg)">
+<Card>
+  This is a card!
+</Card>
 </DemoContainer>
 
 ```vue

docs/components/checkbox.md

@@ -0,0 +1,21 @@
+# Checkbox
+
+<script setup>
+import { ref } from "vue"; 
+
+const value = ref(false)
+</script>
+
+<DemoContainer>
+<Checkbox v-model="value">Test</Checkbox>
+</DemoContainer>
+
+```vue
+<script setup>
+import { ref } from "vue";
+
+const value = ref(false)
+</script>
+
+<Checkbox v-model="value">Test</Checkbox>
+```

docs/components/chips.md

@@ -0,0 +1,20 @@
+# Chips
+
+<script setup>
+import { ref } from "vue"; 
+
+const value = ref('option 1')
+</script>
+<DemoContainer>
+<Chips v-model="value" :items="['option 1', 'option 2', 'option 3', 'option 4']" />
+</DemoContainer>
+
+```vue
+<script setup>
+import { ref } from "vue"; 
+
+const value = ref('option 1')
+</script>
+
+<Chips v-model="value" :items="['option 1', 'option 2', 'option 3', 'option 4']" />
+```

docs/components/icons.md

@@ -1,9 +1,27 @@
 # Icons
 
+Omorphia includes a set of icons. You can view the available icons in the `~/assets/icons/*` folder of this repository.
+
 <DemoContainer>
-  <CheckIcon />
+<CheckIcon />
+<UnknownIcon />
+<SettingsIcon />
+<TagIcon />
+<SendIcon />
+<LogOutIcon />
+<HeartHandshakeIcon />
+<EyeOffIcon />
+<ClipboardCopyIcon />
 </DemoContainer>
 
 ```vue
 <CheckIcon />
+<UnknownIcon />
+<SettingsIcon />
+<TagIcon />
+<SendIcon />
+<LogOutIcon />
+<HeartHandshakeIcon />
+<EyeOffIcon />
+<ClipboardCopyIcon />
 ```

docs/components/pagination.md

@@ -0,0 +1,28 @@
+# Pagination
+
+<script setup>
+import { ref } from "vue"; 
+
+const currentPage = ref(1)
+
+function switchPage(page) {
+  currentPage.value = page
+}
+</script>
+<DemoContainer style="background-color: var(--color-bg)">
+<Pagination :page="currentPage" :count="100" @switch-page="switchPage" />
+</DemoContainer>
+
+```vue
+<script setup>
+import { ref } from "vue";
+
+const currentPage = ref(1)
+
+function switchPage(page) {
+  currentPage.value = page
+}
+</script>
+
+<Pagination :page="currentPage" :count="100" @switch-page="switchPage" />
+```