@edc-motor/ui 0.4.28 → 0.4.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.28",
+  "version": "0.4.29",
   "description": "EdC Motor — componentes públicos Vue 3 + tokens SCSS para webs de juegos de mesa (paquete fuente: lo compila el consumidor con Vite)",
   "license": "GPL-3.0-only",
   "type": "module",

package/src/components/RichTextInput.vue

@@ -3,6 +3,7 @@ import { computed, ref, watch, onBeforeUnmount, onMounted, nextTick } from 'vue'
 import { useEditor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Image from '@tiptap/extension-image'
+import { useDropdownPanel } from '../composables/useDropdownPanel'
 import UnderlineExtension from '@tiptap/extension-underline'
 import LinkExtension from '@tiptap/extension-link'
 import TableExtension from '@tiptap/extension-table'
@@ -331,7 +332,12 @@ function insertTable() {
 
 // --- Selector de iconos ---
 const pickerOpen = ref(false)
-const pickerRef = ref<HTMLElement>()
+const pickerRef = ref<HTMLElement | null>(null)
+const iconsPanelRef = ref<HTMLElement | null>(null)
+// Top layer (popover): dentro de un modal, el overflow del cuerpo recortaba
+// el panel y no se podían elegir todos los iconos. Ancho propio, sin igualar
+// al trigger.
+useDropdownPanel(pickerRef, iconsPanelRef, pickerOpen, { matchWidth: false })
 
 function insertIcon(icon: RichIcon) {
   editor.value?.chain().focus().setImage({ src: icon.url, alt: icon.name, title: icon.name }).run()
@@ -341,7 +347,9 @@ function insertIcon(icon: RichIcon) {
 // --- Enlaces: mini-popover con la URL (mismo patrón que el selector de
 // iconos: botón + panel flotante, cierra con Escape o click fuera) ---
 const linkPopoverOpen = ref(false)
-const linkPickerRef = ref<HTMLElement>()
+const linkPickerRef = ref<HTMLElement | null>(null)
+const linkPanelRef = ref<HTMLElement | null>(null)
+useDropdownPanel(linkPickerRef, linkPanelRef, linkPopoverOpen, { matchWidth: false })
 const linkInputRef = ref<HTMLInputElement>()
 const linkUrlInput = ref('')
 
@@ -451,7 +459,12 @@ function onSourceInput(value: string) {
           >
             <LinkIcon :size="16" />
           </button>
-          <div v-if="linkPopoverOpen" class="rich-text__link-popover">
+          <div
+            v-if="linkPopoverOpen"
+            ref="linkPanelRef"
+            class="rich-text__link-popover"
+            popover="manual"
+          >
             <input
               ref="linkInputRef"
               v-model="linkUrlInput"
@@ -538,7 +551,7 @@ function onSourceInput(value: string) {
             >
               <Smile :size="16" />
             </button>
-            <div v-if="pickerOpen" class="rich-text__icons">
+            <div v-if="pickerOpen" ref="iconsPanelRef" class="rich-text__icons" popover="manual">
               <button
                 v-for="icon in icons"
                 :key="icon.url"

package/src/composables/useDropdownPanel.ts

@@ -20,7 +20,14 @@ export function useDropdownPanel(
   anchor: Ref<HTMLElement | null>,
   panel: Ref<HTMLElement | null>,
   open: Ref<boolean>,
+  options: {
+    /** Igualar el ancho del panel al del trigger (los select). Los popovers
+     *  con ancho propio (selector de iconos, popover del enlace) lo apagan:
+     *  conservan su ancho y solo se CLAMPEA su left para no salirse. */
+    matchWidth?: boolean
+  } = {},
 ) {
+  const { matchWidth = true } = options
   const GAP = 4 // $space-1: aire entre trigger y panel, como el CSS absolute
 
   /** Ancla el panel bajo el trigger (o encima, si abajo no cabe y arriba sí). */
@@ -29,8 +36,11 @@ export function useDropdownPanel(
     const p = panel.value
     if (!a || !p) return
     const r = a.getBoundingClientRect()
-    p.style.width = `${r.width}px`
-    p.style.left = `${r.left}px`
+    if (matchWidth) p.style.width = `${r.width}px`
+    const left = matchWidth
+      ? r.left
+      : Math.max(GAP, Math.min(r.left, window.innerWidth - p.offsetWidth - GAP))
+    p.style.left = `${left}px`
     const height = p.offsetHeight
     const below = window.innerHeight - r.bottom - GAP
     const openUp = height > below && r.top > window.innerHeight - r.bottom