Refactor into useQueryable and Search components

components/Pagination.vue

@@ -1,37 +1,39 @@
 <script setup lang="ts">
 const props = defineProps<{
-  index: number,
-  pages: Array<any>,
-  count: number,
-  onPrev: () => void,
-  onNext: () => void,
-  onFirst: () => void,
-  onLast: () => void,
+  pagination: {
+    count: number;
+    pages: any[][];
+    index: globalThis.Ref<number, number>;
+    prev: () => void;
+    next: () => void;
+    first: () => void;
+    last: () => void;
+  }
 }>();
 
-const hasPrevCss = computed(() => { return !(props.index > 0) ? "disabled" : ""; });
-const hasNextCss = computed(() => { return !(props.index < props.count - 1) ? "disabled" : "";})
+const hasPrevCss = computed(() => { return !(props.pagination.index.value > 0) ? "disabled" : ""; });
+const hasNextCss = computed(() => { return !(props.pagination.index.value < props.pagination.count - 1) ? "disabled" : "";})
 </script>
 
 <template>
-  <div class="btn-group app-background">
+  <div class="btn-group app-background" style="min-width: 300px;">
     <a :class="`btn btn-outline-secondary border-light border-opacity-25`"
-      @click="onFirst()">
+      @click="pagination.first()">
       <MaterialIcon name="chevron-double-left" :size="32" />
     </a>
     <a :class="`btn btn-outline-secondary border-light border-opacity-25 ${hasPrevCss}`"
-      @click="onPrev()">
+      @click="pagination.prev()">
       <MaterialIcon name="chevron-left" :size="32" />
     </a>
     <a :class="`btn btn-outline-secondary border-light border-opacity-25 text-light`">
-      <span class="d-flex justify-content-center align-items-center h-100 w-100">{{ `${index + 1} / ${count}` }}</span>
+      <span class="d-flex justify-content-center align-items-center h-100 w-100">{{ `${pagination.index.value + 1} / ${pagination.count}` }}</span>
     </a>
     <a :class="`btn btn-outline-secondary border-light border-opacity-25 ${hasNextCss}`"
-      @click="onNext()">
+      @click="pagination.next()">
       <MaterialIcon name="chevron-right" :size="32" />
     </a>
     <a :class="`btn btn-outline-secondary border-light border-opacity-25`"
-      @click="onLast()">
+      @click="pagination.last()">
       <MaterialIcon name="chevron-double-right" :size="32" />
     </a>
   </div>

components/Search.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const model = defineModel();
+</script>
+
+<template>
+  <div class="input-group" style="max-width: 400px;">
+    <input type="text" class="form-control border-light border-opacity-25"
+      placeholder="Search" name="Search" v-model="model" />
+  </div>
+</template>