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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farm-investimentos/front-mfe-components-vue3",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "author": "farm investimentos",
   "private": false,
   "main": "./dist/front-mfe-components.common.js",
@@ -63,6 +63,7 @@
     "husky": "^8.0.0",
     "jest": "^29.0.0",
     "jest-environment-jsdom": "^29.0.0",
+    "promise-polyfill": "^8.3.0",
     "sass": "~1.32.0",
     "sass-loader": "^10.0.0",
     "storybook": "^7.0.6",
@@ -70,8 +71,7 @@
     "ts-jest": "^29.0.0",
     "typescript": "~4.1.5",
     "v-mask": "^2.3.0",
-    "vue-loader": "^16.8.3",
-    "vuejs-dialog": "^1.4.2"
+    "vue-loader": "^16.8.3"
   },
   "browserslist": [
     "> 1%",

package/src/components/DialogPrompt/index.ts

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

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

@@ -0,0 +1,20 @@
+export default function (): { container: HTMLElement; backdrop: HTMLElement; modal: HTMLElement } {
+	const container = document.createElement('div');
+	container.className = 'farm-modal';
+
+	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/components/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/components/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/components/DialogPrompt/utils/modalHeader.ts

@@ -0,0 +1,21 @@
+import { IDialogPromptOptions } from '..';
+
+export default function (modal: HTMLElement, options: IDialogPromptOptions, callback: Function) {
+	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> 
+    <button type="button" size="default" title="Fechar" class="farm-dialog-header__close farm-btn farm-btn--round farm-btn--icon farm-btn--primary farm-btn--variation-base">
+        <span class="farm-btn__content">
+            <i size="24px" role="button" class="farm-icon farm-icon--primary mdi mdi-window-close" style="font-size: 24px;"></i>
+        </span>
+    </button>
+    </header>`;
+	modal.appendChild(header);
+
+	const closeButton = header.querySelector('.farm-dialog-header__close');
+	closeButton.addEventListener('click', callback as EventListenerOrEventListenerObject);
+}

package/src/examples/Colors.stories.js

@@ -1,9 +1,9 @@
 import baseThemeColors from '../configurations/_theme-colors-base.module.scss';
-import textThemeColors from '../configurations/_theme-colors-text.scss';
-import strokeThemeColors from '../configurations/_theme-colors-stroke.scss';
+import textThemeColors from '../configurations/_theme-colors-text.module.scss';
+import strokeThemeColors from '../configurations/_theme-colors-stroke.module.scss';
 import bwThemeColors from '../configurations/_theme-colors-bw.module.scss';
-import backgroundThemeColors from '../configurations/_theme-colors-background.scss';
-import variationThemeColors from '../configurations/_theme-colors-variations.scss';
+import backgroundThemeColors from '../configurations/_theme-colors-background.module.scss';
+import variationThemeColors from '../configurations/_theme-colors-variations.module.scss';
 import('./Colors.stories.scss');
 
 export default {

package/src/examples/{VuetifyDialog.stories.js → Dialog.stories.js}

@@ -1,7 +1,7 @@
 // import { withDesign } from 'storybook-addon-designs';
 
 export default {
-	title: 'Display/Dialog/Vuejs-dialog',
+	title: 'Display/Dialog/Prompt',
 	// decorators: [withDesign],
 	parameters: {
 		viewMode: 'docs',
@@ -55,7 +55,6 @@ export const ErrorColor = () => ({
 					{
 						html: true,
 						okText: 'OK',
-						customClass: 'dg-parent-error',
 					}
 				)
 				.then(() => {
@@ -84,6 +83,7 @@ export const NoFooter = () => ({
 						html: true,
 						okText: '',
 						customClass: 'dg-parent-nofooter',
+						removeFooter: true,
 					}
 				)
 				.then(() => {})
@@ -105,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 />
@@ -126,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,93 +0,0 @@
-@import 'vuejs-dialog/dist/vuejs-dialog.min';
-@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);
-	}
-}