elicitacao-ui-kit

eLicitação UI Kit

UI Kit de componentes Vue 3 acessíveis e reutilizáveis para projetos de eLicitação.

Instalação

npm install elicitacao-ui-kit

npm install elicitacao-ui-kit bootstrap bootstrap-vue-next

Como usar o CSS global em outro projeto Vue

No seu main.js ou main.ts da aplicação Vue, importe o CSS global da biblioteca:

import 'elicitacao-ui-kit/elicitacao-ui-kit.css';

import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap-vue-next/dist/bootstrap-vue-next.css';

Ou, se preferir, importe no seu arquivo global de estilos (ex: App.vue ou style.css):

@import 'elicitacao-ui-kit/elicitacao-ui-kit.css';

Assim, todos os estilos globais definidos na biblioteca serão aplicados à sua aplicação.

Uso dos componentes

import { HelloWorld, Pill, Button, Dialog } from 'elicitacao-ui-kit';

Exemplo com Pill

<template>
  <div>
    <Pill label="Tag normal" />
    <Pill label="Tag importante" :bold="true" />
  </div>
</template>

<script setup>
import { Pill } from 'elicitacao-ui-kit';
</script>

Guia de estilos

O index do projeto é o guia de estilos da plataforma eLicitação — fundamentos (cores, tipografia, espaçamento, elevação, movimento, acessibilidade), componentes com o par "use quando / evite quando", e os padrões de comportamento adotados nas telas.

npm run dev

O conteúdo vive em src/styleguide/; os tokens documentados ficam em src/styleguide/tokens.ts e refletem src/style.css.

Documentação e Storybook

Execute localmente para visualizar e documentar os componentes:

npm run storybook

Build da Biblioteca

npm run build:lib

Os arquivos gerados estarão na pasta dist/.

Publicação

1. Atualize o campo repository e author no package.json.
2. Faça login no npm:

   npm login
   

3. Publique:

   npm publish --access public
   

Licença

MIT