@innertia-solutions/innertia-nuxt 0.1.38 → 0.1.40

package/CHANGELOG.md

@@ -4,8 +4,13 @@ All notable changes to `@innertia-solutions/innertia-nuxt` are documented here.
 
 ## [Unreleased]
 
+### Added
+
+- `Kanban.Standard`: reordenamiento intra-columna con drag&drop (prop `reorderEndpoint`); orden por `position`, placeholder de inserción, y persistencia vía POST. Retrocompatible: sin la prop se comporta igual que antes (solo cross-column).
+
 ### Fixed
 
+- `Forms.Select`: el dropdown ahora usa `dropdownScope:'window'` (Preline lo teletransporta al `<body>` y lo posiciona con floating-ui). Deja de recortarse dentro de contenedores con scroll —modales, paneles— y flota por encima (`z-[10000]`). Se expone `window.FloatingUIDOM` en el plugin de Preline y se agrega `@floating-ui/dom` como dependencia.
 - `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

package/components/Forms/Select.vue

@@ -111,9 +111,10 @@ const handleChange = (e: Event) => {
           @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 aria-expanded:!rounded-b-none aria-expanded:!border-b-transparent relative pe-9 flex gap-x-2 items-center text-nowrap cursor-pointer text-start",
-            "dropdownClasses": "-mt-px z-50 w-full max-h-72 py-1 bg-[color:var(--field-dropdown-bg)] border border-[color:var(--field-border)] rounded-b-control overflow-hidden overflow-y-auto shadow-lg",
+            "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>"
           }'
@@ -141,24 +142,10 @@ const handleChange = (e: Event) => {
 
 <style>
 /*
- * Preline HSSelect: cuando el dropdown está abierto, el trigger pierde
- * sus esquinas inferiores y el borde inferior se vuelve invisible para
- * fusionarse visualmente con el dropdown panel.
- *
- * Estilos globales (sin scoped) porque el HSSelect inyecta DOM fuera
- * del componente Vue (button generado, no del template).
+ * 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.
  */
-.hs-select [aria-expanded="true"].innertia-field {
-  border-bottom-left-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-  border-bottom-color: transparent !important;
-}
-
-/* Pegar el dropdown al trigger eliminando cualquier offset/margen que
- * Preline pueda inyectar. Target amplio: cualquier div con la clase
- * `rounded-b-control` dentro del wrapper `.hs-select`. */
-.hs-select div[class*="rounded-b-control"] {
-  top: 100% !important;
-  margin-top: -1px !important;
-}
 </style>

package/components/Kanban/Standard.vue

@@ -56,6 +56,9 @@ const props = defineProps({
   states:    { type: Array,  required: true },
   moveMutation: { type: Function, default: null },
 
+  // Endpoint para persistir reorden (POST). Si null → solo cross-column, sin placeholder.
+  reorderEndpoint: { type: String, default: null },
+
   // Toolbar visibility
   showSearch:       { type: Boolean, default: true },
   searchPlaceholder:{ type: String,  default: 'Buscar...' },
@@ -355,6 +358,7 @@ const buildBody = () => ({
   per_page: props.perPage,
   search:   search.value.trim(),
   ...(enrichedFilters.value.length ? { filters: enrichedFilters.value } : {}),
+  ...(props.reorderEndpoint ? { board: true } : {}),
 })
 
 const fetchAll = async () => {
@@ -433,6 +437,11 @@ const columnRows = computed(() => {
     const state = row[props.stateKey]
     if (map[state]) map[state].push(row)
   }
+  if (props.reorderEndpoint) {
+    for (const k of Object.keys(map)) {
+      map[k].sort((a, b) => (a.position ?? 0) - (b.position ?? 0))
+    }
+  }
   return map
 })
 
@@ -442,21 +451,73 @@ const totalRendered = computed(() => rows.value.length)
 const draggedId      = ref(null)
 const draggedFrom    = ref(null)
 const dragOverState  = ref(null)
+const dragOverIndex  = ref(null) // índice de inserción (placeholder) en la columna dragOverState
 
 const onDragStart = (row, state) => {
   draggedId.value = row.id
   draggedFrom.value = state
 }
-const onDragOver  = (e, state) => { e.preventDefault(); dragOverState.value = state }
-const onDragLeave = () => { dragOverState.value = null }
+const onDragOver = (e, state) => {
+  e.preventDefault()
+  dragOverState.value = state
+  if (!props.reorderEndpoint) return
+  if (dragOverIndex.value === null) dragOverIndex.value = columnRows.value[state]?.length ?? 0
+}
+const onDragLeave = () => { dragOverState.value = null; dragOverIndex.value = null }
+
+// Llamado desde cada tarjeta: calcula si el cursor está en la mitad superior o inferior.
+const onCardDragOver = (e, state, index) => {
+  if (!props.reorderEndpoint) return
+  e.preventDefault()
+  e.stopPropagation()
+  dragOverState.value = state
+  const rect = e.currentTarget.getBoundingClientRect()
+  const after = (e.clientY - rect.top) > rect.height / 2
+  dragOverIndex.value = after ? index + 1 : index
+}
 
 const onDrop = async (targetState) => {
-  dragOverState.value = null
   const id        = draggedId.value
   const fromState = draggedFrom.value
-  draggedId.value   = null
+  const dropIndex = dragOverIndex.value
+  dragOverState.value = null
+  dragOverIndex.value = null
+  draggedId.value = null
   draggedFrom.value = null
-  if (!id || fromState === targetState) return
+  if (!id) return
+
+  // Modo reorden (prop seteada): calcula vecinos y persiste posición.
+  if (props.reorderEndpoint) {
+    const colList = (columnRows.value[targetState] ?? []).filter(r => r.id !== id)
+    const idx = dropIndex == null ? colList.length : Math.min(dropIndex, colList.length)
+    const beforeId = idx > 0 ? colList[idx - 1].id : null            // tarjeta arriba
+    const afterId  = idx < colList.length ? colList[idx].id : null   // tarjeta abajo
+
+    if (fromState === targetState && beforeId == null && afterId == null) return
+
+    const snapshot = rows.value.map(r => ({ ...r }))
+    const ridx = rows.value.findIndex(r => r.id === id)
+    if (ridx >= 0) {
+      const before = beforeId ? rows.value.find(r => r.id === beforeId) : null
+      const after  = afterId  ? rows.value.find(r => r.id === afterId)  : null
+      const newPos = before && after ? (before.position + after.position) / 2
+        : before ? before.position + 1
+        : after ? after.position - 1
+        : 1
+      rows.value[ridx] = { ...rows.value[ridx], [props.stateKey]: targetState, position: newPos }
+    }
+    emit('move', { id, from: fromState, to: targetState })
+
+    try {
+      await api.post(props.reorderEndpoint, { id, column: targetState, before_id: beforeId, after_id: afterId })
+    } catch (e) {
+      rows.value = snapshot
+    }
+    return
+  }
+
+  // Modo legacy (sin reorderEndpoint): solo cross-column, comportamiento actual.
+  if (fromState === targetState) return
 
   // Optimistic update local (solo en endpoint mode).
   // En items mode el optimistic lo gestiona el moveMutation externo
@@ -747,25 +808,34 @@ defineExpose({ reload: fetchAll, rows })
                 bordered ? 'bg-muted/40' : '',
               ]"
             >
+              <template v-for="(row, ci) in columnRows[state.key]" :key="row.id">
+                <div
+                  v-if="reorderEndpoint && dragOverState === state.key && dragOverIndex === ci"
+                  class="rounded-card border-2 border-dashed border-primary/50 bg-primary/5 h-10"
+                />
+                <div
+                  draggable="true"
+                  @dragstart="onDragStart(row, state.key)"
+                  @dragover="onCardDragOver($event, state.key, ci)"
+                  @click="handleCardClick(row)"
+                  class="bg-card border border-card-line rounded-card p-3 cursor-grab active:cursor-grabbing hover:border-primary/40 hover:shadow-sm transition-all select-none"
+                  :class="[
+                    draggedId === row.id ? 'opacity-40' : '',
+                    previewRow?.id === row.id ? 'ring-2 ring-primary/30' : '',
+                  ]"
+                >
+                  <slot name="card" :row="row" :state="state">
+                    <div class="space-y-1">
+                      <p class="text-sm font-medium text-foreground truncate">{{ row.name ?? row.title ?? row.id }}</p>
+                      <p v-if="row.description" class="text-xs text-muted-foreground line-clamp-2">{{ row.description }}</p>
+                    </div>
+                  </slot>
+                </div>
+              </template>
               <div
-                v-for="row in columnRows[state.key]"
-                :key="row.id"
-                draggable="true"
-                @dragstart="onDragStart(row, state.key)"
-                @click="handleCardClick(row)"
-                class="bg-card border border-card-line rounded-card p-3 cursor-grab active:cursor-grabbing hover:border-primary/40 hover:shadow-sm transition-all select-none"
-                :class="[
-                  draggedId === row.id ? 'opacity-40' : '',
-                  previewRow?.id === row.id ? 'ring-2 ring-primary/30' : '',
-                ]"
-              >
-                <slot name="card" :row="row" :state="state">
-                  <div class="space-y-1">
-                    <p class="text-sm font-medium text-foreground truncate">{{ row.name ?? row.title ?? row.id }}</p>
-                    <p v-if="row.description" class="text-xs text-muted-foreground line-clamp-2">{{ row.description }}</p>
-                  </div>
-                </slot>
-              </div>
+                v-if="reorderEndpoint && dragOverState === state.key && dragOverIndex === (columnRows[state.key]?.length ?? 0) && columnRows[state.key]?.length"
+                class="rounded-card border-2 border-dashed border-primary/50 bg-primary/5 h-10"
+              />
 
               <div
                 v-if="!columnRows[state.key]?.length"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/innertia-nuxt",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "description": "Innertia Solutions — Nuxt layer unificada: core, auth, multitenancy, theme y app contexts",
   "keywords": [
     "nuxt",
@@ -31,6 +31,7 @@
     "vue": ">=3.5.0"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.7.6",
     "@nuxtjs/seo": "^3.4.0",
     "@pinia/nuxt": "^0.11.3",
     "@tabler/icons-vue": "^3.44.0",

package/plugins/preline.client.ts

@@ -3,6 +3,7 @@ declare global {
     HSStaticMethods?: { autoInit?: () => void }
     HSSelect?: new (el: HTMLElement) => { destroy?: () => void }
     HSThemeAppearance?: { init?: () => void }
+    FloatingUIDOM?: unknown
   }
 }
 
@@ -10,6 +11,13 @@ export default defineNuxtPlugin(async () => {
   if (!process.client) return
 
   try {
+    // Preline 3 lee `window.FloatingUIDOM` (global, no import) para posicionar
+    // dropdowns con `dropdownScope:'window'` (los teletransporta al body y flota
+    // con floating-ui, escapando cualquier overflow — ej. selects dentro de modales).
+    if (!window.FloatingUIDOM) {
+      window.FloatingUIDOM = await import('@floating-ui/dom')
+    }
+
     await import('preline')
 
     const initPreline = () => {