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

package/src/components/Typography/Small/Small.vue

@@ -11,11 +11,11 @@
 	</farm-typography>
 </template>
 <script lang="ts">
-import Vue, { computed, ref, watch, toRefs, PropType } from 'vue';
+import { defineComponent, computed, ref, watch, toRefs, PropType } from 'vue';
 
 import { Keys } from './configurations';
 
-export default Vue.extend({
+export default defineComponent({
 	inheritAttrs: true,
 	name: 'farm-bodysmall',
 	props: {

package/src/components/Typography/Subtitle/Subtitle.vue

@@ -11,11 +11,11 @@
 	</farm-typography>
 </template>
 <script lang="ts">
-import Vue, { computed, ref, watch, toRefs, PropType } from 'vue';
+import { defineComponent, computed, ref, watch, toRefs, PropType } from 'vue';
 
 import { Keys } from './configurations';
 
-export default Vue.extend({
+export default defineComponent({
 	inheritAttrs: true,
 	name: 'farm-subtitle',
 	props: {

package/src/components/Typography/Typography.vue

@@ -18,11 +18,11 @@
 	</component>
 </template>
 <script lang="ts">
-import Vue, { computed, PropType, ref, toRefs } from 'vue';
+import { defineComponent, computed, PropType, ref, toRefs } from 'vue';
 import breakPoints from '../../configurations/sizes';
 import typographyHtmlTags from '../../configurations/typographyHtmlTags';
 
-export default Vue.extend({
+export default defineComponent({
 	inheritAttrs: true,
 	name: 'farm-typography',
 	props: {

package/src/components/ValueCaption/ValueCaption.vue

@@ -14,8 +14,9 @@
 </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-valuecaption',
 	props: {
 		/**

package/src/components/layout/Box/Box.vue

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

package/src/components/layout/Col/Col.vue

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

package/src/components/layout/Container/Container.vue

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

package/src/components/layout/ContainerFooter/ContainerFooter.vue

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

package/src/components/layout/Line/Line.vue

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

package/src/components/layout/Row/Row.vue

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

package/src/composition/__tests__/validateFormFieldBuilder.spec.js

@@ -5,4 +5,30 @@ describe('validateFormFieldBuilder', () => {
 		const r = validateFormFieldBuilder();
 		expect(typeof r).toEqual('function');
 	});
+
+	it('Should run validations', () => {
+		const rules = [() => true, () => true];
+		const r = validateFormFieldBuilder(rules)(1);
+		expect(r.length).toEqual(0);
+		expect(r instanceof Array).toBeTruthy();
+	});
+
+	it('Should run validations and have some error', () => {
+		const rules = [() => true, () => false, () => false];
+		const r = validateFormFieldBuilder(rules)(1);
+		expect(r.length).toEqual(2);
+		expect(r instanceof Array).toBeTruthy();
+	});
+
+	it('Should run validations and have some error', () => {
+		const rules = [() => true, () => false, () => false];
+		const r = validateFormFieldBuilder(rules)(1);
+		expect(r.length).toEqual(2);
+		expect(r instanceof Array).toBeTruthy();
+	});
+
+	it('Should throw error', () => {
+		const rules = [() => 123];
+		expect(() => validateFormFieldBuilder(rules)(1)).toThrowError();
+	});
 });

package/src/composition/validateFormFieldBuilder.ts

@@ -8,9 +8,8 @@ export default function (rules) {
 			if (valid === false || typeof valid === 'string') {
 				innerErrorBucket.push(valid || '');
 			} else if (typeof valid !== 'boolean') {
-				console.error(
-					`Rules should return a string or boolean, received '${typeof valid}' instead`,
-					this
+				throw new Error(
+					`Rules should return a string or boolean, received '${typeof valid}' instead`
 				);
 			}
 		}

package/src/examples/Table.stories.js

@@ -83,6 +83,7 @@ export const TableSampleData = () => ({
     </v-data-table>
 	</div>`,
 });
+
 export const TableSampleDataWithCheckbox = () => ({
 	components: { 'v-data-table': VDataTable },
 	data() {
@@ -93,6 +94,7 @@ export const TableSampleDataWithCheckbox = () => ({
 				{ id: 2, name: 'name 2' },
 				{ id: 3, name: 'name 3' },
 			],
+			selectedItems: [],
 		};
 	},
 	template: `<div>
@@ -102,8 +104,8 @@ export const TableSampleDataWithCheckbox = () => ({
 		:headers="headers"
         :items="items"
 		show-select
+		v-model="selectedItems"
 	>
-    
     </v-data-table>
 	</div>`,
 });
@@ -161,18 +163,43 @@ export const TableSampleLocalPagination = () => ({
 	</div>`,
 });
 
-TableNoData.story = {
-	name: 'No data',
-};
-
-TableSampleData.story = {
-	name: 'With data',
-};
-
-TableSampleDataWithCheckbox.story = {
-	name: 'With data and checkbox',
-};
-
-TableSampleLocalPagination.story = {
-	name: 'With data and local pagination',
-};
+export const TableSampleDataWithFarmCheckbox = () => ({
+	components: { 'v-data-table': VDataTable },
+	data() {
+		return {
+			headers,
+			items: [
+				{ id: 1, name: 'name 1' },
+				{ id: 2, name: 'name 2' },
+				{ id: 3, name: 'name 3' },
+			],
+			selectedItems: [],
+		};
+	},
+	methods: {
+		onSelect({ item }) {
+			if (item.id === 2)
+				this.selectedItems = [...this.selectedItems].filter(
+					innerItem => innerItem.id !== 2
+				);
+		},
+		isItemSelected(item) {
+			return this.selectedItems.some(innerItem => innerItem.id === item.id);
+		},
+	},
+	template: `<div>{{selectedItems}}
+	<v-data-table
+        hide-default-footer
+		id="v-data-table--default"
+		v-model="selectedItems"
+		show-select
+		:headers="headers"
+        :items="items"
+		@item-selected="onSelect"
+	>
+		<template v-slot:item.data-table-select="{ isSelected, select, item }">
+			<farm-checkbox :value="item.id" :checked="isItemSelected(item)" @input="select($event)"/>
+		</template>
+    </v-data-table>
+	</div>`,
+});