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

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;
-};