@brokalia/ui

Librería de componentes UI reutilizables

• Versión actual: 2.0.5
• Vue requerido: ^3.5.0

Instalación

npm install @brokalia/ui

Uso Rápido

Opción 1: Plugin Global (todos los componentes)

Registra todos los componentes automáticamente de forma global.

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import Ui from '@brokalia/ui'
import '@brokalia/ui/styles'

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

<!-- Usar cualquier componente sin import -->
<template>
  <ui-button @click="handleClick">Haz clic</ui-button>
  <ui-input v-model:value="name" />
</template>

Opción 2: Imports Granulares

Importa solo los componentes que necesites.

import { createApp } from 'vue'
import { UiButton, UiInput } from '@brokalia/ui'
import '@brokalia/ui/button/styles'
import '@brokalia/ui/input/styles'

const app = createApp(App)
app.component('UiButton', UiButton)
app.component('UiInput', UiInput)

app.mount('#app')

<!-- O importálos directamente en el SFC -->
<template>
  <ui-button @click="handleClick">Haz clic</ui-button>
  <ui-input v-model:value="name" />
</template>

<script setup>
import { UiButton, UiInput } from '@brokalia/ui'
</script>

Sistema de Estilos

Bundle Completo de Estilos

Todos los estilos de componentes en una entrada.

@use '@brokalia/ui/styles'

Tambien puedes configurarlo antes de cargar el bundle completo:

@use '@brokalia/ui/styles' with (
  $tablet: 820px,
  $radius: 8px,
  $button-radius: 999px
)

Por Componente

Importa primero los estilos base y luego los específicos:

@use '@brokalia/ui/styles/base'
@use '@brokalia/ui/button/styles'
@use '@brokalia/ui/input/styles'

Si quieres personalizar variables !default y reutilizar mixins globales, usa styles/base como entrypoint Sass:

@use '@brokalia/ui/styles/base' as * with (
  $tablet: 820px,
  $radius: 8px,
  $primary: #0b57d0
);

.layout {
  @include tablet {
    padding: 2rem;
  }
}

Cada componente con variables propias tambien puede configurarse desde su subpath publico:

@use '@brokalia/ui/button/styles' with (
  $button-radius: 999px,
  $button-font-size-m: 1rem
);

Sistema de Estilos Personalizado

Variables SCSS

La libreria expone variables Sass con !default para configuracion en tiempo de compilacion y CSS custom properties para tematizacion en runtime.

Ejemplo con UiButton:

:root {
  --ui-button-primary-background: #0045b7;
  --ui-button-primary-color: white;
  --ui-button-primary-border: 1px solid #0045b7;
}

.theme-dark {
  --ui-button-primary-background: #1a5cff;
}

Breakpoints

// Media breakpoints (en src/shared/constants/Media.ts)
Mobile: 300px
MobileL: 480px
Tablet: 768px
Desktop: 1024px
DesktopL: 1200px
DesktopXl: 1400px

Espacio de Nombres CSS

Todos los componentes usan el prefijo ui- y la convención BEM:

.ui-button              // Block
.ui-button__icon        // Element
.ui-button--primary     // Modifier
.is-active             // State

Directivas

v-click-outside

Detecta clicks fuera de un elemento. Útil para cerrar menús o modales.

<template>
  <div v-click-outside="handleClickOutside">
    <ui-menu :visible="menuVisible">
      <!-- contenido del menú -->
    </ui-menu>
  </div>
</template>

<script setup>
const menuVisible = ref(true)
const handleClickOutside = () => {
  menuVisible.value = false
}
</script>