@innertia-solutions/nuxt-theme-spark 0.1.115 → 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/components/TableExportable.vue

@@ -13,12 +13,24 @@ const props = defineProps({
   columns:  { type: Array,  default: () => [] },
 })
 
-const isOpen   = ref(false)
-const format   = ref('xlsx')
-const filename = ref(props.name)
+const isOpen          = ref(false)
+const format          = ref('xlsx')
+const filename        = ref(props.name)
+const selectedColumns = ref([])
 
+watch(() => props.columns, (cols) => { selectedColumns.value = cols.map(c => c.key) }, { immediate: true })
 watch(() => props.name, (v) => { filename.value = v })
 
+const toggleColumn = (key) => {
+  const idx = selectedColumns.value.indexOf(key)
+  if (idx >= 0) selectedColumns.value.splice(idx, 1)
+  else selectedColumns.value.push(key)
+}
+const allSelected   = computed(() => selectedColumns.value.length === props.columns.length)
+const toggleAll     = () => {
+  selectedColumns.value = allSelected.value ? [] : props.columns.map(c => c.key)
+}
+
 const formats = [
   { value: 'xlsx', label: 'Excel' },
   { value: 'csv',  label: 'CSV'   },
@@ -27,7 +39,7 @@ const formats = [
 ]
 
 const doExport = () => {
-  props.tableRef?.exportTable(format.value, true, true)
+  props.tableRef?.exportTable(format.value, true, true, selectedColumns.value)
   isOpen.value = false
 }
 
@@ -118,6 +130,31 @@ defineExpose({ open: () => { isOpen.value = true } })
           </div>
         </div>
 
+        <!-- Columns -->
+        <div v-if="columns.length > 0" class="mb-3 px-1">
+          <div class="flex items-center justify-between mb-1.5">
+            <label class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">Columnas</label>
+            <button type="button" @click="toggleAll" class="text-[10px] text-blue-600 dark:text-blue-400 hover:underline">
+              {{ allSelected ? 'Ninguna' : 'Todas' }}
+            </button>
+          </div>
+          <div class="max-h-32 overflow-y-auto space-y-0.5">
+            <label
+              v-for="col in columns"
+              :key="col.key"
+              class="flex items-center gap-2 py-1 px-1.5 rounded-lg hover:bg-muted-hover cursor-pointer"
+            >
+              <input
+                type="checkbox"
+                :checked="selectedColumns.includes(col.key)"
+                @change="toggleColumn(col.key)"
+                class="rounded border-card-line bg-surface shrink-0 cursor-pointer"
+              />
+              <span class="text-xs text-foreground truncate">{{ col.label }}</span>
+            </label>
+          </div>
+        </div>
+
         <!-- Export button -->
         <button
           type="button"

package/package.json

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