@farm-investimentos/front-mfe-components 12.2.3 → 13.0.1

package/package.json

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

package/src/components/AlertBox/AlertBox.stories.js

@@ -67,7 +67,7 @@ export const withDismissableShowAgain = () => ({
 	data() {
 		return {
 			v: true,
-		}
+		};
 	},
 	template: `<div>
 		<farm-alertbox v-model="v" dismissable>alert box</farm-alertbox>

package/src/components/Buttons/DefaultButton/DefaultButton.scss

@@ -2,9 +2,9 @@
 @import '../../../configurations/mixins';
 @import '../../../configurations/theme-colors';
 $butonSizes: (
-	"xs": 12px,
-	"sm": 16px,
-	"md": 24px,
+	"xs": 20px,
+	"sm": 28px,
+	"md": 32px,
 	"lg": 48px,
 	"xl": 56px,
 	'default': 36px,

package/src/components/Buttons/DefaultButton/DefaultButton.stories.js

@@ -225,7 +225,7 @@ export const Rounded = () => ({
 export const Sizes = () => ({
 	data() {
 		return {
-			sizes: ['xs', 'sm', 'md', 'lg', 'xl'],
+			sizes: ['xs', 'sm', 'md', 'lg', 'xl', 'default'],
 			styles: {
 				display: 'flex',
 				flexDirection: 'row',

package/src/components/ContextMenu/ContextMenu.vue

@@ -52,6 +52,13 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Popup Width
+		 */
+		popupWidth: {
+			type: [Number, String],
+			default: null,
+		},
 	},
 	setup(props, { emit }) {
 		const parent = ref(null);
@@ -127,10 +134,14 @@ export default Vue.extend({
 
 			let offsetLeft = activatorBoundingClientRect.left;
 
-			styles.minWidth =
-				(activatorBoundingClientRect.width > 96
-					? parseInt(activatorBoundingClientRect.width)
-					: 96) + 'px';
+			if (props.popupWidth) {
+				styles.minWidth = props.popupWidth + 'px';
+			} else {
+				styles.minWidth =
+					(activatorBoundingClientRect.width > 96
+						? parseInt(activatorBoundingClientRect.width)
+						: 96) + 'px';
+			}
 
 			if (activatorBoundingClientRect.width < 96) {
 				const w = popupClientRect.width < 96 ? 96 : popupClientRect.width;

package/src/components/DatePicker/DatePicker.scss

@@ -0,0 +1,20 @@
+.datepicker :deep(.v-picker__actions) {
+	padding: 0;
+	margin: 0 16px 16px;
+}
+.datepicker :deep(.v-btn--active) {
+	background: var(--farm-primary-base);
+}
+.datepicker :deep(.v-date-picker-table__current) {
+	border-color: var(--farm-primary-base);
+	color: var(--farm-primary-base);
+}
+.datepicker :deep(.v-date-picker-table__current.v-btn--active) {
+	color: white;
+}
+.btn-clean {
+	margin: 0 8px;
+}
+.farm-contextmenu {
+	width: 100%;
+}

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

@@ -29,25 +29,40 @@ export const Primary = () => ({
 });
 
 export const InitValue = () => ({
-	template: `<div style='max-width: 320px'><farm-input-datepicker inputId="input-custom-id-1" value="2021-08-01" /></div>`,
+	data() {
+		return {
+			date: '2023-08-01',
+		};
+	},
+	template: `<div style='max-width: 320px'><farm-input-datepicker inputId="input-custom-id-1" v-model="date" /></div>`,
 });
 
 export const MinMaxDates = () => ({
+	data() {
+		return {
+			date: '',
+		};
+	},
 	template: `<div style='max-width: 320px'>
-        <farm-input-datepicker inputId="input-custom-id-2" max="2021-12-02" min="2021-07-01" />
+        <farm-input-datepicker inputId="input-custom-id-2" max="2021-12-02" min="2021-07-01" v-model="date" />
         max="2021-12-02" min="2021-07-01"
     </div>`,
 });
 
 export const RequiredDates = () => ({
+	data() {
+		return {
+			date: '',
+		};
+	},
 	template: `<div style='max-width: 320px'>
-        <farm-input-datepicker inputId="input-custom-id-3" :required="true" />
+        <farm-input-datepicker inputId="input-custom-id-3" v-model="date" :required="true" />
     </div>`,
 });
 
-export const ReadonlyFalse = () => ({
+export const Readonly = () => ({
 	template: `<div style='max-width: 320px'>
-        <farm-input-datepicker :readonly="false" inputId="input-custom-id-3"/>
+        <farm-input-datepicker :readonly="true"  value="2021-08-01" inputId="input-custom-id-3"/>
     </div>`,
 });
 

package/src/components/DatePicker/DatePicker.vue

@@ -1,50 +1,48 @@
 <template>
-	<v-menu
-		ref="menuField"
+	<farm-contextmenu
+		stay-open
 		v-model="menuField"
-		:close-on-content-click="false"
-		:return-value.sync="fieldRange"
-		transition="scale-transition"
-		offset-y
-		min-width="290px"
+		ref="contextmenu"
+		maxHeight="auto"
+		bottom
+		popup-width="320"
 	>
-		<template v-slot:activator="{}">
-			<farm-textfield-v2
-				icon="calendar"
-				v-model="fieldRange"
-				autocomplete="off"
-				:readonly="readonly"
-				:mask="`${readonly ? '' : '##/##/####'}`"
-				:id="inputId"
-				:rules="[checkMax, checkMin, checkRequire]"
-				@keyup="keyUpInput"
-				@click="openDatepicker"
-				@onClickIcon="openDatepicker"
-			/>
-		</template>
 		<v-date-picker
 			v-if="menuField"
 			v-model="dateField"
 			no-title
 			scrollable
-			color="secondary"
 			locale="pt-br"
+			class="datepicker"
 			:max="max"
 			:min="min"
 		>
 			<farm-btn outlined color="secondary" @click="closeDatepicker" title="Fechar">
 				Fechar
 			</farm-btn>
-			<farm-btn outlined class="ml-2" @click="clear"> Limpar </farm-btn>
+			<farm-btn outlined class="btn-clean" @click="clear"> Limpar </farm-btn>
 			<farm-btn class="ml-2" title="Confirmar" :disabled="!dateField.length" @click="save()">
 				Confirmar
 			</farm-btn>
 		</v-date-picker>
-	</v-menu>
+		<template v-slot:activator="{ }">
+			<farm-textfield-v2
+				icon="calendar"
+				v-model="fieldRange"
+				autocomplete="off"
+				:readonly="readonly"
+				:mask="`${readonly ? '' : '##/##/####'}`"
+				:id="inputId"
+				:rules="[checkMax, checkMin, checkRequire]"
+				@keyup="keyUpInput"
+				@click="openDatepicker"
+				@onClickIcon="openDatepicker"
+			/>
+		</template>
+	</farm-contextmenu>
 </template>
 <script lang="ts">
 import Vue from 'vue';
-import { VMenu } from 'vuetify/lib/components/VMenu';
 import { VDatePicker } from 'vuetify/lib/components/VDatePicker';
 import { defaultFormat as dateDefaultFormatter, convertDate } from '../../helpers/date';
 /**
@@ -53,7 +51,6 @@ import { defaultFormat as dateDefaultFormatter, convertDate } from '../../helper
 export default Vue.extend({
 	name: 'farm-input-datepicker',
 	components: {
-		VMenu,
 		VDatePicker,
 	},
 	props: {
@@ -155,8 +152,10 @@ export default Vue.extend({
 			return dateDefaultFormatter(date);
 		},
 		save() {
-			this.$refs.menuField.save(this.formatDateRange(this.dateField));
+			this.formatDateRange(this.dateField);
 			this.inputVal = this.dateField;
+			this.menuField = false;
+			this.closeDatepicker();
 		},
 		clear() {
 			this.dateField = '';
@@ -185,6 +184,7 @@ export default Vue.extend({
 		},
 		closeDatepicker() {
 			this.menuField = false;
+			this.$refs.contextmenu.inputValue = false;
 		},
 	},
 	computed: {
@@ -200,7 +200,5 @@ export default Vue.extend({
 });
 </script>
 <style lang="scss" scoped>
-.theme--light.v-input.v-input--dense.v-text-field.v-text-field--outlined.error--text:after {
-	content: '' !important;
-}
+@import './DatePicker.scss';
 </style>

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

@@ -25,7 +25,7 @@ export default {
 export const Primary = () => ({
 	data() {
 		return {
-			date: [],
+			date: null,
 		};
 	},
 	template: `<div style='max-width: 320px'>
@@ -34,8 +34,16 @@ export const Primary = () => ({
 	</div>`,
 });
 
-export const Secondary = () => ({
-	template: `<RangeDatePicker inputId="input-custom-id" :value="['2021-08-01', '2021-08-05']" />`,
+export const InitialValue = () => ({
+	data() {
+		return {
+			date: ['2023-08-01', '2023-08-05'],
+		};
+	},
+	template: `<div style='max-width: 320px'>
+		<RangeDatePicker inputId="input-custom-id" :value="date" />
+		date: {{ date }}
+	</div>`,
 });
 
 export const MinMax = () => ({

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -1,27 +1,15 @@
 <template>
-	<v-menu
-		ref="menuField"
+	<farm-contextmenu
+		stay-open
 		v-model="menuField"
-		:close-on-content-click="false"
-		:nudge-right="40"
-		:return-value.sync="fieldRange"
-		transition="scale-transition"
-		offset-y
-		min-width="290px"
+		ref="contextmenu"
+		maxHeight="auto"
+		bottom
+		popup-width="320"
 	>
-		<template v-slot:activator="{}">
-			<farm-textfield-v2
-				v-model="fieldRange"
-				icon="calendar"
-				readonly
-				:id="inputId"
-				:rules="required ? [requiredRule] : []"
-				@click="openDatepicker"
-				@onClickIcon="openDatepicker"
-			/>
-		</template>
 		<v-date-picker
 			v-if="menuField"
+			class="datepicker"
 			v-model="dateField"
 			no-title
 			scrollable
@@ -34,18 +22,27 @@
 			<farm-btn outlined color="secondary" @click="closeDatepicker" title="Fechar">
 				Fechar
 			</farm-btn>
-			<farm-btn outlined class="ml-2" @click="clear()" title="Limpar"> Limpar</farm-btn>
-			<farm-btn class="ml-2" :disabled="canConfirm" @click="save()" title="Confirmar">
+			<farm-btn outlined class="btn-clean" @click="clear"> Limpar </farm-btn>
+			<farm-btn class="ml-2" title="Confirmar" :disabled="!dateField.length" @click="save()">
 				Confirmar
 			</farm-btn>
 		</v-date-picker>
-	</v-menu>
+		<template v-slot:activator="{}">
+			<farm-textfield-v2
+				v-model="fieldRange"
+				icon="calendar"
+				readonly
+				:id="inputId"
+				:rules="required ? [requiredRule] : []"
+				@click="openDatepicker"
+				@onClickIcon="openDatepicker"
+			/>
+		</template>
+	</farm-contextmenu>
 </template>
 <script>
 import Vue from 'vue';
-import { VMenu } from 'vuetify/lib/components/VMenu';
 import { VDatePicker } from 'vuetify/lib/components/VDatePicker';
-import DefaultButton from '../Buttons/DefaultButton';
 import { defaultFormat as dateDefaultFormatter } from '../../helpers/date';
 /**
  * Componente de input com datepicker para range de data
@@ -53,9 +50,7 @@ import { defaultFormat as dateDefaultFormatter } from '../../helpers/date';
 export default Vue.extend({
 	name: 'farm-input-rangedatepicker',
 	components: {
-		VMenu,
 		VDatePicker,
-		'farm-btn': DefaultButton,
 	},
 	props: {
 		/**
@@ -70,9 +65,7 @@ export default Vue.extend({
 		 */
 		value: {
 			type: Array,
-			default: () => {
-				return [];
-			},
+			default: () => [],
 		},
 		/**
 		 * Variável usada para definir a data máxima (yyyy-mm-dd)
@@ -100,7 +93,7 @@ export default Vue.extend({
 		const s = this.formatDateRange(this.value);
 		return {
 			menuField: false,
-			dateField: this.value,
+			dateField: this.value || [],
 			fieldRange: s,
 			requiredRule: value => {
 				return !!value || value != '' || 'Campo obrigatório';
@@ -127,9 +120,10 @@ export default Vue.extend({
 			return dateDefaultFormatter(dateStart) + ' a ' + dateDefaultFormatter(dateEnd);
 		},
 		save() {
-			this.$refs.menuField.save(this.formatDateRange(this.dateField));
+			this.formatDateRange(this.dateField);
 			this.inputVal = this.dateField;
 			this.menuField = false;
+			this.closeDatepicker();
 		},
 		clear() {
 			this.dateField = [];
@@ -140,6 +134,7 @@ export default Vue.extend({
 		},
 		closeDatepicker() {
 			this.menuField = false;
+			this.$refs.contextmenu.inputValue = false;
 		},
 	},
 	computed: {
@@ -158,7 +153,5 @@ export default Vue.extend({
 });
 </script>
 <style lang="scss" scoped>
-.theme--light.v-input.v-input--dense.v-text-field.v-text-field--outlined.error--text:after {
-	content: '' !important;
-}
+@import '../DatePicker/DatePicker.scss';
 </style>

package/src/configurations/_variables.scss

@@ -1,8 +1,8 @@
 $colors: primary, secondary, error, accent, info, success, warning, gray, yellow, white;
 $sizes: (
     "xs": 12px,
-    "sm": 16px,
-    "md": 24px,
+    "sm": 14px,
+    "md": 20px,
     "lg": 36px,
     "xl": 40px
 );