@farm-investimentos/front-mfe-components 13.0.6 → 13.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "13.0.6",
+	"version": "13.1.1",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -24,8 +24,7 @@
 	"dependencies": {
 		"core-js": "^3.8.3",
 		"vue": "2.7.10",
-		"vuetify": "^2.4.5",
-		"vuetify-dialog": "^2.0.17"
+		"vuetify": "^2.4.5"
 	},
 	"devDependencies": {
 		"@farm-investimentos/front-mfe-libs-ts": "^1.0.9",
@@ -47,6 +46,7 @@
 		"babel-eslint": "^10.1.0",
 		"eslint": "^6.7.2",
 		"eslint-plugin-vue": "^6.2.2",
+		"husky": "^8.0.0",
 		"sass": "~1.32.0",
 		"sass-loader": "^10.0.0",
 		"storybook-addon-designs": "^6.2.1",
@@ -54,7 +54,7 @@
 		"typescript": "~4.1.5",
 		"v-mask": "2.3.0",
 		"vue-template-compiler": "2.7.10",
-		"husky": "^8.0.0"
+		"vuejs-dialog": "^1.4.2"
 	},
 	"browserslist": [
 		"> 1%",

package/src/components/Buttons/DefaultButton/DefaultButton.scss

@@ -164,6 +164,13 @@ $butonSizes: (
 			}
 		}
 	}
+
+	&#{'.farm-btn--white'}:not(.farm-btn--disabled) {
+
+		::v-deep .farm-btn__content i.mdi {
+			color: white;
+		}
+	}
 }
 
 @each $color in $theme-colors-list {

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

@@ -192,7 +192,7 @@ export const Icons = () => ({
 export const Iconed = () => ({
 	data() {
 		return {
-			colors,
+			colors: [...colors, 'white'],
 		};
 	},
 	template: `<div class="buttons-container">

package/src/components/Icon/Icon.scss

@@ -25,6 +25,10 @@
 		}
 	}
 
+	&--white {
+		color: white;
+	}
+
 	@each $size, $value in $sizes {
 		&#{'.farm-icon[size=' + $size + ']'} {
 			font-size: $value;

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

@@ -34,7 +34,7 @@ export const Atom = () => ({
 export const Colors = () => ({
 	data() {
 		return {
-			colors: [...colors],
+			colors: [...colors, 'white'],
 		};
 	},
 	template: `<div class="icons-container">

package/src/components/IdCaption/IdCaption.scss

@@ -45,4 +45,7 @@
 		}
 	}
 
+	&.farm-idcaption--noheight {
+		min-height: auto;
+	}
 }

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

@@ -206,4 +206,18 @@ export const LongTitles = () => ({
         </template>
     </farm-idcaption>
     </farm-col>`,
+});
+
+export const NoHeight = () => ({
+	template: `
+    <farm-col sm="3">
+    <farm-idcaption 
+    copyText=""
+    :noHeight="true"
+    >
+        <template v-slot:subtitle>
+            Lower: Line Text Line Text Line Text Line
+        </template>
+    </farm-idcaption>
+    </farm-col>`,
 });

package/src/components/IdCaption/IdCaption.vue

@@ -1,5 +1,10 @@
 <template>
-	<div :class="{ idcaption: true, 'farm-idcaption': true, 'farm-idcaption--noicon': !icon }">
+	<div :class="{ 
+		idcaption: true, 
+		'farm-idcaption': true, 
+		'farm-idcaption--noicon': !icon, 
+		'farm-idcaption--noheight': noHeight }"
+	>
 		<farm-icon-box v-if="icon" :icon="icon" :color="iconBoxColor" size="md" />
 		<div
 			:class="{ idcaption__body: true, 'idcaption__body--single': !hasTitle || !hasSubtitle }"
@@ -104,6 +109,13 @@ export default Vue.extend({
 			>,
 			default: 'secondary',
 		},
+		/**
+		 * noHeight remove min-height of 48px
+		 */
+		noHeight: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	setup(_, { slots }) {

package/src/examples/VuetifyDialog.stories.js

@@ -1,13 +1,13 @@
 import { withDesign } from 'storybook-addon-designs';
 
 export default {
-	title: 'Display/Dialog/Vuetify',
+	title: 'Display/Dialog/Vuejs-dialog',
 	decorators: [withDesign],
 	parameters: {
 		viewMode: 'docs',
 		docs: {
 			description: {
-				component: `Dialog created by vuetify-dialog`,
+				component: `Dialog created by vuejs-dialog`,
 			},
 		},
 	},
@@ -16,19 +16,24 @@ export default {
 export const Primary = () => ({
 	methods: {
 		openDialog() {
-			this.$dialog.confirm({
-				text: `Deseja realmente sair?`,
-				title: 'Sair',
-				actions: {
-					true: {
-						text: 'Sim',
-						color: 'secondary',
-						handle: () => {
-							alert('Clicked: Sim');
-						},
+			this.$dialog
+				.confirm(
+					{
+						title: 'Dialog title',
+						body: 'Dialog content',
 					},
-				},
-			});
+					{
+						html: true,
+						okText: 'OK',
+						cancelText: 'Cancel',
+					}
+				)
+				.then(() => {
+					alert('OK Clicked');
+				})
+				.catch(() => {
+					alert('Cancel clicked');
+				});
 		},
 	},
 	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
@@ -38,29 +43,25 @@ export const Primary = () => ({
 	</div>`,
 });
 
-export const Default = () => ({
+export const ErrorColor = () => ({
 	methods: {
 		openDialog() {
-			this.$dialog.confirm({
-				text: `Deseja realmente sair?`,
-				title: 'Sair',
-				actions: {
-					false: {
-						text: 'Cancelar',
-						color: 'secondary-outlined',
-						handle: () => {
-							alert('Clicked: Cancelar');
-						},
-					},
-					true: {
-						text: 'Sim',
-						color: 'secondary',
-						handle: () => {
-							alert('Clicked: Sim');
-						},
+			this.$dialog
+				.alert(
+					{
+						title: 'Dialog title - Error',
+						body: 'Dialog content with error layout',
 					},
-				},
-			});
+					{
+						html: true,
+						okText: 'OK',
+						customClass: 'dg-parent-error',
+					}
+				)
+				.then(() => {
+					alert('OK Clicked');
+				})
+				.catch(() => {});
 		},
 	},
 	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
@@ -70,22 +71,27 @@ export const Default = () => ({
 	</div>`,
 });
 
-export const ErrorColor = () => ({
+export const NoFooter = () => ({
 	methods: {
 		openDialog() {
-			this.$dialog.confirm({
-				text: `Deseja realmente sair?`,
-				title: 'Sair',
-				actions: {
-					true: {
-						text: 'Sair',
-						color: 'error',
-						handle: () => {
-							alert('Clicked: Sair');
-						},
+			this.$dialog
+				.confirm(
+					{
+						title: 'Dialog title - No footer',
+						body: 'Dialog content for notifications without footer (must be closed programmatically)',
 					},
-				},
-			});
+					{
+						html: true,
+						okText: '',
+						customClass: 'dg-parent-nofooter',
+					}
+				)
+				.then(() => {})
+				.catch(() => {});
+
+			setTimeout(() => {
+				this.$dialog.destroy();
+			}, 2000);
 		},
 	},
 	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
@@ -95,20 +101,24 @@ export const ErrorColor = () => ({
 	</div>`,
 });
 
-
-export const CustomContent = () => ({
+export const CustomHtml = () => ({
 	methods: {
 		openDialog() {
-			this.$dialog.confirm({
-				text: `This is a text with <strong>html markup</strong> and<br />break line!`,
-				title: 'Sair',
-				actions: {
-					true: {
-						text: 'Sim',
-						color: 'secondary',
+			this.$dialog
+				.alert(
+					{
+						title: 'Dialog title',
+						body: `This is a text with <strong>html markup</strong> and<br />break line!<br />
+						Also with an <i class="mdi mdi-book"></i>book icon<br />
+						and some <span style="color: var(--farm-warning-base)">color</span>`,
 					},
-				},
-			});
+					{
+						html: true,
+						okText: 'Button with icon <i class="mdi mdi-book"></i>',
+					}
+				)
+				.then(() => {})
+				.catch(() => {});
 		},
 	},
 	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">

package/src/scss/VuejsDialog.scss

@@ -0,0 +1,79 @@
+@import 'vuejs-dialog/dist/vuejs-dialog.min';
+@import '../components/Buttons/DefaultButton/DefaultButton.scss';
+
+.dg-main-content {
+    font-family: Montserrat, sans-serif !important;
+}
+
+.dg-content-body {
+    border-bottom: 1px solid var(--farm-stroke-base);
+    margin: 0 -15px;
+    padding: 0 16px;
+    color: var(--farm-text-base);
+    font-size: 12px;
+}
+
+.dg-title {
+    margin: 0 -15px;
+    border-bottom: 1px solid var(--farm-stroke-base);
+    padding: 0 16px;
+    color: var(--farm-primary-base);
+    height: 32px;
+    font-size: 12px;
+}
+
+.dg-content-body--has-title .dg-content,
+.dg-content {
+    margin: 24px 0;
+    font-size: 12px;
+    line-height: 20px;
+}
+
+.dg-content-footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+}
+
+.dg-btn {
+    @extend .farm-btn;
+}
+
+.dg-btn--ok {
+    @extend .farm-btn--primary;
+}
+
+.dg-btn--cancel {
+    @extend .farm-btn--primary;
+    @extend .farm-btn--outlined;
+    margin-right: 8px;
+}
+
+.dg-backdrop {
+    background-color: rgba(0, 0, 0, .46);
+}
+
+.dg-parent-nofooter{
+    .dg-content-footer {
+        display: none;
+    }
+
+    .dg-content-body {
+        border-bottom: none;
+        padding-bottom: 0;
+    }
+
+    .dg-content-body--has-title .dg-content,
+    .dg-content {
+        margin-bottom: 8px;
+    }
+}
+
+.dg-parent-error {
+    .dg-btn--ok {
+        @extend .farm-btn--error;
+    }
+    .dg-title {
+        color: var(--farm-error-base);
+    }
+}