@farm-investimentos/front-mfe-components 11.7.3 → 11.8.1

package/package.json

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

package/src/components/AlertBox/AlertBox.scss

@@ -0,0 +1,45 @@
+@import '../../configurations/theme-colors';
+
+.farm-alert-box {
+	background-color: themeColor('primary', 'lighten');
+	border-radius: 5px;
+	color: themeColor('primary', 'darken');
+	display: flex;
+	padding: 8px 16px;
+	position: relative;
+	min-height: 40px;
+
+	&__content {
+		flex: 1;
+
+		&--with-dismissable {
+			margin-right: 40px;
+		}
+	}
+
+	&__icon {
+		align-items: center;
+		display: flex;
+		margin-right: 16px;
+	}
+
+	&__close {
+		position: absolute;
+		right: 8px;
+		bottom: 50%;
+		transform: translateY(50%);
+	}
+
+	&--dense {
+		display: inline-flex;
+	}
+}
+
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+	opacity: 0;
+}

package/src/components/AlertBox/AlertBox.stories.js

@@ -18,4 +18,33 @@ export default {
 
 export const Primary = () => ({
 	template: '<farm-alertbox>alert box</farm-alertbox>',
-});
+});
+
+export const withIcon = () => ({
+	template: '<farm-alertbox icon="book">alert box</farm-alertbox>',
+});
+
+export const withDismissable = () => ({
+	template: '<farm-alertbox dismissable>alert box</farm-alertbox>',
+});
+
+export const dense = () => ({
+	template: '<farm-alertbox dismissable dense>alert box</farm-alertbox>',
+});
+
+export const full = () => ({
+	template: '<farm-alertbox icon="book" dismissable>alert box</farm-alertbox>',
+});
+
+export const moreThanOneLine = () => ({
+	data() {
+		return {
+			text: `lorem ipsu lorem ipsu lorem ipsu lorem ipsu
+		lorem ipsu lorem ipsu lorem ipsu lorem ipsu lorem ipsu
+		lorem ipsu lorem ipsu lorem ipsu lorem ipsu lorem ipsu lorem ipsu lorem ipsu
+		lorem ipsu lorem ipsu lorem ipsu lorem ipsu lorem ipsu
+		lorem ipsu lorem ipsu lorem ipsu`,
+		};
+	},
+	template: '<farm-alertbox icon="book" dismissable>{{text}}</farm-alertbox>',
+});

package/src/components/AlertBox/AlertBox.vue

@@ -1,19 +1,76 @@
 <template>
-	<div>
-		<!--
-			@slot Use this slot for the content
-		-->
-		<slot></slot>
-	</div>
+	<transition name="fade">
+		<div v-if="visible" :class="{ 'farm-alert-box': true, 'farm-alert-box--dense': dense }">
+			<farm-icon
+				v-if="icon"
+				class="farm-alert-box__icon"
+				color="primary"
+				variation="darken"
+				size="md"
+				>{{ icon }}</farm-icon
+			>
+			<div
+				:class="{
+					'farm-alert-box__content': true,
+					'farm-alert-box__content--with-dismissable': dismissable,
+				}"
+			>
+				<farm-bodytext
+					:type="1"
+					variation="regular"
+					color="primary"
+					color-variation="darken"
+				>
+					<slot></slot>
+				</farm-bodytext>
+			</div>
+			<farm-btn class="farm-alert-box__close" v-if="dismissable" icon size="md">
+				<farm-icon color="primary" variation="darken" size="md">close</farm-icon>
+			</farm-btn>
+		</div>
+	</transition>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { ref } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-alertbox',
-	props: {},
-	setup() {},
+	props: {
+		/**
+		 * Left Icon?
+		 */
+		icon: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Close icon and option to close AlertBox?
+		 */
+		dismissable: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Dense?
+		 */
+		dense: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup() {
+		const visible = ref(true);
+
+		function close() {
+			visible.value = false;
+		}
+
+		return {
+			visible,
+			close,
+		};
+	},
 });
 </script>
 <style lang="scss" scoped>

package/src/components/DialogHeader/DialogHeader.scss

@@ -13,7 +13,7 @@
 
 header {
     font-size: 12px;
-    padding: 16px;
+    padding: 6px 16px;
     background-color: #fff;
     font-weight: 700;
     color: var(--farm-primary-base);
@@ -21,4 +21,10 @@ header {
     display: flex;
     justify-content: flex-start;
     align-items: center;
+
+    >.farm-typography.farm-caption {
+        align-items: center;
+        width: 100%;
+        margin-bottom: 0;
+    }
 }

package/src/components/DialogHeader/DialogHeader.vue

@@ -10,6 +10,7 @@
 		<farm-btn
 			v-if="hasCloseIcon"
 			icon
+			color="secondary"
 			class="farm-dialog-header__close"
 			title="Fechar"
 			@click="onClose"

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

@@ -296,4 +296,38 @@ export const MigrateTextVieldV2 = () => ({
 			form: {{ form }}
         </farm-form>
     `,
-});
+});
+
+export const MigrateSelectV2 = () => ({
+	data() {
+		return {
+			form: {
+				document: '',
+			},
+			validForm: false,
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+			},
+			items: [
+				{ value: null, text: '' },
+				{ value: 1, text: 'label 1' },
+				{ value: 2, text: 'label 2' },
+			],
+			styles,
+		};
+	},
+	template: `
+        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
+			<div>
+				<farm-label :required="true">Documento</farm-label>
+				<farm-select v-model="form.document" :items="items" :rules="[rules.required]" />
+			</div>
+			
+            <div class="footer" :style="[styles.footer]">
+				<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
+				<farm-btn :disabled="!validForm">Salvar</farm-btn>
+            </div>
+			form: {{ form }}
+        </farm-form>
+    `,
+});

package/src/components/Icon/Icon.scss

@@ -2,25 +2,32 @@
 @import '../../configurations/theme-colors';
 
 .farm-icon {
-    align-items: center;
-    display: inline-flex;
-    font-size: 24px;
-    justify-content: center;
-    letter-spacing: normal;
-    line-height: 1;
-    position: relative;
-    text-indent: 0;
+	align-items: center;
+	display: inline-flex;
+	font-size: 24px;
+	justify-content: center;
+	letter-spacing: normal;
+	line-height: 1;
+	position: relative;
+	text-indent: 0;
 
-    @each $color in $theme-colors-list {
-        &#{'--' + $color} {
-            color: var(--farm-#{$color}-base);
-        }
-    }
+	@each $color in $theme-colors-list {
+		&#{'--' + $color} {
+			color: var(--farm-#{$color}-base);
 
-    @each $size,
-    $value in $sizes {
-        &#{'.farm-icon[size=' + $size +']'} {
-            font-size: $value;
-        }
-    }
-}
+			&.farm-icon--lighten {
+				color: var(--farm-#{$color}-lighten);
+			}
+
+			&.farm-icon--darken {
+				color: var(--farm-#{$color}-darken);
+			}
+		}
+	}
+
+	@each $size, $value in $sizes {
+		&#{'.farm-icon[size=' + $size + ']'} {
+			font-size: $value;
+		}
+	}
+}

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

@@ -44,6 +44,32 @@ export const Colors = () => ({
 	</div>`,
 });
 
+export const ColorsLighten = () => ({
+	data() {
+		return {
+			colors: [...colors],
+		};
+	},
+	template: `<div class="icons-container">
+        <farm-icon v-for="color of colors":key="color" :color="color" variation="lighten">
+            book
+        </farm-icon>
+	</div>`,
+});
+
+export const ColorsDarken = () => ({
+	data() {
+		return {
+			colors: [...colors],
+		};
+	},
+	template: `<div class="icons-container">
+        <farm-icon v-for="color of colors":key="color" :color="color" variation="darken">
+            book
+        </farm-icon>
+	</div>`,
+});
+
 export const Sizes = () => ({
 	data() {
 		return {

package/src/components/Icon/Icon.vue

@@ -36,6 +36,10 @@ export default Vue.extend({
 			>,
 			default: 'default',
 		},
+		variation: {
+			type: String as PropType<'lighten' | 'base' | 'darken'>,
+			default: 'base',
+		},
 	},
 
 	data() {
@@ -52,6 +56,8 @@ export default Vue.extend({
 				['farm-icon--' + this.color]: true,
 				mdi: true,
 				['mdi-' + this.icon]: true,
+				'farm-icon--lighten': this.variation === 'lighten',
+				'farm-icon--darken': this.variation === 'darken',
 				...obj,
 			};
 		},

package/src/components/IdCaption/IdCaption.scss

@@ -1,6 +1,6 @@
 .idcaption {
 	display: flex;
-	
+
 	.farm-icon-box {
 		margin-right: 8px;
 	}
@@ -17,11 +17,12 @@
 		}
 
 		.farm-typography {
-			
+
 			margin-bottom: 0;
 			display: flex;
 			flex: none;
-			> span {
+
+			>span {
 				position: relative;
 			}
 		}
@@ -33,4 +34,9 @@
 			top: -8px;
 		}
 	}
+
+	.farm-btn--clickable {
+		position: absolute;
+		top: -50%;
+	}
 }

package/src/components/IdCaption/IdCaption.stories.js

@@ -183,3 +183,21 @@ export const CustomTooltipColor = () => ({
     </farm-idcaption>
     `,
 });
+
+
+export const Teste = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline"
+    copy-text=""
+    :link="true"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+        <template v-slot:subtitle>
+            0
+        </template>
+    </farm-idcaption>
+    `,
+});

package/src/components/IdCaption/IdCaption.vue

@@ -7,7 +7,13 @@
 			<farm-caption variation="medium" v-if="hasTitle">
 				<span>
 					<slot name="title"></slot>
-					<farm-btn icon color="gray" v-if="link" @click="$emit('onLinkClick')">
+					<farm-btn
+						v-if="link"
+						icon
+						color="gray"
+						class="farm-btn--clickable"
+						@click="$emit('onLinkClick')"
+					>
 						<farm-icon size="xs">open-in-new</farm-icon>
 					</farm-btn>
 				</span>

package/src/components/Modal/Modal.scss

@@ -34,20 +34,14 @@
 
     &--content {
         max-height: calc(100vh - 48px);
-        //overflow-y: auto;
         width: 100%;
         padding: 0;
-
         >div {
-            //max-height: calc(100vh - 176px);
-            //max-height: calc(100vh - 64px);
             overflow-y: auto;
             padding: 0 16px;
         }
     }
 
-
-
     &--header {
         position: absolute;
         top: 0;

package/src/components/Modal/Modal.vue

@@ -5,7 +5,7 @@
 			:class="{ 'farm-modal': true, ['farm-modal--size-' + size]: true }"
 			:style="styleObject"
 		>
-			<div class="farm-modal--container teste">
+			<div class="farm-modal--container">
 				<div class="farm-modal--header">
 					<!-- @slot header -->
 					<slot name="header"></slot>

package/src/components/MultipleFilePicker/MultipleFilePicker.vue

@@ -195,15 +195,19 @@ export default Vue.extend({
 				this.$emit('onFileChange', newValue);
 				return;
 			}
-			const invalidTypeArray = newValue.filter(
-				file =>
+			const invalidTypeArray = newValue.filter(file => {
+				const type = file.type;
+
+				return (
 					this.acceptedFileTypes !== '*' &&
-					this.acceptedFileTypes.indexOf(file.type) === -1
-			);
+					(this.acceptedFileTypes.indexOf(file.type) === -1 || !type)
+				);
+			});
 
 			if (invalidTypeArray.length > 0) {
 				const validTypeArray = newValue.filter(file => {
-					if (this.acceptedFileTypes.indexOf(file.type) === -1) {
+					const type = file.type;
+					if (this.acceptedFileTypes.indexOf(file.type) === -1 || !type) {
 						return false;
 					}
 					return true;

package/src/components/Select/Select.scss

@@ -0,0 +1,18 @@
+@import '../TextFieldV2/TextFieldV2.scss';
+
+.farm-listitem--selected {
+	background-color: var(--farm-neutral-lighten);
+}
+
+.farm-contextmenu {
+	width: 100%;
+}
+
+.farm-icon {
+	transition: all ease 0.3s;
+	cursor: pointer;
+
+	&--rotate {
+		transform: rotate(180deg);
+	}
+}

package/src/components/Select/Select.stories.js

@@ -0,0 +1,142 @@
+import { withDesign } from 'storybook-addon-designs';
+import Select from './Select.vue';
+
+export default {
+	title: 'Form/SelectV2',
+	component: Select,
+	decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `Select<br />
+				selector: <em>farm-select</em><br />
+				<span style="color: var(--farm-extra-1-base);">development</span>
+				`,
+			},
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/jnZXo2e0nRJ3fVXl4Et8t4/%E2%9C%8D-Design-System-%7C-BACKUP-(10%2F10%2F2022)?node-id=2491%3A4487',
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			v: null,
+			items: [
+				{ value: 1, text: ' value 1' },
+				{ value: 2, text: ' value 2' },
+				{ value: 3, text: ' value 3' },
+			],
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-select v-model="v" :items="items" />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const InitialValue = () => ({
+	data() {
+		return {
+			v: 1,
+			items: [
+				{ value: 1, text: ' value 1' },
+				{ value: 2, text: ' value 2' },
+				{ value: 3, text: ' value 3' },
+			],
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-select v-model="v" :items="items" />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const Readonly = () => ({
+	data() {
+		return {
+			v: 1,
+			items: [
+				{ value: 1, text: ' value 1' },
+				{ value: 2, text: ' value 2' },
+				{ value: 3, text: ' value 3' },
+			],
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-select v-model="v" :items="items" readonly />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const Disabled = () => ({
+	data() {
+		return {
+			v: 1,
+			items: [
+				{ value: 1, text: ' value 1' },
+				{ value: 2, text: ' value 2' },
+				{ value: 3, text: ' value 3' },
+			],
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-select v-model="v" :items="items" disabled />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const Validate = () => ({
+	data() {
+		return {
+			v: null,
+			items: [
+				{ value: null, text: '' },
+				{ value: 1, text: ' value 1' },
+				{ value: 2, text: ' value 2' },
+				{ value: 3, text: ' value 3' },
+			],
+			rules: {
+				required: value => !!value || 'Required field',
+			},
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-label required>Required</farm-label>
+		<farm-select v-model="v" :items="items" :rules="[rules.required]" />
+		v-model: {{ v }}
+	</div>`,
+});
+
+
+export const Reset = () => ({
+	data() {
+		return {
+			v: 1,
+			items: [
+				{ value: 1, text: ' value 1' },
+				{ value: 2, text: ' value 2' },
+				{ value: 3, text: ' value 3' },
+			],
+			rules: {
+				required: value => !!value || 'Required field',
+			},
+		};
+	},
+	methods: {
+		click() {
+			this.$refs.select.reset();
+		}
+	},
+	template: `<div style="width: 480px">
+		<farm-select v-model="v" :items="items" ref="select" :rules="[rules.required]" />
+		v-model: {{ v }}
+		<farm-btn @click="click">
+			reset
+		</farm-btn>
+	</div>`,
+});