@farm-investimentos/front-mfe-components-vue3 1.4.0 → 1.5.0

package/src/components/Tooltip/docs/Tooltip.md

@@ -29,7 +29,33 @@ O componente Tooltip fornece informações contextuais ao usuário através de u
 ## 📦 Instalação e Importação
 
 ```javascript
+// Importar o componente
 import { Tooltip } from '@farm-investimentos/front-mfe-components-vue3';
+
+// Registrar no app Vue (global)
+app.component('farm-tooltip', Tooltip);
+
+// Ou registrar localmente no componente
+export default {
+  components: {
+    'farm-tooltip': Tooltip
+  }
+}
+
+// Com script setup
+import { Tooltip } from '@farm-investimentos/front-mfe-components-vue3';
+```
+
+### Uso com npm link
+Após fazer `npm link` no projeto e `npm link @farm-investimentos/front-mfe-components-vue3` no projeto de destino, você pode usar:
+
+```javascript
+// main.js ou main.ts
+import { createApp } from 'vue';
+import { Tooltip } from '@farm-investimentos/front-mfe-components-vue3';
+
+const app = createApp(App);
+app.component('farm-tooltip', Tooltip);
 ```
 
 ## 🎨 API
@@ -69,28 +95,28 @@ import { Tooltip } from '@farm-investimentos/front-mfe-components-vue3';
 
 ### Básico
 ```vue
-<Tooltip>
+<farm-tooltip>
   <template #activator>
     <button>Hover me</button>
   </template>
   Informação adicional sobre este botão
-</Tooltip>
+</farm-tooltip>
 ```
 
 ### Posicionamento Customizado
 ```vue
-<Tooltip placement="bottom-right" :offset="12">
+<farm-tooltip placement="bottom-right" :offset="12">
   <template #activator>
     <IconHelp />
   </template>
   Ajuda contextual posicionada à direita
-</Tooltip>
+</farm-tooltip>
 ```
 
 ### Modo Controlado com Título
 ```vue
 <template>
-  <Tooltip v-model="showHelp">
+  <farm-tooltip v-model="showHelp">
     <template #activator>
       <button @click="showHelp = !showHelp">
         Toggle Help
@@ -104,7 +130,7 @@ import { Tooltip } from '@farm-investimentos/front-mfe-components-vue3';
       <li>Segundo ponto</li>
       <li>Terceiro ponto</li>
     </ul>
-  </Tooltip>
+  </farm-tooltip>
 </template>
 
 <script setup>
@@ -115,50 +141,50 @@ const showHelp = ref(false);
 
 ### Tooltip Fluido para Conteúdo Longo
 ```vue
-<Tooltip :fluid="true">
+<farm-tooltip :fluid="true">
   <template #activator>
     <span>Ver descrição completa</span>
   </template>
   Este é um texto mais longo que se adapta automaticamente
   à largura do conteúdo, expandindo até o máximo de 300px
   antes de quebrar em múltiplas linhas.
-</Tooltip>
+</farm-tooltip>
 ```
 
 ### Diferentes Tamanhos
 ```vue
 <div class="flex gap-4">
-  <Tooltip size="sm">
+  <farm-tooltip size="sm">
     <template #activator>
       <Badge>SM</Badge>
     </template>
     Tooltip pequeno
-  </Tooltip>
+  </farm-tooltip>
   
-  <Tooltip size="md">
+  <farm-tooltip size="md">
     <template #activator>
       <Badge>MD</Badge>
     </template>
     Tooltip médio (padrão)
-  </Tooltip>
+  </farm-tooltip>
   
-  <Tooltip size="lg">
+  <farm-tooltip size="lg">
     <template #activator>
       <Badge>LG</Badge>
     </template>
     Tooltip grande com mais espaçamento
-  </Tooltip>
+  </farm-tooltip>
 </div>
 ```
 
 ### Com Delay Customizado
 ```vue
-<Tooltip :delay="[500, 0]">
+<farm-tooltip :delay="[500, 0]">
   <template #activator>
     <button>Hover com delay</button>
   </template>
   Aparece após 500ms, desaparece instantaneamente
-</Tooltip>
+</farm-tooltip>
 ```
 
 ## 🎯 Casos de Uso Comuns
@@ -167,42 +193,42 @@ const showHelp = ref(false);
 ```vue
 <label>
   CPF
-  <Tooltip placement="top-right">
+  <farm-tooltip placement="top-right">
     <template #activator>
       <IconQuestion class="ml-1 text-gray-400" />
     </template>
     Digite apenas números, sem pontos ou traços
-  </Tooltip>
+  </farm-tooltip>
 </label>
 ```
 
 ### 2. Botões com Ações Desabilitadas
 ```vue
-<Tooltip :disabled="canDelete">
+<farm-tooltip :disabled="canDelete">
   <template #activator>
     <button :disabled="!canDelete" @click="handleDelete">
       Excluir
     </button>
   </template>
   Você não tem permissão para excluir este item
-</Tooltip>
+</farm-tooltip>
 ```
 
 ### 3. Truncate com Preview Completo
 ```vue
-<Tooltip>
+<farm-tooltip>
   <template #activator>
     <p class="truncate max-w-xs">
       {{ longText }}
     </p>
   </template>
   {{ longText }}
-</Tooltip>
+</farm-tooltip>
 ```
 
 ### 4. Status com Detalhes
 ```vue
-<Tooltip placement="bottom-center">
+<farm-tooltip placement="bottom-center">
   <template #activator>
     <StatusBadge :status="order.status" />
   </template>
@@ -211,7 +237,7 @@ const showHelp = ref(false);
     <p><strong>Atualizado:</strong> {{ order.updatedAt }}</p>
     <p><strong>Por:</strong> {{ order.updatedBy }}</p>
   </div>
-</Tooltip>
+</farm-tooltip>
 ```
 
 ## ⚡ Performance e Boas Práticas

package/src/components/Tooltip/types.ts

@@ -13,28 +13,20 @@ export type TooltipVariant = 'dark' | 'light';
 export type TooltipSize = 'sm' | 'md' | 'lg';
 
 export interface TooltipProps {
-	// Visibility control (Vue 3 style)
-	modelValue?: boolean; // v-model
+	modelValue?: boolean;
 	trigger?: TooltipTrigger;
-
-	// Placement (all 6 positions are supported)
 	placement?: TooltipPlacement;
 	offset?: number;
-
-	// Aparência
 	variant?: TooltipVariant;
 	size?: TooltipSize;
 	maxWidth?: string | number;
-
-	// Comportamento
-	delay?: number | [number, number]; // [show, hide]
+	delay?: number | [number, number];
 	disabled?: boolean;
 	fluid?: boolean;
-	position?: string;
 }
 
 export interface TooltipEmits {
-	'update:modelValue': [value: boolean]; // Vue 3 v-model
+	'update:modelValue': [value: boolean];
 	show: [];
 	hide: [];
 }

package/src/main.ts

@@ -18,6 +18,7 @@ import PromptUserToConfirm from './components/PromptUserToConfirm';
 import RangeDatePicker from './components/RangeDatePicker';
 import ResourceMetaInfo from './components/ResourceMetaInfo';
 import TableContextMenu from './components/TableContextMenu';
+import Tooltip from './components/Tooltip';
 
 export {
 	DataTablePaginator,
@@ -38,6 +39,7 @@ export {
 	Collapsible,
 	IdCaption,
 	ResourceMetaInfo,
+	Tooltip,
 };
 
 export * from './components/AlertBox';
@@ -89,3 +91,5 @@ export * from './components/layout/ContainerFooter';
 export * from './components/layout/Row';
 export * from './components/layout/Line';
 
+export * from './assets/icons';
+