@edc-motor/ui 0.4.14 → 0.4.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.14",
+  "version": "0.4.16",
   "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/_edit-modal.scss

@@ -3,6 +3,22 @@
 .edit-modal {
   &__form { display: contents; }
 
+  // Cabecera propia: título + selector de locale global de los campos
+  // traducibles (solo aparece si el formulario contiene alguno).
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: $space-3;
+    min-width: 0;
+    flex: 1;
+
+    .modal__title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
   &__body {
     display: flex;
     flex-direction: column;

package/scss/components/_form-locale-switch.scss

@@ -0,0 +1,38 @@
+@use "tokens" as *;
+
+// Selector compacto de locale GLOBAL de un formulario (FormLocaleSwitch):
+// segmentado de códigos, mismo lenguaje visual que el trigger de locale de
+// los campos traducibles (_translatable-input.scss). Vive en la cabecera del
+// EditModal (solo si el formulario contiene campos traducibles).
+.form-locale-switch {
+  display: inline-flex;
+  align-items: stretch;
+  background: $surface-2;
+  border: 1px solid $border;
+  border-radius: $radius-sm;
+  overflow: hidden;
+  flex-shrink: 0;
+
+  &__option {
+    padding: 2px $space-2;
+    border: none;
+    background: transparent;
+    color: $text-3;
+    font-size: $fs-11;
+    font-weight: $k-fw-bold;
+    letter-spacing: $k-track-wide;
+    cursor: pointer;
+    transition: background-color 0.15s, color 0.15s;
+
+    & + & { border-left: 1px solid $border; }
+
+    &:hover { background: $surface-3; color: $text-1; }
+
+    // Resalta la ÚLTIMA elección global (los tabs individuales pueden haberse
+    // movido después: esto es un mando, no un espejo).
+    &.is-active {
+      background: $accent-500;
+      color: $text-1;
+    }
+  }
+}

package/scss/components/_image-upload.scss

@@ -80,6 +80,17 @@
 
   &__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.
+  &__name {
+    max-width: 160px;
+    overflow: hidden;
+    font-size: $fs-12;
+    color: $text-3;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   &__hint { font-size: $fs-12; color: $text-3; }
   &__error { font-size: $fs-12; color: $danger; }
 }

package/scss/components/_index-toolbar.scss

@@ -21,17 +21,20 @@
 
   &__search-icon {
     position: absolute;
-    right: $input-padding-x;
+    left: $input-padding-x;
     top: 50%;
     transform: translateY(-50%);
     color: $text-3;
     pointer-events: none;
   }
 
-  &__search-input {
+  // Doble clase: gana al input[type="search"] genérico de _forms.scss
+  // (0,1,1) sin depender del orden de carga — si no, el padding de la lupa
+  // no se aplica y el texto se monta con el icono.
+  &__search #{&}__search-input {
     width: 100%;
     height: $input-height;
-    padding: 0 34px 0 $input-padding-x; // hueco a la derecha para la lupa
+    padding: 0 $input-padding-x 0 34px; // hueco a la izquierda para la lupa
     background: $input-bg;
     color: $input-text;
     border: 1px solid $input-border;

package/scss/components/_index.scss

@@ -19,6 +19,7 @@
 @use "rich-text";
 @use "rich-content";
 @use "translatable-input";
+@use "form-locale-switch";
 @use "image-upload";
 @use "font-upload";
 @use "toast";

package/src/components/EditModal.vue

@@ -2,6 +2,8 @@
 import BaseModal from './BaseModal.vue'
 import { Save, X } from '@lucide/vue'
 import BaseButton from './BaseButton.vue'
+import FormLocaleSwitch from './FormLocaleSwitch.vue'
+import { provideFormLocale } from '../composables/useFormLocale'
 
 // Modal de formulario (portado de kontuan): BaseModal + pie con Cancelar/Guardar.
 // Agnóstico de i18n: las etiquetas se pasan por props (la app las traduce).
@@ -14,6 +16,8 @@ const props = withDefaults(
     submitLabel?: string
     cancelLabel?: string
     submitVariant?: 'primary' | 'secondary' | 'danger' | 'success'
+    /** Texto accesible del selector de locale global (DC-29). */
+    localeSwitchLabel?: string
   }>(),
   {
     size: 'md',
@@ -21,11 +25,17 @@ const props = withDefaults(
     submitLabel: 'Guardar',
     cancelLabel: 'Cancelar',
     submitVariant: 'primary',
+    localeSwitchLabel: undefined,
   },
 )
 
 const emit = defineEmits<{ 'update:modelValue': [boolean]; submit: [] }>()
 
+// Locale global del formulario: los campos traducibles del slot (Translatable*
+// del ui, también dentro de SchemaFields/PageBlocks) se suscriben SOLOS por
+// inject; el selector de la cabecera solo se pinta si hay alguno.
+provideFormLocale()
+
 function close() {
   if (props.loading) return
   emit('update:modelValue', false)
@@ -39,6 +49,15 @@ function close() {
     :size="size"
     @update:model-value="(v) => !loading && emit('update:modelValue', v)"
   >
+    <!-- Cabecera propia: título + selector de locale global (si hay campos
+         traducibles); el botón de cerrar lo sigue poniendo BaseModal. -->
+    <template #header>
+      <div class="edit-modal__header">
+        <h3 class="modal__title">{{ title }}</h3>
+        <FormLocaleSwitch :title="localeSwitchLabel" />
+      </div>
+    </template>
+
     <form class="edit-modal__form" @submit.prevent="emit('submit')">
       <div class="edit-modal__body"><slot /></div>
     </form>

package/src/components/FormLocaleSwitch.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { inject, ref, watch } from 'vue'
+import { FormLocaleKey } from '../composables/useFormLocale'
+
+// Selector COMPACTO de locale global de un formulario: botones segmentados
+// con los códigos (unión de los locales de los campos traducibles suscritos
+// vía provide/inject, ver useFormLocale). Al pulsar uno cambia el tab activo
+// de TODOS los campos a la vez; los tabs individuales siguen funcionando por
+// su cuenta (por eso el resaltado marca la ÚLTIMA elección global, no un
+// estado que los campos puedan desmentir). Solo se pinta si el formulario
+// contiene campos traducibles. Agnóstico de i18n (DC-29): texto por prop.
+
+withDefaults(defineProps<{ title?: string }>(), { title: 'Idioma de todos los campos' })
+
+const context = inject(FormLocaleKey, null)
+
+// Última elección global (para el resaltado); se reinicia si cambia el set
+// de locales (formularios que se rellenan en diferido).
+const current = ref<string | null>(null)
+if (context) {
+  watch(context.locales, () => {
+    if (current.value && !context.locales.value.some((l) => l.code === current.value)) {
+      current.value = null
+    }
+  })
+}
+
+function setAll(code: string) {
+  if (!context) return
+  current.value = code
+  context.setAll(code)
+}
+</script>
+
+<template>
+  <div
+    v-if="context && context.hasFields.value && context.locales.value.length > 1"
+    class="form-locale-switch"
+    role="group"
+    :title="title"
+    :aria-label="title"
+  >
+    <button
+      v-for="locale in context.locales.value"
+      :key="locale.code"
+      type="button"
+      class="form-locale-switch__option"
+      :class="{ 'is-active': locale.code === current }"
+      :title="locale.name"
+      @click="setAll(locale.code)"
+    >
+      {{ locale.code.toUpperCase() }}
+    </button>
+  </div>
+</template>

package/src/components/ImageUpload.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, ref } from 'vue'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
 import { Trash2 } from '@lucide/vue'
 
 // Subida de imagen con arrastrar-y-soltar o clic (portado de kontuan).
+// DIFERIDO: elegir fichero NO sube nada — el File queda en el v-model (con
+// object URL para la vista previa) y quien lo usa lo envía al GUARDAR. La
+// imagen ya guardada se muestra con `currentUrl` (miniatura + nombre).
 // Agnóstico de i18n: los textos van por props.
 const props = withDefaults(
   defineProps<{
@@ -41,6 +44,40 @@ const displayUrl = computed(() => (removed.value ? null : previewUrl.value || pr
 // El error externo (validación del servidor) manda sobre el interno.
 const shownError = computed(() => props.error || localError.value)
 
+// Nombre del fichero bajo la miniatura: el del File pendiente o, si se
+// muestra la imagen guardada, el nombre extraído de su URL.
+const displayName = computed(() => {
+  if (removed.value) return null
+  if (props.modelValue) return props.modelValue.name
+  if (!previewUrl.value && props.currentUrl) {
+    try {
+      const path = decodeURIComponent(props.currentUrl.split('?')[0].split('#')[0])
+      return path.split('/').pop() || null
+    } catch {
+      return null
+    }
+  }
+  return null
+})
+
+// La vista previa se deriva del v-model (controlado): si el padre repone un
+// File (p. ej. TranslatableImage al volver a un idioma con imagen pendiente)
+// la miniatura reaparece sin re-elegir el fichero.
+watch(
+  () => props.modelValue,
+  (file) => {
+    if (previewUrl.value) {
+      URL.revokeObjectURL(previewUrl.value)
+      previewUrl.value = null
+    }
+    if (file) {
+      previewUrl.value = URL.createObjectURL(file)
+      removed.value = false
+    }
+  },
+  { immediate: true },
+)
+
 function handleFile(file: File) {
   // Validación en cliente: tamaño y tipo, con feedback (no se ignora en silencio).
   if (file.size > props.maxSize * 1024 * 1024) {
@@ -52,9 +89,6 @@ function handleFile(file: File) {
     return
   }
   localError.value = null
-  removed.value = false
-  if (previewUrl.value) URL.revokeObjectURL(previewUrl.value)
-  previewUrl.value = URL.createObjectURL(file)
   emit('update:modelValue', file)
 }
 
@@ -137,6 +171,7 @@ onBeforeUnmount(() => {
         </div>
       </template>
     </div>
+    <p v-if="displayName" class="image-upload__name">{{ displayName }}</p>
     <p v-if="shownError" class="image-upload__error">{{ shownError }}</p>
   </div>
 </template>

package/src/components/IndexToolbar.vue

@@ -3,7 +3,7 @@ import { Search } from '@lucide/vue'
 import SortToggles, { type SortValue } from './SortToggles.vue'
 
 // Barra unificada de los index (admin y web pública): búsqueda (lupa a la
-// derecha, como el FilterBar del admin-kit) y toggles de ordenación. Los
+// izquierda, como el FilterBar del admin-kit) y toggles de ordenación. Los
 // filtros del listado viven en la barra derecha (RightSidebar del admin /
 // AppRightSidebar de la web), no aquí. En ancho es una fila
 // [búsqueda][toggles]; en estrecho (container query propia) la búsqueda
@@ -43,6 +43,7 @@ const emit = defineEmits<{
   <div class="index-toolbar">
     <div class="index-toolbar__inner">
       <div class="index-toolbar__search">
+        <Search :size="16" class="index-toolbar__search-icon" />
         <input
           type="search"
           :value="modelValue"
@@ -50,7 +51,6 @@ const emit = defineEmits<{
           class="index-toolbar__search-input"
           @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
         />
-        <Search :size="16" class="index-toolbar__search-icon" />
       </div>
 
       <div v-if="showSort" class="index-toolbar__actions">

package/src/components/PaletteColorPicker.vue

@@ -16,19 +16,19 @@ const props = withDefaults(
 
 const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
 
-// Paleta base (mismos tonos que kontuan).
+// Paleta base: espectro cálido → frío, con el gris al final (el tono "Slate"
+// heredado de kontuan). Los valores viajan como HEX, no como clave.
 const PALETTE = [
-  { name: 'Slate', hex: '#64748B' },
-  { name: 'Red', hex: '#EF4444' },
-  { name: 'Orange', hex: '#F97316' },
-  { name: 'Amber', hex: '#F59E0B' },
-  { name: 'Yellow', hex: '#EAB308' },
-  { name: 'Green', hex: '#22C55E' },
-  { name: 'Teal', hex: '#14B8A6' },
-  { name: 'Blue', hex: '#3B82F6' },
-  { name: 'Indigo', hex: '#6366F1' },
-  { name: 'Violet', hex: '#8B5CF6' },
-  { name: 'Pink', hex: '#EC4899' },
+  { name: 'Rojo', hex: '#f15959' },
+  { name: 'Naranja', hex: '#f1753a' },
+  { name: 'Lima', hex: '#88b033' },
+  { name: 'Verde', hex: '#29ab5f' },
+  { name: 'Esmeralda', hex: '#31a28e' },
+  { name: 'Cian', hex: '#3999cd' },
+  { name: 'Azul', hex: '#408cfd' },
+  { name: 'Violeta', hex: '#7a64c8' },
+  { name: 'Magenta', hex: '#a75da5' },
+  { name: 'Gris', hex: '#64748B' },
 ]
 
 const norm = (v: string | null) => (v ?? '').toLowerCase()

package/src/components/TranslatableImage.vue

@@ -2,12 +2,15 @@
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { ChevronDown } from '@lucide/vue'
 import ImageUpload from './ImageUpload.vue'
+import { useFormLocaleField } from '../composables/useFormLocale'
 
-// Imagen traducible (una URL por locale): mismo selector desplegable de
-// locale que TranslatableInput, con un ImageUpload para el idioma activo.
-// La subida la pone quien lo usa (prop `upload`): este componente solo
-// gestiona el mapa locale => URL. En el render, el motor localiza el valor
-// con fallback al locale por defecto (localizeSettings).
+// Imagen traducible (una por locale): mismo selector desplegable de locale
+// que TranslatableInput, con un ImageUpload para el idioma activo. DIFERIDO:
+// este componente NO sube nada — el mapa del v-model lleva la URL guardada
+// (string) o el File pendiente por locale, y quien lo usa sube los File al
+// GUARDAR. Quitar la imagen de un locale borra su clave del mapa (también
+// diferido). En el render, el motor localiza el valor con fallback al locale
+// por defecto (localizeSettings).
 interface Locale {
   code: string
   name: string
@@ -15,29 +18,35 @@ interface Locale {
 
 const props = withDefaults(
   defineProps<{
-    modelValue?: Record<string, string>
+    modelValue?: Record<string, string | File>
     locales: Locale[]
     label?: string
     required?: boolean
-    /** Sube el fichero (con la URL a la que sustituye, para que el backend
-     *  borre la anterior) y devuelve la URL pública que se guarda. */
-    upload: (file: File, replaces?: string | null) => Promise<string>
-    /** Borra el fichero al pulsar "quitar" (opcional). */
-    removeFile?: (url: string) => void | Promise<void>
     error?: string
   }>(),
   { modelValue: () => ({}), required: false },
 )
 
-const emit = defineEmits<{ 'update:modelValue': [Record<string, string>] }>()
+const emit = defineEmits<{ 'update:modelValue': [Record<string, string | File>] }>()
 
 const codes = computed(() => props.locales.map((l) => l.code))
 const active = ref(codes.value[0] ?? 'es')
 const open = ref(false)
 const dropdownRef = ref<HTMLElement>()
-const uploading = ref(false)
 
-const currentUrl = computed(() => props.modelValue?.[active.value] || null)
+// Locale global del formulario (si el contenedor lo provee, p. ej. EditModal):
+// una difusión cambia el tab activo; el selector propio sigue siendo local.
+useFormLocaleField(
+  computed(() => props.locales),
+  (code) => {
+    active.value = code
+  },
+)
+
+const current = computed(() => props.modelValue?.[active.value] ?? null)
+// La URL guardada y el File pendiente del locale activo, para el ImageUpload.
+const currentFile = computed(() => (current.value instanceof File ? current.value : null))
+const currentUrl = computed(() => (typeof current.value === 'string' ? current.value : null))
 const filledCount = computed(() => codes.value.filter((c) => !!props.modelValue?.[c]).length)
 const hasContent = (code: string) => !!props.modelValue?.[code]
 
@@ -46,30 +55,20 @@ function selectLocale(code: string) {
   open.value = false
 }
 
-function setUrl(url: string | null) {
+/** Deja el mapa en su estado final deseado: File pendiente, o sin clave. */
+function setValue(value: string | File | null) {
   const next = { ...props.modelValue }
-  if (url) next[active.value] = url
+  if (value) next[active.value] = value
   else delete next[active.value]
   emit('update:modelValue', next)
 }
 
-async function onFile(file: File | null) {
-  if (!file) {
-    onRemove()
-    return
-  }
-  uploading.value = true
-  try {
-    setUrl(await props.upload(file, currentUrl.value))
-  } finally {
-    uploading.value = false
-  }
+function onFile(file: File | null) {
+  setValue(file)
 }
 
 function onRemove() {
-  const url = currentUrl.value
-  if (url && props.removeFile) Promise.resolve(props.removeFile(url)).catch(() => {})
-  setUrl(null)
+  setValue(null)
 }
 
 function onClickOutside(e: MouseEvent) {
@@ -117,9 +116,9 @@ onBeforeUnmount(() => document.removeEventListener('click', onClickOutside))
 
     <ImageUpload
       :key="active"
-      :model-value="null"
+      :model-value="currentFile"
       :current-url="currentUrl"
-      :error="uploading ? undefined : error"
+      :error="error"
       @update:model-value="onFile"
       @remove="onRemove"
     />

package/src/components/TranslatableInput.vue

@@ -2,6 +2,7 @@
 import { ref, computed, onMounted, onBeforeUnmount, defineAsyncComponent } from 'vue'
 import { ChevronDown } from '@lucide/vue'
 import type { RichTextLabels } from './RichTextInput.vue'
+import { useFormLocaleField } from '../composables/useFormLocale'
 
 // Editor WYSIWYG cargado en diferido: TipTap solo se descarga si algún campo
 // traducible usa type="wysiwyg".
@@ -45,6 +46,15 @@ const emit = defineEmits<{ 'update:modelValue': [Record<string, string>] }>()
 const codes = computed(() => props.locales.map((l) => l.code))
 const active = ref(codes.value[0] ?? 'es')
 const open = ref(false)
+
+// Locale global del formulario (si el contenedor lo provee, p. ej. EditModal):
+// una difusión cambia el tab activo; el selector propio sigue siendo local.
+useFormLocaleField(
+  computed(() => props.locales),
+  (code) => {
+    active.value = code
+  },
+)
 const dropdownRef = ref<HTMLElement>()
 const inputId = props.id || `translatable-${Math.random().toString(36).slice(2, 9)}`
 

package/src/composables/useFormLocale.ts

@@ -0,0 +1,106 @@
+import {
+  computed,
+  inject,
+  onScopeDispose,
+  provide,
+  reactive,
+  ref,
+  watch,
+  type ComputedRef,
+  type InjectionKey,
+  type Ref,
+} from 'vue'
+
+/**
+ * Locale global de un FORMULARIO con campos traducibles.
+ *
+ * Cada campo traducible (TranslatableInput/TranslatableImage) conserva sus
+ * tabs de locale propias, pero además se SUSCRIBE (inject) al contexto que
+ * provee su formulario contenedor (EditModal lo hace solo): un selector
+ * compacto en la cabecera cambia el tab activo de TODOS los campos a la vez,
+ * y tocar el tab de un campo individual sigue afectando solo a ese campo.
+ *
+ * Los juegos no tocan nada: los campos del motor se registran/suscriben
+ * solos, y el selector solo se pinta si el formulario contiene alguno.
+ */
+
+export interface FormLocale {
+  code: string
+  name: string
+}
+
+interface FormLocaleBroadcast {
+  code: string
+  /** Contador: re-emite aunque se repita el mismo código. */
+  tick: number
+}
+
+export interface FormLocaleContext {
+  /** Unión (sin duplicados) de los locales de los campos registrados. */
+  locales: ComputedRef<FormLocale[]>
+  /** ¿Hay campos traducibles suscritos? (el selector solo se pinta si sí). */
+  hasFields: ComputedRef<boolean>
+  /** Última difusión global (la observan los campos). */
+  broadcast: Ref<FormLocaleBroadcast | null>
+  /** Cambia el locale activo de TODOS los campos suscritos. */
+  setAll: (code: string) => void
+  /** Alta de un campo; devuelve la baja (la llama useFormLocaleField). */
+  register: (locales: ComputedRef<FormLocale[]> | Ref<FormLocale[]>) => () => void
+}
+
+export const FormLocaleKey: InjectionKey<FormLocaleContext> = Symbol('edc-form-locale')
+
+/** Lo llama el contenedor del formulario (EditModal ya lo hace). */
+export function provideFormLocale(): FormLocaleContext {
+  // Mapa id => locales del campo (reactive para que los computed reaccionen).
+  const fields = reactive(new Map<number, ComputedRef<FormLocale[]> | Ref<FormLocale[]>>())
+  let nextId = 0
+
+  const locales = computed<FormLocale[]>(() => {
+    const seen = new Map<string, FormLocale>()
+    for (const fieldLocales of fields.values()) {
+      for (const locale of fieldLocales.value) {
+        if (!seen.has(locale.code)) seen.set(locale.code, locale)
+      }
+    }
+    return [...seen.values()]
+  })
+
+  const hasFields = computed(() => fields.size > 0)
+  const broadcast = ref<FormLocaleBroadcast | null>(null)
+
+  function setAll(code: string) {
+    broadcast.value = { code, tick: (broadcast.value?.tick ?? 0) + 1 }
+  }
+
+  function register(fieldLocales: ComputedRef<FormLocale[]> | Ref<FormLocale[]>) {
+    const id = nextId++
+    fields.set(id, fieldLocales)
+    return () => {
+      fields.delete(id)
+    }
+  }
+
+  const context: FormLocaleContext = { locales, hasFields, broadcast, setAll, register }
+  provide(FormLocaleKey, context)
+  return context
+}
+
+/**
+ * Lo llaman los campos traducibles en su setup: si hay proveedor por encima,
+ * se registran (alimentan el selector) y aplican cada difusión global que
+ * incluya alguno de sus locales. Sin proveedor, no hace nada.
+ */
+export function useFormLocaleField(
+  locales: ComputedRef<FormLocale[]> | Ref<FormLocale[]>,
+  apply: (code: string) => void,
+): void {
+  const context = inject(FormLocaleKey, null)
+  if (!context) return
+
+  onScopeDispose(context.register(locales))
+
+  watch(context.broadcast, (b) => {
+    if (b && locales.value.some((locale) => locale.code === b.code)) apply(b.code)
+  })
+}

package/src/index.ts

@@ -15,6 +15,17 @@ export { default as NumericInput } from './components/NumericInput.vue'
 export { default as PaletteColorPicker } from './components/PaletteColorPicker.vue'
 export { default as TranslatableInput } from './components/TranslatableInput.vue'
 export { default as TranslatableImage } from './components/TranslatableImage.vue'
+// Locale global de un formulario: EditModal lo provee solo (selector compacto
+// en su cabecera) y los campos traducibles se suscriben solos; cualquier otro
+// contenedor puede montar lo mismo con provideFormLocale() + FormLocaleSwitch.
+export { default as FormLocaleSwitch } from './components/FormLocaleSwitch.vue'
+export {
+  provideFormLocale,
+  useFormLocaleField,
+  FormLocaleKey,
+  type FormLocale,
+  type FormLocaleContext,
+} from './composables/useFormLocale'
 // El WYSIWYG carga DIFERIDO (TipTap pesa ~450 KB): así la web pública no lo
 // arrastra a su bundle y el admin lo trocea en su propio chunk.
 export const RichTextInput = defineAsyncComponent(() => import('./components/RichTextInput.vue'))