@farm-investimentos/front-mfe-components-vue3 0.7.1 → 1.0.1

package/src/components/ProgressBar/__tests__/ProgressBar.spec.ts

@@ -0,0 +1,53 @@
+import { shallowMount } from '@vue/test-utils';
+
+import ProgressBar from '../ProgressBar.vue';
+
+describe('ProgressBar component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ProgressBar, {
+			propsData: { value: 40 },
+		});
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toBeDefined();
+		});
+	});
+
+	describe('computed properties', () => {
+		describe('classes', () => {
+			it('Should have basic values', () => {
+				expect(component.classes).toBeDefined();
+				expect(component.classes).toHaveProperty('farm-progressbar');
+			});
+
+			it('Should have color and background values', async () => {
+				await wrapper.setProps({
+					backgroundColor: 'secondary',
+					valueColor: 'neutral' 
+				});
+				expect(component.classes).toHaveProperty('farm-progressbar--secondary');
+				expect(component.classes).toHaveProperty('farm-progressbar--value-neutral');
+			});
+
+			it('Should not have color and background values using hexa', async () => {
+				await wrapper.setProps({
+					backgroundColor: '#FF0000',
+					valueColor: '#FF0000' 
+				});
+				expect(component.classes).not.toHaveProperty('farm-progressbar--#FF0000');
+				expect(component.classes).not.toHaveProperty('farm-progressbar--value-#FF0000');
+			});
+
+		});
+	});
+});

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

@@ -74,3 +74,12 @@ export const Reset = () => ({
 		</farm-btn>
 	</div>`,
 });
+
+export const Disabled = () => ({
+	data() {
+		return {
+			date: null,
+		};
+	},
+	template: `<farm-input-rangedatepicker disabled inputId="input-custom-id" min="2023-09-17" max="2023-11-15" v-model="date" />`,
+});

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -54,6 +54,7 @@
 				readonly
 				:id="inputId"
 				:rules="required ? [requiredRule] : []"
+				:disabled="disabled"
 			/>
 		</template>
 	</farm-contextmenu>
@@ -103,6 +104,13 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Disabled field
+		 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		const s = this.formatDateRange(this.modelValue);
@@ -138,7 +146,6 @@ export default {
 			return dateDefaultFormatter(dateStart) + ' a ' + dateDefaultFormatter(dateEnd);
 		},
 		save() {
-			
 			this.formatDateRange(this.dateField);
 			this.inputVal = this.dateField;
 			this.menuField = false;

package/src/examples/Table.stories.js

@@ -1,6 +1,8 @@
 // import { withDesign } from 'storybook-addon-designs';
 import { VDataTable } from 'vuetify/components/VDataTable';
 
+import DataTableHeader from '../components/DataTableHeader/DataTableHeader.vue';
+
 const headers = [
 	{
 		title: 'ID',
@@ -14,6 +16,12 @@ const headers = [
 		sortable: false,
 		key: 'name',
 		width: 160,
+		align: 'center',
+	},
+	{
+		title: 'Description',
+		sortable: false,
+		key: 'description',
 		align: 'end',
 	},
 ];
@@ -186,39 +194,193 @@ export const TableSampleDataWithFarmCheckbox = () => ({
 		};
 	},
 	methods: {
-		onSelect({ item }) {
-			if (item.id === 2)
-				this.selectedItems = [...this.selectedItems].filter(
-					innerItem => innerItem.id !== 2
-				);
-		},
 		isItemSelected(item) {
-			return this.selectedItems.some(innerItem => innerItem.id === item.id);
+			return this.selectedItems.some(innerItem => innerItem === item.id);
 		},
 		select(item) {
-			if (this.selectedItems.some(innerItem => innerItem.id === item.id)) {
-				this.selectedItems = this.selectedItems.filter(
-					innerItem => innerItem.id !== item.id
-				);
+			if (item.id === 2) {
+				return false;
+			}
+			if (this.selectedItems.some(innerItem => innerItem === item.id)) {
+				this.selectedItems = this.selectedItems.filter(innerItem => innerItem !== item.id);
 				return;
 			}
-			this.selectedItems.push(item);
+			this.selectedItems.push(item.id);
 		},
 	},
 	template: `<div>{{selectedItems}}
 	<v-data-table
-	show-select
+		show-select
 		id="v-data-table--default"
 		v-model="selectedItems"
 		:headers="headers"
         :items="items"
-		@item-selected="onSelect"
 	>
 		<template v-slot:item.data-table-select="{ isSelected, item }">
-			<farm-checkbox :value="item.id" :checked="isItemSelected(item)" @click="select(item)"/>
+			<farm-checkbox :value="item.id" :disabled="item.id === 2" :checked="isItemSelected(item)" @click="select(item)"/>
 		</template>
 		<template v-slot:bottom>
 		</template>
     </v-data-table>
 	</div>`,
 });
+
+export const TableWithCustomHeader = () => ({
+	components: { 'v-data-table': VDataTable, 'farm-datatable-header': DataTableHeader },
+	data() {
+		return {
+			headers,
+			items: [
+				{ id: 1, name: 'name 1' },
+				{ id: 2, name: 'name 2' },
+				{ id: 3, name: 'name 3' },
+			],
+			sortClicked: [],
+		};
+	},
+	methods: {
+		onSort: function () {},
+	},
+	template: `<div>
+	<v-data-table
+		id="v-data-table--default"
+		:headers="headers"
+        :items="items"
+	>
+		<template v-slot:headers="{ someSelected, allSelected }">
+			<farm-datatable-header
+				:headers="headers"
+				:sortClick="sortClicked"
+				:selectedIndex="1"
+				:headerProps="{ someItems: someSelected, everyItem: allSelected}"
+				:showCheckbox="false"
+				@onClickSort="onSort"
+			/>
+		</template>
+		<template v-slot:bottom>
+		</template>
+    </v-data-table>
+	</div>`,
+});
+
+export const TableWithCustomHeaderAndSelect = () => ({
+	components: { 'v-data-table': VDataTable, 'farm-datatable-header': DataTableHeader },
+	data() {
+		return {
+			headers: [
+				{
+					title: 'check',
+					sortable: true,
+					key: 'data-table-select',
+					align: 'left',
+				},
+				...headers,
+			],
+			items: [
+				{ id: 1, name: 'name 1' },
+				{ id: 2, name: 'name 2' },
+				{ id: 3, name: 'name 3' },
+			],
+			sortClicked: [],
+			selectedItems: [],
+		};
+	},
+	methods: {
+		onSort: function () {},
+		toggleSelectAll: function (event) {
+			if (event) {
+				this.selectedItems = [...this.selectedItems, ...this.items.map(item => item.id)];
+			} else {
+				this.selectedItems = this.selectedItems.filter(
+					selectedItem => this.items.indexOf(selectedItem) >= 0
+				);
+			}
+		},
+	},
+	template: `<farm-box>
+	{{ selectedItems }}
+	<v-data-table
+		id="v-data-table--default"
+		show-select
+		:headers="headers"
+        :items="items"
+		v-model="selectedItems"
+	>
+		<template v-slot:headers="{ someSelected, allSelected }">
+			<farm-datatable-header
+				:headers="headers"
+				:sortClick="sortClicked"
+				:selectedIndex="1"
+				:headerProps="{ someItems: someSelected, everyItem: allSelected}"
+				:showCheckbox="true"
+				@toggleSelectAll="toggleSelectAll"
+				@onClickSort="onSort"
+			/>
+		</template>
+		<template v-slot:bottom>
+		</template>
+    </v-data-table>
+	</farm-box>`,
+});
+
+export const TableWithCustomHeaderAndSort = () => ({
+	components: { 'v-data-table': VDataTable, 'farm-datatable-header': DataTableHeader },
+	data() {
+		return {
+			headers: [
+				{
+					title: 'check',
+					sortable: true,
+					key: 'data-table-select',
+					align: 'left',
+				},
+				...headers.map(h => ({ ...h, sortable: true })),
+			],
+			items: [
+				{ id: 1, name: 'name 1' },
+				{ id: 2, name: 'name 2' },
+				{ id: 3, name: 'name 3' },
+			],
+			sortClicked: [],
+			selectedItems: [],
+		};
+	},
+	methods: {
+		onSort: function (event) {
+			console.log(event);
+		},
+		toggleSelectAll: function (event) {
+			if (event) {
+				this.selectedItems = [...this.selectedItems, ...this.items.map(item => item.id)];
+			} else {
+				this.selectedItems = this.selectedItems.filter(
+					selectedItem => this.items.indexOf(selectedItem) >= 0
+				);
+			}
+		},
+	},
+	template: `<farm-box>
+	{{ selectedItems }}
+	<v-data-table
+		id="v-data-table--default"
+		show-select
+		:headers="headers"
+        :items="items"
+		v-model="selectedItems"
+	>
+		<template v-slot:headers="{ someSelected, allSelected }">
+			<farm-datatable-header
+				:headers="headers"
+				:sortClick="sortClicked"
+				:selectedIndex="1"
+				:headerProps="{ someItems: someSelected, everyItem: allSelected}"
+				:showCheckbox="false"
+				@toggleSelectAll="toggleSelectAll"
+				@onClickSort="onSort"
+			/>
+		</template>
+		<template v-slot:bottom>
+		</template>
+    </v-data-table>
+	</farm-box>`,
+});

package/src/helpers/date.ts

@@ -5,90 +5,72 @@ export const defaultFormat = (data, UTCTimeZone = true) => {
 	return data ? new Date(data).toLocaleDateString('pt-BR', UTCTimeZone ? options : {}) : null;
 };
 
-export const convertDate = (data) => {
-	if(!data) {
+export const convertDate = (data: string): string => {
+	if (!data) {
 		return '';
 	}
-	const newdate = data.split("/").reverse().join("-");
+	const newdate = data.split('/').reverse().join('-');
 	return newdate;
 };
 
 export const revertDate = (data: string): string => {
-	if(!data) {
+	if (!data) {
 		return '';
 	}
-	const newdate = data.split("-").reverse().join("/");
+	const newdate = data.split('-').reverse().join('/');
 	return newdate;
 };
 
-
 const checkLength = (value, length) => {
 	return parseInt(value.length, 10) === length;
 };
 
-const dateFormatting = (date) => {
-	if(date.includes('/')){
+const dateFormatting = date => {
+	if (date.includes('/')) {
 		const dateSplit = date.split('/');
 		return {
 			day: dateSplit[0],
 			month: dateSplit[1],
-			year: dateSplit[2]
+			year: dateSplit[2],
 		};
 	}
 	const dateSplit = date.split('-');
 	return {
 		day: dateSplit[2],
 		month: dateSplit[1],
-		year: dateSplit[0]
+		year: dateSplit[0],
 	};
 };
 
-const checkLeapYear = (year) => {
-	if (parseInt(year, 10) % 400 === 0){
-		return true;
-	}
-	if(parseInt(year, 10) % 4 === 0 && parseInt(year, 10) % 100 !== 0) {
+export const checkLeapYear = year => {
+	if (parseInt(year, 10) % 400 === 0) {
 		return true;
-	}else{
-		return false;
 	}
+	return parseInt(year, 10) % 4 === 0 && parseInt(year, 10) % 100 !== 0;
 };
 
-const getTotalDays = (month, isLeapYear) => {	
+export const getTotalDays = (month, isLeapYear) => {
 	const numberMonth = parseInt(month, 10);
-	if(numberMonth === 2) {
+	if (numberMonth === 2) {
 		return isLeapYear ? 29 : 28;
 	}
 	const monthsWith31Days = [1, 3, 5, 7, 8, 10, 12];
 	return monthsWith31Days.includes(numberMonth) ? 31 : 30;
 };
 
-const checkDay = (day, totalDays) => {	
-	if(parseInt(day, 10) > 0 && parseInt(day, 10) <= totalDays) {
-		return true;
-	}
-	return false;
-};
+export const checkDay = (day, totalDays) => parseInt(day, 10) > 0 && parseInt(day, 10) <= totalDays;
 
-const checkMonth = (month) => {	
-	if(parseInt(month, 10) > 0 && parseInt(month, 10) <= 12) {
-		return true;
-	}
-	return false;
-};
+export const checkMonth = month => parseInt(month, 10) > 0 && parseInt(month, 10) <= 12;
 
-export const checkDateValid = (date) => {
-	if(!checkLength(date, 10)){
+export const checkDateValid = date => {
+	if (!checkLength(date, 10)) {
 		return false;
 	}
-	const {day, month, year} = dateFormatting(date);
-	if(!checkMonth(month)){
+	const { day, month, year } = dateFormatting(date);
+	if (!checkMonth(month)) {
 		return false;
 	}
 	const isLeapYear = checkLeapYear(year);
 	const totalDays = getTotalDays(month, isLeapYear);
-	if(!checkDay(day, totalDays)){
-		return false;
-	}
-	return true;
+	return checkDay(day, totalDays);
 };

package/src/components/ListItem/ListItem.vue.bkpv2

@@ -1,84 +0,0 @@
-<template>
-	<li
-		@click="onClick"
-		:class="{
-			'farm-listitem': true,
-			[cssColorWithVariation]: cssColorWithVariation,
-			'farm-listitem--clickable': clickable || to,
-		}"
-	>
-		<router-link :to="to" v-if="to">
-			<slot></slot>
-		</router-link>
-		<template v-else>
-			<slot></slot>
-		</template>
-	</li>
-</template>
-<script lang="ts">
-import {  computed, PropType, toRefs } from 'vue';
-
-export default {
-	name: 'farm-listitem',
-	props: {
-		to: {
-			type: String,
-			default: null,
-		},
-		/**
-		 * Color on hover
-		 */
-		hoverColor: {
-			type: [String, null] as PropType<
-				| 'primary'
-				| 'secondary'
-				| 'secondary-green'
-				| 'secondary-golden'
-				| 'neutral'
-				| 'error'
-				| 'warning'
-				| 'info'
-				| 'extra-1'
-				| 'extra-2'
-			>,
-			default: null,
-		},
-		/**
-		 * Color variation on hover
-		 */
-		hoverColorVariation: {
-			type: [String, null] as PropType<'base' | 'lighten' | 'darken'>,
-			default: 'base',
-		},
-		/**
-		 * Is clickable
-		 */
-		clickable: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup(props, { emit }) {
-		const { hoverColor, hoverColorVariation } = toRefs(props);
-
-		const cssColorWithVariation = computed((): String => {
-			if (!hoverColor.value) {
-				return null;
-			}
-			return `farm-listitem--${hoverColor.value}-${hoverColorVariation.value}`;
-		});
-
-		const onClick = () => {
-			emit('click');
-		};
-
-		return {
-			cssColorWithVariation,
-			onClick,
-		};
-	},
-};
-</script>
-<style lang="scss" scoped>
-@import './ListItem';
-</style>

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

@@ -1,32 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-
-import ProgressBar from '../ProgressBar';
-
-describe('ProgressBar component', () => {
-	let wrapper;
-	let component;
-
-	beforeEach(() => {
-		wrapper = shallowMount(ProgressBar, {
-			propsData: { value: 40 },
-		});
-		component = wrapper.vm;
-	});
-
-	test('Created hook', () => {
-		expect(wrapper).toBeDefined();
-	});
-
-	describe('mount component', () => {
-		it('renders correctly', () => {
-			expect(wrapper.element).toBeDefined();
-		});
-	});
-
-	describe('computed properties', () => {
-		it('classes', () => {
-			expect(component.classes).toBeDefined();
-			expect(component.classes).toHaveProperty('farm-progressbar');
-		});
-	});
-});