@farm-investimentos/front-mfe-components 11.4.6 → 11.5.0

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"
+				v-mask="$props.vMask"
+				:disabled="disabled"
+				:readonly="readonly"
+				@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="showErrorText" color="error" variation="regular">
+			{{ errorBucket[0] }}
+		</farm-caption>
+		<farm-caption v-if="hint && !showErrorText" color="gray" variation="regular">
+			{{ hint }}
+		</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,77 @@ 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
+		 */
+		hint: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Disabled the input
+		 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Puts input in readonly state
+		 */
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+
+		errorMessage: String,
+		/**
+		 * Array of rules used for validation
+		 */
+		rules: {
+			type: Array as PropType<Array<Function>>,
+			default: () => [],
+		},
+		/**
+		 * Mask
+		 */
+		vMask: {
+			default: '',
+			type: [String, Function],
+		},
 	},
 	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;
+		});
+
+		const showErrorText = computed(() => hasError.value && isTouched.value);
 
 		watch(
 			() => props.value,
 			() => {
 				innerValue.value = props.value;
+				validate(innerValue.value);
 			}
 		);
 
@@ -32,11 +128,53 @@ export default Vue.extend({
 			() => innerValue.value,
 			() => {
 				emit('input', innerValue.value);
+				emit('change', innerValue.value);
+			}
+		);
+
+		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;
+		};
+
+		const reset = () => {
+			innerValue.value = '';
+			isTouched.value = true;
+			emit('input', innerValue.value);
+		};
+
 		return {
 			innerValue,
+			errorBucket,
+			valid,
+			validatable,
+			hasError,
+			isTouched,
+			isBlured,
+			showErrorText,
+			validate,
+			onKeyUp,
+			onBlur,
+			reset,
 		};
 	},
 });

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

@@ -3,9 +3,11 @@ import TextFieldV2 from '../TextFieldV2';
 
 describe('TextFieldV2 component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(TextFieldV2);
+		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
@@ -17,4 +19,23 @@ describe('TextFieldV2 component', () => {
 			expect(wrapper.element).toMatchSnapshot();
 		});
 	});
+
+	describe('methods', () => {
+		it('reset', () => {
+			component.reset();
+			expect(component.isTouched).toBeTruthy();
+			expect(component.innerValue).toEqual('');
+		});
+
+		it('onKeyUp', () => {
+			component.onKeyUp();
+			expect(component.isTouched).toBeTruthy();
+		});
+
+		it('onBlur', () => {
+			component.onBlur();
+			expect(component.isBlured).toBeTruthy();
+		});
+
+	});
 });

package/src/components/Typography/BodyText/BodyText.vue

@@ -20,7 +20,7 @@ export default Vue.extend({
 		/**
 		 * Type of the bodytext
 		 */
-		type: { type: Number as PropType<1 | 2>, default: 1 },
+		type: { type: [Number, String] as PropType<1 | 2>, default: 1 },
 		/**
 		 * Variation of the bodytext
 		 */

package/src/components/Typography/Caption/Caption.vue

@@ -3,7 +3,7 @@
 		:weight="weight"
 		:size="size"
 		:key="key"
-		:class="{ [`farm-caption--${variation}`]: true }"
+		:class="{ 'farm-caption': true, [`farm-caption--${variation}`]: true }"
 		v-bind="$attrs"
 	>
 		<slot></slot>

package/src/components/Typography/Heading/Heading.vue

@@ -21,7 +21,7 @@ export default Vue.extend({
         /**
          * Type of the heading
          */
-		type: { type: Number as PropType<1 | 2 | 3 | 4 | 5 | 6>, default: 1 },
+		type: { type: [String, Number] as PropType<1 | 2 | 3 | 4 | 5 | 6>, default: 1 },
 	},
 	setup(props) {
 		const { type } = toRefs(props);

package/src/components/Typography/Subtitle/Subtitle.stories.js

@@ -24,15 +24,15 @@ export const Primary = () => ({
 		};
 	},
 	template: `<div>
-	<template v-for="type in types" :key="type">
+	<div v-for="type in types" :key="type">
 		<farm-subtitle
 			v-for="variation in variations"
-			:key="variation"
+			:key="'primary_' + variation + type"
 			:type="type"
 			:variation="variation">
 			Subtitle {{ type }} {{ variation }}
 		</farm-subtitle>
-	</template>
+	</div>
 	</div>`,
 });
 
@@ -47,7 +47,7 @@ export const CustomTag = () => ({
 		<farm-subtitle
 			v-for="t in tags"
 			:tag="t"
-			:key="t"
+			:key="'customtag_' + t"
 			:type="1"
 			variation="regular"
 			>

package/src/components/Typography/Subtitle/Subtitle.vue

@@ -21,7 +21,7 @@ export default Vue.extend({
 		/**
 		 * Type of the subtitle
 		 */
-		type: { type: Number as PropType<1 | 2>, default: 1 },
+		type: { type: [Number, String] as PropType<1 | 2>, default: 1 },
 		/**
 		 * Variation of the subtitle
 		 */

package/src/components/Typography/Typography.vue

@@ -23,20 +23,32 @@ 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>,
+			type: [Number, String] as PropType<100 | 200 | 300 | 400 | 500 | 600 | 700>,
 		},
 		/**
 		 * Color
@@ -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/examples/VuetifyDialog.stories.js

@@ -0,0 +1,119 @@
+import { withDesign } from 'storybook-addon-designs';
+
+export default {
+	title: 'Display/Dialog/Vuetify',
+	decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+		docs: {
+			description: {
+				component: `Dialog created by vuetify-dialog`,
+			},
+		},
+	},
+};
+
+export const Primary = () => ({
+	methods: {
+		openDialog() {
+			this.$dialog.confirm({
+				text: `Deseja realmente sair?`,
+				title: 'Sair',
+				actions: {
+					true: {
+						text: 'Sim',
+						color: 'secondary',
+						handle: () => {
+							alert('Clicked: Sim');
+						},
+					},
+				},
+			});
+		},
+	},
+	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
+        <farm-btn @click="openDialog">
+            Open
+        </farm-btn>
+	</div>`,
+});
+
+export const Default = () => ({
+	methods: {
+		openDialog() {
+			this.$dialog.confirm({
+				text: `Deseja realmente sair?`,
+				title: 'Sair',
+				actions: {
+					false: {
+						text: 'Cancelar',
+						color: 'secondary-outlined',
+						handle: () => {
+							alert('Clicked: Cancelar');
+						},
+					},
+					true: {
+						text: 'Sim',
+						color: 'secondary',
+						handle: () => {
+							alert('Clicked: Sim');
+						},
+					},
+				},
+			});
+		},
+	},
+	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
+        <farm-btn @click="openDialog">
+            Open
+        </farm-btn>
+	</div>`,
+});
+
+export const ErrorColor = () => ({
+	methods: {
+		openDialog() {
+			this.$dialog.confirm({
+				text: `Deseja realmente sair?`,
+				title: 'Sair',
+				actions: {
+					true: {
+						text: 'Sair',
+						color: 'error',
+						handle: () => {
+							alert('Clicked: Sair');
+						},
+					},
+				},
+			});
+		},
+	},
+	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
+        <farm-btn @click="openDialog">
+            Open
+        </farm-btn>
+	</div>`,
+});
+
+
+export const CustomContent = () => ({
+	methods: {
+		openDialog() {
+			this.$dialog.confirm({
+				text: `This is a text with <strong>html markup</strong> and<br />break line!`,
+				title: 'Sair',
+				actions: {
+					true: {
+						text: 'Sim',
+						color: 'secondary',
+					},
+				},
+			});
+		},
+	},
+	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
+        <farm-btn @click="openDialog">
+            Open
+        </farm-btn>
+	</div>`,
+});

package/src/examples/ConfirmDialog.stories.js

@@ -1,43 +0,0 @@
-import { withDesign } from 'storybook-addon-designs';
-
-export default {
-	title: 'Display/Dialog/Confirm',
-	decorators: [withDesign],
-	parameters: {
-		viewMode: 'docs',
-		docs: {
-			description: {
-				component: `ConfirmDialog created by vuetify-dialog`,
-			},
-		},
-	},
-};
-
-export const ConfirmDialog = () => ({
-	methods: {
-		openDialog() {
-			this.$dialog.confirm({
-				text: `Deseja realmente sair?`,
-				title: 'Sair',
-				actions: {
-					false: {
-						text: 'Cancelar',
-						color: 'primary',
-					},
-					true: {
-						text: 'Sim',
-						color: 'secondary',
-						handle: () => {
-							this.$emit('onLogout');
-						},
-					},
-				},
-			});
-		},
-	},
-	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
-        <ConfirmButton @click="openDialog">
-            Open
-        </ConfirmButton>
-	</div>`,
-});

package/src/examples/Modal.stories.js

@@ -1,181 +0,0 @@
-import { withDesign } from 'storybook-addon-designs';
-
-export default {
-	title: 'Display/Dialog/Examples',
-	decorators: [withDesign],
-	component: Modal,
-};
-
-export const Modal = () => ({
-	/*
-	 * How to create the default modal following FARM's Design System guideline
-	 */
-	data() {
-		return {
-			inputVal: false,
-		};
-	},
-	template: `<div>
-	<v-dialog content-class="modal-default" v-model="inputVal">
-		<DialogHeader title="Exemplo" @onClose="inputVal = false;" />
-		<v-main class="pa-6 pt-12">
-			Place dialog content here!
-		</v-main>
-		<DialogFooter :hasConfirm="false" @onClose="inputVal = false;" />
-	</v-dialog>
-		<v-btn @click="inputVal = true;" color="secondary">
-			Clique para abrir
-		</v-btn>
-	</div>`,
-});
-
-export const ModalSmall = () => ({
-	data() {
-		return {
-			showModalSmall: false,
-		};
-	},
-	template: `<div>
-	<v-dialog content-class="modal-default modal-default-small" v-model="showModalSmall">
-		<DialogHeader title="Exemplo" @onClose="showModalSmall = false;" />
-		<v-main class="pa-6 pt-12">
-			Place dialog content here!
-		</v-main>
-		<DialogFooter :hasConfirm="false" @onClose="showModalSmall = false;" />
-	</v-dialog>
-		<v-btn @click="showModalSmall = true;" color="secondary">
-			Clique para abrir
-		</v-btn>
-	</div>`,
-});
-
-export const ModalExtremeSmall = () => ({
-	data() {
-		return {
-			showModalSmall: false,
-		};
-	},
-	template: `<div>
-	<v-dialog content-class="modal-default modal-default-x-small" v-model="showModalSmall">
-		<DialogHeader title="Exemplo" @onClose="showModalSmall = false;" />
-		<v-main class="pa-6 pt-12">
-			Place dialog content here!
-		</v-main>
-		<DialogFooter :hasConfirm="false" @onClose="showModalSmall = false;" />
-	</v-dialog>
-		<v-btn @click="showModalSmall = true;" color="secondary">
-			Clique para abrir
-		</v-btn>
-	</div>`,
-});
-
-export const ModalMedium = () => ({
-	data() {
-		return {
-			showModalSmall: false,
-		};
-	},
-	template: `<div>
-	<v-dialog content-class="modal-default modal-default-md" v-model="showModalSmall">
-		<DialogHeader title="Exemplo" @onClose="showModalSmall = false;" />
-		<v-main class="pa-6 pt-12">
-			Place dialog content here!
-		</v-main>
-		<DialogFooter :hasConfirm="false" @onClose="showModalSmall = false;" />
-	</v-dialog>
-		<v-btn @click="showModalSmall = true;" color="secondary">
-			Clique para abrir
-		</v-btn>
-	</div>`,
-});
-
-export const ModalScrollVertical = () => ({
-	data() {
-		return {
-			showModalSmall: false,
-		};
-	},
-	template: `<div>
-	<v-dialog content-class="modal-default modal-default-small" v-model="showModalSmall">
-		<DialogHeader title="Exemplo" @onClose="showModalSmall = false;" />
-		<v-main class="pa-6 pt-12">
-			Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-			Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-			Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-		</v-main>
-		<DialogFooter :hasConfirm="false" @onClose="showModalSmall = false;" />
-	</v-dialog>
-		<v-btn @click="showModalSmall = true;" color="secondary">
-			Clique para abrir
-		</v-btn>
-	</div>`,
-});
-
-export const ModalScrollHorizontal = () => ({
-	data() {
-		return {
-			open: false,
-		};
-	},
-	template: `<div>
-	<v-dialog content-class="modal-default modal-default-small" v-model="open">
-		<DialogHeader title="Exemplo" @onClose="open = false;" />
-		<v-main class="pa-6 pt-12" >
-			<table>
-				<tr>
-					<th>Company</th>
-					<th>Name</th>
-					<th>Country</th>
-					<th>Contact</th>
-					<th>Email</th>
-				</tr>
-				<tr>
-					<td>Alfreds Futterkiste</td>
-					<td>Maria Anders</td>
-					<td>Germany</td>
-					<td>+55193764-8418</td>
-					<td>najes39390@dufeed.com</td>
-				</tr>
-				<tr>
-					<td>Centro comercial Moctezuma</td>
-					<td>Francisco Chang</td>
-					<td>Mexico</td>
-					<td>+55193764-8418</td>
-					<td>najes39390@dufeed.com</td>
-				</tr>
-				<tr>
-					<td>Ernst Handel</td>
-					<td>Roland Mendel</td>
-					<td>Austria</td>
-					<td>+55193764-8418</td>
-					<td>najes39390@dufeed.com</td>
-				</tr>
-				<tr>
-					<td>Island Trading</td>
-					<td>Helen Bennett</td>
-					<td>UK</td>
-					<td>+55193764-8418</td>
-					<td>najes39390@dufeed.com</td>
-				</tr>
-				<tr>
-					<td>Laughing Bacchus Winecellars</td>
-					<td>Yoshi Tannamuri</td>
-					<td>Canada</td>
-					<td>+55193764-8418</td>
-					<td>najes39390@dufeed.com</td>
-				</tr>
-				<tr>
-					<td>Magazzini Alimentari Riuniti</td>
-					<td>Giovanni Rovelli</td>
-					<td>Italy</td>
-					<td>+55193764-8418</td>
-					<td>najes39390@dufeed.com</td>
-				</tr>
-			</table>
-		</v-main>
-	</v-dialog>
-		<v-btn @click="open = true;" color="secondary">
-			Clique para abrir
-		</v-btn>
-	</div>`,
-});