@edc-motor/ui 0.2.0

package/src/components/TranslatableInput.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, defineAsyncComponent } from 'vue'
+import { ChevronDown } from '@lucide/vue'
+import type { RichTextLabels } from './RichTextInput.vue'
+
+// Editor WYSIWYG cargado en diferido: TipTap solo se descarga si algún campo
+// traducible usa type="wysiwyg".
+const RichTextInput = defineAsyncComponent(() => import('./RichTextInput.vue'))
+
+// Campo traducible (portado de kontuan): usa el estilo `.form-field` y un
+// selector desplegable de locale con contador de rellenados.
+interface Locale {
+  code: string
+  name: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: Record<string, string>
+    locales: Locale[]
+    label?: string
+    type?: 'text' | 'textarea' | 'wysiwyg'
+    placeholder?: string
+    rows?: number
+    required?: boolean
+    error?: string
+    id?: string
+    /** Iconos del juego para el selector del editor (solo type="wysiwyg"). */
+    icons?: { name: string; url: string }[]
+    /** Textos de la barra del editor (solo type="wysiwyg"), DC-29. */
+    richLabels?: Partial<RichTextLabels>
+  }>(),
+  {
+    modelValue: () => ({}),
+    type: 'text',
+    rows: 4,
+    required: false,
+    icons: () => [],
+    richLabels: () => ({}),
+  },
+)
+
+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 inputId = props.id || `translatable-${Math.random().toString(36).slice(2, 9)}`
+
+const currentValue = computed(() => props.modelValue?.[active.value] || '')
+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 update(value: string) {
+  emit('update:modelValue', { ...props.modelValue, [active.value]: value })
+}
+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">
+      <label v-if="label" :for="`${inputId}-${active}`" class="form-field__label">
+        {{ label }}<span v-if="required" class="form-field__required">*</span>
+      </label>
+      <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>
+
+    <RichTextInput
+      v-if="type === 'wysiwyg'"
+      :key="active"
+      :model-value="currentValue"
+      :placeholder="placeholder"
+      :icons="icons"
+      :labels="richLabels"
+      @update:model-value="update"
+    />
+    <textarea
+      v-else-if="type === 'textarea'"
+      :id="`${inputId}-${active}`"
+      :value="currentValue"
+      :placeholder="placeholder"
+      :rows="rows"
+      class="form-field__textarea"
+      @input="update(($event.target as HTMLTextAreaElement).value)"
+    />
+    <input
+      v-else
+      :id="`${inputId}-${active}`"
+      type="text"
+      :value="currentValue"
+      :placeholder="placeholder"
+      class="form-field__input"
+      @input="update(($event.target as HTMLInputElement).value)"
+    />
+
+    <p v-if="error" class="form-field__error">{{ error }}</p>
+  </div>
+</template>

package/src/composables/useConfirm.ts

@@ -0,0 +1,49 @@
+import { reactive } from 'vue'
+
+export interface ConfirmOptions {
+  title?: string
+  message: string
+  confirmLabel?: string
+  cancelLabel?: string
+  variant?: 'primary' | 'danger' | 'success'
+}
+
+interface ConfirmState extends Required<Omit<ConfirmOptions, 'message'>> {
+  open: boolean
+  message: string
+  resolver: ((value: boolean) => void) | null
+}
+
+const state = reactive<ConfirmState>({
+  open: false,
+  title: '',
+  message: '',
+  confirmLabel: 'Confirmar',
+  cancelLabel: 'Cancelar',
+  variant: 'primary',
+  resolver: null,
+})
+
+export function useConfirm() {
+  /** Muestra un diálogo de confirmación y resuelve a true/false. */
+  function confirm(options: ConfirmOptions): Promise<boolean> {
+    return new Promise((resolve) => {
+      // Si había otro diálogo pendiente, se resuelve como cancelado para no
+      // dejar su promesa colgada para siempre.
+      state.resolver?.(false)
+      state.open = true
+      state.title = options.title ?? ''
+      state.message = options.message
+      state.confirmLabel = options.confirmLabel ?? 'Confirmar'
+      state.cancelLabel = options.cancelLabel ?? 'Cancelar'
+      state.variant = options.variant ?? 'primary'
+      state.resolver = resolve
+    })
+  }
+  function resolve(value: boolean) {
+    state.open = false
+    state.resolver?.(value)
+    state.resolver = null
+  }
+  return { state, confirm, resolve }
+}

package/src/composables/useHead.ts

@@ -0,0 +1,54 @@
+// SEO de la SPA pública (doc 10, DC-18): fija <title>, meta description,
+// canonical y alternates hreflang de la ruta actual manipulando el <head>.
+// Sin dependencias: cada vista lo llama al cargar sus datos (y el prerender
+// captura el head ya resuelto).
+
+export interface HeadInput {
+  title?: string
+  description?: string
+  /** URL canónica absoluta de la ruta en el locale activo. */
+  canonical?: string
+  /** URL absoluta por locale (hreflang). */
+  alternates?: Record<string, string>
+}
+
+function upsertMeta(name: string, content: string | undefined) {
+  let tag = document.head.querySelector<HTMLMetaElement>(`meta[name="${name}"]`)
+  if (!content) {
+    tag?.remove()
+    return
+  }
+  if (!tag) {
+    tag = document.createElement('meta')
+    tag.setAttribute('name', name)
+    document.head.appendChild(tag)
+  }
+  tag.setAttribute('content', content)
+}
+
+function upsertLink(rel: string, href: string, hreflang?: string) {
+  const selector = hreflang ? `link[rel="${rel}"][hreflang="${hreflang}"]` : `link[rel="${rel}"]`
+  let tag = document.head.querySelector<HTMLLinkElement>(selector)
+  if (!tag) {
+    tag = document.createElement('link')
+    tag.setAttribute('rel', rel)
+    if (hreflang) tag.setAttribute('hreflang', hreflang)
+    document.head.appendChild(tag)
+  }
+  tag.setAttribute('href', href)
+}
+
+export function useHead(input: HeadInput): void {
+  if (input.title !== undefined) document.title = input.title
+  upsertMeta('description', input.description)
+
+  // Canonical y alternates se reponen enteros en cada ruta (los sobrantes
+  // de la ruta anterior se retiran).
+  document.head
+    .querySelectorAll('link[rel="canonical"], link[rel="alternate"][hreflang]')
+    .forEach((tag) => tag.remove())
+  if (input.canonical) upsertLink('canonical', input.canonical)
+  for (const [locale, href] of Object.entries(input.alternates ?? {})) {
+    upsertLink('alternate', href, locale)
+  }
+}

package/src/composables/useTheme.ts

@@ -0,0 +1,50 @@
+import { ref, watch, onMounted, onUnmounted } from 'vue'
+
+// Modo de tema. 'system' sigue la preferencia del SO. Copiado de kontuan.
+export type ThemeMode = 'light' | 'dark' | 'system'
+
+function storedTheme(): ThemeMode {
+  // Guarda ante entornos sin window (prerender en build, DC-18).
+  if (typeof window === 'undefined') return 'dark'
+  return (localStorage.getItem('theme') as ThemeMode) || 'dark'
+}
+
+const themeMode = ref<ThemeMode>(storedTheme())
+
+function getSystemTheme(): 'light' | 'dark' {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+function applyTheme(mode: ThemeMode) {
+  const resolved = mode === 'system' ? getSystemTheme() : mode
+  document.documentElement.setAttribute('data-theme', resolved)
+}
+
+export function useTheme() {
+  function setTheme(mode: ThemeMode) {
+    themeMode.value = mode
+    localStorage.setItem('theme', mode)
+    applyTheme(mode)
+  }
+
+  watch(themeMode, (mode) => applyTheme(mode))
+
+  const media =
+    typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)') : null
+  const onSystemChange = () => {
+    if (themeMode.value === 'system') {
+      applyTheme('system')
+    }
+  }
+
+  onMounted(() => {
+    applyTheme(themeMode.value)
+    media?.addEventListener('change', onSystemChange)
+  })
+
+  onUnmounted(() => {
+    media?.removeEventListener('change', onSystemChange)
+  })
+
+  return { themeMode, setTheme }
+}

package/src/composables/useToast.ts

@@ -0,0 +1,26 @@
+import { reactive } from 'vue'
+
+export interface Toast {
+  id: number
+  variant: 'success' | 'warning' | 'danger' | 'info'
+  message: string
+  duration: number
+}
+
+const toasts = reactive<Toast[]>([])
+let nextId = 0
+
+export function useToast() {
+  function add(message: string, variant: Toast['variant'] = 'info', duration = 4000) {
+    toasts.push({ id: nextId++, variant, message, duration })
+  }
+  function remove(id: number) {
+    const i = toasts.findIndex((t) => t.id === id)
+    if (i > -1) toasts.splice(i, 1)
+  }
+  const success = (m: string) => add(m, 'success')
+  const warning = (m: string) => add(m, 'warning')
+  const danger = (m: string) => add(m, 'danger')
+  const info = (m: string) => add(m, 'info')
+  return { toasts, add, remove, success, warning, danger, info }
+}

package/src/index.ts

@@ -0,0 +1,39 @@
+// @edc-motor/ui — librería de componentes base + tokens + utilidades del motor.
+
+import { defineAsyncComponent } from 'vue'
+
+export { default as BaseButton } from './components/BaseButton.vue'
+export { default as IconButton } from './components/IconButton.vue'
+export { default as MotorBadge } from './components/MotorBadge.vue'
+export { default as BaseInput } from './components/BaseInput.vue'
+export { default as BaseTextarea } from './components/BaseTextarea.vue'
+export { default as BaseSelect, type SelectOption } from './components/BaseSelect.vue'
+export { default as SearchSelect, type SearchSelectOption } from './components/SearchSelect.vue'
+export { default as BaseCheckbox } from './components/BaseCheckbox.vue'
+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'
+// 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'))
+export type { RichIcon, RichTextLabels } from './components/RichTextInput.vue'
+export { default as ImageUpload } from './components/ImageUpload.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'
+export { default as BaseTabs } from './components/BaseTabs.vue'
+export { default as BaseToast } from './components/BaseToast.vue'
+export { default as ToastContainer } from './components/ToastContainer.vue'
+export { default as ConfirmDialog } from './components/ConfirmDialog.vue'
+export { default as ThemeSelector } from './components/ThemeSelector.vue'
+export { default as LocaleSelector } from './components/LocaleSelector.vue'
+export { default as AppBreadcrumbs, type Crumb } from './components/AppBreadcrumbs.vue'
+export { createApi, type CreateApiOptions } from './lib/createApi'
+export { useToast, type Toast } from './composables/useToast'
+export { useConfirm, type ConfirmOptions } from './composables/useConfirm'
+export { useTheme, type ThemeMode } from './composables/useTheme'
+export { useHead, type HeadInput } from './composables/useHead'
+
+// Bloques de presentación del CRM (doc 03).
+export * from './blocks'

package/src/lib/createApi.ts

@@ -0,0 +1,42 @@
+import axios, { type AxiosInstance } from 'axios'
+
+export interface CreateApiOptions {
+  /** URL base de la API (p. ej. http://localhost:8010/api). */
+  baseURL: string
+  /** Clave de localStorage donde se guarda el token. */
+  tokenKey: string
+  /** Se invoca cuando la API responde 401 (token inválido/expirado). */
+  onUnauthorized?: () => void
+}
+
+/**
+ * Crea una instancia de axios con el token Bearer inyectado desde localStorage
+ * y manejo de 401. Patrón compartido entre admin y app (estilo kontuan).
+ */
+export function createApi(options: CreateApiOptions): AxiosInstance {
+  const api = axios.create({
+    baseURL: options.baseURL,
+    headers: { Accept: 'application/json' },
+  })
+
+  api.interceptors.request.use((config) => {
+    const token = localStorage.getItem(options.tokenKey)
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+    return config
+  })
+
+  api.interceptors.response.use(
+    (response) => response,
+    (error) => {
+      if (error.response?.status === 401) {
+        localStorage.removeItem(options.tokenKey)
+        options.onUnauthorized?.()
+      }
+      return Promise.reject(error)
+    },
+  )
+
+  return api
+}