@farm-investimentos/front-mfe-components 11.3.0 → 11.3.2

package/package.json

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

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

@@ -1,46 +1,4 @@
 <template>
-	<!--
-	<v-menu content-class="elevation-1" v-model="togglePopover" :offset-y="true" :rounded="'b t-0'">
-		<template v-slot:activator="{ on, attrs }">
-			<farm-btn
-				v-bind="attrs"
-				v-on="on"
-				dense
-				class="farm-btn--responsive farm-btn--import"
-				outlined
-				color="secondary"
-				title="Importar"
-				@onClick="togglePopover = true"
-			>
-				Importar
-				<i
-					:class="{
-						'ml-2': true,
-						'mr-0': true,
-						mdi: true,
-						'mdi-chevron-up': togglePopover,
-						'mdi-chevron-down': !togglePopover,
-					}"
-				>
-				</i>
-			</farm-btn>
-		</template>
-
-		<v-list dense class="pa-0">
-			<v-list-item
-				v-for="option in optionsList"
-				:key="option.listenerKey"
-				link
-				:title="option.title"
-				@click="$emit('onClick', option.listenerKey)"
-			>
-				<v-list-item-content>
-					<v-list-item-title>{{ option.title }}</v-list-item-title>
-				</v-list-item-content>
-			</v-list-item>
-		</v-list>
-	</v-menu>
--->
 	<farm-contextmenu v-model="value" :bottom="true">
 		<template v-slot:activator="{}">
 			<farm-btn outlined title="Importar" color="secondary" @click="toggleValue">

package/src/components/Card/Card.scss

@@ -5,6 +5,7 @@
 	background: #ffffff;
 	border: 1px solid var(--farm-stroke-base);
 	border-radius: 5px;
+	overflow: hidden;
 
 	&[shadow] {
 		@include addShadow;

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

@@ -18,8 +18,10 @@ export default {
 
 export const Primary = () => ({
 	template: `
-        <farm-card>
-			Conteúdo do Card
-        </farm-card>
-    `,
+		<farm-card>
+		Card content
+		</farm-card>
+	`,
 });
+
+

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

@@ -51,3 +51,13 @@ export const Shadow = () => ({
 	</farm-card>
     </div>`,
 });
+
+export const BackgroundChildren = () => ({
+	template: `<div style="width: 480px;">
+    <farm-card>
+		<farm-card-content style="background: #DADADA">
+			Content!
+		</farm-card-content>
+	</farm-card>
+    </div>`,
+});

package/src/components/Checkbox/Checkbox.scss

@@ -1,9 +1,11 @@
 @import '../../configurations/theme-colors';
 @import '../../configurations/variables';
+@import '../../configurations/mixins';
 
 .farm-checkbox__container {
     display: flex;
     flex-direction: row;
+    position: relative;
 
     .farm-label {
         margin-left: 8px;
@@ -11,7 +13,9 @@
 
     @each $color in $theme-colors-list {
         &#{'[color=' + $color + ']'} {
-            .farm-checkbox--checked {
+
+            .farm-checkbox--checked,
+            .farm-checkbox--indeterminate {
                 background-color: themeColor($color);
                 border-color: themeColor($color);
 
@@ -31,11 +35,13 @@
             }
         }
     }
+
+    @include activateRipple;
 }
 
+@include rippleStyles;
+
 .farm-checkbox {
-    width: 20px;
-    height: 20px;
     display: flex;
     justify-content: center;
     border: 2px solid #5c5c5c;
@@ -43,6 +49,7 @@
     cursor: pointer;
     line-height: 0;
     transition: all 0.4s;
+    z-index: 2;
 
     &--disabled {
         border-color: #dadada;
@@ -57,7 +64,6 @@
     .farm-icon {
         color: white;
     }
-
 }
 
 @each $size,
@@ -66,4 +72,11 @@ $value in $sizes {
         width: $value;
         height: $value;
     }
+
+    #{'.farm-ripple[size=' + $size +']'} {
+        height: $value*1.75;
+        width: $value*1.75;
+        left: -$value*0.4;
+        top: -$value*0.4 ;
+    }
 }

package/src/components/Checkbox/Checkbox.stories.js

@@ -106,3 +106,15 @@ export const Sizes = () => ({
         </div>
 	</div>`,
 });
+
+export const Indeterminate = () => ({
+	data() {
+		return {
+			sizes,
+			isChecked: true,
+		};
+	},
+	template: `<div>
+		<farm-checkbox :indeterminate="true" v-model="isChecked"  />
+	</div>`,
+});

package/src/components/Checkbox/Checkbox.vue

@@ -5,17 +5,20 @@
 				'farm-checkbox': true,
 				'farm-checkbox--checked': innerValue,
 				'farm-checkbox--disabled': disabled,
+				'farm-checkbox--indeterminate': indeterminate,
 				'farm-checkbox--lighten': variation === 'lighten',
 				'farm-checkbox--darken': variation === 'darken',
 			}"
 			:size="$props.size"
 			@click="toggleValue"
 		>
-			<farm-icon :size="$props.size" v-if="innerValue">check</farm-icon>
+			<farm-icon :size="$props.size" v-if="innerValue && !indeterminate">check</farm-icon>
+			<farm-icon :size="$props.size" v-if="indeterminate">minus</farm-icon>
 		</span>
 		<farm-label v-if="label">
 			{{ label }}
 		</farm-label>
+		<div class="farm-ripple" :size="$props.size" v-if="!disabled"></div>
 	</div>
 </template>
 <script lang="ts">
@@ -48,7 +51,18 @@ export default Vue.extend({
 			default: '',
 		},
 		color: {
-			type: String,
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
+			>,
 			default: 'primary',
 		},
 		/**
@@ -65,6 +79,10 @@ export default Vue.extend({
 			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
 			default: 'md',
 		},
+		/**
+		 * Sets an indeterminate state for the simple checkbox
+		 */
+		indeterminate: { type: Boolean, default: false },
 	},
 	setup(props, { emit }) {
 		const innerValue = ref(props.value);

package/src/components/ContextMenu/ContextMenu.scss

@@ -2,6 +2,7 @@
 
 .farm-contextmenu {
 	display: inline-block;
+	flex: 0 1 auto;
 }
 
 .farm-contextmenu__popup {

package/src/components/ContextMenu/ContextMenu.stories.js

@@ -101,4 +101,63 @@ export const ComplexContent = () => ({
             </template>
         </farm-contextmenu>
 	</div>`,
+});
+
+export const OverflowContent = () => ({
+	data() {
+		return {
+			value: false,
+		};
+	},
+	methods: {
+		toggleValue() {
+			this.value = !this.value;
+		},
+	},
+	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex; flex-direction: column">
+		<div>
+		default: 360px
+		</div>
+        <farm-contextmenu v-model="value">
+            first line<br />new line<br />new line<br />
+			new line<br />new line<br />new line<br />
+			new line<br />new line<br />new line<br />
+			new line<br />new line<br />new line<br />
+			new line<br />new line<br />new line<br />
+			new line<br />new line<br />new line<br />
+			new line<br />new line<br />new line<br />
+			new line<br />new line<br />last line<br />
+            <template v-slot:activator="{ on, attrs }">
+                <farm-btn @click="toggleValue">toggle</farm-btn>
+            </template>
+        </farm-contextmenu>
+	</div>`,
+});
+
+export const MaxHeight = () => ({
+	data() {
+		return {
+			value: false,
+		};
+	},
+	methods: {
+		toggleValue() {
+			this.value = !this.value;
+		},
+	},
+	template: `<div style="padding-left: 120px; padding-top: 80px; display: flex; flex-direction: column;">
+        <farm-contextmenu v-model="value" maxHeight="160">
+            first line<br />new line<br />new line<br />
+			new line<br />new line<br />new line<br />
+			new line<br />new line<br />new line<br />
+			new line<br />new line<br />new line<br />
+			new line<br />new line<br />new line<br />
+			new line<br />new line<br />new line<br />
+			new line<br />new line<br />new line<br />
+			new line<br />new line<br />last line<br />
+            <template v-slot:activator="{ on, attrs }">
+                <farm-btn @click="toggleValue">toggle</farm-btn>
+            </template>
+        </farm-contextmenu>
+	</div>`,
 });

package/src/components/ContextMenu/ContextMenu.vue

@@ -38,13 +38,26 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Max height
+		 */
+		maxHeight: {
+			type: [Number, String],
+			default: 320,
+		},
 	},
 	setup(props, { emit }) {
 		const parent = ref(null);
 		const popup = ref(null);
 		const activator = ref(null);
-		const styles = reactive({ minWidth: 0, top: 0, zIndex: 1 } as any);
-		const { bottom } = toRefs(props);
+		const { bottom, maxHeight } = toRefs(props);
+
+		const styles = reactive({
+			minWidth: 0,
+			top: 0,
+			zIndex: 1,
+			maxHeight: parseInt(maxHeight.value as string) + 'px',
+		} as any);
 
 		const inputValue = ref(props.value);
 
@@ -82,21 +95,22 @@ export default Vue.extend({
 
 		const calculatePosition = () => {
 			const parentBoundingClientRect = parent.value.getBoundingClientRect();
+			const activatorBoundingClientRect = activator.value.children[0].getBoundingClientRect();
 			const popupClientRect = popup.value.getBoundingClientRect();
 
 			let offsetTop =
 				parentBoundingClientRect.top +
 				window.scrollY +
-				(!bottom.value ? 0 : parentBoundingClientRect.height);
+				(!bottom.value ? 0 : activatorBoundingClientRect.height);
 
-			let offsetLeft = parentBoundingClientRect.left;
-			if (popupClientRect.width > parentBoundingClientRect.width) {
+			let offsetLeft = activatorBoundingClientRect.left;
+			if (popupClientRect.width > activatorBoundingClientRect.width) {
 				offsetLeft =
-					offsetLeft + parentBoundingClientRect.width / 2 - popupClientRect.width / 2;
+					offsetLeft + activatorBoundingClientRect.width / 2 - popupClientRect.width / 2;
 			}
 			styles.minWidth =
-				(parentBoundingClientRect.width > 96
-					? parseInt(parentBoundingClientRect.width)
+				(activatorBoundingClientRect.width > 96
+					? parseInt(activatorBoundingClientRect.width)
 					: 96) + 'px';
 
 			//Do not allow to open outside window

package/src/components/DataTableHeader/DataTableHeader.vue

@@ -34,10 +34,12 @@
 				</span>
 
 				<span v-if="isTHDataTableSelect(item) && showCheckbox" class="span-checkbox">
-					<!--
+					<farm-checkbox
+						size="sm"
+						v-model="inputVal"
 						:indeterminate="headerProps.someItems && !headerProps.everyItem"
-					-->
-					<farm-checkbox size="sm" v-model="inputVal" @input="selectAll" />
+						@input="selectAll"
+					/>
 				</span>
 			</th>
 		</tr>

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

@@ -4,7 +4,7 @@ import IdCaption from './';
 export default {
 	title: 'Display/IdCaption',
 	component: IdCaption,
-    decorators: [withDesign],
+	decorators: [withDesign],
 	parameters: {
 		docs: {
 			description: {
@@ -132,3 +132,20 @@ export const IconBoxCustomColor = () => ({
     </farm-idcaption>
     `,
 });
+
+export const CustomTag = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline"
+    copyText="texto a copiar"
+    :link="true"
+    >
+        <template v-slot:title>
+            <b>Upper Line Text</b>
+        </template>
+        <template v-slot:subtitle>
+            <b>Lower:</b> Line Text Line Text Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});

package/src/components/IdCaption/IdCaption.vue

@@ -6,7 +6,7 @@
 		>
 			<farm-caption variation="medium" v-if="hasTitle">
 				<span>
-					{{ $slots.title ? $slots.title[0].text : null }}
+					<slot name="title"></slot>
 					<farm-btn icon color="gray" v-if="link" @click="$emit('onLinkClick')">
 						<farm-icon size="xs">open-in-new</farm-icon>
 					</farm-btn>
@@ -15,7 +15,7 @@
 
 			<farm-caption variation="regular" color="gray" v-if="hasSubtitle">
 				<span>
-					{{ $slots.subtitle ? $slots.subtitle[0].text : null }}
+					<slot name="subtitle"></slot>
 					<farm-copytoclipboard v-if="copyText" :toCopy="copyText" />
 				</span>
 			</farm-caption>

package/src/components/MultipleFilePicker/MultipleFilePicker.scss

@@ -129,10 +129,6 @@ section {
 	}
 }
 
-.mdi {
-	color: #fff;
-}
-
 .download-button {
 	&__text {
 		font-size: 0.95rem !important;

package/src/components/MultipleFilePicker/MultipleFilePicker.vue

@@ -3,27 +3,27 @@
 		<input
 			type="file"
 			name="file"
+			multiple
+			ref="upload"
 			:class="{
 				'hidden-input': hasFiles,
 			}"
-			@change="fileChange($event.target.files)"
 			:accept="acceptedFileTypes"
-			multiple
-			ref="upload"
+			@change="fileChange($event.target.files)"
 		/>
 		<div v-if="!hasFiles" class="selectfile-container">
-			<farm-icon class="upload-icon" color="secondary" size="lg" @click="addMoreFiles"
-				>cloud-upload</farm-icon
-			>
+			<farm-icon class="upload-icon" size="lg" @click="addMoreFiles">
+				cloud-upload
+			</farm-icon>
 			<p>Clique para selecionar ou arraste o arquivo aqui</p>
 		</div>
 
 		<ul
+			v-if="downloadFiles.length"
 			class="listFilesStyled listFilesStyled--download"
 			:class="{
 				'listFilesStyled--margin-bottom': files.length === 0,
 			}"
-			v-if="downloadFiles.length"
 		>
 			<li class="itemFilesStyled" v-for="file in downloadFiles" :key="file.id">
 				<div class="itemFilesContentStyled">
@@ -66,26 +66,26 @@
 					</div>
 				</div>
 				<div class="itemFilesContentButtonStyled">
-					<span
-						class="mdi mdi-close"
-						aria-role="button"
+					<farm-btn
+						icon
 						title="Remover"
+						color="neutral"
+						size="md"
 						@click.prevent="remove(index)"
-					></span>
-
-					<span class="mdi mdi-check" v-if="file.success"></span>
+					>
+						<farm-icon size="md">close</farm-icon>
+					</farm-btn>
+					<farm-icon size="md" color="neutral" v-if="file.success">check</farm-icon>
 				</div>
 			</li>
 		</ul>
 
 		<farm-btn
-			depressed
+			v-if="hasFiles"
 			outlined
 			title="Escolher Outro"
-			color="gray"
 			class="farm-btn--responsive"
 			:disabled="disabledButton"
-			v-if="hasFiles"
 			@click="addMoreFiles"
 		>
 			Escolher Outro

package/src/components/layout/Col/Col.scss

@@ -1,5 +1,54 @@
+@import '../../../configurations/mixins.scss';
+
 .farm-col {
-    width: 100%;
-    padding: 12px;
-    display: flex;
+    flex: 0 0 100%;
+    max-width: 100%;
+    padding: 0 24px;
+
+    &--no-gutters {
+        padding: 0;
+    }
+}
+
+@for $i from 1 through 12 {
+    .farm-col--xs-#{$i * 1} {
+        flex: 0 0 (100/12 * $i)+#{"%"};
+        max-width: (100/12 * $i)+#{"%"};
+    }
+}
+
+@include fromXs {
+    @for $i from 1 through 12 {
+        .farm-col--sm-#{$i * 1} {
+            flex: 0 0 (100/12 * $i)+#{"%"};
+            max-width: (100/12 * $i)+#{"%"};
+        }
+    }
+}
+
+@include fromSm {
+    @for $i from 1 through 12 {
+        .farm-col--md-#{$i * 1} {
+            flex: 0 0 (100/12 * $i)+#{"%"};
+            max-width: (100/12 * $i)+#{"%"};
+        }
+    }
+}
+
+@include fromMd {
+    @for $i from 1 through 12 {
+        .farm-col--lg-#{$i * 1} {
+            flex: 0 0 (100/12 * $i)+#{"%"};
+            max-width: (100/12 * $i)+#{"%"};
+        }
+    }
+}
+
+@include fromLg {
+    @for $i from 1 through 12 {
+        .farm-col--xl-#{$i * 1} {
+            flex: 0 0 (100/12 * $i)+#{"%"};
+            max-width: (100/12 * $i)+#{"%"};
+        }
+    }
 }