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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farm-investimentos/front-mfe-components-vue3",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "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(() => {
@@ -126,4 +125,4 @@ export const CustomHtml = () => ({
             Open
         </farm-btn>
 	</div>`,
-});
+});

package/src/scss/VuejsDialog.scss

@@ -1,6 +1,10 @@
-@import 'vuejs-dialog/dist/vuejs-dialog.min';
+@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;
 }
@@ -91,3 +95,4 @@
 		color: var(--farm-error-base);
 	}
 }
+*/