@farm-investimentos/front-mfe-components-vue3 0.4.0 → 0.5.0

package/src/components/TextFieldV2/TextFieldV2.stories.js

@@ -40,10 +40,10 @@ export const Primary = () => ({
 		};
 	},
 	template: `<div style="width: 480px;">
-		<farm-label for="select_label">
+		<farm-label for="input-primary">
 			label
 		</farm-label>
-		<farm-textfield-v2 id="select_label" v-model="v" />
+		<farm-textfield-v2 id="input-primary" v-model="v" />
 		v-model: {{ v }}
 	</div>`,
 });
@@ -219,11 +219,11 @@ export const Mask = () => ({
 	},
 	template: `<div style="width: 480px">
 		<farm-label>CPF Mask ({{ mask }})</farm-label>
-		<farm-textfield-v2 v-model="v" :mask="mask" />
+		<farm-textfield-v2 id="input-mask-cpf" v-model="v" :mask="mask" />
 		v-model: {{ v }}
 
 		<farm-label>Number Mask (R$ ##.###.###,##)</farm-label>
-		<farm-textfield-v2 v-model="v2" :mask="currencyMask" />
+		<farm-textfield-v2 id="input-mask-number" v-model="v2" :mask="currencyMask" />
 		v-model: {{ v2 }}
 
 	</div>`,
@@ -242,7 +242,7 @@ export const ToggleVisibility = () => ({
 		},
 	},
 	template: `<div style="width: 480px">
-		<farm-textfield-v2 v-model="v" :type="visible ? 'text' : 'password'"  :icon="visible ? 'eye-off' : 'eye'" @onClickIcon="toggle" />
+		<farm-textfield-v2 id="input-visibility" v-model="v" :type="visible ? 'text' : 'password'"  :icon="visible ? 'eye-off' : 'eye'" @onClickIcon="toggle" />
 	</div>`,
 });
 
@@ -253,9 +253,10 @@ export const Uppercase = () => ({
 		};
 	},
 	template: `<div style="width: 480px;">
-		<farm-label for="select_label">
+		<farm-label for="input-uppercase">
 			label
 		</farm-label>
-		<farm-textfield-v2 id="select_label" v-model="v" uppercase/>
+		<farm-textfield-v2 id="input-uppercase" v-model="v" uppercase/>
 	</div>`,
 });
+

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -25,10 +25,14 @@
 				v-if="icon && iconPosition === 'left'"
 				@click="$emit('onClickIcon')"
 			>
-				<farm-icon color="gray" size="20px">{{ icon }}</farm-icon>
+				<farm-icon
+					color="gray"
+					size="20px"
+					>{{ icon }}</farm-icon
+				>
 			</button>
 			<input
-				v-bind="delete {...$attrs}.class"
+				v-bind="delete { ...$attrs }.class"
 				v-model="innerValue"
 				v-mask="mask"
 				:id="$props.id"
@@ -46,10 +50,18 @@
 				v-if="icon && iconPosition === 'right'"
 				@click="$emit('onClickIcon')"
 			>
-				<farm-icon color="gray" size="20px">{{ icon }}</farm-icon>
+				<farm-icon
+					color="gray"
+					size="20px"
+					>{{ icon }}</farm-icon
+				>
 			</button>
 		</div>
-		<farm-caption v-if="!hideDetails && showErrorText" color="error" variation="regular">
+		<farm-caption
+			v-if="!hideDetails && showErrorText"
+			color="error"
+			variation="regular"
+		>
 			{{ errorBucket[0] }}
 		</farm-caption>
 		<farm-caption
@@ -67,7 +79,7 @@
 </template>
 
 <script lang="ts">
-import {  computed, onBeforeMount, PropType, ref, toRefs, watch } from 'vue';
+import { computed, onBeforeMount, PropType, ref, toRefs, watch } from 'vue';
 
 import deepEqual from '../../composition/deepEqual';
 import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
@@ -178,7 +190,6 @@ export default {
 		const isBlured = ref(false);
 		const isFocus = ref(false);
 		const isUppercase = ref(props.uppercase);
-
 		const { errorBucket, valid, validatable } = validateFormStateBuilder();
 
 		let fieldValidator = validateFormFieldBuilder(rules.value);

package/src/components/Tooltip/Tooltip.scss

@@ -4,6 +4,10 @@
 .farm-tooltip {
 	display: inline-block;
 	position: relative;
+
+	&__activator {
+		display: inline-block;
+	}
 }
 
 .farm-tooltip__popup {
@@ -13,7 +17,6 @@
 			background-color: rgba(themeColor($color), 0.95);
 		}
 	}
-
 }
 
 .farm-tooltip__popup {
@@ -35,4 +38,4 @@
 		opacity: 1;
 		visibility: visible;
 	}
-}
+}

package/src/components/Tooltip/Tooltip.vue

@@ -1,7 +1,15 @@
 <template>
-	<span :class="{ 'farm-tooltip': true }" ref="parent">
-		<span @mouseover="onOver" @mouseout="onOut" ref="activator">
-			<slot name="activator"></slot>
+	<span
+		:class="{ 'farm-tooltip': true }"
+		ref="parent"
+	>
+		<span
+			class="farm-tooltip__activator"
+			ref="activator"
+			@mouseover="onOver"
+			@mouseout="onOut"
+		>
+			<slot name="activator" />
 		</span>
 
 		<span
@@ -15,7 +23,7 @@
 			:style="styles"
 			@mouseout="onOut"
 		>
-			<slot></slot>
+			<slot />
 		</span>
 	</span>
 </template>

package/src/examples/Table.stories.js

@@ -1,20 +1,20 @@
 // import { withDesign } from 'storybook-addon-designs';
-import { VDataTable } from 'vuetify/labs/components';
+import { VDataTable } from 'vuetify/components/VDataTable';
 
 const headers = [
 	{
 		title: 'ID',
 		sortable: false,
-		value: 'id',
+		key: 'id',
 		width: 80,
-		align: 'left',
+		align: 'center',
 	},
 	{
 		title: 'Name',
 		sortable: false,
-		value: 'name',
+		key: 'name',
 		width: 160,
-		align: 'left',
+		align: 'end',
 	},
 ];
 
@@ -57,7 +57,7 @@ export const TableNoData = () => ({
 });
 
 export const TableSampleData = () => ({
-  components: { 'v-data-table': VDataTable },
+	components: { 'v-data-table': VDataTable },
 	data() {
 		return {
 			headers,
@@ -173,6 +173,7 @@ export const TableSampleDataWithFarmCheckbox = () => ({
 	},
 	methods: {
 		onSelect({ item }) {
+			console.log(item);
 			if (item.id === 2)
 				this.selectedItems = [...this.selectedItems].filter(
 					innerItem => innerItem.id !== 2
@@ -181,20 +182,31 @@ export const TableSampleDataWithFarmCheckbox = () => ({
 		isItemSelected(item) {
 			return this.selectedItems.some(innerItem => innerItem.id === item.id);
 		},
+		select(item) {
+			if (this.selectedItems.some(innerItem => innerItem.id === item.id)) {
+				this.selectedItems = this.selectedItems.filter(
+					innerItem => innerItem.id !== item.id
+				);
+				return;
+			}
+			this.selectedItems.push(item);
+		},
 	},
 	template: `<div>{{selectedItems}}
 	<v-data-table
-        hide-default-footer
+	show-select
 		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-slot:item.data-table-select="{ isSelected, item }">
+			<farm-checkbox :value="item.id" :checked="isItemSelected(item)" @click="select(item)"/>
+		</template>
+		<template v-slot:bottom>
 		</template>
     </v-data-table>
 	</div>`,
-});
+});

package/src/main.ts

@@ -78,6 +78,7 @@ export * from './components/Switcher';
 export * from './components/Tabs';
 export * from './components/TextArea';
 export * from './components/TextFieldV2';
+export * from './components/InputMoney';
 export * from './components/Tooltip';
 export * from './components/Typography';
 export * from './components/ValueCaption';