cynx-lib 1.3.56 → 1.3.57

package/package.json

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

package/vue/components/Button.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, useSlots } from "vue";
 import Spinner from "./Spinner.vue";
 
 const VARIANTS: Record<string, any> = {
@@ -60,12 +60,22 @@ const VARIANTS: Record<string, any> = {
     hoverShadow: "0 2px 8px rgba(249,158,44,.25)",
   },
   ghost: {
-    background: "var(--surface, #ffffff)",
+    background: "transparent",
     color: "var(--t2, #797b8d)",
-    border: "1px solid var(--bd, #d7d8e0)",
+    border: "1px solid transparent",
     hoverColor: "var(--t1, #1a1a2e)",
     hoverBg: "var(--grey-1, #f5f5f8)",
-    hoverBorder: "var(--grey-2, #ebebee)",
+    hoverBorder: "transparent",
+    boxShadow: "none",
+  },
+  icon: {
+    background: "transparent",
+    color: "var(--t2, #797b8d)",
+    border: "1px solid transparent",
+    hoverColor: "var(--t1, #1a1a2e)",
+    hoverBg: "var(--grey-1, #f5f5f8)",
+    hoverBorder: "transparent",
+    boxShadow: "none",
   },
   outline: {
     background: "transparent",
@@ -120,9 +130,10 @@ const emit = defineEmits<{
   (e: "click", event: MouseEvent): void;
 }>();
 
+const slots = useSlots();
 const v = computed(() => VARIANTS[props.variant] || VARIANTS.default);
 const s = computed(() => SIZES[props.size] || SIZES.md);
-const isIconOnly = computed(() => props.variant === "icon");
+const isIconOnly = computed(() => props.variant === "icon" || (!slots.default && (Boolean(slots.icon) || Boolean(slots.iconRight))));
 </script>
 
 <template>
@@ -137,7 +148,7 @@ const isIconOnly = computed(() => props.variant === "icon");
       whiteSpace: 'nowrap',
       letterSpacing: '-.01em',
       outline: 'none',
-      boxShadow: 'var(--shadow, 0 1px 3px rgba(20,22,41,.1))',
+      boxShadow: v.boxShadow !== undefined ? v.boxShadow : 'var(--shadow, 0 1px 3px rgba(20,22,41,.1))',
       opacity: disabled ? 0.45 : 1,
       pointerEvents: disabled ? 'none' : undefined,
       background: v.background,
@@ -147,9 +158,9 @@ const isIconOnly = computed(() => props.variant === "icon");
       fontSize: `${s.fontSize}px`,
       height: `${s.height}px`,
       width: isIconOnly ? `${s.height}px` : undefined,
+      minWidth: isIconOnly ? `${s.height}px` : undefined,
       ...(v.paddingLeft !== undefined && { paddingLeft: v.paddingLeft }),
       ...(v.paddingRight !== undefined && { paddingRight: v.paddingRight }),
-      ...(v.boxShadow !== undefined && { boxShadow: v.boxShadow }),
     }"
     @click="emit('click', $event)"
   >

package/vue/components/Table.vue

@@ -52,7 +52,7 @@ const props = withDefaults(
     bordered: true,
     skeletonRows: undefined,
     autoSkeleton: true,
-    rowHeight: 51,
+    rowHeight: 40,
   }
 );
 
@@ -62,18 +62,11 @@ const emit = defineEmits<{
 }>();
 
 const rootRef = ref<HTMLElement | null>(null);
-const headerScrollRef = ref<HTMLElement | null>(null);
 const bodyScrollRef = ref<HTMLElement | null>(null);
 
-const handleBodyScroll = () => {
-  if (headerScrollRef.value && bodyScrollRef.value) {
-    headerScrollRef.value.scrollLeft = bodyScrollRef.value.scrollLeft;
-  }
-};
-
 const { rows: autoRows } = useAutoSkeletonRows(rootRef, {
   rowHeight: props.rowHeight,
-  bottomBuffer: 72,
+  bottomBuffer: 50,
 });
 
 const skeletonCount = computed(() => {
@@ -133,23 +126,23 @@ const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
     ]"
     :style="height ? { height: formatWidth(height) } : undefined"
   >
-    <!-- Separate Dedicated Fixed Header Container -->
+    <!-- Scrollable Single Unified Table Container (100% Column Alignment) -->
     <div
-      ref="headerScrollRef"
-      class="w-full overflow-hidden flex-shrink-0 border-b border-slate-200 dark:border-slate-800 bg-[#f8fafc] dark:bg-[#16192e]"
+      ref="bodyScrollRef"
+      class="w-full overflow-x-auto overflow-y-auto custom-scrollbar flex-1 relative"
     >
       <table class="w-full border-collapse text-left text-xs table-fixed">
         <colgroup>
           <col
             v-for="col in columns"
-            :key="`h-col-${col.key}`"
+            :key="`col-${col.key}`"
             :style="{
               width: formatWidth(col.width),
               minWidth: formatWidth(col.minWidth || col.width || 100),
             }"
           />
         </colgroup>
-        <thead>
+        <thead class="sticky top-0 z-10 bg-[#f8fafc] dark:bg-[#16192e] border-b border-slate-200 dark:border-slate-800 shadow-[0_1px_0_0_rgba(226,232,240,1)] dark:shadow-[0_1px_0_0_rgba(30,41,59,1)]">
           <tr>
             <th
               v-for="col in columns"
@@ -160,7 +153,7 @@ const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
                 textAlign: col.align || 'left',
               }"
               :class="[
-                'px-4 py-3 font-semibold text-[11px] uppercase tracking-wider text-slate-500 dark:text-slate-400 select-none transition-colors',
+                'px-3.5 py-2.5 font-semibold text-[11px] uppercase tracking-wider text-slate-500 dark:text-slate-400 select-none transition-colors bg-[#f8fafc] dark:bg-[#16192e]',
                 col.sortable ? 'cursor-pointer hover:text-slate-900 dark:hover:text-white' : '',
                 col.headerClass || ''
               ]"
@@ -200,28 +193,8 @@ const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
             </th>
           </tr>
         </thead>
-      </table>
-    </div>
-
-    <!-- Scrollable Body Container -->
-    <div
-      ref="bodyScrollRef"
-      class="w-full overflow-x-auto overflow-y-auto custom-scrollbar flex-1 relative"
-      @scroll="handleBodyScroll"
-    >
-      <table class="w-full border-collapse text-left text-xs table-fixed">
-        <colgroup>
-          <col
-            v-for="col in columns"
-            :key="`b-col-${col.key}`"
-            :style="{
-              width: formatWidth(col.width),
-              minWidth: formatWidth(col.minWidth || col.width || 100),
-            }"
-          />
-        </colgroup>
         <tbody class="divide-y divide-slate-100 dark:divide-slate-800/80">
-          <!-- Loading State (Content-Aware Professional Shimmer) -->
+          <!-- Loading State (Real matching heights and paddings) -->
           <template v-if="loading">
             <tr
               v-for="i in skeletonCount"
@@ -235,7 +208,7 @@ const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
                   textAlign: col.align || 'left',
                   height: `${rowHeight}px`,
                 }"
-                class="px-4 py-3 align-middle"
+                class="px-3.5 py-2 align-middle"
               >
                 <!-- Action button skeleton -->
                 <div v-if="col.key === 'actions'" class="flex items-center justify-center">
@@ -251,7 +224,7 @@ const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
                 <Skeleton
                   v-else
                   :width="getSkeletonWidth(i, cIdx, col.key)"
-                  :height="col.key === 'title' || cIdx === 0 ? 16 : 14"
+                  :height="14"
                   :radius="4"
                 />
               </td>
@@ -291,7 +264,7 @@ const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
                   height: `${rowHeight}px`,
                 }"
                 :class="[
-                  'px-4 py-3 text-slate-700 dark:text-slate-200 text-xs font-normal align-middle',
+                  'px-3.5 py-2 text-slate-700 dark:text-slate-200 text-xs font-normal align-middle',
                   col.cellClass || ''
                 ]"
               >