@innertia-solutions/nuxt-theme-spark 0.1.62 → 0.1.64

package/components/Table.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { useVueTable, getCoreRowModel } from '@tanstack/vue-table'
 import {
-  IconArrowsSort,
-  IconSortAscendingSmallBig,
-  IconSortDescendingSmallBig,
+  IconSelector,
+  IconChevronUp,
+  IconChevronDown,
   IconReload,
   IconBolt,
 } from '@tabler/icons-vue'
@@ -304,6 +304,35 @@ 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 }
 const onHeaderDragLeave = () => { dragOverHeaderId.value = null }
@@ -491,9 +520,9 @@ defineExpose({
                   <div class="px-4 py-3 flex items-center gap-x-1 text-xs font-medium text-slate-500 dark:text-slate-400 w-full">
                     {{ header.column.columnDef.meta?.label ?? header.id }}
                     <span v-if="header.column.getCanSort()">
-                      <IconArrowsSort v-if="!header.column.getIsSorted()" class="size-4 opacity-40" />
-                      <IconSortDescendingSmallBig v-else-if="header.column.getIsSorted() === 'desc'" class="size-5" />
-                      <IconSortAscendingSmallBig v-else class="size-5" />
+                      <IconSelector v-if="!header.column.getIsSorted()" class="size-4 opacity-40" />
+                      <IconChevronDown v-else-if="header.column.getIsSorted() === 'desc'" class="size-4" />
+                      <IconChevronUp v-else class="size-4" />
                     </span>
                   </div>
                   <!-- Resize handle -->
@@ -504,6 +533,7 @@ defineExpose({
                     @mouseleave="resizeHoverId = null"
                     @mousedown.stop="header.getResizeHandler()?.($event)"
                     @touchstart.passive.stop="header.getResizeHandler()?.($event)"
+                    @dblclick.stop="autoSizeColumn(header)"
                     @dragstart.stop.prevent
                     @click.stop
                   >
@@ -605,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.62",
+  "version": "0.1.64",
   "description": "Innertia Solutions — Spark theme: backoffice, landing and mobile components and layouts",
   "keywords": [
     "nuxt",