@farm-investimentos/front-mfe-components-vue3 0.0.1

package/src/components/DialogFooter/DialogFooter.scss

@@ -0,0 +1,34 @@
+@import '../../configurations/functions';
+@import '../../configurations/mixins';
+
+.farm-dialog__footer {
+    border-top: 1px solid var(--farm-gray-lighten);
+    padding: gutter('md');
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+}
+
+.farm-btn {
+    margin-left: gutter('sm');
+    margin-top: 0;
+
+    .farm-icon {
+        margin-right: 8px;
+    }
+}
+
+@include forXsOnly {
+    .farm-btn {
+        margin-left: 0;
+        margin-top: gutter();
+    }
+
+    .farm-dialog__footer {
+        flex-direction: column;
+
+        .farm-btn:first-of-type {
+            margin-top: 0;
+        }
+    }
+}

package/src/components/DialogFooter/DialogFooter.stories.js

@@ -0,0 +1,49 @@
+import DialogFooter from './DialogFooter.vue';
+
+export default {
+	title: 'Display/Dialog/DialogFooter',
+	component: DialogFooter,
+	parameters: {
+		docs: {
+			description: {
+				component: `DialogFooter<br />
+				selector: <em>farm-dialog-footer</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: '<farm-dialog-footer />',
+});
+
+export const ExtraButton = () => ({
+	data() {
+		return { extraButtons: [{ label: 'Random label', color: 'error', outlined: true }] };
+	},
+	template: `<farm-dialog-footer :extraButtons="extraButtons" />`,
+});
+
+export const ConfirmIcon = () => ({
+	template: `<div>
+        <farm-dialog-footer confirmIcon="check" />
+        <farm-dialog-footer confirmIcon="check" confirmColor="warning" />
+        <farm-dialog-footer confirmIcon="check" confirmColor="extra-1" />
+    </div>
+	`,
+});
+
+export const Handlers = () => ({
+	template: '<farm-dialog-footer @onConfirm="onConfirm"  @onClose="onClose" />',
+	methods: {
+		onConfirm() {
+			alert('onConfirm handler');
+		},
+		onClose() {
+			alert('onClose handler');
+		},
+	},
+});

package/src/components/DialogFooter/DialogFooter.vue

@@ -0,0 +1,102 @@
+<template>
+	<div class="farm-dialog__footer">
+		<farm-btn v-if="hasCancel" color="primary" plain @click="$emit('onClose')">
+			{{ closeLabel }}
+		</farm-btn>
+		
+		<farm-btn
+			v-for="button in extraButtons"
+			:key="button.label"
+			:color="button.color"
+			:outlined="button.outlined"
+			:disabled="button.disabled"
+			:title="button.label"
+			@click="$emit(button.listener ? button.listener : '')"
+		>
+			{{ button.label }}
+		</farm-btn>
+		<farm-btn
+			v-if="hasConfirm"
+			:color="confirmColor"
+			:disabled="isConfirmDisabled"
+			:title="confirmLabel"
+			@click="$emit('onConfirm')"
+		>
+			<farm-icon v-if="confirmIcon">{{ confirmIcon }}</farm-icon>
+			{{ confirmLabel }}
+		</farm-btn>
+	</div>
+</template>
+
+<script lang="ts">
+import { PropType } from 'vue';
+import IExtraButton from './IExtraButton';
+
+/**
+ * Footer de dialog/modal
+ */
+export default {
+	name: 'farm-dialog-footer',
+	props: {
+		/**
+		 * Label do botão de confirmação
+		 */
+		confirmLabel: {
+			type: String,
+			default: 'Confirmar',
+		},
+		/**
+		 * Label do botão de fechar
+		 */
+		closeLabel: {
+			type: String,
+			default: 'Fechar',
+		},
+		/**
+		 * Exibe/esconde botão de confirmação
+		 */
+		hasConfirm: {
+			type: Boolean,
+			default: true,
+		},
+		/**
+		 * Exibe/esconde botão de cancelar
+		 */
+		hasCancel: {
+			type: Boolean,
+			default: true,
+		},
+		/**
+		 * Cor do botão de confirmação - usa as do tema do vuetify
+		 */
+		confirmColor: {
+			type: String,
+			default: 'primary',
+		},
+		/**
+		 * Ícone no botão Confirmar
+		 */
+		confirmIcon: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Desabilita botão de confirmação
+		 */
+		isConfirmDisabled: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * lista de botões extra (IExtraButton)
+		 */
+		extraButtons: {
+			type: Array as PropType<Array<IExtraButton>>,
+			default: () => [],
+		},
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import 'DialogFooter';
+</style>

package/src/components/DialogFooter/IExtraButton.ts

@@ -0,0 +1,9 @@
+interface IExtraButton {
+	label: string;
+	color: string;
+	outlined: boolean;
+	disabled: boolean;
+	listener: Function | null;
+}
+
+export default IExtraButton;

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

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

package/src/components/DialogFooter/index.ts

@@ -0,0 +1,3 @@
+import DialogFooter from './DialogFooter.vue';
+
+export default DialogFooter;

package/src/components/DialogHeader/DialogHeader.scss

@@ -0,0 +1,32 @@
+@import '../../configurations/mixins';
+
+.farm-dialog-header__close {
+	position: absolute;
+	margin-top: 0;
+	margin-right: -8px;
+	font-size: 16px;
+	transition: all 0.4s;
+	&:hover {
+		opacity: 0.8;
+	}
+}
+
+header {
+	font-size: 12px;
+	padding: 6px 16px;
+	background-color: #fff;
+	font-weight: 700;
+	color: var(--farm-primary-base);
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	height: 48px;
+
+	> .farm-typography.farm-caption {
+		align-items: center;
+		width: 100%;
+		margin-bottom: 0;
+		color: var(--farm-bw-black-80);
+		@include ellipsis;
+	}
+}

package/src/components/DialogHeader/DialogHeader.stories.js

@@ -0,0 +1,69 @@
+import DialogHeader from './DialogHeader.vue';
+
+export default {
+	title: 'Display/Dialog/DialogHeader',
+	component: DialogHeader,
+	parameters: {
+		docs: {
+			description: {
+				component: `Dialog Header<br />
+				selector: <em>farm-dialog-header</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: `<div style="max-width: 480px; position: relative;">
+		<farm-dialog-header title="Título do header" />
+	</div>`,
+});
+
+export const Secondary = () => ({
+	template: `<div style="max-width: 480px; position: relative;">
+		<farm-dialog-header title="Título do header" iconTitle="calendar" />
+	</div>`,
+});
+
+export const CustomIcon = () => ({
+	template: `
+		<div style="max-width: 480px; position: relative;">
+			<farm-dialog-header title="Título do header" iconTitle="calendar" />
+		</div>`,
+});
+
+export const CloseHandler = () => ({
+	template: `
+		<div style="max-width: 480px; position: relative;">
+			<farm-dialog-header title="Título do header" iconTitle="calendar" @onClose="onClose" />
+		</div>`,
+	methods: {
+		onClose() {
+			alert('onClose handler');
+		},
+	},
+});
+
+export const NoCloseIcon = () => ({
+	template: `
+		<div style="max-width: 480px; position: relative;">
+			<farm-dialog-header title="Título do header" :hasCloseIcon="false" />
+		</div>`,
+});
+
+export const TemplateSlot = () => ({
+	template: `<div style="max-width: 480px; position: relative;">
+		<farm-dialog-header>
+			Template Slot <farm-chip :dense="true">chip</farm-chip>
+		</farm-dialog-header>
+	</div>`,
+});
+
+export const VeryLongTitle = () => ({
+	template: `<div style="max-width: 480px; position: relative;">
+		<farm-dialog-header title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt leo nec orci hendrerit, in sagittis magna tincidunt." />
+	</div>`,
+});

package/src/components/DialogHeader/DialogHeader.vue

@@ -0,0 +1,61 @@
+<template>
+	<header>
+		<farm-icon v-if="iconTitle" size="16px" color="primary" class="mr-2">{{ iconTitle }}</farm-icon>
+		<farm-caption v-if="title" variation="semiBold">
+			{{ title }}
+		</farm-caption>
+
+		<slot></slot>
+
+		<farm-btn
+			v-if="hasCloseIcon"
+			icon
+			color="primary"
+			class="farm-dialog-header__close"
+			title="Fechar"
+			@click="onClose"
+		>
+			<farm-icon role="button" size="24px"> window-close </farm-icon>
+		</farm-btn>
+	</header>
+</template>
+<script lang="ts">
+
+/**
+ * Header de dialog/modal
+ */
+export default {
+	name: 'farm-dialog-header',
+	props: {
+		/**
+		 * Title
+		 */
+		title: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * Icon
+		 */
+		iconTitle: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Has close icon?
+		 */
+		hasCloseIcon: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	methods: {
+		onClose() {
+			this.$emit('onClose', {});
+		},
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import 'DialogHeader';
+</style>

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

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

package/src/components/DialogHeader/index.ts

@@ -0,0 +1,3 @@
+import DialogHeader from './DialogHeader.vue';
+
+export default DialogHeader;