@prolibu-suite/cobalt-vue

@prolibu-suite/cobalt-vue

Wrappers Vue 3 para los Web Components co-* del Cobalt Design System. Tipado completo, mejor DX que el custom element crudo.

Recomendado si trabajás en Vue. Si preferís el WC directo, mirá @prolibu-suite/cobalt-core.

Instalación

pnpm add @prolibu-suite/cobalt-vue@^0.6.0 @prolibu-suite/cobalt-tokens@^0.6.0

Setup

// main.js
import { createApp } from 'vue';
import { CobaltPlugin } from '@prolibu-suite/cobalt-vue';
import App from './App.vue';

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

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

// vite.config.js — Vue debe reconocer co-*
import vue from '@vitejs/plugin-vue';

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

Uso

<template>
  <co-button label="Guardar" variant="primary" @click="onSave" />
  <co-input v-model="email" label="Email" icon-left="envelope" />
  <co-select :options="countries" label="País" :value="country" @coChange="country = $event.detail" />
</template>

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

const email = ref('');
const country = ref('');
const countries = [
  { value: 'co', label: 'Colombia' },
  { value: 'mx', label: 'México' },
];

function onSave() {
  console.log({ email: email.value, country: country.value });
}
</script>

Eventos custom

Los Web Components emiten eventos con co prefix. Sobre el custom element el nombre va exactamente en camelCase (la forma kebab-case nunca dispara):

<co-input @coInput="onInput" @coChange="onChange" @coBlur="onBlur" />

Para formularios schema-driven

Mirá @prolibu-suite/cobalt-form-vue — composable useForm() + CoFormRenderer.vue con validación AJV.

Documentación

→ cobalt-docs — referencia completa de componentes y theming.

License

MIT