@farm-investimentos/front-mfe-components-vue3 0.0.14 → 0.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components-vue3",
-	"version": "0.0.14",
+	"version": "0.0.17",
 	"private": false,
 	"repository": {
 		"type": "git",
@@ -30,13 +30,13 @@
 		"not dead"
 	],
 	"dependencies": {
-		"@farm-investimentos/front-mfe-libs-ts": "^2.5.0",
+		"@farm-investimentos/front-mfe-libs-ts": "3.0.5",
 		"@vuepic/vue-datepicker": "7.2.0",
 		"core-js": "3.33.1",
 		"text-mask-addons": "^3.8.0",
 		"v-mask": "2.3.0",
 		"vue": "3.3.4",
-		"vuetify": "^3.3.22",
+		"vuetify": "3.3.23",
 		"webpack": "^4.39.3"
 	},
 	"devDependencies": {

package/src/components/Buttons/DefaultButton/DefaultButton.vue

@@ -16,6 +16,7 @@
 		v-bind="$attrs"
 		:disabled="disabled"
 		:class="classes"
+		:size="$props.size"
 		v-else
 	>
 		<span class="farm-btn__content">

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

@@ -88,7 +88,7 @@ export const OnlyAllowedDates = () => ({
 	data() {
 		return {
 			date: '',
-			allowedDays: [5, 10, 15, 20, 25],
+			allowedDays: ['2023-11-13', '2023-11-18', '2023-11-25', '2023-12-01'],
 		};
 	},
 	template: `<div style='max-width: 320px'>

package/src/components/DatePicker/DatePicker.vue

@@ -17,7 +17,7 @@
 			v-model="dateField"
 			:min-date="minDate"
 			:max-date="maxDate"
-			:allowed-dates="allowedDaysList"
+			:allowed-dates="allowedDays"
 			:day-names="['S', 'T', 'Q', 'Q', 'S', 'S', 'D']"
 			:start-date="internalPickerDate"
 		/>
@@ -59,7 +59,7 @@
 				:readonly="readonly"
 				:mask="`${readonly ? '' : '##/##/####'}`"
 				:id="inputId"
-				:rules="[checkDateValid, checkMax, checkMin, checkRequire, checkIsInAllowedDates]"
+				:rules="[checkDateValid, checkMax, checkMin, checkRequire]"
 				@keyup="keyUpInput"
 			/>
 		</template>
@@ -112,16 +112,12 @@ export default {
 			default: 'bottom',
 		},
 		/**
-		 * Allowed days to be selected and validated
+		 * Allowed days to be selected (format YYYY-MM-DD)
 		 */
 		allowedDays: {
 			type: Array,
 			default: () => null,
 		},
-		allowedDatesValidator: {
-			type: Function,
-			default: () => true,
-		},
 		/**
 		 * Current month/year to show when opened
 		 */
@@ -149,8 +145,7 @@ export default {
 			fieldRange: revertDate(this.modelValue),
 			checkDateValid: value => {
 				if (value.length > 0) {
-					const isValid = checkDateValid(value);
-					return isValid ? true : 'Data inválida';
+					return checkDateValid(value) ? true : 'Data inválida';
 				}
 				return true;
 			},
@@ -179,15 +174,6 @@ export default {
 				}
 				return true;
 			},
-			checkIsInAllowedDates: value => {
-				const dateSelected = convertDate(value);
-
-				if (!this.required && value.length === 0) {
-					return true;
-				}
-
-				return this.allowedDatesValidator(dateSelected) || 'Data inválida';
-			},
 		};
 	},
 	watch: {
@@ -279,12 +265,6 @@ export default {
 			}
 			return null;
 		},
-		allowedDaysList() {
-			if (this.allowedDays) {
-				return this.allowedDays.map(day => new Date().setDate(day));
-			}
-			return null;
-		},
 	},
 };
 </script>

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

@@ -74,25 +74,6 @@ describe('DatePicker component', () => {
 			});
 			expect(component.isDateFieldDisabled).toBe(false);
 		});
-
-		it('should allow all dates', async () => {
-			await wrapper.setProps({
-				allowedDates: () => true
-			});
-			expect(component.checkIsInAllowedDates('2023-07-03')).toBe(true);
-			expect(component.checkIsInAllowedDates('2099-12-20')).toBe(true);
-			expect(component.checkIsInAllowedDates('1985-01-23')).toBe(true);
-		});
-
-		/*
-		it('should allow only dates in year 2077', async () => {
-			await wrapper.setProps({
-				allowedDates: (value) => new Date(value).getFullYear() === 2077
-			});
-			expect(component.checkIsInAllowedDates('2077-05-03')).toBe(true);
-			expect(component.checkIsInAllowedDates('2023-05-03')).toBe('Data inválida');
-		});
-		*/
 	});
 
 	describe('methods', () => {

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

@@ -1,3 +1,5 @@
+import { computed } from 'vue';
+import { useModal } from '@farm-investimentos/front-mfe-libs-ts';
 import Modal from './Modal.vue';
 
 export default {
@@ -219,81 +221,44 @@ export const Persistent = () => ({
 	</div>`,
 });
 
+export const ModalableMixin = () => ({
+	components: {
+		MixinModableComponent,
+	},
+	data() {
+		return {
+			controlModal: false,
+		};
+	},
+	template: `<div>
+		<farm-btn @click="controlModal = true">abrir</farm-btn>
+		<MixinModableComponent v-model="controlModal" />
+	</div>`,
+});
+
+const MixinModableComponent = {
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props, { emit }) {
+		const { inputVal, close } = useModal(props, { emit, computed });
+		return { inputVal, close, text };
+	},
+	template: `<farm-modal v-model="inputVal" :offsetTop="48">
+	<template v-slot:header>
+		<farm-dialog-header title="Título" @onClose="close" />
+	</template>
+	<template v-slot:content>
+		<div v-html="text" />
+	</template>
+</farm-modal>`,
+};
+
 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!<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 3!`;
+${Array(50)
+	.fill()
+	.map((_, i) => 'line ' + (i + 1) + '<br />')
+	.join('')}`;