@innertia-solutions/innertia-nuxt 0.1.44 → 0.1.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -27,6 +27,10 @@ const props = defineProps({
|
|
|
27
27
|
loading: { type: Boolean, default: false },
|
|
28
28
|
emptyText: { type: String, default: 'Selecciona un elemento para ver su detalle.' },
|
|
29
29
|
selectedId: { type: [String, Number], default: null },
|
|
30
|
+
/** Alto del contenedor (CSS). Ajústalo para que la página quepa sin scroll. */
|
|
31
|
+
height: { type: String, default: 'calc(100dvh - 13rem)' },
|
|
32
|
+
/** Auto-refresco por realtime (se suscribe a los meta.channels del backend). */
|
|
33
|
+
realtime: { type: Boolean, default: true },
|
|
30
34
|
})
|
|
31
35
|
|
|
32
36
|
const emit = defineEmits(['select'])
|
|
@@ -50,7 +54,7 @@ watch(search, (v) => {
|
|
|
50
54
|
})
|
|
51
55
|
|
|
52
56
|
const queryKey = computed(() => [props.name, 'md', debouncedSearch.value, props.params])
|
|
53
|
-
const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useInfiniteQuery({
|
|
57
|
+
const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, refetch } = useInfiniteQuery({
|
|
54
58
|
queryKey,
|
|
55
59
|
queryFn: ({ pageParam = 1 }) => api.get(props.endpoint, {
|
|
56
60
|
params: { search: debouncedSearch.value, page: pageParam, perPage: props.perPage, ...props.params },
|
|
@@ -64,6 +68,17 @@ const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useI
|
|
|
64
68
|
})
|
|
65
69
|
const rows = computed(() => data.value?.pages.flatMap(p => p?.data ?? (Array.isArray(p) ? p : [])) ?? [])
|
|
66
70
|
|
|
71
|
+
// Realtime: se suscribe a los canales que anuncia el backend en meta.channels
|
|
72
|
+
// (entity.{tabla}[.{tenant}]) y refetchea la lista al recibir {canal}.changed.
|
|
73
|
+
const rt = props.realtime ? useTableRealtime(() => refetch()) : null
|
|
74
|
+
watch(data, () => {
|
|
75
|
+
if (!rt) return
|
|
76
|
+
const pages = data.value?.pages ?? []
|
|
77
|
+
const meta = pages[pages.length - 1]?.meta ?? pages[0]?.meta
|
|
78
|
+
rt.sync(meta?.channels ?? [])
|
|
79
|
+
}, { immediate: true })
|
|
80
|
+
onBeforeUnmount(() => rt?.teardown())
|
|
81
|
+
|
|
67
82
|
let observer = null
|
|
68
83
|
onMounted(() => {
|
|
69
84
|
observer = new IntersectionObserver((entries) => {
|
|
@@ -83,7 +98,7 @@ function pick(row) {
|
|
|
83
98
|
</script>
|
|
84
99
|
|
|
85
100
|
<template>
|
|
86
|
-
<div class="flex rounded-card border border-card-line overflow-hidden bg-card
|
|
101
|
+
<div class="flex rounded-card border border-card-line overflow-hidden bg-card min-h-[360px]" :style="{ height }">
|
|
87
102
|
<!-- ── Lista ── -->
|
|
88
103
|
<aside class="w-80 shrink-0 border-e border-card-line flex flex-col">
|
|
89
104
|
<div v-if="title || $slots.action" class="p-3 flex items-center justify-between gap-2 border-b border-card-line">
|