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

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,

package/src/components/DefaultTextField/DefaultTextField.stories.js

@@ -1,87 +0,0 @@
-import { withDesign } from 'storybook-addon-designs';
-import DefaultTextField from './DefaultTextField.vue';
-
-export default {
-	title: 'Form/DefaultTextField',
-	component: DefaultTextField,
-	decorators: [withDesign],
-	parameters: {
-		viewMode: 'docs',
-		docs: {
-			description: {
-				component: `Default Text Field with label (inherit from Vuetify)<br />
-			selector: <em>farm-textfield-labelled</em>`,
-			},
-		},
-	},
-};
-
-export const Primary = () => ({
-	components: { DefaultTextField },
-	data() {
-		return {
-			model: 'primary',
-			item: { label: 'Nome do campo', key: 'key', md: 4 },
-		};
-	},
-	template: '<DefaultTextField v-model="model" :item="item" />',
-});
-
-export const Secondary = () => ({
-	components: { DefaultTextField },
-	data() {
-		return {
-			model: 'secondary',
-			item: { label: 'Nome do campo', key: 'key', md: 4 },
-			rules: {
-				required: val => !!val,
-			},
-		};
-	},
-	template: `<v-form>
-		<DefaultTextField :item="item" v-model="model" :required="true" :rules='[rules.required]' />
-	</v-form>`,
-});
-
-export const ReadOnly = () => ({
-	components: { DefaultTextField },
-	data() {
-		return {
-			model: 'readonly',
-			item: { label: 'Nome do campo', key: 'key', md: 4 },
-		};
-	},
-	template: '<DefaultTextField :item="item" v-model="model" :readonly="true" />',
-});
-
-export const Masked = () => ({
-	components: { DefaultTextField },
-	data() {
-		return {
-			model: '12345',
-			item: { label: 'Máscara (##.###)', key: 'key', md: 4 },
-		};
-	},
-	template: `
-	<v-form>
-		<DefaultTextField :item="item" v-model="model" mask="##.###" />
-	</v-form>
-	`,
-});
-
-export const Placeholder = () => ({
-	components: { DefaultTextField },
-	data() {
-		return {
-			model: '',
-			item: { label: 'Nome do campo', key: 'key', md: 4 },
-		};
-	},
-	template: '<DefaultTextField v-model="model" :item="item" placeholder="your text" />',
-});
-
-Primary.storyName = 'Basic';
-Secondary.storyName = 'Required field';
-ReadOnly.storyName = 'Readonly input';
-Masked.storyName = 'Masked';
-Placeholder.storyName = 'Placeholder';

package/src/components/DefaultTextField/DefaultTextField.vue

@@ -1,111 +0,0 @@
-<template>
-	<v-col cols="12" sm="12" :md="item.md ? item.md : 2" class="pl-0">
-		<farm-label :for="inputId" :required="required && !disabled">
-			{{ item.label }}
-		</farm-label>
-		<farm-textfield
-			v-model="inputVal"
-			v-mask="`${mask ? mask : ''}`"
-			:placeholder="placeholder"
-			:id="inputId"
-			:rules="inputRules"
-			:disabled="disabled"
-			:readonly="readonly"
-		/>
-	</v-col>
-</template>
-<script lang="ts">
-import Vue from 'vue';
-import Label from '../Label';
-import TextField from '../TextField';
-import { VCol } from 'vuetify/lib/components/VGrid';
-
-export default Vue.extend({
-	name: 'farm-textfield-labelled',
-	components: {
-		'farm-label': Label,
-		'farm-textfield': TextField,
-		VCol,
-	},
-	props: {
-		item: {
-			type: Object,
-			required: true,
-		},
-		/**
-		 * v-model
-		 */
-		value: {
-			required: true,
-		},
-		/**
-		 * Array of rules
-		 */
-		rules: {
-			type: Array,
-		},
-		/**
-		 * Input is disabled or not
-		 */
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		forKey: {
-			type: String,
-			required: false,
-			default: 'form',
-		},
-		/**
-		 * Input is required or not
-		 */
-		required: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * Mask (v-mask)
-		 */
-		mask: {
-			type: String,
-			default: null,
-		},
-		/**
-		 * Input is readonly or not
-		 */
-		readonly: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * Placeholder is helper text for input
-		 */
-		placeholder: {
-			type: String,
-			default: null,
-		},
-	},
-	computed: {
-		inputVal: {
-			get() {
-				return this.value;
-			},
-			set(val) {
-				this.$emit('input', val);
-			},
-		},
-		inputRules() {
-			if (this.disabled) {
-				return [];
-			}
-			if (this.rules && this.rules.length) {
-				return this.rules;
-			}
-			return [];
-		},
-		inputId() {
-			return `${this.forKey}-${this.item.key}`;
-		},
-	},
-});
-</script>

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

@@ -1,54 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import DefaultTextField from '../DefaultTextField';
-
-describe('DefaultTextField component', () => {
-	let wrapper;
-	let component;
-
-	beforeEach(() => {
-		wrapper = shallowMount(DefaultTextField, {
-			propsData: {
-				item: { key: 'key' },
-				value: false,
-			},
-		});
-		component = wrapper.vm;
-	});
-
-	test('Created hook', () => {
-		expect(wrapper).toBeDefined();
-	});
-
-	describe('mount component', () => {
-		it('renders correctly', () => {
-			expect(wrapper.element).toMatchSnapshot();
-		});
-	});
-
-	describe('Computed properties', () => {
-		it('Should have inputId', () => {
-			expect(component.inputId).toEqual('form-key');
-		});
-
-		it('Should have default inputRules', () => {
-			expect(component.inputRules).toEqual([]);
-		});
-
-		it('Should have inputRules from prop', async () => {
-			expect(component.inputRules).toEqual([]);
-			await wrapper.setProps({
-				rules: [jest.fn()],
-			});
-			expect(component.inputRules.length).toEqual(1);
-		});
-
-		it('Should not have inputRules if disabled', async () => {
-			expect(component.inputRules).toEqual([]);
-			await wrapper.setProps({
-				rules: [jest.fn()],
-				disabled: true,
-			});
-			expect(component.inputRules.length).toEqual(0);
-		});
-	});
-});

package/src/components/DefaultTextField/index.ts

@@ -1,3 +0,0 @@
-import DefaultTextField from './DefaultTextField.vue';
-
-export default DefaultTextField;

package/src/examples/Form/Full.stories.js

@@ -1,58 +0,0 @@
-export default {
-	title: 'Form/Examples',
-};
-
-export const Primary = () => ({
-	data() {
-		return {
-			form: {
-				document: 22055527835,
-				email: '',
-				name: '',
-			},
-			validForm: false,
-			rules: {
-				required: value => !!value || 'Campo obrigatório',
-				email: value =>
-					value === '' || value === null || emailValidator(value) || 'E-mail inválido',
-			},
-			styles: {
-				vForm: {
-					maxWidth: '480px',
-				},
-				footer: {
-					display: 'flex',
-					justifyContent: 'end',
-				},
-			},
-		};
-	},
-	template: `
-        <v-form v-model="validForm" :style="[styles.vForm]">
-            <div>
-                <farm-label :required="true">Documento</farm-label>
-                <farm-textfield v-model="form.document" :rules="[rules.required]" />
-            </div>
-            <div>
-                <farm-label :required="true">E-mail</farm-label>
-                <farm-textfield v-model="form.email" :rules="[rules.required, rules.email]" />
-            </div>
-            <div>
-                <farm-label>Nome</farm-label>
-                <farm-textfield v-model="form.name" />
-            </div>
-            <div class="footer" :style="[styles.footer]">
-                <farm-btn color="secondary" :disabled="!validForm">Salvar</farm-btn>
-            </div>
-        </v-form>
-    `,
-});
-
-const emailValidator = value => {
-	if (!value) {
-		return false;
-	}
-	const pattern =
-		/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-	return pattern.test(value.trim()) || false;
-};