@farm-investimentos/front-mfe-components-vue3 0.5.2 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components-vue3",
-	"version": "0.5.2",
+	"version": "0.6.0",
 	"private": false,
 	"repository": {
 		"type": "git",
@@ -30,7 +30,8 @@
 		"not dead"
 	],
 	"dependencies": {
-		"@vuepic/vue-datepicker": "7.2.0",
+		"@storybook/test": "^8.0.0",
+		"@vuepic/vue-datepicker": "8.2.0",
 		"core-js": "3.33.1",
 		"text-mask-addons": "^3.8.0",
 		"v-mask": "2.3.0",
@@ -42,21 +43,21 @@
 		"@babel/core": "7.17.9",
 		"@babel/generator": "7.17.9",
 		"@farm-investimentos/front-mfe-libs-ts": "3.0.5",
-		"@storybook/addon-essentials": "7.6.17",
-		"@storybook/addon-interactions": "7.6.17",
-		"@storybook/addon-links": "7.6.17",
-		"@storybook/blocks": "7.6.17",
-		"@storybook/manager-api": "^7.6.17",
-		"@storybook/testing-library": "^0.2.2",
-		"@storybook/theming": "^7.6.17",
-		"@storybook/vue3": "7.6.17",
-		"@storybook/vue3-vite": "7.6.17",
+		"@storybook/addon-essentials": "^8.0.0",
+		"@storybook/addon-interactions": "^8.0.0",
+		"@storybook/addon-links": "^8.0.0",
+		"@storybook/addon-mdx-gfm": "^8.0.0",
+		"@storybook/blocks": "^8.0.0",
+		"@storybook/manager-api": "^8.0.0",
+		"@storybook/theming": "^8.0.0",
+		"@storybook/vue3": "^8.0.0",
+		"@storybook/vue3-vite": "^8.0.0",
 		"@tsconfig/node18": "^18.2.2",
 		"@types/jest": "^29.0.0",
 		"@types/node": "^18.17.17",
 		"@typescript-eslint/eslint-plugin": "^4.18.0",
 		"@typescript-eslint/parser": "^4.18.0",
-		"@vitejs/plugin-vue": "^4.3.4",
+		"@vitejs/plugin-vue": "^4.6.2",
 		"@vue/cli-plugin-babel": "^5.0.0",
 		"@vue/cli-plugin-eslint": "^4.5.0",
 		"@vue/cli-plugin-typescript": "^4.5.0",
@@ -80,7 +81,7 @@
 		"react-dom": "^18.2.0",
 		"sass": "~1.32.0",
 		"sass-loader": "10.4.1",
-		"storybook": "^7.6.17",
+		"storybook": "^8.0.0",
 		"style-loader": "^3.3.3",
 		"ts-jest": "^29.0.0",
 		"typescript": "~4.1.5",

package/src/components/AlertReload/AlertReload.stories.js

@@ -1,8 +1,10 @@
+import AlertReload from './AlertReload.vue';
 // import { withDesign } from 'storybook-addon-designs';
 
 export default {
 	title: 'Feedback/AlertReload',
 	// decorators: [withDesign],
+	component: AlertReload,
 	parameters: {
 		viewMode: 'docs',
 		docs: {

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

@@ -43,4 +43,4 @@ export const Iconed = () => ({
 		<ConfirmButton :icon="true" customIcon="account-search">account-search</ConfirmButton>
 		<ConfirmButton :icon="true" customIcon="account-search" disabled>account-search</ConfirmButton>
 	</div>`,
-});
+});

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

@@ -1,16 +1,16 @@
 import RemoveButton from './RemoveButton.vue';
 
 export default {
-    title: 'Buttons/Remove',
-    component: RemoveButton,
+	title: 'Buttons/Remove',
+	component: RemoveButton,
 };
 
 export const Primary = () => ({
-    template: '<farm-btn-remove />',
+	template: '<farm-btn-remove />',
 });
 
 export const Secondary = () => ({
-    template: '<farm-btn-remove label="Custom label" />',
+	template: '<farm-btn-remove label="Custom label" />',
 });
 
 Primary.storyName = 'Básico';

package/src/components/Checkbox/Checkbox.stories.js

@@ -176,13 +176,12 @@ export const ResetByMethod = () => ({
 
 export const ChangeEvent = () => ({
 	setup() {
-
 		const select = () => {
 			alert('Updated model value');
 		};
 
 		return {
-			select
+			select,
 		};
 	},
 	data() {

package/src/components/Chip/Chip.stories.js

@@ -95,4 +95,4 @@ export const Ellipsis = () => ({
 	template: `<div style="width: 100px;">
 		<farm-chip color="primary">Very long text here</farm-chip>
 	</div>`,
-});
+});

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

@@ -21,10 +21,9 @@ export const Primary = () => ({
 });
 
 export const CustomTitles = () => ({
-	template:
-		'<farm-emptywrapper title="Título customizado" subtitle="Subtítulo customizado" />',
+	template: '<farm-emptywrapper title="Título customizado" subtitle="Subtítulo customizado" />',
 });
 
 export const NoBorder = () => ({
 	template: '<farm-emptywrapper :bordered="false" />',
-});
+});

package/src/components/DataTableHeader/DataTableHeader.stories.js

@@ -24,7 +24,6 @@ export const Primary = () => ({
 			headers,
 			sortClick: [],
 			firstSelected: true,
-			
 		};
 	},
 	template: `<farm-datatable-header
@@ -44,7 +43,6 @@ export const SetDescInititalOrder = () => ({
 			headers: customHeaders,
 			sortClick: [],
 			firstSelected: true,
-			
 		};
 	},
 	template: `<farm-datatable-header

package/src/components/DataTablePaginator/DataTablePaginator.stories.js

@@ -27,7 +27,8 @@ export const Primary = () => ({
 });
 
 export const HidePerPageOptions = () => ({
-	template: '<farm-datatable-paginator :hidePerPageOptions="true" :totalPages="190000" :page="1" />',
+	template:
+		'<farm-datatable-paginator :hidePerPageOptions="true" :totalPages="190000" :page="1" />',
 });
 
 export const Disabled = () => ({
@@ -41,9 +42,10 @@ export const CustomPerPage = () => ({
 
 export const OnChangeLimitPerPage = () => ({
 	methods: {
-		onChangeLimitPerPage: (newValue) => {
+		onChangeLimitPerPage: newValue => {
 			alert(newValue);
-		}
+		},
 	},
-	template: '<farm-datatable-paginator :totalPages="19" :page="1" @onChangeLimitPerPage="onChangeLimitPerPage" />',
+	template:
+		'<farm-datatable-paginator :totalPages="19" :page="1" @onChangeLimitPerPage="onChangeLimitPerPage" />',
 });

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

@@ -16,6 +16,12 @@ export default {
 	},
 };
 
+function createDateWithNDaysAhead(nDays) {
+	let disabledDate = new Date();
+	disabledDate.setDate(disabledDate.getDate() + nDays);
+	return disabledDate;
+}
+
 export const Primary = () => ({
 	data() {
 		return {
@@ -31,10 +37,13 @@ export const Primary = () => ({
 export const InitValue = () => ({
 	data() {
 		return {
-			date: '2023-08-01',
+			date: '2023-08-15',
 		};
 	},
-	template: `<div style='max-width: 320px'><farm-input-datepicker inputId="input-custom-id-1" v-model="date" /></div>`,
+	template: `<div style='max-width: 320px'>
+		<farm-input-datepicker inputId="input-custom-id-1" v-model="date" />
+		date: {{ date }}
+	</div>`,
 });
 
 export const MinMaxDates = () => ({
@@ -84,23 +93,53 @@ export const IsNull = () => ({
     </div>`,
 });
 
-export const OnlyAllowedDates = () => ({
+export const AllowedDates = () => ({
 	data() {
+		const allowedDates = [
+			createDateWithNDaysAhead(-2),
+			createDateWithNDaysAhead(3),
+			createDateWithNDaysAhead(5),
+		];
 		return {
 			date: '',
-			allowedDays: ['2023-11-13', '2023-11-18', '2023-11-25', '2023-12-01'],
+			allowedDates,
 		};
 	},
-	template: `<div style='max-width: 320px'>
-		<farm-input-datepicker position="bottom" :allowed-days="allowedDays" inputId="input-custom-id-1" v-model="date" />
-	</div>`,
+	template: `<farm-row>
+	<farm-col cols="4">
+		<farm-input-datepicker position="bottom" :allowed-dates="allowedDates" inputId="input-custom-id-134234" v-model="date" />
+		</farm-col>
+		<farm-col cols="12">
+			allowed dates: {{ allowedDates }}<br />
+			selected date: {{ date }}
+		<farm-col>
+	</farm-row>`,
+});
+
+export const DisabledDates = () => ({
+	data() {
+		const disabledDate = createDateWithNDaysAhead(1);
+		return {
+			date: '',
+			disabledDates: [disabledDate],
+		};
+	},
+	template: `<farm-row>
+		<farm-col cols="4">
+			<farm-input-datepicker position="bottom" :disabled-dates="disabledDates" inputId="input-custom-id-98231" v-model="date" />
+		</farm-col>
+		<farm-col cols="12">
+			disabled dates: {{ disabledDates }}<br />
+			selected date: {{ date }}
+		<farm-col>
+	</farm-row>`,
 });
 
 export const WithInitialMonth = () => ({
 	data() {
 		return {
 			date: '',
-			pickerDate: '2023-01'
+			pickerDate: '2023-01',
 		};
 	},
 	template: `<div style='max-width: 320px'>
@@ -155,4 +194,16 @@ export const InvalidMessage = () => ({
         <farm-input-datepicker invalidMessage="Data inválida, use o formato DD/MM/AAAA." inputId="input-custom-id-10" v-model="date" requiredMessage="Preencha a data de forma correta." :required="true" />
 		date: {{ date }}
     </div>`,
-});
+});
+
+export const MultipleDates = () => ({
+	data() {
+		return {
+			date: [],
+		};
+	},
+	template: `<div style='max-width: 320px'>
+        <farm-input-datepicker inputId="input-custom-id-0" v-model="date" multiple />
+		dates: {{ date }}
+    </div>`,
+});

package/src/components/DatePicker/DatePicker.vue

@@ -17,9 +17,11 @@
 			v-model="dateField"
 			:min-date="minDate"
 			:max-date="maxDate"
-			:allowed-dates="allowedDays"
+			:allowed-dates="allowedDates"
+			:disabled-dates="disabledDates"
 			:day-names="['S', 'T', 'Q', 'Q', 'S', 'S', 'D']"
 			:start-date="internalPickerDate"
+			:multi-dates="multiple"
 		/>
 
 		<div class="picker__actions">
@@ -57,10 +59,11 @@
 				autocomplete="off"
 				ref="inputCalendar"
 				:readonly="readonly"
-				:mask="`${readonly ? '' : '##/##/####'}`"
+				:ellipsed="multiple"
+				:mask="`${isReadonly ? '' : '##/##/####'}`"
 				:requiredMessage="requiredMessage"
 				:id="inputId"
-				:rules="[checkDateValid, checkMax, checkMin, checkRequire]"
+				:rules="rules"
 				@keyup="keyUpInput"
 			/>
 		</template>
@@ -70,7 +73,12 @@
 import { PropType } from 'vue';
 
 import { formatDatePickerHeader } from '../../helpers';
-import { convertDate, checkDateValid, revertDate } from '../../helpers/date';
+import {
+	convertDate,
+	checkDateValid,
+	revertDate,
+	defaultFormat as dateDefaultFormatter,
+} from '../../helpers/date';
 /**
  * Componente de input com datepicker para data
  */
@@ -88,7 +96,7 @@ export default {
 		 * v-model bind
 		 */
 		modelValue: {
-			type: String,
+			type: [String, Array],
 			default: '',
 		},
 		/**
@@ -113,9 +121,16 @@ export default {
 			default: 'bottom',
 		},
 		/**
-		 * Allowed days to be selected (format YYYY-MM-DD)
+		 * Allowed dates (format YYYY-MM-DD)
+		 */
+		allowedDates: {
+			type: Array,
+			default: () => null,
+		},
+		/**
+		 * Disabled dates(format YYYY-MM-DD)
 		 */
-		allowedDays: {
+		disabledDates: {
 			type: Array,
 			default: () => null,
 		},
@@ -145,13 +160,21 @@ export default {
 			type: String,
 			default: 'Data inválida',
 		},
+		/**
+		 * Allow multiple dates
+		 */
+		multiple: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
+		const s = this.formatDateRange(this.modelValue);
 		return {
 			internalPickerDate: this.pickerDate,
 			menuField: false,
 			dateField: this.modelValue,
-			fieldRange: revertDate(this.modelValue),
+			fieldRange: this.multiple ? s : revertDate(this.modelValue as string),
 			checkDateValid: value => {
 				if (value.length > 0) {
 					return checkDateValid(value) ? true : this.invalidMessage;
@@ -183,15 +206,25 @@ export default {
 				}
 				return true;
 			},
+			checkIsInAllowedDates: value => {
+				const dateSelected = convertDate(value);
+
+				if (!this.required && value.length === 0) {
+					return true;
+				}
+
+				return this.allowedDates(dateSelected) || 'Data inválida';
+			},
 		};
 	},
 	watch: {
 		modelValue(newValue) {
 			this.dateField = newValue;
+			this.fieldRange = this.multiple ? this.formatDateRange(newValue) : revertDate(newValue);
 		},
 		fieldRange(newValue) {
 			if (!newValue) {
-				this.dateField = '';
+				this.dateField = this.multiple ? [] : '';
 				this.save();
 			}
 		},
@@ -205,11 +238,11 @@ export default {
 		save() {
 			this.inputVal = this.dateField;
 			this.menuField = false;
-			this.fieldRange = revertDate(this.dateField);
 			this.closeDatepicker();
+
 		},
 		clear() {
-			this.dateField = '';
+			this.dateField = this.multiple ? [] : '';
 			this.save();
 			this.$refs.inputCalendar.reset();
 		},
@@ -222,7 +255,8 @@ export default {
 			let newValue = event.target.value;
 			if (this.validation(newValue) && newValue.length === 10) {
 				const [day, month, year] = newValue.split('/');
-				this.dateField = `${year}-${month}-${day}`;
+				const formattedDate = `${year}-${month}-${day}`;
+				this.dateField = this.multiple ? [formattedDate] : formattedDate;
 				this.save();
 			}
 		},
@@ -240,6 +274,20 @@ export default {
 			this.$refs.contextmenu.inputValue = false;
 		},
 		formatDatePickerHeader,
+
+		formatDateRange(date: string | string[]) {
+			if (!date || date.length === 0) return '';
+
+			if (this.multiple) {
+				let dateString = [...date]
+					.sort((a, b) => +new Date(a) - +new Date(b))
+					.map(dateDefaultFormatter as any)
+					.join(', ');
+				return dateString;
+			}
+
+			return dateDefaultFormatter(date);
+		},
 	},
 	computed: {
 		inputVal: {
@@ -274,6 +322,28 @@ export default {
 			}
 			return null;
 		},
+		isReadonly() {
+			return this.readonly || this.multiple;
+		},
+		rules() {
+			const allRules = [
+				this.checkDateValid,
+				this.checkMax,
+				this.checkMin,
+				this.checkRequire,
+				// this.checkIsInAllowedDates,
+			];
+
+			if (this.multiple) {
+				if (!this.inputVal.length && this.required) {
+					return allRules.map(rule => rule.call(this, ''));
+				}
+
+				return this.inputVal.flatMap(date => allRules.map(rule => rule.call(this, date)));
+			}
+
+			return allRules;
+		},
 	},
 };
 </script>

package/src/components/DialogHeader/DialogHeader.stories.js

@@ -66,4 +66,4 @@ export const VeryLongTitle = () => ({
 	template: `<div style="max-width: 480px; position: relative;">
 		<farm-dialog-header title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt leo nec orci hendrerit, in sagittis magna tincidunt." />
 	</div>`,
-});
+});

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"
@@ -221,4 +221,4 @@ export const NoHeight = () => ({
         </template>
     </farm-idcaption>
     </farm-col>`,
-});
+});

package/src/components/InputDecimalFormatter/InputDecimalFormatter.stories.js

@@ -1,7 +1,5 @@
-
 import InputDecimalFormatter from './InputDecimalFormatter.vue';
 
-
 export default {
 	title: 'Form/InputDecimalFormatter',
 	component: InputDecimalFormatter,
@@ -38,7 +36,6 @@ export const Default = () => ({
 	</div>`,
 });
 
-
 export const Prefix = () => ({
 	data() {
 		return {
@@ -54,7 +51,6 @@ export const Prefix = () => ({
 	</div>`,
 });
 
-
 export const Sufix = () => ({
 	data() {
 		return {
@@ -70,7 +66,6 @@ export const Sufix = () => ({
 	</div>`,
 });
 
-
 export const Precision = () => ({
 	data() {
 		return {
@@ -86,7 +81,6 @@ export const Precision = () => ({
 	</div>`,
 });
 
-
 export const Icon = () => ({
 	data() {
 		return {
@@ -104,12 +98,11 @@ export const Icon = () => ({
 
 export const Required = () => ({
 	data() {
-
 		return {
 			v: '0,00',
 			rules: {
-				required: value => value !== "0,00" || 'Required field',
-			}
+				required: value => value !== '0,00' || 'Required field',
+			},
 		};
 	},
 	template: `<div style="width: 480px;">
@@ -120,4 +113,3 @@ export const Required = () => ({
 		<span>{{v}}</span>
 	</div>`,
 });
-

package/src/components/ListItem/ListItem.stories.js

@@ -3,8 +3,6 @@ import ListItem from './ListItem.vue';
 
 import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
 
-
-
 const colors = Object.keys(baseThemeColors);
 const variations = ['base', 'darken', 'lighten'];
 

package/src/components/Loader/Loader.stories.ts

@@ -1,8 +1,10 @@
+import Loader from './Loader.vue';
 // import { withDesign } from 'storybook-addon-designs';
 
 export default {
 	title: 'Feedback/Loader',
 	// decorators: [withDesign],
+	component: Loader,
 	parameters: {
 		viewMode: 'docs',
 		docs: {

package/src/components/Logger/Logger.stories.js

@@ -31,7 +31,7 @@ export const Primary = () => ({
 					formattedDate: '13/06/2022  20:40',
 					status: 'error',
 				},
-				
+
 				{
 					message: 'Aprovado entre as pré elegíveis',
 					userName: 'Cleyton Rasta',
@@ -174,7 +174,7 @@ export const Horizontal = () => ({
 					details() {
 						alert('Ver Detalhes');
 					},
-				}
+				},
 			],
 		};
 	},
@@ -220,7 +220,7 @@ export const HorizontalLeftAligned = () => ({
 					details() {
 						alert('Ver Detalhes');
 					},
-				}
+				},
 			],
 		};
 	},

package/src/components/ManagersList/ManagersList.stories.js

@@ -1,10 +1,10 @@
 import ManagersList from './ManagersList.vue';
 
 export default {
-    title: 'Display/ManagersList',
-    component: ManagersList,
+	title: 'Display/ManagersList',
+	component: ManagersList,
 };
 
 export const Primary = () => ({
-    template: '<farm-managers-list managersString="nome1,nome2,nome3" />',
+	template: '<farm-managers-list managersString="nome1,nome2,nome3" />',
 });

package/src/components/ModalPromptUser/ModalPromptUser.stories.js

@@ -50,7 +50,6 @@ export const Error = () => ({
 		</div>`,
 });
 
-
 export const ButtonLabels = () => ({
 	data() {
 		return {
@@ -103,7 +102,7 @@ export const OnConfirm = () => ({
 	methods: {
 		onConfirm() {
 			alert('On confirm triggered');
-		}
+		},
 	},
 	template: `<div>
 		<farm-prompt-user
@@ -118,4 +117,4 @@ export const OnConfirm = () => ({
 		reabrir
 		</farm-btn>
 		</div>`,
-});
+});

package/src/components/MultipleFilePicker/MultipleFilePicker.stories.js

@@ -65,10 +65,10 @@ export const Reset = () => ({
 	methods: {
 		onReset() {
 			this.$refs.picker.reset();
-		}
+		},
 	},
 	template: `<div>
 		<farm-multiple-filepicker ref="picker" />
 		<farm-btn @click="onReset" class="mt-1">reset</farm-btn>
 	</div>`,
-});
+});

package/src/components/ProgressBar/ProgressBar.stories.js

@@ -54,5 +54,6 @@ export const IndeterminateAnimation = () => ({
 			val: 35,
 		};
 	},
-	template: '<farm-progressbar indeterminate :value="val" background-color="#FFFF00" value-color="#00FF00" />',
+	template:
+		'<farm-progressbar indeterminate :value="val" background-color="#FFFF00" value-color="#00FF00" />',
 });