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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "3.4.10",
+	"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 {
@@ -29,12 +34,11 @@
 	color: #5c5c5c;
 	margin: 0;
 	font-size: 0.75rem;
-}
-
-.card-context-title.bold {
-	font-size: 0.875rem;
-	font-weight: bold;
-	color: #1c1c1c;
+	&.card-context-content--bold {
+		font-size: 0.875rem;
+		font-weight: bold;
+		color: #1c1c1c;
+	}
 }
 
 .card-context-body {

package/src/components/CardContext/CardContext.stories.js

@@ -1,8 +1,19 @@
 import CardContext from './CardContext.vue';
 
+
 export default {
 	title: 'API/CardContext',
 	component: CardContext,
+    parameters: {
+		docs: {
+			description: {
+				component: `Card Context<br />
+				selector: <em>farm-card-context</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({
@@ -50,8 +61,18 @@ export const WithError = () => ({
     `,
 });
 
+export const NoIcon = () => ({
+	components: { CardContext },
+	template: `
+        <CardContext title="Titulo do Card">
+            <p>Conteúdo do Card</p>
+        </CardContext>
+    `,
+});
+
 Primary.storyName = 'Básico';
 Secondary.storyName = 'Título em Bold';
 WithLoading.storyName = 'Com Loading';
 WithLoadingLarge.storyName = 'Com Loading Large';
 WithError.storyName = 'Com Erro';
+NoIcon.storyName = 'No icon';

package/src/components/CardContext/CardContext.vue

@@ -1,9 +1,15 @@
 <template>
-	<div :class="isHeightFull">
-		<div class="card-context-header" v-if="isSuccess">
-			<IconBox :icon="icon" />
+	<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="isBold">
+				<p :class="{ 'card-context-title': true, 'card-context-content--bold': bold }">
 					{{ title }}
 				</p>
 			</div>
@@ -52,7 +58,7 @@ export default Vue.extend({
 		 */
 		icon: {
 			type: String,
-			require: true,
+			default: null,
 		},
 		/**
 		 * Show loader
@@ -80,20 +86,21 @@ export default Vue.extend({
 			default: 'Ocorreu um erro',
 		},
 		/**
-		 * Is full 
+		 * Is full
 		 */
 		full: {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Is outlined
+		 */
+		outlined: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	computed: {
-		isBold() {
-			return this.bold ? 'card-context-title bold' : 'card-context-title';
-		},
-		isHeightFull() {
-			return this.full ? 'card-context height-full' : 'card-context';
-		},
 		isSuccess() {
 			return !this.isLoading && !this.isError;
 		},

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

@@ -21,27 +21,6 @@ describe('CardContext component', () => {
 	});
 
 	describe('Computed properties', () => {
-		it('Should compute isBold for false', () => {
-			expect(component.isBold).toEqual('card-context-title');
-		});
-
-		it('Should compute isBold for true', async () => {
-			await wrapper.setProps({
-				bold: true,
-			});
-			expect(component.isBold).toEqual('card-context-title bold');
-		});
-
-		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/components/SelectModalOptions/SelectModalOptions.vue

@@ -268,16 +268,20 @@ export default Vue.extend({
 			const label = this.getItemLabel(item);
 			return label.toLowerCase().includes(search.toLowerCase());
 		},
-		clearTextField(event)  {
-			if (event.key === "Delete" || event.key === "Backspace") {
+		clearTextField(event) {
+			if (event.key === 'Delete' || event.key === 'Backspace') {
 				this.selectedItem = null;
 			}
-		}
+		},
 	},
 });
 </script>
 <style lang="scss" scoped>
-.v-text-field::v-deep input  {
-	cursor: pointer;
+.v-text-field::v-deep {
+	margin-top: 0;
+	padding-top: 0;
+	input {
+		cursor: pointer;
+	}
 }
 </style>

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',
+};