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

package/src/components/Radio/Radio.vue

@@ -14,7 +14,7 @@
 			v-bind="$attrs"
 			@click="onClick"
 		/>
-		<farm-label v-if="label" class="ml-2" :for="id">
+		<farm-label v-if="label" :for="id">
 			{{ label }}
 		</farm-label>
 	</div>
@@ -50,6 +50,8 @@ export default Vue.extend({
 			type: String as PropType<
 				| 'primary'
 				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
 				| 'neutral'
 				| 'info'
 				| 'success'

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -47,8 +47,6 @@
 				readonly
 				:id="inputId"
 				:rules="required ? [requiredRule] : []"
-				@click="openDatepicker"
-				@onClickIcon="openDatepicker"
 			/>
 		</template>
 	</farm-contextmenu>

package/src/components/ResourceMetaInfo/ResourceMetaInfo.vue

@@ -1,28 +1,28 @@
 <template>
 	<div class="farm-resource-metainfo">
 		<div v-if="showCreate">
-			<farm-icon color="gray" size="sm">calendar-blank</farm-icon>
-			<farm-caption color="gray" variation="regular">
+			<farm-icon color="black" variation="40" size="sm">calendar-blank</farm-icon>
+			<farm-caption color="black" color-variation="40" variation="regular">
 				Data de cadastro:
-				<farm-caption color="gray" variation="medium" tag="span">
+				<farm-caption color="black" color-variation="40" variation="medium" tag="span">
 					{{ formattedCreatedAt }}
 				</farm-caption>
 			</farm-caption>
 		</div>
 		<div v-if="showUpdate">
-			<farm-icon color="gray" size="sm">history</farm-icon>
+			<farm-icon color="black" variation="40" size="sm">history</farm-icon>
 
-			<farm-caption color="gray" variation="regular">
+			<farm-caption color="black" color-variation="40" variation="regular">
 				Última atualização feita por
-				<farm-caption color="gray" variation="medium" tag="span">
+				<farm-caption color="black" color-variation="40" variation="medium" tag="span">
 					{{ formattedUsername }}
 				</farm-caption>
 				, dia
-				<farm-caption color="gray" variation="medium" tag="span">
+				<farm-caption color="black" color-variation="40" variation="medium" tag="span">
 					{{ formattedUpdatedAt }}
 				</farm-caption>
 				às
-				<farm-caption color="gray" variation="medium" tag="span">
+				<farm-caption color="black" color-variation="40" variation="medium" tag="span">
 					{{ formattedUpdatedHours }}
 				</farm-caption>
 			</farm-caption>

package/src/components/Select/Select.scss

@@ -28,6 +28,10 @@
 	margin-right: 8px;
 }
 
+:deep(.farm-listitem:hover .farm-typography) {
+	color: var(--farm-primary-base);
+}
+
 :deep(.farm-listitem:hover .farm-checkbox .farm-icon) {
 	color: var(--farm-primary-lighten);
 }

package/src/components/Select/Select.vue

@@ -7,6 +7,7 @@
 			'farm-textfield--blured': isBlured,
 			'farm-textfield--error': hasError,
 			'farm-textfield--disabled': disabled,
+			'farm-textfield--focused': isFocus || isVisible,
 			'farm-textfield--hiddendetails': hideDetails,
 		}"
 		v-if="!readonly && !disabled"
@@ -81,7 +82,7 @@
 </template>
 
 <script lang="ts">
-import Vue, { computed, onBeforeMount, PropType, toRefs, watch } from 'vue';
+import Vue, { computed, onBeforeMount, PropType, ref, toRefs, watch } from 'vue';
 import validateFormStateBuilder from '../../composition/validateFormStateBuilder';
 import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
 import validateFormMethodBuilder from '../../composition/validateFormMethodBuilder';
@@ -250,6 +251,9 @@ export default Vue.extend({
 			newValue => {
 				innerValue.value = newValue;
 				errorBucket.value = [];
+				if(multiple.value && newValue === null || (Array.isArray(newValue) && newValue.length === 0)) {
+					multipleValues.value = [];
+				}
 				validate(newValue);
 				updateSelectedTextValue();
 				emit('input', newValue);
@@ -396,6 +400,9 @@ export default Vue.extend({
 			);
 		};
 
+		const contextmenu = ref(null);
+
+
 		return {
 			items,
 			innerValue,
@@ -410,6 +417,7 @@ export default Vue.extend({
 			isVisible,
 			customId,
 			showErrorText,
+			contextmenu,
 			validate,
 			reset,
 			selectItem,

package/src/components/Stepper/StepperHeader/StepperHeader.scss

@@ -17,7 +17,7 @@ $step-height: 64px;
 		flex-direction: column;
 		align-items: center;
 		justify-items: center;
-		color: var(--v-gray-lighten1);
+		color: var(--farm-bw-black-5);
 		font-size: 14px;
 		font-weight: 700;
 
@@ -26,7 +26,7 @@ $step-height: 64px;
 		}
 
 		&.stepper__header-step--current {
-			@include stepperHeaderStepColor(#5089de);
+			@include stepperHeaderStepColor(var(--farm-info-base));
 		}
 
 		&.stepper__header-step--error {
@@ -36,7 +36,7 @@ $step-height: 64px;
 		&.stepper__header-step--next {
 			.farm-icon,
 			.farm-icon__number {
-				color: var(--farm-gray-base);
+				color: var(--farm-bw-black-50);
 			}
 		}
 
@@ -54,7 +54,7 @@ $step-height: 64px;
 
 		border: none;
 		margin: 16px -16px 0;
-		background: var(--farm-gray-base);
+		background: var(--farm-bw-black-5);
 
 		&.stepper__divider--previous {
 			background: var(--farm-primary-base);
@@ -96,7 +96,7 @@ $step-height: 64px;
 			height: 32px;
 			margin: -24px 0 8px 16px;
 			width: 1px;
-			background-color: var(----farm-gray-lighten);
+			background-color: var(--farm-bw-black-5);
 
 			&.stepper__divider--previous {
 				background-color: var(--farm-primary-base);
@@ -109,7 +109,7 @@ $step-height: 64px;
 
 .farm-icon,
 .farm-icon__number {
-	border: 1px solid var(--farm-gray-base);
+	border: 1px solid var(--farm-bw-black-5);
 	border-radius: 50%;
 	width: 32px;
 	height: 32px;
@@ -122,6 +122,6 @@ $step-height: 64px;
 
 	&:before {
 		font-size: 16px;
-		color: var(--v-gray-lighten1);
+		color: var(--farm-bw-black-50);
 	}
 }

package/src/components/Stepper/StepperHeader/StepperHeader.vue

@@ -64,42 +64,41 @@ export default Vue.extend({
 		 */
 		errorCurrentStepStatus: { type: Boolean, default: false },
 	},
-	methods: {
-		isStepCurrent(index: number): boolean {
-			return this.currentStep === index + 1;
-		},
-		isStepPrevious(index: number): boolean {
-			return this.currentStep > index + 1;
-		},
-		isStepError(index: number): boolean {
-			return this.currentStep === index + 1 && this.errorCurrentStepStatus;
-		},
-		hasDivider(index: number): boolean {
-			return index < this.steps.length - 1;
-		},
-		isStepPreviousToCurrent(index: number): boolean {
-			return (
-				index + 2 == this.currentStep &&
-				this.isStepCurrent(index + 1) &&
-				!this.isStepError(index + 1)
-			);
-		},
-		isStepPreviousToError(index: number): boolean {
-			return (
-				index + 2 == this.currentStep &&
-				this.isStepCurrent(index + 1) &&
-				this.isStepError(index + 1)
-			);
-		},
-		isStepNext(index: number): boolean {
-			return index + 1 > this.currentStep;
-		},
-		isStepErrorToNext(index: number): boolean {
-			return this.errorCurrentStepStatus && index + 1 === this.currentStep;
-		},
-		isStepCurrentToNext(index: number): boolean {
-			return !this.errorCurrentStepStatus && index + 1 === this.currentStep;
-		},
+	setup(props) {
+		const isStepCurrent = (index: number) => props.currentStep === index + 1;
+
+		const isStepPrevious = (index: number) => props.currentStep > index + 1;
+
+		const isStepError = (index: number) =>
+			props.currentStep === index + 1 && props.errorCurrentStepStatus;
+
+		const hasDivider = (index: number) => index < props.steps.length - 1;
+
+		const isStepPreviousToCurrent = (index: number) =>
+			index + 2 === props.currentStep && isStepCurrent(index + 1) && !isStepError(index + 1);
+
+		const isStepPreviousToError = (index: number) =>
+			index + 2 === props.currentStep && isStepCurrent(index + 1) && isStepError(index + 1);
+
+		const isStepNext = (index: number) => index + 1 > props.currentStep;
+
+		const isStepErrorToNext = (index: number) =>
+			props.errorCurrentStepStatus && index + 1 === props.currentStep;
+
+		const isStepCurrentToNext = (index: number) =>
+			!props.errorCurrentStepStatus && index + 1 === props.currentStep;
+
+		return {
+			isStepCurrent,
+			isStepPrevious,
+			isStepError,
+			isStepPreviousToCurrent,
+			isStepPreviousToError,
+			isStepNext,
+			isStepErrorToNext,
+			isStepCurrentToNext,
+			hasDivider,
+		};
 	},
 });
 </script>

package/src/components/Switcher/Switcher.scss

@@ -1,15 +1,25 @@
-.farm-switch--selected {
-    background-color: var(--farm-primary-base);
+@import '../../configurations/theme-colors';
+
+
+
+.farm-switch {
+    @each $color in $theme-colors-list {
+        &#{'[color=' + $color + ']'} {
+            .farm-switch--selected {
+                background-color: themeColor($color);
+            }
+
+            .farm-switch--disabled-on {
+                background-color: rgba(themeColor($color), 0.27);
+            }
+        }
+    }
 }
 
 .farm-switch--idle {
     background-color: var(--farm-neutral-base);
 }
 
-.farm-switch--disabled-on {
-    background-color: var(--farm-primary-lighten);
-}
-
 .farm-switch--disabled-off {
     background-color: var(--farm-neutral-lighten);
 }
@@ -17,7 +27,7 @@
 .farm-switch {
     display: inline-block;
     position: relative;
-    cursor: pointer;
+
     width: 24px;
     height: 16px;
     border-radius: 9999px;
@@ -30,6 +40,13 @@
         display: block;
     }
 
+    cursor: pointer;
+
+    &:has(.farm-switch--disabled-on),
+    &:has(.farm-switch--disabled-off) {
+        cursor: default;
+    }
+
 }
 
 .farm-switch__background {
@@ -38,7 +55,6 @@
     margin-top: 0;
     height: 12px;
     width: 100%;
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
     transition: background-color .4s ease;
 }
 

package/src/components/Switcher/Switcher.stories.js

@@ -1,4 +1,6 @@
 import Switch from './Switcher';
+import baseThemeColors from '../../configurations/_theme-colors-base.scss';
+const colors = Object.keys(baseThemeColors);
 
 export default {
 	title: 'Form/Switcher',
@@ -58,3 +60,34 @@ export const OffDisabled = () => ({
 	<farm-switcher v-model="selectedValue" block :disabled="true" />
 	</div>`,
 });
+
+export const Colors = () => ({
+	data() {
+		return {
+			colors,
+			selectedValue: true,
+		};
+	},
+	template: `
+	<farm-row>
+		<farm-col
+			cols="12"
+			md="3"
+			v-for="color in colors"
+			:key="'color_' + color"
+		>
+			<farm-bodytext>{{ color }}</farm-bodytext>
+			<farm-switcher
+				v-model="selectedValue"
+				:color="color"
+			/>
+			<farm-caption>Desabilitado</farm-caption>
+			<farm-switcher
+				disabled
+				v-model="selectedValue"
+				:color="color"
+			/>
+		</farm-col>
+
+	</farm-row>`,
+});

package/src/components/Switcher/Switcher.vue

@@ -2,6 +2,7 @@
 	<div
 		:class="{ 'farm-switch': true }"
 		role="checkbox"
+		v-bind="$props"
 		@click="toggle"
 		@keydown.space.prevent="toggle"
 	>
@@ -10,11 +11,31 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { PropType } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-switcher',
 	props: {
+		/**
+		 * Color
+		 */
+		color: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+				| 'gray'
+			>,
+			default: 'primary',
+		},
 		/**
 		 * v-model binding
 		 */
@@ -37,8 +58,8 @@ export default Vue.extend({
 			return {
 				'farm-switch--selected': this.value && !this.isDisabled,
 				'farm-switch--idle': !this.value && !this.isDisabled,
-				'farm-switch--disabled-on': this.value && this.isDisabled,   
-				'farm-switch--disabled-off': !this.value && this.isDisabled,   
+				'farm-switch--disabled-on': this.value && this.isDisabled,
+				'farm-switch--disabled-off': !this.value && this.isDisabled,
 			};
 		},
 		indicatorStyles() {

package/src/components/TableContextMenu/TableContextMenu.scss

@@ -3,12 +3,7 @@
 		pointer-events: none;
 	}
 }
-
-.farm-listitem {
-	padding: auto 8px;
-
-	.farm-icon {
-		vertical-align: sub;
-		margin-right: 8px;
-	}
-}
+:deep(.farm-listitem .farm-icon) {
+	vertical-align: sub;
+	margin-right: 8px;
+}

package/src/components/TableContextMenu/TableContextMenu.stories.js

@@ -50,6 +50,8 @@ export const Multi = () => ({
 				{ label: 'Novo', icon: { type: 'open-in-new' } },
 				{ label: 'Editar', icon: { color: 'secondary', type: 'open-in-new' } },
 				{ label: 'Remover', icon: { color: 'error', type: 'delete' } },
+				{ label: 'Outro', icon: { color: 'black', type: 'cog' } },
+				{ label: 'Book', icon: { color: 'gray', type: 'book' } },
 			],
 		};
 	},

package/src/components/TableContextMenu/TableContextMenu.vue

@@ -6,8 +6,8 @@
 		<template v-slot:activator>
 			<farm-btn
 				icon
-				title="Abrir opções"
-				color="secondary"
+				title="Ver opções"
+				color="secondary-green"
 				:disabled="disabled"
 				@click="toggleValue"
 			>
@@ -26,7 +26,7 @@
 				<farm-icon v-if="item.icon" size="sm" :color="item.icon.color || 'primary'">
 					{{ item.icon.type }}
 				</farm-icon>
-				<farm-caption bold tag="span">{{ item.label }}</farm-caption>
+				<farm-caption bold tag="span" :color="item.icon.color || 'primary'">{{ item.label }}</farm-caption>
 			</farm-listitem>
 		</farm-list>
 	</farm-contextmenu>
@@ -75,8 +75,9 @@ export default Vue.extend({
 				this.$emit(handler);
 			}
 		},
-		toggleValue() {
+		toggleValue(event: MouseEvent) {
 			this.value = !this.value;
+			event.stopPropagation();
 		},
 	},
 });

package/src/components/Tabs/Tabs.scss

@@ -0,0 +1,69 @@
+@import '../../configurations/theme-colors';
+
+.tabs {
+	display: flex;
+	margin-bottom: -1px;
+
+	&__tab {
+		border-bottom: 1px solid var(--farm-primary-lighten);
+		cursor: pointer;
+		display: inline-flex;
+		padding: 18px 24px 14px;
+		height: 54px;
+		transition: all 0.5s ease;
+		&:hover {
+			background-color: transparentize(themeColor('primary', 'base'), 0.86);
+
+			div.rounded-circle {
+				opacity: 0.86;
+			}
+		}
+
+		span {
+			font-weight: 400;
+		}
+
+		&--selected {
+
+			border-bottom: 4px solid var(--farm-primary-base);
+
+			span {
+				font-size: 14px;
+				font-weight: 500;
+			}
+		}
+	}
+
+	&--disabled {
+		.tabs__tab {
+			cursor: default;
+
+			&:hover {
+				background-color: transparent;
+			}
+
+			&--selected {
+				&:hover {
+					background-color: transparent;
+				}
+			}
+		}
+	}
+}
+
+.farm-tabs {
+	border-bottom: 1px solid var(--farm-primary-lighten);
+}
+
+
+div.rounded-circle {
+	background-color: var(--farm-gray-lighten);
+	width: 24px;
+	height: 24px;
+	margin-top: -2px;
+	margin-left: -2px;
+
+	&.is-selected {
+		background-color: var(--farm-primary-base);
+	}
+}

package/src/components/Tabs/Tabs.stories.js

@@ -1,9 +1,9 @@
 import Tabs from './Tabs.vue';
 
 export default {
-    title: 'Display/Tabs',
-    component: Tabs,
-    parameters: {
+	title: 'Display/Tabs',
+	component: Tabs,
+	parameters: {
 		docs: {
 			description: {
 				component: `Tabs<br />
@@ -17,5 +17,52 @@ export default {
 };
 
 export const Primary = () => ({
-    template: '<farm-tabs />',
+	data() {
+		return {
+			v: 'Seleção',
+		};
+	},
+	methods: {
+		updateValue(value) {
+			this.v = value.name;
+		},
+	},
+	template: `<div>
+				<farm-tabs @update="updateValue" /> 
+				<p class="mt-2">selected: {{v}}</p>
+			</div>`,
+});
+
+export const WithoutCounter = () => ({
+	data() {
+		return {
+			v: 'Seleção',
+		};
+	},
+	methods: {
+		updateValue(value) {
+			this.v = value.name;
+		},
+	},
+	template: `<div>
+				<farm-tabs :showCounter="false" @update="updateValue" /> 
+				<p class="mt-2">selected: {{v}}</p>
+			</div>`,
+});
+
+export const Disabled = () => ({
+	data() {
+		return {
+			v: 'Seleção',
+		};
+	},
+	methods: {
+		updateValue(value) {
+			this.v = value.name;
+		},
+	},
+	template: `<div>
+				<farm-tabs :showCounter="false" :allow-user-change="false" @update="updateValue" /> 
+				<p class="mt-2">selected: {{v}}</p>
+			</div>`,
 });