@edc-motor/ui 0.4.4 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "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,16 @@ 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;
+}

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,7 @@
 @use "icon-button";
 @use "motor-badge";
 @use "form-field";
+@use "base-select";
 @use "search-select";
 @use "blocks";
 @use "block-related";

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>