@innertia-solutions/nuxt-theme-spark 0.1.19 → 0.1.21

package/components/Admin/Page.vue

@@ -1,3 +1,5 @@
+<script setup></script>
+
 <template>
   <div class="lg:ps-65">
     <slot />

package/components/Table.vue

@@ -48,6 +48,8 @@ const sorting = ref([])
 const columnFilters = ref([])
 const columnVisibility = ref({})
 const columnOrder = ref([])
+const columnSizing = ref({})
+const columnSizingInfo = ref({})
 const rowSelection = ref({})
 const isCustomPerPage = ref(false)
 
@@ -64,7 +66,10 @@ const buildColumnDefs = () => {
       header: 'select',
       enableSorting: false,
       enableColumnFilter: false,
+      enableResizing: false,
       size: 48,
+      minSize: 48,
+      maxSize: 48,
     })
   }
   for (const col of props.columns) {
@@ -74,6 +79,10 @@ const buildColumnDefs = () => {
       header: col.label,
       enableSorting: col.sortable ?? false,
       enableColumnFilter: col.filterable ?? false,
+      enableResizing: col.resizable !== false,
+      size: col.size ?? 200,
+      minSize: 60,
+      maxSize: 800,
       meta: { class: col.class ?? '', label: col.label },
     })
   }
@@ -95,6 +104,8 @@ const table = useVueTable({
     get columnFilters() { return columnFilters.value },
     get columnVisibility() { return columnVisibility.value },
     get columnOrder() { return columnOrder.value },
+    get columnSizing() { return columnSizing.value },
+    get columnSizingInfo() { return columnSizingInfo.value },
     get rowSelection() { return rowSelection.value },
   },
   onPaginationChange: makeUpdater(pagination),
@@ -102,8 +113,12 @@ const table = useVueTable({
   onColumnFiltersChange: makeUpdater(columnFilters),
   onColumnVisibilityChange: makeUpdater(columnVisibility),
   onColumnOrderChange: makeUpdater(columnOrder),
+  onColumnSizingChange: makeUpdater(columnSizing),
+  onColumnSizingInfoChange: makeUpdater(columnSizingInfo),
   onRowSelectionChange: makeUpdater(rowSelection),
   getCoreRowModel: getCoreRowModel(),
+  columnResizeMode: 'onChange',
+  enableColumnResizing: true,
   manualPagination: true,
   manualSorting: true,
   manualFiltering: true,
@@ -483,7 +498,17 @@ defineExpose({
 
     <!-- Table view -->
     <div v-if="!isGridView" class="overflow-x-auto relative">
-      <table class="relative min-w-full divide-y divide-gray-200 dark:divide-slate-700">
+      <table
+        class="relative divide-y divide-gray-200 dark:divide-slate-700"
+        :style="{ tableLayout: 'fixed', width: table.getTotalSize() + 'px', minWidth: '100%' }"
+      >
+        <colgroup>
+          <col
+            v-for="col in table.getVisibleLeafColumns()"
+            :key="col.id"
+            :style="{ width: col.getSize() + 'px' }"
+          >
+        </colgroup>
         <thead class="relative z-20 bg-white dark:bg-slate-800">
           <template v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
             <!-- Main header row -->
@@ -500,8 +525,9 @@ defineExpose({
                 @dragover="header.id !== 'select' && onHeaderDragOver($event, header.id)"
                 @dragleave="onHeaderDragLeave"
                 @drop="header.id !== 'select' && onHeaderDrop(header.id)"
+                class="relative overflow-hidden"
                 :class="[
-                  header.id === 'select' ? 'text-center w-12' : (header.column.columnDef.meta?.class || 'min-w-52'),
+                  header.id === 'select' ? 'text-center' : '',
                   dragOverHeaderId === header.id ? 'bg-indigo-50 dark:bg-indigo-900/20' : '',
                   header.column.getCanSort() ? 'cursor-pointer select-none' : '',
                 ]"
@@ -527,6 +553,20 @@ defineExpose({
                       <IconSortAscendingSmallBig v-else class="size-5" />
                     </span>
                   </div>
+                  <!-- Resize handle -->
+                  <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"
+                    @mousedown.stop="header.getResizeHandler()?.($event)"
+                    @touchstart.passive.stop="header.getResizeHandler()?.($event)"
+                  >
+                    <div
+                      class="h-4 w-px transition-all"
+                      :class="header.column.getIsResizing()
+                        ? 'bg-indigo-400 dark:bg-indigo-500 !w-0.5'
+                        : 'bg-slate-200 dark:bg-slate-600 group-hover/rz:bg-indigo-300 dark:group-hover/rz:bg-indigo-600 group-hover/rz:w-0.5'"
+                    />
+                  </div>
                 </template>
               </th>
             </tr>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/nuxt-theme-spark",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "description": "Innertia Solutions — Spark theme: backoffice, landing and mobile components and layouts",
   "keywords": [
     "nuxt",
@@ -43,4 +43,4 @@
     "nuxt": "^4.4.2",
     "vue": "^3.5.0"
   }
-}
+}