cynx-lib 1.3.64 → 1.3.66

package/package.json

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

package/ui/components/Button.jsx

@@ -51,6 +51,33 @@ const VARIANTS = {
     hoverBg: 'var(--grey-1,#f5f5f8)',
     hoverBorder: 'var(--grey-2,#ebebee)',
   },
+  plain: {
+    background: 'transparent',
+    color: 'var(--t2,#797b8d)',
+    border: '1px solid transparent',
+    hoverColor: 'var(--t1,#1a1a2e)',
+    hoverBg: 'var(--grey-1,#f5f5f8)',
+    hoverBorder: 'transparent',
+    boxShadow: 'none',
+  },
+  flat: {
+    background: 'transparent',
+    color: 'var(--t2,#797b8d)',
+    border: '1px solid transparent',
+    hoverColor: 'var(--t1,#1a1a2e)',
+    hoverBg: 'var(--grey-1,#f5f5f8)',
+    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',
     color: 'var(--accent,#f99e2c)',
@@ -102,7 +129,7 @@ export default function Button({
   const v = VARIANTS[variant] || VARIANTS.default;
   const s = SIZES[size] || SIZES.md;
 
-  const isIconOnly = variant === 'icon';
+  const isIconOnly = variant === 'icon' || (!children && (Boolean(icon) || Boolean(iconRight)));
 
   return (
     <button
@@ -122,7 +149,7 @@ export default function Button({
         transition: 'all .14s',
         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,
@@ -132,6 +159,8 @@ export default function Button({
         fontSize: s.fontSize,
         height: s.height,
         width: isIconOnly ? s.height : undefined,
+        minWidth: isIconOnly ? s.height : undefined,
+        maxWidth: isIconOnly ? s.height : undefined,
         ...(v.paddingLeft !== undefined && { paddingLeft: v.paddingLeft }),
         ...(v.paddingRight !== undefined && { paddingRight: v.paddingRight }),
         ...(v.boxShadow !== undefined && { boxShadow: v.boxShadow }),

package/vue/components/Button.vue

@@ -60,6 +60,23 @@ const VARIANTS: Record<string, any> = {
     hoverShadow: "0 2px 8px rgba(249,158,44,.25)",
   },
   ghost: {
+    background: "var(--surface, #ffffff)",
+    color: "var(--t2, #797b8d)",
+    border: "1px solid var(--bd, #d7d8e0)",
+    hoverColor: "var(--t1, #1a1a2e)",
+    hoverBg: "var(--grey-1, #f5f5f8)",
+    hoverBorder: "var(--grey-2, #ebebee)",
+  },
+  plain: {
+    background: "transparent",
+    color: "var(--t2, #797b8d)",
+    border: "1px solid transparent",
+    hoverColor: "var(--t1, #1a1a2e)",
+    hoverBg: "var(--grey-1, #f5f5f8)",
+    hoverBorder: "transparent",
+    boxShadow: "none",
+  },
+  flat: {
     background: "transparent",
     color: "var(--t2, #797b8d)",
     border: "1px solid transparent",

package/vue/components/Table.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, ref, onMounted, onUnmounted, watch, nextTick } from "vue";
 import {
   ChevronUp,
   ChevronDown,
@@ -64,6 +64,45 @@ const emit = defineEmits<{
 const rootRef = ref<HTMLElement | null>(null);
 const headerScrollRef = ref<HTMLElement | null>(null);
 const bodyScrollRef = ref<HTMLElement | null>(null);
+const gutterWidth = ref(0);
+
+const updateGutter = () => {
+  if (bodyScrollRef.value) {
+    const hasVScroll = bodyScrollRef.value.scrollHeight > bodyScrollRef.value.clientHeight;
+    if (hasVScroll) {
+      const scrollWidth = bodyScrollRef.value.offsetWidth - bodyScrollRef.value.clientWidth;
+      gutterWidth.value = scrollWidth > 0 ? scrollWidth : 6;
+    } else {
+      gutterWidth.value = 0;
+    }
+  } else {
+    gutterWidth.value = 0;
+  }
+};
+
+let resizeObserver: ResizeObserver | null = null;
+
+onMounted(() => {
+  if (bodyScrollRef.value && typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(() => {
+      updateGutter();
+    });
+    resizeObserver.observe(bodyScrollRef.value);
+  }
+  nextTick(updateGutter);
+});
+
+onUnmounted(() => {
+  resizeObserver?.disconnect();
+});
+
+watch(
+  () => [props.data, props.columns, props.loading],
+  () => {
+    nextTick(updateGutter);
+  },
+  { deep: true }
+);
 
 const handleBodyScroll = () => {
   if (headerScrollRef.value && bodyScrollRef.value) {
@@ -148,6 +187,7 @@ const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
               minWidth: formatWidth(col.minWidth || col.width || 100),
             }"
           />
+          <col v-if="gutterWidth > 0" :style="{ width: `${gutterWidth}px` }" />
         </colgroup>
         <thead>
           <tr>
@@ -198,6 +238,11 @@ const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
                 </span>
               </div>
             </th>
+            <th
+              v-if="gutterWidth > 0"
+              class="bg-[#f8fafc] dark:bg-[#16192e] p-0 border-0 pointer-events-none"
+              :style="{ width: `${gutterWidth}px`, minWidth: `${gutterWidth}px` }"
+            />
           </tr>
         </thead>
       </table>