@edc-motor/ui 0.4.5 → 0.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "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/_base.scss

@@ -31,3 +31,27 @@ h2 { font-size: $fs-24; }
 h3 { font-size: $fs-20; }
 
 a { color: $accent-500; text-decoration: none; &:hover { color: $accent-600; } }
+
+// Todo lo clickable señala que lo es; los estados deshabilitados lo revierten
+// (cada componente pone su not-allowed si toca).
+button:not(:disabled),
+[role='button']:not([aria-disabled='true']),
+select:not(:disabled),
+summary,
+input[type='checkbox']:not(:disabled),
+input[type='radio']:not(:disabled),
+input[type='submit']:not(:disabled),
+input[type='file']:not(:disabled) {
+  cursor: pointer;
+}
+
+// Iconos del juego insertados por el wysiwyg (img.rt-icon): SIEMPRE al
+// tamaño del texto que los rodea (1.2x), se rendericen donde se rendericen
+// (con o sin .rich-content alrededor).
+img.rt-icon {
+  display: inline-block;
+  width: 1.2em;
+  height: 1.2em;
+  vertical-align: -0.24em;
+  margin: 0 1px;
+}

package/scss/components/_base-pagination.scss

@@ -0,0 +1,39 @@
+@use "../tokens" as *;
+
+// Paginación compacta de listados (BasePagination.vue).
+.base-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $space-2;
+
+  &__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    background: none;
+    border: 1px solid $border;
+    border-radius: $radius-sm;
+    color: $text-2;
+    transition: color 0.15s ease, border-color 0.15s ease;
+
+    &:not(:disabled):hover {
+      color: $accent-500;
+      border-color: $accent-500;
+    }
+
+    &:disabled {
+      opacity: $disabled-opacity;
+      cursor: not-allowed;
+    }
+  }
+
+  &__status {
+    font-size: $fs-13;
+    color: $text-2;
+    min-width: 56px;
+    text-align: center;
+  }
+}

package/scss/components/_base-select.scss

@@ -0,0 +1,65 @@
+@use "tokens" as *;
+
+// Dropdown personalizado del BaseSelect: el trigger hereda altura/borde de
+// .form-field__select (comparte clase) y el wrapper aporta la flecha ::after;
+// aquí solo el estado abierto y el panel flotante (estética del search-select).
+.base-select {
+  &.is-open::after {
+    transform: translateY(-50%) rotate(180deg);
+  }
+
+  &.is-open > &__trigger {
+    border-color: $input-border-focus;
+  }
+
+  &__trigger {
+    text-align: left;
+  }
+
+  &__value {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &.is-placeholder { color: $input-placeholder; }
+  }
+
+  &__panel {
+    position: absolute;
+    top: calc(100% + #{$space-1});
+    left: 0;
+    right: 0;
+    z-index: 50;
+    background: $surface;
+    border: 1px solid $border-strong;
+    border-radius: $radius-md;
+    box-shadow: $shadow-md;
+    list-style: none;
+    margin: 0;
+    padding: $space-1;
+    display: grid;
+    gap: 1px;
+    max-height: 240px;
+    overflow-y: auto;
+  }
+
+  &__option {
+    border-radius: $radius-sm;
+    color: $text-1;
+    cursor: pointer;
+    font-size: $fs-13;
+    overflow: hidden;
+    padding: $space-2 $space-2;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &.is-highlighted { background: $surface-2; }
+
+    &.is-active {
+      background: color-mix(in srgb, $accent-500 14%, transparent);
+      color: $accent-500;
+      font-weight: $k-fw-semibold;
+    }
+  }
+}

package/scss/components/_index.scss

@@ -3,6 +3,8 @@
 @use "icon-button";
 @use "motor-badge";
 @use "form-field";
+@use "base-select";
+@use "base-pagination";
 @use "search-select";
 @use "blocks";
 @use "block-related";

package/scss/components/_rich-content.scss

@@ -45,9 +45,9 @@
   // Iconos del juego insertados en línea por el editor (<img class="rt-icon">).
   img.rt-icon {
     display: inline-block;
-    width: 1.25em;
-    height: 1.25em;
-    vertical-align: -0.25em;
+    width: 1.2em;
+    height: 1.2em;
+    vertical-align: -0.24em;
     margin: 0 1px;
   }
 }

package/scss/components/_rich-text.scss

@@ -126,9 +126,9 @@
       // Iconos insertados: en línea con el texto.
       img.rt-icon {
         display: inline-block;
-        width: 1.25em;
-        height: 1.25em;
-        vertical-align: -0.25em;
+        width: 1.2em;
+        height: 1.2em;
+        vertical-align: -0.24em;
         margin: 0 1px;
       }
 

package/src/components/BasePagination.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ChevronLeft, ChevronRight } from '@lucide/vue'
+
+// Paginación compacta para listados (admin y web): anterior / "x de y" /
+// siguiente. Con una sola página no pinta nada. Agnóstica de i18n (DC-29):
+// textos por prop, defaults en castellano.
+const props = withDefaults(
+  defineProps<{
+    page: number
+    pages: number
+    prevLabel?: string
+    nextLabel?: string
+    /** Texto accesible del estado, con {page} y {pages}. */
+    ofLabel?: string
+  }>(),
+  { prevLabel: 'Anterior', nextLabel: 'Siguiente', ofLabel: '{page} de {pages}' },
+)
+
+const emit = defineEmits<{ 'update:page': [page: number] }>()
+
+function go(page: number) {
+  if (page < 1 || page > props.pages || page === props.page) return
+  emit('update:page', page)
+}
+
+function status(): string {
+  return props.ofLabel.replace('{page}', String(props.page)).replace('{pages}', String(props.pages))
+}
+</script>
+
+<template>
+  <nav v-if="pages > 1" class="base-pagination" :aria-label="status()">
+    <button
+      type="button"
+      class="base-pagination__button"
+      :disabled="page <= 1"
+      :aria-label="prevLabel"
+      :title="prevLabel"
+      @click="go(page - 1)"
+    >
+      <ChevronLeft :size="16" />
+    </button>
+    <span class="base-pagination__status">{{ status() }}</span>
+    <button
+      type="button"
+      class="base-pagination__button"
+      :disabled="page >= pages"
+      :aria-label="nextLabel"
+      :title="nextLabel"
+      @click="go(page + 1)"
+    >
+      <ChevronRight :size="16" />
+    </button>
+  </nav>
+</template>

package/src/components/BaseSelect.vue

@@ -1,5 +1,20 @@
 <script setup lang="ts">
-// Select de formulario (portado de kontuan).
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
+
+// Select de formulario (portado de kontuan). Dropdown personalizado (botón
+// trigger + panel de opciones) con la MISMA API que el <select> nativo al que
+// sustituye: el trigger reutiliza el aspecto de .form-field__select y el
+// panel, la estética del SearchSelect. Teclado completo (flechas, Enter,
+// Escape, Home/End) y cierre por mousedown exterior.
+//
+// Compatibilidad con el nativo:
+// - El valor viaja como en el DOM: se emite String(option.value) y la opción
+//   activa se compara con String() por ambos lados (un modelValue numérico
+//   casa con su opción, como hacía el <select>).
+// - El placeholder se pinta en el trigger cuando no hay valor; la antigua
+//   <option value="" disabled> no se lista en el panel (nunca era
+//   seleccionable: solo servía de texto en reposo, y de eso ya se encarga
+//   el trigger).
 export interface SelectOption {
   value: string | number
   label: string
@@ -20,11 +35,111 @@ const props = withDefaults(
   { modelValue: '', disabled: false, required: false },
 )
 
-// El DOM siempre entrega string: no se declara `number` para no mentir al
-// consumidor (que convierta él si guarda ids numéricos).
+// Se emite siempre string, como entregaba el DOM del <select> nativo.
 const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
 
 const selectId = props.id || `select-${Math.random().toString(36).slice(2, 9)}`
+const panelId = `${selectId}-panel`
+
+const open = ref(false)
+const highlighted = ref(0)
+const root = ref<HTMLElement | null>(null)
+
+const selectedIndex = computed(() =>
+  props.options.findIndex((o) => String(o.value) === String(props.modelValue)),
+)
+const selectedLabel = computed(() => props.options[selectedIndex.value]?.label ?? '')
+
+function optionId(index: number) {
+  return `${selectId}-opt-${index}`
+}
+
+async function openPanel() {
+  if (props.disabled || open.value) return
+  open.value = true
+  // El resaltado arranca en la opción activa (o la primera).
+  highlighted.value = Math.max(selectedIndex.value, 0)
+  document.addEventListener('mousedown', onOutside)
+  await nextTick()
+  scrollToHighlighted()
+}
+
+function close() {
+  open.value = false
+  document.removeEventListener('mousedown', onOutside)
+}
+
+function toggle() {
+  if (open.value) close()
+  else void openPanel()
+}
+
+function select(option: SelectOption) {
+  emit('update:modelValue', String(option.value))
+  close()
+}
+
+function highlight(index: number) {
+  if (!props.options.length) return
+  highlighted.value = (index + props.options.length) % props.options.length
+  scrollToHighlighted()
+}
+
+function scrollToHighlighted() {
+  document.getElementById(optionId(highlighted.value))?.scrollIntoView({ block: 'nearest' })
+}
+
+// El foco vive siempre en el trigger (patrón aria-activedescendant).
+function onKeydown(e: KeyboardEvent) {
+  if (props.disabled) return
+
+  if (!open.value) {
+    if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {
+      e.preventDefault()
+      void openPanel()
+    }
+    return
+  }
+
+  switch (e.key) {
+    case 'Escape':
+      e.preventDefault()
+      close()
+      break
+    case 'ArrowDown':
+      e.preventDefault()
+      highlight(highlighted.value + 1)
+      break
+    case 'ArrowUp':
+      e.preventDefault()
+      highlight(highlighted.value - 1)
+      break
+    case 'Home':
+      e.preventDefault()
+      highlight(0)
+      break
+    case 'End':
+      e.preventDefault()
+      highlight(props.options.length - 1)
+      break
+    case 'Enter':
+    case ' ': {
+      e.preventDefault()
+      const option = props.options[highlighted.value]
+      if (option) select(option)
+      break
+    }
+    case 'Tab':
+      close()
+      break
+  }
+}
+
+function onOutside(e: MouseEvent) {
+  if (root.value && !root.value.contains(e.target as Node)) close()
+}
+
+onBeforeUnmount(() => document.removeEventListener('mousedown', onOutside))
 </script>
 
 <template>
@@ -32,20 +147,40 @@ const selectId = props.id || `select-${Math.random().toString(36).slice(2, 9)}`
     <label v-if="label" :for="selectId" class="form-field__label">
       {{ label }}<span v-if="required" class="form-field__required">*</span>
     </label>
-    <div class="form-field__select-wrapper">
-      <select
+    <div ref="root" class="form-field__select-wrapper base-select" :class="{ 'is-open': open }">
+      <button
         :id="selectId"
-        :value="modelValue"
+        type="button"
+        class="form-field__select base-select__trigger"
         :disabled="disabled"
-        :required="required"
-        class="form-field__select"
-        @change="emit('update:modelValue', ($event.target as HTMLSelectElement).value)"
+        aria-haspopup="listbox"
+        :aria-expanded="open"
+        :aria-controls="panelId"
+        :aria-required="required || undefined"
+        :aria-activedescendant="open ? optionId(highlighted) : undefined"
+        @click="toggle"
+        @keydown="onKeydown"
       >
-        <option v-if="placeholder" value="" disabled>{{ placeholder }}</option>
-        <option v-for="option in options" :key="option.value" :value="option.value">
+        <span class="base-select__value" :class="{ 'is-placeholder': !selectedLabel }">
+          {{ selectedLabel || placeholder }}
+        </span>
+      </button>
+
+      <ul v-if="open" :id="panelId" class="base-select__panel" role="listbox">
+        <li
+          v-for="(option, index) in options"
+          :id="optionId(index)"
+          :key="option.value"
+          role="option"
+          class="base-select__option"
+          :class="{ 'is-active': index === selectedIndex, 'is-highlighted': index === highlighted }"
+          :aria-selected="index === selectedIndex"
+          @mousedown.prevent="select(option)"
+          @mouseenter="highlighted = index"
+        >
           {{ option.label }}
-        </option>
-      </select>
+        </li>
+      </ul>
     </div>
     <p v-if="error" class="form-field__error">{{ error }}</p>
     <p v-else-if="hint" class="form-field__hint">{{ hint }}</p>

package/src/index.ts

@@ -7,6 +7,7 @@ export { default as IconButton } from './components/IconButton.vue'
 export { default as MotorBadge } from './components/MotorBadge.vue'
 export { default as BaseInput } from './components/BaseInput.vue'
 export { default as BaseTextarea } from './components/BaseTextarea.vue'
+export { default as BasePagination } from './components/BasePagination.vue'
 export { default as BaseSelect, type SelectOption } from './components/BaseSelect.vue'
 export { default as SearchSelect, type SearchSelectOption } from './components/SearchSelect.vue'
 export { default as BaseCheckbox } from './components/BaseCheckbox.vue'