@farm-investimentos/front-mfe-components-vue3 0.0.1

package/src/examples/Table.stories.js

@@ -0,0 +1,200 @@
+// import { withDesign } from 'storybook-addon-designs';
+import { VDataTable } from 'vuetify/labs/components';
+
+const headers = [
+	{
+		title: 'ID',
+		sortable: true,
+		value: 'id',
+		width: 80,
+		align: 'left',
+	},
+	{
+		title: 'Name',
+		sortable: false,
+		value: 'id',
+		width: 160,
+		align: 'left',
+	},
+];
+
+export default {
+	title: 'Display/Table/Examples',
+	// decorators: [withDesign],
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1505%3A372',
+		},
+		viewMode: 'docs',
+		docs: {
+			description: {
+				component: `Data Table (inherit from Vuetify)`,
+			},
+		},
+	},
+};
+
+export const TableNoData = () => ({
+	components: { 'v-data-table': VDataTable },
+	data() {
+		return {
+			headers,
+		};
+	},
+	template: `
+	<v-data-table
+		id="v-data-table--default"
+		:headers="headers"
+	>
+		<template v-slot:no-data>
+		<farm-emptywrapper
+			subtitle="Tente filtrar novamente sua pesquisa"
+		/>
+		</template>
+		<template #bottom></template>
+    </v-data-table>`,
+});
+
+export const TableSampleData = () => ({
+  components: { 'v-data-table': VDataTable },
+	data() {
+		return {
+			headers,
+			items: [
+				{ id: 1, name: 'name 1' },
+				{ id: 2, name: 'name 2' },
+				{ id: 3, name: 'name 3' },
+			],
+		};
+	},
+	template: `<div>
+	<v-data-table
+		id="v-data-table--default"
+		:headers="headers"
+        :items="items"
+	>
+	<template #bottom></template>
+    </v-data-table>
+	</div>`,
+});
+
+export const TableSampleDataWithCheckbox = () => ({
+	components: { 'v-data-table': VDataTable },
+	data() {
+		return {
+			headers,
+			items: [
+				{ id: 1, name: 'name 1' },
+				{ id: 2, name: 'name 2' },
+				{ id: 3, name: 'name 3' },
+			],
+			selectedItems: [],
+		};
+	},
+	template: `<div>{{ selectedItems }}
+	<v-data-table
+		id="v-data-table--default"
+		:headers="headers"
+        :items="items"
+		show-select
+		v-model="selectedItems"
+	>
+	<template #bottom></template>
+    </v-data-table>
+	</div>`,
+});
+
+export const TableSampleLocalPagination = () => ({
+	components: { 'v-data-table': VDataTable },
+	data() {
+		return {
+			headers,
+			items: [
+				{ id: 1, name: 'name 1' },
+				{ id: 2, name: 'name 2' },
+				{ id: 3, name: 'name 3' },
+				{ id: 4, name: 'name 4' },
+				{ id: 5, name: 'name 5' },
+				{ id: 6, name: 'name 6' },
+				{ id: 7, name: 'name 7' },
+				{ id: 8, name: 'name 8' },
+				{ id: 9, name: 'name 9' },
+				{ id: 10, name: 'name 10' },
+				{ id: 11, name: 'name 11' },
+				{ id: 12, name: 'name 12' },
+			],
+			pagination: {
+				page: 1,
+				itemsPerPage: 5,
+				pages: 3,
+			},
+		};
+	},
+	methods: {
+		onChangePage(newPage) {
+			this.pagination.page = newPage;
+		},
+	},
+	template: `
+	<v-data-table
+		id="v-data-table--default"
+		:items-per-page="pagination.itemsPerPage"
+		:headers="headers"
+    :items="items"
+		:items-length="items.length"
+		:page="pagination.page"
+	>
+    	<template v-slot:bottom>
+			<farm-datatable-paginator
+				class="my-6"
+				hidePerPageOptions
+				:initialLimitPerPage="pagination.itemsPerPage"
+				:page="pagination.page"
+				:totalPages="pagination.pages"
+				@onChangePage="onChangePage"
+			/>
+		</template>
+    </v-data-table>`,
+});
+
+export const TableSampleDataWithFarmCheckbox = () => ({
+	components: { 'v-data-table': VDataTable },
+	data() {
+		return {
+			headers,
+			items: [
+				{ id: 1, name: 'name 1' },
+				{ id: 2, name: 'name 2' },
+				{ id: 3, name: 'name 3' },
+			],
+			selectedItems: [],
+		};
+	},
+	methods: {
+		onSelect({ item }) {
+			if (item.id === 2)
+				this.selectedItems = [...this.selectedItems].filter(
+					innerItem => innerItem.id !== 2
+				);
+		},
+		isItemSelected(item) {
+			return this.selectedItems.some(innerItem => innerItem.id === item.id);
+		},
+	},
+	template: `<div>{{selectedItems}}
+	<v-data-table
+        hide-default-footer
+		id="v-data-table--default"
+		v-model="selectedItems"
+		show-select
+		:headers="headers"
+        :items="items"
+		@item-selected="onSelect"
+	>
+		<template v-slot:item.data-table-select="{ isSelected, select, item }">
+			<farm-checkbox :value="item.id" :checked="isItemSelected(item)" @input="select($event)"/>
+		</template>
+    </v-data-table>
+	</div>`,
+});

package/src/examples/VuetifyDialog.stories.js

@@ -0,0 +1,129 @@
+// import { withDesign } from 'storybook-addon-designs';
+
+export default {
+	title: 'Display/Dialog/Vuejs-dialog',
+	// decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+		docs: {
+			description: {
+				component: `Dialog created by vuejs-dialog`,
+			},
+		},
+	},
+};
+
+export const Primary = () => ({
+	methods: {
+		openDialog() {
+			this.$dialog
+				.confirm(
+					{
+						title: 'Dialog title',
+						body: 'Dialog content',
+					},
+					{
+						html: true,
+						okText: 'OK',
+						cancelText: 'Cancel',
+					}
+				)
+				.then(() => {
+					alert('OK Clicked');
+				})
+				.catch(() => {
+					alert('Cancel clicked');
+				});
+		},
+	},
+	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
+        <farm-btn @click="openDialog">
+            Open
+        </farm-btn>
+	</div>`,
+});
+
+export const ErrorColor = () => ({
+	methods: {
+		openDialog() {
+			this.$dialog
+				.alert(
+					{
+						title: 'Dialog title - Error',
+						body: 'Dialog content with error layout',
+					},
+					{
+						html: true,
+						okText: 'OK',
+						customClass: 'dg-parent-error',
+					}
+				)
+				.then(() => {
+					alert('OK Clicked');
+				})
+				.catch(() => {});
+		},
+	},
+	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
+        <farm-btn @click="openDialog">
+            Open
+        </farm-btn>
+	</div>`,
+});
+
+export const NoFooter = () => ({
+	methods: {
+		openDialog() {
+			this.$dialog
+				.confirm(
+					{
+						title: 'Dialog title - No footer',
+						body: 'Dialog content for notifications without footer (must be closed programmatically)',
+					},
+					{
+						html: true,
+						okText: '',
+						customClass: 'dg-parent-nofooter',
+					}
+				)
+				.then(() => {})
+				.catch(() => {});
+
+			setTimeout(() => {
+				this.$dialog.destroy();
+			}, 2000);
+		},
+	},
+	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
+        <farm-btn @click="openDialog">
+            Open
+        </farm-btn>
+	</div>`,
+});
+
+export const CustomHtml = () => ({
+	methods: {
+		openDialog() {
+			this.$dialog
+				.alert(
+					{
+						title: 'Dialog title',
+						body: `This is a text with <strong>html markup</strong> and<br />break line!<br />
+						Also with an <i class="mdi mdi-book"></i>book icon<br />
+						and some <span style="color: var(--farm-warning-base)">color</span>`,
+					},
+					{
+						html: true,
+						okText: 'Button with icon <i class="mdi mdi-book"></i>',
+					}
+				)
+				.then(() => {})
+				.catch(() => {});
+		},
+	},
+	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
+        <farm-btn @click="openDialog">
+            Open
+        </farm-btn>
+	</div>`,
+});

package/src/helpers/calculateMainZindex.js

@@ -0,0 +1,12 @@
+export default () => {
+	const all_z = [];
+	document.querySelectorAll('*').forEach(function (elem) {
+		all_z.push(elem.style.zIndex);
+	});
+	const zIndex = Math.max.apply(
+		null,
+		all_z.map(x => Number(x))
+	);
+
+	return zIndex > 5 ? zIndex : 5;
+};

package/src/helpers/date.ts

@@ -0,0 +1,94 @@
+export const defaultFormat = (data, UTCTimeZone = true) => {
+	const options = {
+		timeZone: 'UTC',
+	};
+	return data ? new Date(data).toLocaleDateString('pt-BR', UTCTimeZone ? options : {}) : null;
+};
+
+export const convertDate = (data) => {
+	if(!data) {
+		return '';
+	}
+	const newdate = data.split("/").reverse().join("-");
+	return newdate;
+};
+
+export const revertDate = (data: string): string => {
+	if(!data) {
+		return '';
+	}
+	const newdate = data.split("-").reverse().join("/");
+	return newdate;
+};
+
+
+const checkLength = (value, length) => {
+	return parseInt(value.length, 10) === length;
+};
+
+const dateFormatting = (date) => {
+	if(date.includes('/')){
+		const dateSplit = date.split('/');
+		return {
+			day: dateSplit[0],
+			month: dateSplit[1],
+			year: dateSplit[2]
+		};
+	}
+	const dateSplit = date.split('-');
+	return {
+		day: dateSplit[2],
+		month: dateSplit[1],
+		year: dateSplit[0]
+	};
+};
+
+const checkLeapYear = (year) => {
+	if (parseInt(year, 10) % 400 === 0){
+		return true;
+	}
+	if(parseInt(year, 10) % 4 === 0 && parseInt(year, 10) % 100 !== 0) {
+		return true;
+	}else{
+		return false;
+	}
+};
+
+const getTotalDays = (month, isLeapYear) => {	
+	const numberMonth = parseInt(month, 10);
+	if(numberMonth === 2) {
+		return isLeapYear ? 29 : 28;
+	}
+	const monthsWith31Days = [1, 3, 5, 7, 8, 10, 12];
+	return monthsWith31Days.includes(numberMonth) ? 31 : 30;
+};
+
+const checkDay = (day, totalDays) => {	
+	if(parseInt(day, 10) > 0 && parseInt(day, 10) <= totalDays) {
+		return true;
+	}
+	return false;
+};
+
+const checkMonth = (month) => {	
+	if(parseInt(month, 10) > 0 && parseInt(month, 10) <= 12) {
+		return true;
+	}
+	return false;
+};
+
+export const checkDateValid = (date) => {
+	if(!checkLength(date, 10)){
+		return false;
+	}
+	const {day, month, year} = dateFormatting(date);
+	if(!checkMonth(month)){
+		return false;
+	}
+	const isLeapYear = checkLeapYear(year);
+	const totalDays = getTotalDays(month, isLeapYear);
+	if(!checkDay(day, totalDays)){
+		return false;
+	}
+	return true;
+};

package/src/helpers/formatDatePickerHeader.ts

@@ -0,0 +1,19 @@
+const monthNumberToMonthName = {
+	'01': 'Janeiro',
+	'02': 'Fevereiro',
+	'03': 'Março',
+	'04': 'Abril',
+	'05': 'Maio',
+	'06': 'Junho',
+	'07': 'Julho',
+	'08': 'Agosto',
+	'09': 'Setembro',
+	'10': 'Outubro',
+	'11': 'Novembro',
+	'12': 'Dezembro',
+};
+
+export function formatDatePickerHeader(date: string): string {
+	const [year, month] = date.split('-');
+	return `${month ? monthNumberToMonthName[month] + ' ' : ''}${year}`;
+}

package/src/helpers/index.ts

@@ -0,0 +1,4 @@
+import { formatDatePickerHeader } from './formatDatePickerHeader';
+export { default as calculateMainZindex } from './calculateMainZindex';
+import isChildOfFixedElement from './isChildOfFixedElement';
+export { formatDatePickerHeader, isChildOfFixedElement };

package/src/helpers/isChildOfFixedElement.js

@@ -0,0 +1,16 @@
+function isChildOfFixedElement(element) {
+	const parent = element.parentNode;
+
+	if (!parent || !(parent instanceof Element)) {
+		return false;
+	}
+	const style = window.getComputedStyle(parent);
+
+	if (style.position === 'fixed') {
+		return true;
+	}
+
+	return isChildOfFixedElement(parent);
+}
+
+export default isChildOfFixedElement;

package/src/helpers/randomId.ts

@@ -0,0 +1,9 @@
+export default (length: number) => {
+	let text = '';
+	const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+	for (let i = 0; i < length; i++) {
+		text += possible.charAt(Math.floor(Math.random() * possible.length));
+	}
+	return text;
+};

package/src/main.ts

@@ -0,0 +1,92 @@
+export * from './components/DataTableEmptyWrapper';
+
+import DataTablePaginator from './components/DataTablePaginator';
+import DataTableHeader from './components/DataTableHeader';
+import MainFilter from './components/MainFilter';
+import Loader from './components/Loader';
+import MultipleFilePicker from './components/MultipleFilePicker';
+import DialogHeader from './components/DialogHeader';
+import DialogFooter from './components/DialogFooter';
+import RangeDatePicker from './components/RangeDatePicker';
+import DatePicker from './components/DatePicker';
+import ManagersList from './components/ManagersList';
+import PromptUserToConfirm from './components/PromptUserToConfirm';
+import ModalPromptUser from './components/ModalPromptUser';
+
+import TableContextMenu from './components/TableContextMenu';
+import IconBox from './components/IconBox';
+
+import DefaultButton from './components/Buttons/DefaultButton';
+import Collapsible from './components/Collapsible';
+import IdCaption from './components/IdCaption';
+import ResourceMetaInfo from './components/ResourceMetaInfo';
+
+export {
+	DataTablePaginator,
+	DataTableHeader,
+	MainFilter,
+	Loader,
+	MultipleFilePicker,
+	DialogHeader,
+	DialogFooter,
+	RangeDatePicker,
+	DatePicker,
+	ManagersList,
+	PromptUserToConfirm,
+	TableContextMenu,
+	ModalPromptUser,
+	DefaultButton,
+	IconBox,
+	Collapsible,
+	IdCaption,
+	ResourceMetaInfo,
+};
+
+export * from './components/AlertBox';
+export * from './components/AlertReload';
+export * from './components/ButtonToggle';
+export * from './components/Buttons/DefaultButton';
+export * from './components/Buttons/DangerButton';
+export * from './components/Buttons/ConfirmButton';
+export * from './components/Buttons/ExportButton';
+export * from './components/Buttons/ImportButton';
+export * from './components/Buttons/ToggleButton';
+export * from './components/Buttons/RemoveButton';
+export * from './components/Buttons/MultiImportButton';
+export * from './components/Card';
+export * from './components/Checkbox';
+export * from './components/Chip';
+export * from './components/ContextMenu';
+export * from './components/CopyToClipboard';
+export * from './components/ResetTableRowSelection';
+export * from './components/MultipleSelectShortener';
+export * from './components/SelectModalOptions';
+export * from './components/ChipInviteStatus';
+export * from './components/Form';
+export * from './components/Label';
+export * from './components/List';
+export * from './components/ListItem';
+export * from './components/Logger';
+export * from './components/Logger/LoggerItem';
+export * from './components/Icon';
+export * from './components/Modal';
+export * from './components/ProgressBar';
+export * from './components/Radio';
+export * from './components/RadioGroup';
+export * from './components/Select';
+export * from './components/SelectAutoComplete';
+export * from './components/Stepper';
+export * from './components/Switcher';
+export * from './components/Tabs';
+export * from './components/TextArea';
+export * from './components/TextFieldV2';
+export * from './components/Tooltip';
+export * from './components/Typography';
+export * from './components/ValueCaption';
+export * from './components/layout/Box';
+export * from './components/layout/Col';
+export * from './components/layout/Container';
+export * from './components/layout/ContainerFooter';
+export * from './components/layout/Row';
+export * from './components/layout/Line';
+

package/src/scss/Sticky-table.scss

@@ -0,0 +1,112 @@
+$defaultLefts: 0, 4rem, 4rem;
+
+@mixin stickytable($selector, $columns: 1, $lefts: $defaultLefts) {
+	#{$selector} {
+		tbody {
+			font-size: 12px;
+		}
+
+		tbody tr:nth-of-type(odd) td {
+			background-color: var(--farm-background-base);
+		}
+
+		tr td {
+			background-color: var(--farm-background-white);
+		}
+
+		tr:not(:last-child) td,
+		tr th {
+			border-bottom: none;
+		}
+
+		.v-data-table__wrapper {
+			border-top: 1px solid var(--farm-gray-lighten);
+			border-bottom: 1px solid var(--farm-gray-lighten);
+		}
+
+		tr td:first-child,
+		th:first-child {
+			&:after {
+				content: '';
+				position: absolute;
+				left: 0;
+				bottom: -2px;
+				width: 100%;
+			}
+		}
+
+		&.v-data-table>.v-data-table__wrapper>table {
+
+			>tbody>tr>td:first-child,
+			>thead>tr>th:first-child {
+				padding-left: 24px;
+			}
+		}
+
+		@if $columns >0 {
+			@for $i from 1 through $columns {
+
+				tr td:nth-child(#{$i}),
+				th:nth-child(#{$i}) {
+					position: sticky;
+					z-index: 4;
+					background-color: var(--farm-bw-white);
+				}
+			}
+
+			@for $i from 1 through $columns {
+
+				tr td:nth-child(#{$i}),
+				th:nth-child(#{$i}) {
+					left: nth($lefts, $i);
+				}
+			}
+		}
+
+		tr td:first-child,
+		tr th:first-child {
+			padding-left: 24px;
+		}
+
+		th[role='columnheader'] {
+			color: var(--farm-secondary-green-darken);
+			font-size: 14px;
+			font-weight: 700;
+			text-transform: uppercase;
+		}
+
+		td {
+			color: var(--farm-bw-black);
+			font-size: 14px;
+			font-weight: 400;
+		}
+
+		thead {
+			height: 51px;
+		}
+
+		th[role='columnheader']:has(> .v-data-table__checkbox) {
+			max-width: 71px !important;
+			padding-left: 24px;
+		}
+
+		.v-data-table-header__icon {
+			color: var(--farm-gray-base) !important;
+			font-size: 12px;
+			font-weight: 900;
+			margin-left: 8px;
+		}
+
+		.v-data-table__checkbox .mdi {
+			margin-left: 0;
+			font-size: 22px;
+			margin-left: -2px;
+		}
+
+		.v-input--selection-controls__input {
+			width: 20px;
+			height: 20px;
+			margin-right: 0 !important;
+		}
+	}
+}

package/src/scss/Table.scss

@@ -0,0 +1,2 @@
+@import './Sticky-table.scss';
+@include stickytable('#v-data-table--default', 1, (0));