@tecso/is-componentes

Librería de componentes Vue reutilizables, compatibles con Vue 2.6+, Vue 3, Nuxt 2 y Nuxt 3. Diseñada para usarse en cualquier proyecto instalando el paquete vía npm y configurando colores, tipografía, bordes y eventos mediante props.

Estructura del paquete

is_componentes/
├── src/
│   ├── theme/           # Tema por defecto (colores, tipografía, espaciado)
│   ├── utils/           # Utilidades (merge de estilos)
│   ├── types.ts         # Tipos compartidos (StyleProps, Size, etc.)
│   ├── index.ts         # Entrada principal e install()
│   └── Projects/
│       └── soat/        # Proyecto SOAT (también: vida, vehicular, viajes)
│           ├── buttons/
│           ├── cards/
│           ├── modals/
│           ├── sections/
│           ├── inputs/
│           ├── labels/
│           ├── badges/
│           └── tables/
├── package.json
├── vite.config.ts
└── README.md

Cada componente es altamente parametrizable: colores, fondos, fuente, border-radius, padding, sombras y eventos propios (click, focus, blur, etc.). Si no pasas parámetros, se usan los colores y estilos base por defecto del tema.

Tema por defecto (Figma Boceteo)

El tema base está extraído del Figma Boceteo (archivo del proyecto):

• Colores: primario #0855c4, texto #2f3033, fondo blanco.
• Fuentes: Geist (títulos y botón CTA principal), Inter (labels, cuerpo, botones tipo “Editar”).
• Botón CTA: fondo #0855c4, texto blanco, Geist Bold 16px, border-radius 8px.
• Labels: Inter Regular 16px, color #2f3033.

Para que se vean igual que en Figma, carga Geist e Inter en tu app (Google Fonts, npm o tu propio hosting).

Cómo publicar el paquete en npm

1. Cuenta en npm

• Crea una cuenta en npmjs.com si no tienes.
• En terminal: npm login e inicia sesión.

2. Nombre del paquete

• El nombre en package.json es @tecso/is-componentes.
• Para publicar bajo el scope @tecso necesitas ser miembro de la org tecso en npm o cambiar el nombre a algo único sin scope (ej: is-componentes-tecso).

Si usas scope de organización:

npm login
cd is_componentes
npm run build
npm publish --access public

Si cambias a un nombre sin scope (para evitar crear org):

• En package.json: "name": "is-componentes-tecso" (o el nombre que elijas).
• Luego: npm publish.

3. Versiones

• Primera publicación: 1.0.0.
• Para actualizar: npm version patch (1.0.1), minor (1.1.0) o major (2.0.0), y después npm publish.

4. Entorno recomendado (Node y nvm)

El proyecto incluye un archivo .nvmrc con la versión de Node recomendada (20). Si usas nvm:

cd is_componentes
nvm use
# o: nvm use 20

5. Comandos útiles

# Instalar dependencias
npm install

# Compilar
npm run build

# Publicar (tras npm login)
npm publish --access public

Cómo instalar en un proyecto

En tu proyecto Vue o Nuxt:

# Vue 2 / Nuxt 2
npm install @tecso/is-componentes vue-demi

# Vue 3 / Nuxt 3
npm install @tecso/is-componentes

En proyectos Vue 2.6 puede ser necesario instalar Composition API:

npm install @vue/composition-api

Y registrarla antes de usar la librería:

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

Uso en la aplicación

Registro global (recomendado para usar como “Bootstrap”)

Vue 3 / Nuxt 3:

// main.js o plugins/is-componentes.client.js
import { createApp } from 'vue'
import App from './App.vue'
import IsComponentes from '@tecso/is-componentes'

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

Vue 2:

import Vue from 'vue'
import IsComponentes from '@tecso/is-componentes'

Vue.use(IsComponentes)

Nuxt 2: crea plugins/is-componentes.js:

import Vue from 'vue'
import IsComponentes from '@tecso/is-componentes'

Vue.use(IsComponentes)

En nuxt.config.js:

export default {
  plugins: ['~/plugins/is-componentes.js'],
}

Nuxt 3: en plugins/is-componentes.client.ts:

import IsComponentes from '@tecso/is-componentes'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(IsComponentes)
})

Uso de componentes en plantillas

Tras el registro global puedes usar directamente:

<template>
  <IsButton variant="primary" size="md" @click="handleClick">
    Continuar
  </IsButton>

  <IsCard :padding="'1.5rem'">
    <IsCardHeader>SOAT Digital</IsCardHeader>
    <IsCardContent>Contenido de la tarjeta.</IsCardContent>
  </IsCard>

  <IsModal v-model="showModal" title="Título">
    Contenido del modal.
  </IsModal>

  <IsSection title="Sección">
    Contenido de la sección.
  </IsSection>

  <IsLabel for="nombre">Nombre</IsLabel>
  <IsInput id="nombre" v-model="nombre" placeholder="Escribe tu nombre" />

  <IsBadge variant="success">Activo</IsBadge>

  <IsTable :columns="columns" :data="rows" row-key="id" />
</template>

<script setup>
import { ref } from 'vue'

const showModal = ref(false)
const nombre = ref('')
const columns = [
  { key: 'id', label: 'ID' },
  { key: 'name', label: 'Nombre' },
]
const rows = ref([
  { id: 1, name: 'Ejemplo' },
])
function handleClick() {
  console.log('click')
}
</script>

Importación por componente (tree-shaking)

Si no usas el plugin global:

<script setup>
import { IsButton, IsCard, IsCardHeader, IsCardContent } from '@tecso/is-componentes'
</script>

<template>
  <IsButton variant="primary">Botón</IsButton>
  <IsCard>
    <IsCardHeader>Título</IsCardHeader>
    <IsCardContent>Contenido</IsCardContent>
  </IsCard>
</template>

Parametrización de estilos

Casi todos los componentes aceptan props de estilo que sobrescriben el tema por defecto:

| Prop | Descripción | Ejemplo | |------|-------------|---------| | backgroundColor | Fondo | #2563eb | | color | Texto | #ffffff | | borderColor | Borde | #e2e8f0 | | borderWidth | Grosor del borde | 1px | | borderRadius | Radio del borde | 0.5rem | | fontFamily | Fuente | 'Inter', sans-serif | | fontSize | Tamaño de fuente | 1rem | | fontWeight | Peso | 600 | | padding | Padding | 0.5rem 1rem | | boxShadow | Sombra | 0 4px 6px rgba(0,0,0,0.1) | | class | Clases CSS extra | mi-clase | | style | Objeto de estilos inline | { maxWidth: '200px' } |

Ejemplo: botón con estilos custom

<IsButton
  variant="primary"
  backgroundColor="#22c55e"
  color="#fff"
  borderRadius="0.75rem"
  @click="save"
>
  Guardar
</IsButton>

Tema por defecto

Puedes inspeccionar o reutilizar el tema base:

import { defaultTheme } from '@tecso/is-componentes'

console.log(defaultTheme.colors.primary)   // '#2563eb'
console.log(defaultTheme.typography.fontSize)
console.log(defaultTheme.borderRadius)

Componentes disponibles (Proyecto SOAT)

| Componente | Descripción | Eventos principales | |------------|-------------|----------------------| | IsButton | Botón (variantes: primary, secondary, success, danger, warning, outline, ghost; tamaños: xs, sm, md, lg) | @click | | IsCard | Contenedor tipo tarjeta | — | | IsCardHeader | Cabecera de tarjeta | — | | IsCardContent | Cuerpo de tarjeta | — | | IsModal | Modal (v-model para abrir/cerrar) | @close, update:modelValue | | IsSection | Sección con título opcional | — | | IsInput | Campo de texto (v-model) | @input, @focus, @blur | | IsLabel | Etiqueta para formularios | — | | IsBadge | Badge (variantes: primary, secondary, success, danger, warning, outline) | — | | IsTable | Tabla con columns y data o slots | — |

Compatibilidad

• Vue 2.6: requiere @vue/composition-api y vue-demi (incluido como dependencia del paquete).
• Vue 2.7+: Composition API incluida; no hace falta el plugin extra.
• Vue 3: soporte completo.
• Nuxt 2 / Nuxt 3: instalar el paquete y registrar el plugin como en los ejemplos anteriores.

Nota: IsModal usa <Teleport>, disponible en Vue 2.7+ y Vue 3. En Vue 2.6 puede ser necesario un polyfill o alternativa si no usas 2.7.

Resumen rápido

1. Publicar en npm: npm run build → npm login → npm publish --access public (y ajustar name en package.json si no usas org).
2. Instalar: npm install @tecso/is-componentes (y en Vue 2.6: vue-demi, @vue/composition-api).
3. Usar: app.use(IsComponentes) o importar componentes por nombre, y usar las props de estilo y eventos descritos arriba para adaptar cada componente a tu diseño.