@farm-investimentos/front-mfe-components 14.1.6 → 14.2.1

package/package.json

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

package/src/components/DataTableHeader/DataTableHeader.scss

@@ -10,6 +10,7 @@
 	}
 
 	.farm-icon {
+		transition: transform .8s ease-in-out;  
 		&.farm-icon--asc {
 			transform: rotateX(180deg);
 		}
@@ -18,20 +19,24 @@
 
 th.sortable {
 	cursor: pointer;
-
 	&:not(.active) {
 		&:hover {
-			.farm-icon {
-				opacity: 0.5 !important;
+			.farm-icon::before {
+				color: var(--farm-gray-base) !important;
 			}
 		}
 	}
+
+	.header-text {
+		transition: color 0.5s ease;
+	}
+
 }
 
 th span.span-checkbox {
 	display: flex;
 	justify-content: flex-start;
-	padding-left: 4px;
+	padding-left: 0;
 }
 
 thead {
@@ -44,10 +49,14 @@ th {
 	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-descending)::before {
-	color: var(--farm-gray-base);
+	color: var(--farm-secondary-base);
 	font-size: 12px;
 	font-weight: 900;
 }
@@ -55,4 +64,4 @@ th {
 .farm-icon--desc,
 .farm-icon--asc {
 	margin-top: 3.5px;
-}
+}

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

@@ -90,13 +90,14 @@ const headers = [
 		sortable: true,
 		value: 'name',
 		align: 'left',
+		width: 120,
 	},
 	{
 		text: 'Aprovado',
 		sortable: true,
 		value: 'approvedAmount',
 		align: 'center',
-		width: 320,
+		width: 160,
 	},
 	{
 		text: 'Disponível',

package/src/components/DataTableHeader/DataTableHeader.vue

@@ -8,6 +8,7 @@
 					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 : '',
@@ -36,7 +37,7 @@
 
 				<span v-if="isTHDataTableSelect(item) && showCheckbox" class="span-checkbox">
 					<farm-checkbox
-						size="md"
+						size="sm"
 						v-model="inputVal"
 						:value="true"
 						:indeterminate="headerProps.someItems && !headerProps.everyItem"
@@ -118,10 +119,13 @@ export default Vue.extend({
 			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;
-			this.sortClick[index][value] = !this.sortClick[index][value];
+			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]);
 		},
@@ -167,7 +171,10 @@ export default Vue.extend({
 	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',
+				[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),

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

@@ -23,7 +23,9 @@ export default {
 };
 
 export const Primary = () => ({
-	template: '<farm-listitem>aaa</farm-listitem>',
+	template: `<farm-listitem>
+	Item
+	</farm-listitem>`,
 });
 
 export const HoverColors = () => ({
@@ -33,8 +35,16 @@ export const HoverColors = () => ({
 			variations,
 		};
 	},
-	template: `<div style="display: flex; flex-direction: row; flex-wrap: wrap;">
-		<div class="chips-container" v-for="color in colors" :key="color" style="width: 33.3%; margin-bottom: 32px;">
+	methods: {
+		getIconVariation(variation) {
+			if (variation === 'base' || variation === 'lighten') {
+				return 'darken';
+			}
+			return 'base';
+		},
+	},
+	template: `<farm-row>
+		<farm-col v-for="color in colors" :key="color" cols="12" md="4" class="mb-4">
 			<h4>{{ color }}</h4>
 			<farm-listitem
 				v-for="variation in variations"
@@ -42,24 +52,25 @@ export const HoverColors = () => ({
 				:hoverColor="color"
 				:hoverColorVariation="variation"
 				>
+				<farm-icon
+					:color="color"
+					:variation="getIconVariation(variation)"
+				>
+					book
+				</farm-icon>
 				{{ color }} {{ variation }}
 			</farm-listitem>
-		</div>
-	</div>`,
+		</farm-col>
+	</farm-row>`,
 });
 
-export const ClickableCursor = () => ({
-	template: '<farm-listitem clickable>Clickable cursor</farm-listitem>',
-});
-
-export const ClickListener = () => ({
+export const Clickable = () => ({
 	methods: {
 		onClick() {
 			alert('Clicked');
-		}
+		},
 	},
-	template:
-		`<farm-listitem
+	template: `<farm-listitem
 			clickable
 			hoverColor="error"
 			hoverColorVariation="lighten"

package/src/components/ProgressBar/ProgressBar.scss

@@ -14,11 +14,11 @@ $radius: 5px;
 
     @each $color in $colors {
         &#{'.farm-progressbar--' + $color} {
-            background-color: var(--v-#{$color}-base);
+            background-color: var(--farm-#{$color}-base);
         }
 
         &#{'.farm-progressbar--value-' + $color}>div {
-            background-color: var(--v-#{$color}-base);
+            background-color: var(--farm-#{$color}-base);
         }
     }
 

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

@@ -14,7 +14,8 @@ export default {
 		docs: {
 			description: {
 				component: `ProgressBar<br />
-				selector: <em>farm-progressbar</em>`,
+				selector: <em>farm-progressbar</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
 			},
 		},
 	},
@@ -35,7 +36,7 @@ export const CustomColors = () => ({
 			val: 35,
 		};
 	},
-	template: '<farm-progressbar :value="val" backgroundColor="accent" valueColor="secondary" />',
+	template: '<farm-progressbar :value="val" background-color="info" value-color="secondary" />',
 });
 
 export const CustomHexaColors = () => ({
@@ -44,5 +45,5 @@ export const CustomHexaColors = () => ({
 			val: 35,
 		};
 	},
-	template: '<farm-progressbar :value="val" backgroundColor="#FFFF00" valueColor="#00FF00" />',
+	template: '<farm-progressbar :value="val" background-color="#FFFF00" value-color="#00FF00" />',
 });

package/src/components/ProgressBar/ProgressBar.vue

@@ -4,7 +4,7 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { PropType } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-progressbar',
@@ -12,11 +12,39 @@ export default Vue.extend({
 		/**
 		 * backgroundColor
 		 */
-		backgroundColor: { type: String, default: 'secondary' },
+		backgroundColor: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+				| any
+			>,
+			default: 'primary',
+		},
 		/**
 		 * color
 		 */
-		valueColor: { type: String, default: 'error' },
+		valueColor: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+				| any
+			>,
+			default: 'error',
+		},
 		/**
 		 * Value (form 0 to 100)
 		 */

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

@@ -3,11 +3,13 @@ import ProgressBar from '../ProgressBar';
 
 describe('ProgressBar component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(ProgressBar, {
 			propsData: { value: 40 },
 		});
+		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
@@ -19,4 +21,11 @@ describe('ProgressBar component', () => {
 			expect(wrapper.element).toMatchSnapshot();
 		});
 	});
+
+	describe('computed properties', () => {
+		it('classes', () => {
+			expect(component.classes).toBeDefined();
+			expect(component.classes).toHaveProperty('farm-progressbar');
+		});
+	});
 });

package/src/scss/Sticky-table.scss

@@ -30,6 +30,11 @@ $defaultLefts: 0, 4rem, 4rem;
 			}
 		}
 
+		&.v-data-table > .v-data-table__wrapper > table > tbody > tr > td:first-child,
+		&.v-data-table > .v-data-table__wrapper > table > thead > tr > th:first-child {
+			padding-left: 24px;
+		}
+
 		@if $columns > 0 {
 			@for $i from 1 through $columns {
 				tr td:nth-child(#{$i}),
@@ -81,6 +86,7 @@ $defaultLefts: 0, 4rem, 4rem;
 
 		th[role='columnheader']:has(> .v-data-table__checkbox) {
 			max-width: 71px !important;
+			padding-left: 24px;
 		}
 
 		.v-data-table-header tr th {
@@ -95,8 +101,15 @@ $defaultLefts: 0, 4rem, 4rem;
 		}
 
 		.v-data-table__checkbox .mdi {
-			margin-left: 18px;
-			font-size: 24px;
+			margin-left: 0;
+			font-size: 20px;
+			margin-left: -2px;
+		}
+
+		.v-input--selection-controls__input {
+			width: 20px;
+			height: 20px;
+			margin-right: 0 !important;
 		}
 	}
 }