@innertia-solutions/innertia-nuxt 0.1.43 → 0.1.45

package/components/Forms/Select.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   options: { value: string | number; label: string; disabled?: boolean }[]
   modelValue?: string | number | null
   label?: string
@@ -11,7 +11,11 @@ const props = defineProps<{
   loading?: boolean
   /** Falló la carga de opciones: muestra mensaje + botón Reintentar (emite 'retry'). */
   loadError?: boolean | string
-}>()
+  /** Permite volver a "Seleccionar…" (blanquear la selección). Default true. */
+  clearable?: boolean
+}>(), {
+  clearable: true,
+})
 
 const emit = defineEmits<{
   'update:modelValue': [value: string | number | null]
@@ -23,14 +27,29 @@ const loadErrorMessage = computed(() =>
   typeof props.loadError === 'string' && props.loadError ? props.loadError : 'No se pudieron cargar las opciones.'
 )
 
+const emptyLabel = computed(() => props.placeholder ?? 'Seleccionar...')
+
+/**
+ * Config de HSSelect. Si `clearable`, NO seteamos `placeholder` en Preline: así la
+ * opción vacía "Seleccionar…" queda como una opción normal (re-seleccionable) y el
+ * usuario puede blanquear la selección. Si no, la vacía actúa de placeholder (Preline
+ * la oculta una vez elegido un valor).
+ */
+const hsConfig = computed(() => JSON.stringify({
+  ...(props.clearable ? {} : { placeholder: emptyLabel.value }),
+  dropdownScope: 'window',
+  toggleTag: '<button type="button" aria-expanded="false"></button>',
+  toggleClasses: 'innertia-field hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative pe-9 flex gap-x-2 items-center text-nowrap cursor-pointer text-start',
+  dropdownClasses: 'z-[10000] w-full max-h-72 py-1 bg-[color:var(--field-dropdown-bg)] border border-[color:var(--field-border)] rounded-control overflow-hidden overflow-y-auto shadow-lg',
+  optionClasses: 'py-2 px-3 w-full text-sm text-foreground cursor-pointer bg-transparent hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover',
+  optionTemplate: '<div class="flex justify-between items-center w-full"><span data-title></span><span class="hidden hs-selected:block"><svg class="shrink-0 size-3.5 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></span></div>',
+}))
+
 const selectRef = ref<HTMLSelectElement | null>(null)
 
 /**
- * Init Preline HSSelect una sola vez después del mount.
- * No destruimos ni re-inicializamos en cambios de options — para forzar
- * un re-mount limpio, el consumer puede cambiar el `:key` del componente.
- *
- * Si Preline aún no está disponible (plugin carga async), esperamos.
+ * Init Preline HSSelect una sola vez después del mount. Para forzar un re-mount
+ * limpio (ej. cambian las options), el consumer cambia el `:key` del componente.
  */
 const initHsSelect = async () => {
   await nextTick()
@@ -41,15 +60,11 @@ const initHsSelect = async () => {
     const HSSelect = (window as any).HSSelect
     if (!HSSelect) {
       if (attempts < 20) {
-        // Re-intentar hasta 20 frames (~330ms) esperando que cargue el plugin
         requestAnimationFrame(() => tryInit(attempts + 1))
       }
       return
     }
-
-    // Evitar doble init si ya hay una instancia registrada
     if (HSSelect.getInstance?.(el)) return
-
     try {
       new HSSelect(el)
     } catch (e) {
@@ -108,18 +123,10 @@ const handleChange = (e: Event) => {
           class="hs-select w-full"
           :value="modelValue ?? ''"
           :disabled="disabled"
+          :data-hs-select="hsConfig"
           @change="handleChange"
-          data-hs-select='{
-            "placeholder": "Seleccionar...",
-            "dropdownScope": "window",
-            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
-            "toggleClasses": "innertia-field hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative pe-9 flex gap-x-2 items-center text-nowrap cursor-pointer text-start",
-            "dropdownClasses": "z-[10000] w-full max-h-72 py-1 bg-[color:var(--field-dropdown-bg)] border border-[color:var(--field-border)] rounded-control overflow-hidden overflow-y-auto shadow-lg",
-            "optionClasses": "py-2 px-3 w-full text-sm text-foreground cursor-pointer bg-transparent hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover",
-            "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-blue-600 dark:text-blue-500\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>"
-          }'
         >
-          <option value="">{{ placeholder ?? 'Seleccionar...' }}</option>
+          <option value="">{{ emptyLabel }}</option>
           <option
             v-for="option in options"
             :key="option.value"
@@ -145,7 +152,5 @@ const handleChange = (e: Event) => {
  * Con `dropdownScope:'window'` Preline teletransporta el panel del dropdown al
  * <body> y lo posiciona con floating-ui (fixed + offset). Así escapa el overflow
  * de cualquier contenedor con scroll (modales, paneles, etc.) y flota por encima.
- * El trigger conserva sus bordes/esquinas completos porque el panel ya no se
- * "fusiona" con él — flota separado.
  */
 </style>

package/components/Table/MasterDetail.vue

@@ -0,0 +1,184 @@
+<script setup>
+import { IconSearch, IconLoader2 } from '@tabler/icons-vue'
+import { useInfiniteQuery } from '@tanstack/vue-query'
+
+/*
+ * Table.MasterDetail — lista buscable con scroll infinito (izquierda) + panel de
+ * detalle/preview (derecha) con header, acciones, skeleton y contenido. Calca el
+ * layout CRM del design system.
+ *
+ * La lista consume el MISMO endpoint DataTable del recurso (GET con {search,page,perPage,
+ * ...params}) → {data, meta{current_page,last_page}}. Sin endpoints /list dedicados: el
+ * DataTable::render del backend ya pagina/filtra/exporta.
+ * Slots: #action (header lista), #item="{row,active}", #header="{row}", default (detalle), #empty.
+ * `loading` (prop) muestra el skeleton del panel de detalle mientras el consumer carga.
+ * `selectedId` controla la selección desde fuera (deep-link por URL); si no se pasa,
+ * el componente mantiene su propia selección interna (modo no-controlado).
+ */
+const props = defineProps({
+  endpoint: { type: String, required: true },
+  name: { type: String, required: true },
+  params: { type: Object, default: () => ({}) },
+  title: { type: String, default: '' },
+  searchPlaceholder: { type: String, default: 'Buscar…' },
+  perPage: { type: Number, default: 20 },
+  itemTitle: { type: String, default: 'name' },
+  itemSubtitle: { type: String, default: 'email' },
+  loading: { type: Boolean, default: false },
+  emptyText: { type: String, default: 'Selecciona un elemento para ver su detalle.' },
+  selectedId: { type: [String, Number], default: null },
+  /** Alto del contenedor (CSS). Ajústalo para que la página quepa sin scroll. */
+  height: { type: String, default: 'calc(100dvh - 13rem)' },
+  /** Auto-refresco por realtime (se suscribe a los meta.channels del backend). */
+  realtime: { type: Boolean, default: true },
+})
+
+const emit = defineEmits(['select'])
+
+const api = useApi()
+const search = ref('')
+const sentinel = ref(null)
+const innerSelected = ref(null)
+
+// Modo controlado (selectedId) o no-controlado (click interno). Comparamos como
+// string para tolerar ids uuid vs numéricos.
+const activeId = computed(() => props.selectedId ?? innerSelected.value?.id ?? null)
+const isActive = (row) => activeId.value != null && String(row?.id) === String(activeId.value)
+const hasSelection = computed(() => activeId.value != null)
+
+let searchTimeout = null
+const debouncedSearch = ref('')
+watch(search, (v) => {
+  if (searchTimeout) clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => { debouncedSearch.value = v }, 400)
+})
+
+const queryKey = computed(() => [props.name, 'md', debouncedSearch.value, props.params])
+const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, refetch } = useInfiniteQuery({
+  queryKey,
+  queryFn: ({ pageParam = 1 }) => api.get(props.endpoint, {
+    params: { search: debouncedSearch.value, page: pageParam, perPage: props.perPage, ...props.params },
+  }),
+  getNextPageParam: (last) => {
+    const meta = last?.meta ?? last
+    if (!meta?.current_page || !meta?.last_page) return undefined
+    return meta.current_page < meta.last_page ? meta.current_page + 1 : undefined
+  },
+  initialPageParam: 1,
+})
+const rows = computed(() => data.value?.pages.flatMap(p => p?.data ?? (Array.isArray(p) ? p : [])) ?? [])
+
+// Realtime: se suscribe a los canales que anuncia el backend en meta.channels
+// (entity.{tabla}[.{tenant}]) y refetchea la lista al recibir {canal}.changed.
+const rt = props.realtime ? useTableRealtime(() => refetch()) : null
+watch(data, () => {
+  if (!rt) return
+  const pages = data.value?.pages ?? []
+  const meta = pages[pages.length - 1]?.meta ?? pages[0]?.meta
+  rt.sync(meta?.channels ?? [])
+}, { immediate: true })
+onBeforeUnmount(() => rt?.teardown())
+
+let observer = null
+onMounted(() => {
+  observer = new IntersectionObserver((entries) => {
+    if (entries[0].isIntersecting && hasNextPage.value && !isFetchingNextPage.value) fetchNextPage()
+  }, { rootMargin: '200px' })
+  if (sentinel.value) observer.observe(sentinel.value)
+})
+onBeforeUnmount(() => observer?.disconnect())
+watch(sentinel, (el) => { if (el && observer) observer.observe(el) })
+
+const initial = (row) => String(row?.[props.itemTitle] ?? '?').trim().charAt(0).toUpperCase()
+
+function pick(row) {
+  innerSelected.value = row
+  emit('select', row)
+}
+</script>
+
+<template>
+  <div class="flex rounded-card border border-card-line overflow-hidden bg-card min-h-[360px]" :style="{ height }">
+    <!-- ── Lista ── -->
+    <aside class="w-80 shrink-0 border-e border-card-line flex flex-col">
+      <div v-if="title || $slots.action" class="p-3 flex items-center justify-between gap-2 border-b border-card-line">
+        <h2 class="text-sm font-semibold text-foreground">{{ title }}</h2>
+        <slot name="action" />
+      </div>
+
+      <div class="px-3 pt-3 pb-2">
+        <div class="relative">
+          <div class="absolute inset-y-0 start-0 flex items-center ps-2.5 pointer-events-none">
+            <IconSearch class="size-4 text-muted-foreground" :stroke-width="1.5" />
+          </div>
+          <input v-model="search" type="text" :placeholder="searchPlaceholder"
+            class="py-2 px-8 block w-full bg-surface border-transparent text-foreground placeholder:text-muted-foreground rounded-lg text-sm focus:bg-card focus:border-primary focus:ring-primary/30" />
+        </div>
+      </div>
+
+      <div class="flex-1 overflow-y-auto [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-card-line">
+        <!-- Skeleton lista -->
+        <div v-if="isLoading" class="p-3 space-y-3">
+          <div v-for="i in 8" :key="i" class="flex items-center gap-3 animate-pulse">
+            <span class="size-8 rounded-full bg-surface-1 shrink-0" />
+            <div class="flex-1 space-y-2"><span class="block h-3 w-2/3 bg-surface-1 rounded" /><span class="block h-2.5 w-1/2 bg-surface-1 rounded" /></div>
+          </div>
+        </div>
+
+        <template v-else>
+          <div v-for="row in rows" :key="row.id ?? JSON.stringify(row)"
+            class="relative cursor-pointer before:absolute before:inset-y-0 before:inset-s-0 before:w-[3px] before:rounded-full before:transition-colors"
+            :class="isActive(row) ? 'before:bg-primary bg-surface' : 'before:bg-transparent hover:before:bg-card-line'"
+            @click="pick(row)">
+            <slot name="item" :row="row" :active="isActive(row)">
+              <div class="p-3 flex items-center gap-x-3 border-b border-card-line">
+                <span class="shrink-0 size-8 flex items-center justify-center rounded-full bg-primary/10 text-primary text-xs font-semibold uppercase">{{ initial(row) }}</span>
+                <div class="grow min-w-0">
+                  <p class="truncate font-medium text-[13px] text-foreground">{{ row[itemTitle] }}</p>
+                  <p class="truncate text-xs text-muted-foreground">{{ row[itemSubtitle] }}</p>
+                </div>
+              </div>
+            </slot>
+          </div>
+
+          <div v-if="!rows.length" class="text-center py-12 text-muted-foreground text-sm">Sin resultados</div>
+          <div ref="sentinel" class="flex justify-center py-4">
+            <IconLoader2 v-if="isFetchingNextPage" class="size-4 animate-spin text-muted-foreground" />
+          </div>
+        </template>
+      </div>
+    </aside>
+
+    <!-- ── Detalle ── -->
+    <section class="grow overflow-y-auto">
+      <!-- Vacío -->
+      <div v-if="!hasSelection" class="h-full flex flex-col items-center justify-center text-center text-muted-foreground px-6">
+        <slot name="empty">
+          <IconSearch class="size-10 mb-3 opacity-30" :stroke-width="1.5" />
+          <p class="text-sm">{{ emptyText }}</p>
+        </slot>
+      </div>
+
+      <!-- Skeleton detalle -->
+      <div v-else-if="loading" class="p-6 animate-pulse">
+        <div class="flex items-center gap-4">
+          <span class="size-16 rounded-full bg-surface-1 shrink-0" />
+          <div class="flex-1 space-y-2"><span class="block h-5 w-1/3 bg-surface-1 rounded" /><span class="block h-3 w-1/4 bg-surface-1 rounded" /></div>
+        </div>
+        <div class="mt-8 space-y-3">
+          <span v-for="i in 4" :key="i" class="block h-4 bg-surface-1 rounded" :style="{ width: (90 - i * 12) + '%' }" />
+        </div>
+      </div>
+
+      <!-- Contenido -->
+      <div v-else>
+        <div v-if="$slots.header" class="p-6 border-b border-card-line">
+          <slot name="header" :id="activeId" />
+        </div>
+        <div class="p-6">
+          <slot :id="activeId" />
+        </div>
+      </div>
+    </section>
+  </div>
+</template>

package/package.json

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