Primeira Versão do Sistema de componentes Vue

.gitignore

@@ -0,0 +1 @@
+node_modules

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

README.md

@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

dist/eli-vue.es.js

@@ -0,0 +1,62 @@
+import { defineComponent as u, createBlock as i, openBlock as f, withCtx as o, createVNode as n, createTextVNode as l } from "vue";
+import { VBtn as m } from "vuetify/components/VBtn";
+import { VCard as s, VCardTitle as p, VCardText as c, VCardActions as _ } from "vuetify/components/VCard";
+import { VContainer as x } from "vuetify/components/VGrid";
+const V = u({
+  name: "EliOlaMundo"
+}), C = (e, t) => {
+  const r = e.__vccOpts || e;
+  for (const [a, d] of t)
+    r[a] = d;
+  return r;
+};
+function O(e, t, r, a, d, y) {
+  return f(), i(x, null, {
+    default: o(() => [
+      n(s, {
+        class: "mx-auto",
+        max_width: "400"
+      }, {
+        default: o(() => [
+          n(p, null, {
+            default: o(() => [...t[0] || (t[0] = [
+              l("Olá Mundo!", -1)
+            ])]),
+            _: 1
+          }),
+          n(c, null, {
+            default: o(() => [...t[1] || (t[1] = [
+              l(" Este é um componente de exemplo integrado com Vuetify. ", -1)
+            ])]),
+            _: 1
+          }),
+          n(_, null, {
+            default: o(() => [
+              n(m, {
+                color: "primary",
+                block: ""
+              }, {
+                default: o(() => [...t[2] || (t[2] = [
+                  l(" Botão Vuetify ", -1)
+                ])]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  });
+}
+const k = /* @__PURE__ */ C(V, [["render", O]]), T = {
+  install(e) {
+    e.component("EliOlaMundo", k);
+  }
+};
+export {
+  k as EliOlaMundo,
+  T as default
+};

dist/eli-vue.umd.js

@@ -0,0 +1 @@
+(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vuetify/components/VBtn"),require("vuetify/components/VCard"),require("vuetify/components/VGrid")):typeof define=="function"&&define.amd?define(["exports","vue","vuetify/components/VBtn","vuetify/components/VCard","vuetify/components/VGrid"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.eli_vue={},t.Vue,t.VBtn,t.VCard,t.VGrid))})(this,(function(t,e,f,i,s){"use strict";const a=e.defineComponent({name:"EliOlaMundo"}),c=(o,n)=>{const d=o.__vccOpts||o;for(const[l,u]of n)d[l]=u;return d};function p(o,n,d,l,u,m){return e.openBlock(),e.createBlock(s.VContainer,null,{default:e.withCtx(()=>[e.createVNode(i.VCard,{class:"mx-auto",max_width:"400"},{default:e.withCtx(()=>[e.createVNode(i.VCardTitle,null,{default:e.withCtx(()=>[...n[0]||(n[0]=[e.createTextVNode("Olá Mundo!",-1)])]),_:1}),e.createVNode(i.VCardText,null,{default:e.withCtx(()=>[...n[1]||(n[1]=[e.createTextVNode(" Este é um componente de exemplo integrado com Vuetify. ",-1)])]),_:1}),e.createVNode(i.VCardActions,null,{default:e.withCtx(()=>[e.createVNode(f.VBtn,{color:"primary",block:""},{default:e.withCtx(()=>[...n[2]||(n[2]=[e.createTextVNode(" Botão Vuetify ",-1)])]),_:1})]),_:1})]),_:1})]),_:1})}const r=c(a,[["render",p]]),V={install(o){o.component("EliOlaMundo",r)}};t.EliOlaMundo=r,t.default=V,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

dist/types/componentes/EliOlaMundo/EliOlaMundo.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

dist/types/componentes/EliOlaMundo/index.d.ts

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

dist/types/index.d.ts

@@ -0,0 +1,7 @@
+import type { App } from "vue";
+import { EliOlaMundo } from './componentes/EliOlaMundo';
+export { EliOlaMundo };
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>eli-vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/playground/main.ts"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "eli-vue",
+  "version": "0.1.0",
+  "private": false,
+  "main": "./dist/eli-vue.umd.js",
+  "module": "./dist/eli-vue.es.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/eli-vue.es.js",
+      "require": "./dist/eli-vue.umd.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build:types": "vue-tsc -p tsconfig.build.json --declaration --emitDeclarationOnly",
+    "build": "vite build && npm run build:types",
+    "dev": "vite",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0",
+    "vuetify": "^3.0.0"
+  },
+  "devDependencies": {
+    "@mdi/font": "^7.4.47",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "sass": "^1.94.2",
+    "typescript": "^5.0.0",
+    "vite": "^6.0.0",
+    "vite-plugin-vuetify": "^2.1.2",
+    "vue": "^3.4.0",
+    "vue-tsc": "^3.1.6",
+    "vuetify": "^3.11.2"
+  }
+}

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')

tsconfig.app.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": false,
+    "emitDeclarationOnly": false
+  },
+  "include": ["src"]
+}

tsconfig.build.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "declarationDir": "./dist/types"
+  },
+  "include": ["src"],
+  "exclude": ["src/playground/**/*"]
+}

tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Tipagem */
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Importações */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+
+    /* Vue */
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": ["dist", "node_modules"]
+}

vite.config.ts

@@ -0,0 +1,37 @@
+
+
+
+import { defineConfig } from "vite"
+import vue from "@vitejs/plugin-vue"
+import vuetify from "vite-plugin-vuetify"
+import path from "node:path"
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    vuetify({ autoImport: true }),
+  ],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      name: "eli_vue",
+      fileName: (format) => `eli-vue.${format}.js`,
+    },
+    rollupOptions: {
+      // não bundle o Vue
+      external: ["vue", /^vuetify(\/.*)?$/],
+      output: {
+        globals: {
+          vue: "Vue",
+          vuetify: "Vuetify",
+        },
+        exports: "named",
+      },
+    },
+  },
+})