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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "3.4.4",
+	"version": "3.4.7",
 	"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/DatePicker/DatePicker.stories.js

@@ -35,6 +35,15 @@ export const MinMaxDates = () => ({
     </div>`,
 });
 
+export const RequiredDates = () => ({
+	components: { DatePicker },
+
+	template: `<div style='max-width: 320px'>
+        <DatePicker inputId="input-custom-id-3" :required="true" />
+    </div>`,
+});
+
 Primary.storyName = 'Básico';
 InitValue.storyName = 'Data inicial';
 MinMaxDates.storyName = 'Data mínima e máxima';
+RequiredDates.storyName = 'Obrigatório';

package/src/components/DatePicker/DatePicker.vue

@@ -140,3 +140,8 @@ export default Vue.extend({
 	},
 });
 </script>
+<style lang="scss" scoped>
+.theme--light.v-input.v-input--dense.v-text-field.v-text-field--outlined.error--text:after {
+	content: '' !important;
+}
+</style>

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,40 @@ 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>
+	`,
+});
+
+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

@@ -10,6 +10,7 @@
 			outlined
 			dense
 			v-mask="`${mask ? mask : ''}`"
+			:placeholder="placeholder"
 			:id="inputId"
 			:rules="inputRules"
 			:disabled="disabled"
@@ -18,14 +19,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,10 +68,20 @@ export default {
 			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,
+		},
 	},
 	components: {
 		VCol,
@@ -92,5 +109,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);
+		});
 	});
 });

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -19,6 +19,7 @@
 				outlined
 				dense
 				:id="inputId"
+				:rules="required ? [requiredRule] : []"
 			></v-text-field>
 		</template>
 		<v-date-picker
@@ -43,6 +44,7 @@
 	</v-menu>
 </template>
 <script>
+import Vue from 'vue';
 import { VTextField } from 'vuetify/lib/components/VTextField';
 import { VMenu } from 'vuetify/lib/components/VMenu';
 import { VBtn } from 'vuetify/lib/components/VBtn';
@@ -51,7 +53,8 @@ import { defaultFormat as dateDefaultFormatter } from '../../helpers/date';
 /**
  * Componente de input com datepicker para range de data
  */
-export default {
+export default Vue.extend({
+	name: 'farm-input-rangedatepicker',
 	components: {
 		VTextField,
 		VMenu,
@@ -89,6 +92,13 @@ export default {
 			type: String,
 			default: null,
 		},
+		/**
+		 * Required field (inside form)
+		 */
+		required: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		const s = this.formatDateRange(this.value);
@@ -96,6 +106,9 @@ export default {
 			menuField: false,
 			dateField: this.value,
 			fieldRange: s,
+			requiredRule: value => {
+				return !!value || value != '' || 'Campo obrigatório';
+			},
 		};
 	},
 	watch: {
@@ -137,5 +150,10 @@ export default {
 			return false;
 		},
 	},
-};
+});
 </script>
+<style lang="scss" scoped>
+.theme--light.v-input.v-input--dense.v-text-field.v-text-field--outlined.error--text:after {
+	content: '' !important;
+}
+</style>

package/src/examples/Table.stories.js

@@ -1,5 +1,6 @@
 import { withDesign } from 'storybook-addon-designs';
 import { DataTableEmptyWrapper } from '../main';
+import { DataTablePaginator } from '../main';
 
 const headers = [
 	{
@@ -24,7 +25,8 @@ export default {
 	parameters: {
 		design: {
 			type: 'figma',
-			url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1505%3A372',
+			url:
+				'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1505%3A372',
 		},
 		viewMode: 'docs',
 		docs: {
@@ -86,6 +88,62 @@ export const TableSampleData = () => ({
 	</div>`,
 });
 
+export const TableSampleLocalPagination = () => ({
+	components: {
+		DataTableEmptyWrapper,
+		DataTablePaginator,
+	},
+	data() {
+		return {
+			headers,
+			items: [
+				{ id: 1, name: 'name 1' },
+				{ id: 2, name: 'name 2' },
+				{ id: 3, name: 'name 3' },
+				{ id: 4, name: 'name 4' },
+				{ id: 5, name: 'name 5' },
+				{ id: 6, name: 'name 6' },
+				{ id: 7, name: 'name 7' },
+				{ id: 8, name: 'name 8' },
+				{ id: 9, name: 'name 9' },
+				{ id: 10, name: 'name 10' },
+				{ id: 11, name: 'name 11' },
+				{ id: 12, name: 'name 12' },
+			],
+			pagination: {
+				page: 1,
+				itemsPerPage: 10,
+				pages: 2,
+			},
+		};
+	},
+	methods: {
+		onChangePage(newPage) {
+			this.pagination.page = newPage;
+		},
+	},
+	template: `<div>
+	<v-data-table
+        hide-default-footer
+		id="v-data-table--default"
+		:headers="headers"
+        :items="items"
+		:options.sync="pagination"
+	>
+    	<template v-slot:footer>
+			<DataTablePaginator
+				class="my-6"
+				hidePerPageOptions
+				:initialLimitPerPage="pagination.itemsPerPage"
+				:page="pagination.page"
+				:totalPages="pagination.pages"
+				@onChangePage="onChangePage"
+			/>
+		</template>
+    </v-data-table>
+	</div>`,
+});
+
 TableNoData.story = {
 	name: 'No data',
 };
@@ -93,3 +151,7 @@ TableNoData.story = {
 TableSampleData.story = {
 	name: 'With data',
 };
+
+TableSampleLocalPagination.story = {
+	name: 'With data and local pagination',
+};