@farm-investimentos/front-mfe-components-vue3 0.6.0 → 0.6.1

package/src/components/MainFilter/MainFilter.vue

@@ -1,6 +1,9 @@
 <template>
 	<farm-row :class="{ 'justify-end': justifyEnd === true }">
-		<farm-col v-if="hasInitialInput" :md="fullWidth ? 12 : 6">
+		<farm-col
+			v-if="hasInitialInput"
+			:md="fullWidth ? 12 : 6"
+		>
 			<farm-label :for="elementId">
 				{{ !hasSlotData ? label : '' }}
 				<slot v-if="hasSlotData"></slot>
@@ -9,11 +12,19 @@
 						{{ tooltip }}
 					</farm-caption>
 					<template v-slot:activator>
-						<farm-icon size="sm" color="gray">help-circle</farm-icon>
+						<farm-icon
+							size="sm"
+							color="gray"
+							>help-circle</farm-icon
+						>
 					</template>
 				</farm-tooltip>
 			</farm-label>
-			<farm-textfield-v2 v-model="inputValue" :id="elementId" @keyup="onKeyUp" />
+			<farm-textfield-v2
+				v-model="inputValue"
+				:id="elementId"
+				@keyup="onKeyUp"
+			/>
 		</farm-col>
 		<farm-btn
 			v-if="hasExtraFilters"
@@ -28,7 +39,7 @@
 </template>
 
 <script lang="ts">
-
+import { computed, ref, toRefs, getCurrentInstance } from 'vue';
 
 export default {
 	name: 'farm-form-mainfilter',
@@ -88,34 +99,37 @@ export default {
 			default: false,
 		},
 	},
+	setup(props) {
+		const { showFilters, initialValue } = toRefs(props);
+
+		const internalInstance = getCurrentInstance().proxy;
+
+		const timer = ref<Number>(null);
+
+		const inputValue = ref(initialValue.value);
+
+		const extraFiltersBtnIcon = computed(() =>
+			showFilters.value ? 'filter-off-outline' : 'filter-outline'
+		);
+		const extraFiltersBtnLabel = computed(
+			() => `${showFilters.value ? 'Esconder' : 'Ver'} Filtros`
+		);
+
+		const hasSlotData = computed(() => internalInstance.$slots.default);
+
+		return { inputValue, extraFiltersBtnIcon, extraFiltersBtnLabel, timer, hasSlotData };
+	},
 
 	watch: {
 		initialValue(newValue: string) {
 			this.inputValue = newValue;
 		},
 	},
-	computed: {
-		hasSlotData() {
-			return this.$slots.default;
-		},
-		extraFiltersBtnLabel() {
-			return `${this.showFilters ? 'Esconder' : 'Ver'} Filtros`;
-		},
-		extraFiltersBtnIcon() {
-			return this.showFilters ? 'filter-off' : 'filter';
-		},
-	},
-	data() {
-		return {
-			timer: null,
-			inputValue: this.initialValue,
-		};
-	},
 	methods: {
 		onFilterClick() {
 			this.$emit('onClick');
 		},
-		isInvalidKey(keyCode: Number) {
+		isInvalidKey(keyCode: number) {
 			return (
 				(keyCode < 48 && keyCode !== 8 && keyCode !== 46) ||
 				(keyCode > 90 && keyCode < 96 && keyCode !== 91) ||

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

@@ -36,11 +36,11 @@ describe('MainFilter component', () => {
 		});
 
 		it('get extraFiltersBtnIcon', async () => {
-			expect(component.extraFiltersBtnIcon).toEqual('filter');
+			expect(component.extraFiltersBtnIcon).toEqual('filter-outline');
 			await wrapper.setProps({
 				showFilters: true,
 			});
-			expect(component.extraFiltersBtnIcon).toEqual('filter-off');
+			expect(component.extraFiltersBtnIcon).toEqual('filter-off-outline');
 		});
 	});
 });

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

@@ -9,7 +9,7 @@ describe('Switcher component', () => {
 	beforeEach(() => {
 		wrapper = shallowMount(Switcher, {
 			propsData: {
-				value: false,
+				modelValue: false,
 			},
 		});
 		component = wrapper.vm;

package/src/components/TextArea/TextArea.scss

@@ -36,7 +36,14 @@
 	}
 
 	&--disabled {
+		.farm-textarea--textarea {
+			background-color: var(--farm-neutral-lighten);
+			border-color: var(--farm-gray-lighten);
+			color: var(--farm-bw-black-30);
+		}
 		textarea {
+			background-color: var(--farm-neutral-lighten);
+			border-color: var(--farm-gray-lighten);
 			color: var(--farm-bw-black-30);
 		}
 	}

package/src/components/TextArea/TextArea.stories.js

@@ -52,9 +52,11 @@ export const Disabled = () => ({
 			v: 'input text',
 		};
 	},
-	template: `<div style="width: 480px">
+	template: `<farm-row>
+	<farm-col md="4">
 		<farm-textarea v-model="v" disabled />
-	</div>`,
+		</farm-col>
+	</farm-row>`,
 });
 
 export const Readonly = () => ({
@@ -133,8 +135,8 @@ export const Reset = () => ({
 			this.$refs.inputValidatable.reset();
 		},
 	},
-	template: `<div style="width: 480px">
-
+	template: `<farm-row>
+		<farm-col md="4">
 		<farm-label>Not Required</farm-label>
 		<farm-textarea v-model="v" ref="input" />
 		
@@ -142,6 +144,6 @@ export const Reset = () => ({
 		<farm-textarea v-model="v" ref="inputValidatable" :rules="[rules.required]" />
 		
 		<farm-btn @click="reset">reset</farm-btn>
-
-	</div>`,
+		</farm-col>
+	</farm-row>`,
 });

package/src/components/TextFieldV2/TextFieldV2.stories.js

@@ -46,7 +46,7 @@ export const Primary = () => ({
 		</farm-label>
 		<farm-textfield-v2 id="input-primary" v-model="v" />
 		v-model: {{ v }}
-		<farm-col>
+		</farm-col>
 	</farm-row>`,
 });
 
@@ -257,7 +257,7 @@ export const Uppercase = () => ({
 	template: `<farm-row>
 	<farm-col md="4">
 		<farm-textfield-v2 id="input-uppercase" v-model="v" uppercase/>
-	<farm-col>
+	</farm-col>
 	</farm-row>`,
 });
 
@@ -271,6 +271,6 @@ export const Ellipsed = () => ({
 		<farm-col md="2">
 		<farm-textfield-v2 id="input-primary-ellipsed" v-model="v" ellipsed />
 		v-model: {{ v }}
-		<farm-col>
+		</farm-col>
 	</farm-row>`,
 });