@edc-motor/ui 0.4.29 → 0.4.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.29",
+  "version": "0.4.30",
   "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/scss/components/_image-upload.scss

@@ -17,7 +17,12 @@
   &__zone {
     position: relative;
     display: flex;
-    align-self: flex-start;
+    // Centrado EN EL CAMPO: horizontal siempre, y vertical cuando el
+    // contenedor le da alto extra (p. ej. el grupo a dos columnas del form
+    // de bloque) — los márgenes auto solo absorben espacio si lo hay.
+    align-self: center;
+    margin-block: auto;
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
     width: 160px;
@@ -81,8 +86,10 @@
   &__icon { width: 32px; height: 32px; color: $text-3; }
   &__text { font-size: $fs-12; color: $text-2; }
 
-  // Nombre del fichero (pendiente o guardado) bajo la miniatura.
+  // Nombre del fichero (pendiente o guardado) bajo la miniatura, centrado
+  // con ella.
   &__name {
+    align-self: center;
     max-width: 160px;
     overflow: hidden;
     font-size: $fs-12;

package/scss/components/_rich-text.scss

@@ -69,34 +69,21 @@
     outline: none;
   }
 
-  // Selector de iconos del juego (y el mismo contenedor sirve de anclaje
-  // para el mini-popover del enlace).
-  &__picker { position: relative; display: inline-flex; }
-
-  // Mini-popover del enlace: input de URL + botón de aplicar, misma
-  // posición/estética que el panel de iconos.
-  &__link-popover {
-    position: absolute;
-    top: calc(100% + 4px);
-    left: 0;
-    z-index: 100;
+  // Franjas del editor (URL del enlace, iconos): EN FLUJO entre la toolbar y
+  // el contenido — nada flota, así que dentro de un modal quedan siempre a la
+  // vista enteras. Mismo fondo que la toolbar, de la que son una extensión.
+  &__link-bar {
     display: flex;
     align-items: center;
     gap: 2px;
-    // `width: max-content` (no simplemente `auto`): dentro de un ancla tan
-    // angosta como el propio botón (`.rich-text__picker`), el algoritmo de
-    // shrink-to-fit de un absoluto con solo `left` fijado lo recorta al
-    // ancho del ancla — el input de 220px quedaba aplastado a ~35px.
-    width: max-content;
     padding: $space-1;
-    background: $surface;
-    border: 1px solid $border;
-    border-radius: $radius-md;
-    box-shadow: $shadow-md;
+    border-bottom: 1px solid $border;
+    background: $surface-2;
   }
 
   &__link-input {
-    width: 220px;
+    flex: 1;
+    min-width: 0;
     height: 30px;
     padding: 0 $space-2;
     border: 1px solid $input-border;
@@ -113,21 +100,16 @@
   }
 
   &__icons {
-    position: absolute;
-    top: calc(100% + 4px);
-    left: 0;
-    z-index: 100;
     display: grid;
-    grid-template-columns: repeat(5, 1fr);
+    // A todo el ancho del editor: caben muchos más iconos por fila que en el
+    // popover de 5 columnas de antes; si aun así no entran, scroll propio.
+    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
     gap: 2px;
-    max-width: 220px;
     max-height: 200px;
     overflow-y: auto;
     padding: $space-1;
-    background: $surface;
-    border: 1px solid $border;
-    border-radius: $radius-md;
-    box-shadow: $shadow-md;
+    border-bottom: 1px solid $border;
+    background: $surface-2;
   }
 
   &__icon {

package/src/components/RichTextInput.vue

@@ -3,7 +3,6 @@ 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,25 +330,23 @@ function insertTable() {
 }
 
 // --- Selector de iconos ---
+// Los paneles del editor (iconos y enlace) NO flotan: son franjas EN FLUJO
+// entre la toolbar y el contenido — dentro de un modal quedan siempre a la
+// vista (nada que recortar ni que anclar por coordenadas).
 const pickerOpen = ref(false)
 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()
   pickerOpen.value = false
 }
 
-// --- Enlaces: mini-popover con la URL (mismo patrón que el selector de
-// iconos: botón + panel flotante, cierra con Escape o click fuera) ---
+// --- Enlaces: franja con la URL (mismo patrón que el selector de iconos:
+// botón + franja bajo la toolbar, cierra con Escape o click fuera) ---
 const linkPopoverOpen = ref(false)
 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('')
 
@@ -377,8 +374,12 @@ function removeLink() {
 
 function onClickOutside(e: MouseEvent) {
   const target = e.target as Node
-  if (pickerRef.value && !pickerRef.value.contains(target)) pickerOpen.value = false
-  if (linkPickerRef.value && !linkPickerRef.value.contains(target)) linkPopoverOpen.value = false
+  // Botón y franja son elementos hermanos: un click en cualquiera de los dos
+  // mantiene el panel abierto (insertar icono / escribir la URL).
+  if (!pickerRef.value?.contains(target) && !iconsPanelRef.value?.contains(target))
+    pickerOpen.value = false
+  if (!linkPickerRef.value?.contains(target) && !linkPanelRef.value?.contains(target))
+    linkPopoverOpen.value = false
 }
 onMounted(() => document.addEventListener('click', onClickOutside))
 onBeforeUnmount(() => {
@@ -447,38 +448,18 @@ function onSourceInput(value: string) {
 
         <span class="rich-text__sep" />
 
-        <!-- Enlace: botón + mini-popover con la URL -->
-        <div ref="linkPickerRef" class="rich-text__picker">
-          <button
-            type="button"
-            class="rich-text__tool"
-            :class="{ 'rich-text__tool--active': editor?.isActive('link') || linkPopoverOpen }"
-            :title="t.link"
-            :disabled="disabled"
-            @click="toggleLinkPopover"
-          >
-            <LinkIcon :size="16" />
-          </button>
-          <div
-            v-if="linkPopoverOpen"
-            ref="linkPanelRef"
-            class="rich-text__link-popover"
-            popover="manual"
-          >
-            <input
-              ref="linkInputRef"
-              v-model="linkUrlInput"
-              type="text"
-              class="rich-text__link-input"
-              :placeholder="t.linkUrl"
-              @keydown.enter.prevent="applyLink"
-              @keydown.escape.prevent="linkPopoverOpen = false"
-            />
-            <button type="button" class="rich-text__tool" :title="t.linkApply" @click="applyLink">
-              <LinkIcon :size="14" />
-            </button>
-          </div>
-        </div>
+        <!-- Enlace: botón que abre la franja de la URL bajo la toolbar -->
+        <button
+          ref="linkPickerRef"
+          type="button"
+          class="rich-text__tool"
+          :class="{ 'rich-text__tool--active': editor?.isActive('link') || linkPopoverOpen }"
+          :title="t.link"
+          :disabled="disabled"
+          @click="toggleLinkPopover"
+        >
+          <LinkIcon :size="16" />
+        </button>
         <button
           v-if="editor?.isActive('link')"
           type="button"
@@ -537,33 +518,20 @@ function onSourceInput(value: string) {
           <Redo2 :size="16" />
         </button>
 
-        <!-- Selector de iconos del juego -->
+        <!-- Selector de iconos del juego: abre la franja bajo la toolbar -->
         <template v-if="icons.length">
           <span class="rich-text__sep" />
-          <div ref="pickerRef" class="rich-text__picker">
-            <button
-              type="button"
-              class="rich-text__tool"
-              :class="{ 'rich-text__tool--active': pickerOpen }"
-              :title="t.insertIcon"
-              :disabled="disabled"
-              @click="pickerOpen = !pickerOpen"
-            >
-              <Smile :size="16" />
-            </button>
-            <div v-if="pickerOpen" ref="iconsPanelRef" class="rich-text__icons" popover="manual">
-              <button
-                v-for="icon in icons"
-                :key="icon.url"
-                type="button"
-                class="rich-text__icon"
-                :title="icon.name"
-                @click="insertIcon(icon)"
-              >
-                <img :src="icon.url" :alt="icon.name" />
-              </button>
-            </div>
-          </div>
+          <button
+            ref="pickerRef"
+            type="button"
+            class="rich-text__tool"
+            :class="{ 'rich-text__tool--active': pickerOpen }"
+            :title="t.insertIcon"
+            :disabled="disabled"
+            @click="pickerOpen = !pickerOpen"
+          >
+            <Smile :size="16" />
+          </button>
         </template>
       </template>
 
@@ -580,6 +548,38 @@ function onSourceInput(value: string) {
       </button>
     </div>
 
+    <!-- Franja del enlace: EN FLUJO bajo la toolbar (dentro de un modal queda
+         siempre a la vista; los popovers flotantes se recortaban o quedaban
+         descolgados del editor) -->
+    <div v-if="linkPopoverOpen && !source" ref="linkPanelRef" class="rich-text__link-bar">
+      <input
+        ref="linkInputRef"
+        v-model="linkUrlInput"
+        type="text"
+        class="rich-text__link-input"
+        :placeholder="t.linkUrl"
+        @keydown.enter.prevent="applyLink"
+        @keydown.escape.prevent="linkPopoverOpen = false"
+      />
+      <button type="button" class="rich-text__tool" :title="t.linkApply" @click="applyLink">
+        <LinkIcon :size="14" />
+      </button>
+    </div>
+
+    <!-- Franja de iconos: misma idea, a todo el ancho del editor -->
+    <div v-if="pickerOpen && !source" ref="iconsPanelRef" class="rich-text__icons">
+      <button
+        v-for="icon in icons"
+        :key="icon.url"
+        type="button"
+        class="rich-text__icon"
+        :title="icon.name"
+        @click="insertIcon(icon)"
+      >
+        <img :src="icon.url" :alt="icon.name" />
+      </button>
+    </div>
+
     <textarea
       v-if="source"
       class="rich-text__source"

package/src/composables/useDropdownPanel.ts

@@ -20,14 +20,7 @@ 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í). */
@@ -36,11 +29,8 @@ export function useDropdownPanel(
     const p = panel.value
     if (!a || !p) return
     const r = a.getBoundingClientRect()
-    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`
+    p.style.width = `${r.width}px`
+    p.style.left = `${r.left}px`
     const height = p.offsetHeight
     const below = window.innerHeight - r.bottom - GAP
     const openUp = height > below && r.top > window.innerHeight - r.bottom