chore: update to latests components (#276)

Author: lukepolo

components/EloChangeBadge.vue

@@ -148,12 +148,11 @@ const chipClipSm =
         :avoid-collisions="true"
         :collision-padding="12"
         :class="[
-          '!p-0 !rounded-none overflow-hidden relative',
+          '!p-0 !rounded-none overflow-visible relative',
           'w-[340px] max-w-[calc(100vw-32px)]',
           'bg-[hsl(240_8%_11%)] text-[hsl(var(--popover-foreground))]',
           'font-[\'Oxanium\',sans-serif]',
           'border border-[hsl(240_6%_22%)]',
-          '[clip-path:polygon(14px_0,100%_0,100%_calc(100%-14px),calc(100%-14px)_100%,0_100%,0_14px)]',
           isWin
             ? 'shadow-[inset_0_1px_0_hsl(0_0%_100%/0.06),0_0_0_1px_hsl(142_71%_50%/0.2),0_2px_4px_hsl(0_0%_0%/0.4),0_12px_28px_-8px_hsl(0_0%_0%/0.85),0_30px_70px_-20px_hsl(0_0%_0%/0.95),0_0_50px_-12px_hsl(142_71%_45%/0.35)]'
             : 'shadow-[inset_0_1px_0_hsl(0_0%_100%/0.06),0_0_0_1px_hsl(0_84%_60%/0.2),0_2px_4px_hsl(0_0%_0%/0.4),0_12px_28px_-8px_hsl(0_0%_0%/0.85),0_30px_70px_-20px_hsl(0_0%_0%/0.95),0_0_50px_-12px_hsl(0_84%_50%/0.35)]',
@@ -336,7 +335,7 @@ const chipClipSm =
                 class="absolute left-1/2 top-[-2px] bottom-[-2px] w-px bg-border opacity-80"
               />
               <span
-                class="absolute top-[-3px] bottom-[-3px] w-[3px] -translate-x-1/2 bg-[hsl(var(--tac-amber))] shadow-[0_0_8px_hsl(var(--tac-amber)/0.6)] transition-[left] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]"
+                class="absolute top-[-3px] bottom-[-3px] w-[3px] -translate-x-1/2 bg-[hsl(var(--tac-amber))] shadow-[0_0_8px_hsl(var(--tac-amber)/0.6)] transition-[left] duration-300 [transition-timing-function:cubic-bezier(0.2,0.8,0.2,1)]"
                 :style="{ left: eloGapBar + '%' }"
               />
             </div>

components/Pagination.vue

@@ -1,4 +1,10 @@
 <script setup lang="ts">
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DoubleArrowLeftIcon,
+  DoubleArrowRightIcon,
+} from "@radix-icons/vue";
 import { Label } from "~/components/ui/label";
 import {
   Select,
@@ -9,53 +15,83 @@ import {
 } from "~/components/ui/select";
 import {
   Pagination as PaginationRoot,
-  PaginationList,
-  PaginationListItem,
+  PaginationContent,
+  PaginationItem,
   PaginationFirst,
-  PaginationPrev,
+  PaginationPrevious,
   PaginationNext,
   PaginationLast,
   PaginationEllipsis,
 } from "~/components/ui/pagination";
-import { Button } from "~/components/ui/button";
+
+const navControlClass =
+  "size-9 shrink-0 rounded-md p-0 text-muted-foreground shadow-none hover:bg-transparent hover:text-foreground disabled:opacity-35";
+const pageItemBaseClass =
+  "size-9 shrink-0 rounded-md border text-sm font-semibold tabular-nums shadow-none";
+const activePageItemClass =
+  "border-border/80 bg-background text-foreground hover:bg-background";
+const inactivePageItemClass =
+  "border-transparent bg-transparent text-muted-foreground hover:border-border/60 hover:bg-accent/40 hover:text-foreground";
 </script>
 
 <template>
-  <div class="flex items-center justify-between gap-4 mt-4">
+  <div
+    class="mt-4 flex w-full flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between"
+  >
     <PaginationRoot
       v-slot="{ page }"
       :key="`pagination-${current}`"
+      class="mx-0 min-w-0 flex-1 justify-start overflow-x-auto"
       :total="total"
       :items-per-page="perPage"
       :sibling-count="1"
       show-edges
       :default-page="current"
       @update:page="paginate"
     >
-      <PaginationList v-slot="{ items }" class="flex items-center gap-1">
-        <PaginationFirst />
-        <PaginationPrev />
+      <PaginationContent v-slot="{ items }" class="flex-nowrap gap-1 pr-2">
+        <PaginationFirst :class="navControlClass">
+          <DoubleArrowLeftIcon class="size-3.5" />
+          <span class="sr-only">First page</span>
+        </PaginationFirst>
+        <PaginationPrevious :class="navControlClass">
+          <ChevronLeftIcon class="size-3.5" />
+          <span class="sr-only">Previous page</span>
+        </PaginationPrevious>
 
         <template v-for="(item, index) in items">
-          <PaginationListItem
+          <PaginationItem
             v-if="item.type === 'page'"
-            :key="index"
+            :key="`page-${item.value}`"
             :value="item.value"
-            as-child
+            :is-active="item.value === page"
+            :class="[
+              pageItemBaseClass,
+              item.value === page ? activePageItemClass : inactivePageItemClass,
+            ]"
+          >
+            {{ item.value }}
+          </PaginationItem>
+          <PaginationEllipsis
+            v-else
+            :key="`ellipsis-${index}`"
+            :index="index"
+            class="h-9 w-7 shrink-0 text-muted-foreground"
           >
-            <Button
-              class="w-10 h-10 p-0"
-              :variant="item.value === page ? 'default' : 'outline'"
-            >
-              {{ item.value }}
-            </Button>
-          </PaginationListItem>
-          <PaginationEllipsis v-else :key="item.type" :index="index" />
+            <span aria-hidden="true" class="text-sm font-semibold">...</span>
+            <span class="sr-only">More pages</span>
+          </PaginationEllipsis>
         </template>
 
-        <PaginationNext />
-        <PaginationLast />
-      </PaginationList>
+        <PaginationNext :class="navControlClass">
+          <ChevronRightIcon class="size-3.5" />
+          <span class="sr-only">Next page</span>
+        </PaginationNext>
+        <PaginationLast :class="navControlClass">
+          <DoubleArrowRightIcon class="size-3.5" />
+          <span class="sr-only">Last page</span>
+        </PaginationLast>
+      </PaginationContent>
     </PaginationRoot>
 
     <div v-if="showPerPageSelector" class="flex items-center gap-2">

components/PlayerNameRegistration.vue

@@ -52,7 +52,7 @@ import { AlertCircle } from "lucide-vue-next";
 import { useApplicationSettingsStore } from "~/stores/ApplicationSettings";
 import { useForm } from "vee-validate";
 import { z } from "zod";
-import { toTypedSchema } from "@vee-validate/zod";
+import { toTypedSchema } from "~/utilities/vee-validate-zod";
 import { generateMutation } from "~/graphql/graphqlGen";
 import { toast } from "@/components/ui/toast";
 import { $ } from "~/generated/zeus";

components/SanctionPlayer.vue

@@ -16,7 +16,7 @@ import {
   Ban,
 } from "lucide-vue-next";
 import PlayerDisplay from "~/components/PlayerDisplay.vue";
-import { toTypedSchema } from "@vee-validate/zod";
+import { toTypedSchema } from "~/utilities/vee-validate-zod";
 import { z } from "zod";
 import { useForm } from "vee-validate";
 </script>

components/TimeAgo.vue

@@ -19,7 +19,7 @@ export default {
   props: {
     date: {
       required: true,
-      type: String,
+      type: [String, Number, Date],
     },
     seconds: {
       required: false,
@@ -56,6 +56,10 @@ export default {
     updateText() {
       const timeAgo = new TimeAgo("en-US");
       const time = new Date(this.date);
+      if (Number.isNaN(time.getTime())) {
+        this.text = "";
+        return;
+      }
       time.setSeconds(time.getSeconds() - 1);
 
       if (this.seconds) {

components/chat/ChatInput.vue

@@ -59,7 +59,7 @@ import { CornerDownLeft } from "lucide-vue-next";
 import { FormControl, FormField, FormItem } from "~/components/ui/form";
 import * as z from "zod";
 import { useForm } from "vee-validate";
-import { toTypedSchema } from "@vee-validate/zod";
+import { toTypedSchema } from "~/utilities/vee-validate-zod";
 
 export default {
   props: {

components/game-server-nodes/GameServerNodeRow.vue

@@ -1538,7 +1538,7 @@ const isSectionExpanded = (section: string) => {
   <!-- Desktop Metrics Row (xl and up) -->
   <TableRow class="hidden xl:table-row border-t-0" v-if="shouldShowMetrics">
     <TableCell :colspan="8">
-      <NodeMetrics :game-server-node="gameServerNode" />
+      <NodeMetrics :game-server-node="gameServerNode" compact-charts />
     </TableCell>
   </TableRow>
 
@@ -1685,7 +1685,7 @@ const isSectionExpanded = (section: string) => {
 <script lang="ts">
 import { generateMutation, generateQuery } from "~/graphql/graphqlGen";
 import { useForm } from "vee-validate";
-import { toTypedSchema } from "@vee-validate/zod";
+import { toTypedSchema } from "~/utilities/vee-validate-zod";
 import * as z from "zod";
 import { toast } from "@/components/ui/toast";
 import { defineComponent } from "vue";

components/game-server-nodes/UpdateGameServerLabel.vue

@@ -77,7 +77,7 @@ import {
 <script lang="ts">
 import { generateMutation } from "~/graphql/graphqlGen";
 import { useForm } from "vee-validate";
-import { toTypedSchema } from "@vee-validate/zod";
+import { toTypedSchema } from "~/utilities/vee-validate-zod";
 import * as z from "zod";
 import { toast } from "@/components/ui/toast";
 

components/game-type-configs/GameTypeConfigForm.vue

@@ -2,7 +2,7 @@
 import { generateMutation } from "~/graphql/graphqlGen";
 import { toast } from "@/components/ui/toast";
 import { useForm } from "vee-validate";
-import { toTypedSchema } from "@vee-validate/zod";
+import { toTypedSchema } from "~/utilities/vee-validate-zod";
 import { z } from "zod";
 import {
   AlertDialog,

components/map-pools/MapForm.vue

@@ -2,7 +2,7 @@
 import { generateMutation } from "~/graphql/graphqlGen";
 import { toast } from "@/components/ui/toast";
 import { useForm } from "vee-validate";
-import { toTypedSchema } from "@vee-validate/zod";
+import { toTypedSchema } from "~/utilities/vee-validate-zod";
 import { z } from "zod";
 import { e_match_types_enum } from "~/generated/zeus";
 import {