@farm-investimentos/front-mfe-components 15.3.3 → 15.3.5

package/package.json

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

package/src/components/Collapsible/Collapsible.stories.js

@@ -26,7 +26,39 @@ export const Title = () => ({
 
 export const Icon = () => ({
 	template:
-		'<farm-collapsible icon="plus" title="With Icon">collapsible content</farm-collapsible>',
+		'<farm-collapsible icon="clipboard" title="With Icon">collapsible content</farm-collapsible>',
+});
+
+export const ColorIcons = () => ({
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `
+	<farm-row>
+		<farm-col cols="12" md="4"  v-for="color in colors" :key="'color_' + color">
+			<h4 style="margin:15px">{{ color }}</h4>
+			<farm-collapsible 
+				style="margin-top:15px"
+				icon="clipboard" 
+				title="color icon" 
+				:colorIcon="color"
+			>
+			</farm-collapsible>
+		</farm-col>
+	</farm-row>`,
+});
+
+export const Export = () => ({
+	data() {
+		return {
+			clicked: false,
+		};
+	},
+	template: `<div>
+		clicked: {{clicked}} <farm-collapsible icon="clipboard" title="With Button" :hasButton="true" @onClick="value => clicked = !clicked" >collapsible content</farm-collapsible>
+		</div>`,
 });
 
 export const Opened = () => ({
@@ -110,7 +142,9 @@ export const Dense = () => ({
 Primary.storyName = 'Basic';
 Title.storyName = 'Title';
 Icon.storyName = 'Icon';
+Export.storyName = 'Export';
 Opened.storyName = 'Opened';
-ColorsChips.storyName = 'Colors';
+ColorIcons.storyName = 'Icon Colors';
+ColorsChips.storyName = 'Chip Colors';
 ColorsOutlinedChips.storyName = 'Outlined';
 Dense.storyName = 'Dense';

package/src/components/Collapsible/Collapsible.vue

@@ -4,13 +4,16 @@
 			<div class="collapsible__header" @click="onToggleCollapsible(status)">
 				<div class="collapsible__content-title">
 					<div class="collapsible__icon collapsible__icon--main" v-if="icon !== ''">
-						<farm-icon size="md" color="secondary-green">
+						<farm-icon size="md" :color="colorIcon">
 							{{ icon }}
 						</farm-icon>
 					</div>
 					<farm-heading type="6" color="black">
 						{{ title }}
 					</farm-heading>
+					<farm-btn outlined class="ml-6" v-if="hasButton" @click.stop="onClick()">
+						{{ labelButton }}
+					</farm-btn>
 				</div>
 				<div class="collapsible__content-right">
 					<div class="collapsible__icon" v-if="showChip">
@@ -82,6 +85,27 @@ export default defineComponent({
 			type: String,
 			default: '',
 		},
+		/**
+		 * has butotn
+		 */
+		hasButton: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * export button
+		 */
+		onExport: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * label button
+		 */
+		labelButton: {
+			type: String,
+			default: 'Exportar',
+		},
 		/**
 		 * color of Chip
 		 */
@@ -101,6 +125,25 @@ export default defineComponent({
 			>,
 			default: 'primary',
 		},
+		colorIcon: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: 'secondary-green',
+		},
+		/**
+		 * Is dense
+		 */
 		dense: {
 			type: Boolean,
 			default: false,
@@ -112,6 +155,9 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Is variation
+		 */
 		variation: {
 			type: String,
 			default: 'base',
@@ -134,6 +180,9 @@ export default defineComponent({
 			this.status = !status;
 			this.$emit('open', this.status);
 		},
+		onClick(): void {
+			this.$emit('onClick');
+		},
 	},
 });
 </script>

package/src/components/ContextMenu/ContextMenu.vue

@@ -17,7 +17,7 @@
 	</div>
 </template>
 <script lang="ts">
-import { ref, watch, reactive, onBeforeUnmount, toRefs, defineComponent } from 'vue';
+import { ref, watch, reactive, onBeforeUnmount, toRefs, defineComponent, nextTick } from 'vue';
 import { calculateMainZindex, isChildOfFixedElement } from '../../helpers';
 
 export default defineComponent({
@@ -38,6 +38,13 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Aligns the component towards the top
+		 */
+		top: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * Max height
 		 */
@@ -64,7 +71,7 @@ export default defineComponent({
 		const parent = ref(null);
 		const popup = ref(null);
 		const activator = ref(null);
-		const { bottom, maxHeight, stayOpen } = toRefs(props);
+		const { top, bottom, maxHeight, stayOpen } = toRefs(props);
 
 		const styles = reactive({
 			minWidth: 0,
@@ -74,7 +81,7 @@ export default defineComponent({
 		} as any);
 
 		const inputValue = ref(props.value);
-		
+
 		let hasBeenBoostrapped = false;
 
 		const outClick = event => {
@@ -114,8 +121,17 @@ export default defineComponent({
 						hasBeenBoostrapped = true;
 					}
 					window.addEventListener('click', outClick);
-					window.addEventListener('resize', resizeWindowHandler);
+					window.addEventListener('resize', resizeWindowHandler, {
+						passive: true,
+					});
 					calculatePosition();
+
+					if (top.value) {
+						nextTick(() => {
+							const offsetTop = calculateOffsetTop();
+							styles.top = `${offsetTop}px`;
+						});
+					}
 				} else {
 					styles.top = '-10000px';
 					styles.left = '-10000px';
@@ -125,20 +141,36 @@ export default defineComponent({
 			}
 		);
 
+		const getElementClientRects = () => ({
+			parentBoundingClientRect: parent.value.getBoundingClientRect(),
+			activatorBoundingClientRect: activator.value.children[0].getBoundingClientRect(),
+			popupClientRect: popup.value.getBoundingClientRect(), // Only has height when popup is showing on screen
+		});
+
+		const calculateOffsetTop = () => {
+			const { parentBoundingClientRect, activatorBoundingClientRect, popupClientRect } =
+				getElementClientRects();
+
+			let offsetTop =
+				window.scrollY +
+				parentBoundingClientRect.top +
+				(!bottom.value ? 0 : activatorBoundingClientRect.height);
+
+			offsetTop = top.value ? offsetTop - popupClientRect.height - 12 : offsetTop;
+
+			return offsetTop;
+		};
+
 		const calculatePosition = () => {
 			if (!parent.value || !activator.value.children[0]) {
 				return;
 			}
 			const activatorChildOfFixedElement = isChildOfFixedElement(activator.value);
 
-			const parentBoundingClientRect = parent.value.getBoundingClientRect();
-			const activatorBoundingClientRect = activator.value.children[0].getBoundingClientRect();
-			const popupClientRect = popup.value.getBoundingClientRect();
+			const { parentBoundingClientRect, activatorBoundingClientRect, popupClientRect } =
+				getElementClientRects();
 
-			let offsetTop =
-				parentBoundingClientRect.top +
-				window.scrollY +
-				(!bottom.value ? 0 : activatorBoundingClientRect.height);
+			let offsetTop = calculateOffsetTop();
 
 			let offsetLeft = activatorBoundingClientRect.left;
 

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

@@ -76,3 +76,15 @@ export const IsNull = () => ({
         <farm-input-datepicker inputId="input-custom-id-8" v-model="date" :required="true" />
     </div>`,
 });
+
+export const TopPositioned = () => ({
+	data() {
+		return {
+			date: '',
+		};
+	},
+	template: `<div style='max-width: 320px'>
+        <farm-input-datepicker inputId="input-custom-id-0" v-model="date" position="top" />
+		{{ date }}
+    </div>`,
+});

package/src/components/DatePicker/DatePicker.vue

@@ -4,7 +4,8 @@
 		v-model="menuField"
 		ref="contextmenu"
 		maxHeight="auto"
-		bottom
+		:bottom="position === 'bottom'"
+		:top="position === 'top'"
 		popup-width="320"
 	>
 		<v-date-picker
@@ -51,9 +52,13 @@
 	</farm-contextmenu>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import { VDatePicker } from 'vuetify/lib/components/VDatePicker';
-import { defaultFormat as dateDefaultFormatter, convertDate, checkDateValid } from '../../helpers/date';
+import {
+	defaultFormat as dateDefaultFormatter,
+	convertDate,
+	checkDateValid,
+} from '../../helpers/date';
 import { formatDatePickerHeader } from '../../helpers';
 /**
  * Componente de input com datepicker para data
@@ -92,6 +97,13 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
+		/**
+		 * Min date (ISO format)
+		 */
+		position: {
+			type: String as PropType<'top' | 'bottom'>,
+			default: 'bottom',
+		},
 		/**
 		 * Required field (inside form)
 		 */
@@ -111,9 +123,9 @@ export default defineComponent({
 			dateField: this.value,
 			fieldRange: s,
 			checkDateValid: value => {
-				if(value.length > 0) {
+				if (value.length > 0) {
 					const isValid = checkDateValid(value);
-					return  isValid ? true : 'Data inválida';
+					return isValid ? true : 'Data inválida';
 				}
 				return true;
 			},
@@ -121,7 +133,7 @@ export default defineComponent({
 				return this.required ? !!value || value != '' || 'Campo obrigatório' : true;
 			},
 			checkMax: value => {
-				if(!this.required && value.length === 0) {
+				if (!this.required && value.length === 0) {
 					return true;
 				}
 				return this.max && new Date(convertDate(value)) > new Date(this.max)
@@ -129,13 +141,13 @@ export default defineComponent({
 					: true;
 			},
 			checkMin: value => {
-				if(!this.required && value.length === 0) {
+				if (!this.required && value.length === 0) {
 					return true;
 				}
-				if(this.min) {
+				if (this.min) {
 					const dateSelected = new Date(convertDate(value));
 					const dateMin = new Date(convertDate(this.min));
-					if(dateSelected.getTime() >= dateMin.getTime()){
+					if (dateSelected.getTime() >= dateMin.getTime()) {
 						return true;
 					}
 					return 'A data está fora do período permitido';