@farm-investimentos/front-mfe-components 14.1.3 → 14.1.5

package/package.json

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

package/src/components/DataTableHeader/DataTableHeader.scss

@@ -1,7 +1,7 @@
 .header-text {
 	position: relative;
-	color: var(--v-primary-base);
-	font-size: 12px;
+	color: var(--farm-secondary-base);
+	font-size: 14px;
 
 	.farm-icon {
 		position: absolute;
@@ -32,4 +32,27 @@ th span.span-checkbox {
 	display: flex;
 	justify-content: flex-start;
 	padding-left: 4px;
-}
+}
+
+thead {
+	height: 51px;
+}
+
+th {
+	color: var(--farm-secondary-base);
+	font-size: 14px;
+	font-weight: 700;
+	text-transform: uppercase;
+	box-shadow: 0px -1px 0px var(--farm-gray-lighten), 0px 1px 0px var(--farm-gray-lighten);
+}
+
+:deep(.mdi-sort-descending)::before {
+	color: var(--farm-gray-base);
+	font-size: 12px;
+	font-weight: 900;
+}
+
+.farm-icon--desc,
+.farm-icon--asc {
+	margin-top: 3.5px;
+}

package/src/components/DataTableHeader/DataTableHeader.stories.js

@@ -26,20 +26,31 @@ export const Primary = () => ({
 			firstSelected: false,
 		};
 	},
-	template: `<farm-datatable-header :headers="headers" :sortClick="sortClick" :firstSelected="firstSelected" />`,
+	template: `<farm-datatable-header :headers="headers" :sortClick="sortClick" :showCheckbox="false" :firstSelected="firstSelected" />`,
 });
 
 export const CheckBox = () => ({
 	data() {
 		return {
-			headers,
+			headers: [
+				{
+					text: 'check',
+					sortable: true,
+					value: 'data-table-select',
+					align: 'left',
+				},
+				...headers,
+			],
+			headerProps,
 			sortClick: [],
 			firstSelected: false,
 		};
 	},
-	template: `<farm-datatable-header :headers="headers" :sortClick="sortClick" :firstSelected="firstSelected" :showCheckbox="true" :selectedIndex="1" />`,
+	template: `<farm-datatable-header :headers="headers" :headerProps="headerProps" :sortClick="sortClick" :firstSelected="firstSelected" :showCheckbox="true" :selectedIndex="1" />`,
 });
 
+const headerProps = { someItems: true, everyItem: true };
+
 const headers = [
 	{
 		text: 'Grupo',

package/src/components/DataTableHeader/DataTableHeader.vue

@@ -26,7 +26,8 @@
 						v-bind:class="[
 							sortClick[$index][item.value] ? 'farm-icon--desc' : 'farm-icon--asc',
 						]"
-						size="sm"
+						class="ml-2"
+						size="12px"
 						color="gray"
 					>
 						sort-descending
@@ -35,7 +36,7 @@
 
 				<span v-if="isTHDataTableSelect(item) && showCheckbox" class="span-checkbox">
 					<farm-checkbox
-						size="sm"
+						size="md"
 						v-model="inputVal"
 						:value="true"
 						:indeterminate="headerProps.someItems && !headerProps.everyItem"
@@ -151,7 +152,7 @@ export default Vue.extend({
 		},
 		thWidth(item) {
 			if (this.isTHDataTableSelect(item)) {
-				return '64px';
+				return '72px';
 			}
 			return item.width ? item.width + 'px' : 'auto';
 		},

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

@@ -48,7 +48,7 @@ describe('DataTableHeader component', () => {
 		});
 
 		it('Should get th width', () => {
-			expect(component.thWidth({ value: 'data-table-select' })).toEqual('64px');
+			expect(component.thWidth({ value: 'data-table-select' })).toEqual('72px');
 			expect(component.thWidth({ width: 24 })).toEqual('24px');
 			expect(component.thWidth({})).toEqual('auto');
 		});

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

@@ -66,3 +66,13 @@ export const Readonly = () => ({
     </div>`,
 });
 
+export const IsNull = () => ({
+	data() {
+		return {
+			date: null,
+		};
+	},
+	template: `<div style='max-width: 320px'>
+        <farm-input-datepicker inputId="input-custom-id-8" v-model="date" :required="true" />
+    </div>`,
+});

package/src/components/DatePicker/DatePicker.vue

@@ -26,7 +26,12 @@
 				Cancelar
 			</farm-btn>
 
-			<farm-btn class="ml-2" title="Confirmar" :disabled="!dateField.length" @click="save()">
+			<farm-btn
+				class="ml-2"
+				title="Confirmar"
+				:disabled="isDateFieldDisabled"
+				@click="save()"
+			>
 				Confirmar <farm-icon>check</farm-icon>
 			</farm-btn>
 		</v-date-picker>
@@ -35,6 +40,7 @@
 				icon="calendar"
 				v-model="fieldRange"
 				autocomplete="off"
+				ref="inputCalendar"
 				:readonly="readonly"
 				:mask="`${readonly ? '' : '##/##/####'}`"
 				:id="inputId"
@@ -166,6 +172,7 @@ export default Vue.extend({
 		clear() {
 			this.dateField = '';
 			this.save();
+			this.$refs.inputCalendar.reset();
 		},
 		validation(date) {
 			const pattern =
@@ -204,7 +211,16 @@ export default Vue.extend({
 			},
 		},
 		isDisabled(): boolean {
-			return this.value.length === 0 ? true : false;
+			if (this.value) {
+				return this.value.length === 0 ? true : false;
+			}
+			return true;
+		},
+		isDateFieldDisabled() {
+			if (this.dateField) {
+				return this.dateField.length === 0 ? true : false;
+			}
+			return true;
 		},
 	},
 });

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

@@ -33,6 +33,46 @@ describe('DatePicker component', () => {
 			component.inputVal = 'teste';
 			expect(wrapper.emitted().input).toBeDefined();
 		});
+		it('isDisabled to be true when value is empty', async () => {
+			await wrapper.setProps({
+				value: '',
+			});
+			expect(component.isDisabled).toBe(true);
+		});
+
+		it('isDisabled to be true when value is empty', async () => {
+			await wrapper.setProps({
+				value: null,
+			});
+			expect(component.isDisabled).toBe(true);
+		});
+		it('isDisabled to be false when value is valid', async () => {
+			await wrapper.setProps({
+				value: '2023-02-02',
+			});
+			expect(component.isDisabled).toBe(false);
+		});
+
+		it('isDateFieldDisabled to be true when dateField is empty', async () => {
+			await wrapper.setProps({
+				value: '',
+			});
+			expect(component.isDateFieldDisabled).toBe(true);
+		});
+
+		it('isDateFieldDisabled to be true when dateField is empty', async () => {
+			await wrapper.setProps({
+				value: null,
+			});
+			expect(component.isDateFieldDisabled).toBe(true);
+		});
+
+		it('isDateFieldDisabled to be false when dateField is valid', async () => {
+			await wrapper.setProps({
+				value: '2023-02-02',
+			});
+			expect(component.isDateFieldDisabled).toBe(false);
+		});
 	});
 
 	describe('methods', () => {

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

@@ -193,31 +193,31 @@ export const Grid = () => ({
 			<farm-row>
 				<farm-col cols="12" md="3">
 					<farm-label>Label 1</farm-label>
-					<farm-textfield />
+					<farm-textfield-v2 />
 				</farm-col>
 				<farm-col cols="12" md="3">
 					<farm-label>Label 2</farm-label>
-					<farm-textfield />
+					<farm-textfield-v2 />
 				</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-v2 hint="some hint text" :persistent-hint="true"  />
 				</farm-col>
 				<farm-col cols="12" md="3">
 					<farm-label>Label 4</farm-label>
-					<farm-textfield />
+					<farm-textfield-v2 />
 				</farm-col>
 				<farm-col cols="12" md="6">
 					<farm-label>Label 6</farm-label>
-					<farm-textfield />
+					<farm-textfield-v2 />
 				</farm-col>
 				<farm-col cols="12" md="2">
 					<farm-label>Label 7</farm-label>
-					<farm-textfield />
+					<farm-textfield-v2 />
 				</farm-col>
 				<farm-col cols="12" md="4">
 					<farm-label>Label 4</farm-label>
-					<farm-textfield />
+					<farm-textfield-v2 />
 				</farm-col>
 			</farm-row>
 			
@@ -360,7 +360,7 @@ export const RestartValidation = () => ({
 	},
 	template: `
         <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
-			{{ validForm }}
+			Is valid form: {{ validForm }}
 
 			<farm-label :required="true">Nome</farm-label>
 			<farm-textfield-v2 v-model="form.name" :rules="[rules.required]" />

package/src/components/Label/Label.scss

@@ -4,10 +4,11 @@
     font-size: 12px;
     margin-bottom: 8px;
     line-height: 24px;
+    color: var(--farm-text-primary);
 
     &.farm-label--required::after {
         content: '*';
         margin-left: 2px;
-        color: var(--v-error-base);
+        color: var(--farm-error-base);
     }
 }

package/src/components/Label/Label.vue

@@ -1,5 +1,9 @@
 <template>
-	<label :class="{ 'farm-label': true, 'farm-label--required': required }" v-bind="$attrs">
+	<label
+		:class="{ 'farm-label': true, 'farm-label--required': required }"
+		v-on="$listeners"
+		v-bind="$attrs"
+	>
 		<slot></slot>
 	</label>
 </template>

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -31,7 +31,12 @@
 				Cancelar
 			</farm-btn>
 
-			<farm-btn class="ml-2" title="Confirmar" :disabled="!dateField.length" @click="save()">
+			<farm-btn
+				class="ml-2"
+				title="Confirmar"
+				:disabled="isDateFieldDisabled"
+				@click="save()"
+			>
 				Confirmar <farm-icon>check</farm-icon>
 			</farm-btn>
 		</v-date-picker>
@@ -111,6 +116,9 @@ export default Vue.extend({
 	},
 	watch: {
 		value(newValue) {
+			if (newValue?.length === 1) {
+				newValue.push(newValue[0]);
+			}
 			this.dateField = newValue;
 			this.fieldRange = this.formatDateRange(newValue);
 		},
@@ -160,7 +168,16 @@ export default Vue.extend({
 			return !this.dateField || this.dateField.length == 1;
 		},
 		isDisabled() {
-			return this.value?.length === 0 ? true : false;
+			if (this.value) {
+				return this.value.length === 0 ? true : false;
+			}
+			return true;
+		},
+		isDateFieldDisabled() {
+			if (this.dateField) {
+				return this.dateField.length === 0 ? true : false;
+			}
+			return true;
 		},
 		isInvertedDate() {
 			if (this.dateField.length === 2) {

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

@@ -25,6 +25,48 @@ describe('RangeDatePicker component', () => {
 	});
 
 	describe('computed values', () => {
+		it('isDisabled to be true when value is empty', async () => {
+			await wrapper.setProps({
+				value: [],
+			});
+			expect(component.isDisabled).toBe(true);
+		});
+
+		it('isDisabled to be true when value is null', async () => {
+			await wrapper.setProps({
+				value: null,
+			});
+			expect(component.isDisabled).toBe(true);
+		});
+
+		it('isDisabled to be false when value is valid', async () => {
+			await wrapper.setProps({
+				value: ['2023-02-02'],
+			});
+			expect(component.isDisabled).toBe(false);
+		});
+
+		it('isDateFieldDisabled to be true when dateField is empty', async () => {
+			await wrapper.setProps({
+				value: [],
+			});
+			expect(component.isDateFieldDisabled).toBe(true);
+		});
+
+		it('isDateFieldDisabled to be true when dateField is null', async () => {
+			await wrapper.setProps({
+				value: null,
+			});
+			expect(component.isDateFieldDisabled).toBe(true);
+		});
+
+		it('isDateFieldDisabled to be false when dateField is valid', async () => {
+			await wrapper.setProps({
+				value: ['2023-02-02'],
+			});
+			expect(component.isDateFieldDisabled).toBe(false);
+		});
+
 		it('min max correctly', async () => {
 			await wrapper.setProps({
 				inputId: 'someid',
@@ -48,4 +90,18 @@ describe('RangeDatePicker component', () => {
 			expect(component.menuField).toBeFalsy();
 		});
 	});
+
+	describe('watchs', () => {
+		it('should show dateField and fieldRange correctly when it has one date', () => {
+			component.$options.watch.value.call(component, ['2023-02-27']);
+			expect(component.dateField).toEqual(['2023-02-27', '2023-02-27']);
+			expect(component.fieldRange).toEqual('27/02/2023 a 27/02/2023');
+		});
+
+		it('should show dateField and fieldRange correctly when it has two dates', () => {
+			component.$options.watch.value.call(component, ['2023-02-27', '2023-02-28']);
+			expect(component.dateField).toEqual(['2023-02-27', '2023-02-28']);
+			expect(component.fieldRange).toEqual('27/02/2023 a 28/02/2023');
+		});
+	});
 });

package/src/components/SelectModalOptions/SelectModalOptions.stories.js

@@ -1,7 +1,7 @@
 import SelectModalOptions from './SelectModalOptions';
 
 export default {
-	title: 'INteractions/SelectModalOptions',
+	title: 'Interactions/SelectModalOptions',
 	component: SelectModalOptions,
 };
 

package/src/components/SelectModalOptions/SelectModalOptions.vue

@@ -79,9 +79,13 @@
 </template>
 <script lang="ts">
 import Vue from 'vue';
+import { VDataTable } from 'vuetify/lib';
 
 export default Vue.extend({
 	name: 'farm-select-modal-options',
+	components: {
+		'v-data-table': VDataTable,
+	},
 	props: {
 		/**
 		 * Input Label

package/src/examples/Table.stories.js

@@ -1,11 +1,12 @@
 import { withDesign } from 'storybook-addon-designs';
+import { VDataTable } from 'vuetify/lib/components';
 import DataTableEmptyWrapper from '../components/DataTableEmptyWrapper';
 import DataTablePaginator from '../components/DataTablePaginator';
 
 const headers = [
 	{
 		text: 'ID',
-		sortable: false,
+		sortable: true,
 		value: 'id',
 		width: 80,
 		align: 'left',
@@ -37,6 +38,7 @@ export default {
 };
 
 export const TableNoData = () => ({
+	components: { 'v-data-table': VDataTable },
 	data() {
 		return {
 			headers,
@@ -59,6 +61,7 @@ export const TableNoData = () => ({
 });
 
 export const TableSampleData = () => ({
+	components: { 'v-data-table': VDataTable },
 	data() {
 		return {
 			headers,
@@ -80,12 +83,33 @@ export const TableSampleData = () => ({
     </v-data-table>
 	</div>`,
 });
+export const TableSampleDataWithCheckbox = () => ({
+	components: { 'v-data-table': VDataTable },
+	data() {
+		return {
+			headers,
+			items: [
+				{ id: 1, name: 'name 1' },
+				{ id: 2, name: 'name 2' },
+				{ id: 3, name: 'name 3' },
+			],
+		};
+	},
+	template: `<div>
+	<v-data-table
+        hide-default-footer
+		id="v-data-table--default"
+		:headers="headers"
+        :items="items"
+		show-select
+	>
+    
+    </v-data-table>
+	</div>`,
+});
 
 export const TableSampleLocalPagination = () => ({
-	components: {
-		DataTableEmptyWrapper,
-		DataTablePaginator,
-	},
+	components: { 'v-data-table': VDataTable, DataTableEmptyWrapper, DataTablePaginator },
 	data() {
 		return {
 			headers,
@@ -145,6 +169,10 @@ TableSampleData.story = {
 	name: 'With data',
 };
 
+TableSampleDataWithCheckbox.story = {
+	name: 'With data and checkbox',
+};
+
 TableSampleLocalPagination.story = {
 	name: 'With data and local pagination',
 };

package/src/scss/Sticky-table.scss

@@ -5,23 +5,19 @@ $defaultLefts: 0, 4rem, 4rem;
 			font-size: 0.75rem;
 		}
 		tbody tr:nth-of-type(odd) td {
-			background-color: #f0f0f0;
+			background-color: var(--farm-neutral-lighten);
 		}
 		tr td {
 			background-color: white;
 		}
-		.v-data-table-header tr th {
-			color: var(--v-primary-base);
-			text-transform: uppercase;
-			font-weight: bold;
-		}
+
 		tr:not(:last-child) td,
 		tr th {
 			border-bottom: none;
 		}
 		.v-data-table__wrapper {
-			border-top: 1px solid var(--v-gray-lighten2);
-			border-bottom: 1px solid var(--v-gray-lighten2);
+			border-top: 1px solid var(--farm-gray-lighten);
+			border-bottom: 1px solid var(--farm-gray-lighten);
 		}
 		tr td:first-child,
 		th:first-child {
@@ -65,5 +61,42 @@ $defaultLefts: 0, 4rem, 4rem;
 				cursor: default;
 			}
 		}
+
+		th[role='columnheader'] {
+			color: var(--farm-secondary-base);
+			font-size: 14px;
+			font-weight: 700;
+			text-transform: uppercase;
+		}
+
+		td {
+			color: var(--farm-text-primary);
+			font-size: 14px;
+			font-weight: 400;
+		}
+
+		thead {
+			height: 51px;
+		}
+
+		th[role='columnheader']:has(> .v-data-table__checkbox) {
+			max-width: 71px !important;
+		}
+
+		.v-data-table-header tr th {
+			box-shadow: 0px 1px 0px 0px var(--farm-gray-lighten);
+		}
+
+		.v-data-table-header__icon {
+			color: var(--farm-gray-base) !important;
+			font-size: 12px;
+			font-weight: 900;
+			margin-left: 8px;
+		}
+
+		.v-data-table__checkbox .mdi {
+			margin-left: 18px;
+			font-size: 24px;
+		}
 	}
 }