@edc-motor/ui 0.4.31 → 0.4.33

package/package.json

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

@@ -20,4 +20,15 @@
   &.is-info { color: $info; border-color: color-mix(in srgb, $info 45%, transparent); }
   &.is-missing { color: $warning; border-color: color-mix(in srgb, $warning 45%, transparent); }
   &.is-failed { color: $danger; border-color: color-mix(in srgb, $danger 45%, transparent); }
+
+  // Chip de IDENTIDAD teñido por dato (p. ej. la facción de un juego): el
+  // color llega por --chip-tint (style en línea) y pasa a ser el FONDO; el
+  // texto elige blanco o negro por luminosidad real (truco lch, como los
+  // botones de bloque) — legible con cualquier color y en ambos temas, que
+  // era el problema del texto teñido sobre el fondo del chip de contorno.
+  &.is-tinted {
+    background: var(--chip-tint);
+    border-color: transparent;
+    @include contrast-text(var(--chip-tint));
+  }
 }

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/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
   })