@farm-investimentos/front-mfe-components 15.2.2 → 15.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "15.2.2",
+	"version": "15.3.0",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -22,11 +22,13 @@
 		"src/*"
 	],
 	"dependencies": {
-		"core-js": "^3.8.3",
+		"core-js": "^3.6.5",
 		"vue": "2.7.10",
 		"vuetify": "^2.4.5"
 	},
 	"devDependencies": {
+		"@babel/core": "7.17.9",
+		"@babel/generator": "7.17.9",
 		"@farm-investimentos/front-mfe-libs-ts": "^1.0.9",
 		"@socheatsok78/storybook-addon-vuetify": "^0.1.9",
 		"@storybook/addon-actions": "6.5.8",
@@ -44,6 +46,7 @@
 		"@vue/eslint-config-typescript": "^7.0.0",
 		"@vue/test-utils": "^1.0.3",
 		"babel-eslint": "^10.1.0",
+		"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
 		"eslint": "^6.7.2",
 		"eslint-plugin-vue": "^6.2.2",
 		"husky": "^8.0.0",

package/src/components/AlertBox/AlertBox.vue

@@ -46,10 +46,10 @@
 </template>
 
 <script lang="ts">
-import Vue, { ref, PropType } from 'vue';
+import { ref, PropType, defineComponent } from 'vue';
 import valueWatcher from './valueWatcher';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-alertbox',
 	props: {
 		/**

package/src/components/AlertReload/AlertReload.vue

@@ -18,9 +18,9 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-alert-reload',
 	props: {
 		/**

package/src/components/ButtonToggle/ButtonToggle.vue

@@ -12,9 +12,10 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue, { PropType, ref } from 'vue';
+import { PropType, ref, defineComponent } from 'vue';
 import IButtonToggle from './IButtonToggle';
-export default Vue.extend({
+
+export default defineComponent({
 	name: 'farm-button-toggle',
 	props: {
 		/**

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

@@ -3,6 +3,7 @@ import ButtonToggle from '../ButtonToggle.vue';
 
 describe('ButtonToggle component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(ButtonToggle, {
@@ -10,9 +11,25 @@ describe('ButtonToggle component', () => {
 				buttons: [],
 			},
 		});
+		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
 		expect(wrapper).toBeDefined();
 	});
+
+	test('Default buttons value', () => {
+		const wrapper1 = shallowMount(ButtonToggle, {});
+		expect(wrapper1.vm.buttons.length).toEqual(0);
+	});
+
+	describe('Methods', () => {
+		describe('setValue', () => {
+			it('Should set value', () => {
+				component.setValue(3);
+				expect(component.inputVal).toEqual(3);
+				expect(wrapper.emitted('input')[0]).toEqual([3]);
+			});
+		});
+	});
 });

package/src/components/Buttons/ConfirmButton/ConfirmButton.vue

@@ -7,9 +7,9 @@
 	</farm-btn>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-btn-confirm',
 	inheritAttrs: true,
 	props: {

package/src/components/Buttons/DangerButton/DangerButton.vue

@@ -7,9 +7,9 @@
 	</farm-btn>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-btn-danger',
 	inheritAttrs: true,
 	props: {

package/src/components/Buttons/DefaultButton/DefaultButton.vue

@@ -19,9 +19,9 @@
 	</router-link>
 </template>
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-btn',
 	inheritAttrs: true,
 

package/src/components/Buttons/ExportButton/ExportButton.vue

@@ -36,7 +36,7 @@
 	</farm-contextmenu>
 </template>
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 
 export interface IExportOption {
 	label: String;
@@ -46,7 +46,7 @@ export interface IExportOption {
 /**
  * BExport Button: standalone or menu list
  */
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-btn-export',
 	props: {
 		/**

package/src/components/Buttons/ImportButton/ImportButton.vue

@@ -10,9 +10,9 @@
 	</farm-btn>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-btn-import',
 	props: {
 		/**

package/src/components/Buttons/MultiImportButton/MultiImportButton.vue

@@ -22,14 +22,14 @@
 	</farm-contextmenu>
 </template>
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 
 export interface IImportOption {
 	title: String;
 	listenerKey: String;
 }
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-btn-multipleimport',
 	props: {
 		/**

package/src/components/Buttons/RemoveButton/RemoveButton.vue

@@ -11,10 +11,10 @@
 		{{ label }}
 	</farm-btn>
 </template>
-<script>
-import Vue from 'vue';
+<script lang="ts">
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-btn-remove',
 	props: {
 		/**

package/src/components/Buttons/ToggleButton/ToggleButton.vue

@@ -20,12 +20,12 @@
 	</farm-btn>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 /**
  * Botão de Toggle, emitindo e guardando status
  */
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-btn-toggle',
 	data: () => ({
 		open: false,

package/src/components/Card/Card.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-card',
 	inheritAttrs: true,
 	props: {

package/src/components/Card/CardContent/CardContent.vue

@@ -9,9 +9,9 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-card-content',
 	props: {
 		/**

package/src/components/Checkbox/Checkbox.vue

@@ -3,7 +3,7 @@
 		<span
 			:class="{
 				'farm-checkbox': true,
-				'farm-checkbox--checked': isChecked,
+				'farm-checkbox--checked': isChecked && (forceCheck === undefined || forceCheck),
 				'farm-checkbox--disabled': disabled,
 				'farm-checkbox--indeterminate': indeterminate,
 				'farm-checkbox--lighten': variation === 'lighten',
@@ -22,14 +22,14 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue, { computed, onBeforeMount, PropType, ref, toRefs, watch } from 'vue';
+import { computed, onBeforeMount, PropType, ref, toRefs, watch, defineComponent } from 'vue';
 import validateFormStateBuilder from '../../composition/validateFormStateBuilder';
 import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
 import validateFormMethodBuilder from '../../composition/validateFormMethodBuilder';
 import deepEqual from '../../composition/deepEqual';
 import modelValueWatcher from './modelValueWatcher';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-checkbox',
 	model: {
 		prop: 'modelValue',
@@ -92,12 +92,17 @@ export default Vue.extend({
 		 * Sets an indeterminate state for the simple checkbox
 		 */
 		indeterminate: { type: Boolean, default: false },
+		/**
+		 * Control if is check by prop
+		 */
+		checked: { type: Boolean, default: undefined },
 	},
 	setup(props, { emit }) {
 		const innerValue = ref(props.modelValue);
-		const { label, disabled, rules } = toRefs(props);
+		const { label, disabled, rules, checked } = toRefs(props);
 		const { errorBucket, valid, validatable } = validateFormStateBuilder();
 		const isTouched = ref(false);
+		const forceCheck = ref(checked.value);
 		let fieldValidator = validateFormFieldBuilder(rules.value);
 
 		const toggleValue = () => {
@@ -154,6 +159,14 @@ export default Vue.extend({
 			}
 		);
 
+		watch(
+			() => props.checked,
+			newValue => {
+				forceCheck.value = newValue;
+				innerValue.value = newValue ? props.value : null;
+			}
+		);
+
 		return {
 			innerValue,
 			label,
@@ -163,6 +176,7 @@ export default Vue.extend({
 			validatable,
 			hasError,
 			isChecked,
+			forceCheck,
 			toggleValue,
 			reset,
 			validate,

package/src/components/Chip/Chip.vue

@@ -15,9 +15,9 @@
 	</span>
 </template>
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-chip',
 	inheritAttrs: true,
 	props: {

package/src/components/ChipInviteStatus/ChipInviteStatus.vue

@@ -9,9 +9,9 @@
 	</farm-chip>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import keys from './keys';
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-chip-invite',
 	props: {
 		/**

package/src/components/Collapsible/Collapsible.vue

@@ -40,9 +40,9 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-collapsible',
 
 	props: {

package/src/components/ContextMenu/ContextMenu.vue

@@ -17,10 +17,10 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue, { ref, watch, reactive, onBeforeUnmount, toRefs } from 'vue';
+import { ref, watch, reactive, onBeforeUnmount, toRefs, defineComponent } from 'vue';
 import { calculateMainZindex, isChildOfFixedElement } from '../../helpers';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-contextmenu',
 	props: {
 		/**

package/src/components/CopyToClipboard/CopyToClipboard.vue

@@ -21,10 +21,10 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType, ref, toRefs } from 'vue';
+import { PropType, defineComponent, ref, toRefs } from 'vue';
 import { toClipboard } from '@farm-investimentos/front-mfe-libs-ts';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-copytoclipboard',
 	props: {
 		/**

package/src/components/DataTableEmptyWrapper/DataTableEmptyWrapper.vue

@@ -15,9 +15,9 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-emptywrapper',
 	props: {
 		/**

package/src/components/DataTableHeader/DataTableHeader.vue

@@ -58,9 +58,9 @@
 
 <script lang="ts">
 /* eslint-disable */
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-datatable-header',
 	props: {
 		/**

package/src/components/DataTablePaginator/DataTablePaginator.vue

@@ -58,13 +58,13 @@
 	</section>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 /**
  * Componente de paginação usado em tabelas e listas
  * com opção de itens por página
  */
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-datatable-paginator',
 	props: {
 		/**

package/src/components/DatePicker/DatePicker.vue

@@ -51,14 +51,14 @@
 	</farm-contextmenu>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { VDatePicker } from 'vuetify/lib/components/VDatePicker';
 import { defaultFormat as dateDefaultFormatter, convertDate } from '../../helpers/date';
 import { formatDatePickerHeader } from '../../helpers';
 /**
  * Componente de input com datepicker para data
  */
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-input-datepicker',
 	components: {
 		VDatePicker,

package/src/components/DialogFooter/DialogFooter.vue

@@ -29,13 +29,13 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import IExtraButton from './IExtraButton';
 
 /**
  * Footer de dialog/modal
  */
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-dialog-footer',
 	props: {
 		/**

package/src/components/DialogHeader/DialogHeader.vue

@@ -20,11 +20,11 @@
 	</header>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 /**
  * Header de dialog/modal
  */
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-dialog-header',
 	props: {
 		/**

package/src/components/Form/Form.vue

@@ -2,11 +2,11 @@
 	<form class="farm-form"><slot></slot></form>
 </template>
 <script lang="ts">
-import Vue, { onMounted, reactive, ref, getCurrentInstance } from 'vue';
+import { onMounted, reactive, ref, getCurrentInstance, defineComponent } from 'vue';
 
 type ErrorsBag = Record<number, boolean>;
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-form',
 	props: {
 		value: { type: [Boolean] },

package/src/components/Icon/Icon.vue

@@ -2,11 +2,11 @@
 	<i v-on="$listeners" v-bind="$attrs" :class="classes" :size="$props.size" ref="el" />
 </template>
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 
 const breakPoints = ['xs', 'sm', 'md', 'lg', 'xl'];
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-icon',
 	inheritAttrs: true,
 

package/src/components/IconBox/IconBox.vue

@@ -14,9 +14,9 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-icon-box',
 	props: {
 		/**

package/src/components/IdCaption/IdCaption.vue

@@ -54,8 +54,8 @@
 </template>
 
 <script lang="ts">
-import Vue, { computed, PropType } from 'vue';
-export default Vue.extend({
+import { computed, PropType, defineComponent } from 'vue';
+export default defineComponent({
 	name: 'farm-idcaption',
 	props: {
 		/**

package/src/components/Label/Label.vue

@@ -8,9 +8,9 @@
 	</label>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-label',
 	props: {
 		/**

package/src/components/List/List.vue

@@ -4,10 +4,10 @@
 	</ul>
 </template>
 <script lang="ts">
-import Vue, { onMounted, onUnmounted, ref } from 'vue';
+import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
 import { useFocus } from './composition';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-list',
 	setup(_, { emit }) {
 		const contentRef = ref<HTMLElement>();

package/src/components/ListItem/ListItem.vue

@@ -16,9 +16,9 @@
 	</li>
 </template>
 <script lang="ts">
-import Vue, { computed, PropType, toRefs } from 'vue';
+import { defineComponent, computed, PropType, toRefs } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-listitem',
 	props: {
 		to: {

package/src/components/Loader/Loader.vue

@@ -51,10 +51,10 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { calculateMainZindex } from '../../helpers';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-loader',
 	props: {
 		mode: {

package/src/components/Logger/Logger.vue

@@ -14,10 +14,10 @@
 	</section>
 </template>
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import ILoggerItem from './LoggerItem/ILoggerItem';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-logger',
 	props: {
 		/*

package/src/components/Logger/LoggerItem/LoggerItem.vue

@@ -50,11 +50,11 @@
 	</section>
 </template>
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import ILoggerItem from './ILoggerItem';
 import mappingIconKeys from './mappingIconKeys';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-logger-item',
 	props: {
 		/**

package/src/components/Logos/OriginatorLogo/OriginatorLogo.vue

@@ -2,9 +2,9 @@
 	<img :src="imgSrc" />
 </template>
 <script>
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-imglogo-originator',
 	inheritAttrs: true,
 	props: {

package/src/components/Logos/ProductLogo/ProductLogo.vue

@@ -2,9 +2,9 @@
 	<img :src="imgSrc" />
 </template>
 <script>
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-imglogo-product',
 	inheritAttrs: true,
 	props: {

package/src/components/MainFilter/MainFilter.vue

@@ -28,9 +28,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'farm-form-mainfilter',
 	props: {
 		/**