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

package/src/components/RadioGroup/RadioGroup.stories.js

@@ -0,0 +1,85 @@
+import RadioGroup from './RadioGroup';
+// import { withDesign } from 'storybook-addon-designs';
+
+export default {
+	title: 'Form/RadioGroup',
+	component: RadioGroup,
+	// decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `RadioGroup<br />
+				selector: <em>farm-radio-group</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			checkedValue: null,
+		};
+	},
+	template: `<div>
+	    <farm-radio-group v-model="checkedValue">
+			<farm-radio v-model="checkedValue" value="1" /><farm-label>value 1</farm-label>
+			<farm-radio v-model="checkedValue" value="2" /><farm-label>value 2</farm-label>
+			<farm-radio v-model="checkedValue" value="3" /><farm-label>value 3</farm-label>
+		</farm-radio-group>
+		selectedValue: {{ checkedValue  }}
+	</div>`,
+});
+
+export const Reset = () => ({
+	data() {
+		return {
+			checkedValue: null,
+		};
+	},
+	methods: {
+		reset() {
+			this.$refs.radioGroup.reset();
+		},
+	},
+	template: `<div>
+	    <farm-radio-group v-model="checkedValue" ref="radioGroup">
+			<farm-radio v-model="checkedValue" value="1" /><farm-label>value 1</farm-label>
+			<farm-radio v-model="checkedValue" value="2" /><farm-label>value 2</farm-label>
+			<farm-radio v-model="checkedValue" value="3" /><farm-label>value 3</farm-label>
+		</farm-radio-group>
+		selectedValue: {{ checkedValue  }}
+		<farm-btn @click="reset">reset</farm-btn>
+	</div>`,
+});
+
+export const Validate = () => ({
+	data() {
+		return {
+			checkedValue: null,
+			rules: {
+				required: value => !!value || 'Required field',
+			},
+		};
+	},
+	methods: {
+		reset() {
+			this.$refs.radioGroup.reset();
+		},
+	},
+	template: `<div style="width: 480px">
+		
+		<farm-radio-group v-model="checkedValue" ref="radioGroup" :rules="[rules.required]">
+			<farm-radio v-model="checkedValue" value="1" /><farm-label>value 1</farm-label>
+			<farm-radio v-model="checkedValue" value="2" /><farm-label>value 2</farm-label>
+			<farm-radio v-model="checkedValue" value="3" /><farm-label>value 3</farm-label>
+		</farm-radio-group>
+		selectedValue: {{ checkedValue  }}
+		<farm-btn @click="reset">reset</farm-btn>
+
+	</div>`,
+});

package/src/components/RadioGroup/RadioGroup.vue

@@ -0,0 +1,95 @@
+<template>
+	<div
+		:class="{
+			'farm-radio-group': true,
+		}"
+	>
+		<slot></slot>
+		<farm-caption v-if="showErrorText" color="error" variation="regular">
+			{{ errorBucket[0] }}
+		</farm-caption>
+	</div>
+</template>
+<script lang="ts">
+import {  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 {
+	name: 'farm-radio-group',
+	props: {
+		/**
+		 * v-model
+		 */
+		value: {
+			required: true,
+		},
+		errorMessage: String,
+		/**
+		 * Array of rules used for validation
+		 */
+		rules: {
+			type: Array as PropType<Array<Function>>,
+			default: () => [],
+		},
+	},
+	setup(props, { emit }) {
+		const { rules } = toRefs(props);
+		const innerValue = ref(props.value);
+		const { errorBucket, valid, validatable } = validateFormStateBuilder();
+		const isTouched = ref(false);
+
+		let fieldValidator = validateFormFieldBuilder(rules.value);
+
+		const hasError = computed(() => {
+			return errorBucket.value.length > 0;
+		});
+
+		const showErrorText = computed(() => hasError.value && isTouched.value);
+
+		watch(
+			() => props.value,
+			() => {
+				isTouched.value = true;
+				innerValue.value = props.value;
+				validate(innerValue.value);
+			}
+		);
+
+		watch(
+			() => props.rules,
+			(newVal, oldVal) => {
+				if (deepEqual(newVal, oldVal)) return;
+				fieldValidator = validateFormFieldBuilder(rules.value);
+				validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
+				validate(innerValue.value);
+			}
+		);
+
+		let validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
+
+		const reset = () => {
+			innerValue.value = null;
+			emit('input', innerValue.value);
+		};
+
+		onBeforeMount(() => {
+			validate(innerValue.value);
+		});
+
+		return {
+			innerValue,
+			errorBucket,
+			valid,
+			validatable,
+			hasError,
+			showErrorText,
+			isTouched,
+			reset,
+			validate,
+		};
+	},
+};
+</script>

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

@@ -0,0 +1,24 @@
+import { shallowMount } from '@vue/test-utils';
+import RadioGroup from '../RadioGroup';
+
+describe('RadioGroup component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(RadioGroup, {
+			propsData: {
+				value: 1,
+			},
+		});
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+});

package/src/components/RadioGroup/index.ts

@@ -0,0 +1,4 @@
+import RadioGroup from './RadioGroup.vue';
+
+export { RadioGroup };
+export default RadioGroup;

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

@@ -0,0 +1,76 @@
+// import { withDesign } from 'storybook-addon-designs';
+import RangeDatePicker from './RangeDatePicker';
+
+export default {
+	title: 'Form/RangeDatePicker',
+	component: RangeDatePicker,
+	// decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `Range Input Date Picker<br />
+				selector: <em>farm-input-rangedatepicker</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1503%3A810',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			date: null,
+		};
+	},
+	template: `<div style='max-width: 320px'>
+	<farm-input-rangedatepicker inputId="input-custom-id" v-model="date" />
+	date: {{ date }}
+	</div>`,
+});
+
+export const InitialValue = () => ({
+	data() {
+		return {
+			date: ['2023-10-01', '2023-10-05'],
+		};
+	},
+	template: `<div style='max-width: 320px'>
+		<farm-input-rangedatepicker inputId="input-custom-id" v-model="date" />
+		date: {{ date }}
+	</div>`,
+});
+
+export const MinMax = () => ({
+	data() {
+		return {
+			date: null,
+		};
+	},
+	template: `<farm-input-rangedatepicker inputId="input-custom-id" min="2023-09-17" max="2023-11-15" v-model="date" />`,
+});
+
+export const Reset = () => ({
+	data() {
+		return {
+			date: null,
+		};
+	},
+	methods: {
+		click() {
+			this.$refs.datepickerExemple.clear();
+		},
+	},
+	template: `<div style="width: 480px">
+	<farm-input-rangedatepicker ref="datepickerExemple" inputId="input-custom-id" v-model="date" />
+	date: {{ date }}
+		<farm-btn @click="click">
+			reset
+		</farm-btn>
+	</div>`,
+});

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -0,0 +1,201 @@
+<template>
+	<farm-contextmenu
+		stay-open
+		v-model="menuField"
+		ref="contextmenu"
+		maxHeight="auto"
+		bottom
+		popup-width="320"
+	>
+		<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"
+			:range="true"
+			:day-names="['S', 'T', 'Q', 'Q', 'S', 'S', 'D']"
+		/>
+		<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
+				v-model="fieldRange"
+				icon="calendar"
+				readonly
+				:id="inputId"
+				:rules="required ? [requiredRule] : []"
+			/>
+		</template>
+	</farm-contextmenu>
+</template>
+<script>
+import { defaultFormat as dateDefaultFormatter } from '../../helpers/date';
+import { formatDatePickerHeader } from '../../helpers';
+
+/**
+ * Componente de input com datepicker para range de data
+ */
+export default {
+	name: 'farm-input-rangedatepicker',
+	props: {
+		/**
+		 * String usada no como id do input e for do label
+		 */
+		inputId: {
+			type: String,
+			required: true,
+		},
+		/**
+		 * Variável usada como v-model
+		 */
+		modelValue: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * Variável usada para definir a data máxima (yyyy-mm-dd)
+		 */
+		max: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Variável usada para definir a data minima (yyyy-mm-dd)
+		 */
+		min: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Required field (inside form)
+		 */
+		required: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		const s = this.formatDateRange(this.modelValue);
+		return {
+			menuField: false,
+			dateField: this.modelValue,
+			fieldRange: s,
+			requiredRule: value => {
+				return !!value || value != '' || 'Campo obrigatório';
+			},
+		};
+	},
+	watch: {
+		modelValue(newValue) {
+			if (newValue?.length === 1) {
+				newValue.push(newValue[0]);
+			}
+			this.dateField = newValue;
+			this.fieldRange = this.formatDateRange(newValue);
+		},
+		fieldRange(newValue) {
+			if (!newValue) {
+				this.dateField = [];
+				this.save();
+			}
+		},
+	},
+	methods: {
+		formatDateRange(date) {
+			if (!date || date.length === 0) return '';
+			const dateStart = date[0];
+			const dateEnd = date[1];
+			return dateDefaultFormatter(dateStart) + ' a ' + dateDefaultFormatter(dateEnd);
+		},
+		save() {
+			
+			this.formatDateRange(this.dateField);
+			this.inputVal = this.dateField;
+			this.menuField = false;
+			this.closeDatepicker();
+		},
+		clear() {
+			this.dateField = [];
+			this.save();
+		},
+		openDatepicker() {
+			this.menuField = true;
+		},
+		closeDatepicker() {
+			this.menuField = false;
+			this.$refs.contextmenu.inputValue = false;
+		},
+		formatDatePickerHeader,
+	},
+	computed: {
+		inputVal: {
+			get() {
+				return this.modelValue;
+			},
+			set(val) {
+				this.$emit('update:modelValue', val);
+			},
+		},
+		canConfirm() {
+			return !this.dateField || this.dateField.length == 1;
+		},
+		isDisabled() {
+			if (this.modelValue) {
+				return this.modelValue.length === 0 ? true : false;
+			}
+			return true;
+		},
+		isDateFieldDisabled() {
+			if (this.dateField) {
+				return this.dateField.length === 0 ? true : false;
+			}
+			return true;
+		},
+		minDate() {
+			if (this.min) {
+				return new Date(this.min);
+			}
+			return null;
+		},
+		maxDate() {
+			if (this.max) {
+				return new Date(this.max);
+			}
+			return null;
+		},
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import '../DatePicker/DatePicker.scss';
+</style>

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

@@ -0,0 +1,107 @@
+import { shallowMount } from '@vue/test-utils';
+import RangeDatePicker from '../RangeDatePicker';
+
+describe('RangeDatePicker component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(RangeDatePicker, {
+			propsData: {
+				inputId: 'someid',
+			},
+		});
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('computed values', () => {
+		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 null', 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 null', 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('min max correctly', async () => {
+			await wrapper.setProps({
+				inputId: 'someid',
+				min: '2022-01-17',
+				max: '2022-01-31',
+			});
+			expect(component.inputId).toBe('someid');
+			expect(component.min).toBe('2022-01-17');
+			expect(component.max).toBe('2022-01-31');
+		});
+	});
+
+	describe('methods', () => {
+		it('openDatepicker', () => {
+			component.openDatepicker();
+			expect(component.menuField).toBeTruthy();
+		});
+
+		it('closeDatepicker', () => {
+			component.closeDatepicker();
+			expect(component.menuField).toBeFalsy();
+		});
+	});
+
+	describe('watchs', () => {
+		it('should show dateField and fieldRange correctly when it has one date', () => {
+			component.$options.watch.modelValue.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.modelValue.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/RangeDatePicker/index.ts

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

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

@@ -0,0 +1,15 @@
+import ResetTableRowSelection from './ResetTableRowSelection';
+
+export default {
+	title: 'Interactions/ResetTableRowSelection',
+	component: ResetTableRowSelection,
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			items: [1, 2, 3],
+		};
+	},
+	template: `<ResetTableRowSelection :length="items.length" />`,
+});

package/src/components/ResetTableRowSelection/ResetTableRowSelection.vue

@@ -0,0 +1,35 @@
+<template>
+	<div class="ml-6 mr-3 d-flex align-center">
+		Total de linhas selecionadas: {{ length }}
+		<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>
+
+
+export default {
+	name: 'farm-tablerowselection',
+	props: {
+		/**
+		 * Current items length selected
+		 */
+		length: {
+			default: 0,
+			type: Number,
+		},
+	},
+	methods: {
+		reset() {
+			this.$emit('onReset');
+		},
+	},
+};
+</script>
+<style lang="scss" scoped>
+div {
+	height: 2rem;
+}
+</style>

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

@@ -0,0 +1,33 @@
+import { shallowMount } from '@vue/test-utils';
+import ResetTableRowSelection from '../ResetTableRowSelection';
+
+describe('ResetTableRowSelection component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ResetTableRowSelection, {
+			propsData: {
+				length: 2,
+			},
+		});
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('methods', () => {
+		it('Should reset', () => {
+			component.reset();
+			expect(wrapper.emitted().onReset).toBeDefined();
+		});
+	});
+});

package/src/components/ResetTableRowSelection/index.ts

@@ -0,0 +1,4 @@
+import ResetTableRowSelection from './ResetTableRowSelection.vue';
+
+export { ResetTableRowSelection };
+export default ResetTableRowSelection;

package/src/components/ResourceMetaInfo/ResourceMetaInfo.scss

@@ -0,0 +1,14 @@
+.farm-resource-metainfo {
+	display: inline-flex;
+	flex-direction: column;
+	gap: 8px;
+
+	& div {
+		align-items: center;
+		display: inline-flex;
+
+		& .farm-icon {
+			margin-right: 8px;
+		}
+	}
+}