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

lib/components/base/Avatar.vue

@@ -0,0 +1,120 @@
+<template>
+  <img
+    v-if="src"
+    ref="img"
+    :class="`avatar size-${size} ${circle ? 'circle' : ''} ${noShadow ? 'no-shadow' : ''}`"
+    :src="src"
+    :alt="alt"
+    :loading="loading"
+  />
+  <svg
+    v-else
+    :class="`avatar size-${size} ${circle ? 'circle' : ''} ${noShadow ? 'no-shadow' : ''}`"
+    xml:space="preserve"
+    fill-rule="evenodd"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-miterlimit="1.5"
+    clip-rule="evenodd"
+    viewBox="0 0 104 104"
+    aria-hidden="true"
+  >
+    <path fill="none" d="M0 0h103.4v103.4H0z" />
+    <path
+      fill="none"
+      stroke="#9a9a9a"
+      stroke-width="5"
+      d="M51.7 92.5V51.7L16.4 31.3l35.3 20.4L87 31.3 51.7 11 16.4 31.3v40.8l35.3 20.4L87 72V31.3L51.7 11"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    src: {
+      type: String,
+      default: null,
+    },
+    alt: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: String,
+      default: 'sm',
+      validator(value) {
+        return ['xs', 'sm', 'md', 'lg'].includes(value)
+      },
+    },
+    circle: {
+      type: Boolean,
+      default: false,
+    },
+    noShadow: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: String,
+      default: 'eager',
+    },
+  },
+  mounted() {
+    if (this.$refs.img && this.$refs.img.naturalWidth) {
+      const isPixelated = () => {
+        if (this.$refs.img.naturalWidth < 96 && this.$refs.img.naturalWidth > 0) {
+          this.$refs.img.style.imageRendering = 'pixelated'
+        }
+      }
+
+      if (this.$refs.img.naturalWidth) {
+        isPixelated()
+      } else {
+        this.$refs.img.onload = isPixelated
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.avatar {
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-inset-lg), var(--shadow-card);
+  height: var(--size);
+  width: var(--size);
+  background-color: var(--color-button-bg);
+  object-fit: contain;
+
+  &.size-xs {
+    --size: 2.5rem;
+    box-shadow: var(--shadow-inset), var(--shadow-card);
+    border-radius: var(--radius-sm);
+  }
+
+  &.size-sm {
+    --size: 3rem;
+    box-shadow: var(--shadow-inset), var(--shadow-card);
+    border-radius: var(--radius-sm);
+  }
+
+  &.size-md {
+    --size: 6rem;
+    border-radius: var(--radius-lg);
+  }
+
+  &.size-lg {
+    --size: 9rem;
+    border-radius: var(--radius-lg);
+  }
+
+  &.circle {
+    border-radius: 50%;
+  }
+
+  &.no-shadow {
+    box-shadow: none;
+  }
+}
+</style>

lib/components/base/Badge.vue

@@ -0,0 +1,118 @@
+<template>
+  <span :class="'version-badge ' + color + ' type--' + type">
+    <template v-if="color"> <span class="circle" /> {{ type }} </template>
+
+    <!-- User roles -->
+    <template v-else-if="type === 'admin'"> <ModrinthIcon /> Modrinth Team </template>
+    <template v-else-if="type === 'moderator'"> <ScaleIcon /> Moderator </template>
+    <template v-else-if="type === 'creator'"><BoxIcon /> Creator</template>
+
+    <!-- Project statuses -->
+    <template v-else-if="type === 'approved'"><ListIcon /> Listed</template>
+    <template v-else-if="type === 'unlisted'"><EyeOffIcon /> Unlisted</template>
+    <template v-else-if="type === 'withheld'"><EyeOffIcon /> Withheld</template>
+    <template v-else-if="type === 'private'"><LockIcon /> Private</template>
+    <template v-else-if="type === 'scheduled'"> <CalendarIcon /> Scheduled </template>
+    <template v-else-if="type === 'draft'"><FileTextIcon /> Draft</template>
+    <template v-else-if="type === 'archived'"> <ArchiveIcon /> Archived </template>
+    <template v-else-if="type === 'rejected'"><XIcon /> Rejected</template>
+    <template v-else-if="type === 'processing'"> <UpdatedIcon /> Under review </template>
+
+    <!-- Team members -->
+    <template v-else-if="type === 'accepted'"><CheckIcon /> Accepted</template>
+    <template v-else-if="type === 'pending'"> <UpdatedIcon /> Pending </template>
+    <template v-else> <span class="circle" /> {{ type }} </template>
+  </span>
+</template>
+
+<script setup>
+import {
+  ModrinthIcon,
+  ScaleIcon,
+  BoxIcon,
+  ListIcon,
+  EyeOffIcon,
+  FileTextIcon,
+  XIcon,
+  ArchiveIcon,
+  UpdatedIcon,
+  CheckIcon,
+  LockIcon,
+  CalendarIcon,
+} from '@/components'
+
+defineProps({
+  type: {
+    type: String,
+    required: true,
+  },
+  color: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.version-badge {
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  width: fit-content;
+  --badge-color: var(--color-gray);
+  color: var(--badge-color);
+
+  .circle {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    display: inline-block;
+    margin-right: 0.25rem;
+    background-color: var(--badge-color);
+  }
+
+  svg {
+    margin-right: 0.25rem;
+  }
+
+  &.type--withheld,
+  &.type--rejected,
+  &.red {
+    --badge-color: var(--color-red);
+  }
+
+  &.type--pending,
+  &.type--moderator,
+  &.type--processing,
+  &.type--scheduled,
+  &.orange {
+    --badge-color: var(--color-orange);
+  }
+
+  &.type--accepted,
+  &.type--admin,
+  &.green {
+    --badge-color: var(--color-green);
+  }
+
+  &.type--creator,
+  &.type--approved,
+  &.blue {
+    color: var(--color-blue);
+  }
+
+  &.type--unlisted,
+  &.purple {
+    color: var(--color-purple);
+  }
+
+  &.type--private,
+  &.gray {
+    --badge-color: var(--color-gray);
+  }
+
+  &::first-letter {
+    text-transform: capitalize;
+  }
+}
+</style>

lib/components/base/Button.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { IssuesIcon, ExternalIcon, UnknownIcon} from '@/components'
+import { ExternalIcon, UnknownIcon } from '@/components'
 
 import { computed } from 'vue'
 
@@ -27,7 +27,7 @@ const props = defineProps({
   iconOnly: {
     type: Boolean,
     default: false,
-  }
+  },
 })
 
 const defaultDesign = computed(() => props.design === 'default')
@@ -56,7 +56,7 @@ const accentedButton = computed(
   <!--  </nuxt-link>-->
   <a
     v-if="link"
-    class="omorphia__button button-base padding-block-sm padding-inline-lg radius-sm"
+    class="omorphia__button button-base padding-block-sm padding-inline-lg radius-md"
     :class="{
       'standard-button': defaultDesign,
       'icon-only': props.iconOnly,
@@ -73,8 +73,8 @@ const accentedButton = computed(
     <UnknownIcon v-if="!$slots.default" />
   </a>
   <button
-    v-else-if="action"
-    class="omorphia__button button-base padding-block-sm padding-inline-lg radius-sm"
+    v-else
+    class="omorphia__button button-base padding-block-sm padding-inline-lg radius-md"
     :class="{
       'standard-button': defaultDesign,
       'icon-only': props.iconOnly,
@@ -88,13 +88,6 @@ const accentedButton = computed(
     <slot />
     <UnknownIcon v-if="!$slots.default" />
   </button>
-  <div
-    v-else
-    class="omorphia__button button-base button-color-base padding-block-sm padding-inline-lg radius-sm bg-red color-accent-contrast"
-  >
-    <IssuesIcon />
-    Missing link or action!
-  </div>
 </template>
 
 <style lang="scss" scoped>

lib/components/base/Checkbox.vue

@@ -0,0 +1,136 @@
+<template>
+  <div
+    class="checkbox-outer button-within"
+    :class="{ disabled }"
+    role="presentation"
+    @click="toggle"
+  >
+    <button
+      class="checkbox"
+      role="checkbox"
+      :disabled="disabled"
+      :class="{ checked: modelValue, collapsing: collapsingToggleStyle }"
+      :aria-label="description"
+      :aria-checked="modelValue"
+    >
+      <CheckIcon v-if="modelValue && !collapsingToggleStyle" aria-hidden="true" />
+      <DropdownIcon v-else-if="collapsingToggleStyle" aria-hidden="true" />
+    </button>
+    <!-- aria-hidden is set so screenreaders only use the <button>'s aria-label -->
+    <p v-if="label" aria-hidden="true">
+      {{ label }}
+    </p>
+    <slot v-else />
+  </div>
+</template>
+<script setup>
+import { CheckIcon, DropdownIcon } from '@/components'
+</script>
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    description: {
+      type: String,
+      default: '',
+    },
+    modelValue: Boolean,
+    clickEvent: {
+      type: Function,
+      default: () => {},
+    },
+    collapsingToggleStyle: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue'],
+  methods: {
+    toggle() {
+      if (!this.disabled) {
+        this.$emit('update:modelValue', !this.modelValue)
+      }
+    },
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.checkbox-outer {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  p {
+    user-select: none;
+    padding: 0.2rem 0;
+    margin: 0;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+}
+
+.checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  min-width: 1rem;
+  min-height: 1rem;
+
+  padding: 0;
+  margin: 0 0.5rem 0 0;
+
+  color: var(--color-contrast);
+  background-color: var(--color-button-bg);
+  border-radius: var(--radius-xs);
+  box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
+
+  &.checked {
+    background-color: var(--color-brand);
+  }
+
+  svg {
+    color: var(--color-accent-contrast);
+    stroke-width: 0.2rem;
+    height: 0.8rem;
+    width: 0.8rem;
+    flex-shrink: 0;
+  }
+
+  &.collapsing {
+    background-color: transparent !important;
+    box-shadow: none;
+
+    svg {
+      color: inherit;
+      height: 1rem;
+      width: 1rem;
+      transition: transform 0.25s ease-in-out;
+    }
+
+    &.checked {
+      svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  &:disabled {
+    box-shadow: none;
+    cursor: not-allowed;
+  }
+}
+</style>

lib/components/base/Chips.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="chips">
+    <Button
+      v-for="item in items"
+      :key="item"
+      class="iconified-button"
+      :class="{ selected: selected === item }"
+      @click="toggleItem(item)"
+    >
+      <CheckIcon v-if="selected === item" />
+      <span>{{ formatLabel(item) }}</span>
+    </Button>
+  </div>
+</template>
+<script setup>
+import { CheckIcon, Button } from '@/components'
+</script>
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      required: true,
+      type: String,
+    },
+    items: {
+      required: true,
+      type: Array,
+    },
+    neverEmpty: {
+      default: true,
+      type: Boolean,
+    },
+    formatLabel: {
+      default: (x) => x,
+      type: Function,
+    },
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    selected: {
+      get() {
+        return this.modelValue
+      },
+      set(value) {
+        this.$emit('update:modelValue', value)
+      },
+    },
+  },
+  created() {
+    if (this.items.length > 0 && this.neverEmpty) {
+      this.selected = this.items[0]
+    }
+  },
+  methods: {
+    toggleItem(item) {
+      if (this.selected === item && !this.neverEmpty) {
+        this.selected = null
+      } else {
+        this.selected = item
+      }
+    },
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.chips {
+  display: flex;
+  grid-gap: 0.5rem;
+  flex-wrap: wrap;
+
+  .iconified-button {
+    text-transform: capitalize;
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+
+    &:focus-visible {
+      outline: 0.25rem solid #ea80ff;
+      border-radius: 0.25rem;
+    }
+  }
+
+  .selected {
+    color: var(--color-contrast);
+    background-color: var(--color-brand-highlight);
+    box-shadow: inset 0 0 0 transparent, 0 0 0 2px var(--color-brand);
+  }
+}
+</style>

lib/components/base/Pagination.vue

@@ -0,0 +1,202 @@
+<template>
+  <div v-if="count > 1" class="paginates">
+    <a
+      :class="{ disabled: page === 1 }"
+      :tabindex="page === 1 ? -1 : 0"
+      class="left-arrow paginate has-icon"
+      aria-label="Previous Page"
+      :href="linkFunction(page - 1)"
+      @click.prevent="page !== 1 ? switchPage(page - 1) : null"
+    >
+      <LeftArrowIcon />
+    </a>
+    <div
+      v-for="(item, index) in pages"
+      :key="'page-' + item + '-' + index"
+      :class="{
+        'page-number': page !== item,
+        shrink: item > 99,
+      }"
+      class="page-number-container"
+    >
+      <div v-if="item === '-'" class="has-icon">
+        <GapIcon />
+      </div>
+      <a
+        v-else
+        :class="{
+          'page-number current': page === item,
+          shrink: item > 99,
+        }"
+        :href="linkFunction(item)"
+        @click.prevent="page !== item ? switchPage(item) : null"
+      >
+        {{ item }}
+      </a>
+    </div>
+
+    <a
+      :class="{
+        disabled: page === pages[pages.length - 1],
+      }"
+      :tabindex="page === pages[pages.length - 1] ? -1 : 0"
+      class="right-arrow paginate has-icon"
+      aria-label="Next Page"
+      :href="linkFunction(page + 1)"
+      @click.prevent="page !== pages[pages.length - 1] ? switchPage(page + 1) : null"
+    >
+      <RightArrowIcon />
+    </a>
+  </div>
+</template>
+<script setup>
+import { GapIcon, LeftArrowIcon, RightArrowIcon } from '@/components'
+</script>
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    page: {
+      type: Number,
+      default: 1,
+    },
+    count: {
+      type: Number,
+      default: 1,
+    },
+    linkFunction: {
+      type: Function,
+      default() {
+        return null
+      },
+    },
+  },
+  emits: ['switch-page'],
+  computed: {
+    pages() {
+      let pages = []
+
+      if (this.count > 4) {
+        if (this.page + 3 >= this.count) {
+          pages = [
+            1,
+            '-',
+            this.count - 4,
+            this.count - 3,
+            this.count - 2,
+            this.count - 1,
+            this.count,
+          ]
+        } else if (this.page > 4) {
+          pages = [1, '-', this.page - 1, this.page, this.page + 1, '-', this.count]
+        } else {
+          pages = [1, 2, 3, 4, 5, '-', this.count]
+        }
+      } else {
+        pages = Array.from({ length: this.count }, (_, i) => i + 1)
+      }
+
+      return pages
+    },
+  },
+  methods: {
+    switchPage(newPage) {
+      this.$emit('switch-page', newPage)
+    },
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.paginates {
+  display: flex;
+}
+
+a {
+  color: var(--color-contrast);
+  box-shadow: var(--shadow-raised), var(--shadow-inset);
+
+  padding: 0.5rem 1rem;
+  margin: 0;
+  border-radius: 2rem;
+  background: var(--color-raised-bg);
+  cursor: pointer;
+
+  transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
+    outline 0.2s ease-in-out;
+
+  &:hover {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  &.page-number.current {
+    background: var(--color-brand);
+    color: var(--color-accent-contrast);
+    cursor: default;
+  }
+
+  &.paginate.disabled {
+    background-color: transparent;
+    cursor: not-allowed;
+    filter: grayscale(50%);
+    opacity: 0.5;
+  }
+
+  &:hover:not(&:disabled) {
+    filter: brightness(0.85);
+  }
+
+  &:active:not(&:disabled) {
+    transform: scale(0.95);
+    filter: brightness(0.8);
+  }
+}
+
+.has-icon {
+  display: flex;
+  align-items: center;
+  svg {
+    width: 1em;
+  }
+}
+
+.page-number-container,
+a,
+.has-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.paginates {
+  height: 2em;
+  margin: 0.5rem 0;
+  > div,
+  .has-icon {
+    margin: 0 0.3em;
+  }
+}
+
+.left-arrow {
+  margin-left: auto !important;
+}
+
+.right-arrow {
+  margin-right: auto !important;
+}
+
+@media screen and (max-width: 400px) {
+  .paginates {
+    font-size: 80%;
+  }
+}
+
+@media screen and (max-width: 530px) {
+  a {
+    width: 2.5rem;
+    padding: 0.5rem 0;
+  }
+}
+</style>

lib/components/index.js

@@ -1,6 +1,11 @@
-export { default as Card } from './base/Card.vue'
-export { default as Page } from './base/Page.vue'
+export { default as Avatar } from './base/Avatar.vue'
+export { default as Badge } from './base/Badge.vue'
 export { default as Button } from './base/Button.vue'
+export { default as Card } from './base/Card.vue'
+export { default as Checkbox } from './base/Checkbox.vue'
+export { default as Chips } from './base/Chips.vue'
+export { default as Page } from './base/Page.vue'
+export { default as Pagination } from './base/Pagination.vue'
 
 export { default as NavItem } from './nav/NavItem.vue'
 export { default as NavRow } from './nav/NavRow.vue'
@@ -24,7 +29,7 @@ export { default as ClientIcon } from '@/assets/icons/client.svg'
 export { default as ClipboardCopyIcon } from '@/assets/icons/clipboard-copy.svg'
 export { default as CoinsIcon } from '@/assets/icons/coins.svg'
 export { default as ContractIcon } from '@/assets/icons/contract.svg'
-export { default as copyrightIcon } from '@/assets/icons/copyright.svg'
+export { default as CopyrightIcon } from '@/assets/icons/copyright.svg'
 export { default as CurrencyIcon } from '@/assets/icons/currency.svg'
 export { default as DashboardIcon } from '@/assets/icons/dashboard.svg'
 export { default as DownloadIcon } from '@/assets/icons/download.svg'
@@ -61,6 +66,7 @@ export { default as PlusIcon } from '@/assets/icons/plus.svg'
 export { default as ReportIcon } from '@/assets/icons/report.svg'
 export { default as RightArrowIcon } from '@/assets/icons/right-arrow.svg'
 export { default as SaveIcon } from '@/assets/icons/save.svg'
+export { default as ScaleIcon } from '@/assets/icons/scale.svg'
 export { default as SearchIcon } from '@/assets/icons/search.svg'
 export { default as SendIcon } from '@/assets/icons/send.svg'
 export { default as ServerIcon } from '@/assets/icons/server.svg'
@@ -86,3 +92,5 @@ export { default as UsersIcon } from '@/assets/icons/users.svg'
 export { default as VersionIcon } from '@/assets/icons/version.svg'
 export { default as WikiIcon } from '@/assets/icons/wiki.svg'
 export { default as XIcon } from '@/assets/icons/x.svg'
+
+export { default as ModrinthIcon } from '@/assets/branding/logo.svg'