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

package/src/components/Loader/Loader.vue

@@ -1,60 +1,58 @@
 <template>
-	<div>
-		<div class="farm-loader__overlay" v-if="mode === 'overlay'" :style="styleObject">
-			<div
-				role="progressbar"
-				aria-valuemin="0"
-				aria-valuemax="100"
-				class="farm-loader farm-loader--big farm-loader--visible farm-loader--indeterminate"
+	<div class="farm-loader__overlay" v-if="mode === 'overlay'" :style="styleObject">
+		<div
+			role="progressbar"
+			aria-valuemin="0"
+			aria-valuemax="100"
+			class="farm-loader farm-loader--big farm-loader--visible farm-loader--indeterminate"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
+				style="transform: rotate(0deg)"
 			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
-					style="transform: rotate(0deg)"
-				>
-					<circle
-						fill="transparent"
-						cx="45.714285714285715"
-						cy="45.714285714285715"
-						r="20"
-						stroke-dasharray="125.664"
-						stroke-dashoffset="125.66370614359172px"
-						class="farm-loader__overlay"
-					></circle>
-				</svg>
-				<div class="farm-loader__info"></div>
-			</div>
-		</div>
-		<div v-else>
-			<div
-				role="progressbar"
-				aria-valuemin="0"
-				aria-valuemax="100"
-				class="farm-loader farm-loader--visible farm-loader--indeterminate"
-				:class="calculateSize"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
-					style="transform: rotate(0deg)"
-				>
-					<circle
-						fill="transparent"
-						cx="45.714285714285715"
-						cy="45.714285714285715"
-						r="20"
-						stroke-dasharray="125.664"
-						stroke-dashoffset="125.66370614359172px"
-						class="farm-loader__overlay"
-					></circle>
-				</svg>
-				<div class="farm-loader__info"></div>
-			</div>
+				<circle
+					fill="transparent"
+					cx="45.714285714285715"
+					cy="45.714285714285715"
+					r="20"
+					stroke-dasharray="125.664"
+					stroke-dashoffset="125.66370614359172px"
+					class="farm-loader__overlay"
+				></circle>
+			</svg>
+			<div class="farm-loader__info"></div>
 		</div>
 	</div>
+	<div
+		v-else
+		role="progressbar"
+		aria-valuemin="0"
+		aria-valuemax="100"
+		class="farm-loader farm-loader--visible farm-loader--indeterminate"
+		:class="calculateSize"
+	>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
+			style="transform: rotate(0deg)"
+		>
+			<circle
+				fill="transparent"
+				cx="45.714285714285715"
+				cy="45.714285714285715"
+				r="20"
+				stroke-dasharray="125.664"
+				stroke-dashoffset="125.66370614359172px"
+				class="farm-loader__overlay"
+			></circle>
+		</svg>
+		<div class="farm-loader__info"></div>
+	</div>
 </template>
 <script lang="ts">
 import Vue from 'vue';
+import { calculateMainZindex } from '../../helpers';
 
 export default Vue.extend({
 	name: 'farm-loader',
@@ -69,15 +67,9 @@ export default Vue.extend({
 		},
 	},
 	data() {
-		const zIndex = Math.max(
-			...Array.from(document.querySelectorAll('body *'), el =>
-				parseFloat(window.getComputedStyle(el).zIndex)
-			).filter(zIndex => !Number.isNaN(zIndex)),
-			0
-		);
 		return {
 			styleObject: {
-				zIndex,
+				zIndex: calculateMainZindex(),
 			},
 		};
 	},
@@ -90,5 +82,5 @@ export default Vue.extend({
 });
 </script>
 <style lang="scss" scoped>
-@import 'Loader.scss';
+@import 'Loader';
 </style>

package/src/components/Modal/Modal.scss

@@ -6,7 +6,6 @@
     left: 0;
     width: 100vw;
     height: 100vh;
-    z-index: 100;
     align-items: center;
     display: flex;
     justify-content: center;

package/src/components/Modal/Modal.vue

@@ -1,7 +1,11 @@
 <template>
 	<transition name="fade">
-		<div :class="{ 'farm-modal': true, ['farm-modal--size-' + size]: true }" v-if="inputValue">
-			<div class="farm-modal--container">
+		<div
+			v-if="inputValue"
+			:class="{ 'farm-modal': true, ['farm-modal--size-' + size]: true }"
+			:style="styleObject"
+		>
+			<div class="farm-modal--container teste">
 				<div class="farm-modal--header">
 					<!-- @slot header -->
 					<slot name="header"></slot>
@@ -21,8 +25,10 @@
 		</div>
 	</transition>
 </template>
+
 <script lang="ts">
-import Vue, { PropType, ref, toRefs, watch } from 'vue';
+import Vue, { PropType, reactive, ref, toRefs, watch } from 'vue';
+import { calculateMainZindex } from '../../helpers';
 
 export default Vue.extend({
 	name: 'farm-modal',
@@ -57,6 +63,7 @@ export default Vue.extend({
 	setup(props, { emit }) {
 		const { offsetTop, offsetBottom, persistent, size } = toRefs(props);
 		const inputValue = ref(props.value);
+		const styleObject = reactive({ zIndex: 1 });
 		const styles = {
 			marginTop: offsetTop.value + 'px',
 			marginBottom: offsetBottom.value + 'px',
@@ -77,7 +84,8 @@ export default Vue.extend({
 			newValue => {
 				inputValue.value = newValue;
 				if (newValue) {
-					window.addEventListener('keyup', escHandler);
+					(styleObject.zIndex = calculateMainZindex()),
+						window.addEventListener('keyup', escHandler);
 				}
 			}
 		);
@@ -91,6 +99,7 @@ export default Vue.extend({
 		return {
 			inputValue,
 			styles,
+			styleObject,
 			size,
 			close,
 		};

package/src/components/TableContextMenu/TableContextMenu.stories.js

@@ -64,3 +64,18 @@ export const ClickHandler = () => ({
 		<farm-context-menu :items="[{ label: 'Click me', icon: { type: 'open-in-new' }, handler: 'edit' }]" @edit="editItem()" />
 	</div>`,
 });
+
+export const OnRightSide = () => ({
+	data() {
+		return {
+			items: [
+				{ label: 'Novo', icon: { type: 'open-in-new' } },
+				{ label: 'Nome bem longo sem quebrar linha', icon: { color: 'secondary', type: 'open-in-new' } },
+				{ label: 'Remover', icon: { color: 'error', type: 'delete' } },
+			],
+		};
+	},
+	template: `<div style="padding-left: 80px; display: flex; justify-content: end;">
+		<farm-context-menu ref="multi" :items="items" />
+	</div>`,
+});

package/src/components/Typography/Typography.scss

@@ -59,4 +59,5 @@
 			font-size: calc(#{$val} - 2px);
 		}
 	}
-}
+}
+

package/src/helpers/calculateMainZindex.js

@@ -0,0 +1,10 @@
+export default () => {
+	const zIndex = Math.max(
+		...Array.from(document.querySelectorAll('body *'), el =>
+			parseFloat(window.getComputedStyle(el).zIndex)
+		).filter(zIndex => !Number.isNaN(zIndex)),
+		0
+	);
+
+	return zIndex;
+};

package/src/helpers/date.js

@@ -7,7 +7,7 @@ export const defaultFormat = (data, UTCTimeZone = true) => {
 
 export const convertDate = (data) => {
 	if(!data) {
-		return null;
+		return '';
 	}
 	let newdate = data.split("/").reverse().join("-");
 	return newdate;

package/src/helpers/index.js

@@ -0,0 +1 @@
+export { default as calculateMainZindex } from './calculateMainZindex';