@farm-investimentos/front-mfe-components 12.1.3 → 12.2.0

package/src/components/TextArea/TextArea.stories.js

@@ -0,0 +1,136 @@
+import { withDesign } from 'storybook-addon-designs';
+import TextArea from './TextArea.vue';
+
+export default {
+	title: 'Form/TextArea',
+	component: TextArea,
+	decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `Text Area<br />
+				selector: <em>farm-textarea</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/jnZXo2e0nRJ3fVXl4Et8t4/%E2%9C%8D-Design-System-%7C-BACKUP-(10%2F10%2F2022)?node-id=2491%3A4487',
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px;">
+		<farm-textarea v-model="v" />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const Rows = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px;">
+		<farm-textarea v-model="v" rows="10" />
+		<farm-textarea v-model="v" rows="3" />
+	</div>`,
+});
+
+export const Disabled = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-textarea v-model="v" disabled />
+	</div>`,
+});
+
+export const Readonly = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-textarea v-model="v" readonly />
+	</div>`,
+});
+
+export const Validate = () => ({
+	data() {
+		return {
+			v1: 'input 1',
+			v2: '',
+			v4: '',
+			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 field</farm-label>
+		<farm-textarea v-model="v1" :rules="[rules.required]" />
+
+		<farm-label>E-mail</farm-label>
+		<farm-textarea v-model="v2" :rules="[rules.email]" />
+
+		<farm-label required>Required field with hint</farm-label>
+		<farm-textarea v-model="v4" :rules="[rules.required]" hint="hint text" />
+
+	</div>`,
+});
+
+export const HintText = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px; display: flex;">
+		<farm-textarea v-model="v" hint="Hint text" />
+	</div>`,
+});
+
+export const Reset = () => ({
+	data() {
+		return {
+			v: 'input text',
+			rules: {
+				required: value => !!value || 'Required field',
+			},
+		};
+	},
+	methods: {
+		reset() {
+			this.$refs.input.reset();
+			this.$refs.inputValidatable.reset();
+		},
+	},
+	template: `<div style="width: 480px">
+
+		<farm-label>Not Required</farm-label>
+		<farm-textarea v-model="v" ref="input" />
+		
+		<farm-label required>Required</farm-label>
+		<farm-textarea v-model="v" ref="inputValidatable" :rules="[rules.required]" />
+		
+		<farm-btn @click="reset">reset</farm-btn>
+
+	</div>`,
+});

package/src/components/TextArea/TextArea.vue

@@ -0,0 +1,179 @@
+<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,
+		}"
+	>
+		<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],
+        }
+	},
+	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.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/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',
-};