@farm-investimentos/front-mfe-components 11.1.0 → 11.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "11.1.0",
+	"version": "11.2.0",
 	"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/Checkbox/Checkbox.scss

@@ -1,4 +1,5 @@
 @import '../../configurations/theme-colors';
+@import '../../configurations/variables';
 
 .farm-checkbox__container {
     display: flex;
@@ -46,6 +47,7 @@
     &--disabled {
         border-color: #dadada;
         cursor: default;
+        opacity: 0.6;
 
         &.farm-checkbox--checked {
             background-color: #dadada;
@@ -56,4 +58,12 @@
         color: white;
     }
 
+}
+
+@each $size,
+$value in $sizes {
+    #{'.farm-checkbox[size=' + $size +']'} {
+        width: $value;
+        height: $value;
+    }
 }

package/src/components/Checkbox/Checkbox.stories.js

@@ -1,6 +1,6 @@
 import Checkbox from './Checkbox';
 import baseThemeColors from '../../configurations/_theme-colors-base.scss';
-
+import sizes from '../../configurations/sizes';
 const colors = Object.keys(baseThemeColors);
 const variations = ['', 'darken', 'lighten'];
 
@@ -92,3 +92,17 @@ export const Colors = () => ({
 		</div>
 	</div>`,
 });
+
+export const Sizes = () => ({
+	data() {
+		return {
+			sizes,
+			isChecked: true,
+		};
+	},
+	template: `<div style="display: flex; flex-direction: column; flex-wrap: wrap;">
+        <div v-for="size of sizes">
+			<farm-checkbox v-model="isChecked" :size="size" :label="size" /><br />
+        </div>
+	</div>`,
+});

package/src/components/Checkbox/Checkbox.vue

@@ -8,9 +8,10 @@
 				'farm-checkbox--lighten': variation === 'lighten',
 				'farm-checkbox--darken': variation === 'darken',
 			}"
+			:size="$props.size"
 			@click="toggleValue"
 		>
-			<farm-icon size="sm" v-if="innerValue">check</farm-icon>
+			<farm-icon :size="$props.size" v-if="innerValue">check</farm-icon>
 		</span>
 		<farm-label v-if="label">
 			{{ label }}
@@ -57,6 +58,13 @@ export default Vue.extend({
 			type: Array as PropType<Array<Function>>,
 			default: () => [],
 		},
+		/**
+		 * Size
+		 */
+		size: {
+			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
+			default: 'md',
+		},
 	},
 	setup(props, { emit }) {
 		const innerValue = ref(props.value);

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

@@ -2,6 +2,7 @@
 	position: relative;
 	color: var(--v-primary-base);
 	font-size: 12px;
+
 	.farm-icon {
 		position: absolute;
 		right: -20px;
@@ -17,11 +18,18 @@
 
 th.sortable {
 	cursor: pointer;
+
 	&:not(.active) {
 		&:hover {
-			.v-icon {
+			.farm-icon {
 				opacity: 0.5 !important;
 			}
 		}
 	}
 }
+
+th span.span-checkbox {
+	display: flex;
+	justify-content: flex-start;
+	padding-left: 4px;
+}

package/src/components/DataTableHeader/DataTableHeader.stories.js

@@ -1,40 +1,64 @@
+import { withDesign } from 'storybook-addon-designs';
 import DataTableHeader from './DataTableHeader.vue';
 
 export default {
 	title: 'Display/Table/DataTableHeader',
 	component: DataTableHeader,
+	decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `DataTable Header<br />
+				selector: <em>farm-datatable-header</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({
 	data() {
 		return {
-			headers: [
-				{
-					text: 'Grupo',
-					sortable: true,
-					value: 'name',
-					align: 'left',
-				},
-				{
-					text: 'Aprovado',
-					sortable: true,
-					value: 'approvedAmount',
-					align: 'center',
-					width: 320,
-				},
-				{
-					text: 'Disponível',
-					sortable: false,
-					value: 'availableAmount',
-					align: 'center',
-					width: 160,
-				},
-			],
+			headers,
+			sortClick: [],
+			firstSelected: false,
+		};
+	},
+	template: `<farm-datatable-header :headers="headers" :sortClick="sortClick" :firstSelected="firstSelected" />`,
+});
+
+export const CheckBox = () => ({
+	data() {
+		return {
+			headers,
 			sortClick: [],
 			firstSelected: false,
 		};
 	},
-	template: `<DataTableHeader :headers="headers" :sortClick="sortClick" :firstSelected="firstSelected" />`,
+	template: `<farm-datatable-header :headers="headers" :sortClick="sortClick" :firstSelected="firstSelected" :showCheckbox="true" :selectedIndex="1" />`,
 });
 
-Primary.storyName = 'Básico';
+const headers = [
+	{
+		text: 'Grupo',
+		sortable: true,
+		value: 'name',
+		align: 'left',
+	},
+	{
+		text: 'Aprovado',
+		sortable: true,
+		value: 'approvedAmount',
+		align: 'center',
+		width: 320,
+	},
+	{
+		text: 'Disponível',
+		sortable: false,
+		value: 'availableAmount',
+		align: 'center',
+		width: 160,
+	},
+];

package/src/components/DataTableHeader/DataTableHeader.vue

@@ -33,31 +33,26 @@
 					</farm-icon>
 				</span>
 
-				<span v-if="isTHDataTableSelect(item) && showCheckbox">
-					<v-simple-checkbox
+				<span v-if="isTHDataTableSelect(item) && showCheckbox" class="span-checkbox">
+					<!--
 						:indeterminate="headerProps.someItems && !headerProps.everyItem"
-						v-model="inputVal"
-						@input="selectAll"
-					></v-simple-checkbox>
+					-->
+					<farm-checkbox size="sm" v-model="inputVal" @input="selectAll" />
 				</span>
 			</th>
 		</tr>
 	</thead>
 </template>
 
-<script>
+<script lang="ts">
 /* eslint-disable */
 import Vue from 'vue';
-import VSimpleCheckbox from 'vuetify/lib/components/VCheckbox/VSimpleCheckbox';
 
 export default Vue.extend({
 	name: 'farm-datatable-header',
-	components: {
-		VSimpleCheckbox,
-	},
 	props: {
 		/**
-		 * Cabeçalho
+		 * Headers
 		 */
 		headers: {
 			type: Array,
@@ -100,6 +95,7 @@ export default Vue.extend({
 		 * Hide/show checkbox
 		 */
 		showCheckbox: {
+			type: Boolean,
 			default: true,
 		},
 	},

package/src/components/DataTablePaginator/DataTablePaginator.scss

@@ -17,13 +17,24 @@ 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;
+            }
+            
+            
+            &:disabled {
+                .farm-icon {
+                    color: var(--farm-neutral-base);
+                }
+            }
         }
 
         &:first-child button {
@@ -37,16 +48,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 +78,8 @@ ul.farm-paginator {
 
 .farm-paginator--gutter {
     margin: 16px 24px 0;
+}
+
+.farm-typography.button {
+    font-size: 14px;
 }