From 6bed86a2310980c28abbbe8aa6e493627c4092d6 Mon Sep 17 00:00:00 2001
From: Benoit Laroche <benoit.laroche@e-xteq.com>
Date: Wed, 23 Jun 2021 15:22:29 +0200
Subject: [PATCH] custom class back for better openess

---
 src/plugin/components/dialog-window.vue | 26 +++++++++++++++++++------
 src/plugin/js/constants.js              | 19 +++++++++++-------
 2 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/plugin/components/dialog-window.vue b/src/plugin/components/dialog-window.vue
index b36795f05..485025b81 100644
--- a/src/plugin/components/dialog-window.vue
+++ b/src/plugin/components/dialog-window.vue
@@ -1,13 +1,13 @@
 <template>
-    <div :class="options.customClass">
+    <div :class="customClass.rootClass">
         <transition name="dg-backdrop" appear @after-leave="animationEnded('backdrop')">
             <div v-if="show" class="dg-backdrop"></div>
         </transition>
 
         <transition :name="animation" @after-leave="animationEnded('content')" appear>
-            <div v-if="show" :class="['dg-container', {'dg-container--has-input': (isHardConfirm || isPrompt)}]" @click="closeAtOutsideClick" >
-                <div class="dg-content-cont dg-content-cont--floating">
-                    <div class="dg-main-content" @click.stop>
+            <div v-if="show" :class="['dg-container', customClass.containerClass, {'dg-container--has-input': (isHardConfirm || isPrompt)}]" @click="closeAtOutsideClick" >
+                <div :class="['dg-content-cont', 'dg-content-cont--floating', customClass.contentClass]">
+                    <div :class="['dg-main-content', customClass.mainContent]" @click.stop>
                         <component :is="dialogView" :options="options" @close="close"></component>
                     </div>
                 </div>
@@ -18,14 +18,15 @@
 
 <script>
     import DefaultView from './views/default-view.vue'
-    import {DIALOG_TYPES, ANIMATION_TYPES, CONFIRM_TYPES} from '../js/constants'
+    import {DIALOG_TYPES, ANIMATION_TYPES, CONFIRM_TYPES, CUSTOM_CLASS} from '../js/constants'
 
     export default {
         data: function () {
             return {
                 show: true,
                 closed: false,
-                endedAnimations: []
+                endedAnimations: [],
+                customClass: Object.assign({}, CUSTOM_CLASS),
             }
         },
         props: {
@@ -111,8 +112,21 @@
                     this.options.promiseRejecter(false)
                     this.$emit('close', this.options.id)
                 }
+            },
+            setCustomClasses(){
+                if (this.options.hasOwnProperty('customClass')) {
+                    Object.keys(this.options.customClass).forEach(prop => {
+                        if (!Object.keys(CUSTOM_CLASS).includes(prop)) {
+                            console.warn(`[WARNING]: Custom class name "${prop}" could not be found!`)
+            }
+                    });
+                }
+                this.customClass = Object.assign(this.customClass, this.options.customClass);
             }
         },
+        mounted () {
+            this.setCustomClasses()
+        },
         beforeDestroy(){
             if(this.closed === false){
                 this.cancelBtnDisabled ? this.proceed() : this.cancel()
diff --git a/src/plugin/js/constants.js b/src/plugin/js/constants.js
index b4064096b..7f6bce61b 100644
--- a/src/plugin/js/constants.js
+++ b/src/plugin/js/constants.js
@@ -18,12 +18,17 @@ export const ANIMATION_TYPES = {
 }
 
 export const CLASS_TYPES = {
-	MAIN_CONTENT: 'mainContent',
-	BODY: 'body',
-	TITLE: 'title',
-	FOOTER: 'footer',
-	OK_BTN: 'okBtn',
-	CANCEL_BTN: 'cancelBtn'
+	ROOT_CLASS: 'rootClass',
+	CONTAINER_CLASS: 'containerClass',
+	CONTENT_CLASS: 'contentClass',
+	MAIN_CONTENT: 'mainContent'
+}
+
+export const CUSTOM_CLASS = {
+	[CLASS_TYPES.ROOT_CLASS] : '',
+	[CLASS_TYPES.CONTAINER_CLASS] : '',
+	[CLASS_TYPES.CONTENT_CLASS] : '',
+	[CLASS_TYPES.MAIN_CONTENT] : ''
 }
 
 export const DEFAULT_OPTIONS = {
@@ -39,7 +44,7 @@ export const DEFAULT_OPTIONS = {
 	message              : 'Proceed with the request?',
 	clicksCount          : 3,
 	animation            : 'zoom',
-	customClass          : '',
+	customClass          : CUSTOM_CLASS,
 	verification         : 'continue',
 	verificationHelp     : 'Type "[+:verification]" below to confirm',
 	promptHelp      	 : 'Type in the box below and click "[+:okText]"'