VK Custom Elements

Uma biblioteca de componentes web personalizados (Web Components) construída com TypeScript, focada em performance, reusabilidade e facilidade de uso.

🚀 Características

• 🎨 Design moderno e customizável
• 📦 Componentes isolados com Shadow DOM
• 🔄 Sistema de carregamento assíncrono de recursos
• 🔌 Zero dependências externas

Usando Componentes

<!-- Exemplo de uso do vk-button -->
<vk-button>
    <vk-icon slot="icon">send</vk-icon>
    <span slot="text">Enviar</span>
</vk-button>

<!-- Exemplo de uso do vk-card -->
<vk-card>
    <h2>Título do Card</h2>
    <p>Conteúdo do card...</p>
</vk-card>

🛠️ CLI

A biblioteca inclui uma CLI para facilitar o desenvolvimento de novos componentes.

Criando um Novo Componente

npx vk create vk-meu-componente

Isso criará uma nova estrutura de componente com:

• Template HTML
• Estilos CSS
• Classe TypeScript
• Exportação automática

📚 Componentes Disponíveis

vk-view

Container principal para layouts.

<vk-view>
    <vk-appbar slot="navbar"></vk-appbar>
    <div>Conteúdo principal</div>
</vk-view>

vk-button

Botão customizável com suporte a ícones.

<vk-button>
    <vk-icon slot="icon">favorite</vk-icon>
    <span slot="text">Curtir</span>
</vk-button>

vk-icon

Suporte a ícones do Material Design.

<vk-icon>search</vk-icon>
<vk-icon outlined>search</vk-icon>

vk-card

Container para conteúdo em cards.

<vk-card>
    <div>Conteúdo do card</div>
</vk-card>

🔨 Desenvolvimento

Pré-requisitos

• Node.js >= 14
• npm >= 6

Configuração do Ambiente

# Clone o repositório
git clone https://github.com/vkunssec/custom-elements.git

# Instale as dependências
npm install

# Inicie o servidor de desenvolvimento
npm run serve

# Em outro terminal, inicie o watch do TypeScript
npm run watch

Scripts Disponíveis

• npm run build: Compila o projeto
• npm run watch: Compila em modo watch
• npm run serve: Inicia servidor de desenvolvimento
• npm run format: Formata o código

📄 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

🤝 Contribuindo

1. Fork o projeto
2. Crie sua Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. Push para a Branch (git push origin feature/AmazingFeature)
5. Abra um Pull Request

📫 Contato

• GitHub: @vkunssec
• Issues: custom-elements/issues