@edc-motor/ui 0.4.30 → 0.4.32

package/package.json

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

@@ -9,11 +9,13 @@
 .field { display: flex; flex-direction: column; gap: $space-1; }
 .field__label, .field label { font-size: $fs-13; color: $text-2; }
 
+// El numérico compacto del NumberInput queda FUERA: esta regla genérica le
+// ganaba por especificidad y le imponía el 100%/36px de un campo de línea.
 input[type="text"],
 input[type="email"],
 input[type="password"],
 input[type="search"],
-input[type="number"],
+input[type="number"]:not(.number-input__field),
 select,
 textarea {
   font: inherit;

package/scss/components/_blocks.scss

@@ -39,14 +39,17 @@
   &--quote.block--w-narrow .block__inner { max-width: min(780px, 90%); }
 
   // Tipografía de bloque: texto BASE $fs-16 (el mismo cuerpo que el wysiwyg
-  // por defecto — sin override aquí), subtítulo $fs-24 (entre el título y
-  // la base), título $fs-32 (la cabecera sube a 40/28). Los títulos nunca
-  // se justifican.
+  // por defecto — sin override aquí); título y subtítulo calcan la cabecera
+  // clásica de índices y fichas de CDL: título $fs-28 compacto (line-height
+  // 1.1, el h1 de base) y subtítulo atenuado AL TAMAÑO del cuerpo — la
+  // jerarquía la da el color, no otro escalón de tamaño. Vale para TODOS
+  // los bloques (la cabecera ya no sube a 40/28). Los títulos nunca se
+  // justifican.
   // width 100%: en grids con justify-items start (el cuerpo del CTA) el
   // elemento encoge a su contenido y el text-align no se vería.
-  &__title { margin: 0; font-size: $fs-32; width: 100%; }
+  &__title { margin: 0; font-size: $fs-28; line-height: 1.1; width: 100%; }
   // pre-line: el subtítulo es un textarea — sus saltos de línea cuentan.
-  &__subtitle { margin: 0; color: $text-2; font-size: $fs-24; white-space: pre-line; width: 100%; }
+  &__subtitle { margin: 0; color: $text-2; font-size: $fs-16; white-space: pre-line; width: 100%; }
   &__text { color: $text-1; font-size: $fs-16; }
 
   // Alineación del bloque (campo común `align`): por CLASE (BlockShell ya
@@ -118,9 +121,6 @@
     .edc-button { justify-self: start; text-decoration: none; }
   }
 
-  &--header .block__title { font-size: $fs-40; }
-  &--header .block__subtitle { font-size: $fs-28; }
-
   &__media-layout { display: grid; gap: $space-4; }
   &__image {
     max-width: 100%;

package/scss/components/_index.scss

@@ -21,6 +21,7 @@
 @use "translatable-input";
 @use "form-locale-switch";
 @use "image-upload";
+@use "number-input";
 @use "font-upload";
 @use "toast";
 @use "toast-container";

package/scss/components/_number-input.scss

@@ -0,0 +1,48 @@
+@use "tokens" as *;
+
+// Input numérico compacto con steppers −/+ (NumberInput.vue): la estética
+// del contador de copias del editor de mazos de CDL, generalizada.
+.number-input {
+  display: inline-flex;
+  align-items: center;
+  gap: $space-1;
+
+  &__step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.6rem;
+    height: 1.6rem;
+    padding: 0;
+    border: 1px solid $border;
+    border-radius: $radius-sm;
+    background: $surface-2;
+    color: $text-2;
+    cursor: pointer;
+
+    &:hover:not(:disabled) { color: $text-1; border-color: $text-3; }
+    &:disabled { opacity: $disabled-opacity; cursor: not-allowed; }
+  }
+
+  &__field {
+    width: 2.6rem;
+    padding: 0.1rem 0.2rem;
+    text-align: center;
+    font-weight: $k-fw-bold;
+    font-size: $fs-13;
+    color: $text-1;
+    border: 1px solid $border;
+    border-radius: $radius-sm;
+    background: $surface;
+    appearance: textfield;
+    -moz-appearance: textfield;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      appearance: none;
+      margin: 0;
+    }
+  }
+
+  &--invalid &__field { color: $danger; border-color: $danger; }
+}

package/scss/components/_rich-content.scss

@@ -34,13 +34,14 @@
   > :first-child { margin-block-start: 0; }
   > :last-child { margin-block-end: 0; }
 
-  // Escala del wysiwyg: h2 32 (el mismo tamaño que un título de bloque) ·
-  // h3 24 · h4 22 (no hay token entre 20 y 24) · h5 20 · h6 18.
-  h2 { font-size: $fs-32; }
-  h3 { font-size: $fs-24; }
-  h4 { font-size: 22px; }
-  h5 { font-size: $fs-20; }
-  h6 { font-size: $fs-18; }
+  // Escala del wysiwyg, POR DEBAJO del título de bloque ($fs-28 desde que
+  // los bloques calcan la cabecera clásica): h2 24 · h3 20 · h4 18 · h5 16
+  // (como el cuerpo, se distingue por el peso) · h6 14.
+  h2 { font-size: $fs-24; }
+  h3 { font-size: $fs-20; }
+  h4 { font-size: $fs-18; }
+  h5 { font-size: $fs-16; }
+  h6 { font-size: $fs-14; }
 
   ul,
   ol {

package/src/components/NumberInput.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Minus, Plus } from '@lucide/vue'
+
+// Input numérico compacto con steppers −/+ (nacido como el contador de
+// copias del editor de mazos de CDL): input centrado sin flechas nativas,
+// botones que respetan min/max y clamp al teclear. `invalid` pinta el borde
+// en danger (p. ej. copias por encima del límite del modo).
+const props = withDefaults(
+  defineProps<{
+    modelValue: number
+    min?: number
+    max?: number
+    step?: number
+    disabled?: boolean
+    invalid?: boolean
+    /** aria-label del input (los botones llevan los suyos). */
+    label?: string
+    decreaseLabel?: string
+    increaseLabel?: string
+  }>(),
+  { step: 1, disabled: false, invalid: false },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [number] }>()
+
+function clamp(value: number): number {
+  if (Number.isNaN(value)) value = props.min ?? 0
+  if (props.min !== undefined) value = Math.max(props.min, value)
+  if (props.max !== undefined) value = Math.min(props.max, value)
+  return value
+}
+
+const atMin = computed(() => props.min !== undefined && props.modelValue <= props.min)
+const atMax = computed(() => props.max !== undefined && props.modelValue >= props.max)
+
+function stepBy(delta: number) {
+  emit('update:modelValue', clamp(props.modelValue + delta * props.step))
+}
+
+function onChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  const value = clamp(Number(input.value))
+  // El clamp puede dejar el mismo modelValue (sin re-render): se repinta a mano.
+  input.value = String(value)
+  emit('update:modelValue', value)
+}
+</script>
+
+<template>
+  <span class="number-input" :class="{ 'number-input--invalid': invalid }">
+    <button
+      type="button"
+      class="number-input__step"
+      :disabled="disabled || atMin"
+      :aria-label="decreaseLabel"
+      @click="stepBy(-1)"
+    >
+      <Minus :size="14" />
+    </button>
+    <input
+      class="number-input__field"
+      type="number"
+      :value="modelValue"
+      :min="min"
+      :max="max"
+      :step="step"
+      :disabled="disabled"
+      :aria-label="label"
+      @change="onChange"
+    />
+    <button
+      type="button"
+      class="number-input__step"
+      :disabled="disabled || atMax"
+      :aria-label="increaseLabel"
+      @click="stepBy(1)"
+    >
+      <Plus :size="14" />
+    </button>
+  </span>
+</template>

package/src/components/SortToggles.vue

@@ -22,7 +22,7 @@ const props = withDefaults(
     nameDescLabel?: string
   }>(),
   {
-    modelValue: 'latest',
+    modelValue: 'name',
     latestLabel: 'Más recientes primero',
     oldestLabel: 'Más antiguos primero',
     nameLabel: 'Alfabético (A-Z)',

package/src/index.ts

@@ -31,6 +31,7 @@ export {
 export const RichTextInput = defineAsyncComponent(() => import('./components/RichTextInput.vue'))
 export type { RichIcon, RichTextLabels } from './components/RichTextInput.vue'
 export { default as ImageUpload } from './components/ImageUpload.vue'
+export { default as NumberInput } from './components/NumberInput.vue'
 export { default as FontUpload } from './components/FontUpload.vue'
 export { default as BaseModal } from './components/BaseModal.vue'
 export { default as EditModal } from './components/EditModal.vue'

package/src/lib/createApi.ts

@@ -7,6 +7,13 @@ export interface CreateApiOptions {
   tokenKey: string
   /** Se invoca cuando la API responde 401 (token inválido/expirado). */
   onUnauthorized?: () => void
+  /**
+   * Locale ACTIVO de la interfaz (getter, se evalúa en cada petición): viaja
+   * como `?locale=` para que el SetLocale del servidor busque y ordene por el
+   * idioma que el usuario está viendo, no por el Accept-Language del
+   * navegador. Una petición con `locale` propio en params no se pisa.
+   */
+  locale?: () => string | null | undefined
 }
 
 /**
@@ -24,6 +31,10 @@ export function createApi(options: CreateApiOptions): AxiosInstance {
     if (token) {
       config.headers.Authorization = `Bearer ${token}`
     }
+    const locale = options.locale?.()
+    if (locale && !(config.params && 'locale' in config.params)) {
+      config.params = { ...config.params, locale }
+    }
     return config
   })