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

package/package.json

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

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/Collapsible/Collapsible.vue

@@ -4,7 +4,7 @@
 			<div class="collapsible__header" @click="onToggleCollapsible(status)">
 				<div class="collapsible__content-title">
 					<div class="collapsible__icon collapsible__icon--main" v-if="icon !== ''">
-						<farm-icon color="secondary" size="md">
+						<farm-icon size="md">
 							{{ icon }}
 						</farm-icon>
 					</div>

package/src/components/ContextMenu/ContextMenu.scss

@@ -0,0 +1,32 @@
+@import '../../configurations/mixins';
+
+.farm-contextmenu {
+	display: inline-block;
+}
+
+.farm-contextmenu__popup {
+	visibility: hidden;
+	opacity: 0;
+	position: absolute;
+	display: block;
+	overflow-y: auto;
+	overflow-x: hidden;
+	contain: content;
+	font-family: 'Montserrat', sans-serif !important;
+
+	transform-origin: left top;
+	transition: visibility 0.1s linear, opacity 0.1s linear;
+
+	border-radius: 4px;
+	left: 0;
+
+	background: #FFFFFF;
+	border: 1px solid var(--farm-stroke-base);
+	@include addShadow;
+	border-radius: 5px;
+
+	&--visible {
+		opacity: 1;
+		visibility: visible;
+	}
+}

package/src/components/ContextMenu/ContextMenu.stories.js

@@ -0,0 +1,104 @@
+import { withDesign } from 'storybook-addon-designs';
+import ContextMenu from './';
+
+export default {
+	title: 'Interactions/ContextMenu',
+	component: ContextMenu,
+	decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `ContextMenu<br />
+				selector: <em>farm-contextmenu</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			value: false,
+		};
+	},
+	methods: {
+		toggleValue() {
+			this.value = !this.value;
+		},
+	},
+	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex;">
+        <farm-contextmenu v-model="value">
+            some text
+            <template v-slot:activator="{ on, attrs }">
+                <farm-btn @click="toggleValue">toggle</farm-btn>
+            </template>
+        </farm-contextmenu>
+	</div>`,
+});
+
+export const LongContent = () => ({
+	data() {
+		return {
+			value: false,
+		};
+	},
+	methods: {
+		toggleValue() {
+			this.value = !this.value;
+		},
+	},
+	template: `<div style="padding-left: 120px; padding-top: 80px;">
+        <farm-contextmenu v-model="value">
+            <div style="width: 160px">long content<br />
+			with breakline</div>
+            <template v-slot:activator="{ on, attrs }">
+                <farm-btn @click="toggleValue">toggle</farm-btn>
+            </template>
+        </farm-contextmenu>
+	</div>`,
+});
+
+export const Bottom = () => ({
+	data() {
+		return {
+			value: false,
+		};
+	},
+	methods: {
+		toggleValue() {
+			this.value = !this.value;
+		},
+	},
+	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex;">
+        <farm-contextmenu v-model="value" :bottom="true">
+            some text
+            <template v-slot:activator="{ on, attrs }">
+                <farm-btn @click="toggleValue">toggle</farm-btn>
+            </template>
+        </farm-contextmenu>
+	</div>`,
+});
+
+export const ComplexContent = () => ({
+	data() {
+		return {
+			value: false,
+		};
+	},
+	methods: {
+		toggleValue() {
+			this.value = !this.value;
+		},
+	},
+	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex;">
+        <farm-contextmenu v-model="value">
+            <farm-chip>farm chip</farm-chip>
+            <template v-slot:activator="{ on, attrs }">
+                <farm-btn @click="toggleValue">toggle</farm-btn>
+            </template>
+        </farm-contextmenu>
+	</div>`,
+});

package/src/components/ContextMenu/ContextMenu.vue

@@ -0,0 +1,129 @@
+<template>
+	<div class="farm-contextmenu" ref="parent">
+		<span ref="activator">
+			<slot name="activator"></slot>
+		</span>
+
+		<div
+			ref="popup"
+			:class="{
+				'farm-contextmenu__popup': true,
+				'farm-contextmenu__popup--visible': inputValue,
+			}"
+			:style="styles"
+		>
+			<slot></slot>
+		</div>
+	</div>
+</template>
+<script lang="ts">
+import Vue, { onMounted, ref, watch, reactive, onBeforeUnmount, toRefs } from 'vue';
+
+export default Vue.extend({
+	name: 'farm-contextmenu',
+	props: {
+		/**
+		 * Control visibility
+		 * v-model bind
+		 */
+		value: {
+			type: Boolean,
+			default: undefined,
+		},
+		/**
+		 * Aligns the component towards the bottom
+		 */
+		bottom: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props, { emit }) {
+		const parent = ref(null);
+		const popup = ref(null);
+		const activator = ref(null);
+		const styles = reactive({ minWidth: 0, top: 0 } as any);
+		const { bottom } = toRefs(props);
+
+		const inputValue = ref(props.value);
+
+		let hasBeenBoostrapped = false;
+
+		const outClick = (event: Event) => {
+			if (activator && !activator.value.contains(event.target)) {
+				emit('input', false);
+			}
+		};
+
+		const resizeWindowHandler = () => {
+			calculatePosition();
+		};
+
+		watch(
+			() => props.value,
+			newValue => {
+				if (newValue) {
+					if (!hasBeenBoostrapped) {
+						document.querySelector('body').appendChild(popup.value);
+
+						hasBeenBoostrapped = true;
+					}
+					window.addEventListener('click', outClick);
+					window.addEventListener('resize', resizeWindowHandler);
+
+					calculatePosition();
+				} else {
+					window.removeEventListener('click', outClick);
+				}
+				inputValue.value = newValue;
+			}
+		);
+
+		const calculatePosition = () => {
+			const parentBoundingClientRect = parent.value.getBoundingClientRect();
+			const popupClientRect = popup.value.getBoundingClientRect();
+
+			const offsetTop =
+				parentBoundingClientRect.top +
+				window.scrollY +
+				(!bottom.value ? 0 : parentBoundingClientRect.height);
+
+			let offsetLeft = parentBoundingClientRect.left;
+			if (popupClientRect.width > parentBoundingClientRect.width) {
+				offsetLeft =
+					offsetLeft + parentBoundingClientRect.width / 2 - popupClientRect.width / 2;
+			}
+			styles.minWidth =
+				parentBoundingClientRect.width > 96
+					? parseInt(parentBoundingClientRect.width)
+					: 96 + 'px';
+			styles.top = offsetTop + 'px';
+			styles.left = offsetLeft + 'px';
+		};
+
+		onMounted(() => {
+			calculatePosition();
+		});
+
+		onBeforeUnmount(() => {
+			if (hasBeenBoostrapped) {
+				window.removeEventListener('resize', resizeWindowHandler);
+				window.removeEventListener('click', outClick);
+				document.querySelector('body').removeChild(popup.value);
+			}
+		});
+
+		return {
+			parent,
+			popup,
+			activator,
+			styles,
+			inputValue,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+@import './ContextMenu';
+</style>

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

@@ -0,0 +1,20 @@
+import { shallowMount } from '@vue/test-utils';
+import ContextMenu from '../ContextMenu';
+
+describe('ContextMenu component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ContextMenu, {});
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+});

package/src/components/ContextMenu/index.ts

@@ -0,0 +1,5 @@
+import ContextMenu from './ContextMenu.vue';
+
+export default ContextMenu;
+
+export { ContextMenu };

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: 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/DatePicker/DatePicker.vue

@@ -143,6 +143,12 @@ export default Vue.extend({
 			this.dateField = newValue;
 			this.fieldRange = this.formatDateRange(newValue);
 		},
+		fieldRange(newValue) {
+			if (!newValue) {
+				this.dateField = '';
+				this.save();
+			}
+		},
 	},
 	methods: {
 		formatDateRange(date) {

package/src/components/DialogHeader/DialogHeader.stories.js

@@ -3,6 +3,17 @@ import DialogHeader from './DialogHeader.vue';
 export default {
 	title: 'Display/Dialog/DialogHeader',
 	component: DialogHeader,
+	parameters: {
+		docs: {
+			description: {
+				component: `Dialog Header<br />
+				selector: <em>farm-dialog-header</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({

package/src/components/DialogHeader/DialogHeader.vue

@@ -7,16 +7,15 @@
 
 		<slot></slot>
 
-		<farm-icon
+		<farm-btn
 			v-if="hasCloseIcon"
-			role="button"
-			title="Fechar"
+			icon
 			class="farm-dialog-header__close"
-			color="secondary"
+			title="Fechar"
 			@click="onClose"
 		>
-			close-thick
-		</farm-icon>
+			<farm-icon role="button"> close-thick </farm-icon>
+		</farm-btn>
 	</header>
 </template>
 <script lang="ts">
@@ -28,21 +27,21 @@ export default Vue.extend({
 	name: 'farm-dialog-header',
 	props: {
 		/**
-		 * Título
+		 * Title
 		 */
 		title: {
 			type: String,
 			default: '',
 		},
 		/**
-		 * Ícone - usa os do material icons
+		 * Icon
 		 */
 		iconTitle: {
 			type: String,
 			default: null,
 		},
 		/**
-		 * Ícone - se possui o ícone de fechar
+		 * Has close icon?
 		 */
 		hasCloseIcon: {
 			type: Boolean,

package/src/components/FilePicker/FilePicker.vue

@@ -7,7 +7,7 @@
 			:accept="acceptedFileTypes"
 		/>
 		<div v-if="!selectedFile" class="selectfile-container">
-			<farm-icon color="secondary">cloud-upload</farm-icon>
+			<farm-icon>cloud-upload</farm-icon>
 			<p>Clique para selecionar ou arraste o arquivo aqui</p>
 		</div>
 		<div v-if="selectedFile || maxSizeReach" class="reset-container">
@@ -21,7 +21,6 @@
 
 			<farm-btn
 				outlined
-				color="secondary"
 				class="farm-btn--responsive"
 				title="Escolher outro"
 				@click="reset"