@farm-investimentos/front-mfe-components 11.4.5 → 11.4.7

package/package.json

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

package/src/components/Form/Form.stories.js

@@ -33,13 +33,19 @@ export const Primary = () => ({
 				document: 'Document',
 				name: 'Name',
 				checkbox: true,
-				birthDate: new Date('1980/09/20').toISOString()
+				birthDate: new Date('1980/09/20').toISOString(),
+				selectId: 1,
 			},
 			validForm: false,
 			rules: {
 				required: value => !!value || 'Campo obrigatório',
 				checked: value => !!value || 'Deve estar marcado',
 			},
+			items: [
+				{ value: null, text: '' },
+				{ value: 1, text: 'label 1' },
+				{ value: 2, text: 'label 2' },
+			],
 			styles,
 		};
 	},
@@ -55,6 +61,9 @@ export const Primary = () => ({
 			<farm-label :required="true">True/false</farm-label>
 			<farm-checkbox v-model="form.checkbox" :rules="[rules.checked]" />
 
+			<farm-label :required="true">Select</farm-label>
+			<v-select :rules="[rules.required]" :items="items" v-model="form.selectId"/>
+
 			<farm-label :required="true">Birthdate:</farm-label>
 			<DatePicker
 				ref="birthDate"
@@ -87,6 +96,11 @@ export const Secondary = () => ({
 				required: value => !!value || 'Campo obrigatório',
 			},
 			styles,
+			items: [
+				{ value: null, text: '' },
+				{ value: 1, text: 'label 1' },
+				{ value: 2, text: 'label 2' },
+			],
 		};
 	},
 	template: `
@@ -220,4 +234,4 @@ export const DatePickers = () => ({
             </div>
         </farm-form>
     `,
-});
+});

package/src/components/Form/Form.vue

@@ -9,7 +9,7 @@ type ErrorsBag = Record<number, boolean>;
 export default Vue.extend({
 	name: 'farm-form',
 	props: {
-		value: { type: [Boolean], required: true },
+		value: { type: [Boolean] },
 	},
 	inheritAttrs: true,
 	setup(props, { emit }) {
@@ -42,7 +42,9 @@ export default Vue.extend({
 
 		const recursiveFormField = $node => {
 			$node.$children.forEach($leaf => {
-				if ($leaf.$children.length > 1) {
+				if($leaf.validate) {
+					validationFields.push($leaf);
+				} else if ($leaf.$children.length > 1) {
 					recursiveFormField($leaf);
 				} else if ($leaf.$children[0] && $leaf.$children[0].validate) {
 					validationFields.push($leaf.$children[0]);

package/src/components/Icon/Icon.scss

@@ -17,10 +17,6 @@
         }
     }
 
-    &--gray-base {
-        color: var(--farm-neutral-darken);
-    }
-
     @each $size,
     $value in $sizes {
         &#{'.farm-icon[size=' + $size +']'} {

package/src/components/Icon/Icon.stories.js

@@ -1,4 +1,5 @@
 import { withDesign } from 'storybook-addon-designs';
+import Icon from './Icon.vue';
 import sizes from '../../configurations/sizes';
 import baseThemeColors from '../../configurations/_theme-colors-base.scss';
 import iconsList from './icons_list';
@@ -9,6 +10,7 @@ import('./Icons.stories.scss');
 export default {
 	title: 'Display/Icons',
 	decorators: [withDesign],
+	component: Icon,
 	parameters: {
 		viewMode: 'docs',
 		docs: {
@@ -32,7 +34,7 @@ export const Atom = () => ({
 export const Colors = () => ({
 	data() {
 		return {
-			colors: [...colors, 'gray'],
+			colors: [...colors],
 		};
 	},
 	template: `<div class="icons-container">

package/src/components/Icon/icons_list.ts

@@ -61,9 +61,7 @@ export default [
 	'alpha',
 	'alphabetical',
 	'altimeter',
-	'amazon',
-	'amazon-alexa',
-	'amazon-drive',
+
 	'ambulance',
 	'amplifier',
 	'anchor',
@@ -198,7 +196,6 @@ export default [
 	'autorenew',
 	'av-timer',
 	'axe',
-	'azure',
 	'baby',
 	'baby-buggy',
 	'backburger',
@@ -215,7 +212,6 @@ export default [
 	'barrel',
 	'baseball',
 	'baseball-bat',
-	'basecamp',
 	'basket',
 	'basket-fill',
 	'basket-unfill',
@@ -916,10 +912,7 @@ export default [
 	'eye-settings-outline',
 	'eyedropper',
 	'eyedropper-variant',
-	'face',
-	'face-profile',
 	'facebook',
-	'facebook-box',
 	'facebook-messenger',
 	'factory',
 	'fan',
@@ -1550,8 +1543,6 @@ export default [
 	'microphone-variant',
 	'microphone-variant-off',
 	'microscope',
-	'microsoft',
-	'microsoft-dynamics',
 	'midi',
 	'midi-port',
 	'minecraft',

package/src/components/IdCaption/IdCaption.vue

@@ -55,7 +55,7 @@ export default Vue.extend({
 			default: 'primary',
 		},
 		/**
-		 * copy to clipboard
+		 * Text to be copied to clipboard
 		 */
 		copyText: {
 			type: String,

package/src/components/RadioGroup/RadioGroup.vue

@@ -52,9 +52,21 @@ export default Vue.extend({
 			default: false,
 		},
 		color: {
-			type: String,
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
+				| 'gray'
+			>,
 			default: 'primary',
-		},
+		}
 	},
 	setup(props, { emit }) {
 		const innerValue = ref(props.value);

package/src/components/TableContextMenu/TableContextMenu.vue

@@ -40,6 +40,9 @@ export default Vue.extend({
 	name: 'farm-context-menu',
 	components: {},
 	props: {
+		/**
+		 * Items to populate the context menu
+		 */
 		items: {
 			type: Array as PropType<Array<IContextMenuOption>>,
 			required: true,
@@ -54,7 +57,6 @@ export default Vue.extend({
 		onClick(handler) {
 			if (handler !== undefined) {
 				this.$emit(handler);
-				// handler();
 			}
 		},
 		toggleValue() {

package/src/components/TextFieldV2/TextFieldV2.scss

@@ -0,0 +1,59 @@
+.farm-textfield {
+	&--input {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		border: 1px solid;
+		border-color: var(--farm-gray-lighten);
+		height: 36px;
+		border-radius: 5px;
+		padding: 8px;
+		margin-bottom: 8px;
+
+		> button {
+			display: flex;
+		}
+
+		&>input {
+			flex: 1;
+			outline: none;
+			color: var(--farm-neutral-darken);
+			font-size: 12px;
+			font-weight: 400;
+		}
+
+		width: 100%;
+	}
+}
+
+.farm-textfield--touched.farm-textfield--validatable {
+	&.farm-textfield--error {
+		.farm-textfield {
+			&--input {
+				border-color: var(--farm-error-base);
+
+				&>input {
+					color: var(--farm-neutral-darken);
+				}
+
+				.farm-icon {
+					color: var(--farm-error-base);
+				}
+			}
+		}
+	}
+}
+
+.farm-textfield--blured.farm-textfield--validatable:not(.farm-textfield--error) {
+	.farm-textfield--input {
+		border-color: var(--farm-primary-base);
+
+		&>input {
+			color: var(--farm-neutral-darken);
+		}
+
+		.farm-icon {
+			color: var(--farm-primary-base);
+		}
+	}
+}

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

@@ -25,11 +25,75 @@ export default {
 export const Primary = () => ({
 	data() {
 		return {
-			v: 'some text',
+			v: 'input text',
 		};
 	},
 	template: `<div style="width: 480px">
 		<farm-textfield-v2 v-model="v" />
-		value: {{ v }}
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const Validate = () => ({
+	data() {
+		return {
+			v: 'input',
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+			},
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-label required>Required field</farm-label>
+		<farm-textfield-v2 v-model="v" :rules="[rules.required]" />
+	</div>`,
+});
+
+export const Icon = () => ({
+	data() {
+		return {
+			v: '',
+		};
+	},
+	methods: {
+		show() {
+			alert('On icon click');
+		},
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield-v2 v-model="v" icon="eye" onClickIcon="this.show" />
+		<farm-textfield-v2 v-model="v" icon="eye" icon-position="left" onClickIcon="this.show" />
+	</div>`,
+});
+
+export const HintText = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield-v2 v-model="v" hintText="Hint text" />
+	</div>`,
+});
+
+export const UpdateValue = () => ({
+	data() {
+		return {
+			counter: 1,
+			v: '1',
+		};
+	},
+	methods: {
+		onClick() {
+			this.counter++;
+			this.v = this.counter;
+		},
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield-v2 v-model="v" />
+		<farm-btn @click="onClick">Add 1 to counter and update v-model</farm-btn>
+		<br />counter: {{ counter }}
+		<br />v-model: {{ v }}
 	</div>`,
 });

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -1,13 +1,47 @@
 <template>
-	<div class="farm-textfield">
+	<div
+		class="farm-textfield"
+		:class="{
+			'farm-textfield': true,
+			'farm-textfield--validatable': rules.length > 0,
+			'farm-textfield--touched': isTouched,
+			'farm-textfield--blured': isBlured,
+			'farm-textfield--error': hasError,
+		}"
+	>
 		<div class="farm-textfield--input">
-			<input v-bind="$attrs" v-model="innerValue" />
+			<button v-if="icon && iconPosition === 'left'" @click="$emit('onClickIcon')">
+				<farm-icon color="gray" size="20px">{{ icon }}</farm-icon>
+			</button>
+
+			<input
+				v-bind="$attrs"
+				v-model="innerValue"
+				:disabled="disabled"
+				@keyup="onKeyUp"
+				@blur="onBlur"
+			/>
+
+			<button v-if="icon && iconPosition === 'right'" @click="$emit('onClickIcon')">
+				<farm-icon color="gray" size="20px">{{ icon }}</farm-icon>
+			</button>
 		</div>
-		<span class="farm-textfield--text"> hint text</span>
+
+		<farm-caption v-if="hasError && isTouched" color="error" variation="regular">
+			{{ errorBucket[0] }}
+		</farm-caption>
+		<farm-caption v-if="hintText && !errorMessage" color="gray" variation="regular">
+			{{ hintText }}
+		</farm-caption>
 	</div>
 </template>
+
 <script lang="ts">
-import Vue, { ref, watch } from 'vue';
+import Vue, { computed, onBeforeMount, PropType, ref, toRefs, watch } from 'vue';
+import validateFormStateBuilder from '../../composition/validateFormStateBuilder';
+import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
+import validateFormMethodBuilder from '../../composition/validateFormMethodBuilder';
+import deepEqual from '../../composition/deepEqual';
 
 export default Vue.extend({
 	name: 'farm-textfield-v2',
@@ -16,15 +50,61 @@ export default Vue.extend({
 		/**
 		 * v-model binding
 		 */
-		value: {},
+		value: { type: [String, Number], default: '' },
+		/**
+		 * Show icon?
+		 */
+		icon: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Icon position
+		 */
+		iconPosition: { type: String as PropType<'left' | 'right'>, default: 'right' },
+		/**
+		 * Show hint text
+		 */
+		hintText: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Show input disable
+		 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+
+		errorMessage: String,
+		/**
+		 * Array of rules used for validation
+		 */
+		rules: {
+			type: Array as PropType<Array<Function>>,
+			default: () => [],
+		},
 	},
 	setup(props, { emit }) {
+		const { rules } = toRefs(props);
 		const innerValue = ref(props.value);
+		const isTouched = ref(false);
+		const isBlured = ref(false);
+
+		const { errorBucket, valid, validatable } = validateFormStateBuilder();
+
+		let fieldValidator = validateFormFieldBuilder(rules.value);
+
+		const hasError = computed(() => {
+			return errorBucket.value.length > 0;
+		});
 
 		watch(
 			() => props.value,
 			() => {
 				innerValue.value = props.value;
+				validate(innerValue.value);
 			}
 		);
 
@@ -35,8 +115,41 @@ export default Vue.extend({
 			}
 		);
 
+		watch(
+			() => props.rules,
+			(newVal, oldVal) => {
+				if (deepEqual(newVal, oldVal)) return;
+				fieldValidator = validateFormFieldBuilder(rules.value);
+				validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
+				validate(innerValue.value);
+			}
+		);
+
+		onBeforeMount(() => {
+			validate(innerValue.value);
+		});
+
+		let validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
+
+		const onKeyUp = () => {
+			isTouched.value = true;
+		};
+
+		const onBlur = () => {
+			isBlured.value = true;
+		};
+
 		return {
 			innerValue,
+			errorBucket,
+			valid,
+			validatable,
+			hasError,
+			isTouched,
+			isBlured,
+			validate,
+			onKeyUp,
+			onBlur,
 		};
 	},
 });

package/src/components/Typography/Typography.vue

@@ -23,18 +23,30 @@ export default Vue.extend({
 	inheritAttrs: true,
 	name: 'farm-typography',
 	props: {
+		/**
+		 * Html tag
+		 */
 		tag: {
 			type: String as PropType<
 				'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'legend' | 'label' | 'li'
 			>,
 			default: 'p',
 		},
+		/**
+		 * Size
+		 */
 		size: {
 			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
 		},
+		/**
+		 * Line Height
+		 */
 		lineHeight: {
 			type: String,
 		},
+		/**
+		 * Font-weight
+		 */
 		weight: {
 			type: Number as PropType<100 | 200 | 300 | 400 | 500 | 600 | 700>,
 		},
@@ -53,6 +65,7 @@ export default Vue.extend({
 				| 'success'
 				| 'extra-1'
 				| 'extra-2'
+				| 'gray'
 			>,
 			default: 'default',
 		},

package/src/components/layout/Col/Col.scss

@@ -6,7 +6,7 @@
     flex-basis: 0;
     flex-grow: 1;
     max-width: 100%;
-    width: 100;
+    width: 100%;
 
     &--no-gutters {
         padding: 0;

package/src/components/layout/Line/Line.vue

@@ -8,6 +8,9 @@ import Vue from 'vue';
 export default Vue.extend({
 	name: 'farm-line',
 	props: {
+		/**
+		 * Remove default margins
+		 */
 		noSpacing: {
 			type: Boolean,
 			default: false,
@@ -17,5 +20,5 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-@import './Line.scss'
+@import './Line'
 </style>

package/src/configurations/_theme-colors.scss

@@ -52,6 +52,12 @@ $extra-2: (
     darken: #880E4F,
 );
 
+$gray: (
+    base: #858585,
+    lighten: #D6D6D6,
+    darken: #5C5C5C,
+);
+
 $theme-colors: (
     "primary": $primary,
     "secondary": $secondary,
@@ -61,7 +67,8 @@ $theme-colors: (
     "warning": $warning,
     "success": $success,
     "extra-1": $extra-1,
-    "extra-2": $extra-2
+    "extra-2": $extra-2,
+    "gray": $gray
 );
 
 $text-colors: (