@edc-motor/ui 0.2.0

package/src/components/RichTextInput.vue

@@ -0,0 +1,273 @@
+<script setup lang="ts">
+import { computed, ref, watch, onBeforeUnmount, onMounted } from 'vue'
+import { useEditor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import Image from '@tiptap/extension-image'
+import {
+  Bold,
+  Italic,
+  Strikethrough,
+  Heading2,
+  List,
+  ListOrdered,
+  Undo2,
+  Redo2,
+  Smile,
+  Code,
+} from '@lucide/vue'
+
+// Editor de texto enriquecido (WYSIWYG) basado en TipTap (DC-09).
+// v-model = HTML. Agnóstico de i18n. Si se pasan `icons`, muestra un selector
+// para insertar iconos del juego (como en CDL): se insertan como <img.rt-icon>.
+// Incluye un toggle para editar en modo visual o directamente el HTML.
+export interface RichIcon {
+  name: string
+  url: string
+}
+
+// Textos de la barra de herramientas, sobreescribibles por la app (DC-29).
+export interface RichTextLabels {
+  bold: string
+  italic: string
+  strike: string
+  heading: string
+  bulletList: string
+  orderedList: string
+  undo: string
+  redo: string
+  insertIcon: string
+  editHtml: string
+}
+
+const defaultLabels: RichTextLabels = {
+  bold: 'Negrita',
+  italic: 'Cursiva',
+  strike: 'Tachado',
+  heading: 'Título',
+  bulletList: 'Lista',
+  orderedList: 'Lista numerada',
+  undo: 'Deshacer',
+  redo: 'Rehacer',
+  insertIcon: 'Insertar icono',
+  editHtml: 'Editar HTML',
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string
+    placeholder?: string
+    disabled?: boolean
+    icons?: RichIcon[]
+    labels?: Partial<RichTextLabels>
+  }>(),
+  { modelValue: '', disabled: false, icons: () => [], labels: () => ({}) },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+
+const t = computed<RichTextLabels>(() => ({ ...defaultLabels, ...props.labels }))
+
+// Declarado antes del watch de modelValue, que lo lee.
+const source = ref(false)
+
+const editor = useEditor({
+  content: props.modelValue,
+  editable: !props.disabled,
+  extensions: [
+    StarterKit,
+    // Los iconos son la única imagen que se inserta: en línea y con clase fija.
+    Image.configure({ inline: true, HTMLAttributes: { class: 'rt-icon' } }),
+  ],
+  onUpdate: ({ editor }) => {
+    const html = editor.isEmpty ? '' : editor.getHTML()
+    emit('update:modelValue', html)
+  },
+})
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (!editor.value || source.value) return
+    if (value !== (editor.value.isEmpty ? '' : editor.value.getHTML())) {
+      editor.value.commands.setContent(value || '', false)
+    }
+  },
+)
+watch(
+  () => props.disabled,
+  (d) => editor.value?.setEditable(!d),
+)
+
+const tools = computed(() => [
+  {
+    key: 'bold',
+    icon: Bold,
+    title: t.value.bold,
+    run: () => editor.value?.chain().focus().toggleBold().run(),
+    active: () => editor.value?.isActive('bold'),
+  },
+  {
+    key: 'italic',
+    icon: Italic,
+    title: t.value.italic,
+    run: () => editor.value?.chain().focus().toggleItalic().run(),
+    active: () => editor.value?.isActive('italic'),
+  },
+  {
+    key: 'strike',
+    icon: Strikethrough,
+    title: t.value.strike,
+    run: () => editor.value?.chain().focus().toggleStrike().run(),
+    active: () => editor.value?.isActive('strike'),
+  },
+  {
+    key: 'h2',
+    icon: Heading2,
+    title: t.value.heading,
+    run: () => editor.value?.chain().focus().toggleHeading({ level: 2 }).run(),
+    active: () => editor.value?.isActive('heading', { level: 2 }),
+  },
+  {
+    key: 'ul',
+    icon: List,
+    title: t.value.bulletList,
+    run: () => editor.value?.chain().focus().toggleBulletList().run(),
+    active: () => editor.value?.isActive('bulletList'),
+  },
+  {
+    key: 'ol',
+    icon: ListOrdered,
+    title: t.value.orderedList,
+    run: () => editor.value?.chain().focus().toggleOrderedList().run(),
+    active: () => editor.value?.isActive('orderedList'),
+  },
+])
+
+// --- Selector de iconos ---
+const pickerOpen = ref(false)
+const pickerRef = ref<HTMLElement>()
+
+function insertIcon(icon: RichIcon) {
+  editor.value?.chain().focus().setImage({ src: icon.url, alt: icon.name, title: icon.name }).run()
+  pickerOpen.value = false
+}
+function onClickOutside(e: MouseEvent) {
+  if (pickerRef.value && !pickerRef.value.contains(e.target as Node)) pickerOpen.value = false
+}
+onMounted(() => document.addEventListener('click', onClickOutside))
+onBeforeUnmount(() => {
+  document.removeEventListener('click', onClickOutside)
+  editor.value?.destroy()
+})
+
+// --- Toggle modo visual / HTML (source declarado arriba, antes del watch) ---
+const sourceHtml = ref('')
+
+function toggleSource() {
+  if (!source.value) {
+    // Entrar a modo HTML: cargar el HTML actual.
+    sourceHtml.value = editor.value?.isEmpty ? '' : (editor.value?.getHTML() ?? '')
+  } else {
+    // Volver a visual: aplicar el HTML editado al editor.
+    editor.value?.commands.setContent(sourceHtml.value || '', false)
+  }
+  source.value = !source.value
+  pickerOpen.value = false
+}
+
+function onSourceInput(value: string) {
+  sourceHtml.value = value
+  emit('update:modelValue', value)
+}
+</script>
+
+<template>
+  <div class="rich-text" :class="{ 'rich-text--disabled': disabled }">
+    <div v-if="editor" class="rich-text__toolbar">
+      <template v-if="!source">
+        <button
+          v-for="tool in tools"
+          :key="tool.key"
+          type="button"
+          class="rich-text__tool"
+          :class="{ 'rich-text__tool--active': tool.active() }"
+          :title="tool.title"
+          :disabled="disabled"
+          @click="tool.run()"
+        >
+          <component :is="tool.icon" :size="16" />
+        </button>
+        <span class="rich-text__sep" />
+        <button
+          type="button"
+          class="rich-text__tool"
+          :title="t.undo"
+          :disabled="disabled"
+          @click="editor?.chain().focus().undo().run()"
+        >
+          <Undo2 :size="16" />
+        </button>
+        <button
+          type="button"
+          class="rich-text__tool"
+          :title="t.redo"
+          :disabled="disabled"
+          @click="editor?.chain().focus().redo().run()"
+        >
+          <Redo2 :size="16" />
+        </button>
+
+        <!-- Selector de iconos del juego -->
+        <template v-if="icons.length">
+          <span class="rich-text__sep" />
+          <div ref="pickerRef" class="rich-text__picker">
+            <button
+              type="button"
+              class="rich-text__tool"
+              :class="{ 'rich-text__tool--active': pickerOpen }"
+              :title="t.insertIcon"
+              :disabled="disabled"
+              @click="pickerOpen = !pickerOpen"
+            >
+              <Smile :size="16" />
+            </button>
+            <div v-if="pickerOpen" class="rich-text__icons">
+              <button
+                v-for="icon in icons"
+                :key="icon.url"
+                type="button"
+                class="rich-text__icon"
+                :title="icon.name"
+                @click="insertIcon(icon)"
+              >
+                <img :src="icon.url" :alt="icon.name" />
+              </button>
+            </div>
+          </div>
+        </template>
+      </template>
+
+      <!-- Toggle visual / HTML (siempre a la derecha) -->
+      <button
+        type="button"
+        class="rich-text__tool rich-text__tool--source"
+        :class="{ 'rich-text__tool--active': source }"
+        :title="t.editHtml"
+        :disabled="disabled"
+        @click="toggleSource"
+      >
+        <Code :size="16" />
+      </button>
+    </div>
+
+    <textarea
+      v-if="source"
+      class="rich-text__source"
+      :value="sourceHtml"
+      :disabled="disabled"
+      spellcheck="false"
+      @input="onSourceInput(($event.target as HTMLTextAreaElement).value)"
+    />
+    <EditorContent v-show="!source" class="rich-text__content" :editor="editor" />
+  </div>
+</template>

package/src/components/SearchSelect.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { Check, ChevronDown } from '@lucide/vue'
+
+// Select con buscador (combobox de selección ÚNICA): cerrado ocupa una
+// línea; al desplegar muestra un input de búsqueda y las opciones filtradas
+// (lista larga => scroll interno del desplegable). Emparentado con el
+// TagCombobox de kontuan (multi-etiquetas), del que hereda el teclado
+// (flechas + Enter + Escape) y el cierre por mousedown exterior. El filtrado
+// lo hace el PADRE (evento `search`, con debounce aquí): en cliente o contra
+// el servidor, y con `canLoadMore` pagina.
+// Agnóstico de i18n (DC-29): textos por prop, defaults en castellano.
+
+export interface SearchSelectOption {
+  id: number | string
+  label: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number | string | null
+    options: SearchSelectOption[]
+    placeholder?: string
+    searchPlaceholder?: string
+    noResults?: string
+    loadMoreLabel?: string
+    canLoadMore?: boolean
+  }>(),
+  {
+    modelValue: null,
+    placeholder: 'Elige…',
+    searchPlaceholder: 'Buscar…',
+    noResults: 'Sin resultados.',
+    loadMoreLabel: 'Cargar más',
+    canLoadMore: false,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [id: number | string]
+  search: [query: string]
+  loadMore: []
+}>()
+
+const open = ref(false)
+const query = ref('')
+const highlighted = ref(0)
+const root = ref<HTMLElement | null>(null)
+const input = ref<HTMLInputElement | null>(null)
+
+const selectedLabel = computed(
+  () => props.options.find((o) => o.id === props.modelValue)?.label ?? '',
+)
+
+async function toggle() {
+  open.value = !open.value
+  if (open.value) {
+    // Al abrir se resetea la búsqueda (lista completa) y el foco va al input.
+    if (query.value !== '') {
+      query.value = ''
+      emit('search', '')
+    }
+    highlighted.value = 0
+    document.addEventListener('mousedown', onOutside)
+    await nextTick()
+    input.value?.focus()
+  } else {
+    close()
+  }
+}
+
+function close() {
+  open.value = false
+  document.removeEventListener('mousedown', onOutside)
+}
+
+function select(option: SearchSelectOption) {
+  emit('update:modelValue', option.id)
+  close()
+}
+
+// Búsqueda con debounce: el padre filtra (cliente o servidor).
+let timer: ReturnType<typeof setTimeout> | null = null
+function onInput() {
+  if (timer) clearTimeout(timer)
+  timer = setTimeout(() => emit('search', query.value), 300)
+}
+
+watch(
+  () => props.options,
+  () => {
+    highlighted.value = 0
+  },
+)
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    close()
+    return
+  }
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    if (props.options.length) highlighted.value = (highlighted.value + 1) % props.options.length
+    return
+  }
+  if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    if (props.options.length) {
+      highlighted.value = (highlighted.value - 1 + props.options.length) % props.options.length
+    }
+    return
+  }
+  if (e.key === 'Enter') {
+    e.preventDefault()
+    const option = props.options[highlighted.value]
+    if (option) select(option)
+  }
+}
+
+function onOutside(e: MouseEvent) {
+  if (root.value && !root.value.contains(e.target as Node)) close()
+}
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mousedown', onOutside)
+  if (timer) clearTimeout(timer)
+})
+</script>
+
+<template>
+  <div ref="root" class="search-select" :class="{ 'is-open': open }">
+    <button type="button" class="search-select__trigger" @click="toggle">
+      <span class="search-select__value" :class="{ 'is-placeholder': !selectedLabel }">
+        {{ selectedLabel || placeholder }}
+      </span>
+      <ChevronDown :size="16" class="search-select__chevron" />
+    </button>
+
+    <div v-if="open" class="search-select__dropdown">
+      <input
+        ref="input"
+        v-model="query"
+        type="text"
+        class="search-select__input"
+        :placeholder="searchPlaceholder"
+        @input="onInput"
+        @keydown="onKeydown"
+      />
+      <ul class="search-select__options">
+        <li v-for="(option, index) in options" :key="option.id">
+          <button
+            type="button"
+            class="search-select__option"
+            :class="{
+              'is-active': option.id === modelValue,
+              'is-highlighted': index === highlighted,
+            }"
+            @mousedown.prevent="select(option)"
+            @mouseenter="highlighted = index"
+          >
+            <span class="search-select__label">{{ option.label }}</span>
+            <Check v-if="option.id === modelValue" :size="14" />
+          </button>
+        </li>
+        <li v-if="!options.length" class="search-select__empty">{{ noResults }}</li>
+        <li v-if="canLoadMore" class="search-select__more">
+          <button type="button" @mousedown.prevent="emit('loadMore')">{{ loadMoreLabel }}</button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

package/src/components/ThemeSelector.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { type Component } from 'vue'
+import { Sun, Moon, Monitor } from '@lucide/vue'
+import { useTheme, type ThemeMode } from '../composables/useTheme'
+
+const { themeMode, setTheme } = useTheme()
+
+const options: { value: ThemeMode; icon: Component }[] = [
+  { value: 'light', icon: Sun },
+  { value: 'dark', icon: Moon },
+  { value: 'system', icon: Monitor },
+]
+</script>
+
+<template>
+  <div class="theme-selector">
+    <button
+      v-for="opt in options"
+      :key="opt.value"
+      type="button"
+      :class="['theme-btn', { active: themeMode === opt.value }]"
+      :title="opt.value"
+      @click="setTheme(opt.value)"
+    >
+      <component :is="opt.icon" :size="14" />
+    </button>
+  </div>
+</template>

package/src/components/ToastContainer.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useToast } from '../composables/useToast'
+import BaseToast from './BaseToast.vue'
+
+const { toasts, remove } = useToast()
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="toast-container">
+      <TransitionGroup name="toast">
+        <BaseToast
+          v-for="toast in toasts"
+          :key="toast.id"
+          :variant="toast.variant"
+          :message="toast.message"
+          :duration="toast.duration"
+          @close="remove(toast.id)"
+        />
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>

package/src/components/TranslatableImage.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+import { ChevronDown } from '@lucide/vue'
+import ImageUpload from './ImageUpload.vue'
+
+// 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).
+interface Locale {
+  code: string
+  name: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: Record<string, string>
+    locales: Locale[]
+    label?: string
+    required?: boolean
+    /** Sube el fichero y devuelve la URL pública que se guarda. */
+    upload: (file: File) => Promise<string>
+    error?: string
+  }>(),
+  { modelValue: () => ({}), required: false },
+)
+
+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)
+const dropdownRef = ref<HTMLElement>()
+const uploading = ref(false)
+
+const currentUrl = computed(() => props.modelValue?.[active.value] || null)
+const filledCount = computed(() => codes.value.filter((c) => !!props.modelValue?.[c]).length)
+const hasContent = (code: string) => !!props.modelValue?.[code]
+
+function selectLocale(code: string) {
+  active.value = code
+  open.value = false
+}
+
+function setUrl(url: string | null) {
+  const next = { ...props.modelValue }
+  if (url) next[active.value] = url
+  else delete next[active.value]
+  emit('update:modelValue', next)
+}
+
+async function onFile(file: File | null) {
+  if (!file) {
+    setUrl(null)
+    return
+  }
+  uploading.value = true
+  try {
+    setUrl(await props.upload(file))
+  } finally {
+    uploading.value = false
+  }
+}
+
+function onClickOutside(e: MouseEvent) {
+  if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) open.value = false
+}
+onMounted(() => document.addEventListener('click', onClickOutside))
+onBeforeUnmount(() => document.removeEventListener('click', onClickOutside))
+</script>
+
+<template>
+  <div class="form-field" :class="{ 'form-field--error': error }">
+    <div class="translatable-header">
+      <span v-if="label" class="form-field__label">
+        {{ label }}<span v-if="required" class="form-field__required">*</span>
+      </span>
+      <div ref="dropdownRef" class="translatable-selector">
+        <button type="button" class="translatable-trigger" @click="open = !open">
+          <span class="translatable-trigger__code">{{ active.toUpperCase() }}</span>
+          <span class="translatable-trigger__count">{{ filledCount }}/{{ codes.length }}</span>
+          <ChevronDown class="translatable-trigger__chevron" :size="12" />
+        </button>
+        <Transition name="dropdown">
+          <div v-if="open" class="translatable-dropdown">
+            <button
+              v-for="loc in locales"
+              :key="loc.code"
+              type="button"
+              :class="[
+                'translatable-option',
+                {
+                  'translatable-option--active': loc.code === active,
+                  'translatable-option--empty': !hasContent(loc.code),
+                },
+              ]"
+              @click="selectLocale(loc.code)"
+            >
+              <span class="translatable-option__code">{{ loc.code.toUpperCase() }}</span>
+              <span class="translatable-option__label">{{ loc.name }}</span>
+              <span v-if="hasContent(loc.code)" class="translatable-option__filled" />
+            </button>
+          </div>
+        </Transition>
+      </div>
+    </div>
+
+    <ImageUpload
+      :key="active"
+      :model-value="null"
+      :current-url="currentUrl"
+      :error="uploading ? undefined : error"
+      @update:model-value="onFile"
+      @remove="setUrl(null)"
+    />
+
+    <p v-if="error" class="form-field__error">{{ error }}</p>
+  </div>
+</template>