@farm-investimentos/front-mfe-components 3.5.2 → 3.6.1

package/package.json

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

package/src/components/MainFilter/MainFilter.vue

@@ -20,17 +20,19 @@
 			class="v-btn--responsive mt-14 mt-sm-8"
 			@click="onFilterClick"
 		>
-			<v-icon color="white" class="mr-2">mdi-filter</v-icon>
-			Filtrar
+			<v-icon color="white" class="mr-2">{{ extraFiltersBtnIcon }}</v-icon>
+			{{ extraFiltersBtnLabel }}
 		</v-btn>
 	</section>
 </template>
 
 <script>
+import Vue from 'vue';
 import { VBtn } from 'vuetify/lib/components/VBtn';
 import { VTextField } from 'vuetify/lib/components/VTextField';
 import { VIcon } from 'vuetify/lib/components/VIcon';
-export default {
+
+export default Vue.extend({
 	name: 'MainFilter',
 	components: {
 		VTextField,
@@ -62,6 +64,10 @@ export default {
 			type: String,
 			default: () => '',
 		},
+		showFilters: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	watch: {
@@ -69,6 +75,14 @@ export default {
 			this.inputValue = newValue;
 		},
 	},
+	computed: {
+		extraFiltersBtnLabel() {
+			return this.showFilters ? 'Esconder filtros' : 'Ver filtros';
+		},
+		extraFiltersBtnIcon() {
+			return this.showFilters ? 'mdi-filter-off' : 'mdi-filter';
+		},
+	},
 	data() {
 		return {
 			timer: null,
@@ -101,9 +115,8 @@ export default {
 			}, 400);
 		},
 	},
-};
+});
 </script>
-
 <style scoped lang="scss">
 @import './MainFilter.scss';
 </style>

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

@@ -20,4 +20,22 @@ describe('MainFilter component', () => {
 			expect(wrapper.emitted().onClick).toBeTruthy();
 		});
 	});
+
+	describe('computed properties', () => {
+		it('get extraFiltersBtnLabel', async () => {
+			expect(component.extraFiltersBtnLabel).toEqual('Ver filtros');
+			await wrapper.setProps({
+				showFilters: true,
+			});
+			expect(component.extraFiltersBtnLabel).not.toEqual('Ver filtros');
+		});
+
+		it('get extraFiltersBtnIcon', async () => {
+			expect(component.extraFiltersBtnIcon).toEqual('mdi-filter');
+			await wrapper.setProps({
+				showFilters: true,
+			});
+			expect(component.extraFiltersBtnIcon).toEqual('mdi-filter-off');
+		});
+	});
 });

package/src/examples/MainFilter.stories.js

@@ -0,0 +1,29 @@
+import { withDesign } from 'storybook-addon-designs';
+import { MainFilter } from '../main';
+
+export default {
+	title: 'Examples/MainFilter',
+	decorators: [withDesign],
+	component: MainFilter,
+};
+
+export const MainFilters = () => ({
+	/*
+	 * How to toggle filters
+	 */
+	components: {
+		MainFilter,
+	},
+	data() {
+		return {
+			showFilters: false,
+			items: [1, 2, 3, 4, 5],
+		};
+	},
+	template: `<div style="max-width: 480px">
+	<MainFilter @onClick="showFilters = !showFilters" :showFilters="showFilters" />
+        <section v-if="showFilters">
+            <v-select :items="items" />
+        </section>
+	</div>`,
+});

package/src/examples/Modal.stories.js

@@ -34,7 +34,129 @@ export const Modal = () => ({
 	</div>`,
 });
 
-// Modal.storyName = 'Básico';
+export const ModalSmall = () => ({
+	components: {
+		DialogHeader,
+		DialogFooter,
+	},
+	data() {
+		return {
+			showModalSmall: false,
+		};
+	},
+	template: `<div>
+	<v-dialog content-class="modal-default modal-default-small" v-model="showModalSmall">
+		<DialogHeader title="Exemplo" @onClose="showModalSmall = false;" />
+		<v-main class="pa-6 pt-12">
+			Place dialog content here!
+		</v-main>
+		<DialogFooter :hasConfirm="false" @onClose="showModalSmall = false;" />
+	</v-dialog>
+		<v-btn @click="showModalSmall = true;" color="secondary">
+			Clique para abrir
+		</v-btn>
+	</div>`,
+});
+
+export const ModalScrollVertical = () => ({
+	components: {
+		DialogHeader,
+		DialogFooter,
+	},
+	data() {
+		return {
+			showModalSmall: false,
+		};
+	},
+	template: `<div>
+	<v-dialog content-class="modal-default modal-default-small" v-model="showModalSmall">
+		<DialogHeader title="Exemplo" @onClose="showModalSmall = false;" />
+		<v-main class="pa-6 pt-12">
+			Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+			Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+			Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+		</v-main>
+		<DialogFooter :hasConfirm="false" @onClose="showModalSmall = false;" />
+	</v-dialog>
+		<v-btn @click="showModalSmall = true;" color="secondary">
+			Clique para abrir
+		</v-btn>
+	</div>`,
+});
+
+export const ModalScrollHorizontal = () => ({
+	components: {
+		DialogHeader,
+		DialogFooter,
+	},
+	data() {
+		return {
+			open: false,
+		};
+	},
+	template: `<div>
+	<v-dialog content-class="modal-default modal-default-small" v-model="open">
+		<DialogHeader title="Exemplo" @onClose="open = false;" />
+		<v-main class="pa-6 pt-12" >
+			<table>
+				<tr>
+					<th>Company</th>
+					<th>Name</th>
+					<th>Country</th>
+					<th>Contact</th>
+					<th>Email</th>
+				</tr>
+				<tr>
+					<td>Alfreds Futterkiste</td>
+					<td>Maria Anders</td>
+					<td>Germany</td>
+					<td>+55193764-8418</td>
+					<td>najes39390@dufeed.com</td>
+				</tr>
+				<tr>
+					<td>Centro comercial Moctezuma</td>
+					<td>Francisco Chang</td>
+					<td>Mexico</td>
+					<td>+55193764-8418</td>
+					<td>najes39390@dufeed.com</td>
+				</tr>
+				<tr>
+					<td>Ernst Handel</td>
+					<td>Roland Mendel</td>
+					<td>Austria</td>
+					<td>+55193764-8418</td>
+					<td>najes39390@dufeed.com</td>
+				</tr>
+				<tr>
+					<td>Island Trading</td>
+					<td>Helen Bennett</td>
+					<td>UK</td>
+					<td>+55193764-8418</td>
+					<td>najes39390@dufeed.com</td>
+				</tr>
+				<tr>
+					<td>Laughing Bacchus Winecellars</td>
+					<td>Yoshi Tannamuri</td>
+					<td>Canada</td>
+					<td>+55193764-8418</td>
+					<td>najes39390@dufeed.com</td>
+				</tr>
+				<tr>
+					<td>Magazzini Alimentari Riuniti</td>
+					<td>Giovanni Rovelli</td>
+					<td>Italy</td>
+					<td>+55193764-8418</td>
+					<td>najes39390@dufeed.com</td>
+				</tr>
+			</table>
+		</v-main>
+	</v-dialog>
+		<v-btn @click="open = true;" color="secondary">
+			Clique para abrir
+		</v-btn>
+	</div>`,
+});
+
 Modal.story = {
 	name: 'Básico',
 	parameters: {
@@ -45,3 +167,18 @@ Modal.story = {
 		},
 	},
 };
+
+ModalSmall.story = {
+	name: 'Pequeno',
+	parameters: {
+		design: {
+			type: 'figma',
+			url:
+				'https://www.figma.com/file/rkkAsX4IP0tzv1udIDXlqe/%E2%9C%8D---Onboarding---PJ?node-id=5336%3A32496',
+		},
+	},
+};
+
+ModalScrollVertical.storyName = 'Rolagem vertical'
+
+ModalScrollHorizontal.storyName = 'Rolagem horizontal'

package/src/examples/inputs/Select.stories.js

@@ -0,0 +1,27 @@
+export default {
+	title: 'Examples/Inputs/Select',
+	parameters: {
+		docs: {
+			description: {
+				component: `How to show select (v-select)<br />
+`,
+			},
+		},
+	},
+};
+
+export const VSelect = () => ({
+	data() {
+		return {
+			items: ['SP', 'RJ', 'MG', 'RS', 'BA'],
+		};
+	},
+	template: `
+        <v-col cols="12" sm="6" md="2" class="v-col-fieldset-default pl-0">
+            <v-select dense outlined :items="items" />
+        </v-col>`,
+});
+
+VSelect.story = {
+	name: 'Básico',
+};

package/src/scss/VMenuOverrides.scss

@@ -2,4 +2,16 @@
     .v-list--dense .v-list-item .v-list-item__title {
         font-weight: bold;
     }
+
+    [role='listbox'] {
+        padding: 0;
+
+        div.v-list-item {
+            border-bottom: 1px solid var(--v-gray-lighten2);
+
+            &:last-child {
+                border-bottom: 0;
+            }
+        }
+    }
 }