@edc-motor/ui 0.2.0

package/src/components/EditModal.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import BaseModal from './BaseModal.vue'
+import { Save, X } from '@lucide/vue'
+import BaseButton from './BaseButton.vue'
+
+// 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).
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    title: string
+    size?: 'sm' | 'md' | 'lg'
+    loading?: boolean
+    submitLabel?: string
+    cancelLabel?: string
+    submitVariant?: 'primary' | 'secondary' | 'danger' | 'success'
+  }>(),
+  {
+    size: 'md',
+    loading: false,
+    submitLabel: 'Guardar',
+    cancelLabel: 'Cancelar',
+    submitVariant: 'primary',
+  },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [boolean]; submit: [] }>()
+
+function close() {
+  if (props.loading) return
+  emit('update:modelValue', false)
+}
+</script>
+
+<template>
+  <BaseModal
+    :model-value="modelValue"
+    :title="title"
+    :size="size"
+    @update:model-value="(v) => !loading && emit('update:modelValue', v)"
+  >
+    <form class="edit-modal__form" @submit.prevent="emit('submit')">
+      <div class="edit-modal__body"><slot /></div>
+    </form>
+
+    <template #footer>
+      <BaseButton variant="secondary" type="button" @click="close">
+        <template #icon><X :size="16" /></template>
+        {{ cancelLabel }}
+      </BaseButton>
+      <BaseButton :variant="submitVariant" type="button" @click="emit('submit')">
+        <template #icon><Save :size="16" /></template>
+        {{ loading ? '…' : submitLabel }}
+      </BaseButton>
+    </template>
+  </BaseModal>
+</template>

package/src/components/FontUpload.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Type, X } from '@lucide/vue'
+
+// Subida de fuente con arrastrar-y-soltar o clic (hermano de ImageUpload):
+// TODA la zona abre el diálogo; el fichero elegido se muestra con nombre y
+// tamaño. Controlado por v-model (File | null). Agnóstico de i18n (DC-29).
+const props = withDefaults(
+  defineProps<{
+    modelValue: File | null
+    label?: string
+    accept?: string
+    maxSize?: number // MB
+    error?: string
+    dragText?: string
+    hintText?: string
+    tooLargeText?: string
+    invalidTypeText?: string
+  }>(),
+  {
+    label: '',
+    accept: '.woff2,.woff,.ttf,.otf',
+    maxSize: 4,
+    dragText: 'Arrastra una fuente o haz clic',
+    hintText: '',
+    tooLargeText: 'El archivo es demasiado grande.',
+    invalidTypeText: 'Formato de archivo no válido.',
+  },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [File | null] }>()
+
+const isDragging = ref(false)
+const localError = ref<string | null>(null)
+const fileInputRef = ref<HTMLInputElement>()
+
+const shownError = computed(() => props.error || localError.value)
+
+const extensions = computed(() =>
+  props.accept.split(',').map((ext) => ext.trim().toLowerCase().replace(/^\./, '')),
+)
+
+function sizeLabel(file: File): string {
+  const kb = file.size / 1024
+  return kb >= 1024 ? `${(kb / 1024).toFixed(1)} MB` : `${Math.max(1, Math.round(kb))} KB`
+}
+
+function handleFile(file: File) {
+  const extension = file.name.split('.').pop()?.toLowerCase() ?? ''
+  if (!extensions.value.includes(extension)) {
+    localError.value = props.invalidTypeText
+    return
+  }
+  if (file.size > props.maxSize * 1024 * 1024) {
+    localError.value = props.tooLargeText
+    return
+  }
+  localError.value = null
+  emit('update:modelValue', file)
+}
+
+function onFileChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  if (input.files?.[0]) handleFile(input.files[0])
+  if (input) input.value = ''
+}
+
+function onDrop(event: DragEvent) {
+  isDragging.value = false
+  if (event.dataTransfer?.files?.[0]) handleFile(event.dataTransfer.files[0])
+}
+
+function clear() {
+  localError.value = null
+  emit('update:modelValue', null)
+}
+
+function openDialog() {
+  fileInputRef.value?.click()
+}
+</script>
+
+<template>
+  <div class="font-upload">
+    <span v-if="label" class="font-upload__label">{{ label }}</span>
+    <div
+      class="font-upload__zone"
+      :class="{
+        'font-upload__zone--dragging': isDragging,
+        'font-upload__zone--error': shownError,
+        'font-upload__zone--has-file': modelValue,
+      }"
+      @dragover.prevent="isDragging = true"
+      @dragleave="isDragging = false"
+      @drop.prevent="onDrop"
+      @click="openDialog"
+    >
+      <input
+        ref="fileInputRef"
+        type="file"
+        :accept="accept"
+        class="font-upload__input"
+        @change="onFileChange"
+      />
+
+      <Type class="font-upload__icon" :size="20" />
+
+      <template v-if="modelValue">
+        <span class="font-upload__name">{{ modelValue.name }}</span>
+        <span class="font-upload__size">{{ sizeLabel(modelValue) }}</span>
+        <button class="font-upload__remove" type="button" @click.stop="clear">
+          <X :size="14" />
+        </button>
+      </template>
+
+      <template v-else>
+        <span class="font-upload__text">{{ dragText }}</span>
+        <span v-if="hintText" class="font-upload__hint">{{ hintText }}</span>
+      </template>
+    </div>
+    <p v-if="shownError" class="font-upload__error">{{ shownError }}</p>
+  </div>
+</template>

package/src/components/IconButton.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// Botón de icono. En reposo usa el color del texto; en hover tiñe el icono
+// (stroke) y un fondo semitransparente con el color de la variante.
+withDefaults(
+  defineProps<{
+    variant?: 'neutral' | 'accent' | 'danger' | 'success' | 'warning' | 'info'
+    title?: string
+    type?: 'button' | 'submit'
+  }>(),
+  { variant: 'neutral', type: 'button' },
+)
+</script>
+
+<template>
+  <button
+    :type="type"
+    class="icon-btn"
+    :class="`icon-btn--${variant}`"
+    :title="title"
+    :aria-label="title"
+  >
+    <slot />
+  </button>
+</template>

package/src/components/ImageUpload.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref } from 'vue'
+import { Trash2 } from '@lucide/vue'
+
+// Subida de imagen con arrastrar-y-soltar o clic (portado de kontuan).
+// Agnóstico de i18n: los textos van por props.
+const props = withDefaults(
+  defineProps<{
+    modelValue: File | null
+    currentUrl?: string | null
+    label?: string
+    accept?: string
+    maxSize?: number // MB
+    error?: string
+    dragText?: string
+    hintText?: string
+    tooLargeText?: string
+    invalidTypeText?: string
+  }>(),
+  {
+    currentUrl: null,
+    label: '',
+    accept: 'image/*',
+    maxSize: 4,
+    dragText: 'Arrastra una imagen o haz clic',
+    hintText: '',
+    tooLargeText: 'El archivo es demasiado grande.',
+    invalidTypeText: 'Formato de archivo no válido.',
+  },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [File | null]; remove: [] }>()
+
+const isDragging = ref(false)
+const previewUrl = ref<string | null>(null)
+const removed = ref(false)
+const localError = ref<string | null>(null)
+const fileInputRef = ref<HTMLInputElement>()
+
+const displayUrl = computed(() => (removed.value ? null : previewUrl.value || props.currentUrl))
+// El error externo (validación del servidor) manda sobre el interno.
+const shownError = computed(() => props.error || localError.value)
+
+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) {
+    localError.value = props.tooLargeText
+    return
+  }
+  if (!file.type.startsWith('image/')) {
+    localError.value = props.invalidTypeText
+    return
+  }
+  localError.value = null
+  removed.value = false
+  if (previewUrl.value) URL.revokeObjectURL(previewUrl.value)
+  previewUrl.value = URL.createObjectURL(file)
+  emit('update:modelValue', file)
+}
+
+function onFileChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  if (input.files?.[0]) handleFile(input.files[0])
+  if (input) input.value = ''
+}
+
+function onDrop(event: DragEvent) {
+  isDragging.value = false
+  if (event.dataTransfer?.files?.[0]) handleFile(event.dataTransfer.files[0])
+}
+
+function clear() {
+  if (previewUrl.value) {
+    URL.revokeObjectURL(previewUrl.value)
+    previewUrl.value = null
+  }
+  removed.value = true
+  localError.value = null
+  emit('update:modelValue', null)
+  emit('remove')
+}
+
+function openDialog() {
+  fileInputRef.value?.click()
+}
+
+onBeforeUnmount(() => {
+  if (previewUrl.value) URL.revokeObjectURL(previewUrl.value)
+})
+</script>
+
+<template>
+  <div class="image-upload">
+    <label v-if="label" class="image-upload__label">{{ label }}</label>
+    <div
+      class="image-upload__zone"
+      :class="{
+        'image-upload__zone--dragging': isDragging,
+        'image-upload__zone--error': shownError,
+        'image-upload__zone--has-image': displayUrl,
+      }"
+      @dragover.prevent="isDragging = true"
+      @dragleave="isDragging = false"
+      @drop.prevent="onDrop"
+      @click="!displayUrl && openDialog()"
+    >
+      <input
+        ref="fileInputRef"
+        type="file"
+        :accept="accept"
+        class="image-upload__input"
+        @change="onFileChange"
+      />
+
+      <template v-if="displayUrl">
+        <img :src="displayUrl" class="image-upload__preview" alt="" />
+        <button class="image-upload__remove" type="button" @click.stop="clear">
+          <Trash2 :size="16" />
+        </button>
+      </template>
+
+      <template v-else>
+        <div class="image-upload__placeholder">
+          <svg
+            class="image-upload__icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
+            <rect x="3" y="3" width="18" height="18" rx="3" />
+            <circle cx="8.5" cy="8.5" r="1.5" />
+            <path d="m21 15-5-5L5 21" />
+          </svg>
+          <span class="image-upload__text">{{ dragText }}</span>
+          <span v-if="hintText" class="image-upload__hint">{{ hintText }}</span>
+        </div>
+      </template>
+    </div>
+    <p v-if="shownError" class="image-upload__error">{{ shownError }}</p>
+  </div>
+</template>

package/src/components/LocaleSelector.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ChevronDown } from '@lucide/vue'
+
+interface Locale {
+  code: string
+  name: string
+}
+
+// Selector de idioma de contenido. Controlado por v-model (código de locale).
+// Adaptado de kontuan pero sin vue-i18n: la lista de locales se pasa por props
+// (la sirve la API del motor).
+const props = defineProps<{
+  modelValue: string
+  locales: Locale[]
+}>()
+
+const emit = defineEmits<{ 'update:modelValue': [code: string] }>()
+
+const open = ref(false)
+const dropdownRef = ref<HTMLElement>()
+
+function selectLocale(code: string) {
+  emit('update:modelValue', code)
+  open.value = false
+}
+
+function handleClickOutside(e: MouseEvent) {
+  if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {
+    open.value = false
+  }
+}
+
+onMounted(() => document.addEventListener('click', handleClickOutside))
+onBeforeUnmount(() => document.removeEventListener('click', handleClickOutside))
+</script>
+
+<template>
+  <div ref="dropdownRef" class="locale-selector">
+    <button type="button" class="locale-trigger" @click="open = !open">
+      {{ props.modelValue.toUpperCase() }}
+      <ChevronDown class="locale-chevron" :size="14" />
+    </button>
+    <Transition name="dropdown">
+      <div v-if="open" class="locale-dropdown">
+        <button
+          v-for="loc in locales"
+          :key="loc.code"
+          type="button"
+          :class="['locale-option', { active: props.modelValue === loc.code }]"
+          @click="selectLocale(loc.code)"
+        >
+          <span class="locale-code">{{ loc.code.toUpperCase() }}</span>
+          <span class="locale-label">{{ loc.name }}</span>
+        </button>
+      </div>
+    </Transition>
+  </div>
+</template>

package/src/components/MotorBadge.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+// Componente de prueba de cableado: muestra que el front consume @edc-motor/ui.
+withDefaults(
+  defineProps<{
+    label?: string
+    version?: string
+  }>(),
+  { label: 'EdC', version: '' },
+)
+</script>
+
+<template>
+  <span class="edc-badge">
+    <span class="edc-badge__dot" />
+    {{ label }}<template v-if="version"> · v{{ version }}</template>
+  </span>
+</template>

package/src/components/NumericInput.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Minus, Plus } from '@lucide/vue'
+
+// Campo numérico con botones -/+ (portado de kontuan). Por defecto acepta solo
+// enteros ≥ 0 (estadísticas de cartas, costes…). Para decimales: :integer="false".
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number | null
+    label?: string
+    placeholder?: string
+    error?: string
+    hint?: string
+    disabled?: boolean
+    required?: boolean
+    id?: string
+    min?: number
+    max?: number
+    step?: number
+    integer?: boolean
+  }>(),
+  { modelValue: 0, disabled: false, required: false, min: 0, step: 1, integer: true },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [value: number] }>()
+
+const inputId = props.id || `num-${Math.random().toString(36).slice(2, 9)}`
+const numericValue = computed(() => props.modelValue ?? props.min ?? 0)
+const canDecrement = computed(
+  () => !props.disabled && (props.min === undefined || numericValue.value > props.min),
+)
+const canIncrement = computed(
+  () => !props.disabled && (props.max === undefined || numericValue.value < props.max),
+)
+
+function clamp(value: number): number {
+  let v = props.integer ? Math.trunc(value) : value
+  if (props.min !== undefined) v = Math.max(props.min, v)
+  if (props.max !== undefined) v = Math.min(props.max, v)
+  return v
+}
+
+function onInput(event: Event) {
+  const el = event.target as HTMLInputElement
+  const raw = el.value
+  if (raw === '') {
+    emit('update:modelValue', props.min ?? 0)
+    return
+  }
+  const parsed = Number(raw)
+  if (isNaN(parsed)) {
+    el.value = String(numericValue.value)
+    return
+  }
+  const next = clamp(parsed)
+  emit('update:modelValue', next)
+  // Fuerza el campo a mostrar el valor saneado aunque el modelo no cambie
+  // (p. ej. teclear "-4" con min 0 -> el modelo sigue en 0 pero el DOM mostraba -4).
+  if (el.value !== String(next)) el.value = String(next)
+}
+function onBlur(event: Event) {
+  const el = event.target as HTMLInputElement
+  const next = clamp(numericValue.value)
+  emit('update:modelValue', next)
+  el.value = String(next)
+}
+function decrement() {
+  if (canDecrement.value) emit('update:modelValue', clamp(numericValue.value - props.step))
+}
+function increment() {
+  if (canIncrement.value) emit('update:modelValue', clamp(numericValue.value + props.step))
+}
+</script>
+
+<template>
+  <div class="form-field" :class="{ 'form-field--error': error }">
+    <label v-if="label" :for="inputId" class="form-field__label">
+      {{ label }}<span v-if="required" class="form-field__required">*</span>
+    </label>
+    <div class="numeric-input" :class="{ 'numeric-input--disabled': disabled }">
+      <button
+        type="button"
+        class="numeric-input__btn"
+        :disabled="!canDecrement"
+        tabindex="-1"
+        @click="decrement"
+      >
+        <Minus :size="14" />
+      </button>
+      <input
+        :id="inputId"
+        type="text"
+        inputmode="numeric"
+        :value="modelValue ?? ''"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :required="required"
+        class="numeric-input__field"
+        @input="onInput"
+        @blur="onBlur"
+      />
+      <button
+        type="button"
+        class="numeric-input__btn"
+        :disabled="!canIncrement"
+        tabindex="-1"
+        @click="increment"
+      >
+        <Plus :size="14" />
+      </button>
+    </div>
+    <p v-if="error" class="form-field__error">{{ error }}</p>
+    <p v-else-if="hint" class="form-field__hint">{{ hint }}</p>
+  </div>
+</template>

package/src/components/PaletteColorPicker.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { Check, Pipette } from '@lucide/vue'
+
+// Selector de color (portado/adaptado de kontuan). A diferencia de kontuan
+// (que guarda la clave de la paleta), aquí emite el HEX directamente, para
+// campos de color guardados como cadena hexadecimal.
+const props = withDefaults(
+  defineProps<{
+    modelValue: string | null
+    label?: string
+    allowCustom?: boolean
+  }>(),
+  { allowCustom: true },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+
+// Paleta base (mismos tonos que kontuan).
+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' },
+]
+
+const norm = (v: string | null) => (v ?? '').toLowerCase()
+const isPreset = computed(() => PALETTE.some((c) => norm(c.hex) === norm(props.modelValue)))
+const isCustom = computed(() => !!props.modelValue && !isPreset.value)
+
+const customHex = ref(isCustom.value ? (props.modelValue as string) : '#FF7A00')
+watch(
+  () => props.modelValue,
+  (v) => {
+    if (v && !PALETTE.some((c) => norm(c.hex) === norm(v))) customHex.value = v
+  },
+)
+
+function onCustomInput(event: Event) {
+  const value = (event.target as HTMLInputElement).value
+  customHex.value = value
+  emit('update:modelValue', value)
+}
+</script>
+
+<template>
+  <div class="palette-color-picker">
+    <label v-if="label" class="palette-color-picker__label">{{ label }}</label>
+    <div class="palette-color-picker__grid">
+      <button
+        v-for="opt in PALETTE"
+        :key="opt.hex"
+        type="button"
+        class="palette-color-picker__swatch"
+        :class="{ 'palette-color-picker__swatch--selected': norm(modelValue) === norm(opt.hex) }"
+        :style="{ '--swatch-color': opt.hex }"
+        :title="opt.name"
+        @click="emit('update:modelValue', opt.hex)"
+      >
+        <Check
+          v-if="norm(modelValue) === norm(opt.hex)"
+          class="palette-color-picker__swatch-check"
+          :size="14"
+        />
+      </button>
+
+      <label
+        v-if="allowCustom"
+        class="palette-color-picker__swatch palette-color-picker__swatch--custom"
+        :class="{
+          'palette-color-picker__swatch--selected': isCustom,
+          'palette-color-picker__swatch--custom-idle': !isCustom,
+        }"
+        :style="isCustom ? { '--swatch-color': customHex } : undefined"
+      >
+        <input
+          type="color"
+          class="palette-color-picker__swatch-input"
+          :value="customHex"
+          @input="onCustomInput"
+        />
+        <Check v-if="isCustom" class="palette-color-picker__swatch-check" :size="14" />
+        <Pipette v-else class="palette-color-picker__swatch-pipette" :size="14" />
+      </label>
+    </div>
+  </div>
+</template>