@farm-investimentos/front-mfe-components-vue3 1.0.3 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components-vue3",
-	"version": "1.0.3",
+	"version": "1.1.1",
 	"private": false,
 	"repository": {
 		"type": "git",
@@ -22,8 +22,8 @@
 		"serve": "vue-cli-service serve",
 		"serve:storybook": "http-server ./storybook-static/",
 		"storybook": "storybook dev -p 6006",
-		"test:coverage": "jest --coverage",
-		"test:unit": "jest",
+		"test:coverage": "jest --coverage --runInBand",
+		"test:unit": "jest --runInBand",
 		"prepare": "husky"
 	},
 	"browserslist": [
@@ -32,28 +32,28 @@
 		"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",
 		"v-mask": "2.3.0",
 		"v-money3": "^3.24.0",
 		"vuetify": "3.5.7",
-		"webpack": "5.89.0"
+		"webpack": "5.94.0"
 	},
 	"devDependencies": {
 		"@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/DatePicker/DatePicker.vue

@@ -1,5 +1,19 @@
 <template>
+	<farm-textfield-v2
+		v-if="readonly || disabled"
+		icon="calendar"
+		v-model="fieldRange"
+		autocomplete="off"
+		:readonly="readonly"
+		:ellipsed="multiple"
+		:mask="`${isReadonly ? '' : '##/##/####'}`"
+		:requiredMessage="requiredMessage"
+		:id="inputId"
+		:rules="rules"
+		:disabled="disabled"
+	/>
 	<farm-contextmenu
+		v-else
 		stay-open
 		v-model="menuField"
 		ref="contextmenu"
@@ -24,7 +38,6 @@
 			:start-date="internalPickerDate"
 			:multi-dates="multiple"
 		/>
-
 		<div class="picker__actions">
 			<farm-btn
 				plain
@@ -65,7 +78,7 @@
 				:requiredMessage="requiredMessage"
 				:id="inputId"
 				:rules="rules"
-				:disabled="true"
+				:disabled="disabled || readonly"
 				@keyup="keyUpInput"
 			/>
 		</template>

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -29,8 +29,9 @@
 				<farm-icon
 					color="gray"
 					size="20px"
-					>{{ icon }}</farm-icon
 				>
+					{{ icon }}
+				</farm-icon>
 			</button>
 			<input
 				v-bind="delete { ...$attrs }.class"

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/examples/Table.stories.js

@@ -270,7 +270,7 @@ export const TableWithCustomHeaderAndSelect = () => ({
 			headers: [
 				{
 					title: 'check',
-					sortable: true,
+					sortable: false,
 					key: 'data-table-select',
 					align: 'left',
 				},

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 truthy', 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();
-		});
-	});
-});