@farm-investimentos/front-mfe-components 11.8.0 → 11.8.2

package/src/components/Select/Select.vue

@@ -18,7 +18,7 @@
 					clickable
 					hoverColorVariation="lighten"
 					hover-color="primary"
-					:key="'contextmenu_item_' + item.text"
+					:key="'contextmenu_item_' + item[itemText]"
 					:class="{ 'farm-listitem--selected': item[itemValue] === innerValue }"
 					@click="selectItem(item)"
 				>
@@ -165,6 +165,7 @@ export default Vue.extend({
 
 		onBeforeMount(() => {
 			validate(innerValue.value);
+			
 			const selectedItem = items.value.find(
 				item => item[itemValue.value] === innerValue.value
 			);

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

@@ -31,5 +31,10 @@ describe('Select component', () => {
 			component.onBlur();
 			expect(component.isBlured).toBeTruthy();
 		});
+
+		it('clickInput', () => {
+			component.clickInput();
+			expect(component.isTouched).toBeTruthy();
+		});
 	});
 });

package/src/components/TableContextMenu/TableContextMenu.scss

@@ -1,17 +1,7 @@
-.v-list-item.v-list-item--link {
-	border-bottom: 1px solid var(--farm-stroke-base);
-}
-
-.v-list-item__title {
-	display: flex;
-	align-items: center;
-
-
-}
-
-::v-deep .v-application--wrap {
-	min-height: auto;
-	font-family: 'Montserrat', sans-serif !important;
+.farm-context-menu {
+	&--disabled {
+		pointer-events: none;
+	}
 }
 
 .farm-listitem {
@@ -21,4 +11,4 @@
 		vertical-align: sub;
 		margin-right: 8px;
 	}
-}
+}

package/src/components/TableContextMenu/TableContextMenu.stories.js

@@ -28,6 +28,12 @@ export const Primary = () => ({
 	</div>`,
 });
 
+export const Disabled = () => ({
+	template: `<div style="padding-left: 80px">
+		<farm-context-menu disabled :items="[{ label: 'Remover', icon: { color: 'error', type: 'open-in-new' } }]" />
+	</div>`,
+});
+
 export const Icons = () => ({
 	template: `<div style="padding-left: 80px">
 		<farm-context-menu
@@ -70,7 +76,10 @@ export const OnRightSide = () => ({
 		return {
 			items: [
 				{ label: 'Novo', icon: { type: 'open-in-new' } },
-				{ label: 'Nome bem longo sem quebrar linha', icon: { color: 'secondary', type: 'open-in-new' } },
+				{
+					label: 'Nome bem longo sem quebrar linha',
+					icon: { color: 'secondary', type: 'open-in-new' },
+				},
 				{ label: 'Remover', icon: { color: 'error', type: 'delete' } },
 			],
 		};
@@ -78,4 +87,4 @@ export const OnRightSide = () => ({
 	template: `<div style="padding-left: 80px; display: flex; justify-content: end;">
 		<farm-context-menu ref="multi" :items="items" />
 	</div>`,
-});
+});

package/src/components/TableContextMenu/TableContextMenu.vue

@@ -1,7 +1,16 @@
 <template>
-	<farm-contextmenu v-model="value">
-		<template v-slot:activator="{}">
-			<farm-btn icon @click="toggleValue" title="Abrir opções" color="secondary">
+	<farm-contextmenu
+		:class="{ 'farm-context-menu': true, 'farm-context-menu--disabled': disabled }"
+		v-model="value"
+	>
+		<template v-slot:activator>
+			<farm-btn
+				icon
+				title="Abrir opções"
+				color="secondary"
+				:disabled="disabled"
+				@click="toggleValue"
+			>
 				<farm-icon size="md">dots-horizontal</farm-icon>
 			</farm-btn>
 		</template>
@@ -47,6 +56,13 @@ export default Vue.extend({
 			type: Array as PropType<Array<IContextMenuOption>>,
 			required: true,
 		},
+		/**
+		 * Is disabled?
+		 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {

package/src/components/TextFieldV2/TextFieldV2.scss

@@ -22,6 +22,11 @@
 			color: var(--farm-text-primary);
 			font-size: 12px;
 			font-weight: 400;
+			max-width: 100%;
+		}
+
+		&--iconed>input {
+			max-width: calc(100% - 32px);
 		}
 
 		width: 100%;

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -10,7 +10,10 @@
 			'farm-textfield--disabled': disabled,
 		}"
 	>
-		<div class="farm-textfield--input">
+		<div :class="{
+			'farm-textfield--input': true,
+			'farm-textfield--input--iconed': icon
+		}">
 			<button
 				type="button"
 				v-if="icon && iconPosition === 'left'"