@farm-investimentos/front-mfe-components 11.1.1 → 11.2.1

package/package.json

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

package/src/components/Buttons/ExportButton/ExportButton.stories.js

@@ -3,6 +3,17 @@ import ExportButton from './ExportButton.vue';
 export default {
 	title: 'Buttons/Export',
 	component: ExportButton,
+	parameters: {
+		docs: {
+			description: {
+				component: `Export Button<br />
+				selector: <em>farm-btn-export</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({
@@ -16,7 +27,3 @@ export const Disabled = () => ({
 export const List = () => ({
 	template: `<farm-btn-export :optionsList="[{ key: 1, label: 'XLS teste'}, { key: 2, label: 'CSV teste novo'}]" />`,
 });
-
-Primary.storyName = 'Básico';
-Disabled.storyName = 'Desabilitado';
-List.storyName = 'Lista';

package/src/components/Buttons/ExportButton/ExportButton.vue

@@ -12,77 +12,51 @@
 		<i :class="{ 'mr-2': true, 'mdi-file-export-outline': true, mdi: true }"></i>
 		Exportar
 	</farm-btn>
-	<v-menu
-		v-else
-		content-class="elevation-1"
-		v-model="togglePopover"
-		:offset-y="true"
-		:rounded="'b t-0'"
-	>
-		<template v-slot:activator="{ on, attrs }">
-			<farm-btn
-				v-bind="attrs"
-				v-on="on"
-				dense
-				class="farm-btn--responsive"
-				outlined
-				title="Exportar"
-				color="secondary"
-				@onClick="togglePopover = true"
-				:disabled="disabled"
-			>
+	<farm-contextmenu v-else v-model="value" :bottom="true">
+		<template v-slot:activator="{}">
+			<farm-btn outlined title="Exportar" color="secondary" @click="toggleValue">
 				Exportar
-				<i
-					:class="{
-						'ml-2': true,
-						'mr-0': true,
-						mdi: true,
-						'mdi-chevron-up': togglePopover,
-						'mdi-chevron-down': !togglePopover,
-					}"
-				>
-				</i>
+				<farm-icon class="ml-2"> chevron-{{ value ? 'up' : 'down' }} </farm-icon>
 			</farm-btn>
 		</template>
-
-		<v-list dense class="pa-0">
-			<v-list-item
+		<farm-list>
+			<farm-listitem
 				v-for="item in optionsList"
-				:key="item.key"
-				link
+				clickable
+				hoverColor="primary"
+				hoverColorVariation="lighten"
+				:key="'exportbutton_key_' + item.label"
 				:title="item.label"
 				@click="onClick(item.key)"
 			>
-				<v-list-item-content>
-					<v-list-item-title v-text="item.label" />
-				</v-list-item-content>
-			</v-list-item>
-		</v-list>
-	</v-menu>
+				<farm-caption bold tag="span">{{ item.label }}</farm-caption>
+			</farm-listitem>
+		</farm-list>
+	</farm-contextmenu>
 </template>
-<script>
-import Vue from 'vue';
-import VList from 'vuetify/lib/components/VList/VList';
-import VMenu from 'vuetify/lib/components/VMenu';
-import VListItem from 'vuetify/lib/components/VList/VListItem';
-import { VListItemContent, VListItemTitle } from 'vuetify/lib';
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+
+export interface IExportOption {
+	label: String;
+	key: String;
+}
 
 /**
- * Botão de Exportação, com opção de gerar menu dropdown
+ * BExport Button: standalone or menu list
  */
 export default Vue.extend({
 	name: 'farm-btn-export',
 	props: {
 		/**
-		 * Lista de opções para o menu dropdown
-		 * Se não informado, o botão emite evento no clique
+		 * Options list
 		 */
 		optionsList: {
-			type: Array,
+			type: Array as PropType<Array<IExportOption>>,
 			default: () => [],
 		},
 		/**
-		 * Desabilita o botão
+		 * Is disabled?
 		 */
 		disabled: {
 			type: Boolean,
@@ -91,31 +65,16 @@ export default Vue.extend({
 	},
 	data() {
 		return {
-			togglePopover: false,
+			value: false,
 		};
 	},
-	components: {
-		VList,
-		VListItem,
-		VMenu,
-		VListItemContent,
-		VListItemTitle,
-	},
 	methods: {
 		onClick(key) {
 			this.$emit('onClick', key);
 		},
+		toggleValue() {
+			this.value = !this.value;
+		},
 	},
 });
 </script>
-<style scoped lang="scss">
-.v-list-item {
-	border-bottom: 1px solid var(--v-gray-lighten2);
-	&:last-child {
-		border-bottom: none;
-	}
-}
-.v-list-item--link {
-	font-size: 0.875rem;
-}
-</style>

package/src/components/Card/Card.scss

@@ -3,8 +3,8 @@
 .farm-card {
 	width: 100%;
 	background: #ffffff;
-	border: 1px solid #D6D6D6;
-	border-radius: 8px;
+	border: 1px solid var(--farm-stroke-base);
+	border-radius: 5px;
 
 	&[shadow] {
 		@include addShadow;

package/src/components/Card/Card.stories.js

@@ -17,7 +17,6 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { 'farm-card': Card },
 	template: `
         <farm-card>
 			Conteúdo do Card

package/src/components/Card/Card.vue

@@ -11,11 +11,14 @@ export default Vue.extend({
 	name: 'farm-card',
 	inheritAttrs: true,
 	props: {
+		/**
+		 * Html tag
+		 */
 		tag: { type: String, default: 'div' },
 	},
 });
 </script>
 
 <style lang="scss" scoped>
-@import './Card.scss';
+@import './Card';
 </style>

package/src/components/Card/CardComposition.stories.ts

@@ -1,5 +1,4 @@
 import { withDesign } from 'storybook-addon-designs';
-import gutters from '../../configurations/gutters';
 
 export default {
 	title: 'Surfaces/Card/Molecules',
@@ -32,7 +31,7 @@ export const MultipleContents = () => ({
 
 export const Gutters = () => ({
 	data() {
-		return { gutters };
+		return { gutters: ['none', 'xs', 'sm', 'vuetify', 'md', 'lg', 'xl'] };
 	},
 	template: `<div style="width: 480px;">
     <farm-card v-for="gutter in gutters" :key="gutter" style="margin-bottom: 16px">

package/src/components/Card/CardContent/CardContent.stories.js

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `Card Content<br />
-				selector: <em>farm-card-content</em>
+				selector: <em>farm-card-content</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},
@@ -16,10 +17,20 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { 'farm-card-content': CardContent },
 	template: `
         <farm-card-content>
             Conteúdo do Card Content
         </farm-card-content>
     `,
 });
+
+export const Gutters = () => ({
+	data() {
+		return { gutters: ['none', 'xs', 'sm', 'vuetify', 'md', 'lg', 'xl'] };
+	},
+	template: `<div style="width: 480px;">
+		<farm-card-content v-for="gutter in gutters" :key="gutter" style="margin-bottom: 16px" :gutter="gutter">
+			Content with {{ gutter }} gutter
+		</farm-card-content>
+    </div>`,
+});

package/src/components/Card/CardContent/CardContent.vue

@@ -10,13 +10,16 @@ import Vue, { PropType } from 'vue';
 export default Vue.extend({
 	name: 'farm-card-content',
 	props: {
+		/**
+		 * Html tag
+		 */
 		tag: { type: String, default: 'div' },
 		/**
 		 * Add gutter
 		 */
 		gutter: {
-			type: String as PropType<'none' | 'xs' | 'sm' | 'default' | 'md' | 'lg' | 'xl'>,
-			default: 'default',
+			type: String as PropType<'none' | 'xs' | 'sm' | 'vuetify' | 'md' | 'lg' | 'xl'>,
+			default: 'md',
 		},
 	},
 	inheritAttrs: true,
@@ -24,5 +27,5 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-@import './CardContent.scss';
+@import './CardContent';
 </style>

package/src/components/ContextMenu/ContextMenu.vue

@@ -17,7 +17,7 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue, { onMounted, ref, watch, reactive, onBeforeUnmount, toRefs } from 'vue';
+import Vue, { ref, watch, reactive, onBeforeUnmount, toRefs } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-contextmenu',
@@ -83,7 +83,7 @@ export default Vue.extend({
 			const parentBoundingClientRect = parent.value.getBoundingClientRect();
 			const popupClientRect = popup.value.getBoundingClientRect();
 
-			const offsetTop =
+			let offsetTop =
 				parentBoundingClientRect.top +
 				window.scrollY +
 				(!bottom.value ? 0 : parentBoundingClientRect.height);
@@ -94,17 +94,27 @@ export default Vue.extend({
 					offsetLeft + parentBoundingClientRect.width / 2 - popupClientRect.width / 2;
 			}
 			styles.minWidth =
-				parentBoundingClientRect.width > 96
+				(parentBoundingClientRect.width > 96
 					? parseInt(parentBoundingClientRect.width)
-					: 96 + 'px';
+					: 96) + 'px';
+
+			//Do not allow to open outside window
+			const rightEdge = offsetLeft + popupClientRect.width;
+			const clientWidth = document.documentElement.clientWidth;
+			if (rightEdge > clientWidth - 12) {
+				offsetLeft = clientWidth - 12 - popupClientRect.width;
+			}
+
+			const bottomEdge = offsetTop + popupClientRect.height;
+			const clientHeight = document.documentElement.clientHeight;
+			if (bottomEdge - window.scrollY > clientHeight) {
+				offsetTop -= bottomEdge - window.scrollY - clientHeight + 12;
+			}
+
 			styles.top = offsetTop + 'px';
 			styles.left = offsetLeft + 'px';
 		};
 
-		onMounted(() => {
-			calculatePosition();
-		});
-
 		onBeforeUnmount(() => {
 			if (hasBeenBoostrapped) {
 				window.removeEventListener('resize', resizeWindowHandler);

package/src/components/DataTableHeader/DataTableHeader.scss

@@ -30,6 +30,6 @@ th.sortable {
 
 th span.span-checkbox {
 	display: flex;
-	justify-content: start;
+	justify-content: flex-start;
 	padding-left: 4px;
 }

package/src/components/DataTablePaginator/DataTablePaginator.scss

@@ -17,13 +17,27 @@ ul.farm-paginator {
             border-right: 0;
             height: 36px;
             min-width: 36px;
-            padding-inline: 4px;
             display: inline-flex;
             justify-content: center;
             align-items: center;
             font-size: 12px;
             transition: all ease 0.5s;
+            padding: 4px 12px;
 
+            p {
+                color: var(--farm-neutral-darken);
+                margin: 0;
+            }
+            
+            .farm-icon {
+                color: var(--farm-text-primary);
+            }
+            
+            &:disabled {
+                .farm-icon {
+                    color: var(--farm-neutral-base);
+                }
+            }
         }
 
         &:first-child button {
@@ -37,16 +51,18 @@ ul.farm-paginator {
 
         &.farm-paginator__item--selected {
             button {
-                background-color: var(--v-secondary-base);
-                color: white;
+                background-color: var(--farm-primary-base);
+
+                p{
+                    color: #FFFFFF;  
+                }
+                
             }
         }
 
         &:hover {
-
-            button:not([disabled="disabled"]),
-            button:not([disabled="disabled"]) i.farm-icon {
-                color: var(--v-secondary-base);
+            button:not([disabled="disabled"]) {
+                background-color: var(--farm-primary-lighten);
             }
         }
     }
@@ -65,4 +81,8 @@ ul.farm-paginator {
 
 .farm-paginator--gutter {
     margin: 16px 24px 0;
+}
+
+.farm-typography.button {
+    font-size: 14px;
 }

package/src/components/DataTablePaginator/DataTablePaginator.vue

@@ -16,10 +16,20 @@
 			></v-select>
 		</div>
 
-		<ul :class="{ 'farm-paginator': true, 'farm-paginator--disabled': disabled || totalPages == null }">
+		<ul
+			:class="{
+				'farm-paginator': true,
+				'farm-paginator--disabled': disabled || totalPages == null,
+			}"
+		>
 			<li>
-				<button :disabled="currentPage === 1 || disabled || totalPages == null" @click="previousPage">
-					<farm-icon color="gray" size="sm">chevron-left</farm-icon>
+				<button :disabled="canGoBack" @click="firstPage">
+					<farm-icon size="sm">chevron-double-left</farm-icon>
+				</button>
+			</li>
+			<li>
+				<button :disabled="canGoBack" @click="previousPage">
+					<farm-icon size="sm">chevron-left</farm-icon>
 				</button>
 			</li>
 
@@ -32,13 +42,18 @@
 					:disabled="currentPage === item || item === '...' || disabled"
 					@click="currentPage = item"
 				>
-					{{ item }}
+					<farm-bodytext :type="2" variation="regular">{{ item }}</farm-bodytext>
 				</button>
 			</li>
 
 			<li>
-				<button :disabled="currentPage === totalPages || disabled || totalPages == null || totalPages === 0" @click="nextPage">
-					<farm-icon color="gray" size="sm">chevron-right</farm-icon>
+				<button :disabled="canGoForward" @click="nextPage">
+					<farm-icon size="sm">chevron-right</farm-icon>
+				</button>
+			</li>
+			<li>
+				<button :disabled="canGoForward" @click="lastPage">
+					<farm-icon size="sm">chevron-double-right</farm-icon>
 				</button>
 			</li>
 		</ul>
@@ -47,7 +62,6 @@
 <script lang="ts">
 import Vue from 'vue';
 import { VSelect } from 'vuetify/lib/components/VSelect';
-import Icon from '../Icon';
 
 /**
  * Componente de paginação usado em tabelas e listas
@@ -55,6 +69,9 @@ import Icon from '../Icon';
  */
 export default Vue.extend({
 	name: 'farm-datatable-paginator',
+	components: {
+		VSelect,
+	},
 	props: {
 		/**
 		 * Lista de opções para o controle de registros por página
@@ -118,6 +135,12 @@ export default Vue.extend({
 		nextPage() {
 			this.currentPage++;
 		},
+		firstPage() {
+			this.currentPage = 1;
+		},
+		lastPage() {
+			this.currentPage = this.totalPages;
+		},
 	},
 	data() {
 		return {
@@ -161,6 +184,20 @@ export default Vue.extend({
 				return [...this.range(1, left), '...', ...this.range(right, this.totalPages)];
 			}
 		},
+		canGoBack: function () {
+			const goBack = this.currentPage === 1 || this.disabled || this.totalPages == null;
+
+			return goBack;
+		},
+		canGoForward: function () {
+			const goNext =
+				this.currentPage === this.totalPages ||
+				this.disabled ||
+				this.totalPages == null ||
+				this.totalPages === 0;
+
+			return goNext;
+		},
 	},
 	watch: {
 		selectedLimit(newValue) {
@@ -176,10 +213,7 @@ export default Vue.extend({
 			this.selectedLimit = newValue;
 		},
 	},
-	components: {
-		VSelect,
-		'farm-icon': Icon,
-	},
+	
 });
 </script>
 

package/src/components/Form/Form.stories.js

@@ -33,6 +33,7 @@ export const Primary = () => ({
 				document: 'Document',
 				name: 'Name',
 				checkbox: true,
+				birthDate: new Date('1980/09/20').toISOString()
 			},
 			validForm: false,
 			rules: {
@@ -53,6 +54,16 @@ export const Primary = () => ({
 			
 			<farm-label :required="true">True/false</farm-label>
 			<farm-checkbox v-model="form.checkbox" :rules="[rules.checked]" />
+
+			<farm-label :required="true">Birthdate:</farm-label>
+			<DatePicker
+				ref="birthDate"
+				inputId="form-pf-birthDate"
+				class="mt-4"
+				v-model="form.birthDate"
+				:readonly="true"
+				:required="true"
+			/>
 			
 			
             <div class="footer" :style="[styles.footer]">

package/src/components/IconBox/IconBox.scss

@@ -14,6 +14,10 @@
 			background: var(--farm-#{$color}-lighten);
 		}
 	}
+
+	&--neutral .farm-icon.farm-icon {
+		color: var(--farm-neutral-darken);
+	}
 }
 
 .farm-icon-box--inverted.farm-icon-box {
@@ -27,4 +31,8 @@
 		color: white;
 	}
 
+	&--neutral .farm-icon.farm-icon--white {
+		color: var(--farm-neutral-darken);
+	}
+
 }

package/src/components/Loader/Loader.stories.ts

@@ -43,7 +43,7 @@ export const Overlay = () => ({
 			this.show = true;
 			setTimeout(() => {
 				this.show = false;
-			}, 2000);
+			}, 5000);
 		},
 	},
 });