@udeco/ivo-library

Libreria de componentes Vue 3 para la creacion de recursos educativos digitales interactivos (OVA/REA).

Desarrollada por el area de produccion de recursos digitales de la Universidad de Cundinamarca.

Instalacion

npm install @udeco/ivo-library

Dependencias de par (peerDependencies)

La libreria requiere que el proyecto consumidor provea:

npm install vue gsap howler
# Opcionales segun lo que uses:
npm install pinia jspdf @vueuse/head

Uso rapido

Como plugin global (registra todos los componentes)

// main.js
import { createApp } from 'vue'
import { IvoPlugin } from '@udeco/ivo-library'
import '@udeco/ivo-library/styles'
import App from './App.vue'

const app = createApp(App)
app.use(IvoPlugin)
app.mount('#app')

Con imports individuales (tree-shaking)

import { IvoStage, IvoButton, IvoQuiz, ivo } from '@udeco/ivo-library'
import '@udeco/ivo-library/styles'

Inicializacion de recursos

Antes de montar la aplicacion, precarga audios e imagenes:

import { loadRecursos, ivo } from '@udeco/ivo-library'
import logo from './assets/logo.svg'

// Mostrar pantalla de carga
ivo.preloader.show(logo)

await loadRecursos({
  audioList: [
    { name: 'click',     url: '/audio/click.mp3' },
    { name: 'narracion', url: '/audio/narracion.mp3' },
  ],
  imagesList: [
    { name: 'fondo',  url: '/images/fondo.jpg' },
  ],
  onProgress: (percent) => console.log(percent + '%'),
  onComplete: () => ivo.preloader.hide(),
})

Componentes disponibles

| Componente | Descripcion | | ----------------- | ---------------------------------------------------- | | IvoStage | Contenedor de escena (fondo, imagen de fondo) | | IvoText | Texto posicionable absolutamente | | IvoButton | Orquestador de botones (imagen o audio) | | IvoButtonImage | Boton con imagen, con soporte para hover | | IvoButtonAudio | Boton que reproduce audio + barra de progreso | | IvoModal | Modal animado con GSAP, soporta imagen de fondo | | IvoVideo | Reproductor de video (YouTube o local) | | IvoCard180 | Tarjeta con efecto de volteo 180 grados | | IvoSelect | Dropdown personalizado con v-model | | IvoInput | Input de texto estilizado | | IvoTable | Tabla de datos estilizada | | IvoStepper | Navegador de pasos | | IvoQuiz | Orquestador de actividades interactivas | | IvoAccesibilidad| Panel flotante: contraste, narrador, linterna | | IvoRotateMovil | Pantalla de rotacion para moviles | | IvoCreditos | Panel de creditos del recurso | | IvoReferencias | Panel de referencias bibliograficas | | IvoEnv | Indicador de entorno (dev / preprod / prod) | | IvoDebug | Panel de debug con info del sistema |

Tipos de quiz disponibles via IvoQuiz

| config.tipo | Descripcion | | -------------------------------- | ------------------------------ | | IvoSingleChoiceQuestion | Seleccion unica o multiple | | IvoFillText | Completar texto con espacios | | IvoDragDropSimple | Arrastrar y soltar simple | | IvoDragDropCategories | Clasificar en categorias | | IvoDragDropCategoriesRelation | Relacionar elementos | | IvoMemory | Juego de memoria | | IvoHangman | Ahorcado |

Objeto ivo

Punto de acceso central a audio, imagenes, preloader y narrador.

import { ivo } from '@udeco/ivo-library'

// Audio
ivo.audio.play('narracion', () => console.log('audio terminado'))
ivo.audio.stop('narracion')
ivo.audio.isPlaying('narracion')  // boolean
ivo.audio.getDuration('narracion') // segundos

// Imagen
ivo.image.get('fondo')   // URL de la imagen
ivo.image.getAll()       // objeto con todas las imagenes

// Preloader
ivo.preloader.show('/logo.svg')
ivo.preloader.hide()

// Narrador (accesibilidad)
ivo.narrador.leer()             // activa/detiene lectura en voz alta
ivo.narrador.estado.value       // boolean reactivo
ivo.narrador.resaltado.value    // boolean - resaltar elementos al leer

Composables

import { useAnimation, useUserAgent, useMetadata } from '@udeco/ivo-library'

// Animaciones Animate.css
const anim = useAnimation('bounce', { duration: '0.5s' })
anim.play()
// En el template: <div v-bind="anim.bind.value">...</div>

// Deteccion de navegador
const { browser, version, os, browserInfo } = useUserAgent()

// Metadatos (Dublin Core + Open Graph)
import pkg from '../package.json'
useMetadata(pkg.dublinCore, {
  image: 'https://mi-dominio.com/og-image.jpg',
  url:   'https://mi-dominio.com/recurso',
})

Exportar PDF

import { exportarPDF } from '@udeco/ivo-library'

await exportarPDF({
  titulo:    'Reporte de Actividad',
  subtitulo: 'Estudiante: Maria Garcia',
  archivo:   'reporte-maria',
  logo:      '/images/logo-institucional.svg',
  secciones: [
    {
      titulo: 'Datos Personales',
      campos: [
        { label: 'Nombre',   valor: 'Maria Garcia' },
        { label: 'Correo',   valor: '[email protected]' },
        { label: 'Programa', valor: 'Ingenieria de Sistemas' },
      ],
    },
  ],
})

Build de la libreria

cd npm_project
npm install
npm run build

El resultado queda en dist/:

• ivo-library.es.js — ES modules (para Vite/bundlers modernos)
• ivo-library.umd.js — UMD (para uso directo en navegador)
• ivo-library.css — Estilos de la libreria

Migracion de componentes

Algunos componentes Vue (los tipos de quiz complejos y otros componentes base) deben migrarse desde el proyecto fuente ejecutando:

# Desde la raiz del proyecto (c:/Recursos/library)
node npm_project/scripts/migrate-components.js

Esto copia y adapta automaticamente los archivos necesarios.

Documentacion de componentes

Ver la carpeta docs/components/ para la referencia completa de cada componente con props, eventos y ejemplos.

Licencia

MIT — Universidad de Cundinamarca, Oficina de Educacion Virtual y a Distancia.