@farm-investimentos/front-mfe-components 2.4.1 → 2.4.5

package/package.json

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

package/src/components/CardContext/CardContext.scss

@@ -6,6 +6,10 @@
 	border-radius: 5px;
 }
 
+.card-context.height-full {
+	height: 100%;
+}
+
 .card-context-header {
 	width: 100%;
 	height: 40px;

package/src/components/CardContext/CardContext.stories.js

@@ -32,6 +32,15 @@ export const WithLoading = () => ({
     `,
 });
 
+export const WithLoadingLarge = () => ({
+	components: { CardContext },
+	template: `
+        <CardContext icon="mdi-currency-usd" title="Titulo do Card" isLoading largeLoading>
+            <p>Conteúdo do Card</p>
+        </CardContext>
+    `,
+});
+
 export const WithError = () => ({
 	components: { CardContext },
 	template: `
@@ -44,4 +53,5 @@ export const WithError = () => ({
 Primary.storyName = 'Básico';
 Secondary.storyName = 'Título em Bold';
 WithLoading.storyName = 'Com Loading';
+WithLoadingLarge.storyName = 'Com Loading Large';
 WithError.storyName = 'Com Erro';

package/src/components/CardContext/CardContext.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="card-context">
+	<div :class="isHeightFull">
 		<div class="card-context-header" v-if="isSuccess">
 			<IconBox :icon="icon" />
 			<div class="card-context-content">
@@ -12,7 +12,7 @@
 			<slot></slot>
 		</div>
 		<div class="card-context-loding-or-error" v-if="isLoading">
-			<Loader size="small" />
+			<Loader :size="isLargeLoading" />
 		</div>
 		<div class="card-context-loding-or-error" v-if="isError">
 			<AlertReload :label="errorLabel" @onClick="$emit('onLoad')" />
@@ -61,6 +61,10 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		largeLoading: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * Show error alert
 		 */
@@ -75,8 +79,11 @@ export default Vue.extend({
 			type: String,
 			default: 'Ocorreu um erro',
 		},
+		full: {
+			type: Boolean,
+			default: false,
+		},
 	},
-
 	computed: {
 		isBold() {
 			if (this.bold) {
@@ -84,9 +91,21 @@ export default Vue.extend({
 			}
 			return 'card-context-title';
 		},
+		isHeightFull() {
+			if (this.full) {
+				return 'card-context height-full';
+			}
+			return 'card-context';
+		},
 		isSuccess() {
 			return !this.isLoading && !this.isError;
 		},
+		isLargeLoading() {
+			if (this.largeLoading) {
+				return 'normal';
+			}
+			return 'small';
+		},
 	},
 });
 </script>

package/src/components/DataTableHeader/DataTableHeader.scss

@@ -22,4 +22,4 @@ th.sortable {
 			}
 		}
 	}
-}
+}

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

@@ -21,7 +21,7 @@ export const Primary = () => ({
 					sortable: true,
 					value: 'approvedAmount',
 					align: 'center',
-					width: 160,
+					width: 320,
 				},
 				{
 					text: 'Disponível',

package/src/components/DataTableHeader/DataTableHeader.vue

@@ -12,6 +12,7 @@
 				v-bind:style="{
 					textAlign: item.align ? item.align : '',
 					width: thWidth(item),
+					minWidth: thWidth(item),
 				}"
 				@click="item.sortable ? clickSort(item.value, $index) : ''"
 				@mouseover="changeShow($index)"
@@ -30,6 +31,14 @@
 						mdi-sort-descending
 					</v-icon>
 				</span>
+
+				<span v-if="isTHDataTableSelect(item)">
+					<v-simple-checkbox
+						:indeterminate="headerProps.someItems && !headerProps.everyItem"
+						v-model="inputVal"
+						@input="selectAll"
+					></v-simple-checkbox>
+				</span>
 			</th>
 		</tr>
 	</thead>
@@ -38,10 +47,13 @@
 <script>
 import Vue from 'vue';
 import VIcon from 'vuetify/lib/components/VIcon';
+import VSimpleCheckbox from 'vuetify/lib/components/VCheckbox/VSimpleCheckbox';
+
 export default Vue.extend({
 	name: 'farm-datatable-header',
 	components: {
 		VIcon,
+		VSimpleCheckbox,
 	},
 	props: {
 		/**
@@ -72,6 +84,28 @@ export default Vue.extend({
 			type: Number,
 			default: 0,
 		},
+		/**
+		 * v-model for data-table-select
+		 */
+		value: {
+			required: true,
+		},
+		/**
+		 * Original header props
+		 */
+		headerProps: {
+			type: Object,
+		},
+	},
+	computed: {
+		inputVal: {
+			get() {
+				return this.value;
+			},
+			set(val) {
+				this.$emit('input', val);
+			},
+		},
 	},
 	methods: {
 		getTypeSort(value) {
@@ -119,6 +153,10 @@ export default Vue.extend({
 		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) {

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

@@ -8,7 +8,24 @@ describe('DataTableHeader component', () => {
 	beforeEach(() => {
 		wrapper = shallowMount(DataTableHeader, {
 			propsData: {
-				headers: [],
+				headers: [
+					{
+						value: 'A',
+					},
+				],
+				sortClick: [
+					{
+						clicked: true,
+						show: true,
+					},
+					{
+						clicked: false,
+						show: false,
+					},
+				],
+				selectedIndex: 0,
+				firstSelected: true,
+				value: false,
 			},
 		});
 		component = wrapper.vm;
@@ -35,5 +52,44 @@ describe('DataTableHeader component', () => {
 			expect(component.thWidth({ width: 24 })).toEqual('24px');
 			expect(component.thWidth({})).toEqual('auto');
 		});
+
+		it('Should remove clicked', () => {
+			component.removeClicked();
+			expect(component.sortClick[0].clicked).toBeFalsy();
+			expect(component.sortClick[0].show).toBeFalsy();
+		});
+
+		it('Should check first selected', () => {
+			expect(component.checkFirstSelected(999)).toBeFalsy();
+			expect(component.checkFirstSelected(0)).toBeTruthy();
+		});
+
+		it('Should emit event when clickSort', () => {
+			component.clickSort('A', 0);
+			expect(wrapper.emitted().onClickSort).toBeDefined();
+		});
+
+		it('Should get type sort', () => {
+			expect(component.getTypeSort(false)).toEqual('ASC');
+			expect(component.getTypeSort(true)).toEqual('DESC');
+		});
+
+		it('Should change show', async () => {
+			component.changeShow(0);
+			await new Promise(r => setTimeout(r, 20));
+			expect(component.sortClick[0].show).toBeTruthy();
+		});
+
+		it('Should change show', async () => {
+			component.changeHidden(0);
+			component.changeHidden(1);
+			await new Promise(r => setTimeout(r, 30));
+			expect(component.sortClick[1].show).toBeFalsy();
+		});
+
+		it('Should emit new value when selectAll checkbox is clicked', () => {
+			component.selectAll(true);
+			expect(wrapper.emitted().toggleSelectAll).toBeDefined();
+		});
 	});
 });

package/src/components/Tabs/Tabs.vue

@@ -1,97 +1,100 @@
 <template>
-    <v-tabs color="secondary" v-model="selected">
-        <v-tab
-            v-for="(tab, index) in tabs"
-            :key="index"
-            :class="{ hideCounter: !showCounter }"
-            @change="changeTab(tab, index)"
-            :disabled="!allowUserChange"
-        >
-            <div
-                v-if="showCounter"
-                :class="{ 'is-selected': isSelected(index) }"
-                class="pl-3 pr-3 pt-2 pb-2 mr-2 rounded-circle d-inline-block white--text"
-            >
-                <span>{{ index + 1 }}</span>
-            </div>
-            <span class="black--text text-capitalize">{{ tab.name }}</span>
-        </v-tab>
-    </v-tabs>
+	<v-tabs color="secondary" v-model="selected">
+		<v-tab
+			v-for="(tab, index) in tabs"
+			:key="index"
+			:class="{ hideCounter: !showCounter }"
+			@change="changeTab(tab, index)"
+			:disabled="!allowUserChange"
+		>
+			<div
+				v-if="showCounter"
+				:class="{ 'is-selected': isSelected(index) }"
+				class="pl-3 pr-3 pt-2 pb-2 mr-2 rounded-circle d-inline-block white--text"
+			>
+				<span>{{ index + 1 }}</span>
+			</div>
+			<span class="black--text text-capitalize">{{ tab.name }}</span>
+		</v-tab>
+	</v-tabs>
 </template>
 
 <script>
 import { VTabs, VTab } from 'vuetify/lib/components/VTabs';
 export default {
-    data: () => ({
-        selected: 0,
-    }),
-    props: {
-        tabs: {
-            type: Array,
-            default: () => [
-                {
-                    name: 'Seleção',
-                    path: 'selection',
-                },
-                {
-                    name: 'Revisão',
-                    path: 'review',
-                },
-            ],
-        },
-        showCounter: {
-            type: Boolean,
-            default: true,
-        },
-        initialSelect: {
-            type: Number,
-            default: 0,
-        },
-        allowUserChange: {
-            type: Boolean,
-            default: true,
-        },
-    },
-    methods: {
-        isSelected(index) {
-            return index === this.selected;
-        },
-        changeTab(_, index) {
-            this.$emit('update', this.tabs[index]);
-        },
-        next() {
-            this.selected = this.selected + 1;
-            this.$emit('update', this.tabs[this.selected]);
-        },
-        previous() {
-            this.selected = this.selected - 1;
-            this.$emit('update', this.tabs[this.selected]);
-        },
-        toIndex(index) {
-            this.selected = index;
-            this.$emit('update', this.tabs[index]);
-        },
-        updateTabRouting: (component, item, nextRoutePrefix) => {
-            component.currentTab = item.path;
-            const nextRoute = `${nextRoutePrefix}/${item.path}`;
-            const currentRoute = component.$router.history.current.path;
-            if (nextRoute !== currentRoute) component.$router.push(nextRoute);
-        },
-    },
-    created() {
-        this.selected = this.initialSelect;
-    },
-    components: {
-        VTabs,
-        VTab,
-    },
+	data: () => ({
+		selected: 0,
+	}),
+	props: {
+		tabs: {
+			type: Array,
+			default: () => [
+				{
+					name: 'Seleção',
+					path: 'selection',
+				},
+				{
+					name: 'Revisão',
+					path: 'review',
+				},
+			],
+		},
+		showCounter: {
+			type: Boolean,
+			default: true,
+		},
+		initialSelect: {
+			type: Number,
+			default: 0,
+		},
+		allowUserChange: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	methods: {
+		isSelected(index) {
+			return index === this.selected;
+		},
+		changeTab(_, index) {
+			this.$emit('update', this.tabs[index]);
+		},
+		next() {
+			this.selected = this.selected + 1;
+			this.$emit('update', this.tabs[this.selected]);
+		},
+		previous() {
+			this.selected = this.selected - 1;
+			this.$emit('update', this.tabs[this.selected]);
+		},
+		toIndex(index) {
+			this.selected = index;
+			this.$emit('update', this.tabs[index]);
+		},
+		updateTabRouting: (component, item, nextRoutePrefix) => {
+			component.currentTab = item.path;
+			const nextRoute = `${nextRoutePrefix}/${item.path}`;
+			const currentRoute = component.$router.history.current.path;
+			if (nextRoute !== currentRoute) component.$router.push(nextRoute);
+		},
+	},
+	created() {
+		this.selected = this.initialSelect;
+	},
+	components: {
+		VTabs,
+		VTab,
+	},
 };
 </script>
 <style scoped lang="scss">
 div.rounded-circle {
-    background-color: var(--v-gray-lighten3);
-    &.is-selected {
-        background-color: var(--v-secondary-base);
-    }
+	background-color: var(--v-gray-lighten3);
+	&.is-selected {
+		background-color: var(--v-secondary-base);
+	}
 }
-</style>
+.v-tab--active.v-tab--disabled {
+	opacity: 1;
+}
+</style>