@farm-investimentos/front-mfe-components-vue3 0.6.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components-vue3",
-	"version": "0.6.0",
+	"version": "0.6.1",
 	"private": false,
 	"repository": {
 		"type": "git",
@@ -20,9 +20,11 @@
 		"build:components": "vue-cli-service build --target lib --name front-mfe-components src/main.ts",
 		"lint": "vue-cli-service lint --fix",
 		"serve": "vue-cli-service serve",
+		"serve:storybook": "http-server ./storybook-static/",
 		"storybook": "storybook dev -p 6006",
 		"test:coverage": "jest --coverage",
-		"test:unit": "jest"
+		"test:unit": "jest",
+		"prepare": "husky"
 	},
 	"browserslist": [
 		"> 1%",
@@ -74,6 +76,7 @@
 		"eslint": "^6.7.2",
 		"eslint-plugin-import": "^2.29.0",
 		"eslint-plugin-vue": "^7.1.0",
+		"husky": "^9.0.11",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "^29.0.0",
 		"npm-run-all2": "^6.0.6",

package/src/components/Chip/Chip.vue

@@ -1,7 +1,6 @@
 <template>
 	<span
-		v-bind="$props"
-		
+		v-bind="$props"	
 		:class="{
 			'farm-chip': true,
 			'farm-chip--dense': dense,

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

@@ -6,7 +6,9 @@ describe('Chip component', () => {
 	let wrapper;
 
 	beforeEach(() => {
-		wrapper = shallowMount(Chip, {});
+		wrapper = shallowMount(Chip, {
+			modelValue: ''
+		});
 	});
 
 	test('Created hook', () => {

package/src/components/Collapsible/Collapsible.scss

@@ -7,6 +7,16 @@
 		align-items: center;
 		justify-content: space-between;
 		cursor: pointer;
+
+		&--custom {
+			position: relative;
+			cursor: pointer;
+		}
+
+		&--plain {
+			cursor: default;
+			pointer-events: none;
+		}
 	}
 
 	&__content-title {
@@ -19,6 +29,12 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
+
+		&--custom {
+			position: absolute;
+			right: 0;
+			top: 3px;
+		}
 	}
 
 	&__icon {

package/src/components/Collapsible/Collapsible.stories.js

@@ -141,12 +141,242 @@ export const Dense = () => ({
 		'<farm-collapsible icon="plus" title="With Icon" textChip="chip" dense showChip>collapsible content</farm-collapsible>',
 });
 
-Primary.storyName = 'Basic';
-Title.storyName = 'Title';
-Icon.storyName = 'Icon';
-Export.storyName = 'Export';
-Opened.storyName = 'Opened';
-ColorIcons.storyName = 'Icon Colors';
-ColorsChips.storyName = 'Chip Colors';
-ColorsOutlinedChips.storyName = 'Outlined';
-Dense.storyName = 'Dense';
+export const Disabled = () => ({
+	data() {
+		return {
+			clicked: false,
+		};
+	},
+	template: `<farm-box>
+			clicked: {{clicked}}
+			<farm-collapsible
+				icon="clipboard"
+				title="With Button"
+				:disabled-button="true"
+				:has-button="true"
+				@onClick="value => clicked = !clicked" >collapsible content</farm-collapsible>
+		</farm-box>`,
+});
+
+export const Custom = () => ({
+	template: `
+		<farm-collapsible title="" custom open>
+		<template #custom>
+			<farm-row justify="space-between" align="center">
+			<farm-col md="6">
+			<farm-caption>caption</farm-caption>
+			</farm-col>
+			<farm-col md="6" justify="end"
+			align="end">
+			<farm-btn
+
+			>
+				custom
+			</farm-btn>
+			</farm-col>
+			</farm-row>
+		</template>
+		collapsible content
+		</farm-collapsible>
+		`,
+});
+
+export const CustomHeaderContent = () => ({
+	template: `
+		<farm-collapsible title="" custom-header>
+		<template #header-content>
+			<farm-row>
+				<farm-col md="12">
+					<farm-bodytext color="success">initial text</farm-bodytext>
+				</farm-col>
+			</farm-row>
+
+			<farm-row class="pt-4">
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold"
+						>text here</farm-caption
+					>
+					123455
+				</farm-col>
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold"
+						>label here</farm-caption
+					>
+
+					<farm-caption variation="medium" class="my-1">R$ 1000</farm-caption>
+				</farm-col>
+
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold">LABEL HERE</farm-caption>
+
+					<farm-caption		 variation="medium" class="my-1">R$ 1000</farm-caption>
+				</farm-col>
+
+				<farm-col>
+					<farm-caption variation="semiBold"
+						>Label here (text here)</farm-caption
+					>
+					<farm-caption variation="medium" class="my-1">value here</farm-caption>
+				</farm-col>
+		</farm-row>
+		</template>
+
+		<farm-bodytext >collapsible content</farm-bodytext>
+		</farm-collapsible>
+		`,
+});
+
+export const CustomBodyContent = () => ({
+	template: `
+		<farm-collapsible title="simple title"  custom-body>
+		<farm-row extraDecrease style="background-color:#f5f5f5;" class="px-4">
+		<farm-col class="collapsible-stories-class-with-line">
+			<farm-caption variation="semiBold"
+				>text here</farm-caption
+			>
+			123455
+		</farm-col>
+		<farm-col class="collapsible-stories-class-with-line">
+			<farm-caption variation="semiBold"
+				>label here</farm-caption
+			>
+
+			<farm-caption variation="medium" class="my-1">R$ 1000</farm-caption>
+		</farm-col>
+
+		<farm-col class="collapsible-stories-class-with-line">
+			<farm-caption variation="semiBold">LABEL HERE</farm-caption>
+
+			<farm-caption		 variation="medium" class="my-1">R$ 1000</farm-caption>
+		</farm-col>
+
+		<farm-col>
+			<farm-caption variation="semiBold"
+				>Label here (text here)</farm-caption
+			>
+			<farm-caption variation="medium" class="my-1">value here</farm-caption>
+		</farm-col>
+		</farm-row>
+		</farm-collapsible>
+		`,
+});
+
+export const CustomHeaderAndBodyContent = () => ({
+	template: `
+		<farm-collapsible title="" custom-header custom-body>
+
+		<template #header-content>
+			<div class="mb-4">
+				<farm-row>
+					<farm-col md="12">
+						<farm-bodytext color="success">initial text</farm-bodytext>
+					</farm-col>
+				</farm-row>
+
+				<farm-row class="pt-4">
+					<farm-col class="collapsible-stories-class-with-line">
+						<farm-caption variation="semiBold"
+							>text here</farm-caption
+						>
+						123455
+					</farm-col>
+					<farm-col class="collapsible-stories-class-with-line">
+						<farm-caption variation="semiBold"
+							>label here</farm-caption
+						>
+
+						<farm-caption variation="medium" class="my-1">R$ 1000</farm-caption>
+					</farm-col>
+
+					<farm-col class="collapsible-stories-class-with-line">
+						<farm-caption variation="semiBold">LABEL HERE</farm-caption>
+
+						<farm-caption		 variation="medium" class="my-1">R$ 1000</farm-caption>
+					</farm-col>
+
+					<farm-col>
+						<farm-caption variation="semiBold"
+							>Label here (text here)</farm-caption
+						>
+						<farm-caption variation="medium" class="my-1">value here</farm-caption>
+					</farm-col>
+				</farm-row>
+			</div>
+		</template>
+
+			<farm-row extraDecrease style="background-color:#f5f5f5;" class="mt-5 px-2">
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold"
+						>text here</farm-caption
+					>
+					123455
+				</farm-col>
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold"
+						>label here</farm-caption
+					>
+
+					<farm-caption variation="medium" class="my-1">R$ 1000</farm-caption>
+				</farm-col>
+
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold">LABEL HERE</farm-caption>
+
+					<farm-caption		 variation="medium" class="my-1">R$ 1000</farm-caption>
+				</farm-col>
+
+				<farm-col>
+					<farm-caption variation="semiBold"
+						>Label here (text here)</farm-caption
+					>
+					<farm-caption variation="medium" class="my-1">value here</farm-caption>
+				</farm-col>
+			</farm-row>
+		</farm-collapsible>
+		`,
+});
+
+export const Plain = () => ({
+	template: `
+		<farm-collapsible title="" custom-header plain>
+		<template #header-content>
+			<farm-row>
+				<farm-col md="12">
+					<farm-bodytext color="success">initial text</farm-bodytext>
+				</farm-col>
+			</farm-row>
+
+			<farm-row class="pt-4">
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold"
+						>text here</farm-caption
+					>
+					123455
+				</farm-col>
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold"
+						>label here</farm-caption
+					>
+
+					<farm-caption variation="medium" class="my-1">R$ 1000</farm-caption>
+				</farm-col>
+
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold">LABEL HERE</farm-caption>
+
+					<farm-caption		 variation="medium" class="my-1">R$ 1000</farm-caption>
+				</farm-col>
+
+				<farm-col>
+					<farm-caption variation="semiBold"
+						>Label here (text here)</farm-caption
+					>
+					<farm-caption variation="medium" class="my-1">value here</farm-caption>
+				</farm-col>
+		</farm-row>
+		</template>
+
+		<farm-bodytext >collapsible content</farm-bodytext>
+		</farm-collapsible>
+		`,
+});

package/src/components/Collapsible/Collapsible.vue

@@ -1,14 +1,21 @@
 <template>
 	<farm-card class="collapsible">
-		<farm-card-content gutter="md">
+		<farm-card-content
+			gutter="md"
+			:class="{ 'pb-0': customBody }"
+		>
 			<div
+				v-if="!customHeader"
 				class="collapsible__header"
 				@click="onToggleCollapsible(status)"
 			>
-				<div class="collapsible__content-title">
+				<div
+					class="collapsible__content-title"
+					:class="{ 'full-width': custom, 'pb-4': customBody }"
+				>
 					<div
 						class="collapsible__icon collapsible__icon--main"
-						v-if="icon !== ''"
+						v-if="icon !== '' && !custom"
 					>
 						<farm-icon
 							size="md"
@@ -20,17 +27,23 @@
 					<farm-heading
 						type="6"
 						color="black"
+						v-if="!custom"
 					>
 						{{ title }}
 					</farm-heading>
 					<farm-btn
 						outlined
 						class="ml-6"
-						v-if="hasButton"
-						@click.stop="$emit('onClick')"
+						v-if="hasButton && !custom"
+						:disabled="disabledButton"
+						@click.stop="onClick()"
 					>
 						{{ labelButton }}
 					</farm-btn>
+					<slot
+						name="custom"
+						v-if="custom"
+					></slot>
 				</div>
 				<div class="collapsible__content-right">
 					<div
@@ -56,7 +69,42 @@
 					</div>
 				</div>
 			</div>
-			<transition name="fade">
+
+			<div
+				v-if="customHeader"
+				class="collapsible__header--custom"
+				:class="plain ? 'collapsible__header--plain' : ''"
+				@click="onToggleCollapsible(status)"
+			>
+				<slot name="header-content"></slot>
+				<div
+					v-if="!plain"
+					class="collapsible__content-right--custom"
+				>
+					<div class="collapsible__icon collapsible__icon--arrow">
+						<farm-icon
+							size="md"
+							color="primary"
+						>
+							{{ arrowIcon }}
+						</farm-icon>
+					</div>
+				</div>
+			</div>
+
+			<transition
+				v-if="customBody"
+				name="fade"
+			>
+				<div v-show="status">
+					<slot></slot>
+				</div>
+			</transition>
+
+			<transition
+				v-else
+				name="fade"
+			>
 				<div
 					class="collapsible__body"
 					v-show="status"
@@ -98,42 +146,56 @@ export default {
 			default: false,
 		},
 		/**
-		 * show Chip
+		 * Show Chip?
 		 */
 		showChip: {
 			type: Boolean,
 			default: false,
 		},
 		/**
-		 * text of Chip
+		 * Chip text?
 		 */
 		textChip: {
 			type: String,
 			default: '',
 		},
 		/**
-		 * has butotn
+		 * Has button?
 		 */
 		hasButton: {
 			type: Boolean,
 			default: false,
 		},
 		/**
-		 * export button
+		 * plain layout
+		 */
+		plain: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Disabled button
+		 */
+		disabledButton: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Export button?
 		 */
 		onExport: {
 			type: Boolean,
 			default: false,
 		},
 		/**
-		 * label button
+		 * Button label
 		 */
 		labelButton: {
 			type: String,
 			default: 'Exportar',
 		},
 		/**
-		 * color of Chip
+		 * Chip color
 		 */
 		colorChip: {
 			type: String as PropType<
@@ -168,26 +230,47 @@ export default {
 			default: 'secondary-green',
 		},
 		/**
-		 * Is dense
+		 * Is dense?
 		 */
 		dense: {
 			type: Boolean,
 			default: false,
 		},
 		/**
-		 * Is outlined
+		 * Is outlined?
 		 */
 		outlined: {
 			type: Boolean,
 			default: false,
 		},
 		/**
-		 * Is variation
+		 * Is variation?
 		 */
 		variation: {
 			type: String,
 			default: 'base',
 		},
+		/**
+		 * Is custom?
+		 */
+		custom: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Is custom body?
+		 */
+		customBody: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Is custom header?
+		 */
+		customHeader: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	setup(props, { emit }) {
@@ -201,10 +284,15 @@ export default {
 			emit('open', status.value);
 		}
 
+		function onClick() {
+			emit('onClick');
+		}
+
 		return {
 			status,
 			arrowIcon,
 			onToggleCollapsible,
+			onClick,
 		};
 	},
 };

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

@@ -28,6 +28,14 @@ describe('Collapsible component', () => {
 				expect(wrapper.emitted().open).toBeDefined();
 			});
 		});
+
+		describe('onClick', () => {
+			it('should emit event', () => {
+				component.onClick();
+				expect(wrapper.emitted().onClick).toBeDefined();
+			});
+		});
+
 	});
 
 	describe('Computed properties', () => {

package/src/components/DatePicker/DatePicker.stories.js

@@ -112,7 +112,7 @@ export const AllowedDates = () => ({
 		<farm-col cols="12">
 			allowed dates: {{ allowedDates }}<br />
 			selected date: {{ date }}
-		<farm-col>
+		</farm-col>
 	</farm-row>`,
 });
 
@@ -131,7 +131,7 @@ export const DisabledDates = () => ({
 		<farm-col cols="12">
 			disabled dates: {{ disabledDates }}<br />
 			selected date: {{ date }}
-		<farm-col>
+		</farm-col>
 	</farm-row>`,
 });
 

package/src/components/MainFilter/MainFilter.stories.js

@@ -78,7 +78,32 @@ export const Application = () => ({
 
 export const FullWidth = () => ({
 	template: `
-	<div style="max-width: 480px; padding-top: 32px; margin-left: 32px;">
+	<farm-box>
 		<farm-form-mainfilter  label="Label" fullWidth :hasExtraFilters="false"/>
-	</div>`,
+	</farm-box>`,
+});
+
+export const InitialValue = () => ({
+	template: `
+	<farm-row>
+		<farm-col md="4">
+		<farm-form-mainfilter label="Label" initialValue="with initial value" />
+		</farm-col>
+	</farm-row>`,
+});
+
+export const onInputChange = () => ({
+	setup() {
+		function handler(value) {
+			alert(`onInputChange: ${value}`);
+		}
+
+		return { handler };
+	},
+	template: `
+	<farm-row>
+		<farm-col md="4">
+		<farm-form-mainfilter label="Label" @onInputChange="handler"  />
+		</farm-col>
+	</farm-row>`,
 });