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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "12.1.4",
+	"version": "12.2.0",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",

package/src/components/Chip/Chip.stories.js

@@ -87,4 +87,10 @@ export const CustomTypography = () => ({
 			<farm-bodytext :type="2">BodyText 2</farm-bodytext>
 		</farm-chip>
 	</div>`,
+});
+
+export const Ellipsis = () => ({
+	template: `<div style="width: 100px;">
+		<farm-chip color="primary">Very long text here</farm-chip>
+	</div>`,
 });

package/src/components/Chip/Chip.vue

@@ -8,7 +8,7 @@
 			'farm-chip--darken': variation === 'darken',
 		}"
 	>
-		<farm-typography tag="span" size="sm" color="white"> <slot></slot> </farm-typography>
+		<farm-typography tag="span" size="sm" color="white" ellipsis> <slot></slot> </farm-typography>
 	</span>
 </template>
 <script lang="ts">

package/src/components/DialogHeader/DialogHeader.scss

@@ -1,3 +1,5 @@
+@import '../../configurations/mixins';
+
 .farm-dialog-header__close {
 	position: absolute;
 	margin-top: 0;
@@ -26,8 +28,6 @@ header {
 		align-items: center;
 		width: 100%;
 		margin-bottom: 0;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
+		@include ellipsis;
 	}
 }

package/src/components/IdCaption/IdCaption.scss

@@ -1,3 +1,5 @@
+@import '../../configurations/mixins';
+
 .idcaption {
 	display: flex;
 	min-height: 48px;
@@ -34,9 +36,7 @@
 
 			>span {
 				max-width: 100%;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
+				@include ellipsis;
 			}
 		}
 

package/src/components/SelectModalOptions/SelectModalOptions.scss

@@ -0,0 +1,5 @@
+::v-deep .farm-textfield--input {
+	input {
+		cursor: pointer !important;
+	}
+}

package/src/components/SelectModalOptions/SelectModalOptions.vue

@@ -1,104 +1,87 @@
 <template>
-	<v-col cols="12" sm="12" :md="config.md ? config.md : 2" class="v-col-fieldset-default">
-		<div class="v-text-field">
-			<label :for="inputId">
-				{{ label }}
-				<span class="required" v-if="config.required">*</span>
-			</label>
-			<v-text-field
-				append-icon="mdi-magnify "
-				color="secondary"
-				outlined
-				v-on:keyup="clearTextField"
-				dense
-				readonly
-				:id="inputId"
-				:value="selectedValueText"
-				@click="openModal"
-			/>
-		</div>
-		<v-dialog content-class="modal-default modal-default-small" v-model="showModal">
-			<DialogHeader class="dialog-header" :title="modalTitle" @onClose="closeModal" />
+	<farm-col cols="12" :md="config.md ? config.md : 2">
+		<farm-label :for="inputId" :required="config.required">
+			{{ label }}
+		</farm-label>
+		<farm-textfield-v2
+			ref="searchTextField"
+			icon="magnify"
+			readonly
+			:id="inputId"
+			:value="selectedValueText"
+			@click="openModal"
+			@keyup="clearTextField"
+		/>
 
-			<v-main class="mt-9">
-				<Loader class="text-center mb-2" v-if="isLoading" />
-				<fieldset class="fieldset-default mx-4 mb-3" v-if="!isLoading">
-					<label for="searchInput"> {{ label }} </label>
-					<v-text-field
-						color="secondary"
-						id="searchInput"
-						outlined
-						dense
-						hide-details
-						:placeholder="placeholder"
-						v-model="searchValue"
-					/>
-				</fieldset>
+		<farm-modal v-model="showModal" size="sm" :offsetTop="48" :offsetBottom="68">
+			<template v-slot:header>
+				<farm-dialog-header :title="modalTitle" @onClose="closeModal" />
+			</template>
+			<template v-slot:content>
+				<div class="mx-n4">
+					<farm-box class="mt-3">
+						<farm-loader class="text-center mb-2" v-if="isLoading" />
+						<fieldset class="fieldset-default mx-4 mb-3" v-if="!isLoading">
+							<farm-label for="searchInput"> {{ label }} </farm-label>
+							<farm-textfield-v2
+								id="searchInput"
+								v-model="searchValue"
+								:placeholder="placeholder"
+							/>
+						</fieldset>
 
-				<v-data-table
-					v-if="!isLoading"
-					id="inputModalOptionsTable"
-					class="v-data-table__clickable v-data-table__select-modal"
-					hide-default-footer
-					hide-default-header
-					:items="items"
-					:headers="headers"
-					:options.sync="pagination"
-					:search="searchValue"
-					:custom-filter="customFilter"
-					@click:row="handleClick"
-					@pagination="handlePagination"
-				>
-					<template slot="no-data">
-						<DataTableEmptyWrapper />
-					</template>
-					<template slot="no-results">
-						<DataTableEmptyWrapper />
-					</template>
-					<template v-slot:[`item.label`]="{ item }">
-						<td :title="getItemLabel(item)" aria-role="button">
-							{{ getItemLabel(item) }}
-						</td>
-					</template>
+						<v-data-table
+							v-if="!isLoading"
+							id="inputModalOptionsTable"
+							class="v-data-table__clickable v-data-table__select-modal"
+							hide-default-footer
+							hide-default-header
+							:items="items"
+							:headers="headers"
+							:options.sync="pagination"
+							:search="searchValue"
+							:custom-filter="customFilter"
+							@click:row="handleClick"
+							@pagination="handlePagination"
+						>
+							<template slot="no-data">
+								<farm-emptywrapper />
+							</template>
+							<template slot="no-results">
+								<farm-emptywrapper />
+							</template>
+							<template v-slot:[`item.label`]="{ item }">
+								<td :title="getItemLabel(item)" aria-role="button">
+									{{ getItemLabel(item) }}
+								</td>
+							</template>
 
-					<template v-slot:footer>
-						<DataTablePaginator
-							class="my-6"
-							hidePerPageOptions
-							:initialLimitPerPage="pagination.itemsPerPage"
-							:page="pagination.page"
-							:totalPages="pagination.pages"
-							@onChangePage="onChangePage"
-						/>
-					</template>
-				</v-data-table>
-			</v-main>
-			<DialogFooter :hasConfirm="false" @onClose="closeModal" />
-		</v-dialog>
-	</v-col>
+							<template v-slot:footer>
+								<farm-datatable-paginator
+									class="my-6"
+									hidePerPageOptions
+									:initialLimitPerPage="pagination.itemsPerPage"
+									:page="pagination.page"
+									:totalPages="pagination.pages"
+									@onChangePage="onChangePage"
+								/>
+							</template>
+						</v-data-table>
+					</farm-box>
+				</div>
+			</template>
+
+			<template v-slot:footer>
+				<farm-dialog-footer :hasConfirm="false" @onClose="closeModal" />
+			</template>
+		</farm-modal>
+	</farm-col>
 </template>
-<script>
+<script lang="ts">
 import Vue from 'vue';
-import VTextField from 'vuetify/lib/components/VTextField';
-import { VCol } from 'vuetify/lib/components/VGrid';
-import { VMain } from 'vuetify/lib/components/VMain';
-import { VDataTable } from 'vuetify/lib/components/VDataTable/';
-import { VDialog } from 'vuetify/lib/components/VDialog/';
-import { DialogHeader, DialogFooter, DataTableEmptyWrapper, DataTablePaginator } from '../../main';
 
 export default Vue.extend({
 	name: 'farm-select-modal-options',
-	components: {
-		VTextField,
-		VCol,
-		VMain,
-		VDataTable,
-		VDialog,
-		DialogHeader,
-		DialogFooter,
-		DataTableEmptyWrapper,
-		DataTablePaginator,
-	},
 	props: {
 		/**
 		 * Input Label
@@ -248,8 +231,12 @@ export default Vue.extend({
 			this.showModal = true;
 		},
 		closeModal() {
+			this.focusOnInput();
 			this.showModal = false;
 		},
+		focusOnInput() {
+			this.$refs.searchTextField.$el.firstChild.firstElementChild.focus();
+		},
 		onChangePage(newPage) {
 			this.pagination.page = newPage;
 		},
@@ -263,6 +250,7 @@ export default Vue.extend({
 			this.inputVal = item[this.selectIdentifier];
 			this.showModal = false;
 			this.selectedItem = item;
+			this.focusOnInput();
 		},
 		customFilter(_, search, item) {
 			const label = this.getItemLabel(item);
@@ -277,11 +265,5 @@ export default Vue.extend({
 });
 </script>
 <style lang="scss" scoped>
-.v-text-field::v-deep {
-	margin-top: 0;
-	padding-top: 0;
-	input {
-		cursor: pointer;
-	}
-}
+@import 'SelectModalOptions.scss';
 </style>

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

@@ -19,6 +19,7 @@ describe('SelectModalOptions component', () => {
 			},
 		});
 		component = wrapper.vm;
+		jest.spyOn(component, 'focusOnInput').mockImplementationOnce(() => {});
 	});
 
 	test('SelectModalOptions created', () => {

package/src/components/TextArea/TextArea.scss

@@ -0,0 +1,62 @@
+.farm-textarea {
+	min-height: 64px;
+
+	&--textarea {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		border: 1px solid;
+		border-color: var(--farm-gray-lighten);
+		min-height: 36px;
+		border-radius: 5px;
+		padding: 8px 0 0 8px;
+		margin-bottom: 4px;
+		background-color: white;
+		width: 100%;
+
+
+		&>textarea {
+			flex: 1;
+			outline: none;
+			color: var(--farm-text-primary);
+			font-size: 12px;
+			font-weight: 400;
+			max-width: 100%;
+			max-height: 100%;
+		}
+	}
+
+	&--disabled {
+		textarea {
+			color: var(--farm-gray-base);
+		}
+	}
+
+	.farm-caption {
+		line-height: 12px;
+	}
+}
+
+.farm-textarea--touched.farm-textarea--validatable {
+	&.farm-textarea--error {
+		.farm-textarea {
+			&--textarea {
+				border-color: var(--farm-error-base);
+
+				&>textarea {
+					color: var(--farm-neutral-darken);
+				}
+			}
+		}
+	}
+}
+
+.farm-textarea--blured.farm-textarea--validatable:not(.farm-textarea--error) {
+	.farm-textarea--textarea {
+		border-color: var(--farm-primary-base);
+
+		&>textarea {
+			color: var(--farm-neutral-darken);
+		}
+	}
+}

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>