Instalación

This content is not available in your language yet.

Requisitos

Node.js ≥ 20
Un bundler moderno (Vite, webpack 5+) o ESM nativo

Instalación

Añade los paquetes:
- pnpm
- npm
- yarn
Ventana de terminal
pnpm add @prolibu-suite/cobalt-core @prolibu-suite/cobalt-tokens
Ventana de terminal
npm install @prolibu-suite/cobalt-core @prolibu-suite/cobalt-tokens
Ventana de terminal
yarn add @prolibu-suite/cobalt-core @prolibu-suite/cobalt-tokens

Importa los tokens (en tu CSS global):

@import '@prolibu-suite/cobalt-tokens/css';
@import '@prolibu-suite/cobalt-tokens/css/dark';

Registra los Web Components (una sola vez en tu entry point):

import { defineCustomElements } from '@prolibu-suite/cobalt-core/loader';
defineCustomElements(window);

Y en vite.config.js:

export default {
  plugins: [vue({
    template: {
      compilerOptions: { isCustomElement: (tag) => tag.startsWith('co-') }
    }
  })]
};

import { defineCustomElements } from '@prolibu-suite/cobalt-core/loader';
defineCustomElements(window);

Para tipado completo, prefiere los wrappers oficiales: @prolibu-suite/cobalt-react.

<script type="module">
  import { defineCustomElements } from '@prolibu-suite/cobalt-core/loader';
  defineCustomElements(window);
</script>

Úsalos como cualquier elemento HTML:

<co-button label="Guardar" variant="primary"></co-button>
<co-input label="Email" icon-left="envelope"></co-input>

Sin build · vía CDN

Para prototipos rápidos, demos o HTML vanilla, podés cargar Cobalt directamente desde unpkg sin instalar nada ni correr un bundler. Copy-paste en cualquier .html:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/@prolibu-suite/cobalt-tokens@0.1.0/build/css/tokens.css">
  <script type="module" src="https://unpkg.com/@prolibu-suite/cobalt-core@0.1.0/dist/cobalt/cobalt.esm.js"></script>
</head>
<body>
  <co-button label="Guardar" variant="primary"></co-button>
  <co-input label="Email" icon-left="envelope"></co-input>
</body>
</html>

Paquetes vía CDN

Recurso	URL
Design tokens (CSS)	`https://unpkg.com/@prolibu-suite/cobalt-tokens@0.1.0/build/css/tokens.css`
Dark mode tokens	`https://unpkg.com/@prolibu-suite/cobalt-tokens@0.1.0/build/css/tokens-dark.css`
Web Components	`https://unpkg.com/@prolibu-suite/cobalt-core@0.1.0/dist/cobalt/cobalt.esm.js`
`<co-form>` schema-driven	`https://unpkg.com/@prolibu-suite/cobalt-form@0.1.0/dist/cobalt-form/cobalt-form.esm.js`
Form controller (framework-agnostic)	`https://unpkg.com/@prolibu-suite/cobalt-form-core@0.1.0/dist/index.js`

Demos en vivo

5 ejemplos consumiendo Cobalt desde CDN, de menos invasivo a totalmente custom:

Nivel 0 · Default — <co-form> stock con AJV y ref fields
Nivel 1 · Tokens — theming con CSS variables
Nivel 2 · CSS local — override de layout sin tocar la lib
Nivel 3 · Slot — reemplazar un campo por HTML custom
Nivel 4 · form-core — renderer propio sin <co-form>

Verificación

Si todo funciona, deberías ver:

Ver código

<co-button label="¡Funciona!" variant="primary"></co-button>