@farm-investimentos/front-mfe-components 3.4.12 → 3.4.13

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "3.4.12",
+	"version": "3.4.13",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -25,7 +25,8 @@
 		"sass": "1.32.13",
 		"sass-loader": "^10.1.1",
 		"vue": "^2.6.11",
-		"vuetify": "^2.5.7"
+		"vuetify": "^2.5.7",
+		"vuetify-dialog": "^2.0.16"
 	},
 	"devDependencies": {
 		"@socheatsok78/storybook-addon-vuetify": "^0.1.8",

package/src/components/CardContext/CardContext.scss

@@ -4,6 +4,11 @@
 	background: #ffffff;
 	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
 	border-radius: 5px;
+
+	&.card-context--outlined {
+		box-shadow: none;
+		border: 1px solid var(--v-gray-lighten2);
+	}
 }
 
 .card-context.height-full {

package/src/components/CardContext/CardContext.vue

@@ -1,6 +1,12 @@
 <template>
-	<div :class="isHeightFull">
-		<div class="card-context-header" v-if="isSuccess">
+	<div
+		:class="{
+			'card-context': true,
+			'height-full': this.full,
+			'card-context--outlined': this.outlined,
+		}"
+	>
+		<div class="card-context-header" v-if="isSuccess && title">
 			<IconBox :icon="icon" v-if="icon" />
 			<div class="card-context-content">
 				<p :class="{ 'card-context-title': true, 'card-context-content--bold': bold }">
@@ -86,11 +92,15 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Is outlined
+		 */
+		outlined: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	computed: {
-		isHeightFull() {
-			return this.full ? 'card-context height-full' : 'card-context';
-		},
 		isSuccess() {
 			return !this.isLoading && !this.isError;
 		},

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

@@ -22,17 +22,6 @@ describe('CardContext component', () => {
 
 	describe('Computed properties', () => {
 
-		it('Should compute isHeightFull for false', () => {
-			expect(component.isHeightFull).toEqual('card-context');
-		});
-
-		it('Should compute isHeightFull for true', async () => {
-			await wrapper.setProps({
-				full: true,
-			});
-			expect(component.isHeightFull).toEqual('card-context height-full');
-		});
-
 		it('Should compute isLargeLoading for false', () => {
 			expect(component.isLargeLoading).toEqual('small');
 		});

package/src/examples/ConfirmDialog.stories.js

@@ -0,0 +1,51 @@
+import { withDesign } from 'storybook-addon-designs';
+import { ConfirmButton } from '../main';
+
+export default {
+	title: 'Examples/ConfirmDialog',
+	decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+		docs: {
+			description: {
+				component: `ConfirmDialog created by vuetify-dialog`,
+			},
+		},
+	},
+};
+
+export const ConfirmDialog = () => ({
+	components: {
+		ConfirmButton,
+	},
+	methods: {
+		openDialog() {
+			this.$dialog.confirm({
+				text: `Deseja realmente sair?`,
+				title: 'Sair',
+				actions: {
+					false: {
+						text: 'Cancelar',
+						color: 'primary',
+					},
+					true: {
+						text: 'Sim',
+						color: 'secondary',
+						handle: () => {
+							this.$emit('onLogout');
+						},
+					},
+				},
+			});
+		},
+	},
+	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
+        <ConfirmButton @click="openDialog">
+            Open
+        </ConfirmButton>
+	</div>`,
+});
+
+ConfirmDialog.story = {
+	name: 'ConfirmDialog',
+};