@farm-investimentos/front-mfe-components-vue3 0.0.1

package/src/components/DatePicker/DatePicker.vue

@@ -0,0 +1,292 @@
+<template>
+	<farm-contextmenu
+		stay-open
+		v-model="menuField"
+		ref="contextmenu"
+		maxHeight="auto"
+		popup-width="320"
+		:bottom="position === 'bottom'"
+		:top="position === 'top'"
+	>
+		<VueDatePicker
+			calendar-class-name="dp-custom-calendar"
+			inline
+			auto-apply
+			model-type="yyyy-MM-dd"
+			locale="pt-BR"
+			v-model="dateField"
+			:min-date="minDate"
+			:max-date="maxDate"
+			:allowed-dates="allowedDaysList"
+			:day-names="['S', 'T', 'Q', 'Q', 'S', 'S', 'D']"
+			:start-date="internalPickerDate"
+		/>
+
+		<div class="picker__actions">
+			<farm-btn
+				plain
+				title="Limpar"
+				color="primary"
+				:disabled="isDisabled"
+				@click="clear"
+			>
+				Limpar
+			</farm-btn>
+			<farm-btn
+				outlined
+				class="btn-cancel"
+				title="Cancelar"
+				@click="closeDatepicker"
+			>
+				Cancelar
+			</farm-btn>
+
+			<farm-btn
+				class="ml-2"
+				title="Confirmar"
+				:disabled="isDateFieldDisabled"
+				@click="save()"
+			>
+				Confirmar <farm-icon>check</farm-icon>
+			</farm-btn>
+		</div>
+		<template v-slot:activator="{}">
+			<farm-textfield-v2
+				icon="calendar"
+				v-model="fieldRange"
+				autocomplete="off"
+				ref="inputCalendar"
+				:readonly="readonly"
+				:mask="`${readonly ? '' : '##/##/####'}`"
+				:id="inputId"
+				:rules="[checkDateValid, checkMax, checkMin, checkRequire, checkIsInAllowedDates]"
+				@keyup="keyUpInput"
+			/>
+		</template>
+	</farm-contextmenu>
+</template>
+<script lang="ts">
+import { PropType } from 'vue';
+import { convertDate, checkDateValid, revertDate } from '../../helpers/date';
+import { formatDatePickerHeader } from '../../helpers';
+/**
+ * Componente de input com datepicker para data
+ */
+export default {
+	name: 'farm-input-datepicker',
+	props: {
+		/**
+		 * Input's id
+		 */
+		inputId: {
+			type: String,
+			required: true,
+		},
+		/**
+		 * v-model bind
+		 */
+		modelValue: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * Max date (ISO format)
+		 */
+		max: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Min date (ISO format)
+		 */
+		min: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Min date (ISO format)
+		 */
+		position: {
+			type: String as PropType<'top' | 'bottom' | 'center'>,
+			default: 'bottom',
+		},
+		/**
+		 * Allowed days to be selected and validated
+		 */
+		allowedDays: {
+			type: Array,
+			default: () => null,
+		},
+		allowedDatesValidator: {
+			type: Function,
+			default: () => true,
+		},
+		/**
+		 * Current month/year to show when opened
+		 */
+		pickerDate: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * Required field (inside form)
+		 */
+		required: {
+			type: Boolean,
+			default: false,
+		},
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			internalPickerDate: this.pickerDate,
+			menuField: false,
+			dateField: this.modelValue,
+			fieldRange: revertDate(this.modelValue),
+			checkDateValid: value => {
+				if (value.length > 0) {
+					const isValid = checkDateValid(value);
+					return isValid ? true : 'Data inválida';
+				}
+				return true;
+			},
+			checkRequire: value => {
+				return this.required ? !!value || value != '' || 'Campo obrigatório' : true;
+			},
+			checkMax: value => {
+				if (!this.required && value.length === 0) {
+					return true;
+				}
+				return this.max && new Date(convertDate(value)) > new Date(this.max)
+					? 'A data está fora do período permitido'
+					: true;
+			},
+			checkMin: value => {
+				if (!this.required && value.length === 0) {
+					return true;
+				}
+				if (this.min) {
+					const dateSelected = new Date(convertDate(value));
+					const dateMin = new Date(convertDate(this.min));
+					if (dateSelected.getTime() >= dateMin.getTime()) {
+						return true;
+					}
+					return 'A data está fora do período permitido';
+				}
+				return true;
+			},
+			checkIsInAllowedDates: value => {
+				const dateSelected = convertDate(value);
+
+				if (!this.required && value.length === 0) {
+					return true;
+				}
+
+				return this.allowedDatesValidator(dateSelected) || 'Data inválida';
+			},
+		};
+	},
+	watch: {
+		modelValue(newValue) {
+			this.dateField = newValue;
+		},
+		fieldRange(newValue) {
+			if (!newValue) {
+				this.dateField = '';
+				this.save();
+			}
+		},
+		menuField(newValue) {
+			if (newValue) {
+				this.dateField = this.modelValue;
+			}
+		},
+	},
+	methods: {
+		save() {
+			this.inputVal = this.dateField;
+			this.menuField = false;
+			this.fieldRange = revertDate(this.dateField);
+			this.closeDatepicker();
+		},
+		clear() {
+			this.dateField = '';
+			this.save();
+			this.$refs.inputCalendar.reset();
+		},
+		validation(date) {
+			const pattern =
+				/^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[13-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/gm;
+			return pattern.test(date);
+		},
+		keyUpInput(event) {
+			let newValue = event.target.value;
+			if (this.validation(newValue) && newValue.length === 10) {
+				const [day, month, year] = newValue.split('/');
+				this.dateField = `${year}-${month}-${day}`;
+				this.save();
+			}
+		},
+		getUniversalDate(d) {
+			const onlyDMY = d.split(' ')[0];
+			const arr = onlyDMY.split('/');
+			return new Date(arr[2], arr[1] - 1, arr[0]);
+		},
+		openDatepicker(event: MouseEvent) {
+			this.menuField = true;
+			event.stopPropagation();
+		},
+		closeDatepicker() {
+			this.menuField = false;
+			this.$refs.contextmenu.inputValue = false;
+		},
+		formatDatePickerHeader,
+	},
+	computed: {
+		inputVal: {
+			get() {
+				return this.modelValue;
+			},
+			set(val) {
+				this.$emit('update:modelValue', val);
+			},
+		},
+		isDisabled(): boolean {
+			if (this.modelValue) {
+				return this.modelValue.length === 0;
+			}
+			return true;
+		},
+		isDateFieldDisabled() {
+			if (this.dateField) {
+				return this.dateField.length === 0;
+			}
+			return true;
+		},
+		minDate() {
+			if (this.min) {
+				return new Date(this.min);
+			}
+			return null;
+		},
+		maxDate() {
+			if (this.max) {
+				return new Date(this.max);
+			}
+			return null;
+		},
+		allowedDaysList() {
+			if (this.allowedDays) {
+				return this.allowedDays.map(day => new Date().setDate(day));
+			}
+			return null;
+		},
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import './DatePicker.scss';
+</style>

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

@@ -0,0 +1,108 @@
+import { shallowMount } from '@vue/test-utils';
+import DatePicker from '../DatePicker';
+
+describe('DatePicker component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(DatePicker, {
+			propsData: {
+				inputId: 'someid',
+			},
+		});
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('computed properties', () => {
+		it('get inputVal', () => {
+			expect(component.inputVal).toBeFalsy();
+		});
+
+		it('get inputVal', () => {
+			component.inputVal = 'teste';
+			expect(wrapper.emitted()['update:modelValue']).toBeDefined();
+		});
+		it('isDisabled to be true when value is empty', async () => {
+			await wrapper.setProps({
+				modelValue: '',
+			});
+			expect(component.isDisabled).toBe(true);
+		});
+
+		it('isDisabled to be true when value is empty', async () => {
+			await wrapper.setProps({
+				modelValue: null,
+			});
+			expect(component.isDisabled).toBe(true);
+		});
+		it('isDisabled to be false when value is valid', async () => {
+			await wrapper.setProps({
+				modelValue: '2023-02-02',
+			});
+			expect(component.isDisabled).toBe(false);
+		});
+
+		it('isDateFieldDisabled to be true when dateField is empty', async () => {
+			await wrapper.setProps({
+				modelValue: '',
+			});
+			expect(component.isDateFieldDisabled).toBe(true);
+		});
+
+		it('isDateFieldDisabled to be true when dateField is empty', async () => {
+			await wrapper.setProps({
+				modelValue: null,
+			});
+			expect(component.isDateFieldDisabled).toBe(true);
+		});
+
+		it('isDateFieldDisabled to be false when dateField is valid', async () => {
+			await wrapper.setProps({
+				modelValue: '2023-02-02',
+			});
+			expect(component.isDateFieldDisabled).toBe(false);
+		});
+
+		it('should allow all dates', async () => {
+			await wrapper.setProps({
+				allowedDates: () => true
+			});
+			expect(component.checkIsInAllowedDates('2023-07-03')).toBe(true);
+			expect(component.checkIsInAllowedDates('2099-12-20')).toBe(true);
+			expect(component.checkIsInAllowedDates('1985-01-23')).toBe(true);
+		});
+
+		/*
+		it('should allow only dates in year 2077', async () => {
+			await wrapper.setProps({
+				allowedDates: (value) => new Date(value).getFullYear() === 2077
+			});
+			expect(component.checkIsInAllowedDates('2077-05-03')).toBe(true);
+			expect(component.checkIsInAllowedDates('2023-05-03')).toBe('Data inválida');
+		});
+		*/
+	});
+
+	describe('methods', () => {
+		it('openDatepicker', () => {
+			component.openDatepicker({ stopPropagation: jest.fn() });
+			expect(component.menuField).toBeTruthy();
+		});
+
+		it('closeDatepicker', () => {
+			component.closeDatepicker();
+			expect(component.menuField).toBeFalsy();
+		});
+	});
+});

package/src/components/DatePicker/customDatePicker.scss

@@ -0,0 +1,79 @@
+.dp__main {
+    font-family: inherit;
+    justify-content: center;
+
+    :deep(.dp__calendar_row,) {
+        width: calc( 35px * 7);
+    }
+
+    :deep(.dp__calendar_header) {
+        width: calc( 35px * 7);
+    }
+
+    :deep(.dp__cell_inner) {
+        font-size: 12px;
+        font-weight: 500;
+        color: var(--farm-neutral-darken);
+        padding: 0;
+        width: 35px;
+        border: 0;
+
+        &.dp__cell_offset {
+            color: var(--farm-gray-lighten);
+        }
+
+        &.dp__cell_disabled {
+            color: var(--farm-gray-lighten);
+        }
+
+        &.dp__range_start, &.dp__range_end {
+            background-color: var(--farm-primary-base);
+            color: white;
+        }
+        &.dp__range_between {
+            background-color: var(--farm-primary-lighten);
+            color: var(--farm-primary-darken);
+        }
+    }
+
+    :deep(.dp__menu) {
+        border: 0;
+    }
+
+    :deep(.dp--tp-wrap) {
+        display: none;
+    }
+
+    :deep(.dp__active_date) {
+        background-color: var(--farm-primary-base);
+        color: white;
+    }
+
+    :deep(.dp__today) {
+        border: 1px solid var(--farm-primary-base);
+    }
+
+    :deep(.dp__calendar_header_separator) {
+        display: none;
+    }
+
+    :deep(.dp__calendar_header) {
+        color: var(--farm-neutral-darken);
+        font-size: 16px;
+        font-weight: 700;
+        margin-top: 16px;
+    }
+
+    :deep(.dp__calendar_row) {
+        margin: 0;
+    }
+
+}
+
+.picker__actions {
+    padding: 16px 8px 0;
+    border-top: 1px solid var(--farm-stroke-base);
+    margin-bottom: 16px;
+    margin-left: -4px;
+    margin-right: -4px;
+}

package/src/components/DatePicker/index.ts

@@ -0,0 +1,3 @@
+import DatePicker from './DatePicker.vue';
+
+export default DatePicker;

package/src/components/DatePicker/vDatePicker.scss

@@ -0,0 +1,214 @@
+.v-picker__actions {
+    padding: 16px 8px 0;
+    border-top: 1px solid var(--farm-stroke-base);
+    margin-bottom: 16px;
+    margin-left: -4px;
+    margin-right: -4px;
+}
+
+.v-date-picker-header__value {
+    text-align: left;
+
+    button:first-letter {
+        text-transform: capitalize;
+    }
+
+    button:hover:after {
+        border-top-color: var(--farm-primary-base);
+    }
+
+    button:after {
+        position: absolute;
+        content: '';
+        width: 0px;
+        height: 0px;
+        border-top: 0.25rem solid var(--farm-secondary-green-base);
+        border-right: 0.25rem solid transparent;
+        border-bottom: 0.25rem solid transparent;
+        border-left: 0.25rem solid transparent;
+        margin-left: 0.5rem;
+        margin-top: 0.5rem;
+    }
+}
+
+.v-date-picker-header {
+    display: grid;
+    grid-template-columns: 1fr 60px 36px;
+    grid-template-areas: ' a b c ';
+
+    .v-btn:nth-child(1) {
+        grid-area: b;
+    }
+
+    >div {
+        grid-area: a;
+    }
+
+    .v-btn:nth-child(3) {
+        grid-area: c;
+    }
+}
+
+.v-date-picker-table__current.v-btn--active {
+    color: white;
+}
+
+.v-date-picker-header {
+    padding: 0;
+    margin-top: 16px;
+    margin-bottom: 16px;
+    margin-left: 16px;
+
+    .mdi-chevron-left::before,
+    .mdi-chevron-right::before {
+        color: var(--farm-neutral-darken);
+        font-size: 20px;
+        font-weight: 900;
+    }
+}
+
+.v-picker__body:has(div > .v-date-picker-years) {
+    li {
+        color: var(--farm-neutral-darken);
+        font-size: 12px;
+        font-weight: 500;
+        width: 70px;
+        margin: 0 auto;
+        border-radius: 5px;
+
+        &.active {
+            color: #fff;
+            background-color: var(--farm-primary-base);
+            border: 1px solid var(--farm-primary-base);
+        }
+
+        &:hover:not(.active) {
+            background-color: var(--farm-primary-lighten);
+        }
+    }
+}
+
+.v-date-picker-header__value {
+    button {
+        padding-left: 0;
+    }
+}
+
+.v-date-picker-table {
+    padding: 0 40px;
+    margin-bottom: 24px;
+    height: auto;
+
+    table {
+        height: 100%;
+        border-spacing:0;
+        border-collapse: collapse;
+
+        td {
+            height: 32px;
+            width: 32px;
+            overflow: hidden;
+            padding: 0;
+            display: table-cell;
+        }
+    }
+
+    table thead th {
+        color: var(--farm-neutral-darken);
+        font-size: 16px;
+        font-weight: 700;
+    }
+
+    table tbody td .v-btn {
+        color: var(--farm-neutral-darken);
+        font-size: 12px;
+        font-weight: 500;
+    }
+
+    table tbody td .v-btn.v-btn--disabled {
+        color: var(--farm-gray-lighten);
+    }
+
+    table tbody td .v-btn.v-date-picker-table__current,
+    .v-btn.v-btn--active {
+        border-radius: 5px;
+        border-color: var(--farm-primary-base);
+        border-width: 2px;
+    }
+
+    table tbody td .v-btn.v-date-picker-table__current {
+        color: var(--farm-primary-base);
+    }
+
+    table tbody td .v-btn.v-btn--active {
+        color: white;
+    }
+
+    table tbody td .v-btn--rounded {
+        border-radius: 5px;
+    }
+
+    table tbody td .v-btn {
+        &:not(.v-btn--active):hover::before {
+            background-color: var(--farm-primary-lighten);
+            opacity: 1;
+        }
+
+        &::before {
+            background-color: transparent;
+        }
+    }
+
+}
+
+&.rangedatepicker .v-date-picker-table {
+    table tbody td .v-btn.v-btn--active {
+        &:not(.v-date-picker--first-in-range, .v-date-picker--last-in-range) {
+            background: var(--farm-primary-lighten);
+            color: var(--farm-primary-base);
+            border-radius: 0;
+            //width: 37px;
+        }
+
+        &.v-date-picker--first-in-range,
+        &.v-date-picker--last-in-range {
+            //width: 37px;
+        }
+
+        &.v-date-picker--first-in-range {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-top-left-radius: 5px;
+            border-bottom-left-radius: 5px;
+        }
+
+        &.v-date-picker--last-in-range {
+            border-top-right-radius: 5px;
+            border-bottom-right-radius: 5px;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+
+        &.v-date-picker--last-in-range.v-date-picker--first-in-range {
+            border-radius: 5px;
+        }
+    }
+}
+
+&.rangedatepicker.invert-date .v-date-picker-table {
+    table tbody td .v-btn.v-btn--active {
+        &.v-date-picker--first-in-range {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-top-right-radius: 5px;
+            border-bottom-right-radius: 5px;
+        }
+
+        &.v-date-picker--last-in-range {
+            border-top-left-radius: 5px;
+            border-bottom-left-radius: 5px;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+    }
+}