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

package/package.json

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

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);
 
@@ -85,21 +98,19 @@ export default Vue.extend({
 			const activatorBoundingClientRect = activator.value.children[0].getBoundingClientRect();
 			const popupClientRect = popup.value.getBoundingClientRect();
 
-			console.log(activatorBoundingClientRect);
-
 			let offsetTop =
 				parentBoundingClientRect.top +
 				window.scrollY +
 				(!bottom.value ? 0 : activatorBoundingClientRect.height);
 
-			let offsetLeft = parentBoundingClientRect.left;
+			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/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)+#{"%"};
+        }
+    }
 }

package/src/components/layout/Col/Col.stories.js

@@ -7,36 +7,138 @@ export default {
 		docs: {
 			description: {
 				component: `Col<br />
-				selector: <em>farm-col</em><br />
-				<span style="color: var(--farm-extra-1-base);">development</span>
-				`,
+					selector: <em>farm-col</em><br />
+					<span style="color: var(--farm-extra-1-base);">development</span>
+`,
 			},
 		},
 		viewMode: 'docs',
 	},
 };
 
+const style = {
+	border: '1px solid var(--farm-extra-1-darken)',
+	backgroundColor: 'var(--farm-extra-1-lighten)',
+};
+
 export const Primary = () => ({
-	template: '<farm-col>col</farm-col>',
+	data() {
+		return {
+			style,
+		};
+	},
+	template: '<farm-col :style="style">col</farm-col>',
 });
 export const Xl = () => ({
-	template: '<farm-col xl="3">xl: 3</farm-col>',
+	data() {
+		return {
+			style,
+		};
+	},
+	template: `<farm-row>
+				<farm-col xl="4" :style="style">4</farm-col>
+				<farm-col xl="6" :style="style">6</farm-col>
+				<farm-col xl="12" :style="style">12</farm-col>
+				<farm-col xl="2" :style="style">2</farm-col>
+			</farm-row>`,
 });
 export const Lg = () => ({
-	template: '<farm-col lg="4">lg: 4</farm-col>',
+	data() {
+		return {
+			style,
+		};
+	},
+	template: `<farm-row>
+		<farm-col lg="4" :style="style">4</farm-col>
+		<farm-col lg="6" :style="style">6</farm-col>
+		<farm-col lg="12" :style="style">12</farm-col>
+		<farm-col lg="2" :style="style">2</farm-col>
+	</farm-row>`,
 });
 export const Md = () => ({
-	template: '<farm-col md="6">md: 6</farm-col>',
+	data() {
+		return {
+			style,
+		};
+	},
+	template: `<farm-row>
+		<farm-col md="4" :style="style">4</farm-col>
+		<farm-col md="6" :style="style">6</farm-col>
+		<farm-col md="12" :style="style">12</farm-col>
+		<farm-col md="2" :style="style">2</farm-col>
+		</farm-row>`,
 });
+
 export const Sm = () => ({
-	template: '<farm-col sm="4">sm: 4</farm-col>',
+	data() {
+		return {
+			style,
+		};
+	},
+	template: `<farm-row>
+			<farm-col sm="4" :style="style">4</farm-col>
+			<farm-col sm="6" :style="style">6</farm-col>
+			<farm-col sm="12" :style="style">12</farm-col>
+			<farm-col sm="2" :style="style">2</farm-col>
+		</farm-row>`,
 });
+
 export const Xs = () => ({
-	template: '<farm-col xs="4">xs: 4</farm-col>',
+	data() {
+		return {
+			style,
+		};
+	},
+	template: `<farm-row>
+		<farm-col xs="4" :style="style">4</farm-col>
+		<farm-col xs="6" :style="style">6</farm-col>
+		<farm-col xs="12" :style="style">12</farm-col>
+		<farm-col xs="2" :style="style">2</farm-col>
+	</farm-row>`,
 });
+
 export const Combination = () => ({
-	template: '<farm-col xl="3" xs="4">xl: 3 - xs: 4</farm-col>',
+	data() {
+		return {
+			style,
+		};
+	},
+	template: `<div>
+		<farm-col lg="5" md="4" sm="3" :style="style">lg: 5 - md: 4 - sm: 3</farm-col>
+	</div>`,
 });
 export const TagP = () => ({
 	template: '<farm-col tag="p">col</farm-col>',
-});
+});
+
+export const CompareToVCol = () => ({
+	data() {
+		return {
+			style,
+		};
+	},
+	template: `<div>
+
+		<h4>LG 3</h4>
+		<farm-col lg="3" :style="style">farm</farm-col>
+		<v-col lg="3" :style="style">v-col</v-col>
+
+		<h4>MD 3</h4>
+		<farm-col md="3" :style="style">farm</farm-col>
+		<v-col md="3" :style="style">v-col</v-col>
+
+
+		<h4>SM 3</h4>
+		<farm-col sm="3" :style="style">farm</farm-col>
+		<v-col sm="3" :style="style">v-col</v-col>
+		</div>`,
+});
+
+export const NoGutters = () => ({
+	data() {
+		return {
+			style,
+		};
+	},
+	template: '<farm-col :no-gutters="true" :style="style">col</farm-col>',
+});