@innertia-solutions/innertia-nuxt 0.1.36 → 0.1.38

package/CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to `@innertia-solutions/innertia-nuxt` are documented here.
 
 ## [Unreleased]
 
+### Fixed
+
+- `Kanban.Standard`: en modo `bordered=false`, el `ring` de highlight al arrastrar sobre una columna se recortaba por arriba (el contenedor `overflow-x-auto` sin padding clippeaba los 2px del ring). Se agrega `p-1` al scroll container en ese modo.
+
 ### BREAKING CHANGES
 
 #### apps → contexts rename

package/components/Kanban/Standard.vue

@@ -69,11 +69,11 @@ const props = defineProps({
   filters:     { type: Array,   default: () => [] },
   showFilters: { type: Boolean, default: true },
 
-  // Realtime (solo endpoint mode): canal de broadcast a escuchar; el board se
-  // recarga al recibir cualquiera de los eventos. Por convención DomainEventKey,
-  // si no se pasan eventos se escucha '<canal>.updated'.
-  realtimeChannel: { type: String, default: null },
-  realtimeEvents:  { type: Array,  default: null },
+  // Realtime (solo endpoint mode): por defecto auto-suscribe a los canales que
+  // el backend declara en meta.channels. `realtimeChannel` es un override legacy
+  // que agrega un canal explícito a la lista.
+  realtime:        { type: Boolean, default: true },
+  realtimeChannel: { type: String,  default: null },
 
   // Caché en sessionStorage
   cached: { type: Boolean, default: false },
@@ -368,6 +368,7 @@ const fetchAll = async () => {
     const res = await api.post(props.endpoint, buildBody())
     rows.value = Array.isArray(res?.data) ? res.data : (Array.isArray(res) ? res : [])
     meta.value = res?.meta ?? null
+    syncRealtime()
     saveToCache()
     emit('loaded', res)
   } catch (e) {
@@ -409,6 +410,7 @@ const loadFromCache = () => {
     search.value = cached.search ?? ''
     activeFilters.value = cached.filters ?? {}
     isDataFromCache.value = true
+    syncRealtime()
     return true
   } catch { return false }
 }
@@ -535,19 +537,20 @@ const onDocMousedown = (e) => {
 }
 
 // ─── Realtime ────────────────────────────────────────────────────────────────
-const realtime = props.realtimeChannel ? useRealtime() : null
-async function setupRealtime() {
-  if (!realtime || isItemsMode.value) return
-  await realtime.connect()
-  const events = props.realtimeEvents ?? [`${props.realtimeChannel}.updated`]
-  realtime.subscribe(props.realtimeChannel, Object.fromEntries(events.map(e => [e, () => fetchAll()])))
+// Auto-suscribe a los canales que el backend declara en meta.channels (más el
+// override legacy `realtimeChannel`, si se pasa). Solo en endpoint mode.
+const tableRealtime = (props.realtime && !isItemsMode.value) ? useTableRealtime(() => fetchAll()) : null
+function syncRealtime() {
+  if (!tableRealtime) return
+  const fromMeta = Array.isArray(meta.value?.channels) ? meta.value.channels : []
+  const channels = props.realtimeChannel ? [...new Set([...fromMeta, props.realtimeChannel])] : fromMeta
+  tableRealtime.sync(channels)
 }
 
 // ─── Lifecycle ───────────────────────────────────────────────────────────────
 onMounted(() => {
   window.addEventListener('keydown', onEsc)
   document.addEventListener('mousedown', onDocMousedown)
-  setupRealtime()
   if (isItemsMode.value) return   // rows ya cargados por el watcher immediate
   if (loadFromCache()) return
   fetchAll()
@@ -556,7 +559,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
   window.removeEventListener('keydown', onEsc)
   document.removeEventListener('mousedown', onDocMousedown)
-  if (realtime && props.realtimeChannel) realtime.unsubscribe(props.realtimeChannel)
+  tableRealtime?.teardown()
 })
 
 defineExpose({ reload: fetchAll, rows })
@@ -692,7 +695,7 @@ defineExpose({ reload: fetchAll, rows })
       ]"
     >
       <div
-        :class="['overflow-x-auto', bordered ? 'p-3' : '']"
+        :class="['overflow-x-auto', bordered ? 'p-3' : 'p-1']"
         :style="sizeStyle"
       >
         <div v-if="loading && !rows.length" class="flex items-center justify-center py-16 gap-2 text-muted-foreground">

package/components/Table/Standard.vue

@@ -15,10 +15,11 @@ const props = defineProps({
   searchPlaceholder:       { type: String,  default: 'Buscar...' },
   showSearch:              { type: Boolean, default: true },
   showFilters:             { type: Boolean, default: true },
-  // Realtime: canal de broadcast a escuchar; la tabla hace reload() al recibir
-  // cualquiera de los eventos. Sin realtimeEvents se escucha '<canal>.updated'.
-  realtimeChannel:         { type: String, default: null },
-  realtimeEvents:          { type: Array,  default: null },
+  // Realtime: auto-suscripción a los canales que el backend expone en meta.channels
+  // (`entity.{tabla}.changed` → reload()). realtimeChannel queda como override manual
+  // (legacy, se suma a los del backend); realtime=false apaga la auto-suscripción.
+  realtimeChannel:         { type: String, default: null },   // override manual (legacy)
+  realtime:                { type: Boolean, default: true },   // apagar auto-suscripción
   showExport:              { type: Boolean, default: true },
   showColumns:             { type: Boolean, default: true },
   /** Mostrar selector "Filas por página" en el footer. Default false. */
@@ -382,10 +383,22 @@ const handleRowClick = (row) => {
   previewRow.value = row
 }
 
+// ─── Realtime ────────────────────────────────────────────────────────────────
+// Auto-suscripción a los canales que el backend expone en meta.channels. El
+// override manual (realtimeChannel) se suma a los del backend. realtime=false
+// desactiva la suscripción.
+const tableRealtime = props.realtime ? useTableRealtime(() => reload()) : null
+
+function channelsFrom(meta) {
+  const fromMeta = Array.isArray(meta?.channels) ? meta.channels : []
+  return props.realtimeChannel ? [...new Set([...fromMeta, props.realtimeChannel])] : fromMeta
+}
+
 // Cuando recarga la data, mantener viva la fila previewada (o cerrar si fue eliminada).
 const handleLoaded = (res) => {
   emit('loaded', res)
   if (res?.meta) tableMeta.value = res.meta
+  tableRealtime?.sync(channelsFrom(res?.meta))
   if (previewRow.value && Array.isArray(res?.data)) {
     const fresh = res.data.find(r => r.id === previewRow.value.id)
     if (fresh) previewRow.value = fresh
@@ -415,20 +428,10 @@ onMounted(() => {
   })
 })
 
-// Realtime opcional: recarga (preservando UI) al recibir eventos del canal.
-const realtime = props.realtimeChannel ? useRealtime() : null
-async function setupRealtime() {
-  if (!realtime) return
-  await realtime.connect()
-  const events = props.realtimeEvents ?? [`${props.realtimeChannel}.updated`]
-  realtime.subscribe(props.realtimeChannel, Object.fromEntries(events.map(e => [e, () => reload()])))
-}
-
 onMounted(async () => {
   previewEnabled.value = !!slots.preview
   window.addEventListener('keydown', onEsc)
   document.addEventListener('mousedown', onDocMousedown)
-  setupRealtime()
 
   // Load column preferences from backend
   if (props.persistPreferences && resolvedName.value) {
@@ -448,7 +451,7 @@ onMounted(async () => {
 onBeforeUnmount(() => {
   window.removeEventListener('keydown', onEsc)
   document.removeEventListener('mousedown', onDocMousedown)
-  if (realtime && props.realtimeChannel) realtime.unsubscribe(props.realtimeChannel)
+  tableRealtime?.teardown()
 })
 
 // ─── Column panel ─────────────────────────────────────────────────────────────

package/components/Tree/Standard.vue

@@ -78,6 +78,10 @@ const props = defineProps({
 
   // Resalta la fila seleccionada (id del nodo). Para selección externa via @row-click.
   selectedId:        { type: [String, Number], default: null },
+
+  // Realtime: auto-suscripción a los canales que el backend declara en meta.channels
+  // (`entity.{tabla}.changed` → reload() preservando expansión). realtime=false apaga.
+  realtime:          { type: Boolean, default: true },
 })
 
 const sizeStyle = computed(() => {
@@ -202,6 +206,7 @@ const fetchInitial = async () => {
     const res = await api.post(props.endpoint, buildBody())
     roots.value = res?.data ?? []
     meta.value  = res?.meta ?? null
+    syncRealtime()
     childrenById.value = {}
     // Colapsar todo: sin esto, un nodo expandido antes de cambiar search/params
     // queda con el chevron abierto pero sin hijos (childrenById se vació).
@@ -252,6 +257,15 @@ const reload = async () => {
   }
 }
 
+// ─── Realtime ─────────────────────────────────────────────────────────────────
+// Auto-suscripción a los canales del backend (meta.channels). Cada `{channel}.changed`
+// dispara reload() (debounced), refrescando datos sin perder la expansión actual.
+const tableRealtime = props.realtime ? useTableRealtime(() => reload()) : null
+function syncRealtime() {
+  if (!tableRealtime) return
+  tableRealtime.sync(Array.isArray(meta.value?.channels) ? meta.value.channels : [])
+}
+
 // ─── Cache ────────────────────────────────────────────────────────────────────
 const cacheKey = computed(() => {
   if (!props.cached || !props.name) return null
@@ -296,6 +310,7 @@ const loadFromCacheOnMount = () => {
     activeFilters.value = cached.filters ?? {}
     columnVisibility.value = cached.columnVisibility ?? columnVisibility.value
     isDataFromCache.value = true
+    syncRealtime()
     return true
   } catch {
     return false
@@ -567,6 +582,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
   window.removeEventListener('keydown', onEsc)
   document.removeEventListener('mousedown', onDocMousedown)
+  tableRealtime?.teardown()
 })
 
 defineExpose({

package/composables/useTableRealtime.js

@@ -0,0 +1,57 @@
+/**
+ * Suscribe un componente de datos (table/kanban/tree) a uno o varios canales
+ * `entity.{tabla}` y dispara reloadFn() debounceado al recibir `{canal}.changed`.
+ *
+ * - sync(channels): difunde la lista de canales (de meta.channels). Suscribe los
+ *   nuevos, des-suscribe los que ya no están. Idempotente: llamar tras cada fetch.
+ * - teardown(): des-suscribe todo (llamar en onBeforeUnmount).
+ *
+ * Coalesce: varios pings en la ventana de debounce → un solo reload.
+ * In-flight guard: si llega un ping mientras reloadFn está corriendo, re-dispara al terminar.
+ */
+export function useTableRealtime(reloadFn, { debounceMs = 400 } = {}) {
+  const rt = useRealtime()
+  const subscribed = new Set()
+  let timer = null
+  let inFlight = false
+  let pending = false
+
+  const fire = async () => {
+    inFlight = true
+    try { await reloadFn() }
+    finally {
+      inFlight = false
+      if (pending) { pending = false; ping() }
+    }
+  }
+
+  const ping = () => {
+    if (inFlight) { pending = true; return }
+    clearTimeout(timer)
+    timer = setTimeout(fire, debounceMs)
+  }
+
+  const sync = async (channels = []) => {
+    const next = new Set(Array.isArray(channels) ? channels.filter(Boolean) : [])
+    if (!next.size && !subscribed.size) return
+    if (next.size) await rt.connect()
+
+    for (const ch of [...subscribed]) {
+      if (!next.has(ch)) { rt.unsubscribe(ch); subscribed.delete(ch) }
+    }
+    for (const ch of next) {
+      if (!subscribed.has(ch)) {
+        rt.subscribe(ch, { [`${ch}.changed`]: ping })
+        subscribed.add(ch)
+      }
+    }
+  }
+
+  const teardown = () => {
+    clearTimeout(timer)
+    for (const ch of [...subscribed]) rt.unsubscribe(ch)
+    subscribed.clear()
+  }
+
+  return { sync, teardown }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/innertia-nuxt",
-  "version": "0.1.36",
+  "version": "0.1.38",
   "description": "Innertia Solutions — Nuxt layer unificada: core, auth, multitenancy, theme y app contexts",
   "keywords": [
     "nuxt",