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

package/package.json

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

package/src/components/DialogHeader/DialogHeader.scss

@@ -26,5 +26,8 @@ header {
 		align-items: center;
 		width: 100%;
 		margin-bottom: 0;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: 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,23 @@
 .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 +28,21 @@
 			margin-bottom: 0;
 			display: flex;
 			flex: none;
+			position: relative;
+			align-items: center;
+			height: 18px;
 
 			>span {
-				position: relative;
+				max-width: 100%;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: 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"