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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/front-mfe-components.common.js +30 -12
  2. package/dist/front-mfe-components.common.js.map +1 -1
  3. package/dist/front-mfe-components.css +1 -1
  4. package/dist/front-mfe-components.umd.js +30 -12
  5. package/dist/front-mfe-components.umd.js.map +1 -1
  6. package/dist/front-mfe-components.umd.min.js +1 -1
  7. package/dist/front-mfe-components.umd.min.js.map +1 -1
  8. package/dist/img/currency-exchange.00d6a787.svg +3 -0
  9. package/package.json +1 -1
  10. package/src/assets/icons/README.md +33 -0
  11. package/src/assets/icons/currency-exchange/currency-exchange.scss +14 -0
  12. package/src/assets/icons/currency-exchange/currency-exchange.svg +3 -0
  13. package/src/assets/icons/custom-icons-list.ts +3 -0
  14. package/src/assets/icons/custom-icons.scss +2 -0
  15. package/src/assets/icons/index.ts +2 -0
  16. package/src/components/Icon/Icon.scss +1 -0
  17. package/src/components/Icon/Icon.stories.js +28 -0
  18. package/src/components/Icon/Icon.vue +7 -2
  19. package/src/components/Icon/icons_list.ts +3 -0
  20. package/src/main.ts +2 -0
package/dist/img/currency-exchange.00d6a787.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M8.59366 6.90002C7.40699 6.50669 6.83366 6.26002 6.83366 5.63335C6.83366 4.95335 7.57366 4.70669 8.04033 4.70669C8.91366 4.70669 9.23366 5.36669 9.30699 5.60002L10.3603 5.15335C10.2603 4.85335 9.81366 3.87335 8.66699 3.66002V2.83335H7.33366V3.67335C5.68033 4.04669 5.67366 5.58002 5.67366 5.64669C5.67366 7.16002 7.17366 7.58669 7.90699 7.85335C8.96033 8.22669 9.42699 8.56669 9.42699 9.20669C9.42699 9.96002 8.72699 10.28 8.10699 10.28C6.89366 10.28 6.54699 9.03335 6.50699 8.88669L5.40033 9.33335C5.82033 10.7934 6.92033 11.1867 7.33366 11.3067V12.1667H8.66699V11.34C8.93366 11.28 10.6003 10.9467 10.6003 9.19335C10.6003 8.26669 10.1937 7.45335 8.59366 6.90002ZM2.00033 13.5H0.666992V9.50002H4.66699V10.8334H3.01366C4.08699 12.44 5.92033 13.5 8.00033 13.5C11.3137 13.5 14.0003 10.8134 14.0003 7.50002H15.3337C15.3337 11.5534 12.0537 14.8334 8.00033 14.8334C5.52033 14.8334 3.32699 13.6 2.00033 11.72V13.5ZM0.666992 7.50002C0.666992 3.44669 3.94699 0.166687 8.00033 0.166687C10.4803 0.166687 12.6737 1.40002 14.0003 3.28002V1.50002H15.3337V5.50002H11.3337V4.16669H12.987C11.9137 2.56002 10.0803 1.50002 8.00033 1.50002C4.68699 1.50002 2.00033 4.18669 2.00033 7.50002H0.666992Z" fill="#F5F5F5"/>
3
+ </svg>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@farm-investimentos/front-mfe-components-vue3",
3
- "version": "1.4.1",
3
+ "version": "1.5.0",
4
4
  "private": false,
5
5
  "repository": {
6
6
  "type": "git",
package/src/assets/icons/README.md ADDED
@@ -0,0 +1,33 @@
1
+ # Custom Icons System
2
+
3
+ This directory contains custom SVG icons for the component library.
4
+
5
+ ## How to Add a New Custom Icon
6
+
7
+ 1. **Create a folder** with the icon name in this directory: `src/assets/icons/[icon-name]/`
8
+ 2. **Add the SVG file**: `[icon-name].svg`
9
+ 3. **Create the SCSS file**: `[icon-name].scss` with the appropriate CSS class
10
+ 4. **Import the SCSS** in `custom-icons.scss`
11
+ 5. **Add to the list** in `custom-icons-list.ts`
12
+
13
+ ## Example Structure
14
+
15
+ ```
16
+ currency-exchange/
17
+ ├── currency-exchange.svg # SVG file from Figma
18
+ └── currency-exchange.scss # CSS styles with .custom-currency-exchange class
19
+ ```
20
+
21
+ ## Usage
22
+
23
+ ```vue
24
+ <farm-icon>custom-currency-exchange</farm-icon>
25
+ ```
26
+
27
+ ## CSS Class Pattern
28
+
29
+ All custom icons must follow the pattern:
30
+
31
+ - **Prefix**: `custom-`
32
+ - **Class name**: `.custom-[icon-name]`
33
+ - **CSS**: Uses `mask` property with `currentColor` for dynamic coloring
package/src/assets/icons/currency-exchange/currency-exchange.scss ADDED
@@ -0,0 +1,14 @@
1
+ .farm-icon {
2
+ &.custom-currency-exchange:before {
3
+ content: '';
4
+ display: inline-block;
5
+ width: 1em;
6
+ height: 1em;
7
+ background-color: currentColor;
8
+ mask: url('../../assets/icons/currency-exchange/currency-exchange.svg') no-repeat center;
9
+ mask-size: contain;
10
+ -webkit-mask: url('../../assets/icons/currency-exchange/currency-exchange.svg') no-repeat
11
+ center;
12
+ -webkit-mask-size: contain;
13
+ }
14
+ }
package/src/assets/icons/currency-exchange/currency-exchange.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M8.59366 6.90002C7.40699 6.50669 6.83366 6.26002 6.83366 5.63335C6.83366 4.95335 7.57366 4.70669 8.04033 4.70669C8.91366 4.70669 9.23366 5.36669 9.30699 5.60002L10.3603 5.15335C10.2603 4.85335 9.81366 3.87335 8.66699 3.66002V2.83335H7.33366V3.67335C5.68033 4.04669 5.67366 5.58002 5.67366 5.64669C5.67366 7.16002 7.17366 7.58669 7.90699 7.85335C8.96033 8.22669 9.42699 8.56669 9.42699 9.20669C9.42699 9.96002 8.72699 10.28 8.10699 10.28C6.89366 10.28 6.54699 9.03335 6.50699 8.88669L5.40033 9.33335C5.82033 10.7934 6.92033 11.1867 7.33366 11.3067V12.1667H8.66699V11.34C8.93366 11.28 10.6003 10.9467 10.6003 9.19335C10.6003 8.26669 10.1937 7.45335 8.59366 6.90002ZM2.00033 13.5H0.666992V9.50002H4.66699V10.8334H3.01366C4.08699 12.44 5.92033 13.5 8.00033 13.5C11.3137 13.5 14.0003 10.8134 14.0003 7.50002H15.3337C15.3337 11.5534 12.0537 14.8334 8.00033 14.8334C5.52033 14.8334 3.32699 13.6 2.00033 11.72V13.5ZM0.666992 7.50002C0.666992 3.44669 3.94699 0.166687 8.00033 0.166687C10.4803 0.166687 12.6737 1.40002 14.0003 3.28002V1.50002H15.3337V5.50002H11.3337V4.16669H12.987C11.9137 2.56002 10.0803 1.50002 8.00033 1.50002C4.68699 1.50002 2.00033 4.18669 2.00033 7.50002H0.666992Z" fill="#F5F5F5"/>
3
+ </svg>
package/src/assets/icons/custom-icons-list.ts ADDED
@@ -0,0 +1,3 @@
1
+ export const customIconsList = ['custom-currency-exchange'];
2
+
3
+ export default customIconsList;
package/src/assets/icons/custom-icons.scss ADDED
@@ -0,0 +1,2 @@
1
+ // Import all custom icon styles
2
+ @import './currency-exchange/currency-exchange.scss';
package/src/assets/icons/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { default as customIconsList, customIconsList as customIcons } from './custom-icons-list';
2
+ export * from './custom-icons-list';
package/src/components/Icon/Icon.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @import '../../configurations/variables';
2
2
  @import '../../configurations/theme-colors';
3
+ @import '../../assets/icons/custom-icons.scss';
3
4
 
4
5
  .farm-icon {
5
6
  align-items: center;
package/src/components/Icon/Icon.stories.js CHANGED
@@ -2,6 +2,7 @@
2
2
  import Icon from './Icon.vue';
3
3
  import iconsList from './icons_list';
4
4
 
5
+ import { customIconsList } from '../../assets/icons';
5
6
  import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
6
7
  import bwThemeColors from '../../configurations/_theme-colors-bw.module.scss';
7
8
  import sizes from '../../configurations/sizes';
@@ -156,3 +157,30 @@ export const ListOfIcons = () => ({
156
157
  </div>
157
158
  </div>`,
158
159
  });
160
+
161
+ export const CustomIcons = () => ({
162
+ data() {
163
+ return {
164
+ customIconsList: [...customIconsList],
165
+ colors: [...colors],
166
+ };
167
+ },
168
+ template: `<div>
169
+ <h3>Custom Icons ({{ customIconsList.length }} available)</h3>
170
+ <div class="icons-container__list">
171
+ <div v-for="icon of customIconsList" :key="'custom_icon_' + icon">
172
+ <farm-icon>
173
+ {{ icon }}
174
+ </farm-icon>
175
+ <span>{{ icon }}</span>
176
+ </div>
177
+ </div>
178
+ <br />
179
+ <h4>Color Examples</h4>
180
+ <div class="icons-container">
181
+ <farm-icon v-for="color of colors" :key="'currency_' + color" :color="color">
182
+ custom-currency-exchange
183
+ </farm-icon>
184
+ </div>
185
+ </div>`,
186
+ });
package/src/components/Icon/Icon.vue CHANGED
@@ -53,11 +53,16 @@ export default {
53
53
  const el = ref(null);
54
54
 
55
55
  const classes = computed(() => {
56
+ const isCustomIcon = icon.value.startsWith('custom-');
57
+
56
58
  return {
57
59
  'farm-icon': true,
58
60
  ['farm-icon--' + color.value]: true,
59
- mdi: true,
60
- ['mdi-' + icon.value]: true,
61
+ // Classes MDI para ícones padrão
62
+ ...(isCustomIcon ? {} : { mdi: true, ['mdi-' + icon.value]: true }),
63
+ // Classe customizada para ícones personalizados
64
+ ...(isCustomIcon ? { [icon.value]: true } : {}),
65
+ // Variações de cor
61
66
  'farm-icon--lighten': variation.value === 'lighten',
62
67
  'farm-icon--darken': variation.value === 'darken',
63
68
  ['farm-icon--black-' + variation.value]: color.value === 'black',
package/src/components/Icon/icons_list.ts CHANGED
@@ -1,4 +1,7 @@
1
+ import { customIconsList } from '../../assets/icons';
2
+
1
3
  export default [
4
+ ...customIconsList,
2
5
  'access-point',
3
6
  'access-point-network',
4
7
  'account',
package/src/main.ts CHANGED
@@ -91,3 +91,5 @@ export * from './components/layout/ContainerFooter';
91
91
  export * from './components/layout/Row';
92
92
  export * from './components/layout/Line';
93
93
 
94
+ export * from './assets/icons';
95
+