@farm-investimentos/front-mfe-components 3.2.0 → 3.2.1

package/package.json

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

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

@@ -1,19 +1,43 @@
 import DefaultTextField from './DefaultTextField.vue';
 
 export default {
-    title: 'Example/Form/DefaultTextField',
-    component: DefaultTextField,
+	title: 'Example/Form/DefaultTextField',
+	component: DefaultTextField,
 };
 
 export const Primary = () => ({
-    components: { DefaultTextField },
-    template: '<DefaultTextField :item="{ label: \'Nome do campo\'}" />',
+	components: { DefaultTextField },
+	data() {
+		return {
+			model: 'primary',
+			item: { label: 'Nome do campo', key: 'key' },
+		};
+	},
+	template: '<DefaultTextField v-model="model" :item="item" />',
 });
 
 export const Secondary = () => ({
-    components: { DefaultTextField },
-    template: '<DefaultTextField :item="{ label: \'Nome do campo\'} :required="true" />',
+	components: { DefaultTextField },
+	data() {
+		return {
+			model: 'secondary',
+			item: { label: 'Nome do campo', key: 'key' },
+		};
+	},
+	template: '<DefaultTextField :item="item" v-model="model" required="true" />',
+});
+
+export const ReadOnly = () => ({
+	components: { DefaultTextField },
+	data() {
+		return {
+			model: 'readonly',
+			item: { label: 'Nome do campo', key: 'key' },
+		};
+	},
+	template: '<DefaultTextField :item="item" v-model="model" :readonly="true" />',
 });
 
 Primary.storyName = 'Básico';
 Secondary.storyName = 'Label de obrigatório';
+ReadOnly.storyName = 'Input readonly';

package/src/components/DefaultTextField/DefaultTextField.vue

@@ -1,18 +1,19 @@
 <template>
 	<v-col cols="12" sm="12" :md="item.md ? item.md : 2" class="v-col-fieldset-default pl-0">
-		<label :for="`${forKey}-${item.key}`">
+		<label :for="inputId">
 			{{ item.label }}
 			<span class="required" v-if="required && !disabled">*</span>
 		</label>
 		<v-text-field
-			:id="`${forKey}-${item.key}`"
 			color="secondary"
 			v-model="inputVal"
 			outlined
 			dense
 			v-mask="`${mask ? mask : ''}`"
+			:id="inputId"
 			:rules="inputRules"
 			:disabled="disabled"
+			:readonly="readonly"
 		></v-text-field>
 	</v-col>
 </template>
@@ -38,16 +39,20 @@ export default {
 		forKey: {
 			type: String,
 			required: false,
+			default: 'form',
 		},
 		required: {
 			type: Boolean,
 			default: false,
-			required: false,
 		},
 		mask: {
 			type: String,
 			default: null,
 		},
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	components: {
 		VCol,
@@ -71,6 +76,9 @@ export default {
 			}
 			return [];
 		},
+		inputId() {
+			return `${this.forKey}-${this.item.key}`;
+		},
 	},
 };
 </script>

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

@@ -3,14 +3,16 @@ import DefaultTextField from '../DefaultTextField';
 
 describe('DefaultTextField component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(DefaultTextField, {
 			propsData: {
-				item: {},
+				item: { key: 'key' },
 				value: false,
 			},
 		});
+		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
@@ -22,4 +24,10 @@ describe('DefaultTextField component', () => {
 			expect(wrapper.element).toMatchSnapshot();
 		});
 	});
+
+	describe('Computed properties', () => {
+		it('Should have inputId', () => {
+			expect(component.inputId).toEqual('form-key');
+		});
+	});
 });