Add pagination

docs/.vitepress/config.ts

@@ -30,6 +30,7 @@ export default defineConfig({
 			    { text: "Activity", link: "/components/activity/" },
 			    { text: "Popover", link: "/components/popover/" },
 			    { text: "Input", link: "/components/input/" },
+			    { text: "Pagination", link: "/components/pagination/" },
         ]
       }
 		]

docs/components/pagination/index.md

+<script setup lang="ts">
+import { ref } from 'vue'
+
+const page = ref(1)
+</script>
+
+# Pagination
+## Pagination model
+```html
+<fw-pagination :pages="8" v-model:page="page" />
+```
+<fw-pagination :pages="8" v-model:page="page" />

src/components/button/style.scss

@@ -34,7 +34,7 @@
       cursor: default;
     }
 
-    &.is-secondary.is-dark {
+    &.is-secondary.is-outline {
       --fw-bg-color: var(--fw-grey-600);
 
       &.is-hovered,
@@ -46,6 +46,15 @@
       &:active {
         --fw-text-color: var(--fw-grey-300);
       }
+
+      &[disabled] {
+        --fw-bg-color: var(--fw-grey-400) !important;
+        background-color: transparent !important;
+
+        html.dark & {
+          --fw-bg-color: var(--fw-grey-800) !important;
+        }
+      }
     }
 
     &.is-outline {

src/components/card/Card.vue

@@ -61,7 +61,7 @@ defineProps<Props>()
       v-if="buttonTitle"
       class="card-button"
     >
-      <fw-button class="is-dark" outline secondary @click="onClick">{{ buttonTitle }}</fw-button>
+      <fw-button outline secondary @click="onClick">{{ buttonTitle }}</fw-button>
     </div>
   </div>
 </template>

src/components/index.ts

@@ -20,7 +20,8 @@ export { default as FwPopover } from './popover/Popover.vue'
 // Loader
 export { default as FwLoader } from './loader/Loader.vue'
 
-// Input
+// Inputs
+export { default as FwPagination } from './pagination/Pagination.vue'
 export { default as FwInput } from './input/Input.vue'
 
 // Pills

src/components/input/Input.vue

 <script setup lang="ts">
 interface Props {
   modelValue: string
-  icon: string
-  placeholder: string
+  icon?: string
+  placeholder?: string
 }
 
 defineProps<Props>()

src/components/pagination/Pagination.vue

+<script setup lang="ts">
+import { useVModel } from '@vueuse/core';
+import { useI18n } from 'vue-i18n'
+import { ref, computed } from 'vue'
+
+const { t } = useI18n()
+
+interface Events {
+  (e: 'update:page', page: number): void
+}
+
+interface Props {
+  pages: number
+  page: number
+}
+
+const emit = defineEmits<Events>()
+const props = defineProps<Props>()
+
+const goTo = ref('')
+const page = useVModel(props, 'page', emit)
+
+const range = (start: number, end: number) => Array.from({ length: end - start + 1 }, (_, i) => i + start)
+
+const pages = computed(() => {
+  const start = range(2, 5)
+  const end = range(props.pages - 4, props.pages - 1)
+
+  const pages = [1]
+
+  if (page.value < 5) pages.push(...start)
+  if (page.value >= 5 && page.value <= props.pages - 4) {
+    pages.push(page.value - 1)
+    pages.push(page.value)
+    pages.push(page.value + 1)
+  }
+  if (page.value > props.pages - 4) pages.push(...end)
+  pages.push(props.pages)
+
+  return pages.filter((page, index, pages) => pages.indexOf(page) === index)
+})
+</script>
+
+<template>
+	<div
+    class="funkwhale pagination"
+  >
+    <div class="pages">
+      <fw-button
+        @click="page -= 1"
+        :disabled="page <= 1"
+        secondary
+        outline
+      >
+        <i class="bi bi-chevron-left" />
+        {{ t('vui.pagination.previous') }}
+      </fw-button>
+
+      <template v-for="(i, index) in pages" :key="i">
+        <fw-button
+          v-if="i <= props.pages && i > 0"
+          @click="page = i"
+          secondary
+          :outline="page !== i"
+        >
+          {{ i }}
+        </fw-button>
+        <div v-if="i + 1 < pages[index + 1]">…</div>
+      </template>
+
+      <fw-button
+        @click="page += 1"
+        :disabled="page >= props.pages"
+        secondary
+        outline
+      >
+        {{ t('vui.pagination.next') }}
+        <i class="bi bi-chevron-right" />
+      </fw-button>
+    </div>
+
+    <div class="goto">
+      {{ t('vui.go-to') }}
+      <fw-input
+        :placeholder="page.toString()"
+        v-model="goTo"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import './style.scss'
+</style>

src/components/pagination/style.scss

+.funkwhale {
+  &.pagination {
+    height: 34px;
+    display: flex;
+
+    > .pages {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+
+      > .funkwhale.button {
+        min-width: 34px;
+        height: 34px;
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+    }
+
+    > .goto {
+      border-left: 1px solid var(--fw-grey-200);
+      margin-left: 16px;
+      padding-left: 16px;
+      display: flex;
+      align-items: center;
+      white-space: pre;
+
+      > .funkwhale.input {
+        margin-left: 16px;
+        width: calc(3ch + 32px);
+
+        input {
+          text-align: center;
+          padding: 6px 8px;
+        }
+      }
+    }
+  }
+}

src/locales/en.yaml

@@ -4,3 +4,7 @@ vui:
   tracks: '{n} track | {n} tracks'
   episodes: '{n} episode | {n} episodes'
   by-user: "by {'@'}{username}"
+  go-to: Go to
+  pagination:
+    previous: Previous
+    next: Next

src/styles/colors.scss

@@ -95,6 +95,10 @@ html.dark {
     --fw-bg-color: var(--fw-grey-200);
     --fw-text-color: var(--fw-grey-800);
 
+    html.dark & {
+      --fw-text-color: var(--fw-grey-300);
+    }
+
     &.input {
       &[disabled] {
         --fw-bg-color: var(--fw-grey-100) !important;
@@ -103,6 +107,9 @@ html.dark {
       &.is-hovered,
       &:hover {
         --fw-bg-color: var(--fw-grey-300);
+        html.dark & {
+          --fw-text-color: var(--fw-grey-800);
+        }
       }
 
       &.is-active,