@innertia-solutions/nuxt-theme-spark 0.1.61 → 0.1.63

package/components/Table.vue

@@ -302,6 +302,36 @@ const setColumnOrder = (order) => { columnOrder.value = order }
 // ─── Header drag reorder ──────────────────────────────────────────────────────
 let draggedHeaderId = null
 const dragOverHeaderId = ref(null)
+const resizeHoverId = ref(null)
+
+// ─── Column auto-size on double click ─────────────────────────────────────────
+const _canvas = typeof document !== 'undefined' ? document.createElement('canvas') : null
+const _ctx = _canvas?.getContext('2d')
+
+const measureText = (text, font) => {
+  if (!_ctx) return 0
+  _ctx.font = font
+  return _ctx.measureText(String(text ?? '')).width
+}
+
+const autoSizeColumn = (header) => {
+  const colId = header.column.id
+  const pad = 32 // px-4 on each side
+
+  // Measure header label
+  const label = header.column.columnDef.meta?.label ?? header.id
+  let max = measureText(label, '500 12px ui-sans-serif,system-ui,sans-serif') + pad + 20 // +20 for sort icon
+
+  // Measure all visible data cells
+  if (tableBodyRef.value) {
+    tableBodyRef.value.querySelectorAll(`td[data-col-id="${colId}"]`).forEach(td => {
+      const w = measureText(td.textContent?.trim(), '14px ui-sans-serif,system-ui,sans-serif') + pad
+      if (w > max) max = w
+    })
+  }
+
+  header.column.setSize(Math.ceil(max))
+}
 
 const onHeaderDragStart = (colId) => { draggedHeaderId = colId }
 const onHeaderDragOver = (e, colId) => { e.preventDefault(); dragOverHeaderId.value = colId }
@@ -462,8 +492,8 @@ defineExpose({
                 v-for="header in headerGroup.headers"
                 :key="header.id"
                 scope="col"
-                :draggable="header.id !== 'select'"
-                @dragstart="header.id !== 'select' && onHeaderDragStart(header.id)"
+                :draggable="header.id !== 'select' && resizeHoverId !== header.id"
+                @dragstart="header.id !== 'select' && resizeHoverId !== header.id && onHeaderDragStart(header.id)"
                 @dragover="header.id !== 'select' && onHeaderDragOver($event, header.id)"
                 @dragleave="onHeaderDragLeave"
                 @drop="header.id !== 'select' && onHeaderDrop(header.id)"
@@ -499,8 +529,11 @@ defineExpose({
                   <div
                     v-if="header.column.getCanResize()"
                     class="absolute right-0 top-0 h-full w-3 cursor-col-resize group/rz flex items-center justify-center select-none touch-none"
+                    @mouseenter="resizeHoverId = header.id"
+                    @mouseleave="resizeHoverId = null"
                     @mousedown.stop="header.getResizeHandler()?.($event)"
                     @touchstart.passive.stop="header.getResizeHandler()?.($event)"
+                    @dblclick.stop="autoSizeColumn(header)"
                     @dragstart.stop.prevent
                     @click.stop
                   >
@@ -602,6 +635,7 @@ defineExpose({
             <td
               v-for="cell in row.getVisibleCells()"
               :key="cell.id"
+              :data-col-id="cell.column.id"
               :class="[
                 cell.column.id === 'select'
                   ? 'text-center w-12'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/nuxt-theme-spark",
-  "version": "0.1.61",
+  "version": "0.1.63",
   "description": "Innertia Solutions — Spark theme: backoffice, landing and mobile components and layouts",
   "keywords": [
     "nuxt",