@farm-investimentos/front-mfe-components 11.6.2 → 11.7.1

package/package.json

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

package/src/components/DatePicker/DatePicker.stories.js

@@ -16,42 +16,37 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { DatePicker },
 	data() {
 		return {
-			minDate: new Date().toISOString(),
+			date: '',
 		};
 	},
 	template: `<div style='max-width: 320px'>
-        <DatePicker inputId="input-custom-id-0" :min="minDate" />
-		{{ minDate }}
+        <farm-input-datepicker inputId="input-custom-id-0" v-model="date" />
+		{{ date }}
     </div>`,
 });
 
 export const InitValue = () => ({
-	components: { DatePicker },
-	template: `<div style='max-width: 320px'><DatePicker inputId="input-custom-id-1" value="2021-08-01" /></div>`,
+	template: `<div style='max-width: 320px'><farm-input-datepicker inputId="input-custom-id-1" value="2021-08-01" /></div>`,
 });
 
 export const MinMaxDates = () => ({
-	components: { DatePicker },
 	template: `<div style='max-width: 320px'>
-        <DatePicker inputId="input-custom-id-2" max="2021-12-02" min="2021-07-01" />
+        <farm-input-datepicker inputId="input-custom-id-2" max="2021-12-02" min="2021-07-01" />
         max="2021-12-02" min="2021-07-01"
     </div>`,
 });
 
 export const RequiredDates = () => ({
-	components: { DatePicker },
 	template: `<div style='max-width: 320px'>
-        <DatePicker inputId="input-custom-id-3" :required="true" />
+        <farm-input-datepicker inputId="input-custom-id-3" :required="true" />
     </div>`,
 });
 
 export const ReadonlyFalse = () => ({
-	components: { DatePicker },
 	template: `<div style='max-width: 320px'>
-        <DatePicker :readonly="false" inputId="input-custom-id-3"/>
+        <farm-input-datepicker :readonly="false" inputId="input-custom-id-3"/>
     </div>`,
 });
 

package/src/components/DatePicker/DatePicker.vue

@@ -8,22 +8,18 @@
 		offset-y
 		min-width="290px"
 	>
-		<template v-slot:activator="{ on }">
-			<v-text-field
-				color="secondary"
-				append-icon="mdi-calendar"
-				v-mask="`${readonly ? '' : '##/##/####'}`"
-				@keyup="keyUpInput"
+		<template v-slot:activator="{}">
+			<farm-textfield-v2
+				icon="calendar"
+				v-model="fieldRange"
 				:readonly="readonly"
+				:mask="`${readonly ? '' : '##/##/####'}`"
 				autocomplete="off"
-				outlined
-				dense
-				v-on="on"
-				v-model="fieldRange"
 				:id="inputId"
 				:rules="[checkMax, checkMin, checkRequire]"
-			>
-			</v-text-field>
+				@keyup="keyUpInput"
+				@click="menuField = true"
+			/>
 		</template>
 		<v-date-picker
 			v-if="menuField"
@@ -45,12 +41,10 @@
 		</v-date-picker>
 	</v-menu>
 </template>
-<script>
+<script lang="ts">
 import Vue from 'vue';
-import { VTextField } from 'vuetify/lib/components/VTextField';
 import { VMenu } from 'vuetify/lib/components/VMenu';
 import { VDatePicker } from 'vuetify/lib/components/VDatePicker';
-import DefaultButton from '../Buttons/DefaultButton';
 import { defaultFormat as dateDefaultFormatter, convertDate } from '../../helpers/date';
 /**
  * Componente de input com datepicker para data
@@ -58,10 +52,8 @@ import { defaultFormat as dateDefaultFormatter, convertDate } from '../../helper
 export default Vue.extend({
 	name: 'farm-input-datepicker',
 	components: {
-		VTextField,
 		VMenu,
 		VDatePicker,
-		'farm-btn': DefaultButton,
 	},
 	props: {
 		/**

package/src/components/FilePicker/FilePicker.vue

@@ -3,11 +3,11 @@
 		<input
 			type="file"
 			name="file"
-			@change="fileChange($event.target.files)"
 			:accept="acceptedFileTypes"
+			@change="fileChange($event.target.files)"
 		/>
 		<div v-if="!selectedFile" class="selectfile-container">
-			<farm-icon>cloud-upload</farm-icon>
+			<farm-icon @click="triggerClick">cloud-upload</farm-icon>
 			<p>Clique para selecionar ou arraste o arquivo aqui</p>
 		</div>
 		<div v-if="selectedFile || maxSizeReach" class="reset-container">
@@ -19,12 +19,7 @@
 
 			<p v-if="maxSizeReach" v-html="maxSizeReachMsg"></p>
 
-			<farm-btn
-				outlined
-				class="farm-btn--responsive"
-				title="Escolher outro"
-				@click="reset"
-			>
+			<farm-btn outlined class="farm-btn--responsive" title="Escolher outro" @click="reset">
 				Escolher outro
 			</farm-btn>
 		</div>
@@ -32,8 +27,6 @@
 </template>
 <script lang="ts">
 import Vue from 'vue';
-import DefaultButton from '../Buttons/DefaultButton';
-import Icon from '../Icon';
 
 export default Vue.extend({
 	name: 'farm-filepicker',
@@ -63,6 +56,9 @@ export default Vue.extend({
 		maxSizeReachMsg() {
 			return `Arquivo ultrapassou o tamanho máximo de ${this.maxFileSize}MB`;
 		},
+		inputEl() {
+			return this.$refs.container.querySelector('input');
+		}
 	},
 	mounted() {
 		this.dropArea = this.$refs.container;
@@ -70,7 +66,7 @@ export default Vue.extend({
 	},
 	methods: {
 		reset() {
-			this.$refs.container.querySelector('input').value = '';
+			this.inputEl.value = '';
 			this.$emit('onReset');
 			this.maxSizeReach = false;
 			this.selectedFile = null;
@@ -102,10 +98,9 @@ export default Vue.extend({
 			this.dropArea.addEventListener('dragover', this.handlerFunctionHighlight, false);
 			this.dropArea.addEventListener('drop', this.handlerFunctionUnhighlight, false);
 		},
-	},
-	components: {
-		'farm-btn': DefaultButton,
-		'farm-icon': Icon,
+		triggerClick() {
+			this.inputEl.click();
+		}
 	},
 });
 </script>

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

@@ -3,9 +3,11 @@ import FilePicker from '../FilePicker';
 
 describe('FilePicker component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(FilePicker);
+		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
@@ -15,12 +17,12 @@ describe('FilePicker component', () => {
 	describe('Component methods', () => {
 		describe('fileChange', () => {
 			it('Should emit event with a file', () => {
-				wrapper.vm.fileChange([1]);
+				component.fileChange([1]);
 				expect(wrapper.emitted().onFileChange[0]).toBeDefined();
 			});
 
 			it('Should not emit', () => {
-				wrapper.vm.fileChange([]);
+				component.fileChange([]);
 				expect(wrapper.emitted().onFileChange).toBeUndefined();
 			});
 
@@ -28,7 +30,7 @@ describe('FilePicker component', () => {
 				await wrapper.setProps({
 					maxFileSize: 5,
 				});
-				wrapper.vm.fileChange([{ size: 6 * 1024 * 1024 }]);
+				component.fileChange([{ size: 6 * 1024 * 1024 }]);
 				expect(wrapper.vm.maxSizeReach).toBeTruthy();
 			});
 		});
@@ -36,7 +38,7 @@ describe('FilePicker component', () => {
 		describe('handlerFunctionHighlight', () => {
 			it('Should add class', () => {
 				const spyObj = jest.spyOn(wrapper.vm.dropArea.classList, 'add');
-				wrapper.vm.handlerFunctionHighlight();
+				component.handlerFunctionHighlight();
 				expect(spyObj).toHaveBeenCalled();
 			});
 		});
@@ -65,5 +67,11 @@ describe('FilePicker component', () => {
 			});
 			expect(wrapper.vm.maxSizeReachMsg).toContain('Arquivo ultrapassou o tamanho máximo');
 		});
+
+		it('Should have input element', () => {
+			expect(component.inputEl).toBeDefined();
+		});
+
+		
 	});
 });

package/src/components/Form/Form.stories.js

@@ -35,6 +35,7 @@ export const Primary = () => ({
 				checkbox: true,
 				birthDate: new Date('1980/09/20').toISOString(),
 				selectId: 1,
+				rangeDate: [],
 			},
 			validForm: false,
 			rules: {
@@ -65,7 +66,7 @@ export const Primary = () => ({
 			<v-select :rules="[rules.required]" :items="items" v-model="form.selectId"/>
 
 			<farm-label :required="true">Birthdate:</farm-label>
-			<DatePicker
+			<farm-input-datepicker
 				ref="birthDate"
 				inputId="form-pf-birthDate"
 				class="mt-4"
@@ -73,12 +74,22 @@ export const Primary = () => ({
 				:readonly="true"
 				:required="true"
 			/>
+
+			<farm-label :required="true">Range date:</farm-label>
+			<farm-input-rangedatepicker
+				ref="rangeDate"
+				inputId="form-pf-rangeDate"
+				class="mt-4"
+				v-model="form.rangeDate"
+				:required="true"
+			/>
 			
 			
             <div class="footer" :style="[styles.footer]">
-				<farm-btn color="secondary" outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
-				<farm-btn color="secondary" :disabled="!validForm">Salvar</farm-btn>
+				<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
+				<farm-btn :disabled="!validForm">Salvar</farm-btn>
             </div>
+			form: {{ form }}
         </farm-form>
     `,
 });
@@ -196,51 +207,9 @@ export const RadioGroupReset = () => ({
     `,
 });
 
-export const DatePickers = () => ({
-	data() {
-		return {
-			birthDate: '',
-			rangeDate: [],
-			validForm: false,
-			styles,
-		};
-	},
-	template: `
-        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
-
-			<farm-label :required="true">Birthdate: {{ birthDate }}</farm-label>
-			<DatePicker
-				ref="birthDate"
-				inputId="form-pf-birthDate"
-				class="mt-4"
-				v-model="birthDate"
-				:readonly="true"
-				:required="true"
-			/>
-		
-			<farm-label :required="true">Range: {{ rangeDate }}</farm-label>
-			<RangeDatePicker
-				ref="rangeDate"
-				inputId="form-pf-rangeDate"
-				class="mt-4"
-				v-model="rangeDate"
-				:readonly="true"
-				:required="true"
-			/>
-			
-            <div class="footer" :style="[styles.footer]">
-				<farm-btn color="secondary" outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
-				<farm-btn color="secondary" :disabled="!validForm">Salvar</farm-btn>
-            </div>
-        </farm-form>
-    `,
-});
-
 export const Grid = () => ({
 	data() {
-		return {
-			
-		};
+		return {};
 	},
 	template: `
 	<farm-container>
@@ -257,7 +226,7 @@ export const Grid = () => ({
 				</farm-col>
 				<farm-col cols="12" md="3">
 					<farm-label>Label 3</farm-label>
-					<farm-textfield hint="some hint text" persistent-hint="true"  />
+					<farm-textfield hint="some hint text" :persistent-hint="true"  />
 				</farm-col>
 				<farm-col cols="12" md="3">
 					<farm-label>Label 4</farm-label>
@@ -290,4 +259,41 @@ export const Grid = () => ({
         </farm-form>
 	</farm-container>
     `,
+});
+
+export const MigrateTextVieldV2 = () => ({
+	data() {
+		return {
+			form: {
+				document: 'Document',
+				name: 'Name',
+			},
+			validForm: false,
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+			},
+			items: [
+				{ value: null, text: '' },
+				{ value: 1, text: 'label 1' },
+				{ value: 2, text: 'label 2' },
+			],
+			styles,
+		};
+	},
+	template: `
+        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
+			<div>
+				<farm-label :required="true">Documento</farm-label>
+				<farm-textfield-v2 v-model="form.document" :rules="[rules.required]" />
+			</div>
+			<farm-label :required="true">Nome</farm-label>
+			<farm-textfield-v2 v-model="form.name" :rules="[rules.required]" />
+			
+            <div class="footer" :style="[styles.footer]">
+				<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
+				<farm-btn :disabled="!validForm">Salvar</farm-btn>
+            </div>
+			form: {{ form }}
+        </farm-form>
+    `,
 });

package/src/components/MainFilter/MainFilter.scss

@@ -3,7 +3,7 @@ section {
 	flex-direction: row;
 
 	.farm-btn {
-		margin-left: 1rem;
+		margin-left: 16px;
 	}
 
 	fieldset {

package/src/components/MainFilter/MainFilter.vue

@@ -12,7 +12,7 @@
 					</template>
 				</farm-tooltip>
 			</farm-label>
-			<farm-textfield v-model="inputValue" :id="elementId" @keyup="onKeyUp" />
+			<farm-textfield-v2 v-model="inputValue" :id="elementId" @keyup="onKeyUp" />
 		</fieldset>
 		<farm-btn
 			v-if="hasExtraFilters"
@@ -64,6 +64,9 @@ export default Vue.extend({
 			type: String,
 			default: '',
 		},
+		/**
+		 * Toggle filters
+		 */
 		showFilters: {
 			type: Boolean,
 			default: false,
@@ -100,18 +103,20 @@ export default Vue.extend({
 		onFilterClick() {
 			this.$emit('onClick');
 		},
+		isInvalidKey(keyCode: Number) {
+			return (
+				(keyCode < 48 && keyCode !== 8 && keyCode !== 46) ||
+				(keyCode > 90 && keyCode < 96 && keyCode !== 91) ||
+				(keyCode > 105 && keyCode < 186)
+			);
+		},
 		onKeyUp(event: KeyboardEvent) {
 			const keyCode = event.keyCode;
 			if (keyCode === 13) {
 				this.$emit('onEnter', (event.target as HTMLInputElement).value);
 				return false;
 			}
-
-			if (
-				(keyCode < 48 && keyCode !== 8 && keyCode !== 46) ||
-				(keyCode > 90 && keyCode < 96 && keyCode !== 91) ||
-				(keyCode > 105 && keyCode < 186)
-			) {
+			if (this.isInvalidKey(keyCode)) {
 				return false;
 			}
 			if (this.timer) {
@@ -119,7 +124,8 @@ export default Vue.extend({
 				this.timer = null;
 			}
 			this.timer = setTimeout(() => {
-				this.$emit('onInputChange', (event.target as HTMLInputElement).value);
+				console.log(this.inputValue);
+				this.$emit('onInputChange', this.inputValue);
 			}, 750);
 		},
 	},

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

@@ -19,6 +19,10 @@ describe('MainFilter component', () => {
 			component.onFilterClick();
 			expect(wrapper.emitted().onClick).toBeTruthy();
 		});
+
+		it('Should check if keyCode is valid', () => {
+			expect(component.isInvalidKey(120)).toBeTruthy();
+		});
 	});
 
 	describe('computed properties', () => {

package/src/components/RangeDatePicker/RangeDatePicker.stories.js

@@ -5,40 +5,38 @@ export default {
 	title: 'Form/RangeDatePicker',
 	component: RangeDatePicker,
 	decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `Range I put Date Picker<br />
+				selector: <em>farm-input-rangedatepicker</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1503%3A810',
+	},
 };
 
 export const Primary = () => ({
-	components: { RangeDatePicker },
-	template: '<RangeDatePicker inputId="input-custom-id" />',
+	data() {
+		return {
+			date: [],
+		};
+	},
+	template: `<div style='max-width: 320px'>
+	<RangeDatePicker inputId="input-custom-id" v-model="date" />
+	date: {{ date }}
+	</div>`,
 });
 
 export const Secondary = () => ({
-	components: { RangeDatePicker },
 	template: `<RangeDatePicker inputId="input-custom-id" :value="['2021-08-01', '2021-08-05']" />`,
 });
 
 export const MinMax = () => ({
-	components: { RangeDatePicker },
 	template: `<RangeDatePicker inputId="input-custom-id" min="2022-01-17" max="2022-02-15" />`,
 });
-
-const parameters = {
-	design: {
-		type: 'figma',
-		url:
-			'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1503%3A810',
-	},
-};
-
-Primary.story = {
-	name: 'Básico',
-	parameters
-};
-Secondary.story = {
-	name: 'Data Inicial',
-	parameters
-};
-MinMax.story = {
-	name: 'Data Mínima e Máxima',
-	parameters
-};

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -9,18 +9,15 @@
 		offset-y
 		min-width="290px"
 	>
-		<template v-slot:activator="{ on }">
-			<v-text-field
-				color="secondary"
+		<template v-slot:activator="{}">
+			<farm-textfield-v2
 				v-model="fieldRange"
-				append-icon="mdi-calendar"
+				icon="calendar"
 				readonly
-				v-on="on"
-				outlined
-				dense
 				:id="inputId"
 				:rules="required ? [requiredRule] : []"
-			></v-text-field>
+				@click="menuField = true"
+			/>
 		</template>
 		<v-date-picker
 			v-if="menuField"
@@ -45,7 +42,6 @@
 </template>
 <script>
 import Vue from 'vue';
-import { VTextField } from 'vuetify/lib/components/VTextField';
 import { VMenu } from 'vuetify/lib/components/VMenu';
 import { VDatePicker } from 'vuetify/lib/components/VDatePicker';
 import DefaultButton from '../Buttons/DefaultButton';
@@ -56,7 +52,6 @@ import { defaultFormat as dateDefaultFormatter } from '../../helpers/date';
 export default Vue.extend({
 	name: 'farm-input-rangedatepicker',
 	components: {
-		VTextField,
 		VMenu,
 		VDatePicker,
 		'farm-btn': DefaultButton,
@@ -150,10 +145,7 @@ export default Vue.extend({
 			},
 		},
 		canConfirm() {
-			if (!this.dateField || this.dateField.length == 1) {
-				return true;
-			}
-			return false;
+			return !this.dateField || this.dateField.length == 1;
 		},
 	},
 });

package/src/components/ResourceMetaInfo/ResourceMetaInfo.scss

@@ -0,0 +1,14 @@
+.farm-resource-metainfo {
+	display: inline-flex;
+	flex-direction: column;
+	gap: 8px;
+
+	& div {
+		align-items: center;
+		display: inline-flex;
+
+		& .farm-icon {
+			margin-right: 8px;
+		}
+	}
+}