cynx-lib 1.3.58 → 1.3.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.58",
+  "version": "1.3.60",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",

package/vue/components/Pagination.vue

@@ -11,6 +11,7 @@ const props = withDefaults(
     perPage?: number;
     pageSize?: number;
     disabled?: boolean;
+    size?: "xs" | "sm" | "md" | "lg";
   }>(),
   {
     page: 1,
@@ -18,6 +19,7 @@ const props = withDefaults(
     total: 0,
     perPage: 20,
     disabled: false,
+    size: "md",
   }
 );
 
@@ -69,6 +71,20 @@ const handlePageChange = (newPage: number) => {
   emit("update:page", newPage);
   emit("change", newPage);
 };
+
+const iconSize = computed(() => {
+  if (props.size === "xs") return 13;
+  if (props.size === "sm") return 14;
+  if (props.size === "lg") return 18;
+  return 16;
+});
+
+const buttonHeightClass = computed(() => {
+  if (props.size === "xs") return "h-6 min-w-[24px] text-[11px]";
+  if (props.size === "sm") return "h-7 min-w-[28px] text-[11.5px]";
+  if (props.size === "lg") return "h-9 min-w-[36px] text-sm";
+  return "h-8 min-w-[32px] text-xs";
+});
 </script>
 
 <template>
@@ -80,30 +96,31 @@ const handlePageChange = (newPage: number) => {
     <div v-else />
 
     <!-- Page Buttons -->
-    <div class="flex items-center gap-1">
+    <div class="flex items-center gap-1.5">
       <Button
-        variant="ghost"
-        size="xs"
+        variant="icon"
+        :size="size"
         :disabled="disabled || page <= 1"
         title="Previous page"
         @click="handlePageChange(page - 1)"
       >
         <template #icon>
-          <ChevronLeft :size="14" />
+          <ChevronLeft :size="iconSize" />
         </template>
       </Button>
 
       <template v-for="(item, i) in pageItems" :key="`p-${i}`">
         <span
           v-if="item === '...'"
-          class="px-1 text-xs text-slate-400 dark:text-slate-500"
+          :class="[buttonHeightClass, 'inline-flex items-center justify-center text-slate-400 dark:text-slate-500 font-medium select-none']"
         >
           …
         </span>
         <Button
+          v-else
           :variant="item === page ? 'primary' : 'ghost'"
-          size="xs"
-          class="min-w-[28px] h-7 px-2 font-semibold text-xs"
+          :size="size"
+          :class="[buttonHeightClass, 'px-2 font-semibold transition-colors', item !== page ? 'hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-200' : '']"
           :disabled="disabled"
           @click="handlePageChange(Number(item))"
         >
@@ -112,14 +129,14 @@ const handlePageChange = (newPage: number) => {
       </template>
 
       <Button
-        variant="ghost"
-        size="xs"
+        variant="icon"
+        :size="size"
         :disabled="disabled || page >= totalPages"
         title="Next page"
         @click="handlePageChange(page + 1)"
       >
         <template #icon>
-          <ChevronRight :size="14" />
+          <ChevronRight :size="iconSize" />
         </template>
       </Button>
     </div>

package/vue/components/Table.vue

@@ -126,10 +126,11 @@ const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
     ]"
     :style="height ? { height: formatWidth(height) } : undefined"
   >
-    <!-- Scrollable Single Unified Table Container (100% Column Alignment) -->
+    <!-- Scrollable Single Unified Table Container (100% Column Alignment & Stable Gutter) -->
     <div
       ref="bodyScrollRef"
       class="w-full overflow-x-auto overflow-y-auto custom-scrollbar flex-1 relative"
+      style="scrollbar-gutter: stable;"
     >
       <table class="w-full border-collapse text-left text-xs table-fixed">
         <colgroup>
@@ -294,3 +295,23 @@ const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
     </div>
   </div>
 </template>
+
+<style scoped>
+.custom-scrollbar {
+  scrollbar-width: thin;
+}
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgba(148, 163, 184, 0.3);
+  border-radius: 6px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(148, 163, 184, 0.5);
+}
+</style>