refactor: generic components (#868)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

components/common/CommonAlert.vue

@@ -20,7 +20,7 @@ function close() {
     <div>
       <slot />
     </div>
-    <button text-xl hover:text-primary bg-hover-overflow w-1.4em h-1.4em @click="close()">
+    <button text-xl hover:text-primary bg-hover-overflow w="1.4em" h="1.4em" @click="close()">
       <div i-ri:close-line />
     </button>
   </div>

components/common/CommonPaginator.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends any, O extends any">
 // @ts-expect-error missing types
 import { DynamicScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
@@ -12,20 +12,23 @@ const {
   eventType = 'update',
   preprocess,
 } = defineProps<{
-  paginator: Paginator<any[], any>
-  keyProp?: string
+  paginator: Paginator<T[], O>
+  keyProp?: keyof T
   virtualScroller?: boolean
   stream?: Promise<WsEvents>
   eventType?: 'notification' | 'update'
-  preprocess?: (items: any[]) => any[]
+  preprocess?: (items: T[]) => any[]
 }>()
 
 defineSlots<{
   default: {
-    item: any
+    item: T
     active?: boolean
-    older?: any
-    newer?: any // newer is undefined when index === 0
+    older?: T
+    newer?: T // newer is undefined when index === 0
+  }
+  items: {
+    items: T[]
   }
   updater: {
     number: number
@@ -35,6 +38,8 @@ defineSlots<{
   done: {}
 }>()
 
+const { t } = useI18n()
+
 const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, stream, eventType, preprocess)
 </script>
 
@@ -62,7 +67,7 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
       <template v-else>
         <slot
           v-for="item, index of items"
-          :key="item[keyProp]"
+          :key="(item as any)[keyProp]"
           :item="item"
           :older="items[index + 1]"
           :newer="items[index - 1]"
@@ -75,11 +80,11 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
     </slot>
     <slot v-else-if="state === 'done'" name="done">
       <div p5 text-secondary italic text-center>
-        {{ $t('common.end_of_list') }}
+        {{ t('common.end_of_list') }}
       </div>
     </slot>
     <div v-else-if="state === 'error'" p5 text-secondary>
-      {{ $t('common.error') }}: {{ error }}
+      {{ t('common.error') }}: {{ error }}
     </div>
   </div>
 </template>