@farm-investimentos/front-mfe-components-vue3 0.4.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components-vue3",
-	"version": "0.4.1",
+	"version": "0.5.0",
 	"private": false,
 	"repository": {
 		"type": "git",
@@ -34,7 +34,8 @@
 		"core-js": "3.33.1",
 		"text-mask-addons": "^3.8.0",
 		"v-mask": "2.3.0",
-		"vuetify": "3.3.23",
+		"v-money3": "^3.24.0",
+		"vuetify": "3.4.0",
 		"webpack": "5.89.0"
 	},
 	"devDependencies": {

package/src/components/DataTableHeader/DataTableHeader.scss

@@ -8,7 +8,7 @@
 		position: absolute;
 		right: -20px;
 		top: -1px;
-		transition: transform 0.8s ease-in-out;
+		transition: transform 0.5s ease-in-out;
 
 		&.farm-icon--asc {
 			transform: rotateX(180deg);
@@ -18,15 +18,14 @@
 
 th.sortable {
 	cursor: pointer;
+
 	.farm-icon::before {
 		transition: all 0.3s linear;
 	}
-	
+
 	&:not(.active) {
-		&:hover {
-			.farm-icon::before {
-				color: var(--farm-bw-black-10) !important;
-			}
+		.farm-icon::before {
+			color: var(--farm-bw-black-10) !important;
 		}
 	}
 }

package/src/components/DataTableHeader/DataTableHeader.vue

@@ -29,7 +29,7 @@
 					{{ item.text }}
 
 					<farm-icon
-						v-if="item.sortable && sortClick[$index].show"
+						v-show="item.sortable"
 						v-bind:class="[
 							sortClick[$index][item.value] ? 'farm-icon--desc' : 'farm-icon--asc',
 						]"
@@ -42,7 +42,10 @@
 					</farm-icon>
 				</span>
 
-				<span v-if="isTHDataTableSelect(item) && showCheckbox" class="span-checkbox">
+				<span
+					v-if="isTHDataTableSelect(item) && showCheckbox"
+					class="span-checkbox"
+				>
 					<farm-checkbox
 						size="sm"
 						v-model="inputVal"
@@ -59,7 +62,6 @@
 <script lang="ts">
 /* eslint-disable */
 
-
 export default {
 	name: 'farm-datatable-header',
 	props: {

package/src/components/InputMoney/InputMoney.scss

@@ -0,0 +1,96 @@
+@import '../../configurations/mixins';
+
+.farm-input-money {
+	height: 64px;
+
+	&--hiddendetails {
+		height: 40px;
+	}
+
+	&--input {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		border: 1px solid;
+		border-color: var(--farm-bw-black-10);
+		height: 36px;
+		border-radius: 5px;
+		padding: 8px;
+		margin-bottom: 4px;
+		background-color: white;
+
+		>button {
+			display: flex;
+		}
+
+		&>input {
+			flex: 1;
+			outline: none;
+			color: var(--farm-bw-black-50);
+			font-size: 12px;
+			font-weight: 400;
+			max-width: 100%;
+		}
+
+		&--iconed>input {
+			max-width: calc(100% - 32px);
+		}
+
+		width: 100%;
+	}
+
+	&--focused .farm-input-money--input {
+		border-color: var(--farm-bw-black-30);
+	}
+
+	&--disabled {
+		input {
+			color: var(--farm-bw-black-30);
+		}
+
+		.farm-icon {
+			color: var(--farm-bw-black-30);
+			cursor: default;
+		}
+	}
+
+	.farm-caption {
+		line-height: 12px;
+	}
+
+	&__hint-text {
+		@include hintText;
+	}
+}
+
+.farm-input-money--touched.farm-input-money--blured.farm-input-money--validatable {
+	&.farm-input-money--error {
+		.farm-input-money {
+			&--input {
+				border-color: var(--farm-error-base);
+
+				&>input {
+					color: var(--farm-neutral-darken);
+				}
+
+				.farm-icon {
+					color: var(--farm-error-base);
+				}
+			}
+		}
+	}
+}
+
+.farm-input-money--blured.farm-input-money--validatable:not(.farm-input-money--error) {
+	.farm-input-money--input {
+		border-color: var(--farm-primary-base);
+
+		&>input {
+			color: var(--farm-neutral-darken);
+		}
+
+		.farm-icon {
+			color: var(--farm-primary-base);
+		}
+	}
+}

package/src/components/InputMoney/InputMoney.stories.js

@@ -0,0 +1,123 @@
+
+import InputMoney from './InputMoney.vue';
+
+
+export default {
+	title: 'Form/InputMoney',
+	component: InputMoney,
+	// decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `Input Money<br />
+				selector: <em>farm-input-money</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		design: {
+			type: 'figma',
+			url: '',
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Default = () => ({
+	data() {
+		return {
+			v: '1.200,00',
+		};
+	},
+	template: `<div style="width: 480px;">
+		<farm-label for="input-money">
+			label
+		</farm-label>
+		<farm-input-money id="input-money-default" v-model="v" />
+		<span>{{v}}</span>
+	</div>`,
+});
+
+
+export const Prefix = () => ({
+	data() {
+		return {
+			v: '1.200,00',
+		};
+	},
+	template: `<div style="width: 480px;">
+		<farm-label for="input-money">
+			label
+		</farm-label>
+		<farm-input-money prefix="R$ " id="input-money-prefix" v-model="v" />
+		<span>{{v}}</span>
+	</div>`,
+});
+
+
+export const Sufix = () => ({
+	data() {
+		return {
+			v: '1.200,00',
+		};
+	},
+	template: `<div style="width: 480px;">
+		<farm-label for="input-money">
+			label
+		</farm-label>
+		<farm-input-money suffix="%" id="input-money-prefix" v-model="v" />
+		<span>{{v}}</span>
+	</div>`,
+});
+
+
+export const Precision = () => ({
+	data() {
+		return {
+			v: '3,14159265358979323846',
+		};
+	},
+	template: `<div style="width: 480px;">
+		<farm-label for="input-money">
+			label
+		</farm-label>
+		<farm-input-money :precision="20" id="input-money-prefix" v-model="v" />
+		<span>{{v}}</span>
+	</div>`,
+});
+
+
+export const Icon = () => ({
+	data() {
+		return {
+			v: '1.200,00',
+		};
+	},
+	template: `<div style="width: 480px;">
+		<farm-label for="input-money">
+			label
+		</farm-label>
+		<farm-input-money id="input-money" v-model="v" icon="currency-usd" />
+		<span>{{v}}</span>
+	</div>`,
+});
+
+export const Required = () => ({
+	data() {
+
+		return {
+			v: '0,00',
+			rules: {
+				required: value => value !== "0,00" || 'Required field',
+			}
+		};
+	},
+	template: `<div style="width: 480px;">
+		<farm-label for="input-money">
+			label
+		</farm-label>
+		<farm-input-money id="input-money" v-model="v" :rules="[rules.required]" />
+		<span>{{v}}</span>
+	</div>`,
+});
+

package/src/components/InputMoney/InputMoney.vue

@@ -0,0 +1,316 @@
+<template>
+	<div
+		class="farm-input-money"
+		:class="{
+			'farm-input-money': true,
+			'farm-input-money--validatable': rules.length > 0,
+			'farm-input-money--touched': isTouched,
+			'farm-input-money--blured': isBlured,
+			'farm-input-money--error': hasError,
+			'farm-input-money--focused': isFocus && !readonly,
+			'farm-input-money--disabled': disabled,
+			'farm-input-money--hiddendetails': hideDetails,
+		}"
+		:id="customId"
+	>
+		<div
+			:class="{
+				'farm-input-money--input': true,
+				'farm-input-money--input--iconed': icon,
+			}"
+		>
+			<button
+				type="button"
+				v-if="icon && iconPosition === 'left'"
+				@click="$emit('onClickIcon')"
+			>
+				<farm-icon
+					color="gray"
+					size="20px"
+					>{{ icon }}</farm-icon
+				>
+			</button>
+			<input
+				v-bind="$attrs"
+				v-model.lazy="innerValue"
+				v-money3="{
+					decimal,
+					thousands,
+					prefix,
+					suffix,
+					precision,
+					masked: false,
+				}"
+				:id="$props.id"
+				:disabled="disabled"
+				:readonly="readonly"
+				:model-modifiers="{ number: true }"
+				@click="$emit('click')"
+				@keyup="onKeyUp"
+				@blur="onBlur"
+				@focusin="onFocus(true)"
+				@focusout="onFocus(false)"
+			/>
+			<button
+				type="button"
+				v-if="icon && iconPosition === 'right'"
+				@click="$emit('onClickIcon')"
+			>
+				<farm-icon
+					color="gray"
+					size="20px"
+					>{{ icon }}</farm-icon
+				>
+			</button>
+		</div>
+		<farm-caption
+			v-if="!hideDetails && showErrorText"
+			color="error"
+			variation="regular"
+		>
+			{{ errorBucket[0] }}
+		</farm-caption>
+		<farm-caption
+			v-if="!hideDetails && hint && !showErrorText"
+			class="farm-input-money__hint-text"
+			:class="{
+				'farm-input-money__hint-text--show': persistentHint || isFocus,
+			}"
+			color="gray"
+			variation="regular"
+		>
+			{{ hint }}
+		</farm-caption>
+	</div>
+</template>
+
+<script lang="ts">
+import { computed, onBeforeMount, PropType, ref, toRefs, watch } from 'vue';
+
+import deepEqual from '../../composition/deepEqual';
+import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
+import validateFormMethodBuilder from '../../composition/validateFormMethodBuilder';
+import validateFormStateBuilder from '../../composition/validateFormStateBuilder';
+import randomId from '../../helpers/randomId';
+
+export default {
+	name: 'farm-input-money',
+	inheritAttrs: false,
+	props: {
+		/**
+		 * v-model binding
+		 */
+		modelValue: { type: [String, Number], default: '' },
+		/**
+		 * Show icon?
+		 */
+		icon: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Icon position
+		 */
+		iconPosition: { type: String as PropType<'left' | 'right'>, default: 'right' },
+		/**
+		 * Show hint text
+		 */
+		hint: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Always show hint text
+		 */
+		persistentHint: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Disabled the input
+		 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Puts input in readonly state
+		 */
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+
+		errorMessage: String,
+		/**
+		 * Array of rules used for validation
+		 */
+		rules: {
+			type: Array as PropType<Array<Function>>,
+			default: () => [],
+		},
+		/**
+		 * Hides hint and validation errors
+		 */
+		hideDetails: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Input id
+		 */
+		id: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * Emitted when any key is pressed<br />
+		 * _event_
+		 */
+		keyup: {
+			type: Function,
+			// eslint-disable-next-line
+			default: (event: Event) => {},
+		},
+
+		/**
+		 * Currency symbol followed by a Space, like "R$ "
+		 */
+		prefix: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * Percentage for example: " %"
+		 */
+		suffix: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * Thousands separator
+		 */
+		thousands: {
+			type: String,
+			default: '.',
+		},
+		/**
+		 * Decimal separator
+		 */
+		decimal: {
+			type: String,
+			default: ',',
+		},
+		/**
+		 * How many decimal places
+		 */
+		precision: {
+			type: Number,
+			default: 2,
+		},
+	},
+	setup(props, { emit }) {
+		const { rules } = toRefs(props);
+		const innerValue = ref(props.modelValue);
+		const isTouched = ref(false);
+		const isBlured = ref(false);
+		const isFocus = ref(false);
+
+		const { errorBucket, valid, validatable } = validateFormStateBuilder();
+
+		let fieldValidator = validateFormFieldBuilder(rules.value);
+
+		const hasError = computed(() => {
+			return errorBucket.value.length > 0;
+		});
+		const customId = 'farm-input-money-' + (props.id || randomId(2));
+
+		const showErrorText = computed(() => hasError.value && isTouched.value && isBlured.value);
+
+		watch(
+			() => props.modelValue,
+			() => {
+				innerValue.value = props.modelValue;
+				validate(innerValue.value);
+			}
+		);
+
+		watch(
+			() => innerValue.value,
+			() => {
+				emit('update:modelValue', innerValue.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);
+			}
+		);
+
+		onBeforeMount(() => {
+			validate(innerValue.value);
+		});
+
+		let validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
+
+		const onKeyUp = (event: Event) => {
+			isTouched.value = true;
+			emit('keyup', event);
+
+			setTimeout(() => {
+				emit('change', innerValue.value);
+			}, 100);
+		};
+
+		const onBlur = (event: Event) => {
+			isBlured.value = true;
+			emit('blur', event);
+		};
+
+		const onFocus = (focus: boolean) => {
+			isFocus.value = focus;
+		};
+
+		const reset = () => {
+			innerValue.value = '';
+			isTouched.value = true;
+			emit('update:modelValue', innerValue.value);
+		};
+
+		const makePristine = () => {
+			isTouched.value = false;
+			isBlured.value = false;
+		};
+
+		return {
+			innerValue,
+			errorBucket,
+			valid,
+			validatable,
+			hasError,
+			customId,
+			isTouched,
+			isBlured,
+			isFocus,
+			showErrorText,
+			validate,
+			onKeyUp,
+			onBlur,
+			onFocus,
+			reset,
+			makePristine,
+		};
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import 'InputMoney';
+</style>

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

@@ -0,0 +1,53 @@
+import { shallowMount } from '@vue/test-utils';
+
+import InputMoney from '../InputMoney';
+
+describe('InputMoney component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(InputMoney, {
+			directives: {
+				mask: () => { },
+			},
+		});
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toBeDefined();
+		});
+	});
+
+	describe('methods', () => {
+		it('reset', () => {
+			component.reset();
+			expect(component.isTouched).toBeTruthy();
+			expect(component.innerValue).toEqual('');
+		});
+
+		it('onKeyUp', () => {
+			component.onKeyUp();
+			expect(component.isTouched).toBeTruthy();
+		});
+
+		it('onBlur', () => {
+			component.onBlur();
+			expect(component.isBlured).toBeTruthy();
+		});
+
+		it('makePristine', () => {
+			component.isTouched = true;
+			component.isBlured = true;
+			component.makePristine();
+			expect(component.isTouched).toBeFalsy();
+			expect(component.isBlured).toBeFalsy();
+		});
+	});
+});

package/src/components/InputMoney/index.ts

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

package/src/components/TextFieldV2/TextFieldV2.stories.js

@@ -40,10 +40,10 @@ export const Primary = () => ({
 		};
 	},
 	template: `<div style="width: 480px;">
-		<farm-label for="select_label">
+		<farm-label for="input-primary">
 			label
 		</farm-label>
-		<farm-textfield-v2 id="select_label" v-model="v" />
+		<farm-textfield-v2 id="input-primary" v-model="v" />
 		v-model: {{ v }}
 	</div>`,
 });
@@ -219,11 +219,11 @@ export const Mask = () => ({
 	},
 	template: `<div style="width: 480px">
 		<farm-label>CPF Mask ({{ mask }})</farm-label>
-		<farm-textfield-v2 v-model="v" :mask="mask" />
+		<farm-textfield-v2 id="input-mask-cpf" v-model="v" :mask="mask" />
 		v-model: {{ v }}
 
 		<farm-label>Number Mask (R$ ##.###.###,##)</farm-label>
-		<farm-textfield-v2 v-model="v2" :mask="currencyMask" />
+		<farm-textfield-v2 id="input-mask-number" v-model="v2" :mask="currencyMask" />
 		v-model: {{ v2 }}
 
 	</div>`,
@@ -242,7 +242,7 @@ export const ToggleVisibility = () => ({
 		},
 	},
 	template: `<div style="width: 480px">
-		<farm-textfield-v2 v-model="v" :type="visible ? 'text' : 'password'"  :icon="visible ? 'eye-off' : 'eye'" @onClickIcon="toggle" />
+		<farm-textfield-v2 id="input-visibility" v-model="v" :type="visible ? 'text' : 'password'"  :icon="visible ? 'eye-off' : 'eye'" @onClickIcon="toggle" />
 	</div>`,
 });
 
@@ -253,9 +253,10 @@ export const Uppercase = () => ({
 		};
 	},
 	template: `<div style="width: 480px;">
-		<farm-label for="select_label">
+		<farm-label for="input-uppercase">
 			label
 		</farm-label>
-		<farm-textfield-v2 id="select_label" v-model="v" uppercase/>
+		<farm-textfield-v2 id="input-uppercase" v-model="v" uppercase/>
 	</div>`,
 });
+