@farm-investimentos/front-mfe-components 15.9.0 → 15.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "15.9.0",
+	"version": "15.10.1",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -73,5 +73,8 @@
 	},
 	"engines": {
 		"node": ">=14.0.0 <15.0.0"
+	},
+	"volta": {
+		"node": "14.21.3"
 	}
 }

package/src/components/DataTableEmptyWrapper/DataTableEmptyWrapper.stories.js

@@ -27,4 +27,12 @@ export const CustomTitles = () => ({
 
 export const NoBorder = () => ({
 	template: '<farm-emptywrapper :bordered="false" />',
+});
+
+export const Icon = () => ({
+	template: '<farm-emptywrapper icon="alert" :bordered="false" />',
+});
+
+export const CustomHTML = () => ({
+	template: `<farm-emptywrapper subtitle="Para finalizar ou alterar a parametrização <b style='color: #4f8406;'>clique aqui</b>" icon="alert-outline" :bordered="false" />`,
 });

package/src/components/DataTableEmptyWrapper/DataTableEmptyWrapper.vue

@@ -5,13 +5,11 @@
 			'farm-emptywrapper--bordered': bordered,
 		}"
 	>
-		<farm-icon size="xl" color="gray">magnify</farm-icon>
+		<farm-icon size="xl" color="gray">{{ icon }}</farm-icon>
 		<farm-bodytext type="2" variation="bold" color="black" color-variation="40">
 			{{ title }}
 		</farm-bodytext>
-		<farm-caption v-if="subtitle" variation="regular" color-variation="30">
-			{{ subtitle }}
-		</farm-caption>
+		<farm-caption v-html="subtitle" v-if="subtitle" variation="regular" color-variation="30" />
 	</div>
 </template>
 <script lang="ts">
@@ -42,6 +40,10 @@ export default defineComponent({
 			type: Boolean,
 			default: true,
 		},
+		icon: {
+			type: String,
+			default: 'magnify',
+		}
 	},
 });
 </script>

package/src/components/Icon/icons_list.ts

@@ -61,7 +61,6 @@ export default [
 	'alpha',
 	'alphabetical',
 	'altimeter',
-
 	'ambulance',
 	'amplifier',
 	'anchor',
@@ -182,6 +181,7 @@ export default [
 	'arrow-up-drop-circle-outline',
 	'arrow-up-thick',
 	'artist',
+	'assessment',
 	'assistant',
 	'asterisk',
 	'at',
@@ -1954,6 +1954,7 @@ export default [
 	'rowing',
 	'rss',
 	'rss-box',
+	'rule',
 	'ruler',
 	'run',
 	'run-fast',

package/src/components/IdCaption/IdCaption.scss

@@ -14,7 +14,6 @@
 	}
 
 	&__body {
-
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
@@ -26,7 +25,6 @@
 		}
 
 		.farm-typography {
-
 			margin-bottom: 0;
 			display: flex;
 			flex: none;
@@ -34,7 +32,7 @@
 			align-items: center;
 			height: 18px;
 
-			>span {
+			> span {
 				max-width: 100%;
 				@include ellipsis;
 			}
@@ -48,4 +46,10 @@
 	&.farm-idcaption--noheight {
 		min-height: auto;
 	}
-}
+
+	.farm-idcaption--hide-copy-btn {
+		.farm-tooltip:has(.mdi-content-copy) {
+			display: none;
+		}
+	}
+}

package/src/components/IdCaption/IdCaption.stories.js

@@ -23,11 +23,11 @@ export default {
 };
 
 export const Primary = () => ({
-    methods: {
-        onLinkClick() {
-            alert('onLinkClick');
-        }
-    },
+	methods: {
+		onLinkClick() {
+			alert('onLinkClick');
+		},
+	},
 	template: `
     <farm-idcaption 
     icon="account-box-outline"
@@ -62,6 +62,24 @@ export const Linkless = () => ({
     `,
 });
 
+export const CopyBtnHidden = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline"
+    copyText="texto a copiar"
+    hide-copy-btn
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+        <template v-slot:subtitle>
+            Lower:Line Text
+        </template>
+    </farm-idcaption>
+    
+    `,
+});
+
 export const Iconless = () => ({
 	template: `
     <farm-idcaption 
@@ -221,4 +239,4 @@ export const NoHeight = () => ({
         </template>
     </farm-idcaption>
     </farm-col>`,
-});
+});

package/src/components/IdCaption/IdCaption.vue

@@ -41,7 +41,7 @@
 					<slot name="subtitle"></slot>
 				</span>
 				<farm-copytoclipboard
-					v-if="copyText"
+					v-if="copyText && !hideCopyBtn"
 					sizeIcon="16px"
 					:toCopy="copyText"
 					:successMessage="successMessage"
@@ -126,6 +126,13 @@ export default defineComponent({
 			type: String,
 			default: 'Conteúdo copiado para a área de trabalho',
 		},
+		/**
+		 * Hides copy button
+		 */
+		hideCopyBtn: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * Tooltip color
 		 */
@@ -154,11 +161,11 @@ export default defineComponent({
 		},
 	},
 
-	setup(_, { slots }) {
+	setup({ hideCopyBtn }, { slots }) {
 		const hasTitle = computed(() => slots.title);
 		const hasSubtitle = computed(() => slots.subtitle);
 
-		return { hasSubtitle, hasTitle };
+		return { hasSubtitle, hasTitle, hideCopyBtn };
 	},
 });
 </script>

package/src/components/Logger/LoggerItem/LoggerItem.scss

@@ -69,7 +69,7 @@
 	&--horizontal {
 		flex-direction: column;
 		height: auto;
-		width: 158px;
+		max-width: 230px;
 
 		> div {
 			align-items: center;

package/src/components/RangeDatePicker/RangeDatePicker.stories.js

@@ -93,3 +93,44 @@ export const disabled = () => ({
 		date: {{ date }}
 	</div>`,
 });
+
+export const ValidacaoInputPadrao = () => ({
+	data() {
+		return {
+			date: null,
+		};
+	},
+	template: `<div style='max-width: 320px'>
+		<farm-label>Selecione uma data entre 01/01/2024 e 31/12/2024</farm-label>
+		<RangeDatePicker
+			inputId="input-custom-id"
+			v-model="date"
+			min="2024-01-01"
+			max="2024-12-31"
+			validateInput
+			required
+		/>
+		date: {{ date }}
+	</div>`,
+});
+
+export const ValidacaoInputCustomizada = () => ({
+	data() {
+		return {
+			date: null,
+		};
+	},
+	template: `<div style='max-width: 320px'>
+		<farm-label>Selecione uma data do primeiro semestre de 2024</farm-label>
+		<RangeDatePicker
+			inputId="input-custom-id"
+			v-model="date"
+			min="2024-01-01"
+			max="2024-06-30"
+			validateInput
+			required
+			outOfRangeMessage="Por favor, selecione datas dentro do primeiro semestre de 2024 ({min} até {max})"
+		/>
+		date: {{ date }}
+	</div>`,
+});

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -1,4 +1,4 @@
-<template>
+	<template>
 	<farm-contextmenu
 		stay-open
 		v-model="menuField"
@@ -48,7 +48,7 @@
 				:readonly="readonly"
 				:id="inputId"
 				:mask="`${readonly ? [''] : ['##/##/####' + ' a ' + '##/##/####']}`"
-				:rules="[checkDateValid, checkRequire]"
+				:rules="[checkDateValid, checkRequire, ...(validateInput ? [checkMinMax] : [])]"
 				:disabled="disabled"
 				@keyup="keyUpInput"
 			/>
@@ -123,6 +123,20 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Habilita a validação de min/max no input
+		 */
+		validateInput: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Mensagem de erro customizada para data fora do período permitido
+		 */
+		outOfRangeMessage: {
+			type: String,
+			default: 'A data selecionada deve ser entre {min} e {max}',
+		},
 	},
 	data() {
 		const s = this.formatDateRange(this.value);
@@ -141,6 +155,31 @@ export default defineComponent({
 				}
 				return true;
 			},
+			checkMinMax: value => {
+				if (!this.validateInput || !value || value.length === 0) return true;
+				if (!this.min || !this.max) {
+					if (process.env.NODE_ENV === 'development') {
+						console.warn('[RangeDatePicker] Para usar validateInput é necessário definir as props min e max');
+					}
+					return true;
+				}
+
+				const [startDate, endDate] = value.split(' a ').map(date => {
+					const [day, month, year] = date.split('/');
+					return new Date(year, month - 1, day);
+				});
+
+				const minDate = new Date(this.min);
+				const maxDate = new Date(this.max);
+
+				if (startDate < minDate || endDate > maxDate) {
+					return this.outOfRangeMessage
+						.replace('{min}', dateDefaultFormatter(this.min))
+						.replace('{max}', dateDefaultFormatter(this.max));
+				}
+
+				return true;
+			},
 		};
 	},
 	watch: {