@farm-investimentos/front-mfe-components 13.1.1 → 14.0.0

package/package.json

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

package/src/components/Select/Select.scss

@@ -1,4 +1,11 @@
 @import '../TextFieldV2/TextFieldV2.scss';
+@import '../../configurations/mixins';
+
+.farm-select {
+	&__hint-text {
+		@include hintText;
+	}
+}
 
 .farm-listitem--selected {
 	background-color: var(--farm-neutral-lighten);

package/src/components/Select/Select.stories.js

@@ -78,6 +78,40 @@ export const Readonly = () => ({
 	</div>`,
 });
 
+export const HintText = () => ({
+	data() {
+		return {
+			v: 1,
+			items: [
+				{ value: 1, text: ' value 1' },
+				{ value: 2, text: ' value 2' },
+				{ value: 3, text: ' value 3' },
+			],
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-select v-model="v" :items="items" hint="Hint Text" :persistent-hint="false" />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const PersistentHintText = () => ({
+	data() {
+		return {
+			v: 1,
+			items: [
+				{ value: 1, text: ' value 1' },
+				{ value: 2, text: ' value 2' },
+				{ value: 3, text: ' value 3' },
+			],
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-select v-model="v" :items="items" hint="Hint Text" />
+		v-model: {{ v }}
+	</div>`,
+});
+
 export const Disabled = () => ({
 	data() {
 		return {

package/src/components/Select/Select.vue

@@ -49,9 +49,12 @@
 						v-bind="$attrs"
 						:id="$props.id"
 						v-model="selectedText"
+						ref="inputField"
 						@click="clickInput"
 						@keyup="onKeyUp"
 						@blur="onBlur"
+						@focusin="onFocus(true)"
+						@focusout="onFocus(false)"
 					/>
 					<farm-icon color="gray" :class="{ 'farm-icon--rotate': isVisible }">
 						menu-down
@@ -62,7 +65,15 @@
 		<farm-caption v-if="showErrorText" color="error" variation="regular">
 			{{ errorBucket[0] }}
 		</farm-caption>
-		<farm-caption v-if="hint && !showErrorText" color="gray" variation="regular">
+		<farm-caption
+			v-if="hint && !showErrorText"
+			class="farm-select__hint-text"
+			:class="{
+				'farm-select__hint-text--show': persistentHint || isFocus,
+			}"
+			color="gray"
+			variation="regular"
+		>
 			{{ hint }}
 		</farm-caption>
 	</div>
@@ -89,6 +100,13 @@ export default Vue.extend({
 			type: String,
 			default: null,
 		},
+		/**
+		 * Always show hint text
+		 */
+		persistentHint: {
+			type: Boolean,
+			default: true,
+		},
 		/**
 		 * Disabled the input
 		 */
@@ -201,12 +219,14 @@ export default Vue.extend({
 		const { rules, items, itemText, itemValue, disabled, multiple } = toRefs(props);
 		const innerValue = ref(props.value);
 		const isTouched = ref(false);
+		const isFocus = ref(false);
 		const isBlured = ref(false);
 		const isVisible = ref(false);
 		const selectedText = ref('');
 		const multipleValues = ref(Array.isArray(props.value) ? [...props.value] : []);
 		const checked = ref('1');
 		const notChecked = ref(false);
+		const inputField = ref();
 
 		const { errorBucket, valid, validatable } = validateFormStateBuilder();
 
@@ -290,7 +310,12 @@ export default Vue.extend({
 			emit('blur', event);
 		};
 
+		const onFocus = (focus: boolean) => {
+			isFocus.value = focus;
+		};
+
 		const selectItem = item => {
+			inputField.value.focus();
 			if (multiple.value) {
 				const alreadyAdded = multipleValues.value.findIndex(
 					val => val === item[itemValue.value]
@@ -308,6 +333,7 @@ export default Vue.extend({
 
 			innerValue.value = item[itemValue.value];
 			isVisible.value = false;
+
 			setTimeout(() => {
 				emit('change', innerValue.value);
 			}, 100);
@@ -380,6 +406,7 @@ export default Vue.extend({
 			hasError,
 			isTouched,
 			isBlured,
+			isFocus,
 			isVisible,
 			customId,
 			showErrorText,
@@ -388,6 +415,7 @@ export default Vue.extend({
 			selectItem,
 			onKeyUp,
 			onBlur,
+			onFocus,
 			clickInput,
 			updateSelectedTextValue,
 			makePristine,
@@ -396,6 +424,7 @@ export default Vue.extend({
 			isChecked,
 			multipleValues,
 			addLabelToMultiple,
+			inputField,
 		};
 	},
 });

package/src/components/TextArea/TextArea.scss

@@ -1,3 +1,5 @@
+@import '../../configurations/mixins';
+
 .farm-textarea {
 	min-height: 64px;
 
@@ -18,8 +20,7 @@
 		background-color: white;
 		width: 100%;
 
-
-		&>textarea {
+		& > textarea {
 			flex: 1;
 			outline: none;
 			color: var(--farm-text-primary);
@@ -39,6 +40,10 @@
 	.farm-caption {
 		line-height: 12px;
 	}
+
+	&__hint-text {
+		@include hintText;
+	}
 }
 
 .farm-textarea--touched.farm-textarea--validatable {
@@ -47,7 +52,7 @@
 			&--textarea {
 				border-color: var(--farm-error-base);
 
-				&>textarea {
+				& > textarea {
 					color: var(--farm-neutral-darken);
 				}
 			}
@@ -59,8 +64,8 @@
 	.farm-textarea--textarea {
 		border-color: var(--farm-primary-base);
 
-		&>textarea {
+		& > textarea {
 			color: var(--farm-neutral-darken);
 		}
 	}
-}
+}

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

@@ -107,6 +107,17 @@ export const HintText = () => ({
 	</div>`,
 });
 
+export const PersistentHintText = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px; display: flex;">
+		<farm-textarea v-model="v" hint="Hint text" persistent-hint />
+	</div>`,
+});
+
 export const Reset = () => ({
 	data() {
 		return {
@@ -133,4 +144,4 @@ export const Reset = () => ({
 		<farm-btn @click="reset">reset</farm-btn>
 
 	</div>`,
-});
+});

package/src/components/TextArea/TextArea.vue

@@ -26,12 +26,22 @@
 				@click="$emit('click')"
 				@keyup="onKeyUp"
 				@blur="onBlur"
+				@focusin="onFocus(true)"
+				@focusout="onFocus(false)"
 			/>
 		</div>
 		<farm-caption v-if="showErrorText" color="error" variation="regular">
 			{{ errorBucket[0] }}
 		</farm-caption>
-		<farm-caption v-if="hint && !showErrorText" color="gray" variation="regular">
+		<farm-caption
+			v-if="hint && !showErrorText"
+			class="farm-textarea__hint-text"
+			:class="{
+				'farm-textarea__hint-text--show': persistentHint || isFocus,
+			}"
+			color="gray"
+			variation="regular"
+		>
 			{{ hint }}
 		</farm-caption>
 	</div>
@@ -60,6 +70,13 @@ export default Vue.extend({
 			type: String,
 			default: null,
 		},
+		/**
+		 * Always show hint text
+		 */
+		persistentHint: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * Disabled the input
 		 */
@@ -109,6 +126,7 @@ export default Vue.extend({
 		const { rules } = toRefs(props);
 		const innerValue = ref(props.value);
 		const isTouched = ref(false);
+		const isFocus = ref(false);
 		const isBlured = ref(false);
 
 		const { errorBucket, valid, validatable } = validateFormStateBuilder();
@@ -164,6 +182,10 @@ export default Vue.extend({
 			emit('blur', event);
 		};
 
+		const onFocus = (focus: boolean) => {
+			isFocus.value = focus;
+		};
+
 		const reset = () => {
 			innerValue.value = '';
 			isTouched.value = true;
@@ -184,10 +206,12 @@ export default Vue.extend({
 			customId,
 			isTouched,
 			isBlured,
+			isFocus,
 			showErrorText,
 			validate,
 			onKeyUp,
 			onBlur,
+			onFocus,
 			reset,
 			makePristine,
 		};

package/src/components/TextFieldV2/TextFieldV2.scss

@@ -1,3 +1,5 @@
+@import '../../configurations/mixins';
+
 .farm-textfield {
 	height: 64px;
 
@@ -50,6 +52,10 @@
 	.farm-caption {
 		line-height: 12px;
 	}
+
+	&__hint-text {
+		@include hintText;
+	}
 }
 
 .farm-textfield--touched.farm-textfield--validatable {

package/src/components/TextFieldV2/TextFieldV2.stories.js

@@ -133,6 +133,17 @@ export const HintText = () => ({
 	</div>`,
 });
 
+export const PersistentHintText = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px; display: flex;">
+		<farm-textfield-v2 v-model="v" hint="Hint text" persistent-hint />
+	</div>`,
+});
+
 export const UpdateValue = () => ({
 	data() {
 		return {

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -36,6 +36,8 @@
 				@click="$emit('click')"
 				@keyup="onKeyUp"
 				@blur="onBlur"
+				@focusin="onFocus(true)"
+				@focusout="onFocus(false)"
 			/>
 			<button
 				type="button"
@@ -50,6 +52,10 @@
 		</farm-caption>
 		<farm-caption
 			v-if="!hideDetails && hint && !showErrorText"
+			class="farm-textfield__hint-text"
+			:class="{
+				'farm-textfield__hint-text--show': persistentHint || isFocus,
+			}"
 			color="gray"
 			variation="regular"
 		>
@@ -92,6 +98,13 @@ export default Vue.extend({
 			type: String,
 			default: null,
 		},
+		/**
+		 * Always show hint text
+		 */
+		persistentHint: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * Disabled the input
 		 */
@@ -160,6 +173,7 @@ export default Vue.extend({
 		const innerValue = ref(props.value);
 		const isTouched = ref(false);
 		const isBlured = ref(false);
+		const isFocus = ref(false);
 		const isUppercase = ref(props.uppercase);
 
 		const { errorBucket, valid, validatable } = validateFormStateBuilder();
@@ -218,6 +232,10 @@ export default Vue.extend({
 			emit('blur', event);
 		};
 
+		const onFocus = (focus: boolean) => {
+			isFocus.value = focus;
+		};
+
 		const reset = () => {
 			innerValue.value = '';
 			isTouched.value = true;
@@ -239,10 +257,12 @@ export default Vue.extend({
 			isTouched,
 			isBlured,
 			isUppercase,
+			isFocus,
 			showErrorText,
 			validate,
 			onKeyUp,
 			onBlur,
+			onFocus,
 			reset,
 			makePristine,
 		};

package/src/components/Tooltip/Tooltip.stories.js

@@ -78,9 +78,9 @@ export const Visibility = () => ({
 			some <em>sample</em> text<br />
 			some <em>sample</em> text<br />
             <template v-slot:activator="{ on, attrs }">
-			<v-btn @click="show = !show">
+			<farm-btn @click="show = !show">
 				toggle me
-			</v-btn>
+			</farm-btn>
             </template>
         </farm-tooltip>
 	</div>`,

package/src/components/layout/Col/Col.stories.js

@@ -121,29 +121,6 @@ export const TagP = () => ({
 	template: '<farm-col tag="p">col</farm-col>',
 });
 
-export const CompareToVCol = () => ({
-	data() {
-		return {
-			style,
-		};
-	},
-	template: `<div>
-
-		<h4>LG 3</h4>
-		<farm-col lg="3" :style="style">farm</farm-col>
-		<v-col lg="3" :style="style">v-col</v-col>
-
-		<h4>MD 3</h4>
-		<farm-col md="3" :style="style">farm</farm-col>
-		<v-col md="3" :style="style">v-col</v-col>
-
-
-		<h4>SM 3</h4>
-		<farm-col sm="3" :style="style">farm</farm-col>
-		<v-col sm="3" :style="style">v-col</v-col>
-		</div>`,
-});
-
 export const NoGutters = () => ({
 	data() {
 		return {

package/src/configurations/_mixins.scss

@@ -1,92 +1,103 @@
 @mixin forXsOnly {
-    @media (max-width: 599px) {
-        @content;
-    }
+	@media (max-width: 599px) {
+		@content;
+	}
 }
 
 @mixin upToSm {
-    @media (max-width: 959px) {
-        @content;
-    }
+	@media (max-width: 959px) {
+		@content;
+	}
 }
 
 @mixin upToMd {
-    @media (max-width: 1263px) {
-        @content;
-    }
+	@media (max-width: 1263px) {
+		@content;
+	}
 }
 
 @mixin fromXs {
-    @media (min-width: 600px) {
-        @content;
-    }
+	@media (min-width: 600px) {
+		@content;
+	}
 }
 
 @mixin fromSm {
-    @media (min-width: 960px) {
-        @content;
-    }
+	@media (min-width: 960px) {
+		@content;
+	}
 }
 
 @mixin fromMd {
-    @media (min-width: 1264px) {
-        @content;
-    }
+	@media (min-width: 1264px) {
+		@content;
+	}
 }
 
 @mixin fromLg {
-    @media (min-width: 1904px) {
-        @content;
-    }
+	@media (min-width: 1904px) {
+		@content;
+	}
 }
 
 @mixin addShadow {
-    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
+	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
 }
 
 @mixin buildCol($code) {
-    @for $i from 1 through 12 {
-        .farm-col--#{$code}-#{$i * 1} {
-            flex: 0 0 (100/12 * $i)+#{"%"};
-            max-width: (100/12 * $i)+#{"%"};
-        }
-    }
+	@for $i from 1 through 12 {
+		.farm-col--#{$code}-#{$i * 1} {
+			flex: 0 0 (100/12 * $i) +#{'%'};
+			max-width: (100/12 * $i) +#{'%'};
+		}
+	}
 }
 
 @mixin rippleStyles {
-    .farm-ripple {
-        border-radius: 50%;
-        cursor: pointer;
-        position: absolute;
-        transition: all 0.4s;
-        z-index: 1;
+	.farm-ripple {
+		border-radius: 50%;
+		cursor: pointer;
+		position: absolute;
+		transition: all 0.4s;
+		z-index: 1;
 
-        &:before {
-            transition: all 0.2s;
-            border-radius: inherit;
-            bottom: 0;
-            content: "";
-            position: absolute;
-            opacity: 0;
-            left: 0;
-            right: 0;
-            top: 0;
-            transform-origin: center center;
-            background-color: var(--farm-stroke-base);
-        }
-    }
+		&:before {
+			transition: all 0.2s;
+			border-radius: inherit;
+			bottom: 0;
+			content: '';
+			position: absolute;
+			opacity: 0;
+			left: 0;
+			right: 0;
+			top: 0;
+			transform-origin: center center;
+			background-color: var(--farm-stroke-base);
+		}
+	}
 }
 
 @mixin activateRipple {
-    &:hover {
-        .farm-ripple:before {
-            opacity: 0.3;
-        }
-    }
+	&:hover {
+		.farm-ripple:before {
+			opacity: 0.3;
+		}
+	}
 }
 
 @mixin ellipsis {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+@mixin hintText {
+	opacity: 0;
+	visibility: hidden;
+	transition: opacity 0.3s;
+
+	&--show {
+		opacity: 1;
+		visibility: visible;
+	}
+}

package/src/main.ts

@@ -9,7 +9,6 @@ import MultipleFilePicker from './components/MultipleFilePicker';
 import Tabs from './components/Tabs';
 import DialogHeader from './components/DialogHeader';
 import DialogFooter from './components/DialogFooter';
-import DefaultTextField from './components/DefaultTextField';
 import RangeDatePicker from './components/RangeDatePicker';
 import DatePicker from './components/DatePicker';
 import ManagersList from './components/ManagersList';
@@ -36,7 +35,6 @@ export {
 	Tabs,
 	DialogHeader,
 	DialogFooter,
-	DefaultTextField,
 	RangeDatePicker,
 	DatePicker,
 	ManagersList,