Primeira Versão do Sistema de componentes Vue

src/componentes/EliOlaMundo/EliOlaMundo.vue

@@ -0,0 +1,23 @@
+<template>
+  <v-container>
+    <v-card class="mx-auto" max_width="400">
+      <v-card-title>Olá Mundo!</v-card-title>
+      <v-card-text>
+        Este é um componente de exemplo integrado com Vuetify.
+      </v-card-text>
+      <v-card-actions>
+        <v-btn color="primary" block>
+          Botão Vuetify
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+
+export default defineComponent({
+  name: "EliOlaMundo",
+})
+</script>

src/componentes/EliOlaMundo/README.md

@@ -0,0 +1,54 @@
+# EliOlaMundo (Exemplo de Estrutura)
+
+Este componente serve como **referência oficial** para a criação de novos componentes neste Design System. Utilize esta estrutura como guia.
+
+## 📂 Estrutura de Pastas e Arquivos
+
+Todo componente deve seguir rigorosamente a estrutura abaixo, utilizando **PascalCase** (PrimeiraLetraMaiuscula) para pastas e arquivos.
+
+```
+src/componentes/
+└── NomeDoComponente/            <-- Pasta do Componente
+    ├── NomeDoComponente.vue     <-- Lógica e Template (Vue 3 + TS)
+    ├── index.ts                 <-- Ponto de entrada (Exports)
+    └── README.md                <-- Documentação de uso (Props, Slots, Exemplos)
+```
+
+## 📝 Como Criar um Novo Componente
+
+1.  **Crie a Pasta:**
+    Nomeie a pasta com o nome do componente em PascalCase.
+    *Ex: `src/componentes/MeuBotao/`*
+
+2.  **Crie o Arquivo Vue:**
+    Nomeie o arquivo igual à pasta.
+    *Ex: `src/componentes/MeuBotao/MeuBotao.vue`*
+    - Utilize a Composition API com TypeScript.
+    - Defina sempre o `name` do componente.
+
+3.  **Crie o Index (`index.ts`):**
+    Este arquivo facilita a importação. Deve conter:
+    ```typescript
+    import MeuBotao from './MeuBotao.vue'
+
+    export { MeuBotao }
+    export default MeuBotao
+    ```
+
+4.  **Crie a Documentação (`README.md`):**
+    Descreva o que o componente faz, suas propriedades (`props`), eventos (`emits`) e slots.
+
+5.  **Registre na Biblioteca:**
+    Adicione o novo componente no arquivo principal `src/index.ts`:
+    ```typescript
+    import { MeuBotao } from './componentes/MeuBotao'
+    // ...
+    export { MeuBotao }
+    
+    export default {
+      install(app: App) {
+        // ...
+        app.component('MeuBotao', MeuBotao)
+      }
+    }
+    ```

src/componentes/EliOlaMundo/index.ts

@@ -0,0 +1,4 @@
+import EliOlaMundo from './EliOlaMundo.vue'
+
+export { EliOlaMundo }
+export default EliOlaMundo

src/index.ts

@@ -0,0 +1,11 @@
+
+import type { App } from "vue"
+import { EliOlaMundo } from './componentes/EliOlaMundo'
+
+export { EliOlaMundo }
+
+export default {
+  install(app: App) {
+    app.component('EliOlaMundo', EliOlaMundo)
+  },
+}

src/playground/App.vue

@@ -0,0 +1,15 @@
+<template>
+  <EliOlaMundo />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { EliOlaMundo } from '@/componentes/EliOlaMundo'
+
+export default defineComponent({
+  name: 'App',
+  components: {
+    EliOlaMundo
+  }
+})
+</script>

src/playground/README.md

@@ -0,0 +1,14 @@
+# Playground
+
+Este ambiente é destinado a testes locais e experimentação dos componentes do Design System.
+
+## Como usar
+
+Os arquivos aqui presentes (`App.vue`, `main.ts`) servem como ponto de entrada para rodar a aplicação em modo de desenvolvimento (`npm run dev` ou `pnpm dev`).
+
+Você pode importar componentes da biblioteca e testá-los livremente neste ambiente. Ele não será incluído no build final da biblioteca.
+
+## Estrutura
+
+- `App.vue`: Componente raiz para testes.
+- `main.ts`: Ponto de entrada da aplicação de teste.

src/playground/main.ts

@@ -0,0 +1,16 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+// Vuetify
+import 'vuetify/styles'
+import '@mdi/font/css/materialdesignicons.css'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+const vuetify = createVuetify({
+  components,
+  directives,
+})
+
+createApp(App).use(vuetify).mount('#app')