Add new vue-based frontend

packages/sshecret-frontend/src/composables/usePagination.ts

@@ -0,0 +1,46 @@
+import { ref, computed } from 'vue'
+import type { Ref } from 'vue'
+
+
+export function usePagination(totalItems: number | Ref<number>, itemsPerPage = 20) {
+  const pageNum = ref(1)
+
+  const total = computed(() => {
+    return typeof totalItems === 'number' ? totalItems : totalItems.value
+  })
+
+  const offset = computed(() => (pageNum.value - 1) * itemsPerPage)
+  const firstResult = computed(() => (total.value === 0 ? 0 : offset.value + 1))
+  const lastResult = computed(() => {
+    const last = offset.value + itemsPerPage
+    return last > total.value ? total.value : last
+  })
+
+  const totalPages = computed(() => Math.ceil(total.value / itemsPerPage))
+
+  function goToPage(page: number) {
+    if (page < 1) pageNum.value = 1
+    else if (page > totalPages.value) pageNum.value = totalPages.value
+    else pageNum.value = page
+  }
+
+  function nextPage() {
+    goToPage(pageNum.value + 1)
+  }
+
+  function prevPage() {
+    goToPage(pageNum.value - 1)
+  }
+
+  return {
+    pageNum,
+    offset,
+    firstResult,
+    lastResult,
+    total,
+    totalPages,
+    goToPage,
+    nextPage,
+    prevPage,
+  }
+}