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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "11.7.0",
+	"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/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.vue

@@ -1,38 +1,36 @@
 <template>
 	<div class="farm-resource-metainfo">
 		<div v-if="showCreate">
-			<farm-icon color="gray" size="14">calendar-blank</farm-icon>
-			<farm-caption color="gray" tag="p" variation="regular"
-				>Data de cadastro:
-				<farm-caption color="gray" variation="medium" tag="span">{{
-					formattedCreatedAt
-				}}</farm-caption>
+			<farm-icon color="gray" size="sm">calendar-blank</farm-icon>
+			<farm-caption color="gray" variation="regular">
+				Data de cadastro:
+				<farm-caption color="gray" variation="medium" tag="span">
+					{{ formattedCreatedAt }}
+				</farm-caption>
 			</farm-caption>
 		</div>
 		<div v-if="showUpdate">
-			<farm-icon color="gray" size="14">history</farm-icon>
+			<farm-icon color="gray" size="sm">history</farm-icon>
 
-			<farm-caption color="gray" tag="p" variation="regular"
-				>Última atualização feita por
-				<farm-caption color="gray" variation="medium" tag="span">{{
-					formattedUsername
-				}}</farm-caption
-				>, dia
-				<farm-caption color="gray" variation="medium" tag="span">{{
-					formattedUpdatedAt
-				}}</farm-caption>
+			<farm-caption color="gray" variation="regular">
+				Última atualização feita por
+				<farm-caption color="gray" variation="medium" tag="span">
+					{{ formattedUsername }}
+				</farm-caption>
+				, dia
+				<farm-caption color="gray" variation="medium" tag="span">
+					{{ formattedUpdatedAt }}
+				</farm-caption>
 				às
-				<farm-caption color="gray" variation="medium" tag="span">{{
-					formattedUpdatedHours
-				}}</farm-caption>
+				<farm-caption color="gray" variation="medium" tag="span">
+					{{ formattedUpdatedHours }}
+				</farm-caption>
 			</farm-caption>
 		</div>
 	</div>
 </template>
 <script lang="ts">
 import Vue, { computed, PropType, toRefs } from 'vue';
-import Icon from '../Icon';
-import { Caption } from '../Typography';
 
 interface ResourceMetaInfoProps {
 	createdAt: string;
@@ -43,19 +41,24 @@ interface ResourceMetaInfoProps {
 
 export default Vue.extend({
 	name: 'farm-resource-metainfo',
-	components: {
-		'farm-icon': Icon,
-		'farm-caption': Caption,
-	},
 	props: {
+		/**
+		 * Object with the metadata information
+		 */
 		infos: {
 			required: true,
 			type: Object as PropType<ResourceMetaInfoProps>,
 		},
+		/**
+		 * Show create metadata info if empty?
+		 */
 		showEmptyCreate: {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Show update metadata info if empty?
+		 */
 		showEmptyUpdate: {
 			type: Boolean,
 			default: false,
@@ -77,11 +80,8 @@ export default Vue.extend({
 		);
 
 		const formattedCreatedAt = computed(() => infos.value.createdAt || 'N/A');
-
 		const formattedUpdatedAt = computed(() => infos.value.updatedAt || 'N/A');
-
 		const formattedUsername = computed(() => infos.value.username || 'N/A');
-
 		const formattedUpdatedHours = computed(() => infos.value.updatedHours || 'N/A');
 
 		return {
@@ -96,5 +96,5 @@ export default Vue.extend({
 });
 </script>
 <style lang="scss" scoped>
-@import 'ResourceMetaInfo.scss';
+@import 'ResourceMetaInfo';
 </style>

package/src/components/TextFieldV2/TextFieldV2.scss

@@ -1,5 +1,6 @@
 .farm-textfield {
 	height: 64px;
+
 	&--input {
 		display: flex;
 		align-items: center;
@@ -11,19 +12,30 @@
 		padding: 8px;
 		margin-bottom: 4px;
 
-		> button {
+		>button {
 			display: flex;
 		}
 
 		&>input {
 			flex: 1;
 			outline: none;
-			color: var(--farm-neutral-darken);
+			color: var(--farm-text-primary);
 			font-size: 12px;
 			font-weight: 400;
 		}
 
 		width: 100%;
+
+	}
+
+	&--disabled {
+		input {
+			color: var(--farm-gray-base);
+		}
+		.farm-icon {
+			color: var(--farm-gray-lighten);
+			cursor: default;
+		}
 	}
 
 	.farm-caption {

package/src/components/TextFieldV2/TextFieldV2.stories.js

@@ -52,6 +52,7 @@ export const Disabled = () => ({
 	},
 	template: `<div style="width: 480px">
 		<farm-textfield-v2 v-model="v" disabled />
+		<farm-textfield-v2 v-model="v" disabled icon="book" />
 	</div>`,
 });
 

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -7,6 +7,7 @@
 			'farm-textfield--touched': isTouched,
 			'farm-textfield--blured': isBlured,
 			'farm-textfield--error': hasError,
+			'farm-textfield--disabled': disabled,
 		}"
 	>
 		<div class="farm-textfield--input">
@@ -20,9 +21,10 @@
 			<input
 				v-bind="$attrs"
 				v-model="innerValue"
-				v-mask="mask"
+				v-mask="mask"		
 				:disabled="disabled"
 				:readonly="readonly"
+				@click="$emit('click')"
 				@keyup="onKeyUp"
 				@blur="onBlur"
 			/>
@@ -34,7 +36,6 @@
 				<farm-icon color="gray" size="20px">{{ icon }}</farm-icon>
 			</button>
 		</div>
-
 		<farm-caption v-if="showErrorText" color="error" variation="regular">
 			{{ errorBucket[0] }}
 		</farm-caption>