@farm-investimentos/front-mfe-components 3.4.4 → 3.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "3.4.4",
+	"version": "3.4.5",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -42,6 +42,7 @@
 		"eslint": "^6.7.2",
 		"eslint-plugin-vue": "^6.2.2",
 		"storybook-addon-designs": "^6.2.1",
+		"v-mask": "^2.3.0",
 		"vue-template-compiler": "^2.6.11",
 		"webpack-cli": "^4.9.0"
 	},

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

@@ -1,8 +1,19 @@
+import { withDesign } from 'storybook-addon-designs';
 import DefaultTextField from './DefaultTextField.vue';
 
 export default {
 	title: 'API/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 = () => ({
@@ -10,7 +21,7 @@ export const Primary = () => ({
 	data() {
 		return {
 			model: 'primary',
-			item: { label: 'Nome do campo', key: 'key' },
+			item: { label: 'Nome do campo', key: 'key', md: 4 },
 		};
 	},
 	template: '<DefaultTextField v-model="model" :item="item" />',
@@ -21,10 +32,12 @@ export const Secondary = () => ({
 	data() {
 		return {
 			model: 'secondary',
-			item: { label: 'Nome do campo', key: 'key' },
+			item: { label: 'Nome do campo', key: 'key', md: 4 },
 		};
 	},
-	template: '<DefaultTextField :item="item" v-model="model" required="true" />',
+	template: `<v-form>
+		<DefaultTextField :item="item" v-model="model" :required="true" />
+	</v-form>`,
 });
 
 export const ReadOnly = () => ({
@@ -32,12 +45,28 @@ export const ReadOnly = () => ({
 	data() {
 		return {
 			model: 'readonly',
-			item: { label: 'Nome do campo', key: 'key' },
+			item: { label: 'Nome do campo', key: 'key', md: 4 },
 		};
 	},
 	template: '<DefaultTextField :item="item" v-model="model" :readonly="true" />',
 });
 
-Primary.storyName = 'Básico';
-Secondary.storyName = 'Label de obrigatório';
-ReadOnly.storyName = 'Input readonly';
+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>
+	`,
+});
+
+Primary.storyName = 'Basic';
+Secondary.storyName = 'Required field';
+ReadOnly.storyName = 'Readonly input';
+Masked.storyName = 'Masked';

package/src/components/DefaultTextField/DefaultTextField.vue

@@ -18,14 +18,20 @@
 	</v-col>
 </template>
 <script>
+import Vue from 'vue';
 import { VTextField } from 'vuetify/lib/components/VTextField';
 import { VCol } from 'vuetify/lib/components/VGrid';
-export default {
+
+export default Vue.extend({
+	name: 'farm-textfield-labelled',
 	props: {
 		item: {
 			type: Object,
 			required: true,
 		},
+		/**
+		 * v-model
+		 */
 		value: {
 			required: true,
 		},
@@ -61,6 +67,9 @@ export default {
 			type: String,
 			default: null,
 		},
+		/**
+		 * Input is readonly or not
+		 */
 		readonly: {
 			type: Boolean,
 			default: false,
@@ -92,5 +101,5 @@ export default {
 			return `${this.forKey}-${this.item.key}`;
 		},
 	},
-};
+});
 </script>

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

@@ -29,5 +29,26 @@ describe('DefaultTextField component', () => {
 		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);
+		});
 	});
 });