@farm-investimentos/front-mfe-components 9.2.2 → 9.2.4

package/src/components/Modal/Modal.vue

@@ -0,0 +1,86 @@
+<template>
+	<transition name="fade">
+		<div :class="{ 'farm-modal': true, ['farm-modal--size-' + size]: true }" v-if="inputValue">
+			<div class="farm-modal--container">
+				<div class="farm-modal--header">
+					<slot name="header"></slot>
+				</div>
+				<div class="farm-modal--content" :style="styles">
+					<slot name="content"></slot>
+				</div>
+				<div class="farm-modal--footer">
+					<slot name="footer"></slot>
+				</div>
+			</div>
+			<div class="farm-modal--overlay" @click="close()"></div>
+		</div>
+	</transition>
+</template>
+<script lang="ts">
+import Vue, { PropType, ref, toRefs, watch } from 'vue';
+
+export default Vue.extend({
+	name: 'farm-modal',
+	props: {
+		/**
+		 * v-model binding
+		 */
+		value: { type: Boolean, required: true, default: true },
+		/**
+		 * Is persistent
+		 */
+		persistent: { type: Boolean, default: false },
+		size: {
+			type: String as PropType<'xs' | 'sm' | 'md' | 'default'>,
+			default: 'default',
+		},
+		/**
+		 * content offset, in pixels, from the top
+		 */
+		offsetTop: {
+			type: Number,
+			default: 0,
+		},
+		/**
+		 * content offset, in pixels, from the bottom
+		 */
+		offsetBottom: {
+			type: Number,
+			default: 0,
+		},
+	},
+	setup(props, { emit }) {
+		const { offsetTop, offsetBottom, persistent, size } = toRefs(props);
+		const inputValue = ref(props.value);
+		const styles = {
+			paddingTop: offsetTop.value + 'px',
+			paddingBottom: offsetBottom.value + 'px',
+		};
+
+		const close = () => {
+			if (persistent.value) {
+				return false;
+			}
+			inputValue.value = false;
+			emit('input', false);
+		};
+
+		watch(
+			() => props.value,
+			newValue => {
+				inputValue.value = newValue;
+			}
+		);
+
+		return {
+			inputValue,
+			styles,
+			close,
+			size,
+		};
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import './Modal';
+</style>

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

@@ -0,0 +1,21 @@
+import { shallowMount } from '@vue/test-utils';
+
+import Modal from '../index';
+
+describe('Modal component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Modal, {
+			propsData: {
+				value: false,
+			},
+		});
+		component = wrapper.vm;
+	});
+
+	test('Modal created', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/Modal/index.ts

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

package/src/main.ts

@@ -62,6 +62,7 @@ export * from './components/Buttons/MultiImportButton';
 export * from './components/Card';
 export * from './components/Checkbox';
 export * from './components/Chip';
+export * from './components/CopyToClipboard';
 export * from './components/Logos/ProductLogo';
 export * from './components/Logos/OriginatorLogo';
 export * from './components/ResetTableRowSelection';
@@ -72,7 +73,7 @@ export * from './components/Label';
 export * from './components/Logger';
 export * from './components/Logger/LoggerItem';
 export * from './components/Icon';
-export * from './components/CopyToClipboard';
+export * from './components/Modal';
 export * from './components/ProgressBar';
 export * from './components/Stepper';
 export * from './components/Switcher';