@farm-investimentos/front-mfe-components-vue3 1.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components-vue3",
-	"version": "1.0.2",
+	"version": "1.1.0",
 	"private": false,
 	"repository": {
 		"type": "git",
@@ -32,7 +32,7 @@
 		"not dead"
 	],
 	"dependencies": {
-		"@storybook/test": "^8.0.0",
+		"@storybook/test": "^8.2.9",
 		"@vuepic/vue-datepicker": "8.2.0",
 		"core-js": "3.33.1",
 		"text-mask-addons": "^3.8.0",
@@ -45,15 +45,15 @@
 		"@babel/core": "7.17.9",
 		"@babel/generator": "7.17.9",
 		"@farm-investimentos/front-mfe-libs-ts": "3.0.5",
-		"@storybook/addon-essentials": "^8.0.0",
-		"@storybook/addon-interactions": "^8.0.0",
-		"@storybook/addon-links": "^8.0.0",
-		"@storybook/addon-mdx-gfm": "^8.0.0",
-		"@storybook/blocks": "^8.0.0",
-		"@storybook/manager-api": "^8.0.0",
-		"@storybook/theming": "^8.0.0",
-		"@storybook/vue3": "^8.0.0",
-		"@storybook/vue3-vite": "^8.0.0",
+		"@storybook/addon-essentials": "^8.2.9",
+		"@storybook/addon-interactions": "^8.2.9",
+		"@storybook/addon-links": "^8.2.9",
+		"@storybook/addon-mdx-gfm": "^8.2.9",
+		"@storybook/blocks": "^8.2.9",
+		"@storybook/manager-api": "^8.2.9",
+		"@storybook/theming": "^8.2.9",
+		"@storybook/vue3": "^8.2.9",
+		"@storybook/vue3-vite": "^8.2.9",
 		"@tsconfig/node18": "^18.2.2",
 		"@types/jest": "^29.5.12",
 		"@types/node": "^18.17.17",
@@ -84,12 +84,12 @@
 		"react-dom": "^18.2.0",
 		"sass": "~1.32.0",
 		"sass-loader": "10.4.1",
-		"storybook": "^8.0.0",
+		"storybook": "^8.2.9",
 		"style-loader": "^3.3.3",
 		"ts-jest": "^29.0.0",
 		"typescript": "~4.1.5",
 		"vite": "^4.4.9",
-		"vue": "3.4.21",
+		"vue": "3.4.37",
 		"vue-loader": "^16.8.3",
 		"vue-tsc": "^1.8.11",
 		"webpack-cli": "^5.1.4"

package/src/components/ButtonToggle/__tests__/{ButtonToggle.spec.js → ButtonToggle.spec.ts}

@@ -20,7 +20,7 @@ describe('ButtonToggle component', () => {
 	});
 
 	test('Default buttons value', () => {
-		const wrapper1 = shallowMount(ButtonToggle, {});
+		const wrapper1: any = shallowMount(ButtonToggle, {});
 		expect(wrapper1.vm.buttons.length).toEqual(0);
 	});
 

package/src/components/Buttons/ConfirmButton/__tests__/{ConfirmButton.spec.js → ConfirmButton.spec.ts}

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 
-import ConfirmButton from '../ConfirmButton';
+import ConfirmButton from '../ConfirmButton.vue';
 
 describe('ConfirmButton component', () => {
 	let wrapper;

package/src/components/Buttons/DangerButton/__tests__/{DangerButton.spec.js → DangerButton.spec.ts}

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 
-import DangerButton from '../DangerButton';
+import DangerButton from '../DangerButton.vue';
 
 describe('DangerButton component', () => {
 	let wrapper;

package/src/components/Buttons/DefaultButton/__tests__/DefaultButton.spec.ts

@@ -0,0 +1,40 @@
+import { shallowMount } from '@vue/test-utils';
+
+import DefaultButton from '../DefaultButton.vue';
+
+describe('DefaultButton component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(DefaultButton);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('computed properties', () => {
+		describe('isRound', () => {
+			it('get false', () => {
+				expect(component.isRound).toBeFalsy();
+			});
+
+			it('get truthy', async () => {
+				await wrapper.setProps({ icon: true });
+				expect(component.isRound).toBeTruthy();
+			});
+		});
+		describe('classes', () => {
+			it('get ', () => {
+				expect(component.classes).toBeDefined();
+			});
+
+			it('get with props set', async () => {
+				await wrapper.setProps({ outlined: true, plain: true, disabled: true });
+				expect(component.classes['farm-btn--outlined']).toBeTruthy();
+			});
+		});
+	});
+});

package/src/components/Buttons/ExportButton/__tests__/{ExportButton.spec.js → ExportButton.spec.ts}

@@ -1,15 +1,25 @@
 import { shallowMount } from '@vue/test-utils';
 
-import ExportButton from '../ExportButton';
+import ExportButton from '../ExportButton.vue';
 
 describe('ExportButton component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(ExportButton);
+		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
 		expect(wrapper).toBeDefined();
 	});
+
+	describe('Methods', () => {
+		it('Should emit event', () => {
+			component.onClick();
+			expect(wrapper.emitted().onClick).toBeDefined();
+		});
+	});
+
 });

package/src/components/Buttons/ImportButton/__tests__/{ImportButton.spec.js → ImportButton.spec.ts}

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 
-import ImportButton from '../ImportButton';
+import ImportButton from '../ImportButton.vue';
 
 describe('ImportButton component', () => {
 	let wrapper;

package/src/components/Buttons/MultiImportButton/MultiImportButton.vue

@@ -25,8 +25,8 @@
 import { PropType } from 'vue';
 
 export interface IImportOption {
-	title: String;
-	listenerKey: String;
+	title: string;
+	listenerKey: string;
 }
 
 export default {
@@ -46,7 +46,7 @@ export default {
 		};
 	},
 	methods: {
-		onClick(key) {
+		onClick(key: string) {
 			this.$emit('onClick', key);
 		},
 	},

package/src/components/Buttons/MultiImportButton/__tests__/MultiImportButton.spec.ts

@@ -0,0 +1,26 @@
+import { shallowMount } from '@vue/test-utils';
+
+import MultiImportButton from '../MultiImportButton.vue';
+
+describe('MultiImportButton component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(MultiImportButton);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+		component = wrapper.vm;
+	});
+
+	describe('Methods', () => {
+		it('Should emit event', () => {
+			component.onClick();
+			expect(wrapper.emitted().onClick).toBeDefined();
+		});
+	});
+
+});

package/src/components/Buttons/RemoveButton/__tests__/{RemoveButton.spec.js → RemoveButton.spec.ts}

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 
-import RemoveButton from '../RemoveButton';
+import RemoveButton from '../RemoveButton.vue';
 
 describe('RemoveButton component', () => {
 	let wrapper;

package/src/components/Buttons/ToggleButton/__tests__/ToggleButton.spec.ts

@@ -0,0 +1,37 @@
+import { shallowMount } from '@vue/test-utils';
+
+import ToggleButton from '../ToggleButton.vue';
+
+describe('ToggleButton component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ToggleButton);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('Methods', () => {
+		it('Should handle click', () => {
+			component.onClick();
+			expect(component.open).toBeTruthy();
+		});
+	});
+
+	describe('computed properties', () => {
+		describe('prepend', () => {
+			it('get truthy', () => {
+				expect(component.prepend).toBeTruthy();
+			});
+
+			it('get false', async () => {
+				await wrapper.setProps({ position: 'right' });
+				expect(component.isRound).toBeFalsy();
+			});
+		});
+	});
+});

package/src/components/DialogFooter/DialogFooter.scss

@@ -10,7 +10,7 @@
 }
 
 .farm-btn {
-    margin-left: gutter('none');
+    margin-left: gutter('sm');
     margin-top: 0;
 
     .farm-icon {

package/src/components/DialogFooter/__tests__/{DialogFooter.spec.js → DialogFooter.spec.ts}

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 
-import DialogFooter from '../DialogFooter';
+import DialogFooter from '../DialogFooter.vue';
 
 describe('DialogFooter component', () => {
 	let wrapper;

package/src/components/Typography/OverlayText/OverlayText.vue

@@ -11,7 +11,6 @@
 </template>
 <script lang="ts">
 
-
 export default {
 	inheritAttrs: true,
 	name: 'farm-overlaytext',

package/src/components/Typography/Typography.vue

@@ -119,7 +119,6 @@ export default {
 			style.value.lineHeight = lineHeight.value;
 		}
 
-		// eslint-disable-next-line
 		return {
 			style,
 			isSizeFromBreakpoints,

package/src/components/Typography/__tests__/{Typography.spec.js → Typography.spec.ts}

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 
-import Typography from '../Typography';
+import Typography from '../Typography.vue';
 
 describe('Typography component', () => {
 	let wrapper;
@@ -30,7 +30,7 @@ describe('Typography component', () => {
 			expect(component.isSizeFromBreakpoints).toBeFalsy();
 		});
 
-		it('Should have isSizeFromBreakpoints truthy', async () => {
+		it('Should have isSizeFromBreakpoints truthy', () => {
 			const wrapperTest = shallowMount(Typography, {
 				propsData: {
 					size: 'lg',
@@ -45,14 +45,14 @@ describe('Typography component', () => {
 	});
 
 	describe('Prop data', () => {
-		it('Should have li tag', async () => {
+		it('Should have li tag', () => {
 			expect(component.tag).toEqual('li');
 		});
 
-		it('Should not allow invalid html tag', async () => {
+		it('Should not allow invalid html tag', () => {
 			const wrapperTest = shallowMount(Typography, {
 				propsData: {
-					tag: 'section',
+					tag: 'section' as any,
 				},
 			});
 			expect(wrapperTest.vm.tag).toEqual('p');

package/src/components/ValueCaption/ValueCaption.stories.js

@@ -58,3 +58,27 @@ export const Colors = () => ({
 		</farm-valuecaption>
 	</div>`,
 });
+
+export const NoTitle = () => ({
+	template: `
+    <farm-valuecaption
+    icon="account-box-outline"
+    >
+		<template v-slot:subtitle>
+			R$ 1.000,00
+		</template>
+    </farm-valuecaption>
+    `,
+});
+
+export const NoSubTitle = () => ({
+	template: `
+    <farm-valuecaption
+    icon="account-box-outline"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+    </farm-valuecaption>
+    `,
+});

package/src/components/ValueCaption/ValueCaption.vue

@@ -50,8 +50,8 @@ export default {
 	},
 
 	setup(_, { slots }) {
-		const hasTitle = computed(() => slots.title);
-		const hasSubtitle = computed(() => slots.subtitle);
+		const hasTitle = computed(() => !!slots.title);
+		const hasSubtitle = computed(() => !!slots.subtitle);
 
 		return { hasSubtitle, hasTitle };
 	},

package/src/components/ValueCaption/__tests__/ValueCaption.spec.ts

@@ -0,0 +1,31 @@
+import { shallowMount } from '@vue/test-utils';
+
+import ValueCaption from '../ValueCaption.vue';
+
+describe('ValueCaption component', () => {
+	test('Created hook', () => {
+		const wrapper = shallowMount(ValueCaption);
+		expect(wrapper).toBeDefined();
+		expect(wrapper.vm.hasTitle).toBeFalsy();
+	});
+
+	describe('Computed properties', () => {
+		it('hasTitle truthy', () => {
+			const wrapper = shallowMount(ValueCaption, {
+				slots: {
+					title: '',
+				},
+			});
+			expect(wrapper.vm.hasTitle).toBeTruthy();
+		});
+
+		it('hasSubtitle truthy', () => {
+			const wrapper = shallowMount(ValueCaption, {
+				slots: {
+					subtitle: '',
+				},
+			});
+			expect(wrapper.vm.hasSubtitle).toBeTruthy();
+		});
+	});
+});

package/src/examples/Colors.stories.js

@@ -87,7 +87,7 @@ export const CssVariables = () => ({
 			<farm-heading :type="5">{{ key }}</farm-heading>
 			<span :style="{ backgroundColor: baseThemeColors[key] }">Base <span>--farm-{{ key }}-base</span></span>
 			<span :style="{ backgroundColor: variationThemeColors[key + '-lighten'] }">Lighten<span>--farm-{{ key }}-lighten</span></span>
-			<span :style="{ backgroundColor: variationThemeColors[key + '-darken'], color: 'white' }">Darken: <span>--farm-{{ key }}-darken</span></span>
+			<span :style="{ backgroundColor: variationThemeColors[key + '-darken'], color: 'white' }">Darken <span>--farm-{{ key }}-darken</span></span>
 		</div>
 
 		<div>

package/src/components/Buttons/DefaultButton/__tests__/DefaultButton.spec.js

@@ -1,37 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-
-import DefaultButton from '../DefaultButton.vue';
-
-describe('DefaultButton component', () => {
-	let wrapper;
-	let component;
-
-	beforeEach(() => {
-		wrapper = shallowMount(DefaultButton);
-		component = wrapper.vm;
-	});
-
-	test('Created hook', () => {
-		expect(wrapper).toBeDefined();
-	});
-
-	describe('computed properties', () => {
-		it('get isRound false', () => {
-			expect(component.isRound).toBeFalsy();
-		});
-
-		it('get isRound false', async () => {
-			await wrapper.setProps({ icon: true });
-			expect(component.isRound).toBeTruthy();
-		});
-
-		it('get classes', () => {
-			expect(component.classes).toBeDefined();
-		});
-
-		it('get classes with props set', async () => {
-			await wrapper.setProps({ outlined: true, plain: true, disabled: true });
-			expect(component.classes['farm-btn--outlined']).toBeTruthy();
-		});
-	});
-});

package/src/components/Buttons/MultiImportButton/__tests__/MultiImportButton.spec.js

@@ -1,15 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-
-import MultiImportButton from '../MultiImportButton';
-
-describe('MultiImportButton component', () => {
-	let wrapper;
-
-	beforeEach(() => {
-		wrapper = shallowMount(MultiImportButton);
-	});
-
-	test('Created hook', () => {
-		expect(wrapper).toBeDefined();
-	});
-});

package/src/components/Buttons/ToggleButton/__tests__/ToggleButton.spec.js

@@ -1,22 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-
-import ToggleButton from '../ToggleButton';
-
-describe('ToggleButton component', () => {
-	let wrapper;
-
-	beforeEach(() => {
-		wrapper = shallowMount(ToggleButton);
-	});
-
-	test('Created hook', () => {
-		expect(wrapper).toBeDefined();
-	});
-
-	describe('Methods', () => {
-		it('Should handle click', () => {
-			wrapper.vm.onClick();
-			expect(wrapper.vm.open).toBeTruthy();
-		});
-	});
-});

package/src/components/ValueCaption/__tests__/ValueCaption.spec.js

@@ -1,15 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-
-import ValueCaption from '../ValueCaption.vue';
-
-describe('ValueCaption component', () => {
-	let wrapper;
-
-	beforeEach(() => {
-		wrapper = shallowMount(ValueCaption);
-	});
-
-	test('Created hook', () => {
-		expect(wrapper).toBeDefined();
-	});
-});