refactor: better implimentation for slots

components/app/Extensions.vue

@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("extensions") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("extensions") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <p class="info">
         {{ $t("extensions_info1") }}
       </p>
@@ -70,8 +68,7 @@
           </button>
         </a>
       </div>
-    </div>
-    <div slot="footer"></div>
+    </template>
   </SmartModal>
 </template>
 

components/app/Footer.vue

@@ -57,7 +57,7 @@
           <button v-tooltip="$t('choose_language')" class="icon button">
             <i class="material-icons">translate</i>
           </button>
-          <template slot="popover">
+          <template #popover>
             <div v-for="locale in availableLocales" :key="locale.code">
               <nuxt-link :to="switchLocalePath(locale.code)">
                 <button v-close-popover class="icon button">

components/app/Header.vue

@@ -71,7 +71,7 @@
           <button v-tooltip="$t('login_with')" class="icon button">
             <i class="material-icons">login</i>
           </button>
-          <template slot="popover">
+          <template #popover>
             <FirebaseLogin @show-email="showEmail = true" />
           </template>
         </v-popover>
@@ -94,7 +94,7 @@
             />
             <i v-else class="material-icons">account_circle</i>
           </button>
-          <template slot="popover">
+          <template #popover>
             <div>
               <nuxt-link v-close-popover :to="localePath('settings')">
                 <button class="icon button">
@@ -114,7 +114,7 @@
           <button v-tooltip="$t('more')" class="icon button">
             <i class="material-icons">drag_indicator</i>
           </button>
-          <template slot="popover">
+          <template #popover>
             <button
               v-close-popover
               class="icon button"

components/app/Shortcuts.vue

@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("shortcuts") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("shortcuts") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <div class="p-2">
         <div>
           <kbd>{{ getSpecialKey() }}</kbd>
@@ -68,8 +66,7 @@
           <label>{{ $t("select_delete_method") }}</label>
         </div>
       </div>
-    </div>
-    <div slot="footer"></div>
+    </template>
   </SmartModal>
 </template>
 

components/app/Support.vue

@@ -1,19 +1,16 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("support_us") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("support_us") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <AppContributors />
-    </div>
-    <div slot="footer"></div>
+    </template>
   </SmartModal>
 </template>
 

components/collections/Add.vue

@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("new_collection") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("new_collection") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         id="selectLabel"
@@ -20,20 +18,18 @@
         :placeholder="$t('my_new_collection')"
         @keyup.enter="addNewCollection"
       />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon button" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon button primary" @click="addNewCollection">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span></span>
+      <span>
+        <button class="icon button" @click="hideModal">
+          {{ $t("cancel") }}
+        </button>
+        <button class="icon button primary" @click="addNewCollection">
+          {{ $t("save") }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>
 

components/collections/AddFolder.vue

@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="$emit('hide-modal')">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("new_folder") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("new_folder") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         id="selectLabel"
@@ -20,20 +18,18 @@
         :placeholder="$t('my_new_folder')"
         @keyup.enter="addFolder"
       />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon button" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon button primary" @click="addFolder">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span></span>
+      <span>
+        <button class="icon button" @click="hideModal">
+          {{ $t("cancel") }}
+        </button>
+        <button class="icon button primary" @click="addFolder">
+          {{ $t("save") }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>
 

components/collections/Edit.vue

@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("edit_collection") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("edit_collection") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         id="selectLabel"
@@ -20,20 +18,18 @@
         :placeholder="placeholderCollName"
         @keyup.enter="saveCollection"
       />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon button" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon button primary" @click="saveCollection">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span></span>
+      <span>
+        <button class="icon button" @click="hideModal">
+          {{ $t("cancel") }}
+        </button>
+        <button class="icon button primary" @click="saveCollection">
+          {{ $t("save") }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>
 

components/collections/EditFolder.vue

@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="$emit('hide-modal')">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("edit_folder") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("edit_folder") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         id="selectLabel"
@@ -19,20 +17,18 @@
         type="text"
         @keyup.enter="editFolder"
       />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon button" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon button primary" @click="editFolder">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span></span>
+      <span>
+        <button class="icon button" @click="hideModal">
+          {{ $t("cancel") }}
+        </button>
+        <button class="icon button primary" @click="editFolder">
+          {{ $t("save") }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>
 

components/collections/EditRequest.vue

@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("edit_request") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("edit_request") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         id="selectLabel"
@@ -20,20 +18,18 @@
         :placeholder="placeholderReqName"
         @keyup.enter="saveRequest"
       />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon button" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon button primary" @click="saveRequest">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span></span>
+      <span>
+        <button class="icon button" @click="hideModal">
+          {{ $t("cancel") }}
+        </button>
+        <button class="icon button primary" @click="saveRequest">
+          {{ $t("save") }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>