@farm-investimentos/front-mfe-components 15.2.3 → 15.3.0

package/src/components/ModalPromptUser/ModalPromptUser.vue

@@ -31,9 +31,9 @@
 	</farm-modal>
 </template>
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-prompt-user',
 	props: {
 		/**

package/src/components/MultipleFilePicker/MultipleFilePicker.vue

@@ -13,7 +13,8 @@
 				cloud-upload-outline
 			</farm-icon>
 			<farm-subtitle :type="2" variation="regular" color="primary">
-				Arraste e solte o arquivo <br/> ou clique aqui
+				Arraste e solte o arquivo <br />
+				ou clique aqui
 			</farm-subtitle>
 		</div>
 
@@ -30,7 +31,7 @@
 						<farm-icon color="black" variation="50" size="sm">attachment</farm-icon>
 					</div>
 					<div>
-						<farm-bodysmall  color="black" color-variation="50">
+						<farm-bodysmall color="black" color-variation="50">
 							Arquivo selecionado: {{ file.name }} ({{ sizeOf(file.size) }})
 						</farm-bodysmall>
 					</div>
@@ -57,12 +58,11 @@
 		<ul class="listFilesStyled" v-if="files.length > 0">
 			<li class="itemFilesStyled" v-for="(file, index) in files" :key="index">
 				<div class="itemFilesContentStyled">
-					
 					<div class="fileDocumentStyled">
 						<farm-icon color="black" variation="50" size="sm">attachment</farm-icon>
 					</div>
 					<div>
-						<farm-bodysmall  color="black" color-variation="50">
+						<farm-bodysmall color="black" color-variation="50">
 							Arquivo selecionado: {{ file.name }} ({{ sizeOf(file.size) }})
 						</farm-bodysmall>
 					</div>
@@ -95,7 +95,7 @@
 	</section>
 </template>
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import { sizeOf } from '@farm-investimentos/front-mfe-libs-ts';
 
 export type DownloadFiles = {
@@ -104,7 +104,7 @@ export type DownloadFiles = {
 	size: number;
 };
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-multiple-filepicker',
 
 	props: {

package/src/components/MultipleSelectShortener/MultipleSelectShortener.vue

@@ -8,8 +8,8 @@
 </template>
 
 <script>
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+export default defineComponent({
 	name: 'farm-multiple-select-shortener',
 	props: {
 		/**

package/src/components/ProgressBar/ProgressBar.vue

@@ -4,9 +4,9 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-progressbar',
 	props: {
 		/**

package/src/components/PromptUserToConfirm/PromptUserToConfirm.vue

@@ -9,8 +9,8 @@
 	</farm-form>
 </template>
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+export default defineComponent({
 	name: 'farm-promptusertoconfirm',
 	props: {
 		/**

package/src/components/Radio/Radio.vue

@@ -20,9 +20,9 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-radio',
 	model: {
 		prop: 'modelValue',

package/src/components/RadioGroup/RadioGroup.vue

@@ -11,13 +11,13 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue, { ref, watch, PropType, toRefs, computed, onBeforeMount } from 'vue';
+import { defineComponent, ref, watch, PropType, toRefs, computed, onBeforeMount } from 'vue';
 import validateFormStateBuilder from '../../composition/validateFormStateBuilder';
 import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
 import validateFormMethodBuilder from '../../composition/validateFormMethodBuilder';
 import deepEqual from '../../composition/deepEqual';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-radio-group',
 	props: {
 		/**

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -52,14 +52,15 @@
 	</farm-contextmenu>
 </template>
 <script>
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { VDatePicker } from 'vuetify/lib/components/VDatePicker';
 import { defaultFormat as dateDefaultFormatter } from '../../helpers/date';
 import { formatDatePickerHeader } from '../../helpers';
+
 /**
  * Componente de input com datepicker para range de data
  */
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-input-rangedatepicker',
 	components: {
 		VDatePicker,
@@ -178,7 +179,7 @@ export default Vue.extend({
 			return true;
 		},
 		isInvertedDate() {
-			if ((Array.isArray(this.dateField)) && this.dateField.length === 2) {
+			if (Array.isArray(this.dateField) && this.dateField.length === 2) {
 				const firstDate = new Date(this.dateField[0]);
 				const secondDate = new Date(this.dateField[1]);
 				return firstDate.getTime() > secondDate.getTime();

package/src/components/ResetTableRowSelection/ResetTableRowSelection.stories.js

@@ -11,5 +11,5 @@ export const Primary = () => ({
 			items: [1, 2, 3],
 		};
 	},
-	template: `<ResetTableRowSelection v-model="items" />`,
+	template: `<ResetTableRowSelection :length="items.length" />`,
 });

package/src/components/ResetTableRowSelection/ResetTableRowSelection.vue

@@ -1,23 +1,17 @@
 <template>
 	<div class="ml-6 mr-3 d-flex align-center">
 		Total de linhas selecionadas: {{ length }}
-		<farm-btn color="error" @click="reset" small dense class="ml-3" v-if="length > 0">
-			<v-icon small> mdi-trash-can </v-icon>
+		<farm-btn color="error" @click="reset" small class="ml-3" v-if="length > 0">
+			<farm-icon size="sm">trash-can </farm-icon>
 			Desmarcar
 		</farm-btn>
 	</div>
 </template>
 <script>
-import Vue from 'vue';
-import VIcon from 'vuetify/lib/components/VIcon';
-import DefaultButton from '../Buttons/DefaultButton';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-tablerowselection',
-	components: {
-		VIcon,
-		'farm-btn': DefaultButton,
-	},
 	props: {
 		/**
 		 * Current items length selected

package/src/components/ResourceMetaInfo/ResourceMetaInfo.stories.js

@@ -33,6 +33,25 @@ export const Primary = () => ({
 	</div>`,
 });
 
+export const WithCreatedBy = () => ({
+	data() {
+		return {
+			value: false,
+			info: {
+				createdAt: '21/10/2022',
+				createdBy: 'Test User',
+				createdHours: '10:10:10',
+				updatedAt: '21/10/2022',
+				username: 'Test User',
+				updatedHours: '10:10:10',
+			},
+		};
+	},
+	template: `<div>
+	<farm-resource-metainfo :infos="info" />
+	</div>`,
+});
+
 export const WithoutUpdate = () => ({
 	data() {
 		return {

package/src/components/ResourceMetaInfo/ResourceMetaInfo.vue

@@ -2,10 +2,25 @@
 	<div class="farm-resource-metainfo">
 		<div v-if="showCreate">
 			<farm-icon color="black" variation="40" size="sm">calendar-blank</farm-icon>
-			<farm-caption color="black" color-variation="40" variation="regular">
+			<farm-caption
+				v-if="!showCreatedBy && !showCreatedHours"
+				color="black"
+				color-variation="40"
+				variation="regular"
+			>
 				Data de cadastro:
 				<farm-caption color="black" color-variation="40" variation="medium" tag="span">
-					{{ formattedCreatedAt }}
+					<b>{{ formattedCreatedAt }}</b
+					>.
+				</farm-caption>
+			</farm-caption>
+
+			<farm-caption v-else color="black" color-variation="40" variation="regular">
+				Cadastro realizado por
+				<farm-caption color="black" color-variation="40" variation="medium" tag="span">
+					<b>{{ formattedCreatedBy }}</b
+					>, dia <b>{{ formattedCreatedAt }}</b> às <b>{{ formattedCreatedHours }}</b
+					>.
 				</farm-caption>
 			</farm-caption>
 		</div>
@@ -15,31 +30,33 @@
 			<farm-caption color="black" color-variation="40" variation="regular">
 				Última atualização feita por
 				<farm-caption color="black" color-variation="40" variation="medium" tag="span">
-					{{ formattedUsername }}
-				</farm-caption>
-				, dia
+					<b>{{ formattedUsername }}</b> </farm-caption
+				>, dia
 				<farm-caption color="black" color-variation="40" variation="medium" tag="span">
-					{{ formattedUpdatedAt }}
+					<b>{{ formattedUpdatedAt }}</b>
 				</farm-caption>
 				às
 				<farm-caption color="black" color-variation="40" variation="medium" tag="span">
-					{{ formattedUpdatedHours }}
+					<b>{{ formattedUpdatedHours }}</b
+					>.
 				</farm-caption>
 			</farm-caption>
 		</div>
 	</div>
 </template>
 <script lang="ts">
-import Vue, { computed, PropType, toRefs } from 'vue';
+import { computed, defineComponent, PropType, toRefs } from 'vue';
 
 interface ResourceMetaInfoProps {
 	createdAt: string;
+	createdBy?: string;
 	updatedAt: string;
 	username: string;
 	updatedHours: string;
+	createdHours?: string;
 }
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-resource-metainfo',
 	props: {
 		/**
@@ -79,18 +96,41 @@ export default Vue.extend({
 				showEmptyCreate.value
 		);
 
+		const showCreatedBy = computed(
+			() =>
+				(infos.value.createdBy !== null && infos.value.createdBy !== undefined) ||
+				showEmptyCreate.value
+		);
+
+		const showCreatedHours = computed(
+			() =>
+				(infos.value.createdHours !== null && infos.value.createdHours !== undefined) ||
+				showEmptyCreate.value
+		);
+
 		const formattedCreatedAt = computed(() => infos.value.createdAt || 'N/A');
+
+		const formattedCreatedBy = computed(() => infos.value.createdBy || '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');
 
+		const formattedCreatedHours = computed(() => infos.value.createdHours || 'N/A');
+
 		return {
 			showUpdate,
 			showCreate,
+			showCreatedBy,
+			showCreatedHours,
 			formattedCreatedAt,
+			formattedCreatedBy,
 			formattedUpdatedAt,
 			formattedUsername,
 			formattedUpdatedHours,
+			formattedCreatedHours,
 		};
 	},
 });

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

@@ -10,9 +10,11 @@ describe('ResourceMetaInfo component', () => {
 			propsData: {
 				infos: {
 					createdAt: '21/10/2022',
+					createdBy: 'Test User',
 					updatedAt: '21/10/2022',
 					username: 'Test User',
 					updatedHours: '10:10:10',
+					createdHours: '10:10:10',
 				},
 			},
 		});
@@ -73,6 +75,32 @@ describe('ResourceMetaInfo component', () => {
 			});
 		});
 
+		describe('showCreateBy', () => {
+			it('should return true when it has an createby date', () => {
+				expect(component.showCreatedBy).toBeTruthy();
+			});
+
+			it('should return false when it has not an createdby date', async () => {
+				await wrapper.setProps({
+					infos: { createdBy: null },
+				});
+				expect(component.showCreatedBy).toBeFalsy();
+			});
+		});
+
+		describe('showCreatedHours', () => {
+			it('should return true when it has an createdHours', () => {
+				expect(component.showCreatedHours).toBeTruthy();
+			});
+
+			it('should return false when it has not an createdHours', async () => {
+				await wrapper.setProps({
+					infos: { createdHours: null },
+				});
+				expect(component.showCreatedHours).toBeFalsy();
+			});
+		});
+
 		describe('formattedCreatedAt', () => {
 			it('should return infos createdAt', () => {
 				expect(component.formattedCreatedAt).toBe('21/10/2022');
@@ -86,6 +114,19 @@ describe('ResourceMetaInfo component', () => {
 			});
 		});
 
+		describe('formattedCreatedBy', () => {
+			it('should return infos createdBy', () => {
+				expect(component.formattedCreatedBy).toBe('Test User');
+			});
+
+			it('should return N/A when infos createdBy is empty', async () => {
+				await wrapper.setProps({
+					infos: { createdBy: null },
+				});
+				expect(component.formattedCreatedBy).toBe('N/A');
+			});
+		});
+
 		describe('formattedUpdatedAt', () => {
 			it('should return infos updatedAt', () => {
 				expect(component.formattedUpdatedAt).toBe('21/10/2022');
@@ -124,5 +165,18 @@ describe('ResourceMetaInfo component', () => {
 				expect(component.formattedUpdatedHours).toBe('N/A');
 			});
 		});
+
+		describe('formattedCreatedHours', () => {
+			it('should return infos createdHours', () => {
+				expect(component.formattedCreatedHours).toBe('10:10:10');
+			});
+
+			it('should return N/A when infos createdHours is empty', async () => {
+				await wrapper.setProps({
+					infos: { createdHours: null },
+				});
+				expect(component.formattedCreatedHours).toBe('N/A');
+			});
+		});
 	});
 });

package/src/components/Select/Select.vue

@@ -90,7 +90,7 @@
 </template>
 
 <script lang="ts">
-import Vue, { computed, onBeforeMount, PropType, ref, toRefs, watch } from 'vue';
+import { computed, onBeforeMount, PropType, ref, toRefs, watch, defineComponent } from 'vue';
 import validateFormStateBuilder from '../../composition/validateFormStateBuilder';
 import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
 import validateFormMethodBuilder from '../../composition/validateFormMethodBuilder';
@@ -98,7 +98,7 @@ import deepEqual from '../../composition/deepEqual';
 import randomId from '../../helpers/randomId';
 import { buildData } from './composition';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-select',
 	inheritAttrs: true,
 	props: {

package/src/components/SelectModalOptions/SelectModalOptions.vue

@@ -78,10 +78,10 @@
 	</farm-col>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { VDataTable } from 'vuetify/lib';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-select-modal-options',
 	components: {
 		'v-data-table': VDataTable,

package/src/components/Stepper/StepperHeader/StepperHeader.vue

@@ -40,10 +40,10 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import IStep from './IStep';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-stepper-header',
 	props: {
 		/**

package/src/components/Switcher/Switcher.vue

@@ -11,9 +11,9 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue, { PropType, computed, ref, watch } from 'vue';
+import { defineComponent, PropType, computed, ref, watch } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-switcher',
 	props: {
 		/**

package/src/components/TableContextMenu/TableContextMenu.vue

@@ -26,13 +26,15 @@
 				<farm-icon v-if="item.icon" size="sm" :color="item.icon.color || 'primary'">
 					{{ item.icon.type }}
 				</farm-icon>
-				<farm-caption bold tag="span" :color="item.icon.color || 'primary'">{{ item.label }}</farm-caption>
+				<farm-caption bold tag="span" :color="item.icon.color || 'primary'">{{
+					item.label
+				}}</farm-caption>
 			</farm-listitem>
 		</farm-list>
 	</farm-contextmenu>
 </template>
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 
 export interface IContextMenuOption {
 	label: string;
@@ -45,7 +47,7 @@ export interface IContextMenuOptionIcon {
 	type: string;
 }
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-context-menu',
 	components: {},
 	props: {

package/src/components/Tabs/Tabs.vue

@@ -43,8 +43,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'farm-tabs',
 	data() {
 		return {

package/src/components/TextArea/TextArea.vue

@@ -49,14 +49,14 @@
 </template>
 
 <script lang="ts">
-import Vue, { computed, onBeforeMount, PropType, ref, toRefs, watch } from 'vue';
+import { defineComponent, computed, onBeforeMount, PropType, ref, toRefs, watch } from 'vue';
 import validateFormStateBuilder from '../../composition/validateFormStateBuilder';
 import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
 import validateFormMethodBuilder from '../../composition/validateFormMethodBuilder';
 import deepEqual from '../../composition/deepEqual';
 import randomId from '../../helpers/randomId';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-textarea',
 	inheritAttrs: true,
 	props: {

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -66,14 +66,14 @@
 </template>
 
 <script lang="ts">
-import Vue, { computed, onBeforeMount, PropType, ref, toRefs, watch } from 'vue';
+import { defineComponent, computed, onBeforeMount, PropType, ref, toRefs, watch } from 'vue';
 import validateFormStateBuilder from '../../composition/validateFormStateBuilder';
 import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
 import validateFormMethodBuilder from '../../composition/validateFormMethodBuilder';
 import deepEqual from '../../composition/deepEqual';
 import randomId from '../../helpers/randomId';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-textfield-v2',
 	inheritAttrs: true,
 	props: {

package/src/components/Tooltip/Tooltip.vue

@@ -20,10 +20,10 @@
 	</span>
 </template>
 <script lang="ts">
-import Vue, { PropType, ref, computed, reactive, onBeforeUnmount } from 'vue';
+import { PropType, ref, computed, reactive, onBeforeUnmount, defineComponent } from 'vue';
 import { calculateMainZindex } from '../../helpers';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-tooltip',
 	props: {
 		/*

package/src/components/Typography/BodyText/BodyText.vue

@@ -11,10 +11,10 @@
 	</farm-typography>
 </template>
 <script lang="ts">
-import Vue, { computed, ref, watch, toRefs, PropType } from 'vue';
+import { defineComponent, computed, ref, watch, toRefs, PropType } from 'vue';
 import { Keys } from './configurations';
 
-export default Vue.extend({
+export default defineComponent({
 	inheritAttrs: true,
 	name: 'farm-bodytext',
 	props: {

package/src/components/Typography/Caption/Caption.vue

@@ -11,11 +11,11 @@
 	</farm-typography>
 </template>
 <script lang="ts">
-import Vue, { computed, ref, watch, toRefs, PropType } from 'vue';
+import { defineComponent, computed, ref, watch, toRefs, PropType } from 'vue';
 
 import { Keys } from './configurations';
 
-export default Vue.extend({
+export default defineComponent({
 	inheritAttrs: true,
 	name: 'farm-caption',
 	props: {

package/src/components/Typography/Heading/Heading.vue

@@ -12,11 +12,11 @@
 	</farm-typography>
 </template>
 <script lang="ts">
-import Vue, { computed, ref, watch, toRefs, PropType } from 'vue';
+import { defineComponent, computed, ref, watch, toRefs, PropType } from 'vue';
 
 import { Keys } from './configurations';
 
-export default Vue.extend({
+export default defineComponent({
 	inheritAttrs: true,
 	name: 'farm-heading',
 	props: {

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

@@ -10,9 +10,9 @@
 	</farm-typography>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	inheritAttrs: true,
 	name: 'farm-overlaytext',
 });

package/src/components/Typography/Small/Small.vue

@@ -11,11 +11,11 @@
 	</farm-typography>
 </template>
 <script lang="ts">
-import Vue, { computed, ref, watch, toRefs, PropType } from 'vue';
+import { defineComponent, computed, ref, watch, toRefs, PropType } from 'vue';
 
 import { Keys } from './configurations';
 
-export default Vue.extend({
+export default defineComponent({
 	inheritAttrs: true,
 	name: 'farm-bodysmall',
 	props: {

package/src/components/Typography/Subtitle/Subtitle.vue

@@ -11,11 +11,11 @@
 	</farm-typography>
 </template>
 <script lang="ts">
-import Vue, { computed, ref, watch, toRefs, PropType } from 'vue';
+import { defineComponent, computed, ref, watch, toRefs, PropType } from 'vue';
 
 import { Keys } from './configurations';
 
-export default Vue.extend({
+export default defineComponent({
 	inheritAttrs: true,
 	name: 'farm-subtitle',
 	props: {