@farm-investimentos/front-mfe-components 15.10.2 → 15.12.0

package/dist/img/money-off.72a09d4d.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12.5 6.9c1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-.53.12-1.03.3-1.48.54l1.47 1.47c.41-.17.91-.27 1.51-.27zM5.33 4.06L4.06 5.33 7.5 8.77c0 2.08 1.56 3.21 3.91 3.91l3.51 3.51c-.34.48-1.05.91-2.42.91-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c.96-.18 1.82-.55 2.45-1.12l2.22 2.22 1.27-1.27L5.33 4.06z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "15.10.2",
+	"version": "15.12.0",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",

package/src/assets/icons/README.md

@@ -0,0 +1,161 @@
+# Guia de Ícones Customizados
+
+Esta pasta contém ícones SVG customizados que não estão disponíveis no Material Design Icons.
+
+## Estrutura de Pastas
+
+```
+src/assets/icons/
+├── money-off/              # 📁 Pasta do ícone money-off
+│   ├── money-off.scss      # 🎨 Estilos do ícone
+│   └── money-off.svg       # 📄 Arquivo SVG
+├── custom-icons-list.ts    # 📋 Lista de ícones disponíveis
+├── custom-icons.scss       # 📦 Importa todos os estilos
+├── index.ts                # 🔄 Exports centralizados
+└── README.md               # 📖 Este arquivo
+```
+
+## Como Adicionar um Novo Ícone Customizado
+
+### 1. Crie a pasta do ícone
+
+Crie uma pasta com o nome do ícone (ex: `my-custom-icon/`)
+
+### 2. Adicione o arquivo SVG
+
+Coloque seu arquivo SVG na pasta (ex: `my-custom-icon/my-custom-icon.svg`)
+
+### 3. Crie o arquivo SCSS
+
+Crie o arquivo de estilos na pasta `my-custom-icon/my-custom-icon.scss`:
+
+```scss
+// My Custom Icon - Custom SVG
+// Descrição do que o ícone representa
+
+.farm-icon {
+	&.custom-my-custom-icon:before {
+		content: '';
+		display: inline-block;
+		width: 1em;
+		height: 1em;
+		background-color: currentColor;
+		mask: url('../../assets/icons/my-custom-icon/my-custom-icon.svg') no-repeat center;
+		mask-size: contain;
+		-webkit-mask: url('../../assets/icons/my-custom-icon/my-custom-icon.svg') no-repeat center;
+		-webkit-mask-size: contain;
+	}
+}
+```
+
+### 4. Adicione o import no arquivo principal
+
+Adicione o import no arquivo `custom-icons.scss`:
+
+```scss
+@import './my-custom-icon/my-custom-icon.scss';
+```
+
+### 5. Adicione à lista de ícones
+
+Adicione seu ícone ao arquivo `custom-icons-list.ts`:
+
+```typescript
+export const customIconsList = [
+	'custom-money-off',
+	'custom-my-custom-icon', // Adicione aqui
+];
+```
+
+### 6. Use o ícone nos seus componentes
+
+Use o ícone com o prefixo `custom-`:
+
+```vue
+<farm-icon>custom-my-custom-icon</farm-icon>
+```
+
+## CSS Mask vs Background Image
+
+### Background Image (Simples)
+
+-   Bom para ícones com cores estáticas
+-   A cor do ícone é fixa conforme o conteúdo do SVG
+
+```scss
+&.custom-my-icon:before {
+	content: '';
+	display: inline-block;
+	width: 1em;
+	height: 1em;
+	background-image: url('../../assets/icons/my-icon/my-icon.svg');
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center;
+}
+```
+
+### CSS Mask (Recomendado)
+
+-   Melhor para temas
+-   O ícone herda a cor do texto do componente
+-   Funciona melhor com o sistema de cores existente
+
+```scss
+&.custom-my-icon:before {
+	content: '';
+	display: inline-block;
+	width: 1em;
+	height: 1em;
+	background-color: currentColor;
+	mask: url('../../assets/icons/my-icon/my-icon.svg') no-repeat center;
+	mask-size: contain;
+	-webkit-mask: url('../../assets/icons/my-icon/my-icon.svg') no-repeat center;
+	-webkit-mask-size: contain;
+}
+```
+
+## Requisitos do SVG
+
+-   Use viewBox para escalabilidade
+-   Evite cores fixas (use `currentColor` ou remova fill/stroke)
+-   Mantenha o tamanho do arquivo pequeno
+-   Garanta acessibilidade com nomenclatura adequada
+
+## Exemplos
+
+```vue
+<!-- Uso básico -->
+<farm-icon>custom-money-off</farm-icon>
+
+<!-- Com cor e tamanho -->
+<farm-icon color="primary" size="lg">custom-money-off</farm-icon>
+
+<!-- No IconBox -->
+<farm-icon-box icon="custom-money-off" color="error" />
+```
+
+## Testando no Storybook
+
+Após adicionar um novo ícone customizado:
+
+1. **Navegar**: Vá para "Display/Icons" → "List Of Custom Icons"
+2. **Buscar**: Use o campo de busca para encontrar seu ícone
+3. **Testar**: Verifique diferentes exemplos nas stories "Custom Icons" e "Money Off Icon"
+
+## Observações Importantes
+
+-   **Estrutura**: Cada ícone tem sua própria pasta com SVG e SCSS
+-   **Nomenclatura**: Sempre use o prefixo `custom-` para ícones customizados
+-   **Caminhos**: Use `../../assets/icons/pasta-do-icone/arquivo.svg` nos arquivos SCSS
+-   **Import Principal**: Adicione o import no `custom-icons.scss`
+-   **Atualizar Lista**: Não esqueça de adicionar novos ícones em `custom-icons-list.ts`
+-   **Testes**: Verifique no Storybook em "Display/Icons" → "List Of Custom Icons"
+
+## Vantagens desta Estrutura
+
+-   **Organização**: Cada ícone é autocontido em sua pasta
+-   **Escalabilidade**: Fácil adicionar novos ícones sem conflitos
+-   **Manutenibilidade**: Fácil encontrar e editar ícones específicos
+-   **Clareza**: Estrutura clara e previsível
+-   **Reutilização**: Ícones podem ser facilmente movidos ou compartilhados

package/src/assets/icons/custom-icons-list.ts

@@ -0,0 +1,12 @@
+// List of custom icons available in the system
+// Add new custom icons to this list as they are created
+
+export const customIconsList = [
+	'custom-money-off',
+	// Add more custom icons here as they are created
+	// Example:
+	// 'custom-icon-name',
+	// 'custom-another-icon',
+];
+
+export default customIconsList;

package/src/assets/icons/custom-icons.scss

@@ -0,0 +1,9 @@
+// Custom Icons Main SCSS
+// This file imports all individual custom icon styles
+
+// Import individual icon styles
+@import './money-off/money-off.scss';
+
+// Add new icon imports here as they are created
+// @import './your-icon/your-icon.scss';
+// @import './another-icon/another-icon.scss';

package/src/assets/icons/index.ts

@@ -0,0 +1,7 @@
+// Custom Icons exports
+// Centralized export for all custom icons functionality
+
+export { default as customIconsList, customIconsList as customIcons } from './custom-icons-list';
+
+// Re-export individual items for convenience
+export * from './custom-icons-list';

package/src/assets/icons/money-off/money-off.scss

@@ -0,0 +1,28 @@
+// Money Off Icon - Custom SVG
+// Icon for representing disabled payments, free services, or budget limits
+
+.farm-icon {
+	&.custom-money-off:before {
+		content: '';
+		display: inline-block;
+		width: 1em;
+		height: 1em;
+		background-color: currentColor;
+		mask: url('../../assets/icons/money-off/money-off.svg') no-repeat center;
+		mask-size: contain;
+		-webkit-mask: url('../../assets/icons/money-off/money-off.svg') no-repeat center;
+		-webkit-mask-size: contain;
+	}
+
+	// Alternative approach using background-image (simpler but less flexible for theming)
+	// &.custom-money-off:before {
+	// 	content: '';
+	// 	display: inline-block;
+	// 	width: 1em;
+	// 	height: 1em;
+	// 	background-image: url('../../assets/icons/money-off/money-off.svg');
+	// 	background-size: contain;
+	// 	background-repeat: no-repeat;
+	// 	background-position: center;
+	// }
+}

package/src/assets/icons/money-off/money-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12.5 6.9c1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-.53.12-1.03.3-1.48.54l1.47 1.47c.41-.17.91-.27 1.51-.27zM5.33 4.06L4.06 5.33 7.5 8.77c0 2.08 1.56 3.21 3.91 3.91l3.51 3.51c-.34.48-1.05.91-2.42.91-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c.96-.18 1.82-.55 2.45-1.12l2.22 2.22 1.27-1.27L5.33 4.06z"/></svg>

package/src/components/Icon/Icon.stories.js

@@ -4,6 +4,7 @@ import sizes from '../../configurations/sizes';
 import baseThemeColors from '../../configurations/_theme-colors-base.scss';
 import bwThemeColors from '../../configurations/_theme-colors-bw.scss';
 import iconsList from './icons_list';
+import { customIconsList } from '../../assets/icons';
 const colors = Object.keys(baseThemeColors);
 
 import('./Icons.stories.scss');
@@ -154,3 +155,43 @@ export const ListOfIcons = () => ({
         </div>
     </div>`,
 });
+
+export const ListOfCustomIcons = () => ({
+	data() {
+		return {
+			customIconsList: [...customIconsList],
+			filteredCustomIcons: [...customIconsList],
+			filterKey: '',
+		};
+	},
+	watch: {
+		filterKey(newValue) {
+			this.filteredCustomIcons = [...this.customIconsList].filter(
+				item => item.toLowerCase().indexOf(newValue.toLowerCase()) >= 0
+			);
+		},
+	},
+	template: `<div>
+		<div style="margin-bottom: 20px; text-align: center;">
+			<h3>Custom Icons</h3>
+			<p style="font-size: 12px; color: #666;">Total: {{ customIconsList.length }} icon(s)</p>
+		</div>
+        <farm-textfield-v2 v-model="filterKey" placeholder="Search custom icons..." style="margin: 0 auto; width: 240px;" />
+        <div class="icons-container__list">
+            <div v-for="icon of filteredCustomIcons" :key="'custom_icon_' + icon">
+                <farm-icon color="primary">
+                    {{ icon }}
+                </farm-icon>
+                <span>{{ icon }}</span>
+            </div>
+        </div>
+		<div v-if="filteredCustomIcons.length === 0 && filterKey" style="text-align: center; padding: 40px; color: #666;">
+			<p>No custom icons found for "{{ filterKey }}"</p>
+			<p style="font-size: 12px;">Try searching for: custom-money-off</p>
+		</div>
+		<div v-if="customIconsList.length === 0" style="text-align: center; padding: 40px; color: #666;">
+			<p>No custom icons available yet.</p>
+			<p>Add your custom SVG icons to <code>src/assets/icons/</code> and update the list.</p>
+		</div>
+    </div>`,
+});

package/src/components/Icon/Icon.vue

@@ -55,16 +55,18 @@ export default defineComponent({
 
 	computed: {
 		classes() {
-			const obj = {};
+			const isCustomIcon = this.icon.startsWith('custom-');
+
 			return {
 				'farm-icon': true,
 				['farm-icon--' + this.color]: true,
-				mdi: true,
-				['mdi-' + this.icon]: true,
+				// MDI classes for standard icons
+				...(isCustomIcon ? {} : { mdi: true, ['mdi-' + this.icon]: true }),
+				// Custom icon class
+				...(isCustomIcon ? { [this.icon]: true } : {}),
 				'farm-icon--lighten': this.variation === 'lighten',
 				'farm-icon--darken': this.variation === 'darken',
 				['farm-icon--black-' + this.variation]: this.color === 'black',
-				...obj,
 			};
 		},
 		fontSize() {
@@ -95,4 +97,5 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
 @import 'Icon.scss';
+@import '../../assets/icons/custom-icons.scss';
 </style>

package/src/components/Icon/icons_list.ts

@@ -1041,7 +1041,7 @@ export default [
 	'football',
 	'football-australian',
 	'football-helmet',
-	'forklift',
+	'fotlift',
 	'format-align-bottom',
 	'format-align-center',
 	'format-align-justify',
@@ -2555,4 +2555,5 @@ export default [
 	'youtube-tv',
 	'zip-box',
 	'zip-disk',
+	'money-off',
 ];

package/src/components/Tooltip/Tooltip.scss

@@ -1,6 +1,9 @@
-@import '../../configurations/theme-colors';
 @import '../../configurations/variables';
 
+$arrow-size: 6px;
+$tooltip-color: #333333;
+$arrow-margin: 12px;
+
 .farm-tooltip {
 	display: inline-block;
 	position: relative;
@@ -11,31 +14,110 @@
 }
 
 .farm-tooltip__popup {
-	background-color: rgba(themeColor('primary'), 0.95);
-	@each $color in $theme-colors-list {
-		&.farm-tooltip--#{$color} {
-			background-color: rgba(themeColor($color), 0.95);
-		}
-	}
-}
-
-.farm-tooltip__popup {
+	background-color: $tooltip-color;
 	visibility: hidden;
 	opacity: 0;
 	transition: visibility 0.3s linear, opacity 0.3s linear;
 	position: absolute;
 	width: 160px;
-	contain: content;
-	color: white;
+	color: #f5f5f5;
 	border-radius: 5px;
 	font-family: 'Manrope', sans-serif !important;
 	font-size: 12px;
 	font-weight: 500px;
-	padding: 8px 12px;
+	padding: 16px;
 	display: block;
+	z-index: 9999;
+
+	&--fluid {
+		width: auto;
+		min-width: 160px;
+		max-width: 300px;
+	}
 
 	&--visible {
 		opacity: 1;
 		visibility: visible;
 	}
+
+	.farm-tooltip__header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 8px;
+	}
+
+	.farm-tooltip__title {
+		font-weight: 600;
+		font-size: 13px;
+		margin-right: 16px;
+	}
+
+	.farm-tooltip__content {
+		font-weight: 500;
+	}
+
+	.farm-tooltip__arrow {
+		position: absolute;
+		width: 0;
+		height: 0;
+		border-style: solid;
+		z-index: 10000;
+	}
+
+	// Top positions - arrow at bottom
+	&--top-center .farm-tooltip__arrow,
+	&--top-left .farm-tooltip__arrow,
+	&--top-right .farm-tooltip__arrow {
+		border-width: $arrow-size $arrow-size 0 $arrow-size;
+		border-color: $tooltip-color transparent transparent transparent;
+		bottom: -$arrow-size;
+		z-index: 99999;
+	}
+
+	// Bottom positions - arrow at top
+	&--bottom-center .farm-tooltip__arrow,
+	&--bottom-left .farm-tooltip__arrow,
+	&--bottom-right .farm-tooltip__arrow {
+		border-width: 0 $arrow-size $arrow-size $arrow-size;
+		border-color: transparent transparent $tooltip-color transparent;
+		top: -$arrow-size;
+		z-index: 99999;
+	}
+
+	// Left alignment - arrow at left
+	&--top-left .farm-tooltip__arrow,
+	&--bottom-left .farm-tooltip__arrow {
+		left: $arrow-margin;
+	}
+
+	// Right alignment - arrow at right
+	&--top-right .farm-tooltip__arrow,
+	&--bottom-right .farm-tooltip__arrow {
+		right: $arrow-margin;
+	}
+
+	// Center alignment - arrow at center
+	&--top-center .farm-tooltip__arrow,
+	&--bottom-center .farm-tooltip__arrow {
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	.farm-tooltip__close {
+		position: relative;
+		width: 16px;
+		height: 16px;
+		line-height: 16px;
+		text-align: center;
+		cursor: pointer;
+		font-size: 16px;
+		color: #f5f5f5;
+	}
+
+	&:not(.farm-tooltip__popup--has-title) .farm-tooltip__close {
+		position: absolute;
+		top: 8px;
+		right: 8px;
+	}
 }