@farm-investimentos/front-mfe-components-vue3 0.0.9 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components-vue3",
-	"version": "0.0.9",
+	"version": "0.0.11",
 	"private": false,
 	"repository": {
 		"type": "git",

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/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 };

package/src/examples/Dialog.stories.js

@@ -74,7 +74,7 @@ export const NoFooter = () => ({
 	methods: {
 		openDialog() {
 			this.$dialog
-				.confirm(
+				.alert(
 					{
 						title: 'Dialog title - No footer',
 						body: 'Dialog content for notifications without footer (must be closed programmatically)',

package/src/plugins/DialogPrompt/utils/modalHeader.ts

@@ -4,7 +4,7 @@ export default function (modal: HTMLElement, options: IDialogPromptOptions) {
 	const style = options.alert ? 'color: var(--farm-error-base)!important' : '';
 	const header = document.createElement('div');
 	header.className = 'farm-modal--header';
-	header.innerHTML = `<header>
+	header.innerHTML = `<header class="farm-dialog-header">
     <p class="farm-typography farm-typography--sm farm-typography--weight-600 farm-caption farm-caption--semiBold" style="${style}">
         ${options.title}
     </p>