@farm-investimentos/front-mfe-components 15.8.2 → 15.8.4

package/package.json

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

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

@@ -1,6 +1,6 @@
 <template>
 	<button
-		v-if="!to"
+		v-if="!to || disabled"
 		v-on="$listeners"
 		v-bind="$attrs"
 		:disabled="disabled"

package/src/components/ContextMenu/ContextMenu.scss

@@ -30,4 +30,11 @@
 		opacity: 1;
 		visibility: visible;
 	}
-}
+
+	&--fixed {
+		position: fixed !important;
+		top: 50% !important;
+		left: 50% !important;
+		transform: translate(-50%, -50%) !important;
+	}
+}

package/src/components/ContextMenu/ContextMenu.vue

@@ -9,6 +9,7 @@
 			:class="{
 				'farm-contextmenu__popup': true,
 				'farm-contextmenu__popup--visible': inputValue,
+				'farm-contextmenu__popup--fixed': fixedCentered,
 			}"
 			:style="styles"
 		>
@@ -66,6 +67,13 @@ export default defineComponent({
 			type: [Number, String],
 			default: null,
 		},
+		/**
+		 * Should be in the center of the screen
+		 */
+		fixedCentered: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { emit }) {
 		const parent = ref(null);

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

@@ -85,11 +85,11 @@ export const OnlyAllowedDates = () => ({
 	},
 	props: {
 		allowedDates: {
-			default: () => (value) => {
+			default: () => value => {
 				const day = parseInt(value.split('-')[2], 10);
 				return [5, 10, 15, 20, 25].includes(day);
-			}
-		}
+			},
+		},
 	},
 	template: `<div style='max-width: 320px'><farm-input-datepicker position="bottom" :allowed-dates="allowedDates" inputId="input-custom-id-1" v-model="date" /></div>`,
 });
@@ -98,7 +98,7 @@ export const WithInitialMonth = () => ({
 	data() {
 		return {
 			date: '',
-			pickerDate: '2023-01'
+			pickerDate: '2023-01',
 		};
 	},
 	template: `<div style='max-width: 320px'>
@@ -140,10 +140,16 @@ export const MultipleDates = () => ({
 	computed: {
 		dates() {
 			return this.date.join('  ///  ');
-		}
+		},
 	},
 	template: `<div style='max-width: 320px'>
         <farm-input-datepicker inputId="input-custom-id-0" v-model="date" multiple />
 		{{ dates }}
     </div>`,
-});
+});
+
+export const Disabled = () => ({
+	template: `<div style='max-width: 320px'>
+        <farm-input-datepicker :disabled="true"  value="2021-08-01" inputId="input-custom-id-3"/>
+    </div>`,
+});

package/src/components/DatePicker/DatePicker.vue

@@ -6,6 +6,7 @@
 		maxHeight="auto"
 		:bottom="position === 'bottom'"
 		:top="position === 'top'"
+		:fixedCentered="position === 'fixed-centered'"
 		popup-width="320"
 	>
 		<v-date-picker
@@ -50,6 +51,7 @@
 				:mask="`${isReadonly ? '' : '##/##/####'}`"
 				:id="inputId"
 				:rules="rules"
+				:disabled="disabled"
 				@keyup="keyUpInput"
 			/>
 		</template>
@@ -105,7 +107,7 @@ export default defineComponent({
 		 * Min date (ISO format)
 		 */
 		position: {
-			type: String as PropType<'top' | 'bottom' | 'center'>,
+			type: String as PropType<'top' | 'bottom' | 'center' | 'fixed-centered'>,
 			default: 'bottom',
 		},
 		/**
@@ -137,6 +139,13 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Disabled field
+		 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		const s = this.formatDateRange(this.value);

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

@@ -81,3 +81,15 @@ export const Reset = () => ({
 		</farm-btn>
 	</div>`,
 });
+
+export const disabled = () => ({
+	data() {
+		return {
+			date: ['2023-08-01', '2023-08-05'],
+		};
+	},
+	template: `<div style='max-width: 320px'>
+		<RangeDatePicker disabled inputId="input-custom-id" :value="date" />
+		date: {{ date }}
+	</div>`,
+});

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -49,6 +49,7 @@
 				:id="inputId"
 				:mask="`${readonly ? [''] : ['##/##/####' + ' a ' + '##/##/####']}`"
 				:rules="[checkDateValid, checkRequire]"
+				:disabled="disabled"
 				@keyup="keyUpInput"
 			/>
 		</template>
@@ -115,6 +116,13 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Disabled field
+		 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		const s = this.formatDateRange(this.value);