@farm-investimentos/front-mfe-components-vue3 0.0.4 → 0.0.6

package/src/components/Form/Form.vue

@@ -1,7 +1,10 @@
 <template>
-	<form class="farm-form"><slot></slot></form>
+	<form class="farm-form">{{ errorsBag }}<slot></slot>
+	
+	</form>
 </template>
 <script lang="ts">
+import walk from '../../helpers/walk';
 import { onMounted, reactive, ref, getCurrentInstance } from 'vue';
 
 type ErrorsBag = Record<number, boolean>;
@@ -9,11 +12,11 @@ type ErrorsBag = Record<number, boolean>;
 export default {
 	name: 'farm-form',
 	props: {
-		value: { type: [Boolean] },
+		modelValue: { type: [Boolean] },
 	},
 	inheritAttrs: true,
 	setup(props, { emit }) {
-		const innerValue = ref(props.value);
+		const innerValue = ref(props.modelValue);
 		let errorsBag = reactive({} as ErrorsBag);
 		let validationFields = [];
 		const instance = getCurrentInstance();
@@ -21,14 +24,14 @@ export default {
 		const dispatchError = () => {
 			const keys = Object.keys(errorsBag);
 			const errorsIds = keys.filter(key => !errorsBag[key]);
-			emit('input', errorsIds.length === 0);
+			emit('update:modelValue', errorsIds.length === 0);
 		};
 
 		const watchInput = (field: any) => {
 			field.$watch(
 				'hasError',
 				() => {
-					errorsBag[field._uid] = field.valid;
+					errorsBag[field.customId] = field.valid;
 					dispatchError();
 				},
 				{ immediate: true }
@@ -42,20 +45,9 @@ export default {
 		};
 
 		const recursiveFormField = $node => {
-			if(!Array.isArray($node.children)) {
-				return;
-			}
-			$node.children.forEach($leaf => {
-				if ($leaf.component?.ctx?.validate) {
-					validationFields.push($leaf.component?.ctx);
-				} else if ($leaf.children && $leaf.children.length > 1) {
-					recursiveFormField($leaf);
-				} else if ($leaf.children && $leaf.children[0] && $leaf.children[0].validate) {
-					validationFields.push($leaf.children[0]);
-				} else if ($leaf.validatable) {
-					validationFields.push($leaf);
-				} else {
-					recursiveFormField($leaf);
+			walk($node, item => {
+				if (item.validate) {
+					validationFields.push(item);
 				}
 			});
 		};
@@ -71,7 +63,7 @@ export default {
 		const restartValidation = () => {
 			validationFields = [];
 			errorsBag = {};
-			recursiveFormField(instance);
+			recursiveFormField(instance.subTree);
 			validationFields.forEach(field => {
 				watchInput(field);
 				field.validate(field.value);
@@ -82,7 +74,7 @@ export default {
 		const restart = () => {
 			validationFields = [];
 			errorsBag = {};
-			recursiveFormField(instance);
+			recursiveFormField(instance.subTree);
 			validationFields.forEach(field => {
 				watchInput(field);
 			});

package/src/components/IconBox/IconBox.stories.js

@@ -1,5 +1,5 @@
 // import { withDesign } from 'storybook-addon-designs';
-import IconBox from './IconBox';
+import IconBox from './IconBox.vue';
 import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
 const colors = Object.keys(baseThemeColors);
 import sizes from '../../configurations/sizes';

package/src/components/Logger/Logger.vue

@@ -1,6 +1,7 @@
 <template>
 	<section :class="{ 'logger': true, 'logger--horizontal': !vertical, 'logger--left-aligned': align === 'left' }">
-		<div v-for="(item, index) in items" :key="`logger_item_${index}`">
+		<!-- eslint-disable-next-line vue/no-v-for-template-key -->
+		<template v-for="(item, index) in items" :key="`logger_item_${index}`">
 			<farm-logger-item :item="item" :class="{
 				'logger__item--horizontal': !vertical,
 				'logger__item--left-aligned': align === 'left',
@@ -9,7 +10,7 @@
 				logger__divider: true,
 				[dividerCssClass(index)]: true,
 			}" :key="'divider_' + index"></div>
-		</div>
+		</template>
 	</section>
 </template>
 <script lang="ts">

package/src/components/ManagersList/ManagersList.stories.js

@@ -1,4 +1,4 @@
-import ManagersList from './ManagersList';
+import ManagersList from './ManagersList.vue';
 
 export default {
     title: 'Display/ManagersList',

package/src/components/MultipleSelectShortener/MultipleSelectShortener.stories.js

@@ -1,4 +1,4 @@
-import MultipleSelectShortener from './MultipleSelectShortener';
+import MultipleSelectShortener from './MultipleSelectShortener.vue';
 
 export default {
 	title: 'Display/MultipleSelectShortener',

package/src/components/PromptUserToConfirm/PromptUserToConfirm.stories.js

@@ -1,4 +1,4 @@
-import PromptUserToConfirm from './PromptUserToConfirm';
+import PromptUserToConfirm from './PromptUserToConfirm.vue';
 
 export default {
 	title: 'Interactions/PromptUserToConfirm',

package/src/components/RadioGroup/RadioGroup.stories.js

@@ -1,4 +1,4 @@
-import RadioGroup from './RadioGroup';
+import RadioGroup from './RadioGroup.vue';
 // import { withDesign } from 'storybook-addon-designs';
 
 export default {

package/src/components/RangeDatePicker/RangeDatePicker.stories.js

@@ -1,5 +1,5 @@
 // import { withDesign } from 'storybook-addon-designs';
-import RangeDatePicker from './RangeDatePicker';
+import RangeDatePicker from './RangeDatePicker.vue';
 
 export default {
 	title: 'Form/RangeDatePicker',

package/src/components/ResetTableRowSelection/ResetTableRowSelection.stories.js

@@ -1,4 +1,4 @@
-import ResetTableRowSelection from './ResetTableRowSelection';
+import ResetTableRowSelection from './ResetTableRowSelection.vue';
 
 export default {
 	title: 'Interactions/ResetTableRowSelection',

package/src/components/SelectModalOptions/SelectModalOptions.scss

@@ -8,7 +8,7 @@
 	border: 0;
 }
 
-:deep(#v-data-table--default) {
+:deep(#v-table--default) {
 	thead {
 		display: none;
 	}

package/src/components/SelectModalOptions/SelectModalOptions.stories.js

@@ -1,8 +1,5 @@
-import SelectModalOptions from './SelectModalOptions';
-
 export default {
 	title: 'Interactions/SelectModalOptions',
-	component: SelectModalOptions,
 };
 
 export const Primary = () => ({

package/src/components/SelectModalOptions/SelectModalOptions.vue

@@ -50,8 +50,6 @@
 						</fieldset>
 						<v-data-table
 							id="v-data-table--default"
-							hide-default-header
-							hide-default-footer
 							:headers="headers"
 							:items="items"
 							:options.sync="pagination"
@@ -109,7 +107,7 @@
 export default {
 	name: 'farm-select-modal-options',
 	components: {
-	//	'v-data-table': VDataTable,
+		// 'v-data-table': VDataTable,
 	},
 	props: {
 		/**

package/src/components/Switcher/Switcher.stories.js

@@ -1,4 +1,4 @@
-import Switch from './Switcher';
+import Switch from './Switcher.vue';
 import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
 const colors = Object.keys(baseThemeColors);
 

package/src/components/TableContextMenu/TableContextMenu.stories.js

@@ -1,4 +1,4 @@
-import TableContextMenu from './TableContextMenu';
+import TableContextMenu from './TableContextMenu.vue';
 // import { withDesign } from 'storybook-addon-designs';
 
 export default {

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -241,7 +241,7 @@ export default {
 		const reset = () => {
 			innerValue.value = '';
 			isTouched.value = true;
-			emit('input', innerValue.value);
+			emit('update:modelValue', innerValue.value);
 		};
 
 		const makePristine = () => {

package/src/components/Tooltip/Tooltip.stories.js

@@ -1,11 +1,9 @@
 // import { withDesign } from 'storybook-addon-designs';
-import Tooltip from '.';
 import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
 const colors = Object.keys(baseThemeColors);
 
 export default {
 	title: 'Interactions/Tooltip',
-	component: Tooltip,
 	// decorators: [withDesign],
 	parameters: {
 		docs: {
@@ -41,7 +39,7 @@ export const Tooltips = () => ({
 			this is the tooltip for {{ color }}
 			</span>
             <template v-slot:activator="{ on, attrs }">
-                {{ color }}
+                <farm-bodytext :color="color">{{ color }}</farm-bodytext>
             </template>
         </farm-tooltip>
 	</div>`,

package/src/components/Typography/BodyText/BodyText.stories.js

@@ -1,8 +1,5 @@
-import BodyText from './BodyText';
-
 export default {
 	title: 'Typography/BodyText',
-	component: BodyText,
 	parameters: {
 		docs: {
 			description: {

package/src/components/Typography/Caption/Caption.stories.js

@@ -1,4 +1,4 @@
-import Caption from './Caption';
+import Caption from './Caption.vue';
 
 export default {
 	title: 'Typography/Caption',

package/src/components/Typography/Heading/Heading.stories.js

@@ -1,4 +1,4 @@
-import Heading from './Heading';
+import Heading from './Heading.vue';
 
 export default {
 	title: 'Typography/Heading',

package/src/components/Typography/Small/Small.stories.js

@@ -1,8 +1,5 @@
-import Small from './Small';
-
 export default {
 	title: 'Typography/Small',
-	component: Small,
 	parameters: {
 		docs: {
 			description: {

package/src/components/Typography/Subtitle/Subtitle.stories.js

@@ -1,4 +1,4 @@
-import Subtitle from './Subtitle';
+import Subtitle from './Subtitle.vue';
 
 export default {
 	title: 'Typography/Subtitle',

package/src/components/Typography/Typography.stories.js

@@ -1,4 +1,4 @@
-import Typography from './Typography';
+import Typography from './Typography.vue';
 import sizes from '../../configurations/sizes';
 import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
 import bwThemeColors from '../../configurations/_theme-colors-bw.module.scss';

package/src/components/ValueCaption/ValueCaption.stories.js

@@ -1,5 +1,5 @@
 // import { withDesign } from 'storybook-addon-designs';
-import ValueCaption from '.';
+import ValueCaption from './ValueCaption.vue';
 import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
 const colors = Object.keys(baseThemeColors);
 

package/src/examples/Dialog.stories.js

@@ -126,35 +126,4 @@ export const CustomHtml = () => ({
             Open
         </farm-btn>
 	</div>`,
-<<<<<<< HEAD
-});
-=======
-});
-
-export const DisabledHtml = () => ({
-	methods: {
-		openDialog() {
-			this.$dialog
-				.confirm(
-					{
-						title: 'Dialog title',
-						body: `This is a text with <strong>html markup</strong> and<br />break line!<br />
-						Also with an <i class="mdi mdi-book"></i>book icon<br />
-						and some <span style="color: var(--farm-warning-base)">color</span>`,
-					},
-					{
-						html: false,
-						okText: 'Button',
-					}
-				)
-				.then(() => {})
-				.catch(() => {});
-		},
-	},
-	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
-        <farm-btn @click="openDialog">
-            Open
-        </farm-btn>
-	</div>`,
-});
->>>>>>> vuejsdialog
+});

package/src/examples/Table.stories.js

@@ -4,7 +4,7 @@ import { VDataTable } from 'vuetify/labs/components';
 const headers = [
 	{
 		title: 'ID',
-		sortable: true,
+		sortable: false,
 		value: 'id',
 		width: 80,
 		align: 'left',
@@ -12,7 +12,7 @@ const headers = [
 	{
 		title: 'Name',
 		sortable: false,
-		value: 'id',
+		value: 'name',
 		width: 160,
 		align: 'left',
 	},

package/src/helpers/walk.ts

@@ -0,0 +1,19 @@
+import { VNode } from 'vue';
+
+export default function walk(vnode: VNode, cb: Function) {
+	if (!vnode) return;
+
+	if (vnode.component) {
+		const proxy = vnode.component.proxy;
+		if (proxy) cb(vnode.component.proxy);
+		walk(vnode.component.subTree, cb);
+	} else if (vnode.shapeFlag & 16) {
+		const vnodes = vnode.children;
+		if (vnodes.length) {
+			const length = vnodes.length as number;
+			for (let i = 0; i < length; i++) {
+				walk(vnodes[i], cb);
+			}
+		}
+	}
+}

package/src/scss/Sticky-table.scss

@@ -19,7 +19,7 @@ $defaultLefts: 0, 4rem, 4rem;
 			border-bottom: none;
 		}
 
-		.v-data-table__wrapper {
+		.v-table__wrapper {
 			border-top: 1px solid var(--farm-gray-lighten);
 			border-bottom: 1px solid var(--farm-gray-lighten);
 		}
@@ -35,7 +35,7 @@ $defaultLefts: 0, 4rem, 4rem;
 			}
 		}
 
-		&.v-data-table>.v-data-table__wrapper>table {
+		&.v-table__wrapper>.v-table__wrapper>table {
 
 			>tbody>tr>td:first-child,
 			>thead>tr>th:first-child {
@@ -68,7 +68,7 @@ $defaultLefts: 0, 4rem, 4rem;
 			padding-left: 24px;
 		}
 
-		th[role='columnheader'] {
+		th {
 			color: var(--farm-secondary-green-darken);
 			font-size: 14px;
 			font-weight: 700;

package/src/scss/utils.scss

@@ -2,7 +2,7 @@
 	max-width: 960px;
 }
 
-tr.v-data-table__empty-wrapper {
+tr.v-data-table-rows-no-data {
 	td {
 		background-color: white !important;
 		cursor: default !important;