@farm-investimentos/front-mfe-components-vue3 0.0.2 → 0.0.3

package/package.json

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

package/src/examples/Dialog.stories.js

@@ -83,6 +83,7 @@ export const NoFooter = () => ({
 						html: true,
 						okText: '',
 						customClass: 'dg-parent-nofooter',
+						removeFooter: true,
 					}
 				)
 				.then(() => {})
@@ -104,7 +105,7 @@ export const CustomHtml = () => ({
 	methods: {
 		openDialog() {
 			this.$dialog
-				.alert(
+				.confirm(
 					{
 						title: 'Dialog title',
 						body: `This is a text with <strong>html markup</strong> and<br />break line!<br />
@@ -125,4 +126,35 @@ export const CustomHtml = () => ({
             Open
         </farm-btn>
 	</div>`,
-});
+<<<<<<< HEAD
+});
+=======
+});
+
+export const DisabledHtml = () => ({
+	methods: {
+		openDialog() {
+			this.$dialog
+				.confirm(
+					{
+						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: false,
+						okText: 'Button',
+					}
+				)
+				.then(() => {})
+				.catch(() => {});
+		},
+	},
+	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
+        <farm-btn @click="openDialog">
+            Open
+        </farm-btn>
+	</div>`,
+});
+>>>>>>> vuejsdialog

package/src/plugins/DialogPrompt/index.ts

@@ -0,0 +1,71 @@
+import { bootstrap, modalFooter, modalHeader } from './utils';
+
+export interface IDialogPromptOptions {
+	title: string;
+	body: string;
+	alert: boolean;
+}
+
+export interface IDialogPromptConfiguration {
+	html?: boolean;
+	okText?: string;
+	cancelText?: string;
+	removeFooter?: boolean;
+}
+
+const dialog = {
+	container: null,
+	confirm: (options: IDialogPromptOptions, configuration: IDialogPromptConfiguration) => {
+		const { container, modal } = bootstrap();
+		dialog.container = container;
+
+		modalHeader(modal, options);
+
+		const content = document.createElement('div');
+		content.className = 'farm-modal--content';
+		content.innerHTML = `<div style="margin-top: 64px; margin-bottom: ${
+			configuration.removeFooter ? 24 : 84
+		}px; max-height: calc(100vh - 164px);">
+            <div style="font-size: 12px;
+                line-height: 20px;
+                word-break: break-word;">
+                ${configuration.html ? options.body : options.body.replace(/\n|<.*?>/g, '')}    
+            </div>
+            </div>`;
+		modal.appendChild(content);
+
+		return new Promise((resolve, reject) => {
+			if (configuration.removeFooter) {
+				return;
+			}
+			modalFooter(
+				modal,
+				options,
+				configuration,
+				() => {
+					resolve(true);
+					dialog.destroy();
+				},
+				() => {
+					reject(true);
+					dialog.destroy();
+				}
+			);
+		});
+	},
+
+	alert: (options: IDialogPromptOptions, configuration: IDialogPromptConfiguration) => {
+		return dialog.confirm({ ...options, alert: true }, configuration);
+	},
+
+	destroy: () => {
+		if (dialog.container) document.body.removeChild(dialog.container);
+	},
+};
+
+export default {
+	install: app => {
+		app.config.globalProperties.$dialog = dialog;
+		app.provide('$dialog', dialog);
+	},
+};

package/src/plugins/DialogPrompt/utils/bootstrap.ts

@@ -0,0 +1,28 @@
+const DIALOG_ID = 'farm-dialog-prompt-identifier';
+
+export default function (): { container: HTMLElement; backdrop: HTMLElement; modal: HTMLElement } {
+	let container;
+	if (document.getElementById(DIALOG_ID)) {
+		container = document.getElementById(DIALOG_ID);
+	} else {
+		container = document.createElement('div');
+		container.className = 'farm-modal';
+		container.id = DIALOG_ID;
+	}
+
+	const backdrop = document.createElement('div');
+	backdrop.className = 'farm-modal--overlay';
+
+	const modal = document.createElement('div');
+	modal.className = 'farm-modal--container';
+
+	modal.style.width = '98%';
+	modal.style.maxWidth = '400px';
+
+	container.appendChild(modal);
+	container.appendChild(backdrop);
+
+	document.body.appendChild(container);
+
+	return { container, backdrop, modal };
+}

package/src/plugins/DialogPrompt/utils/index.ts

@@ -0,0 +1,5 @@
+import bootstrap from "./bootstrap";
+import modalFooter from "./modalFooter";
+import modalHeader from "./modalHeader";
+
+export { bootstrap, modalFooter, modalHeader }

package/src/plugins/DialogPrompt/utils/modalFooter.ts

@@ -0,0 +1,41 @@
+import { IDialogPromptConfiguration, IDialogPromptOptions } from '..';
+
+export default function (
+	modal: HTMLElement,
+	options: IDialogPromptOptions,
+	configuration: IDialogPromptConfiguration,
+	callbackConfirm: Function,
+	callbackCancel: Function
+) {
+	const footer = document.createElement('footer');
+	footer.className = 'farm-modal--footer';
+	footer.innerHTML = `<div class="farm-dialog__footer">
+            ${
+				configuration.cancelText
+					? `<button type="button" size="default" class="farm-btn farm-btn--primary farm-btn--variation-base farm-btn--plain farm-btn__cancel">
+            <span class="farm-btn__content">
+            ${configuration.cancelText || 'Confirmar'}
+            </span>
+            </button> `
+					: ''
+			}
+            <button type="button" size="default" title="Confirmar" class="farm-btn farm-btn--${
+				options.alert ? 'error' : 'primary'
+			} farm-btn--variation-base farm-btn__confirm">
+                <span class="farm-btn__content">
+                ${configuration.okText || 'Confirmar'}
+                </span>
+            </button>
+        </div>`;
+	modal.appendChild(footer);
+
+	const okButton = footer.querySelector('.farm-btn__confirm');
+	okButton.addEventListener('click', callbackConfirm as EventListenerOrEventListenerObject);
+
+	const cancelButton = footer.querySelector('.farm-btn__cancel');
+	if (cancelButton)
+		cancelButton.addEventListener(
+			'click',
+			callbackCancel as EventListenerOrEventListenerObject
+		);
+}

package/src/plugins/DialogPrompt/utils/modalHeader.ts

@@ -0,0 +1,13 @@
+import { IDialogPromptOptions } from '..';
+
+export default function (modal: HTMLElement, options: IDialogPromptOptions) {
+	const style = options.alert ? 'color: var(--farm-error-base)!important' : '';
+	const header = document.createElement('div');
+	header.className = 'farm-modal--header';
+	header.innerHTML = `<header>
+    <p class="farm-typography farm-typography--sm farm-typography--weight-600 farm-caption farm-caption--semiBold" style="${style}">
+        ${options.title}
+    </p> 
+    </header>`;
+	modal.appendChild(header);
+}

package/src/scss/DialogPrompt.scss

@@ -0,0 +1,5 @@
+@import '../components/Modal/Modal.scss';
+@import '../components/DialogHeader/DialogHeader.scss';
+@import '../components/DialogFooter/DialogFooter.scss';
+@import '../components/Typography/Typography.scss';
+@import '../components/Buttons/DefaultButton/DefaultButton.scss';

package/src/scss/VuejsDialog.scss

@@ -1,98 +0,0 @@
-@import '../components/Modal/Modal.scss';
-@import '../components/DialogHeader/DialogHeader.scss';
-@import '../components/DialogFooter/DialogFooter.scss';
-@import '../components/Typography/Typography.scss';
-@import '../components/Buttons/DefaultButton/DefaultButton.scss';
-
-/*
-.dg-main-content {
-	font-family: 'Manrope', sans-serif !important;
-}
-
-.dg-content-body {
-	border-bottom: 1px solid var(--farm-gray-lighten);
-	margin: 0 -15px;
-	padding: 0 16px;
-	color: var(--farm-text-base);
-	font-size: 12px;
-}
-
-.dg-title {
-	margin: 0 -15px;
-	border-bottom: 0;
-	padding: 0 16px;
-	color: var(--farm-bw-black-80);
-	height: 32px;
-	font-size: 12px;
-	font-weight: 600;
-}
-
-.dg-content-body--has-title .dg-content,
-.dg-content {
-	margin: 24px 0;
-	font-size: 12px;
-	line-height: 20px;
-	word-break: break-word;
-
-	ul {
-		margin-left: 16px;
-	}
-}
-
-.dg-content-footer {
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-end;
-}
-
-.dg-btn {
-	@extend .farm-btn;
-	border: 0;
-}
-
-.dg-btn--ok {
-	@extend .farm-btn--primary;
-}
-
-.dg-btn--cancel {
-	@extend .farm-btn--primary;
-	@extend .farm-btn--plain;
-	margin-right: 8px;
-
-	&:hover{
-		text-decoration: underline;
-		text-underline-offset: 6px;
-		opacity: 0.86;
-	}
-}
-
-.dg-backdrop {
-	background-color: rgba(0, 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);
-	}
-}
-*/