is-uikit-components-vue

Descripción y propósito

Adaptador centralizado de PrimeVue 4 para la plataforma Interseguro.

• Re-exporta todos los componentes de PrimeVue con prefijo Is* (ej. IsButton, IsDataTable).
• Centraliza la configuración de tema, locale y servicios globales en un único plugin (createIsUiKitPlugin).
• Incluye el preset corporativo de PrimeVue basado en Aura (InterseguroAuraPreset) y el preset de Tailwind CSS (interseguroTailwindPreset), ambos sincronizados desde la misma fuente de verdad de tokens de color.
• Expone componentes propios de la organización bajo el subpath /org.

Versión actual: 1.0.5

Repositorio

is-pkg-crosscore-uikit-lib-vue

Requisitos

| Herramienta | Versión mínima | |---|---| | Node.js | ≥ 18 | | npm | ≥ 9 | | Vue | ^3.5.0 | | PrimeVue | ^4.5.5 |

Estructura del proyecto

is-pkg-crosscore-uikit-lib-vue/
├── src/
│   ├── adapters/                          # Adaptadores Is* generados automáticamente
│   │   ├── generated.ts                   # Re-exports de componentes PrimeVue con prefijo Is*
│   │   └── eventbus.d.ts                  # Tipado del bus de eventos de PrimeVue
│   ├── org/                               # Componentes propios de Interseguro
│   │   ├── index.ts                       # Barrel de exports del subpath /org
│   │   └── IsNavMenu.vue                  # Menú de navegación lateral corporativo
│   ├── plugin/                            # Plugin Vue principal
│   │   └── create-is-uikit-plugin.ts      # Factory del plugin e interfaz IsUiKitPluginOptions
│   ├── prime/                             # Configuración de PrimeVue
│   │   ├── default-prime-vue-options.ts   # Opciones por defecto (tema Aura, locale ES)
│   │   └── interseguro-aura-preset.ts     # Preset Aura extendido con paleta corporativa
│   ├── styles/                            # Estilos Is*Style generados automáticamente
│   │   └── generated-styles.ts            # Re-exports de estilos de componentes PrimeVue
│   ├── tailwind/                          # Integración Tailwind CSS
│   │   └── preset.ts                      # Preset Tailwind con paleta corporativa
│   ├── tokens/                            # Tokens de diseño (fuente de verdad)
│   │   └── palette.ts                     # Paleta de colores corporativos de Interseguro
│   └── index.ts                           # Entry point principal de la librería
├── scripts/
│   └── generate-adapters.mjs              # Genera adaptadores Is* leyendo primevue/index.d.ts
├── dist/                                  # Salida compilada (generada por vite build)
├── package.json
├── vite.config.ts
└── README.md

Quickstart

Instalación

npm install is-uikit-components-vue

Peer dependencies requeridas en el proyecto consumidor:

npm install vue primevue

1. Registrar el plugin en una SPA

// main.ts de cualquier microfrontend o SPA
import { createApp } from 'vue';
import { createIsUiKitPlugin } from 'is-uikit-components-vue';
import App from './App.vue';

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

2. Integrar con single-spa (handleInstance)

import { createApp, h } from 'vue';
import singleSpaVue from 'single-spa-vue';
import { createIsUiKitPlugin } from 'is-uikit-components-vue';
import App from './App.vue';

const lifecycles = singleSpaVue({
  createApp,
  appOptions: { render: () => h(App) },
  handleInstance: (app) => {
    app.use(createIsUiKitPlugin());
  },
});

export const { bootstrap, mount, unmount } = lifecycles;

3. Sobreescribir configuración por microfrontend

import { createIsUiKitPlugin } from 'is-uikit-components-vue';
import Lara from '@primevue/themes/lara';

app.use(createIsUiKitPlugin({
  primeVue: {
    theme: {
      preset: Lara,
      options: { darkModeSelector: '.my-dark' },
    },
  },
  toastService: false,   // deshabilitar servicios que el MF no usa
  dialogService: false,
}));

Configuración esencial

No requiere variables de entorno. La configuración se realiza a través de las opciones del plugin.

Opciones de createIsUiKitPlugin

| Opción | Tipo | Default | Descripción | |---|---|---|---| | primeVue | PrimeVueConfiguration | Preset Interseguro Aura | Opciones de PrimeVue (merge profundo con defaults corporativos) | | confirmationService | boolean | true | Registrar ConfirmationService globalmente | | dialogService | boolean | true | Registrar DialogService globalmente | | toastService | boolean | true | Registrar ToastService globalmente |

Exports disponibles

Componentes Is*

Todos los componentes de PrimeVue 4.5.x con prefijo Is. Las props son idénticas a las de PrimeVue; el autocompletado en el IDE es el mismo.

<script setup lang="ts">
import { IsButton, IsInputText, IsDataTable, IsColumn } from 'is-uikit-components-vue';
</script>

<template>
  <IsButton label="Guardar" severity="primary" />
  <IsInputText v-model="valor" placeholder="Escribe aquí..." />
</template>

Lista completa: Accordion, AccordionContent, AccordionHeader, AccordionPanel, AccordionTab, AutoComplete, Avatar, AvatarGroup, Badge, BadgeDirective, BlockUI, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, CascadeSelect, Checkbox, CheckboxGroup, Chip, Chips, ColorPicker, Column, ColumnGroup, ConfirmDialog, ConfirmPopup, ContextMenu, DataTable, DataView, DatePicker, DeferredContent, Dialog, Divider, Dock, Drawer, Dropdown, DynamicDialog, Fieldset, FileUpload, FloatLabel, Fluid, FocusTrap, Galleria, IconField, IftaLabel, Image, ImageCompare, InlineMessage, Inplace, InputChips, InputGroup, InputGroupAddon, InputIcon, InputMask, InputNumber, InputOtp, InputSwitch, InputText, KeyFilter, Knob, Listbox, MegaMenu, Menu, Menubar, Message, MeterGroup, MultiSelect, OrderList, OrganizationChart, OverlayBadge, OverlayPanel, Paginator, Panel, PanelMenu, Password, PickList, Popover, Portal, ProgressBar, ProgressSpinner, RadioButton, RadioButtonGroup, Rating, Ripple, Row, ScrollPanel, ScrollTop, Select, SelectButton, Sidebar, Skeleton, Slider, SpeedDial, SplitButton, Splitter, SplitterPanel, Step, StepItem, StepList, StepPanel, StepPanels, Stepper, Steps, StyleClass, Tab, TabList, TabMenu, TabPanel, TabPanels, Tabs, TabView, Tag, Terminal, Textarea, TieredMenu, Timeline, Toast, ToggleButton, ToggleSwitch, Toolbar, Tooltip, Tree, TreeSelect, TreeTable, VirtualScroller.

Estilos Is*Style

Objetos de estilo para personalización avanzada (PassThrough API de PrimeVue):

import { IsButtonStyle, IsDataTableStyle } from 'is-uikit-components-vue';

Composables de PrimeVue

import { useConfirm, useDialog, useToast, useStyle } from 'is-uikit-components-vue';

Preset corporativo PrimeVue

import { InterseguroAuraPreset } from 'is-uikit-components-vue';

Directivas

Las directivas se registran manualmente en el componente o globalmente en la app:

import { IsTooltip, IsRipple } from 'is-uikit-components-vue';

app.directive('tooltip', IsTooltip);
app.directive('ripple', IsRipple);

Subpath /org — Componentes de la organización

import { IsNavMenu } from 'is-uikit-components-vue/org';
import type { NavMenuItem } from 'is-uikit-components-vue/org';

| Componente | Descripción | |---|---| | IsNavMenu | Menú de navegación lateral corporativo |

Ver src/org/index.ts para agregar nuevos componentes propios de Interseguro.

Subpath /tailwind — Preset Tailwind CSS

Preset de Tailwind con la paleta de colores corporativos, sincronizado con InterseguroAuraPreset (misma fuente de verdad en src/tokens/palette.ts).

// tailwind.config.js del microfrontend
import { interseguroTailwindPreset } from 'is-uikit-components-vue/tailwind';

export default {
  presets: [interseguroTailwindPreset],
  content: ['./src/**/*.{vue,ts}'],
};

Tokens de color disponibles:

| Token Tailwind | Clase de ejemplo | Descripción | |---|---|---| | interseguro | bg-interseguro-500 | Paleta principal corporativa | | interseguro-secondary | bg-interseguro-secondary-500 | Paleta secundaria (rosa) | | interseguro-info | bg-interseguro-info-500 | Paleta info (celeste) | | surface | bg-surface-100 | Escala de grises corporativa | | brand.navy | text-brand-navy | Azul corporativo oscuro #0B2559 | | brand.pink | text-brand-pink | Acento corporativo #FF429B | | brand.lightblue | text-brand-lightblue | Celeste corporativo #55ACED | | is.warning | text-is-warning | Warning #FFA813 | | is.danger | text-is-danger | Danger #F14649 | | is.success | text-is-success | Success #00B565 | | alert.success | bg-alert-success | Alerta de éxito #33BA6A | | alert.danger | bg-alert-danger | Alerta de error #F25154 |

Subpath /style.css

Estilos CSS compilados de la librería:

import 'is-uikit-components-vue/style.css';

Scripts de desarrollo

npm run build          # Compila la librería con Vite
npm run build:full     # Regenera adaptadores y compila (generate + build)
npm run generate       # Regenera src/adapters/generated.ts y src/styles/generated-styles.ts
npm run dev            # Compila en modo watch
npm run typecheck      # Verificación de tipos con vue-tsc
npm run preview        # Sirve el dist en http://localhost:9010

Regenerar adaptadores tras actualizar PrimeVue

npm run build:full     # equivalente a: npm run generate && npm run build

Publicar en npm

# Autenticarse en el registry privado
npm login --registry https://registry.tu-empresa.com

npm publish

El script prepublishOnly ejecuta automáticamente build:full (generate + build) antes de publicar.

Compatibilidad

| Paquete | Versión | |---|---| | Vue | ^3.5.0 | | PrimeVue | ^4.5.5 | | @primevue/themes | ^4.5.4 | | Node.js | ≥ 18 |