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

package/package.json

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

package/src/components/ContextMenu/ContextMenu.vue

@@ -18,6 +18,7 @@
 </template>
 <script lang="ts">
 import Vue, { ref, watch, reactive, onBeforeUnmount, toRefs } from 'vue';
+import { calculateMainZindex } from '../../helpers';
 
 export default Vue.extend({
 	name: 'farm-contextmenu',
@@ -42,7 +43,7 @@ export default Vue.extend({
 		const parent = ref(null);
 		const popup = ref(null);
 		const activator = ref(null);
-		const styles = reactive({ minWidth: 0, top: 0 } as any);
+		const styles = reactive({ minWidth: 0, top: 0, zIndex: 1 } as any);
 		const { bottom } = toRefs(props);
 
 		const inputValue = ref(props.value);
@@ -111,8 +112,9 @@ export default Vue.extend({
 				offsetTop -= bottomEdge - window.scrollY - clientHeight + 12;
 			}
 
-			styles.top = offsetTop + 'px';
-			styles.left = offsetLeft + 'px';
+			styles.top = `${offsetTop}px`;
+			styles.left = `${offsetLeft}px`;
+			styles.zIndex = calculateMainZindex();
 		};
 
 		onBeforeUnmount(() => {

package/src/components/TextFieldV2/TextFieldV2.stories.js

@@ -0,0 +1,35 @@
+import { withDesign } from 'storybook-addon-designs';
+import TextFieldV2 from './TextFieldV2.vue';
+
+export default {
+	title: 'Form/TextFieldV2',
+	component: TextFieldV2,
+	decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `Text field v2<br />
+				selector: <em>farm-texfield-v2</em><br />
+				<span style="color: var(--farm-extra-1-base);">development</span>
+				`,
+			},
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%85---Design-System-%7C-v1?node-id=1503%3A227',
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			v: 'some text',
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield-v2 v-model="v" />
+		value: {{ v }}
+	</div>`,
+});

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -0,0 +1,46 @@
+<template>
+	<div class="farm-textfield">
+		<div class="farm-textfield--input">
+			<input v-bind="$attrs" v-model="innerValue" />
+		</div>
+		<span class="farm-textfield--text"> hint text</span>
+	</div>
+</template>
+<script lang="ts">
+import Vue, { ref, watch } from 'vue';
+
+export default Vue.extend({
+	name: 'farm-textfield-v2',
+	inheritAttrs: true,
+	props: {
+		/**
+		 * v-model binding
+		 */
+		value: {},
+	},
+	setup(props, { emit }) {
+		const innerValue = ref(props.value);
+
+		watch(
+			() => props.value,
+			() => {
+				innerValue.value = props.value;
+			}
+		);
+
+		watch(
+			() => innerValue.value,
+			() => {
+				emit('input', innerValue.value);
+			}
+		);
+
+		return {
+			innerValue,
+		};
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import 'TextFieldV2';
+</style>

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

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

package/src/components/TextFieldV2/index.ts

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

package/src/helpers/calculateMainZindex.js

@@ -1,9 +1,11 @@
 export default () => {
-	const zIndex = Math.max(
-		...Array.from(document.querySelectorAll('body *'), el =>
-			parseFloat(window.getComputedStyle(el).zIndex)
-		).filter(zIndex => !Number.isNaN(zIndex)),
-		0
+	const all_z = [];
+	document.querySelectorAll('*').forEach(function (elem) {
+		all_z.push(elem.style.zIndex);
+	});
+	const zIndex = Math.max.apply(
+		null,
+		all_z.map(x => Number(x))
 	);
 
 	return zIndex;

package/src/main.ts

@@ -83,6 +83,7 @@ export * from './components/RadioGroup';
 export * from './components/Stepper';
 export * from './components/Switcher';
 export * from './components/TextField';
+export * from './components/TextFieldV2';
 export * from './components/Tooltip';
 export * from './components/Typography';