AstralRinth/packages/ui/src/components/base/Chips.vue

<template>
  <div class="chips">
    <Button
      v-for="item in items"
      :key="formatLabel(item)"
      class="btn"
      :class="{ selected: selected === item, capitalize: capitalize }"
      @click="toggleItem(item)"
    >
      <CheckIcon v-if="selected === item" />
      <span>{{ formatLabel(item) }}</span>
    </Button>
  </div>
</template>

<script setup lang="ts" generic="T">
import { CheckIcon } from '@modrinth/assets'
import Button from './Button.vue'

const props = withDefaults(
  defineProps<{
    items: T[]
    formatLabel?: (item: T) => string
    neverEmpty?: boolean
    capitalize?: boolean
  }>(),
  {
    neverEmpty: true,
    // Intentional any type, as this default should only be used for primitives (string or number)
    formatLabel: (item) => item.toString(),
    capitalize: true,
  },
)
const selected = defineModel<T | null>()

// If one always has to be selected, default to the first one
if (props.items.length > 0 && props.neverEmpty && !selected.value) {
  selected.value = props.items[0]
}

function toggleItem(item: T) {
  if (selected.value === item && !props.neverEmpty) {
    selected.value = null
  } else {
    selected.value = item
  }
}
</script>

<style lang="scss" scoped>
.chips {
  display: flex;
  grid-gap: 0.5rem;
  flex-wrap: wrap;

  .btn {
    &.capitalize {
      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>