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

package/package.json

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

package/src/components/DatePicker/DatePicker.stories.js

@@ -28,7 +28,6 @@ export const Primary = () => ({
     </div>`,
 });
 
-/*
 export const InitValue = () => ({
 	components: { DatePicker },
 	template: `<div style='max-width: 320px'><DatePicker inputId="input-custom-id-1" value="2021-08-01" /></div>`,
@@ -49,16 +48,10 @@ export const RequiredDates = () => ({
     </div>`,
 });
 
-export const readonlyFalse = () => ({
+export const ReadonlyFalse = () => ({
 	components: { DatePicker },
 	template: `<div style='max-width: 320px'>
         <DatePicker :readonly="false" inputId="input-custom-id-3"/>
     </div>`,
 });
 
-Primary.storyName = 'Básico';
-InitValue.storyName = 'Data inicial';
-MinMaxDates.storyName = 'Data mínima e máxima';
-RequiredDates.storyName = 'Obrigatório';
-readonlyFalse.storyName = 'Permitir digitação';
-*/

package/src/components/DialogHeader/DialogHeader.scss

@@ -8,3 +8,12 @@
         opacity: 0.8;
     }
 }
+
+header {
+    font-size: 12px;
+    padding: 16px;
+    background-color: #fff;
+    font-weight: 700;
+    color: var(--v-secondary-base);
+    border-bottom: 1px solid #d6d6d6;
+}

package/src/components/Loader/Loader.scss

@@ -1,34 +1,84 @@
-.farm-loader__spinner {
-	display: inline-block;
+$loader-rotate-animation: loader-rotate 1.4s linear infinite !default;
+$loader-rotate-dash: loader-dash 1.4s ease-in-out infinite !default;
+$loader-intermediate-svg-transition: all 0.2s ease-in-out !default;
+$loader-overlay-transition: all 0.6s ease-in-out !default;
+
+.farm-loader {
 	width: 70px;
 	height: 70px;
-	border-radius: 50%;
+	color: var(--v-secondary-base) !important;
+	caret-color: var(--v-secondary-base) !important;
 	position: relative;
-	animation: rotate 1s linear infinite;
+	display: inline-flex;
+	vertical-align: middle;
+	justify-content: center;
+	align-items: center;
+
+	& circle {
+		stroke-width: 3.7;
+	}
 
 	&--small {
 		width: 35px;
 		height: 35px;
+
+		& circle {
+			stroke-width: 5.7;
+		}
 	}
 
 	&--big {
 		width: 100px;
 		height: 100px;
+
+		& circle {
+			stroke-width: 2.7;
+		}
 	}
-}
 
-.farm-loader__spinner::before {
-	content: '';
-	box-sizing: border-box;
-	position: absolute;
-	inset: 0px;
-	border-radius: 50%;
-	border: 5px solid var(--v-secondary-base);
-	animation: prixClipFix 2s linear infinite;
-}
+	> svg {
+		width: 100%;
+		height: 100%;
+		margin: auto;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 0;
+	}
+
+	&--visible {
+		animation: loader-dash 1.4s ease-in-out infinite;
+		stroke-linecap: round;
+		stroke-dasharray: 80, 200;
+		stroke-dashoffset: 0px;
+	}
+
+	&--indeterminate {
+		> svg {
+			animation: $loader-rotate-animation;
+			transform-origin: center center;
+			transition: $loader-intermediate-svg-transition;
+		}
 
-.farm-loader__spinner--big-border:before {
-	border-width: 6px;
+		.farm-loader__overlay {
+			animation: $loader-rotate-dash;
+			stroke-linecap: round;
+			stroke-dasharray: 80, 200;
+			stroke-dashoffset: 0px;
+		}
+	}
+	&__info {
+		align-items: center;
+		display: flex;
+		justify-content: center;
+	}
+	&__overlay {
+		stroke: currentColor;
+		z-index: 2;
+		transition: $loader-overlay-transition;
+	}
 }
 
 .farm-loader__overlay {
@@ -44,26 +94,23 @@
 	bottom: 0;
 }
 
-@keyframes rotate {
-	100% {
-		transform: rotate(360deg);
-	}
-}
-
-@keyframes prixClipFix {
+@keyframes loader-dash {
 	0% {
-		clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
-	}
-	25% {
-		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+		stroke-dasharray: 1, 200;
+		stroke-dashoffset: 0px;
 	}
 	50% {
-		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+		stroke-dasharray: 100, 200;
+		stroke-dashoffset: -15px;
 	}
-	75% {
-		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+	100% {
+		stroke-dasharray: 100, 200;
+		stroke-dashoffset: -125px;
 	}
+}
+
+@keyframes loader-rotate {
 	100% {
-		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+		transform: rotate(360deg);
 	}
 }

package/src/components/Loader/Loader.vue

@@ -1,9 +1,56 @@
 <template>
-	<div class="farm-loader__overlay" v-if="mode === 'overlay'" :style="styleObject">
-		<span class="farm-loader__spinner farm-loader__spinner--big"></span>
-	</div>
-	<div v-else>
-		<span class="farm-loader__spinner farm-loader__spinner--big-border" :class="calculateSize"></span>
+	<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"
+			>
+				<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>
+		</div>
 	</div>
 </template>
 <script lang="ts">
@@ -22,7 +69,6 @@ export default Vue.extend({
 		},
 	},
 	data() {
-
 		const zIndex = Math.max(
 			...Array.from(document.querySelectorAll('body *'), el =>
 				parseFloat(window.getComputedStyle(el).zIndex)
@@ -38,7 +84,7 @@ export default Vue.extend({
 
 	computed: {
 		calculateSize() {
-			return this.size === 'small' ? 'loader--small' : '';
+			return this.size === 'small' ? 'farm-loader--small' : '';
 		},
 	},
 });

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

@@ -20,7 +20,7 @@ describe('Loader component', () => {
 		});
 	});
 
-	describe('Compited properties', () => {
+	describe('Computed properties', () => {
 		it('Should calculate calculateSize for default size prop', () => {
 			expect(component.calculateSize).toEqual('');
 		});
@@ -29,7 +29,7 @@ describe('Loader component', () => {
 			await wrapper.setProps({
 				size: 'small',
 			});
-			expect(component.calculateSize).toEqual('loader--small');
+			expect(component.calculateSize).toEqual('farm-loader--small');
 		});
 	});
 });

package/src/components/Modal/Modal.scss

@@ -0,0 +1,102 @@
+@import '../../configurations/mixins';
+
+.farm-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 100;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    transition: .2s cubic-bezier(0.25, 0.8, 0.25, 1), z-index 1ms;
+
+    &--overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background: rgba(#999999, 0.8);
+        z-index: 101;
+    }
+
+    &--container {
+        background-color: white;
+        border-radius: 8px;
+        max-height: calc(100vh - 64px);
+        position: relative;
+        overflow: hidden;
+        z-index: 102;
+        @include addShadow;
+    }
+
+    &--size-default {
+        .farm-modal--container {
+            width: 960px;
+            max-width: 960px;
+        }
+    }
+
+    &--size-md {
+        .farm-modal--container {
+            width: 568px;
+            max-width: 568px;
+        }
+    }
+
+    &--size-sm {
+        .farm-modal--container {
+            width: 448px;
+            max-width: 448px;
+        }
+    }
+
+    &--size-xs {
+        .farm-modal--container {
+            width: 360px;
+            max-width: 360px;
+        }
+    }
+
+    &--content {
+        max-height: calc(100vh - 64px);
+        overflow-y: auto;
+        width: 100%;
+    }
+
+    &--header {
+        position: absolute;
+        top: 0;
+        background: white;
+        width: 100%;
+    }
+
+    &--footer {
+        position: absolute;
+        bottom: 0;
+        background: white;
+        width: 100%;
+    }
+
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity .25s
+}
+
+.fade-enter,
+.fade-leave-to {
+    opacity: 0
+}
+
+@include upToSm {
+    .farm-modal {
+        &--container {
+            width: calc(100vw - 32px);
+            max-width: calc(100vw - 32px);
+        }
+    }
+}

package/src/components/Modal/Modal.stories.js

@@ -0,0 +1,176 @@
+import Modal from './Modal.vue';
+
+export default {
+	title: 'Display/Modal',
+	component: Modal,
+	parameters: {
+		docs: {
+			description: {
+				component: `Modal<br />
+				selector: <em>farm-modal</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			value: false,
+			text,
+		};
+	},
+	template: `<div>
+	<farm-btn color="secondary" @click="value = true">abrir</farm-btn>
+	<farm-modal v-model="value">
+		<template v-slot:content>
+			<div v-html="text" />
+		</template>
+	</farm-modal>
+	</div>`,
+});
+
+export const HeaderAndBottomFromDS = () => ({
+	data() {
+		return {
+			value: false,
+			text,
+		};
+	},
+	template: `<div>
+	<farm-btn color="secondary" @click="value = true">abrir</farm-btn>
+	<farm-modal v-model="value" :offsetTop="48" :offsetBottom="64">
+		<template v-slot:header>
+			<farm-dialog-header title="Título" @onClose="() => value = false" />
+		</template>
+		<template v-slot:content>
+		<div v-html="text" />
+		</template>
+		
+		<template v-slot:footer>
+			<farm-dialog-footer @onConfirm="() => value = false" @onClose="() => value = false" />
+		</template>
+	</farm-modal>
+	</div>`,
+});
+
+export const SizeMD = () => ({
+	data() {
+		return {
+			value: false,
+			text,
+		};
+	},
+	template: `<div>
+	<farm-btn color="secondary" @click="value = true">abrir</farm-btn>
+	<farm-modal v-model="value" size="md">
+		<template v-slot:content>
+			<div v-html="text" />
+		</template>
+	</farm-modal>
+	</div>`,
+});
+
+export const SizeSmall = () => ({
+	data() {
+		return {
+			value: false,
+			text,
+		};
+	},
+	template: `<div>
+	<farm-btn color="secondary" @click="value = true">abrir</farm-btn>
+	<farm-modal v-model="value" size="sm">
+		<template v-slot:content>
+			<div v-html="text" />
+		</template>
+	</farm-modal>
+	</div>`,
+});
+
+export const SizeXs = () => ({
+	data() {
+		return {
+			value: false,
+			text,
+		};
+	},
+	template: `<div>
+	<farm-btn color="secondary" @click="value = true">abrir</farm-btn>
+	<farm-modal v-model="value" size="xs">
+		<template v-slot:content>
+			<div v-html="text" />
+		</template>
+	</farm-modal>
+	</div>`,
+});
+
+export const HeaderAndBottom = () => ({
+	data() {
+		return {
+			value: false,
+			text,
+		};
+	},
+	template: `<div>
+	<farm-btn color="secondary" @click="value = true">abrir</farm-btn>
+	<farm-modal v-model="value" :offsetTop="24" :offsetBottom="64">
+		<template v-slot:header>
+			header vai aqui
+		</template>
+		<template v-slot:content>
+		<div v-html="text" />
+		</template>
+		
+		<template v-slot:footer>
+			footer vai aqui
+		</template>
+	</farm-modal>
+	</div>`,
+});
+
+const text = `inicio!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste 1!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste 2!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste 3!`;

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';