@farm-investimentos/front-mfe-components-vue3 0.0.8 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components-vue3",
-	"version": "0.0.8",
+	"version": "0.0.10",
 	"private": false,
 	"repository": {
 		"type": "git",
@@ -78,7 +78,7 @@
 		"react-dom": "^18.2.0",
 		"sass": "~1.32.0",
 		"sass-loader": "10.4.1",
-		"storybook": "7.5.0",
+		"storybook": "^7.5.0",
 		"ts-jest": "^29.0.0",
 		"typescript": "~4.1.5",
 		"vite": "^4.4.9",

package/src/components/Buttons/DefaultButton/DefaultButton.scss

@@ -32,7 +32,7 @@ $butonSizes: (
 	height: 36px;
 	min-width: 64px;
 	padding: 0 16px;
-
+	cursor: pointer;
 	&.farm-btn--full {
 		width: 100%;
 	}

package/src/components/ContextMenu/ContextMenu.vue

@@ -96,7 +96,7 @@ export default {
 				}) && stayOpen.value;
 
 			if (activator && !activator.value.contains(event.target) && !isInside) {
-				emit('input', false);
+				emit('update:modelValue', false);
 				inputValue.value = false;
 			}
 		};

package/src/components/DataTableHeader/DataTableHeader.vue

@@ -94,7 +94,7 @@ export default {
 		/**
 		 * v-model for data-table-select
 		 */
-		value: {
+		modelValue: {
 			default: false,
 		},
 		/**
@@ -114,10 +114,10 @@ export default {
 	computed: {
 		inputVal: {
 			get() {
-				return this.value;
+				return this.modelValue;
 			},
 			set(val) {
-				this.$emit('input', val);
+				this.$emit('update:modelValue', val);
 			},
 		},
 	},

package/src/components/DialogHeader/DialogHeader.scss

@@ -3,15 +3,15 @@
 .farm-dialog-header__close {
 	position: absolute;
 	margin-top: 0;
+	right: 4px;
 	font-size: 16px;
 	transition: all 0.4s;
-	right: 0;
 	&:hover {
 		opacity: 0.8;
 	}
 }
 
-header {
+header.farm-dialog-header {
 	font-size: 12px;
 	padding: 6px 16px;
 	background-color: #fff;

package/src/components/DialogHeader/DialogHeader.vue

@@ -1,7 +1,16 @@
 <template>
-	<header>
-		<farm-icon v-if="iconTitle" size="16px" color="primary" class="mr-2">{{ iconTitle }}</farm-icon>
-		<farm-caption v-if="title" variation="semiBold">
+	<header class="farm-dialog-header">
+		<farm-icon
+			v-if="iconTitle"
+			size="16px"
+			color="primary"
+			class="mr-2"
+			>{{ iconTitle }}</farm-icon
+		>
+		<farm-caption
+			v-if="title"
+			variation="semiBold"
+		>
 			{{ title }}
 		</farm-caption>
 
@@ -15,12 +24,16 @@
 			title="Fechar"
 			@click="onClose"
 		>
-			<farm-icon role="button" size="24px"> window-close </farm-icon>
+			<farm-icon
+				role="button"
+				size="24px"
+			>
+				window-close
+			</farm-icon>
 		</farm-btn>
 	</header>
 </template>
 <script lang="ts">
-
 /**
  * Header de dialog/modal
  */
@@ -49,10 +62,13 @@ export default {
 			default: true,
 		},
 	},
-	methods: {
-		onClose() {
-			this.$emit('onClose', {});
-		},
+	setup(_, { emit }) {
+		const onClose = () => {
+			emit('onClose', {});
+		};
+		return {
+			onClose,
+		};
 	},
 };
 </script>

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

@@ -8,8 +8,8 @@ describe('DialogHeader component', () => {
 	beforeEach(() => {
 		wrapper = shallowMount(DialogHeader, {
 			propsData: {
-				title: ''
-			}
+				title: '',
+			},
 		});
 	});
 
@@ -22,4 +22,11 @@ describe('DialogHeader component', () => {
 			expect(wrapper.element).toBeDefined();
 		});
 	});
+
+	describe('methods', () => {
+		it('should handle close', () => {
+			wrapper.vm.onClose();
+			expect(wrapper.emitted().onClose).toBeDefined();
+		});
+	});
 });

package/src/components/RadioGroup/RadioGroup.vue

@@ -24,7 +24,7 @@ export default {
 		/**
 		 * v-model
 		 */
-		value: {
+		modelValue: {
 			required: true,
 		},
 		errorMessage: String,
@@ -38,7 +38,7 @@ export default {
 	},
 	setup(props, { emit }) {
 		const { rules } = toRefs(props);
-		const innerValue = ref(props.value);
+		const innerValue = ref(props.modelValue);
 		const { errorBucket, valid, validatable } = validateFormStateBuilder();
 		const isTouched = ref(false);
 
@@ -51,10 +51,10 @@ export default {
 		const showErrorText = computed(() => hasError.value && isTouched.value);
 
 		watch(
-			() => props.value,
+			() => props.modelValue,
 			() => {
 				isTouched.value = true;
-				innerValue.value = props.value;
+				innerValue.value = props.modelValue;
 				validate(innerValue.value);
 			}
 		);
@@ -73,7 +73,7 @@ export default {
 
 		const reset = () => {
 			innerValue.value = null;
-			emit('input', innerValue.value);
+			emit('update:modelValue', innerValue.value);
 		};
 
 		onBeforeMount(() => {

package/src/components/SelectAutoComplete/SelectAutoComplete.vue

@@ -103,7 +103,7 @@ export default defineComponent({
 		/**
 		 * v-model binding
 		 */
-		value: { type: [String, Number, Array], default: '' },
+		modelValue: { type: [String, Number, Array], default: '' },
 		hint: {
 			type: String,
 			default: null,
@@ -280,7 +280,7 @@ export default defineComponent({
 		});
 		
 		watch(
-			() => props.value,
+			() => props.modelValue,
 			newValue => {
 				innerValue.value = newValue;
 				errorBucket.value = [];
@@ -296,7 +296,7 @@ export default defineComponent({
 				}
 				validate(newValue);
 				updateSelectedTextValue();
-				emit('input', newValue);
+				emit('update:modelValue', newValue);
 			}
 		);
 
@@ -315,7 +315,7 @@ export default defineComponent({
 				isTouched.value = true;
 				isBlured.value = true;
 				validate(innerValue.value);
-				emit('input', innerValue.value);
+				emit('update:modelValue', innerValue.value);
 			}
 		);
 
@@ -356,7 +356,7 @@ export default defineComponent({
 				innerValue.value = [];
 				return;
 			}
-			emit('input', innerValue.value);
+			emit('update:modelValue', innerValue.value);
 		};
 
 		const onBlur = (event: Event) => {

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

@@ -89,7 +89,7 @@ describe('SelectAutoComplet component', () => {
 						{ value: 2, text: 'value 2' },
 						{ value: 3, text: 'value 3' },
 					],
-					value: [0],
+					modelValue: [0],
 				});
 
 				component.addLabelToMultiple();
@@ -104,7 +104,7 @@ describe('SelectAutoComplet component', () => {
 						{ value: 2, text: 'value 2' },
 						{ value: 3, text: 'value 3' },
 					],
-					value: [0, 1],
+					modelValue: [0, 1],
 				});
 
 				component.addLabelToMultiple();
@@ -120,7 +120,7 @@ describe('SelectAutoComplet component', () => {
 						{ value: 2, text: 'value 2' },
 						{ value: 3, text: 'value 3' },
 					],
-					value: [0, 1, 2],
+					modelValue: [0, 1, 2],
 				});
 
 				component.addLabelToMultiple();

package/src/components/Switcher/Switcher.vue

@@ -6,12 +6,18 @@
 		@click="toggle"
 		@keydown.space.prevent="toggle"
 	>
-		<span class="farm-switch__background" :class="backgroundStyles" />
-		<span class="farm-switch__indicator" :style="indicatorStyles" />
+		<span
+			class="farm-switch__background"
+			:class="backgroundStyles"
+		/>
+		<span
+			class="farm-switch__indicator"
+			:style="indicatorStyles"
+		/>
 	</div>
 </template>
 <script lang="ts">
-import {  PropType, computed, ref, watch } from 'vue';
+import { PropType, computed, ref, watch } from 'vue';
 
 export default {
 	name: 'farm-switcher',
@@ -39,7 +45,7 @@ export default {
 		/**
 		 * v-model binding
 		 */
-		value: {
+		modelValue: {
 			type: Boolean,
 			required: true,
 		},
@@ -61,14 +67,14 @@ export default {
 		const isDisabled = ref(props.disabled);
 
 		const backgroundStyles = computed(() => ({
-			'farm-switch--selected': props.value && !isDisabled.value,
-			'farm-switch--idle': !props.value && !isDisabled.value,
-			'farm-switch--disabled-on': props.value && isDisabled.value,
-			'farm-switch--disabled-off': !props.value && isDisabled.value,
+			'farm-switch--selected': props.modelValue && !isDisabled.value,
+			'farm-switch--idle': !props.modelValue && !isDisabled.value,
+			'farm-switch--disabled-on': props.modelValue && isDisabled.value,
+			'farm-switch--disabled-off': !props.modelValue && isDisabled.value,
 		}));
 
 		const indicatorStyles = computed(() => ({
-			transform: props.value ? 'translateX(16px)' : 'translateX(0)',
+			transform: props.modelValue ? 'translateX(16px)' : 'translateX(0)',
 		}));
 
 		watch(
@@ -82,7 +88,7 @@ export default {
 			if (isDisabled.value) {
 				return false;
 			}
-			emit('input', !props.value);
+			emit('update:modelValue', !props.modelValue);
 		};
 
 		return { isDisabled, backgroundStyles, indicatorStyles, toggle };