@innertia-solutions/nuxt-theme-spark 0.1.116 → 0.1.117

package/components/Table/Standard.vue

@@ -140,8 +140,10 @@ onBeforeUnmount(() => {
 })
 
 // ─── Column panel ─────────────────────────────────────────────────────────────
-const showColumnPanel = ref(false)
-const columnPanelRef  = ref(null)
+const showColumnPanel   = ref(false)
+const columnPanelRef    = ref(null)
+const columnButtonRef   = ref(null)
+const columnPanelStyle  = ref({})
 
 const orderedColumns = computed(() => {
   if (!tableRef.value) return props.columns.filter(c => c.label)
@@ -171,7 +173,10 @@ const onDrop = (key) => {
 }
 
 const onColumnPanelOutsideClick = (e) => {
-  if (columnPanelRef.value && !columnPanelRef.value.contains(e.target)) {
+  if (
+    columnPanelRef.value && !columnPanelRef.value.contains(e.target) &&
+    columnButtonRef.value && !columnButtonRef.value.contains(e.target)
+  ) {
     showColumnPanel.value = false
   }
 }
@@ -181,9 +186,20 @@ const onFilterPanelOutsideClick = (e) => {
   }
 }
 
-watch(showColumnPanel, (v) => {
-  if (v) document.addEventListener('mousedown', onColumnPanelOutsideClick)
-  else document.removeEventListener('mousedown', onColumnPanelOutsideClick)
+watch(showColumnPanel, async (v) => {
+  if (v) {
+    await nextTick()
+    const rect = columnButtonRef.value?.getBoundingClientRect()
+    if (rect) {
+      columnPanelStyle.value = {
+        top:   rect.bottom + 6 + 'px',
+        right: window.innerWidth - rect.right + 'px',
+      }
+    }
+    document.addEventListener('mousedown', onColumnPanelOutsideClick)
+  } else {
+    document.removeEventListener('mousedown', onColumnPanelOutsideClick)
+  }
 })
 watch(showFilterPanel, (v) => {
   if (v) document.addEventListener('mousedown', onFilterPanelOutsideClick)
@@ -249,6 +265,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
         <slot name="toolbar" />
 
         <button
+          ref="columnButtonRef"
           type="button"
           @click="showColumnPanel = !showColumnPanel"
           :class="[
@@ -321,47 +338,50 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
       </div>
     </div>
 
-    <!-- Column panel — outside overflow-hidden so never clipped -->
-    <Transition
-      enter-active-class="transition ease-out duration-150"
-      enter-from-class="opacity-0 translate-y-1 scale-95"
-      enter-to-class="opacity-100 translate-y-0 scale-100"
-      leave-active-class="transition ease-in duration-100"
-      leave-from-class="opacity-100 translate-y-0 scale-100"
-      leave-to-class="opacity-0 translate-y-1 scale-95"
-    >
-      <div
-        v-if="showColumnPanel"
-        ref="columnPanelRef"
-        class="absolute top-12 right-0 z-50 bg-dropdown border border-dropdown-line rounded-xl shadow-2xl p-3 min-w-56 max-h-80 overflow-y-auto"
+    <!-- Column panel — teleported to body to escape overflow-hidden -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition ease-out duration-150"
+        enter-from-class="opacity-0 translate-y-1 scale-95"
+        enter-to-class="opacity-100 translate-y-0 scale-100"
+        leave-active-class="transition ease-in duration-100"
+        leave-from-class="opacity-100 translate-y-0 scale-100"
+        leave-to-class="opacity-0 translate-y-1 scale-95"
       >
-        <p class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest mb-2 px-1">
-          Columnas visibles
-        </p>
         <div
-          v-for="col in orderedColumns"
-          :key="col.key"
-          draggable="true"
-          @dragstart="onDragStart(col.key)"
-          @dragover="(e) => onDragOver(e, col.key)"
-          @dragleave="onDragLeave"
-          @drop="onDrop(col.key)"
-          class="flex items-center gap-2 py-1.5 px-2 rounded-lg select-none transition-colors"
-          :class="dragOverKey === col.key
-            ? 'bg-blue-50 dark:bg-blue-900/20 ring-1 ring-blue-300 dark:ring-blue-700'
-            : 'hover:bg-muted-hover cursor-grab'"
+          v-if="showColumnPanel"
+          ref="columnPanelRef"
+          class="fixed z-50 bg-dropdown border border-dropdown-line rounded-xl shadow-2xl p-3 min-w-56 max-h-80 overflow-y-auto"
+          :style="columnPanelStyle"
         >
-          <IconGripVertical class="size-4 text-muted-foreground-2 shrink-0" />
-          <input
-            type="checkbox"
-            :checked="tableRef?.table.getColumn(col.key)?.getIsVisible() ?? true"
-            @change="tableRef?.table.getColumn(col.key)?.toggleVisibility()"
-            @click.stop
-            class="rounded border-card-line bg-surface shrink-0 cursor-pointer"
-          />
-          <span class="text-sm text-foreground truncate">{{ col.label }}</span>
+          <p class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest mb-2 px-1">
+            Columnas visibles
+          </p>
+          <div
+            v-for="col in orderedColumns"
+            :key="col.key"
+            draggable="true"
+            @dragstart="onDragStart(col.key)"
+            @dragover="(e) => onDragOver(e, col.key)"
+            @dragleave="onDragLeave"
+            @drop="onDrop(col.key)"
+            class="flex items-center gap-2 py-1.5 px-2 rounded-lg select-none transition-colors"
+            :class="dragOverKey === col.key
+              ? 'bg-blue-50 dark:bg-blue-900/20 ring-1 ring-blue-300 dark:ring-blue-700'
+              : 'hover:bg-muted-hover cursor-grab'"
+          >
+            <IconGripVertical class="size-4 text-muted-foreground-2 shrink-0" />
+            <input
+              type="checkbox"
+              :checked="tableRef?.table.getColumn(col.key)?.getIsVisible() ?? true"
+              @change="tableRef?.table.getColumn(col.key)?.toggleVisibility()"
+              @click.stop
+              class="rounded border-card-line bg-surface shrink-0 cursor-pointer"
+            />
+            <span class="text-sm text-foreground truncate">{{ col.label }}</span>
+          </div>
         </div>
-      </div>
-    </Transition>
+      </Transition>
+    </Teleport>
   </div>
 </template>

package/package.json

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