move Modal component in ChillMainAssets

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue

@@ -0,0 +1,45 @@
+<template>
+<transition name="modal">
+   <div class="modal-mask">
+      <!-- :: styles bootstrap :: -->
+      <div class="modal-dialog" :class="modalDialogClass">
+         <div class="modal-content">
+            <div class="modal-header">
+               <slot name="header"></slot>
+               <button class="close sc-button grey" @click="$emit('close')">
+                  <i class="fa fa-times" aria-hidden="true"></i></button>
+            </div>
+            <div class="modal-body up" style="overflow-y: unset;">
+               <slot name="body-fixed"></slot>
+            </div>
+            <div class="modal-body">
+               <slot name="body"></slot>
+            </div>
+            <div class="modal-footer">
+               <button class="sc-button cancel" @click="$emit('close')">{{ $t('action.close') }}</button>
+               <slot name="footer"></slot>
+            </div>
+         </div>
+      </div>
+      <!-- :: end styles bootstrap :: -->
+   </div>
+</transition>
+</template> 
+
+<script>
+/*
+ *    This Modal component is a mix between :
+ *    - Vue3 modal implementation 
+ *      => with 'v-if:showModal' directive:parameter, html scope is added/removed not just shown/hidden
+ *      => with slot we can pass content from parent component
+ *      => some classes are passed from parent component
+ *    - Bootstrap 4.6 _modal.scss module
+ *      => using bootstrap css classes, the modal have a responsive behaviour, 
+ *      => modal design can be configured using css classes (size, scroll)
+ */
+export default {
+   name: 'Modal',
+   props: ['modalDialogClass'],
+   emits: ['close']
+}
+</script>