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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "12.2.0",
+	"version": "12.2.2",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -10,7 +10,7 @@
 		"serve": "vue-cli-service serve",
 		"build": "npm run build:components",
 		"build:components": "vue-cli-service build --target lib --name front-mfe-components src/main.ts",
-		"lint": "vue-cli-service lint",
+		"lint": "vue-cli-service lint --fix",
 		"storybook": "start-storybook -p 6006",
 		"build-storybook": "build-storybook",
 		"test:unit": "jest --updateSnapshot",

package/src/components/AlertBox/AlertBox.stories.js

@@ -62,3 +62,17 @@ export const Colors = () => ({
 		<farm-alertbox class="mt-3" v-for="color of colors" :key="'random_10_' + color" :color="color" icon="book" dismissable>alert box</farm-alertbox>
 		</div> `,
 });
+
+export const withDismissableShowAgain = () => ({
+	data() {
+		return {
+			v: true,
+		}
+	},
+	template: `<div>
+		<farm-alertbox v-model="v" dismissable>alert box</farm-alertbox>
+		<farm-btn v-if="!v" @click="v = true;">
+			show
+		</farm-btn>
+	</div>`,
+});

package/src/components/AlertBox/AlertBox.vue

@@ -44,6 +44,7 @@
 
 <script lang="ts">
 import Vue, { ref, PropType } from 'vue';
+import valueWatcher from './valueWatcher';
 
 export default Vue.extend({
 	name: 'farm-alertbox',
@@ -87,20 +88,29 @@ export default Vue.extend({
 			>,
 			default: 'primary',
 		},
+		value: {
+			type: Boolean,
+			default: true,
+		},
 	},
-	setup() {
+	setup(props, { emit }) {
 		const visible = ref(true);
 
 		function close() {
 			visible.value = false;
+			emit('input', false);
 		}
 
+		valueWatcher(props, visible);
+
 		return {
 			visible,
 			close,
 		};
 	},
 });
+
+
 </script>
 <style lang="scss" scoped>
 @import './AlertBox';

package/src/components/AlertBox/__tests__/valueWatcher.spec.js

@@ -0,0 +1,15 @@
+import { ref, reactive } from 'vue';
+import valueWatcher from '../valueWatcher';
+
+describe('valueWatcher', () => {
+	it('Should change value for visible', done => {
+		const visible = ref(false);
+		const mockProps = reactive({ value: false });
+		valueWatcher(mockProps, visible);
+		mockProps.value = true;
+		setTimeout(() => {
+			expect(visible.value).toBeTruthy();
+			done();
+		});
+	});
+});

package/src/components/AlertBox/valueWatcher.ts

@@ -0,0 +1,10 @@
+import { Ref, watch } from 'vue';
+
+export default function (props, visible: Ref) {
+	watch(
+		() => props.value,
+		(newValue: boolean) => {
+			visible.value = newValue;
+		}
+	);
+}

package/src/components/Buttons/DefaultButton/DefaultButton.scss

@@ -160,15 +160,17 @@
 		background-color: var(--farm-#{$color}-base);
 		color: white;
 
-		::v-deep .farm-btn__content {
-			i.mdi {
-				color: white;
-			}
-
-			.farm-btn__content i.mdi {
-				color: black;
+		&:not(.farm-btn--outlined):not(.farm-btn--plain):not(.farm-btn--icon) {
+			::v-deep .farm-btn__content {
+				i.mdi {
+					color: white;
+				}
+				.farm-btn__content i.mdi {
+					color: black;
+				}
 			}
 		}
+		
 	}
 
 	.farm-btn--extra,

package/src/components/Buttons/DefaultButton/DefaultButton.stories.js

@@ -172,17 +172,17 @@ export const Icons = () => ({
 	template: `<div class="buttons-container">
 		<h4>Full</h4>
         <farm-btn v-for="color of colors":key="'random_3_' + color" :color="color">
-            <v-icon>mdi-book</v-icon> book
+			<farm-icon>book</farm-icon> book
         </farm-btn>
 
 		<h4>Outlined</h4>
         <farm-btn v-for="color of colors":key="color + 'outlined'" :color="color" outlined>
-            <v-icon>mdi-book</v-icon> book
+			<farm-icon>book</farm-icon> book
         </farm-btn>
 
 		<h4>Plain</h4>
         <farm-btn v-for="color of colors":key="color + 'plain'" :color="color" plain>
-            <v-icon>mdi-book</v-icon> book
+			<farm-icon color="primary">book</farm-icon> book
         </farm-btn>
 		
 

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

@@ -35,8 +35,12 @@ export const Primary = () => ({
 		};
 	},
 	template: `<div style="width: 120px;">
-		<farm-select v-model="v" :items="items" />
+		<farm-label for="select_id">
+			label
+		</farm-label>
+		<farm-select id="select_id" v-model="v" :items="items" />
 		v-model: {{ v }}
+
 	</div>`,
 });
 

package/src/components/Select/Select.vue

@@ -1,6 +1,5 @@
 <template>
 	<div
-		class="farm-textfield"
 		:class="{
 			'farm-textfield': true,
 			'farm-textfield--validatable': rules.length > 0,
@@ -8,10 +7,12 @@
 			'farm-textfield--blured': isBlured,
 			'farm-textfield--error': hasError,
 			'farm-textfield--disabled': disabled,
+			'farm-textfield--hiddendetails': hideDetails,
 		}"
 		v-if="!readonly && !disabled"
+		:id="customId"
 	>
-		<farm-contextmenu bottom v-model="isVisible" :stay-open="multiple">
+		<farm-contextmenu bottom v-model="isVisible" :stay-open="multiple" ref="contextmenu">
 			<farm-list v-if="!readonly">
 				<farm-listitem
 					v-for="(item, index) in items"
@@ -28,15 +29,15 @@
 						value="1"
 						size="sm"
 						v-if="isChecked(item)"
-					></farm-checkbox>
+					/>
 					<farm-checkbox
 						class="farm-select__checkbox"
 						v-model="checked"
 						value="2"
 						size="sm"
 						v-else-if="multiple"
-					></farm-checkbox
-					><farm-caption bold tag="span">{{ item[itemText] }}</farm-caption>
+					/>
+					<farm-caption bold tag="span">{{ item[itemText] }}</farm-caption>
 				</farm-listitem>
 				<farm-listitem v-if="!items || items.length === 0">
 					{{ noDataText }}
@@ -45,9 +46,9 @@
 			<template v-slot:activator="{}">
 				<div class="farm-textfield--input farm-textfield--input--iconed">
 					<input
+						v-bind="$attrs"
+						:id="$props.id"
 						v-model="selectedText"
-						:disabled="disabled"
-						:readonly="true"
 						@click="clickInput"
 						@keyup="onKeyUp"
 						@blur="onBlur"
@@ -74,6 +75,7 @@ import validateFormStateBuilder from '../../composition/validateFormStateBuilder
 import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
 import validateFormMethodBuilder from '../../composition/validateFormMethodBuilder';
 import deepEqual from '../../composition/deepEqual';
+import randomId from '../../helpers/randomId';
 
 export default Vue.extend({
 	name: 'farm-select',
@@ -144,6 +146,20 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Hides hint and validation errors
+		 */
+		hideDetails: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Select id
+		 */
+		id: {
+			type: String,
+			default: '',
+		},
 	},
 	setup(props, { emit }) {
 		const { rules, items, itemText, itemValue, disabled, multiple } = toRefs(props);
@@ -165,6 +181,8 @@ export default Vue.extend({
 			return errorBucket.value.length > 0;
 		});
 
+		const customId = 'farm-select-' + (props.id || randomId(2));
+
 		const showErrorText = computed(() => hasError.value && isTouched.value);
 
 		watch(
@@ -326,6 +344,7 @@ export default Vue.extend({
 			isTouched,
 			isBlured,
 			isVisible,
+			customId,
 			showErrorText,
 			validate,
 			reset,

package/src/components/TextArea/TextArea.scss

@@ -1,6 +1,10 @@
 .farm-textarea {
 	min-height: 64px;
 
+	&--hiddendetails {
+		height: 40px;
+	}
+
 	&--textarea {
 		display: flex;
 		align-items: center;

package/src/components/TextArea/TextArea.vue

@@ -8,16 +8,19 @@
 			'farm-textarea--blured': isBlured,
 			'farm-textarea--error': hasError,
 			'farm-textarea--disabled': disabled,
+			'farm-textarea--hiddendetails': hideDetails,
 		}"
 	>
-		<div :class="{
-			'farm-textarea--textarea': true,
-		}">
-			
+		<div
+			:class="{
+				'farm-textarea--textarea': true,
+			}"
+		>
 			<textarea
-				v-bind="$attrs"
 				v-model="innerValue"
-                :rows="$props.rows"
+				v-bind="$attrs"
+				:id="$props.id"
+				:rows="$props.rows"
 				:disabled="disabled"
 				:readonly="readonly"
 				@click="$emit('click')"
@@ -40,6 +43,7 @@ import validateFormStateBuilder from '../../composition/validateFormStateBuilder
 import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
 import validateFormMethodBuilder from '../../composition/validateFormMethodBuilder';
 import deepEqual from '../../composition/deepEqual';
+import randomId from '../../helpers/randomId';
 
 export default Vue.extend({
 	name: 'farm-textarea',
@@ -79,13 +83,27 @@ export default Vue.extend({
 			type: Array as PropType<Array<Function>>,
 			default: () => [],
 		},
-        /**
-         * Textarea rows
-         */
-        rows: {
-            default: 5,
-            type: [String, Number],
-        }
+		/**
+		 * Textarea rows
+		 */
+		rows: {
+			default: 5,
+			type: [String, Number],
+		},
+		/**
+		 * Hides hint and validation errors
+		 */
+		hideDetails: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Select id
+		 */
+		id: {
+			type: String,
+			default: '',
+		},
 	},
 	setup(props, { emit }) {
 		const { rules } = toRefs(props);
@@ -100,6 +118,7 @@ export default Vue.extend({
 		const hasError = computed(() => {
 			return errorBucket.value.length > 0;
 		});
+		const customId = 'farm-textarea-' + (props.id || randomId(2));
 
 		const showErrorText = computed(() => hasError.value && isTouched.value);
 
@@ -162,6 +181,7 @@ export default Vue.extend({
 			valid,
 			validatable,
 			hasError,
+			customId,
 			isTouched,
 			isBlured,
 			showErrorText,

package/src/components/TextFieldV2/TextFieldV2.scss

@@ -1,6 +1,10 @@
 .farm-textfield {
 	height: 64px;
 
+	&--hiddendetails {
+		height: 40px;
+	}
+
 	&--input {
 		display: flex;
 		align-items: center;

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

@@ -39,7 +39,10 @@ export const Primary = () => ({
 		};
 	},
 	template: `<div style="width: 480px;">
-		<farm-textfield-v2 v-model="v" />
+		<farm-label for="select_label">
+			label
+		</farm-label>
+		<farm-textfield-v2 id="select_label" v-model="v" />
 		v-model: {{ v }}
 	</div>`,
 });

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -8,12 +8,16 @@
 			'farm-textfield--blured': isBlured,
 			'farm-textfield--error': hasError,
 			'farm-textfield--disabled': disabled,
+			'farm-textfield--hiddendetails': hideDetails,
 		}"
+		:id="customId"
 	>
-		<div :class="{
-			'farm-textfield--input': true,
-			'farm-textfield--input--iconed': icon
-		}">
+		<div
+			:class="{
+				'farm-textfield--input': true,
+				'farm-textfield--input--iconed': icon,
+			}"
+		>
 			<button
 				type="button"
 				v-if="icon && iconPosition === 'left'"
@@ -24,7 +28,8 @@
 			<input
 				v-bind="$attrs"
 				v-model="innerValue"
-				v-mask="mask"		
+				v-mask="mask"
+				:id="$props.id"
 				:disabled="disabled"
 				:readonly="readonly"
 				@click="$emit('click')"
@@ -39,10 +44,14 @@
 				<farm-icon color="gray" size="20px">{{ icon }}</farm-icon>
 			</button>
 		</div>
-		<farm-caption v-if="showErrorText" color="error" variation="regular">
+		<farm-caption v-if="!hideDetails && showErrorText" color="error" variation="regular">
 			{{ errorBucket[0] }}
 		</farm-caption>
-		<farm-caption v-if="hint && !showErrorText" color="gray" variation="regular">
+		<farm-caption
+			v-if="!hideDetails && hint && !showErrorText"
+			color="gray"
+			variation="regular"
+		>
 			{{ hint }}
 		</farm-caption>
 	</div>
@@ -54,6 +63,7 @@ import validateFormStateBuilder from '../../composition/validateFormStateBuilder
 import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
 import validateFormMethodBuilder from '../../composition/validateFormMethodBuilder';
 import deepEqual from '../../composition/deepEqual';
+import randomId from '../../helpers/randomId';
 
 export default Vue.extend({
 	name: 'farm-textfield-v2',
@@ -111,6 +121,20 @@ export default Vue.extend({
 			default: '',
 			type: [String, Function],
 		},
+		/**
+		 * Hides hint and validation errors
+		 */
+		hideDetails: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Input id
+		 */
+		id: {
+			type: String,
+			default: '',
+		},
 	},
 	setup(props, { emit }) {
 		const { rules } = toRefs(props);
@@ -125,6 +149,7 @@ export default Vue.extend({
 		const hasError = computed(() => {
 			return errorBucket.value.length > 0;
 		});
+		const customId = 'farm-textfield-' + (props.id || randomId(2));
 
 		const showErrorText = computed(() => hasError.value && isTouched.value);
 
@@ -187,6 +212,7 @@ export default Vue.extend({
 			valid,
 			validatable,
 			hasError,
+			customId,
 			isTouched,
 			isBlured,
 			showErrorText,

package/src/helpers/randomId.ts

@@ -0,0 +1,9 @@
+export default (length: number) => {
+	let text = '';
+	const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+	for (let i = 0; i < length; i++) {
+		text += possible.charAt(Math.floor(Math.random() * possible.length));
+	}
+	return text;
+};