@farm-investimentos/front-mfe-components 12.1.4 → 12.2.1

package/src/components/TextArea/TextArea.vue

@@ -0,0 +1,188 @@
+<template>
+	<div
+		class="farm-textarea"
+		:class="{
+			'farm-textarea': true,
+			'farm-textarea--validatable': rules.length > 0,
+			'farm-textarea--touched': isTouched,
+			'farm-textarea--blured': isBlured,
+			'farm-textarea--error': hasError,
+			'farm-textarea--disabled': disabled,
+			'farm-textarea--hiddendetails': hideDetails,
+		}"
+	>
+		<div
+			:class="{
+				'farm-textarea--textarea': true,
+			}"
+		>
+			<textarea
+				v-bind="$attrs"
+				v-model="innerValue"
+				:rows="$props.rows"
+				:disabled="disabled"
+				:readonly="readonly"
+				@click="$emit('click')"
+				@keyup="onKeyUp"
+				@blur="onBlur"
+			/>
+		</div>
+		<farm-caption v-if="showErrorText" color="error" variation="regular">
+			{{ errorBucket[0] }}
+		</farm-caption>
+		<farm-caption v-if="hint && !showErrorText" color="gray" variation="regular">
+			{{ hint }}
+		</farm-caption>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue, { computed, onBeforeMount, PropType, ref, toRefs, watch } from 'vue';
+import validateFormStateBuilder from '../../composition/validateFormStateBuilder';
+import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
+import validateFormMethodBuilder from '../../composition/validateFormMethodBuilder';
+import deepEqual from '../../composition/deepEqual';
+
+export default Vue.extend({
+	name: 'farm-textarea',
+	inheritAttrs: true,
+	props: {
+		/**
+		 * v-model binding
+		 */
+		value: { type: [String, Number], default: '' },
+		/**
+		 * Show hint text
+		 */
+		hint: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * 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: () => [],
+		},
+		/**
+		 * Textarea rows
+		 */
+		rows: {
+			default: 5,
+			type: [String, Number],
+		},
+		/**
+		 * Hides hint and validation errors
+		 */
+		hideDetails: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props, { emit }) {
+		const { rules } = toRefs(props);
+		const innerValue = ref(props.value);
+		const isTouched = ref(false);
+		const isBlured = ref(false);
+
+		const { errorBucket, valid, validatable } = validateFormStateBuilder();
+
+		let fieldValidator = validateFormFieldBuilder(rules.value);
+
+		const hasError = computed(() => {
+			return errorBucket.value.length > 0;
+		});
+
+		const showErrorText = computed(() => hasError.value && isTouched.value);
+
+		watch(
+			() => props.value,
+			() => {
+				innerValue.value = props.value;
+				validate(innerValue.value);
+			}
+		);
+
+		watch(
+			() => innerValue.value,
+			() => {
+				emit('input', innerValue.value);
+				emit('change', 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);
+		};
+
+		const onBlur = (event: Event) => {
+			isBlured.value = true;
+			emit('blur', event);
+		};
+
+		const reset = () => {
+			innerValue.value = '';
+			isTouched.value = true;
+			emit('input', innerValue.value);
+		};
+
+		const makePristine = () => {
+			isTouched.value = false;
+			isBlured.value = false;
+		};
+
+		return {
+			innerValue,
+			errorBucket,
+			valid,
+			validatable,
+			hasError,
+			isTouched,
+			isBlured,
+			showErrorText,
+			validate,
+			onKeyUp,
+			onBlur,
+			reset,
+			makePristine,
+		};
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import 'TextArea';
+</style>

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

@@ -0,0 +1,48 @@
+import { shallowMount } from '@vue/test-utils';
+import TextArea from '../TextArea';
+
+describe('TextArea component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(TextArea);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	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/TextArea/index.ts

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

package/src/components/TextFieldV2/TextFieldV2.scss

@@ -1,6 +1,10 @@
 .farm-textfield {
 	height: 64px;
 
+	&--hiddendetails {
+		height: 40px;
+	}
+
 	&--input {
 		display: flex;
 		align-items: center;

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

@@ -230,27 +230,3 @@ export const ToggleVisibility = () => ({
 		<farm-textfield-v2 v-model="v" :type="visible ? 'text' : 'password'"  :icon="visible ? 'eye-off' : 'eye'" @onClickIcon="toggle" />
 	</div>`,
 });
-
-
-export const Compare = () => ({
-	data() {
-		return {
-			v1: '',
-			rules: {
-				required: value => !!value || 'Required field',
-				email: v =>
-					!v ||
-					/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
-					'Must be an e-mail',
-			},
-		};
-	},
-	template: `<div style="width: 480px">
-
-		<farm-label required>Required and e-mail</farm-label>
-		<farm-textfield-v2 v-model="v1" :rules="[rules.required, rules.email]" />
-
-		<farm-textfield v-model="v1" :rules="[rules.required, rules.email]" />
-
-	</div>`,
-});

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -8,12 +8,15 @@
 			'farm-textfield--blured': isBlured,
 			'farm-textfield--error': hasError,
 			'farm-textfield--disabled': disabled,
+			'farm-textfield--hiddendetails': hideDetails,
 		}"
 	>
-		<div :class="{
-			'farm-textfield--input': true,
-			'farm-textfield--input--iconed': icon
-		}">
+		<div
+			:class="{
+				'farm-textfield--input': true,
+				'farm-textfield--input--iconed': icon,
+			}"
+		>
 			<button
 				type="button"
 				v-if="icon && iconPosition === 'left'"
@@ -24,7 +27,7 @@
 			<input
 				v-bind="$attrs"
 				v-model="innerValue"
-				v-mask="mask"		
+				v-mask="mask"
 				:disabled="disabled"
 				:readonly="readonly"
 				@click="$emit('click')"
@@ -39,10 +42,14 @@
 				<farm-icon color="gray" size="20px">{{ icon }}</farm-icon>
 			</button>
 		</div>
-		<farm-caption v-if="showErrorText" color="error" variation="regular">
+		<farm-caption v-if="!hideDetails && showErrorText" color="error" variation="regular">
 			{{ errorBucket[0] }}
 		</farm-caption>
-		<farm-caption v-if="hint && !showErrorText" color="gray" variation="regular">
+		<farm-caption
+			v-if="!hideDetails && hint && !showErrorText"
+			color="gray"
+			variation="regular"
+		>
 			{{ hint }}
 		</farm-caption>
 	</div>
@@ -111,6 +118,13 @@ export default Vue.extend({
 			default: '',
 			type: [String, Function],
 		},
+		/**
+		 * Hides hint and validation errors
+		 */
+		hideDetails: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { emit }) {
 		const { rules } = toRefs(props);

package/src/components/Typography/Typography.scss

@@ -4,6 +4,7 @@
 
 .farm-typography {
 	font-size: 16px;
+	color: var(--farm-text-primary);
 
 	&[bold] {
 		font-weight: bold;
@@ -25,16 +26,12 @@
 		margin-bottom: auto;
 	}
 
-	color: var(--farm-text-primary);
-
 	&--lighten {
 		color: var(--farm-text-secondary);
 	}
 
 	&.farm-typography--ellipsis {
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
+		@include ellipsis;
 	}
 
 	@each $k in $theme-colors-list {

package/src/configurations/_mixins.scss

@@ -76,10 +76,17 @@
         }
     }
 }
+
 @mixin activateRipple {
     &:hover {
         .farm-ripple:before {
             opacity: 0.3;
         }
     }
+}
+
+@mixin ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }

package/src/main.ts

@@ -87,6 +87,7 @@ export * from './components/RadioGroup';
 export * from './components/Select';
 export * from './components/Stepper';
 export * from './components/Switcher';
+export * from './components/TextArea';
 export * from './components/TextField';
 export * from './components/TextFieldV2';
 export * from './components/Tooltip';

package/src/examples/inputs/Password.stories.js

@@ -1,42 +0,0 @@
-export default {
-	title: 'Form/Textfield/Examples/Password',
-	component: Password,
-	parameters: {
-		docs: {
-			description: {
-				component: `How to toggle password visivility.<br />
-- Password visibility: hidden -> eye on icon (the click/tap will show the password)
-- Password visibility: show -> eye off icon (the click/tap will hide the password)`,
-			},
-		},
-	},
-};
-
-export const Password = () => ({
-	data() {
-		return {
-			password: '',
-			showHidden: false,
-		};
-	},
-	template: `
-        <v-col cols="12" sm="12" md="4" class="v-col-fieldset-default pl-0">
-        <label>
-			Toggle visibility from password field
-		</label>
-        <v-text-field
-            color="secondary"
-            dense
-            outlined
-            v-model="password"
-            :append-icon="showHidden ? 'mdi-eye-off' : 'mdi-eye'"
-            :type="showHidden ? 'text' : 'password'"
-            @click:append="showHidden = !showHidden"
-        />
-        </v-col>
-    `,
-});
-
-Password.story = {
-	name: 'Básico',
-};

package/src/examples/inputs/Select.stories.js

@@ -1,27 +0,0 @@
-export default {
-	title: 'Form/Select/Examples',
-	parameters: {
-		docs: {
-			description: {
-				component: `How to show select (v-select)<br />
-`,
-			},
-		},
-	},
-};
-
-export const VSelect = () => ({
-	data() {
-		return {
-			items: ['SP', 'RJ', 'MG', 'RS', 'BA'],
-		};
-	},
-	template: `
-        <v-col cols="12" sm="6" md="2" class="v-col-fieldset-default pl-0">
-            <v-select dense outlined :items="items" />
-        </v-col>`,
-});
-
-VSelect.story = {
-	name: 'Básico',
-};