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

package/src/components/Buttons/ImportButton/__tests__/ImportButton.spec.js

@@ -0,0 +1,23 @@
+import { shallowMount } from '@vue/test-utils';
+import ImportButton from '../ImportButton';
+
+describe('ImportButton component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ImportButton);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('Methods', () => {
+		it('Should emit event', () => {
+			component.onClick();
+			expect(wrapper.emitted().onClick).toBeDefined();
+		});
+	});
+});

package/src/components/Buttons/ImportButton/index.ts

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

package/src/components/Buttons/MultiImportButton/MultiImportButton.stories.js

@@ -0,0 +1,35 @@
+import MultiImport from './MultiImportButton.vue';
+
+export default {
+	title: 'Buttons/MultiImport',
+	component: MultiImport,
+};
+
+export const Primary = () => ({
+	template: '<farm-btn-multipleimport />',
+});
+
+export const List = () => ({
+	methods: {
+		listener(key) {
+			alert('Handler for item ' + key);
+		},
+	},
+	template: `<farm-btn-multipleimport
+			:optionsList="[{ listenerKey: 1, title: 'XLS teste'}, { listenerKey: 2, title: 'CSV teste novo'}]"
+			@onClick="listener"
+		/>`,
+});
+
+export const CustomColor = () => ({
+	methods: {
+		listener(key) {
+			alert('Handler for item ' + key);
+		},
+	},
+	template: `<farm-btn-multipleimport
+			color="info"
+			:optionsList="[{ listenerKey: 1, title: 'XLS teste'}, { listenerKey: 2, title: 'CSV teste novo'}]"
+			@onClick="listener"
+		/>`,
+});

package/src/components/Buttons/MultiImportButton/MultiImportButton.vue

@@ -0,0 +1,54 @@
+<template>
+	<farm-contextmenu v-model="value" :bottom="true">
+		<template v-slot:activator="{}">
+			<farm-btn outlined title="Importar" v-bind="$attrs">
+				Importar
+				<farm-icon class="ml-2"> chevron-{{ value ? 'up' : 'down' }} </farm-icon>
+			</farm-btn>
+		</template>
+		<farm-list>
+			<farm-listitem
+				v-for="item in optionsList"
+				clickable
+				:hoverColor="$attrs.color || 'primary'"
+				hoverColorVariation="lighten"
+				:key="'importbutton_key_' + item.title"
+				:title="item.title"
+				@click="onClick(item.listenerKey)"
+			>
+				<farm-caption bold tag="span">{{ item.title }}</farm-caption>
+			</farm-listitem>
+		</farm-list>
+	</farm-contextmenu>
+</template>
+<script lang="ts">
+import { PropType } from 'vue';
+
+export interface IImportOption {
+	title: String;
+	listenerKey: String;
+}
+
+export default {
+	name: 'farm-btn-multipleimport',
+	props: {
+		/**
+		 * Options list
+		 */
+		optionsList: {
+			type: Array as PropType<Array<IImportOption>>,
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			value: false,
+		};
+	},
+	methods: {
+		onClick(key) {
+			this.$emit('onClick', key);
+		},
+	},
+};
+</script>

package/src/components/Buttons/MultiImportButton/__tests__/MultiImportButton.spec.js

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils';
+import MultiImportButton from '../MultiImportButton';
+
+describe('MultiImportButton component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(MultiImportButton);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/Buttons/MultiImportButton/index.ts

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

package/src/components/Buttons/RemoveButton/RemoveButton.scss

@@ -0,0 +1,5 @@
+.farm-btn {
+    .farm-icon {
+        margin-right: 1rem;
+    }
+}

package/src/components/Buttons/RemoveButton/RemoveButton.stories.js

@@ -0,0 +1,17 @@
+import RemoveButton from './RemoveButton.vue';
+
+export default {
+    title: 'Buttons/Remove',
+    component: RemoveButton,
+};
+
+export const Primary = () => ({
+    template: '<farm-btn-remove />',
+});
+
+export const Secondary = () => ({
+    template: '<farm-btn-remove label="Custom label" />',
+});
+
+Primary.storyName = 'Básico';
+Secondary.storyName = 'Custom label';

package/src/components/Buttons/RemoveButton/RemoveButton.vue

@@ -0,0 +1,44 @@
+<template>
+	<farm-btn
+		dense
+		class="farm-btn--responsive"
+		color="error"
+		:title="label"
+		:disabled="disabled"
+		@click="onClick"
+	>
+		<farm-icon>trash-can-outline</farm-icon>
+		{{ label }}
+	</farm-btn>
+</template>
+<script lang="ts">
+
+
+export default {
+	name: 'farm-btn-remove',
+	props: {
+		/**
+		 * Label do botão
+		 */
+		label: {
+			type: String,
+			default: 'Remover',
+		},
+		/**
+		 * Desabilita o botão
+		 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	methods: {
+		onClick() {
+			this.$emit('onClick');
+		},
+	},
+};
+</script>
+<style scoped lang="scss">
+@import './RemoveButton';
+</style>

package/src/components/Buttons/RemoveButton/__tests__/RemoveButton.spec.js

@@ -0,0 +1,23 @@
+import { shallowMount } from '@vue/test-utils';
+import RemoveButton from '../RemoveButton';
+
+describe('RemoveButton component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(RemoveButton);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('Methods', () => {
+		it('Should emit event', () => {
+			component.onClick();
+			expect(wrapper.emitted().onClick).toBeDefined();
+		});
+	});
+});

package/src/components/Buttons/RemoveButton/index.ts

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

package/src/components/Buttons/ToggleButton/ToggleButton.stories.js

@@ -0,0 +1,22 @@
+import ToggleButton from './ToggleButton.vue';
+
+export default {
+	title: 'Buttons/ToggleButton',
+	component: ToggleButton,
+};
+
+export const Primary = () => ({
+	template: '<farm-btn-toggle label="Botão" />',
+});
+
+export const PositionRight = () => ({
+	template: '<farm-btn-toggle label="Botão" position="right" />',
+});
+
+export const Opened = () => ({
+	template: '<farm-btn-toggle label="Botão" :pressed="true" />',
+});
+
+export const CustomColor = () => ({
+	template: '<farm-btn-toggle color="info" label="Botão" />',
+});

package/src/components/Buttons/ToggleButton/ToggleButton.vue

@@ -0,0 +1,75 @@
+<template>
+	<farm-btn
+		@click="onClick"
+		v-bind="$attrs"
+		class="farm-btn--responsive"
+		:class="{
+			'v-btn_icon--prepend': prepend,
+			'v-btn_icon--apppend': !prepend,
+		}"
+		:outlined="!open"
+		:title="label"
+	>
+		<farm-icon v-if="prepend" class="mr-3 ml-0">{{
+			`chevron-${open ? 'up' : 'down'}`
+		}}</farm-icon>
+		{{ label }}
+		<farm-icon v-if="!prepend" class="ml-3 mr-0">{{
+			`chevron-${open ? 'up' : 'down'}`
+		}}</farm-icon>
+	</farm-btn>
+</template>
+<script lang="ts">
+
+
+/**
+ * Botão de Toggle, emitindo e guardando status
+ */
+export default {
+	name: 'farm-btn-toggle',
+	data: () => ({
+		open: false,
+	}),
+	props: {
+		/**
+		 * Label do botão
+		 */
+		label: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * Pressionado ou não
+		 */
+		pressed: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Posição do ícone
+		 */
+		position: {
+			type: String,
+			default: 'left',
+		},
+	},
+	methods: {
+		onClick() {
+			this.open = !this.open;
+		},
+	},
+	watch: {
+		open(value) {
+			this.$emit('onChange', value);
+		},
+	},
+	created() {
+		this.open = this.pressed;
+	},
+	computed: {
+		prepend() {
+			return this.position === 'left';
+		},
+	},
+};
+</script>

package/src/components/Buttons/ToggleButton/__tests__/ToggleButton.spec.js

@@ -0,0 +1,21 @@
+import { shallowMount } from '@vue/test-utils';
+import ToggleButton from '../ToggleButton';
+
+describe('ToggleButton component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ToggleButton);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('Methods', () => {
+		it('Should handle click', () => {
+			wrapper.vm.onClick();
+			expect(wrapper.vm.open).toBeTruthy();
+		});
+	});
+});

package/src/components/Buttons/ToggleButton/index.ts

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

package/src/components/Card/Card.scss

@@ -0,0 +1,18 @@
+@import '../../configurations/mixins';
+
+.farm-card {
+	width: 100%;
+	background: #ffffff;
+	border: 1px solid var(--farm-gray-lighten);
+	border-radius: 5px;
+	overflow: hidden;
+
+	&[shadow] {
+		@include addShadow;
+		border: none;
+	}
+
+	&p {
+		margin: 0;
+	}
+}

package/src/components/Card/Card.stories.js

@@ -0,0 +1,40 @@
+import Card from './Card.vue';
+
+export default {
+	title: 'Surfaces/Card',
+	component: Card,
+	parameters: {
+		docs: {
+			description: {
+				component: `Card<br />
+				selector: <em>farm-card</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: `
+		<farm-card>
+		Card content
+		</farm-card>
+	`,
+});
+
+export const Events = () => ({
+	methods: {
+		handleEvent(type) {
+			alert(type);
+		},
+	},
+	template: `
+		<farm-card
+			@click.stop="handleEvent('click')"
+		>
+		Card content
+		</farm-card>
+	`,
+});

package/src/components/Card/Card.vue

@@ -0,0 +1,24 @@
+<template>
+	<component class="farm-card" :is="tag" >
+		<slot></slot>
+	</component>
+</template>
+
+<script lang="ts">
+
+
+export default {
+	name: 'farm-card',
+	inheritAttrs: true,
+	props: {
+		/**
+		 * Html tag
+		 */
+		tag: { type: String, default: 'div' },
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import './Card';
+</style>

package/src/components/Card/CardComposition.stories.ts

@@ -0,0 +1,69 @@
+// import { withDesign } from 'storybook-addon-designs';
+
+export default {
+	title: 'Surfaces/Card/Molecules',
+	// decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+		docs: {
+			description: {
+				component: `Card and Card Content composition`,
+			},
+		},
+	},
+};
+
+export const MultipleContents = () => ({
+	template: `<div style="width: 480px;">
+    <farm-card>
+		<farm-card-content>
+			Content 1!
+		</farm-card-content>
+		<farm-card-content>
+			Content 2!
+		</farm-card-content>
+		<farm-card-content>
+			Content 3!
+		</farm-card-content>
+	</farm-card>
+    </div>`,
+});
+
+export const Gutters = () => ({
+	data() {
+		return { gutters: ['none', 'xs', 'sm', 'vuetify', 'md', 'lg', 'xl'] };
+	},
+	template: `<div style="width: 480px;">
+    <farm-card v-for="gutter in gutters" :key="gutter" style="margin-bottom: 16px">
+		<farm-card-content :gutter="gutter">
+			Content with {{ gutter }} gutter
+		</farm-card-content>
+	</farm-card>
+    </div>`,
+});
+
+export const Shadow = () => ({
+	template: `<div style="width: 480px;">
+    <farm-card shadow>
+		<farm-card-content>
+			Content!
+		</farm-card-content>
+	</farm-card>
+    </div>`,
+});
+
+export const BackgroundChildren = () => ({
+	template: `<div style="width: 480px;">
+    <farm-card>
+	<farm-card-content background="lighten">
+			Lighten bg
+		</farm-card-content>
+		<farm-card-content>
+			No bg
+		</farm-card-content>
+		<farm-card-content background="base">
+			Base bg
+		</farm-card-content>
+	</farm-card>
+    </div>`,
+});

package/src/components/Card/CardContent/CardContent.scss

@@ -0,0 +1,17 @@
+@import '../../../configurations/variables';
+@import '../../../configurations/functions';
+@import '../../../configurations/_theme-colors';
+
+.farm-card__content {
+    @each $k in map-keys($gutters) {
+        &#{'[gutter=' + $k + ']'} {
+            padding: map-get($gutters, $k);
+        }
+    }
+}
+
+@each $k in map-keys($background-colors) {
+    #{'.farm-card__content--' + $k} {
+        background-color: map-get($background-colors, $k);
+    }
+}

package/src/components/Card/CardContent/CardContent.stories.js

@@ -0,0 +1,47 @@
+import CardContent from './CardContent.vue';
+
+export default {
+	title: 'Surfaces/Card/CardContent',
+	component: CardContent,
+	parameters: {
+		docs: {
+			description: {
+				component: `Card Content<br />
+				selector: <em>farm-card-content</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: `
+        <farm-card-content>
+            Conteúdo do Card Content
+        </farm-card-content>
+    `,
+});
+
+export const Gutters = () => ({
+	data() {
+		return { gutters: ['none', 'xs', 'sm', 'vuetify', 'md', 'lg', 'xl'] };
+	},
+	template: `<div style="width: 480px;">
+		<farm-card-content v-for="gutter in gutters" :key="gutter" style="margin-bottom: 16px" :gutter="gutter">
+			Content with {{ gutter }} gutter
+		</farm-card-content>
+    </div>`,
+});
+
+export const Background = () => ({
+	data() {
+		return { bgs: ['base', 'lighten', 'white'] };
+	},
+	template: `<div style="width: 480px;">
+		<farm-card-content v-for="bg in bgs" :key="bg" style="margin-bottom: 16px" :background="bg">
+			Content with {{ bg }} background
+		</farm-card-content>
+    </div>`,
+});

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

@@ -0,0 +1,39 @@
+<template>
+	<component
+		:is="tag"
+		:class="{ 'farm-card__content': true, ['farm-card__content--' + background]: background }"
+		:gutter="gutter"
+	>
+		<slot></slot>
+	</component>
+</template>
+
+<script lang="ts">
+import { PropType } from 'vue';
+
+export default {
+	name: 'farm-card-content',
+	props: {
+		/**
+		 * Html tag
+		 */
+		tag: { type: String, default: 'div' },
+		/**
+		 * Add gutter
+		 */
+		gutter: {
+			type: String as PropType<'none' | 'xs' | 'sm' | 'vuetify' | 'md' | 'lg' | 'xl'>,
+			default: 'md',
+		},
+		background: {
+			type: String as PropType<'base' | 'lighten' | 'darken'> | null,
+			default: null,
+		},
+	},
+	inheritAttrs: true,
+};
+</script>
+
+<style lang="scss" scoped>
+@import './CardContent';
+</style>

package/src/components/Card/CardContent/__tests__/CardContent.spec.js

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

package/src/components/Card/CardContent/index.ts

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

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

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

package/src/components/Card/index.ts

@@ -0,0 +1,5 @@
+import Card from './Card.vue';
+import CardContent from './CardContent/CardContent.vue';
+
+export { Card, CardContent };
+export default Card;