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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "12.1.3",
+	"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,5 +28,6 @@ header {
 		align-items: center;
 		width: 100%;
 		margin-bottom: 0;
+		@include ellipsis;
 	}
 }

package/src/components/DialogHeader/DialogHeader.stories.js

@@ -61,3 +61,9 @@ export const TemplateSlot = () => ({
 		</farm-dialog-header>
 	</div>`,
 });
+
+export const VeryLongTitle = () => ({
+	template: `<div style="max-width: 480px; position: relative;">
+		<farm-dialog-header title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt leo nec orci hendrerit, in sagittis magna tincidunt." />
+	</div>`,
+});

package/src/components/IdCaption/IdCaption.scss

@@ -1,16 +1,25 @@
+@import '../../configurations/mixins';
+
 .idcaption {
 	display: flex;
 	min-height: 48px;
+	max-width: 100%;
+
 	.farm-icon-box {
 		margin-right: 8px;
 	}
 
+	&.farm-idcaption--noicon .idcaption__body {
+		max-width: 100%;
+	}
+
 	&__body {
 
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
 		align-content: flex-start;
+		max-width: calc(100% - 48px);
 
 		&--single {
 			justify-content: center;
@@ -21,22 +30,19 @@
 			margin-bottom: 0;
 			display: flex;
 			flex: none;
+			position: relative;
+			align-items: center;
+			height: 18px;
 
 			>span {
-				position: relative;
+				max-width: 100%;
+				@include ellipsis;
 			}
 		}
 
-		.farm-btn,
 		.farm-tooltip {
-			position: absolute;
-			right: -30px;
-			top: -8px;
+			padding-right: 1px;
 		}
 	}
 
-	.farm-btn--clickable {
-		position: absolute;
-		top: -50%;
-	}
 }

package/src/components/IdCaption/IdCaption.stories.js

@@ -23,11 +23,17 @@ export default {
 };
 
 export const Primary = () => ({
+    methods: {
+        onLinkClick() {
+            alert('onLinkClick');
+        }
+    },
 	template: `
     <farm-idcaption 
     icon="account-box-outline"
     copyText="texto a copiar"
     :link="true"
+    @onLinkClick="onLinkClick"
     >
         <template v-slot:title>
             Upper Line Text
@@ -77,7 +83,6 @@ export const NoUpperText = () => ({
     <farm-idcaption 
     icon="account-box-outline"
     copyText="texto a copiar"
-    :link="true"
     >
         <template v-slot:subtitle>
             Lower:Line Text
@@ -90,7 +95,6 @@ export const NoBottomText = () => ({
 	template: `
     <farm-idcaption 
     icon="account-box-outline" 
-    copyText="texto a copiar"
     :link="true"
     >
         <template v-slot:title>
@@ -100,10 +104,11 @@ export const NoBottomText = () => ({
     `,
 });
 
-export const NoTextToClip = () => ({
+export const NoTextToCopy = () => ({
 	template: `
     <farm-idcaption 
-    icon="account-box-outline" 
+    icon="account-box-outline"
+    copyText=""
     :link="true"
     >
         <template v-slot:title>
@@ -185,20 +190,20 @@ export const CustomTooltipColor = () => ({
     `,
 });
 
-
-export const Teste = () => ({
+export const LongTitles = () => ({
 	template: `
+    <farm-col sm="3">
     <farm-idcaption 
     icon="account-box-outline"
-    copy-text=""
+    copyText="texto a copiar"
     :link="true"
     >
         <template v-slot:title>
-            Upper Line Text
+            Upper Line Text Upper Line Text
         </template>
         <template v-slot:subtitle>
-            0
+            Lower: Line Text Line Text Line Text Line
         </template>
     </farm-idcaption>
-    `,
+    </farm-col>`,
 });

package/src/components/IdCaption/IdCaption.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="idcaption farm-idcaption">
+	<div :class="{ idcaption: true, 'farm-idcaption': true, 'farm-idcaption--noicon': !icon }">
 		<farm-icon-box v-if="icon" :icon="icon" :color="iconBoxColor" size="md" />
 		<div
 			:class="{ idcaption__body: true, 'idcaption__body--single': !hasTitle || !hasSubtitle }"
@@ -7,28 +7,28 @@
 			<farm-caption variation="medium" v-if="hasTitle">
 				<span>
 					<slot name="title"></slot>
-					<farm-btn
-						v-if="link"
-						icon
-						color="primary"
-						class="farm-btn--clickable"
-						@click="$emit('onLinkClick')"
-					>
-						<farm-icon size="xs">open-in-new</farm-icon>
-					</farm-btn>
 				</span>
+				<farm-btn
+					v-if="link"
+					icon
+					color="primary"
+					class="farm-btn--clickable"
+					@click="$emit('onLinkClick')"
+				>
+					<farm-icon size="xs">open-in-new</farm-icon>
+				</farm-btn>
 			</farm-caption>
 
 			<farm-caption variation="regular" color="gray" v-if="hasSubtitle">
 				<span>
 					<slot name="subtitle"></slot>
-					<farm-copytoclipboard
-						v-if="copyText"
-						:toCopy="copyText"
-						:successMessage="successMessage"
-						:tooltipColor="tooltipColor"
-					/>
 				</span>
+				<farm-copytoclipboard
+					v-if="copyText"
+					:toCopy="copyText"
+					:successMessage="successMessage"
+					:tooltipColor="tooltipColor"
+				/>
 			</farm-caption>
 		</div>
 	</div>

package/src/components/ModalPromptUser/ModalPromptUser.stories.js

@@ -71,4 +71,25 @@ export const ButtonLabels = () => ({
 			reabrir
 			</farm-btn>
 		</div>`,
+});
+
+export const Slot = () => ({
+	data() {
+		return {
+			showPrompt: false,
+		};
+	},
+	template: `<div>
+		<farm-prompt-user match="CONFIRMAR" title="Título" subtitle="" v-model="showPrompt">
+		<template v-slot:subtitle>
+			<farm-caption>Using caption and <farm-chip dense>chip</farm-chip></farm-caption>
+			<br />
+			Digite <strong>CONFIRMAR</strong> para habilitar
+		</template>
+		</farm-prompt-user>
+			click:
+			<farm-btn color="primary" @click="showPrompt = true;">
+			reabrir
+			</farm-btn>
+		</div>`,
 });

package/src/components/ModalPromptUser/ModalPromptUser.vue

@@ -5,6 +5,7 @@
 		</template>
 		<template v-slot:content>
 			<section class="modal-content">
+				<slot name="subtitle"></slot>
 				<farm-promptusertoconfirm
 					v-if="inputVal"
 					v-model="canConfirm"

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);
+		}
+	}
+}