@innertia-solutions/innertia-nuxt 0.1.32 → 0.1.34

package/components/Tree/Node.vue

@@ -23,10 +23,14 @@ const props = defineProps({
 
   // Column visibility — map { [colKey]: boolean }. Si null, todas visibles.
   columnVisibility: { type: Object, default: null },
+
+  // Resalta la fila cuyo id coincide (selección externa via @row-click).
+  selectedId: { type: [String, Number], default: null },
 })
 
 const emit = defineEmits(['toggle', 'row-click', 'check'])
 
+const isSelected = computed(() => props.selectedId != null && props.node.id === props.selectedId)
 const isExpanded   = computed(() => props.expanded.has(props.node.id))
 const isLoading    = computed(() => props.loadingSet.has(props.node.id))
 const hasChildren  = computed(() => !!props.node.has_children)
@@ -79,7 +83,7 @@ const indentPx = computed(() => props.depth * 20)
       class="bg-card hover:bg-layer-hover transition-colors"
       :class="[
         clickableRows ? 'cursor-pointer' : '',
-        isChecked ? 'bg-primary/5' : '',
+        isSelected ? 'bg-primary/10 hover:bg-primary/10' : (isChecked ? 'bg-primary/5' : ''),
       ]"
       @click="onRowClick"
     >
@@ -154,6 +158,7 @@ const indentPx = computed(() => props.depth * 20)
         :checked-set="checkedSet"
         :indeterminate-set="indeterminateSet"
         :column-visibility="columnVisibility"
+        :selected-id="selectedId"
         @toggle="(n) => emit('toggle', n)"
         @row-click="(n) => emit('row-click', n)"
         @check="(n) => emit('check', n)"
@@ -171,7 +176,7 @@ const indentPx = computed(() => props.depth * 20)
       class="group flex items-center gap-1.5 px-2 py-1 rounded-control hover:bg-muted-hover transition-colors"
       :class="[
         clickableRows ? 'cursor-pointer' : '',
-        isChecked ? 'bg-primary/5' : '',
+        isSelected ? 'bg-primary/10 hover:bg-primary/10' : (isChecked ? 'bg-primary/5' : ''),
       ]"
       :style="{ paddingLeft: (indentPx + 8) + 'px' }"
       @click="onRowClick"
@@ -245,6 +250,7 @@ const indentPx = computed(() => props.depth * 20)
         :checked-set="checkedSet"
         :indeterminate-set="indeterminateSet"
         :column-visibility="columnVisibility"
+        :selected-id="selectedId"
         @toggle="(n) => emit('toggle', n)"
         @row-click="(n) => emit('row-click', n)"
         @check="(n) => emit('check', n)"

package/components/Tree/Standard.vue

@@ -75,6 +75,9 @@ const props = defineProps({
   autoClosePreview:  { type: Boolean, default: true },
   /** Porcentaje inicial de la tabla (0-100). El resto lo ocupa el preview. */
   splitRatio:        { type: Number, default: 55 },
+
+  // Resalta la fila seleccionada (id del nodo). Para selección externa via @row-click.
+  selectedId:        { type: [String, Number], default: null },
 })
 
 const sizeStyle = computed(() => {
@@ -217,7 +220,8 @@ const fetchInitial = async () => {
  * Útil tras mutar un nodo (ej. marcar revisado) sin remontar el componente.
  */
 const reload = async () => {
-  loading.value = true
+  // No tocamos `loading` (eso dispara el skeleton y hace desaparecer el árbol).
+  // Solo `isFetching` → spinner sutil, el árbol queda visible durante el refresh.
   isFetching.value = true
   isDataFromCache.value = false
   try {
@@ -241,7 +245,6 @@ const reload = async () => {
   } catch (e) {
     console.error('[Tree.Standard] reload failed:', e)
   } finally {
-    loading.value = false
     isFetching.value = false
   }
 }
@@ -627,6 +630,9 @@ defineExpose({
       <!-- Secondary actions -->
       <div class="ml-auto flex items-center gap-1">
 
+        <!-- Spinner de refresco (reload preservando expansión) -->
+        <IconLoader2 v-if="isFetching && !loading" class="size-4 text-muted-foreground animate-spin" />
+
         <!-- Instant + Reload SIEMPRE primero cuando infoPosition === 'none' -->
         <InfoToolbar
           v-if="infoPosition === 'none'"
@@ -861,6 +867,7 @@ defineExpose({
               :checked-set="checkedSet"
               :indeterminate-set="indeterminateSet"
               :column-visibility="columnVisibility"
+              :selected-id="selectedId"
               @toggle="toggle"
               @check="toggleCheck"
               @row-click="handleRowClick"
@@ -904,6 +911,7 @@ defineExpose({
               :checked-set="checkedSet"
               :indeterminate-set="indeterminateSet"
               :column-visibility="columnVisibility"
+              :selected-id="selectedId"
               @toggle="toggle"
               @check="toggleCheck"
               @row-click="handleRowClick"

package/package.json

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