Implement pills

docs/.vitepress/config.ts

@@ -14,6 +14,7 @@ export default defineConfig({
         text: "Components",
         items: [
 			    { text: "Button", link: "/components/button/" },
+			    { text: "Pill", link: "/components/pill/" },
 			    { text: "Loader", link: "/components/loader/" },
         ]
       }

docs/components/button/index.md

 <script setup>
 import { FwButton } from '~/components'
 
-// const click = () => new Promise(resolve => setTimeout(resolve, 1000))
-const click = () => new Promise((r, resolve) => setTimeout(resolve, 1000))
+const click = () => new Promise(resolve => setTimeout(resolve, 1000))
 </script>
 
 # Button

docs/components/pill/index.md

+<script setup>
+import { FwPill } from '~/components'
+</script>
+
+# Pill
+## Pill colors
+### Primary pill
+```html
+<fw-pill primary>
+  Primary pill
+</fw-pill>
+```
+<fw-pill primary>
+  Primary pill
+</fw-pill>
+
+### Secondary pill
+This is the default pill color
+```html
+<fw-pill>
+  Secondary pill
+</fw-pill>
+```
+<fw-pill>
+  Secondary pill
+</fw-pill>
+
+### Destructive pill
+```html
+<fw-pill destructive>
+  Destructive pill
+</fw-pill>
+```
+<fw-pill destructive>
+  Destructive pill
+</fw-pill>
+
+## Images
+```html
+<fw-pill>
+  <template #image>
+    <img src="/images/awesome-artist.png" />
+  </template>
+  Awesome artist
+</fw-pill>
+```
+
+<fw-pill>
+  <template #image>
+    <div style="background-color: #0004" />
+  </template>
+  Awesome artist
+</fw-pill>

src/components/button/style.scss

@@ -10,12 +10,9 @@
     font-family: $font-main;
     font-weight: 900;
 
-    height: 2.125rem;
+    line-height: 1em;
 
-    line-height: 1rem;
-    font-size: 1rem;
-
-    padding: 0.5rem;
+    padding: 0.5em;
 
     border-radius: var(--fw-border-radius);
     margin: 0 0.5ch;

src/components/index.ts

 export { default as FwButton } from './button/Button.vue'
 export { default as FwLoader } from './loader/Loader.vue'
+export { default as FwPill } from './pill/Pill.vue'

src/components/pill/Pill.vue

+<script setup lang="ts">
+import { type TypeProps, useType } from '~/composables/useType'
+
+interface Props extends TypeProps {
+  // TODO (wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  primary?: boolean
+  secondary?: boolean
+  destructive?: boolean
+}
+
+const props = defineProps<Props>()
+
+const type = useType(props, 'is-secondary')
+</script>
+
+<template>
+	<button
+    class="funkwhale input pill"
+    :class="[type]"
+  >
+    <div v-if="!!$slots.image" class="pill-image">
+      <slot name="image" />
+    </div>
+    <div class="pill-content">
+      <slot />
+    </div>
+  </button>
+</template>
+
+<style lang="scss">
+@import './style.scss'
+</style>

src/components/pill/style.scss

+.funkwhale {
+  &.pill {
+    position: relative;
+    display: inline-flex;
+
+    background-color: var(--fw-bg-color);
+    color: var(--fw-text-color);
+
+    font-family: $font-main;
+
+    line-height: 1em;
+    font-size: 0.8em;
+
+    border-radius: 100vh;
+    margin: 0 0.5ch;
+
+    > .pill-content {
+      padding: 0.5em 0.75em;
+      white-space: pre;
+    }
+
+    > .pill-image {
+      position: relative;
+      aspect-ratio: 1;
+      border-radius: 50%;
+      overflow: hidden;
+      height: 1.6em;
+      margin: 0.2em;
+
+      + .pill-content {
+        padding-left: 0.25em;
+      }
+
+      > * {
+        height: 100%;
+        width: 100%;
+      }
+
+      > img {
+        object-fit: cover;
+      }
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &[disabled] {
+      font-weight: normal;
+      cursor: default;
+    }
+
+    &.is-focused,
+    &:focus {
+      box-shadow: none !important;
+    }
+  }
+}

src/composables/useType.ts

@@ -6,11 +6,12 @@ export interface TypeProps {
   destructive?: boolean
 }
 
-export const useType = (props: TypeProps) => computed(() => props.primary
+type Type = 'is-primary' | 'is-secondary' | 'is-destructive'
+export const useType = (props: TypeProps, defaultType: Type = 'is-primary') => computed<Type>(() => props.primary
   ? 'is-primary'
   : props.secondary
     ? 'is-secondary'
     : props.destructive
       ? 'is-destructive'
-      : 'is-primary'
+      : defaultType
 )