Apply prettier rules

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

@@ -1,58 +1,46 @@
 <template>
-  <transition name="modal">
-    <div class="modal-mask">
-      <!-- :: styles bootstrap :: -->
-      <div
-        class="modal fade show"
-        style="display: block"
-        aria-modal="true"
-        role="dialog"
-      >
-        <div
-          class="modal-dialog"
-          :class="modalDialogClass"
-        >
-          <div class="modal-content">
-            <div class="modal-header">
-              <slot name="header" />
-              <button
-                class="close btn"
-                @click="$emit('close')"
-              >
-                <i
-                  class="fa fa-times"
-                  aria-hidden="true"
-                />
-              </button>
-            </div>
-            <div class="modal-body">
-              <div class="body-head">
-                <slot name="body-head" />
-              </div>
-              <slot name="body" />
-            </div>
+    <transition name="modal">
+        <div class="modal-mask">
+            <!-- :: styles bootstrap :: -->
             <div
-              class="modal-footer"
-              v-if="!hideFooter"
+                class="modal fade show"
+                style="display: block"
+                aria-modal="true"
+                role="dialog"
             >
-              <button
-                class="btn btn-cancel"
-                @click="$emit('close')"
-              >
-                {{ $t('action.close') }}
-              </button>
-              <slot name="footer" />
+                <div class="modal-dialog" :class="modalDialogClass">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <slot name="header" />
+                            <button class="close btn" @click="$emit('close')">
+                                <i class="fa fa-times" aria-hidden="true" />
+                            </button>
+                        </div>
+                        <div class="modal-body">
+                            <div class="body-head">
+                                <slot name="body-head" />
+                            </div>
+                            <slot name="body" />
+                        </div>
+                        <div class="modal-footer" v-if="!hideFooter">
+                            <button
+                                class="btn btn-cancel"
+                                @click="$emit('close')"
+                            >
+                                {{ $t("action.close") }}
+                            </button>
+                            <slot name="footer" />
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
+            <!-- :: end styles bootstrap :: -->
         </div>
-      </div>
-      <!-- :: end styles bootstrap :: -->
-    </div>
-  </transition>
+    </transition>
 </template>
 
 <script lang="ts">
-import {defineComponent} from "vue";
+import { defineComponent } from "vue";
 /*
  *    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
@@ -63,41 +51,41 @@ import {defineComponent} from "vue";
  *    [+] modal design can be configured using css classes (size, scroll)
  */
 export default defineComponent({
-   name: 'Modal',
-   props: {
-      modalDialogClass: {
-         type: Object,
-         required: false,
-         default: {},
-      },
-      hideFooter: {
-         type: Boolean,
-         required: false,
-         default: false
-      }
-   },
-   emits: ['close']
+    name: "Modal",
+    props: {
+        modalDialogClass: {
+            type: Object,
+            required: false,
+            default: {},
+        },
+        hideFooter: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    },
+    emits: ["close"],
 });
 </script>
 
 <style lang="scss">
-   /**
+/**
     * This is a mask behind the modal.
     */
-   .modal-mask {
-      position: fixed;
-      z-index: 9998;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: rgba(0, 0, 0, 0.75);
-      transition: opacity 0.3s ease;
-   }
-   .modal-header .close {
-      border-top-right-radius: 0.3rem;
-   }
-   /*
+.modal-mask {
+    position: fixed;
+    z-index: 9998;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.75);
+    transition: opacity 0.3s ease;
+}
+.modal-header .close {
+    border-top-right-radius: 0.3rem;
+}
+/*
    * The following styles are auto-applied to elements with
    * transition="modal" when their visibility is toggled
    * by Vue.js.
@@ -105,25 +93,24 @@ export default defineComponent({
    * You can easily play with the modal transition by editing
    * these styles.
    */
-   .modal-enter {
-      opacity: 0;
-   }
-   .modal-leave-active {
-      opacity: 0;
-   }
-   .modal-enter
-   .modal-container,
-   .modal-leave-active .modal-container {
-      -webkit-transform: scale(1.1);
-      transform: scale(1.1);
-   }
-   h3.modal-title {
-      font-size: 1.5rem;
-      font-weight: bold;
-   }
-   div.modal-footer {
-      button:first-child {
-         margin-right: auto;
-      }
-   }
+.modal-enter {
+    opacity: 0;
+}
+.modal-leave-active {
+    opacity: 0;
+}
+.modal-enter .modal-container,
+.modal-leave-active .modal-container {
+    -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+}
+h3.modal-title {
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+div.modal-footer {
+    button:first-child {
+        margin-right: auto;
+    }
+}
 </style>