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

package/src/components/CopyToClipboard/CopyToClipboard.vue

@@ -0,0 +1,133 @@
+<template>
+	<farm-tooltip v-model="show" :color="tooltipColor || buttonColor">
+		{{ feedbackMessage }}
+		<template v-slot:activator="{}">
+			<farm-btn
+				v-if="isIcon"
+				title="Copiar"
+				icon
+				:disabled="disabled"
+				:color="buttonColor"
+				@click="onClick"
+			>
+				<farm-icon :size="sizeIcon">content-copy</farm-icon>
+			</farm-btn>
+			<farm-btn v-else outlined title="Copiar" :disabled="disabled" @click="onClick">
+				<farm-icon :size="sizeIcon">content-copy</farm-icon>
+				Copiar
+			</farm-btn>
+		</template>
+	</farm-tooltip>
+</template>
+
+<script lang="ts">
+import { PropType, ref, toRefs } from 'vue';
+import { toClipboard } from '@farm-investimentos/front-mfe-libs-ts';
+
+export default {
+	name: 'farm-copytoclipboard',
+	props: {
+		/**
+		 * Content to be copied to clipboard
+		 */
+		toCopy: { type: String, required: true },
+		/**
+		 * Is button with icon?
+		 */
+		isIcon: { type: Boolean, default: true },
+		/**
+		 * sizeIcon: icon size setting
+		 */
+		sizeIcon: {
+			type: String as PropType<
+				'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'other (examples: 12px, 3rem)'
+			>,
+			default: 'xs',
+		},
+		/**
+		 * Success message content after copy
+		 */
+		successMessage: {
+			type: String,
+			default: 'Conteúdo copiado para a área de trabalho',
+		},
+		/**
+		 * Button color
+		 */
+		buttonColor: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: 'primary',
+		},
+		/**
+		 * Tooltip color
+		 */
+		tooltipColor: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: null,
+		},
+		/**
+		 * Success message timeout (in ms)
+		 */
+		successTimeout: {
+			type: [Number, String],
+			default: 2000,
+		},
+	},
+	setup(props) {
+		const show = ref(false);
+		const feedbackMessage = ref('');
+		const disabled = ref(false);
+		const sizeIcon = ref(props.sizeIcon);
+		const { toCopy, isIcon, successMessage, successTimeout } = toRefs(props);
+
+		const onClick = async () => {
+			disabled.value = true;
+			try {
+				await toClipboard(toCopy.value);
+				feedbackMessage.value = successMessage.value;
+			} catch (e) {
+				feedbackMessage.value = 'Ocorreu um erro: ' + e;
+			}
+			show.value = true;
+
+			setTimeout(() => {
+				show.value = false;
+				disabled.value = false;
+			}, parseInt(successTimeout.value as string, 10));
+		};
+
+		return {
+			show,
+			isIcon,
+			sizeIcon,
+			feedbackMessage,
+			disabled,
+			onClick,
+		};
+	},
+};
+</script>

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

@@ -0,0 +1,24 @@
+import { shallowMount } from '@vue/test-utils';
+import CopyToClipboard from '../CopyToClipboard';
+
+describe('CopyToClipboard component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(CopyToClipboard, {
+			propsData: {
+				toCopy: 'test',
+			},
+		});
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+});

package/src/components/CopyToClipboard/index.ts

@@ -0,0 +1,4 @@
+import CopyToClipboard from './CopyToClipboard.vue';
+
+export { CopyToClipboard };
+export default CopyToClipboard;

package/src/components/DataTableEmptyWrapper/DataTableEmptyWrapper.scss

@@ -0,0 +1,17 @@
+div {
+    padding: 64px 24px 32px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+
+    p {
+        &:first-of-type {
+            margin: 24px auto;
+        }
+    }
+
+    &.farm-emptywrapper--bordered {
+        border-top: 1px solid var(--farm-stroke-divider);
+    }
+}

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

@@ -0,0 +1,30 @@
+import DataTableEmptyWrapper from './DataTableEmptyWrapper.vue';
+
+export default {
+	title: 'Display/Table/DataTableEmptyWrapper',
+	component: DataTableEmptyWrapper,
+	parameters: {
+		docs: {
+			description: {
+				component: `Message for empty list/data<br />
+				selector: <em>farm-emptywrapper</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: '<farm-emptywrapper />',
+});
+
+export const CustomTitles = () => ({
+	template:
+		'<farm-emptywrapper title="Título customizado" subtitle="Subtítulo customizado" />',
+});
+
+export const NoBorder = () => ({
+	template: '<farm-emptywrapper :bordered="false" />',
+});

package/src/components/DataTableEmptyWrapper/DataTableEmptyWrapper.vue

@@ -0,0 +1,50 @@
+<template>
+	<div
+		:class="{
+			'farm-emptywrapper': true,
+			'farm-emptywrapper--bordered': bordered,
+		}"
+	>
+		<farm-icon size="xl" color="gray">magnify</farm-icon>
+		<farm-bodytext type="2" variation="bold" color="black" color-variation="40">
+			{{ title }}
+		</farm-bodytext>
+		<farm-caption v-if="subtitle" variation="regular" color-variation="30">
+			{{ subtitle }}
+		</farm-caption>
+	</div>
+</template>
+<script lang="ts">
+
+
+export default {
+	name: 'farm-emptywrapper',
+	props: {
+		/**
+		 * Title
+		 */
+		title: {
+			type: String,
+			default: 'Nenhuma informação para exibir aqui',
+		},
+		/**
+		 * Subtitle
+		 */
+		subtitle: {
+			type: String,
+			default:
+				'Tente filtrar novamente sua pesquisa.',
+		},
+		/**
+		 * Has border?
+		 */
+		bordered: {
+			type: Boolean,
+			default: true,
+		},
+	},
+};
+</script>
+<style scoped lang="scss">
+@import './DataTableEmptyWrapper';
+</style>

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

@@ -0,0 +1,20 @@
+import { shallowMount } from '@vue/test-utils';
+import DataTableEmptyWrapper from '../DataTableEmptyWrapper';
+
+describe('DataTableEmptyWrapper component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(DataTableEmptyWrapper, {});
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+});

package/src/components/DataTableEmptyWrapper/index.ts

@@ -0,0 +1,4 @@
+import DataTableEmptyWrapper from "./DataTableEmptyWrapper.vue";
+
+export { DataTableEmptyWrapper };
+export default DataTableEmptyWrapper;

package/src/components/DataTableHeader/DataTableHeader.scss

@@ -0,0 +1,65 @@
+.header-text {
+	position: relative;
+	color: var(--farm-secondary-green-darken);
+	font-size: 14px;
+	font-weight: 700;
+
+	.farm-icon {
+		position: absolute;
+		right: -20px;
+		top: -1px;
+		transition: transform 0.8s ease-in-out;
+
+		&.farm-icon--asc {
+			transform: rotateX(180deg);
+		}
+	}
+}
+
+th.sortable {
+	cursor: pointer;
+	.farm-icon::before {
+		transition: all 0.3s linear;
+	}
+	
+	&:not(.active) {
+		&:hover {
+			.farm-icon::before {
+				color: var(--farm-bw-black-10) !important;
+			}
+		}
+	}
+}
+
+th span.span-checkbox {
+	display: flex;
+	justify-content: flex-start;
+	padding-left: 0;
+}
+
+thead {
+	height: 51px;
+}
+
+th {
+	color: var(--farm-secondary-base);
+	font-size: 14px;
+	font-weight: 700;
+	text-transform: uppercase;
+	box-shadow: 0px -1px 0px var(--farm-gray-lighten), 0px 1px 0px var(--farm-gray-lighten);
+	&.checkbox-container {
+		width: 60px !important;
+		min-width: 60px !important;
+	}
+}
+
+:deep(.mdi-sort-reverse-variant)::before {
+	color: var(--farm-bw-black-30);
+	font-size: 16px;
+	font-weight: 400;
+}
+
+.farm-icon--desc,
+.farm-icon--asc {
+	margin-top: 3px;
+}

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

@@ -0,0 +1,109 @@
+// import { withDesign } from 'storybook-addon-designs';
+import DataTableHeader from './DataTableHeader.vue';
+
+export default {
+	title: 'Display/Table/DataTableHeader',
+	component: DataTableHeader,
+	// decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `DataTable Header<br />
+				selector: <em>farm-datatable-header</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			headers,
+			sortClick: [],
+			firstSelected: true,
+			
+		};
+	},
+	template: `<farm-datatable-header
+		:headers="headers"
+		:sortClick="sortClick"
+		:showCheckbox="false"
+		:firstSelected="firstSelected"
+		:selectedIndex="1"
+	/>`,
+});
+
+export const SetDescInititalOrder = () => ({
+	data() {
+		let customHeaders = [...headers];
+		customHeaders[1].order = 'DESC';
+		return {
+			headers: customHeaders,
+			sortClick: [],
+			firstSelected: true,
+			
+		};
+	},
+	template: `<farm-datatable-header
+		:headers="headers"
+		:sortClick="sortClick"
+		:showCheckbox="false"
+		:firstSelected="firstSelected"
+		:selectedIndex="1"
+	/>`,
+});
+
+export const CheckBox = () => ({
+	data() {
+		return {
+			headers: [
+				{
+					text: 'check',
+					sortable: true,
+					value: 'data-table-select',
+					align: 'left',
+				},
+				...headers,
+			],
+			headerProps,
+			sortClick: [],
+			firstSelected: false,
+		};
+	},
+	template: `<farm-datatable-header
+		:headers="headers"
+		:headerProps="headerProps"
+		:sortClick="sortClick"
+		:firstSelected="firstSelected"
+		:showCheckbox="true"
+		:selectedIndex="1" />`,
+});
+
+const headerProps = { someItems: true, everyItem: true };
+
+const headers = [
+	{
+		text: 'Grupo',
+		sortable: true,
+		value: 'name',
+		align: 'left',
+		width: 120,
+	},
+	{
+		text: 'Aprovado',
+		sortable: true,
+		value: 'approvedAmount',
+		align: 'center',
+		width: 160,
+	},
+	{
+		text: 'Disponível',
+		sortable: false,
+		value: 'availableAmount',
+		align: 'center',
+		width: 160,
+	},
+];

package/src/components/DataTableHeader/DataTableHeader.vue

@@ -0,0 +1,197 @@
+<template>
+	<thead>
+		<tr>
+			<th
+				v-for="(item, $index) in headers"
+				:key="item.value"
+				v-bind:class="[
+					item.sortable ? 'sortable' : '',
+					sortClick[$index].clicked ? 'active' : '',
+					item.sortable ? (sortClick[$index].descending === 'DESC' ? 'DESC' : 'ASC') : '',
+					showCheckbox && $index == 0 ? 'checkbox-container' : '',
+				]"
+				v-bind:style="{
+					textAlign: item.align ? item.align : '',
+					width: thWidth(item),
+					minWidth: thWidth(item),
+				}"
+				@click="item.sortable ? clickSort(item.value, $index) : ''"
+				@mouseover="changeShow($index)"
+				@mouseout="changeHidden($index)"
+			>
+				<span
+					class="header-text"
+					v-if="!isTHDataTableSelect(item)"
+					:title="
+						item.sortable && sortClick[$index].show ? `Ordernar por ${item.text}` : null
+					"
+				>
+					{{ item.text }}
+
+					<farm-icon
+						v-if="item.sortable && sortClick[$index].show"
+						v-bind:class="[
+							sortClick[$index][item.value] ? 'farm-icon--desc' : 'farm-icon--asc',
+						]"
+						class="ml-2"
+						size="16px"
+						color="black"
+						variation="30"
+					>
+						sort-reverse-variant
+					</farm-icon>
+				</span>
+
+				<span v-if="isTHDataTableSelect(item) && showCheckbox" class="span-checkbox">
+					<farm-checkbox
+						size="sm"
+						v-model="inputVal"
+						:value="true"
+						:indeterminate="headerProps.someItems && !headerProps.everyItem"
+						@input="selectAll"
+					/>
+				</span>
+			</th>
+		</tr>
+	</thead>
+</template>
+
+<script lang="ts">
+/* eslint-disable */
+
+
+export default {
+	name: 'farm-datatable-header',
+	props: {
+		/**
+		 * Headers
+		 */
+		headers: {
+			type: Array,
+			required: true,
+		},
+		/**
+		 * Array para controle da exibição da ordenação
+		 */
+		sortClick: {
+			type: Array,
+			required: true,
+		},
+		/**
+		 * Começar selecionado
+		 */
+		firstSelected: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Index do item do cabeçalho que deve começar selecionado
+		 */
+		selectedIndex: {
+			type: Number,
+			default: 0,
+		},
+		/**
+		 * v-model for data-table-select
+		 */
+		value: {
+			default: false,
+		},
+		/**
+		 * Original header props
+		 */
+		headerProps: {
+			type: Object,
+		},
+		/**
+		 * Hide/show checkbox
+		 */
+		showCheckbox: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	computed: {
+		inputVal: {
+			get() {
+				return this.value;
+			},
+			set(val) {
+				this.$emit('input', val);
+			},
+		},
+	},
+	methods: {
+		getTypeSort(value) {
+			return value ? 'DESC' : 'ASC';
+		},
+		clickSort(value, index) {
+			const isClicked = this.sortClick[index].clicked;
+			this.removeClicked();
+			this.sortClick[index].clicked = true;
+			this.sortClick[index].show = true;
+			if (isClicked) {
+				this.sortClick[index][value] = !this.sortClick[index][value];
+			}
+			this.sortClick[index].descending = this.getTypeSort(this.sortClick[index][value]);
+			this.$emit('onClickSort', this.sortClick[index]);
+		},
+		changeShow(index) {
+			setTimeout(() => {
+				this.sortClick[index].show = true;
+			}, 10);
+		},
+		changeHidden(index) {
+			setTimeout(() => {
+				if (this.sortClick[index].clicked) {
+					return;
+				}
+				this.sortClick[index].show = false;
+			}, 10);
+		},
+		removeClicked() {
+			for (let i = 0; i < this.sortClick.length; i += 1) {
+				this.sortClick[i].clicked = false;
+				this.sortClick[i].show = false;
+			}
+		},
+		checkFirstSelected(index) {
+			if (index === this.selectedIndex) {
+				return this.firstSelected;
+			}
+			return false;
+		},
+		thWidth(item) {
+			if (this.isTHDataTableSelect(item)) {
+				return '72px';
+			}
+			return item.width ? item.width + 'px' : 'auto';
+		},
+		isTHDataTableSelect(item) {
+			return item.value === 'data-table-select';
+		},
+		selectAll(value) {
+			this.$emit('toggleSelectAll', value);
+			this.inputVal = value;
+		},
+	},
+	created() {
+		for (let i = 0; i < this.headers.length; i += 1) {
+			this.sortClick.push({
+				[this.headers[i].value]:
+					this.firstSelected &&
+					i === this.selectedIndex &&
+					this.headers[i].order === 'DESC',
+				descending: this.headers[i].order || 'ASC',
+				field: this.headers[i].value,
+				clicked: this.checkFirstSelected(i),
+				show: this.checkFirstSelected(i),
+			});
+		}
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import './DataTableHeader.scss';
+</style>