@farm-investimentos/front-mfe-components 9.4.0 → 10.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "9.4.0",
+	"version": "10.0.0",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",

package/src/components/Card/Card.vue

@@ -1,5 +1,5 @@
 <template>
-	<component class="farm-card" v-bind:is="tag">
+	<component class="farm-card" :is="tag">
 		<slot></slot>
 	</component>
 </template>

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

@@ -1,5 +1,5 @@
 <template>
-	<component v-bind:is="tag" class="farm-card__content" :gutter="gutter">
+	<component :is="tag" class="farm-card__content" :gutter="gutter">
 		<slot></slot>
 	</component>
 </template>

package/src/components/Checkbox/Checkbox.vue

@@ -18,7 +18,7 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue, { onBeforeMount, PropType, ref, toRefs, watch } from 'vue';
+import Vue, { computed, onBeforeMount, PropType, ref, toRefs, watch } from 'vue';
 import validateFormStateBuilder from '../../composition/validateFormStateBuilder';
 import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
 import validateFormMethodBuilder from '../../composition/validateFormMethodBuilder';
@@ -74,6 +74,10 @@ export default Vue.extend({
 			validate(innerValue.value);
 		};
 
+		const hasError = computed(() => {
+			return errorBucket.value.length > 0;
+		});
+
 		watch(
 			() => props.value,
 			() => {
@@ -113,6 +117,7 @@ export default Vue.extend({
 			errorBucket,
 			valid,
 			validatable,
+			hasError,
 			toggleValue,
 			reset,
 			validate,

package/src/components/Chip/Chip.stories.js

@@ -8,6 +8,17 @@ const variations = ['', 'darken', 'lighten'];
 export default {
 	title: 'Display/Chips',
 	component: Chip,
+	parameters: {
+		docs: {
+			description: {
+				component: `Chip<br />
+				selector: <em>farm-chip</em><br />
+				<span style="color: green;">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({

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

@@ -5,7 +5,11 @@ describe('CopyToClipboard component', () => {
 	let wrapper;
 
 	beforeEach(() => {
-		wrapper = shallowMount(CopyToClipboard);
+		wrapper = shallowMount(CopyToClipboard, {
+			propsData: {
+				toCopy: 'test',
+			},
+		});
 	});
 
 	test('Created hook', () => {

package/src/components/DatePicker/DatePicker.vue

@@ -136,8 +136,6 @@ export default Vue.extend({
 					timeZone: 'America/Sao_Paulo',
 				});
 
-				console.log(this.getUniversalDate(locatedSelectedDate), this.getUniversalDate(locatedMinDate));
-
 				return this.min && this.getUniversalDate(locatedSelectedDate) < this.getUniversalDate(locatedMinDate)
 					? 'A data está fora do período permitido'
 					: true;

package/src/components/Form/Form.stories.js

@@ -44,10 +44,10 @@ export const Primary = () => ({
 	},
 	template: `
         <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
-			
-			<farm-label :required="true">Documento</farm-label>
-			<farm-textfield v-model="form.document" :rules="[rules.required]" />
-
+			<div>
+				<farm-label :required="true">Documento</farm-label>
+				<farm-textfield v-model="form.document" :rules="[rules.required]" />
+			</div>
 			<farm-label :required="true">Nome</farm-label>
 			<farm-textfield v-model="form.name" :rules="[rules.required]" />
 			
@@ -144,3 +144,28 @@ export const InitInvalid = () => ({
         </farm-form>
     `,
 });
+
+export const RadioGroupReset = () => ({
+	data() {
+		return {
+			checkedValue: 1,
+			buttons: [
+				{ label: 'Button 1', id: 1 },
+				{ label: 'Button 2', id: 2 },
+				{ label: 'Button 3', id: 3 },
+			],
+			validForm: false,
+			styles,
+		};
+	},
+	template: `
+        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
+			<farm-radio-group v-model="checkedValue" column :buttons="buttons" />
+
+            <div class="footer" :style="[styles.footer]">
+				<farm-btn color="secondary" outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
+				<farm-btn color="secondary" :disabled="!validForm">Salvar</farm-btn>
+            </div>
+        </farm-form>
+    `,
+});

package/src/components/Icon/Icon.stories.js

@@ -12,7 +12,9 @@ export default {
 		viewMode: 'docs',
 		docs: {
 			description: {
-				component: `Icon`,
+				component: `Icon<br />
+                selector: <em>farm-icon<em><br />
+                <span style="color: green;">ready for use</span>`,
 			},
 		},
 	},

package/src/components/List/List.stories.js

@@ -0,0 +1,29 @@
+import { withDesign } from 'storybook-addon-designs';
+import List from './List.vue';
+
+export default {
+	title: 'Display/List/List',
+	component: List,
+	decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+
+		docs: {
+			description: {
+				component: `List<br />
+				selector: <em>farm-list</em>`,
+			},
+		},
+	},
+};
+
+export const Primary = () => ({
+	template: `<farm-list>
+		<farm-listitem clickable hoverColor="primary">primary</farm-listitem>
+		<farm-listitem clickable hoverColor="extra-1" hoverColorVariation="lighten">extra 1 lighten</farm-listitem>
+		<farm-listitem clickable hoverColor="error" hoverColorVariation="lighten">
+			<farm-icon size="sm" color="error">trash-can</farm-icon>
+			<farm-typography color="error" tag="span">Error</farm-typography>
+		</farm-listitem>
+	</farm-list>`,
+});

package/src/components/List/List.vue

@@ -0,0 +1,17 @@
+<template>
+	<ul>
+		<slot></slot>
+	</ul>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'farm-list',
+	props: {},
+	setup() {},
+});
+</script>
+<style lang="scss" scoped>
+@import './List';
+</style>

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

@@ -0,0 +1,20 @@
+import { shallowMount } from '@vue/test-utils';
+import List from '../List';
+
+describe('List component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(List);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+});

package/src/components/List/index.ts

@@ -0,0 +1,4 @@
+import List from './List.vue';
+
+export { List };
+export default List;

package/src/components/ListItem/ListItem.scss

@@ -0,0 +1,37 @@
+@import '../../configurations/theme-colors';
+
+.farm-listitem {
+    list-style-type: none;
+    transition: background-color 300ms linear;
+    padding: 8px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+
+    &--clickable {
+        cursor: pointer;
+    }
+
+    >a {
+        text-decoration: none;
+    }
+
+    &:hover {
+
+        @each $color in $theme-colors-list {
+
+            &#{'.farm-listitem--' + $color + '-base'} {
+                background-color: themeColor($color);
+            }
+
+            &#{'.farm-listitem--' + $color + '-lighten'} {
+                background-color: themeColor($color, 'lighten');
+            }
+
+            &#{'.farm-listitem--' + $color + '-darken'} {
+                background-color: themeColor($color, 'darken');
+            }
+        }
+    }
+
+}

package/src/components/ListItem/ListItem.stories.js

@@ -0,0 +1,70 @@
+import { withDesign } from 'storybook-addon-designs';
+import ListItem from './ListItem.vue';
+
+import baseThemeColors from '../../configurations/_theme-colors-base.scss';
+
+const colors = Object.keys(baseThemeColors);
+const variations = ['base', 'darken', 'lighten'];
+
+export default {
+	title: 'Display/List/ListItem',
+	component: ListItem,
+	decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+
+		docs: {
+			description: {
+				component: `ListItem<br />
+				selector: <em>farm-listitem</em>`,
+			},
+		},
+	},
+};
+
+export const Primary = () => ({
+	template: '<farm-listitem>aaa</farm-listitem>',
+});
+
+export const HoverColors = () => ({
+	data() {
+		return {
+			colors,
+			variations,
+		};
+	},
+	template: `<div style="display: flex; flex-direction: row; flex-wrap: wrap;">
+		<div class="chips-container" v-for="color in colors" :key="color" style="width: 33.3%; margin-bottom: 32px;">
+			<h4>{{ color }}</h4>
+			<farm-listitem
+				v-for="variation in variations"
+				:key="color + '_' + variation"
+				:hoverColor="color"
+				:hoverColorVariation="variation"
+				>
+				{{ color }} {{ variation }}
+			</farm-listitem>
+		</div>
+	</div>`,
+});
+
+export const ClickableCursor = () => ({
+	template: '<farm-listitem clickable>Clickable cursor</farm-listitem>',
+});
+
+export const ClickListener = () => ({
+	methods: {
+		onClick() {
+			alert('Clicked')
+		}
+	},
+	template:
+		`<farm-listitem
+			clickable
+			hoverColor="error"
+			hoverColorVariation="lighten"
+			@click="onClick"
+		>
+			try me
+		</farm-listitem>`,
+});

package/src/components/ListItem/ListItem.vue

@@ -0,0 +1,82 @@
+<template>
+	<li
+		@click="onClick"
+		:class="{
+			'farm-listitem': true,
+			[cssColorWithVariation]: cssColorWithVariation,
+			'farm-listitem--clickable': clickable || to,
+		}"
+	>
+		<router-link :to="to" v-if="to">
+			<slot></slot>
+		</router-link>
+		<template v-else>
+			<slot></slot>
+		</template>
+	</li>
+</template>
+<script lang="ts">
+import Vue, { computed, PropType, toRefs } from 'vue';
+
+export default Vue.extend({
+	name: 'farm-listitem',
+	props: {
+		to: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Color on hover
+		 */
+		hoverColor: {
+			type: [String, null] as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'neutral'
+				| 'error'
+				| 'warning'
+				| 'info'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: null,
+		},
+		/**
+		 * Color variation on hover
+		 */
+		hoverColorVariation: {
+			type: [String, null] as PropType<'base' | 'lighten' | 'darken'>,
+			default: 'base',
+		},
+		/**
+		 * Is clickable
+		 */
+		clickable: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props, { emit }) {
+		const { hoverColor, hoverColorVariation } = toRefs(props);
+
+		const cssColorWithVariation = computed((): String => {
+			if (!hoverColor.value) {
+				return null;
+			}
+			return `farm-listitem--${hoverColor.value}-${hoverColorVariation.value}`;
+		});
+
+		const onClick = () => {
+			emit('click');
+		};
+
+		return {
+			cssColorWithVariation,
+			onClick,
+		};
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import './ListItem';
+</style>

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

@@ -0,0 +1,20 @@
+import { shallowMount } from '@vue/test-utils';
+import ListItem from '../ListItem';
+
+describe('ListItem component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ListItem);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+});

package/src/components/ListItem/index.ts

@@ -0,0 +1,4 @@
+import ListItem from './ListItem.vue';
+
+export { ListItem };
+export default ListItem;

package/src/components/Logger/Logger.vue

@@ -1,9 +1,11 @@
 <template>
 	<section class="logger">
 		<template v-for="(item, index) in items">
-			<LoggerItem :item="item" :key="index" />
+			<farm-logger-item :item="item" :key="`logger_item_${index}`" />
 			<div
+				v-if="hasDivider(index)"
 				:class="{
+					'logger__divider': true,
 					'logger__divider--success': isPreviousLogAndCurrentLogSuccess(index),
 					'logger__divider--error': isPreviousLogAndCurrentLogError(index),
 					'logger__divider--success-to-error':
@@ -11,8 +13,6 @@
 					'logger__divider--error-to-success':
 						isPreviousLogSuccessAndCurrentLogError(index),
 				}"
-				v-if="hasDivider(index)"
-				class="logger__divider"
 				:key="'divider_' + index"
 			></div>
 		</template>
@@ -21,11 +21,9 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue';
 import ILoggerItem from './LoggerItem/ILoggerItem';
-import LoggerItem from './LoggerItem/';
 
 export default Vue.extend({
 	name: 'farm-logger',
-	components: { LoggerItem },
 	props: {
 		/*
 		 * List of logger items
@@ -57,6 +55,6 @@ export default Vue.extend({
 	},
 });
 </script>
-<style lang="sass" scoped>
-@import './Logger.scss'
+<style lang="scss" scoped>
+@import './Logger';
 </style>

package/src/components/Modal/Modal.scss

@@ -36,6 +36,7 @@
         max-height: calc(100vh - 64px);
         overflow-y: auto;
         width: 100%;
+        padding: 0 16px;
     }
 
     &--header {

package/src/components/Modal/Modal.stories.js

@@ -7,8 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `Modal<br />
-				selector: <em>farm-modal</em>
-				<span style="color: yellow;">wait</span>
+				selector: <em>farm-modal</em><br />
+				<span style="color: green;">ready for use</span>
 				`,
 			},
 		},

package/src/components/ModalPromptUser/ModalPromptUser.scss

@@ -0,0 +1,3 @@
+section.modal-content {
+    margin: 32px 0 16px;
+}

package/src/components/ModalPromptUser/ModalPromptUser.stories.js

@@ -10,7 +10,8 @@ export default {
 		docs: {
 			description: {
 				component: `Modal Prompt User to Confirm<br />
-				selector: <em>farm-prompt-user</em>`,
+				selector: <em>farm-prompt-user</em><br />
+				<span style="color: green;">ready for use</span>`,
 			},
 		},
 		design: {
@@ -28,10 +29,10 @@ export const Primary = () => ({
 	},
 	template: `<div>
 		<farm-prompt-user match="CONFIRMAR" title="Título" subtitle="Digite CONFIRMAR para habilitar" v-model="showPrompt" />
-		click:		
-		<v-btn color="secondary" @click="showPrompt = true;">
+			click:
+			<farm-btn color="primary" @click="showPrompt = true;">
 			reabrir
-			</v-btn>
+			</farm-btn>
 		</div>`,
 });
 export const Error = () => ({
@@ -42,8 +43,8 @@ export const Error = () => ({
 	},
 	template: `<div>
 		<farm-prompt-user match="REMOVER" title="Título" subtitle="Digite REMOVER para habilitar" v-model="showPrompt" confirmColor="error" confirmLabel="Remover" />
-			<v-btn color="secondary" @click="showPrompt = true;">
+			<farm-btn color="primary" @click="showPrompt = true;">
 			reabrir
-			</v-btn>
+			</farm-btn>
 		</div>`,
 });

package/src/components/ModalPromptUser/ModalPromptUser.vue

@@ -1,37 +1,35 @@
 <template>
-	<v-dialog content-class="modal-default modal-default-small" v-model="inputVal">
-		<DialogHeader :title="title" @onClose="close" />
-
-		<v-main>
-			<section class="mt-9">
-				<PromptUserToConfirm
+	<farm-modal v-model="inputVal" size="sm" :offsetTop="48" :offsetBottom="68">
+		<template v-slot:header>
+			<DialogHeader :title="title" @onClose="close" />
+		</template>
+		<template v-slot:content>
+			<section class="modal-content">
+				<farm-promptusertoconfirm
 					v-if="inputVal"
-					:match="match"
 					v-model="canConfirm"
+					:match="match"
 					:title="subtitle"
 				/>
 			</section>
+		</template>
+
+		<template v-slot:footer>
 			<DialogFooter
-				@onClose="close"
 				:confirmColor="confirmColor"
 				:confirmLabel="confirmLabel"
-				@onConfirm="confirm"
 				:isConfirmDisabled="!canConfirm"
+				@onConfirm="confirm"
+				@onClose="close"
 			/>
-		</v-main>
-	</v-dialog>
+		</template>
+	</farm-modal>
 </template>
 <script lang="ts">
 import Vue from 'vue';
-import { VDialog } from 'vuetify/lib/components/VDialog';
-import { VMain } from 'vuetify/lib/components/VMain';
 
 export default Vue.extend({
 	name: 'farm-prompt-user',
-	components: {
-		VDialog,
-		VMain,
-	},
 	props: {
 		/**
 		 * Habilita/desabilita o modal
@@ -101,3 +99,6 @@ export default Vue.extend({
 	},
 });
 </script>
+<style lang="scss" scoped>
+@import './ModalPromptUser';
+</style>

package/src/components/PromptUserToConfirm/PromptUserToConfirm.vue

@@ -1,12 +1,12 @@
 <template>
 	<v-form v-model="formVal" autocomplete="off">
-		<div v-html="title"></div>
+		<farm-caption v-html="title" color="gray" />
 		<v-row>
 			<v-col cols="12" sm="12" class="mt-3 v-col-fieldset-default">
 				<v-text-field
+					v-model="matchInput"
 					id="form-confirm-remove"
 					color="secondary"
-					v-model="matchInput"
 					outlined
 					dense
 					:rules="[rules.checkRemove]"