@innertia-solutions/innertia-nuxt 0.1.37 → 0.1.39

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to `@innertia-solutions/innertia-nuxt` are documented here.
 
 ## [Unreleased]
 
+### 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.
+
+### 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/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

@@ -695,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/innertia-nuxt",
-  "version": "0.1.37",
+  "version": "0.1.39",
   "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 = () => {