From b7577780ee46d150c33228e251ffae879fd958d4 Mon Sep 17 00:00:00 2001
From: Daniil Lohvinov <nsblnr@gmail.com>
Date: Fri, 12 Jan 2024 14:50:03 +0200
Subject: [PATCH] refactor: eslint fixes [WTEL-4144]

---
 .eslintrc.js                                  |  13 +-
 package-lock.json                             | 114 ++++++++----------
 package.json                                  |   5 +-
 src/app.vue                                   |   2 +-
 src/app/components/the-crm-workspace.vue      |   6 +-
 .../utils/access-denied-component.vue         |   2 +-
 .../contacts/components/contact-popup.vue     |  16 +--
 .../opened-contact-communication-popup.vue    |  20 +--
 .../opened-contact-communications.vue         |   9 +-
 .../components/opened-contact-general.vue     |  59 ++++++---
 .../components/opened-contact-tabs.vue        |   4 +-
 .../contacts/components/opened-contact.vue    |  22 ++--
 .../contacts/components/the-contacts.vue      |  50 ++++----
 .../modules/emails/components/the-emails.vue  |  27 +++--
 .../filters/components/filter-search.vue      |  12 +-
 .../permissions/components/grantee-select.vue |   8 +-
 .../permissions-tab-grantee-popup.vue         |  14 ++-
 .../components/the-permissions.vue            |  36 +++---
 .../modules/phones/components/the-phones.vue  |  27 +++--
 .../variables/components/the-variables.vue    |  33 ++---
 .../variables/components/variable-popup.vue   |  16 +--
 21 files changed, 261 insertions(+), 234 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 0c719176..a331b24b 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -5,15 +5,11 @@ module.exports = {
     es2022: true,
   },
   extends: [
-    'plugin:vue/vue3-essential',
-    '@vue/airbnb',
+    'plugin:vue/vue3-recommended',
   ],
-  parserOptions: {
-    parser: '@babel/eslint-parser',
-  },
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-console': 'off',
+    'no-debugger': 'off',
     'no-underscore-dangle': 'off',
     'import/prefer-default-export': 'off',
   },
@@ -23,9 +19,6 @@ module.exports = {
         '**/__tests__/*.{j,t}s?(x)',
         '**/tests/unit/**/*.spec.{j,t}s?(x)',
       ],
-      env: {
-        jest: true,
-      },
     },
   ],
 };
diff --git a/package-lock.json b/package-lock.json
index 1c14c0bb..cf4c1c56 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,7 +31,7 @@
         "babel-preset-vite": "^1.1.0",
         "eslint": "^8.56.0",
         "eslint-plugin-import": "^2.25.3",
-        "eslint-plugin-vue": "^8.7.1",
+        "eslint-plugin-vue": "^9.20.0",
         "happy-dom": "^13.0.0",
         "husky": "^8.0.3",
         "node-polyfill-webpack-plugin": "^2.0.1",
@@ -4578,20 +4578,21 @@
       }
     },
     "node_modules/eslint-plugin-vue": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-8.7.1.tgz",
-      "integrity": "sha512-28sbtm4l4cOzoO1LtzQPxfxhQABararUb1JtqusQqObJpWX2e/gmVyeYVfepizPFne0Q5cILkYGiBoV36L12Wg==",
+      "version": "9.20.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.20.0.tgz",
+      "integrity": "sha512-9/DV5CM7ItfgWmXjL6j3zyDtVTrslYdnEm+rnYNajdElx17b3erxi/Wc6FY7t3BQ6dgo0t/UBpgiWCOKtJyN8Q==",
       "dev": true,
       "dependencies": {
-        "eslint-utils": "^3.0.0",
+        "@eslint-community/eslint-utils": "^4.4.0",
         "natural-compare": "^1.4.0",
-        "nth-check": "^2.0.1",
-        "postcss-selector-parser": "^6.0.9",
-        "semver": "^7.3.5",
-        "vue-eslint-parser": "^8.0.1"
+        "nth-check": "^2.1.1",
+        "postcss-selector-parser": "^6.0.13",
+        "semver": "^7.5.4",
+        "vue-eslint-parser": "^9.4.0",
+        "xml-name-validator": "^4.0.0"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^14.17.0 || >=16.0.0"
       },
       "peerDependencies": {
         "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0"
@@ -4624,6 +4625,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/eslint-plugin-vue/node_modules/xml-name-validator": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+      "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/eslint-plugin-vue/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -4652,24 +4662,6 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/eslint-utils": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
-      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
-      "dev": true,
-      "dependencies": {
-        "eslint-visitor-keys": "^2.0.0"
-      },
-      "engines": {
-        "node": "^10.0.0 || ^12.0.0 || >= 14.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mysticatea"
-      },
-      "peerDependencies": {
-        "eslint": ">=5"
-      }
-    },
     "node_modules/eslint-visitor-keys": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
@@ -10564,21 +10556,21 @@
       }
     },
     "node_modules/vue-eslint-parser": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
-      "integrity": "sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g==",
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.0.tgz",
+      "integrity": "sha512-7KsNBb6gHFA75BtneJsoK/dbZ281whUIwFYdQxA68QrCrGMXYzUMbPDHGcOQ0OocIVKrWSKWXZ4mL7tonCXoUw==",
       "dev": true,
       "dependencies": {
-        "debug": "^4.3.2",
-        "eslint-scope": "^7.0.0",
-        "eslint-visitor-keys": "^3.1.0",
-        "espree": "^9.0.0",
+        "debug": "^4.3.4",
+        "eslint-scope": "^7.1.1",
+        "eslint-visitor-keys": "^3.3.0",
+        "espree": "^9.3.1",
         "esquery": "^1.4.0",
         "lodash": "^4.17.21",
-        "semver": "^7.3.5"
+        "semver": "^7.3.6"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^14.17.0 || >=16.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/mysticatea"
@@ -14657,17 +14649,18 @@
       }
     },
     "eslint-plugin-vue": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-8.7.1.tgz",
-      "integrity": "sha512-28sbtm4l4cOzoO1LtzQPxfxhQABararUb1JtqusQqObJpWX2e/gmVyeYVfepizPFne0Q5cILkYGiBoV36L12Wg==",
+      "version": "9.20.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.20.0.tgz",
+      "integrity": "sha512-9/DV5CM7ItfgWmXjL6j3zyDtVTrslYdnEm+rnYNajdElx17b3erxi/Wc6FY7t3BQ6dgo0t/UBpgiWCOKtJyN8Q==",
       "dev": true,
       "requires": {
-        "eslint-utils": "^3.0.0",
+        "@eslint-community/eslint-utils": "^4.4.0",
         "natural-compare": "^1.4.0",
-        "nth-check": "^2.0.1",
-        "postcss-selector-parser": "^6.0.9",
-        "semver": "^7.3.5",
-        "vue-eslint-parser": "^8.0.1"
+        "nth-check": "^2.1.1",
+        "postcss-selector-parser": "^6.0.13",
+        "semver": "^7.5.4",
+        "vue-eslint-parser": "^9.4.0",
+        "xml-name-validator": "^4.0.0"
       },
       "dependencies": {
         "lru-cache": {
@@ -14688,6 +14681,12 @@
             "lru-cache": "^6.0.0"
           }
         },
+        "xml-name-validator": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+          "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+          "dev": true
+        },
         "yallist": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -14714,15 +14713,6 @@
         }
       }
     },
-    "eslint-utils": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
-      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
-      "dev": true,
-      "requires": {
-        "eslint-visitor-keys": "^2.0.0"
-      }
-    },
     "eslint-visitor-keys": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
@@ -18967,18 +18957,18 @@
       }
     },
     "vue-eslint-parser": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
-      "integrity": "sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g==",
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.0.tgz",
+      "integrity": "sha512-7KsNBb6gHFA75BtneJsoK/dbZ281whUIwFYdQxA68QrCrGMXYzUMbPDHGcOQ0OocIVKrWSKWXZ4mL7tonCXoUw==",
       "dev": true,
       "requires": {
-        "debug": "^4.3.2",
-        "eslint-scope": "^7.0.0",
-        "eslint-visitor-keys": "^3.1.0",
-        "espree": "^9.0.0",
+        "debug": "^4.3.4",
+        "eslint-scope": "^7.1.1",
+        "eslint-visitor-keys": "^3.3.0",
+        "espree": "^9.3.1",
         "esquery": "^1.4.0",
         "lodash": "^4.17.21",
-        "semver": "^7.3.5"
+        "semver": "^7.3.6"
       },
       "dependencies": {
         "eslint-scope": {
diff --git a/package.json b/package.json
index 87b8a597..27321176 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "test:unit": "vitest"
+    "test:unit": "vitest",
+    "lint:fix": "eslint --fix --ext .js,.vue src"
   },
   "dependencies": {
     "@vue/compat": "^3.3.9",
@@ -32,7 +33,7 @@
     "@vitest/coverage-v8": "^1.1.3",
     "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-vue": "^8.7.1",
+    "eslint-plugin-vue": "^9.20.0",
     "happy-dom": "^13.0.0",
     "husky": "^8.0.3",
     "node-polyfill-webpack-plugin": "^2.0.1",
diff --git a/src/app.vue b/src/app.vue
index 320ef494..e37fa85d 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <router-view></router-view>
+  <router-view />
 </template>
 
 <style lang="scss">
diff --git a/src/app/components/the-crm-workspace.vue b/src/app/components/the-crm-workspace.vue
index 7e3390a6..70ce5b97 100644
--- a/src/app/components/the-crm-workspace.vue
+++ b/src/app/components/the-crm-workspace.vue
@@ -2,12 +2,12 @@
   <main class="object-wrap">
     <section class="object">
       <wt-app-header>
-        <wt-notifications-bar></wt-notifications-bar>
+        <wt-notifications-bar />
         <wt-navigation-bar
           :current-app="currentApp"
           :nav="nav"
           :dark-mode="darkMode"
-        ></wt-navigation-bar>
+        />
         <wt-logo
           :dark-mode="darkMode"
         />
@@ -16,7 +16,7 @@
           :apps="apps"
           :current-app="currentApp"
           :dark-mode="darkMode"
-        ></wt-app-navigator>
+        />
         <wt-header-actions
           :build-info="{ release, build }"
           :user="userinfo"
diff --git a/src/app/components/utils/access-denied-component.vue b/src/app/components/utils/access-denied-component.vue
index 5a98349c..db2717ec 100644
--- a/src/app/components/utils/access-denied-component.vue
+++ b/src/app/components/utils/access-denied-component.vue
@@ -2,7 +2,7 @@
   <wt-error-page
     type="403"
     @back="goToApplicationHub"
-  ></wt-error-page>
+  />
 </template>
 
 <script setup>
diff --git a/src/modules/contacts/components/contact-popup.vue b/src/modules/contacts/components/contact-popup.vue
index ceca990e..206a3c41 100644
--- a/src/modules/contacts/components/contact-popup.vue
+++ b/src/modules/contacts/components/contact-popup.vue
@@ -4,11 +4,11 @@
     width="480"
     @close="close"
   >
-    <template v-slot:title>
+    <template #title>
       {{ props.id ? t('reusable.edit') : t('reusable.new') }}
       {{ t('contacts.contact', 1).toLowerCase() }}
     </template>
-    <template v-slot:main>
+    <template #main>
       <form class="contact-popup-form">
         <wt-input
           :value="draft.name.commonName"
@@ -17,19 +17,19 @@
           required
           prevent-trim
           @input="draft.name.commonName = $event"
-        ></wt-input>
+        />
         <wt-select
           :value="draft.timezones[0]?.timezone"
           :label="t('date.timezone', 1)"
           :search-method="TimezonesAPI.getLookup"
           @input="draft.timezones[0] = { timezone: $event }"
-        ></wt-select>
+        />
         <wt-select
           :value="draft.managers[0]?.user"
           :label="t('contacts.manager', 1)"
           :search-method="UsersAPI.getLookup"
           @input="draft.managers[0] = { user: $event }"
-        ></wt-select>
+        />
         <wt-tags-input
           :value="draft.labels"
           :label="t('vocabulary.labels', 1)"
@@ -38,15 +38,15 @@
           track-by="label"
           taggable
           @input="draft.labels = $event"
-        ></wt-tags-input>
+        />
         <wt-textarea
           :value="draft.about"
           :label="t('vocabulary.description')"
           @input="draft.about = $event"
-        ></wt-textarea>
+        />
       </form>
     </template>
-    <template v-slot:actions>
+    <template #actions>
       <wt-button
         :disabled="v$.$invalid"
         :loading="isSaving"
diff --git a/src/modules/contacts/components/opened-contact-communication-popup.vue b/src/modules/contacts/components/opened-contact-communication-popup.vue
index ed4df556..219a1ef9 100644
--- a/src/modules/contacts/components/opened-contact-communication-popup.vue
+++ b/src/modules/contacts/components/opened-contact-communication-popup.vue
@@ -5,14 +5,14 @@
     overflow
     @close="close"
   >
-    <template v-slot:header>
+    <template #header>
       {{ mode === 'update' ? t('reusable.edit') : t('reusable.add') }}
       {{
         t('contacts.communications.communications', 1)
-        .toLowerCase()
+          .toLowerCase()
       }}
     </template>
-    <template v-slot:main>
+    <template #main>
       <form
         class="opened-contact-add-communication-popup-form"
       >
@@ -26,7 +26,7 @@
           track-by="value"
           required
           @input="draft.channel = $event.value"
-        ></wt-select>
+        />
         <wt-select
           ref="TypeSelect"
           :value="draft.type"
@@ -36,27 +36,29 @@
           :label="t('objects.communicationType', 1)"
           required
           @input="draft.type = $event"
-        ></wt-select>
+        />
         <wt-input
           v-model="draft.destination"
           :v="v$.draft.destination"
           :clearable="false"
           :label="t('contacts.communications.destination')"
           required
-        ></wt-input>
+        />
       </form>
     </template>
-    <template v-slot:actions>
+    <template #actions>
       <wt-button
         :disabled="v$.$invalid"
         :loading="isLoading"
         @click="save"
-      >{{ t('reusable.save') }}
+      >
+        {{ t('reusable.save') }}
       </wt-button>
       <wt-button
         color="secondary"
         @click="close"
-      >{{ t('reusable.cancel') }}
+      >
+        {{ t('reusable.cancel') }}
       </wt-button>
     </template>
   </wt-popup>
diff --git a/src/modules/contacts/components/opened-contact-communications.vue b/src/modules/contacts/components/opened-contact-communications.vue
index 42da473b..a359e3d8 100644
--- a/src/modules/contacts/components/opened-contact-communications.vue
+++ b/src/modules/contacts/components/opened-contact-communications.vue
@@ -6,7 +6,7 @@
         :initial-channel="currentTab.channel"
         :callback="saveCommunication"
         @close="isCommunicationPopup = false"
-      ></add-communication-popup>
+      />
       <wt-button
         v-for="(tab) of tabs"
         :key="tab.value"
@@ -17,19 +17,20 @@
       >
         <wt-icon
           :icon="tab.icon"
-        ></wt-icon>
+        />
         {{ tab.label }}
       </wt-button>
       <wt-button
         :disabled="!access.hasRbacEditAccess"
         @click="isCommunicationPopup = true"
-      >{{ t('reusable.add') }}
+      >
+        {{ t('reusable.add') }}
       </wt-button>
     </header>
     <component
       :is="currentTab.component"
       :namespace="currentTab.namespace"
-    ></component>
+    />
   </section>
 </template>
 
diff --git a/src/modules/contacts/components/opened-contact-general.vue b/src/modules/contacts/components/opened-contact-general.vue
index 156082e1..4a677d4f 100644
--- a/src/modules/contacts/components/opened-contact-general.vue
+++ b/src/modules/contacts/components/opened-contact-general.vue
@@ -5,22 +5,22 @@
       :options="actionOptions"
       @click="$event.option.handler()"
     >
-      <template v-slot:activator>
+      <template #activator>
         <wt-tooltip>
-          <template v-slot:activator>
+          <template #activator>
             <wt-icon-btn
               icon="options"
-            ></wt-icon-btn>
+            />
           </template>
           {{ t('vocabulary.options', 2) }}
         </wt-tooltip>
       </template>
-      <template v-slot:option="option">
+      <template #option="option">
         <div class="opened-contact-general-option">
           <wt-icon
             :icon="option.icon"
             :disabled="option.disabled"
-          ></wt-icon>
+          />
 
           {{ option.text }}
         </div>
@@ -30,45 +30,66 @@
     <wt-avatar
       size="3xl"
       :username="commonName"
-    ></wt-avatar>
+    />
 
-    <p class="opened-contact-general-name">{{ commonName }}</p>
+    <p class="opened-contact-general-name">
+      {{ commonName }}
+    </p>
 
-    <wt-divider></wt-divider>
+    <wt-divider />
 
-    <div class="opened-contact-general-item" v-if="timezones.length">
+    <div
+      v-if="timezones.length"
+      class="opened-contact-general-item"
+    >
       <p class="opened-contact-general-item__title">
         {{ t('date.timezone', 1) }}
       </p>
-      <p class="opened-contact-general-item__value">{{ timezones[0].timezone.name }}</p>
+      <p class="opened-contact-general-item__value">
+        {{ timezones[0].timezone.name }}
+      </p>
     </div>
 
-    <wt-divider v-if="timezones.length"></wt-divider>
+    <wt-divider v-if="timezones.length" />
 
-    <div class="opened-contact-general-item" v-if="managers.length">
+    <div
+      v-if="managers.length"
+      class="opened-contact-general-item"
+    >
       <p class="opened-contact-general-item__title">
         {{ t('contacts.manager', 1) }}
       </p>
-      <p class="opened-contact-general-item__value">{{ managers[0].user.name }}</p>
+      <p class="opened-contact-general-item__value">
+        {{ managers[0].user.name }}
+      </p>
     </div>
 
-    <wt-divider v-if="managers.length"></wt-divider>
+    <wt-divider v-if="managers.length" />
 
-    <div class="opened-contact-general-item" v-if="about">
+    <div
+      v-if="about"
+      class="opened-contact-general-item"
+    >
       <p class="opened-contact-general-item__title">
         {{ t('vocabulary.description') }}
       </p>
-      <p class="opened-contact-general-item__value">{{ about }}</p>
+      <p class="opened-contact-general-item__value">
+        {{ about }}
+      </p>
     </div>
 
-    <wt-divider v-if="about"></wt-divider>
+    <wt-divider v-if="about" />
 
-    <div class="opened-contact-general-item" v-if="labels.length">
+    <div
+      v-if="labels.length"
+      class="opened-contact-general-item"
+    >
       <div class="opened-contact-general-item__value opened-contact-general-item__value--labels">
         <wt-chip
           v-for="({ label, id }) of labels"
           :key="id"
-        >{{ label }}
+        >
+          {{ label }}
         </wt-chip>
       </div>
     </div>
diff --git a/src/modules/contacts/components/opened-contact-tabs.vue b/src/modules/contacts/components/opened-contact-tabs.vue
index 4dcaf54d..27cd5009 100644
--- a/src/modules/contacts/components/opened-contact-tabs.vue
+++ b/src/modules/contacts/components/opened-contact-tabs.vue
@@ -4,11 +4,11 @@
       :current="currentTab"
       :tabs="tabs"
       @change="changeTab"
-    ></wt-tabs>
+    />
     <router-view
       class="opened-contact-tab"
       :namespace="namespace"
-    ></router-view>
+    />
   </article>
 </template>
 
diff --git a/src/modules/contacts/components/opened-contact.vue b/src/modules/contacts/components/opened-contact.vue
index bcf6ae50..c521fbb4 100644
--- a/src/modules/contacts/components/opened-contact.vue
+++ b/src/modules/contacts/components/opened-contact.vue
@@ -3,28 +3,28 @@
     class="opened-contact"
     :actions-panel="false"
   >
-    <template v-slot:header>
+    <template #header>
       <wt-page-header
         :secondary-action="close"
         hide-primary
       >
-        <wt-headline-nav :path="path"></wt-headline-nav>
+        <wt-headline-nav :path="path" />
       </wt-page-header>
     </template>
-    <template v-slot:main>
+    <template #main>
       <contact-popup
         v-if="isContactPopup"
-        :namespace="baseNamespace"
         :id="id"
+        :namespace="baseNamespace"
         @saved="loadItem"
         @close="isContactPopup = false"
-      ></contact-popup>
+      />
       <delete-confirmation-popup
         v-show="isDeleteConfirmationPopup"
         :delete-count="deleteCount"
         :callback="deleteCallback"
         @close="closeDelete"
-      ></delete-confirmation-popup>
+      />
       <div class="opened-contact-content">
         <opened-contact-general
           :common-name="itemInstance.name ? itemInstance.name.commonName : ''"
@@ -34,13 +34,13 @@
           :labels="itemInstance.labels ? itemInstance.labels : []"
           @edit="isContactPopup = true"
           @delete="askDeleteConfirmation({
-              deleted: [itemInstance],
-              callback: () => deleteContact(itemInstance),
-            })"
-        ></opened-contact-general>
+            deleted: [itemInstance],
+            callback: () => deleteContact(itemInstance),
+          })"
+        />
         <opened-contact-tabs
           :namespace="namespace"
-        ></opened-contact-tabs>
+        />
       </div>
     </template>
   </wt-page-wrapper>
diff --git a/src/modules/contacts/components/the-contacts.vue b/src/modules/contacts/components/the-contacts.vue
index 57de0e09..b2df4032 100644
--- a/src/modules/contacts/components/the-contacts.vue
+++ b/src/modules/contacts/components/the-contacts.vue
@@ -3,14 +3,14 @@
     class="contacts"
     :actions-panel="false"
   >
-    <template v-slot:header>
+    <template #header>
       <contact-popup
         v-if="isContactPopup"
-        :namespace="baseNamespace"
         :id="editedContactId"
+        :namespace="baseNamespace"
         @saved="saved"
         @close="closeContactPopup"
-      ></contact-popup>
+      />
 
       <wt-page-header
         :primary-action="create"
@@ -19,44 +19,47 @@
         :secondary-disabled="!hasObacDeleteAccess || !deletableSelectedItems.length"
         :primary-disabled="!hasObacCreateAccess"
       >
-        <wt-headline-nav :path="path"></wt-headline-nav>
-        <template v-slot:actions>
+        <wt-headline-nav :path="path" />
+        <template #actions>
           <filter-search
             :namespace="filtersNamespace"
-          ></filter-search>
+          />
         </template>
       </wt-page-header>
     </template>
-    <template v-slot:main>
-      <wt-loader v-show="isLoading"></wt-loader>
+    <template #main>
+      <wt-loader v-show="isLoading" />
 
       <wt-dummy
         v-if="!isLoading && !dataList.length"
         :src="dummy.src"
         :text="dummy.text"
         :dark-mode="darkMode"
-      ></wt-dummy>
+      />
 
       <delete-confirmation-popup
         v-show="isDeleteConfirmationPopup"
         :delete-count="deleteCount"
         :callback="deleteCallback"
         @close="closeDelete"
-      ></delete-confirmation-popup>
+      />
 
-      <div v-show="!isLoading && dataList.length" class="table-wrapper">
+      <div
+        v-show="!isLoading && dataList.length"
+        class="table-wrapper"
+      >
         <wt-table
           :headers="headers"
           :data="dataList"
           sortable
           @sort="sort"
         >
-          <template v-slot:name="{ item }">
+          <template #name="{ item }">
             <div class="username-wrapper">
               <wt-avatar
                 size="sm"
                 :username="item.name.commonName"
-              ></wt-avatar>
+              />
               <wt-item-link
                 :id="item.id"
                 :route-name="CrmSections.CONTACTS"
@@ -65,10 +68,10 @@
               </wt-item-link>
             </div>
           </template>
-          <template v-slot:managers="{ item }">
+          <template #managers="{ item }">
             {{ item.managers?.data[0].user.name }}
           </template>
-          <template v-slot:labels="{ item }">
+          <template #labels="{ item }">
             <div
               v-if="item.labels"
               class="contacts-labels-wrapper"
@@ -76,30 +79,31 @@
               <wt-chip
                 v-for="({ label, id }) of item.labels.data"
                 :key="id"
-              >{{ label }}
+              >
+                {{ label }}
               </wt-chip>
             </div>
           </template>
-          <template v-slot:actions="{ item }">
+          <template #actions="{ item }">
             <wt-icon-action
               :disabled="!item.access.edit"
               action="edit"
               @click="edit(item)"
-            ></wt-icon-action>
+            />
             <wt-icon-action
               :disabled="!item.access.delete"
               action="delete"
               @click="askDeleteConfirmation({
-                  deleted: [item],
-                  callback: () => deleteData(item),
-                })"
-            ></wt-icon-action>
+                deleted: [item],
+                callback: () => deleteData(item),
+              })"
+            />
           </template>
         </wt-table>
         <filter-pagination
           :namespace="filtersNamespace"
           :is-next="isNext"
-        ></filter-pagination>
+        />
       </div>
     </template>
   </wt-page-wrapper>
diff --git a/src/modules/contacts/modules/emails/components/the-emails.vue b/src/modules/contacts/modules/emails/components/the-emails.vue
index 8a7ec46a..5b8511b1 100644
--- a/src/modules/contacts/modules/emails/components/the-emails.vue
+++ b/src/modules/contacts/modules/emails/components/the-emails.vue
@@ -5,24 +5,27 @@
       :edited-instance="editedItem"
       :callback="updateEmail"
       @close="editedItem = null"
-    ></communication-popup>
+    />
 
     <delete-confirmation-popup
       v-if="isConfirmationPopup"
       :callback="deleteCallback"
       :delete-count="deleteCount"
       @close="closeDelete"
-    ></delete-confirmation-popup>
+    />
 
-    <wt-loader v-show="isLoading"></wt-loader>
+    <wt-loader v-show="isLoading" />
 
     <wt-dummy
       v-if="!isLoading && showDummy"
       :src="darkMode ? dummyDark : dummyLight"
       :text="t('contacts.communications.emails.dummy')"
-    ></wt-dummy>
+    />
 
-    <div v-show="!isLoading && !showDummy" class="table-wrapper">
+    <div
+      v-show="!isLoading && !showDummy"
+      class="table-wrapper"
+    >
       <wt-table
         :headers="headers"
         :data="dataList"
@@ -30,29 +33,29 @@
         sortable
         @sort="sort"
       >
-        <template v-slot:primary="{ item, index }">
+        <template #primary="{ item, index }">
           <wt-icon
             v-if="item.primary"
             icon="tick"
             color="success"
-          ></wt-icon>
+          />
           <wt-icon-btn
             v-else
             :disabled="!access.hasRbacEditAccess"
             class="set-primary-btn"
             icon="tick"
             @click="setAsPrimary({ item, index })"
-          ></wt-icon-btn>
+          />
         </template>
-        <template v-slot:type="{ item }">
+        <template #type="{ item }">
           {{ item.type.name }}
         </template>
-        <template v-slot:actions="{ item, index }">
+        <template #actions="{ item, index }">
           <wt-icon-action
             :disabled="!access.hasRbacEditAccess"
             action="edit"
             @click="editedItem = item"
-          ></wt-icon-action>
+          />
           <wt-icon-action
             :disabled="!access.hasRbacEditAccess"
             action="delete"
@@ -60,7 +63,7 @@
               deleted: item,
               callback: () => deleteData(item),
             })"
-          ></wt-icon-action>
+          />
         </template>
       </wt-table>
     </div>
diff --git a/src/modules/contacts/modules/filters/components/filter-search.vue b/src/modules/contacts/modules/filters/components/filter-search.vue
index 64feb0c9..0e7235e2 100644
--- a/src/modules/contacts/modules/filters/components/filter-search.vue
+++ b/src/modules/contacts/modules/filters/components/filter-search.vue
@@ -10,28 +10,28 @@
       debounce
       @search="setLocalValue($event)"
     >
-      <template v-slot:additional-actions="options">
+      <template #additional-actions="options">
         <wt-context-menu
           :options="searchModeOptions"
           @click="changeMode($event.option)"
         >
-          <template v-slot:activator>
+          <template #activator>
             <wt-tooltip>
-              <template v-slot:activator>
+              <template #activator>
                 <wt-icon-btn
                   :color="options.invalid ? 'error' : 'default'"
                   icon="filter"
-                ></wt-icon-btn>
+                />
               </template>
               {{ $t('webitelUI.searchBar.settingsHint') }}
             </wt-tooltip>
           </template>
-          <template v-slot:option="{ value, text }">
+          <template #option="{ value, text }">
             <wt-radio
               :label="text"
               :selected="filterQuery === value"
               :value="true"
-            ></wt-radio>
+            />
           </template>
         </wt-context-menu>
       </template>
diff --git a/src/modules/contacts/modules/permissions/components/grantee-select.vue b/src/modules/contacts/modules/permissions/components/grantee-select.vue
index cd714534..f3203fdf 100644
--- a/src/modules/contacts/modules/permissions/components/grantee-select.vue
+++ b/src/modules/contacts/modules/permissions/components/grantee-select.vue
@@ -9,21 +9,21 @@
     option-label="name"
     @input="emit('input', $event)"
   >
-    <template v-slot:singleLabel="{ option, optionLabel }">
+    <template #singleLabel="{ option, optionLabel }">
       <span class="grantee-select-option">
         <wt-icon
           :icon="option.user ? 'user' : 'role'"
           color="active"
-        ></wt-icon>
+        />
         {{ option[optionLabel] || option }}
       </span>
     </template>
-    <template v-slot:option="{ option, optionLabel }">
+    <template #option="{ option, optionLabel }">
       <span class="grantee-select-option">
         <wt-icon
           :icon="option.user ? 'user' : 'role'"
           color="active"
-        ></wt-icon>
+        />
         {{ option[optionLabel] || option }}
       </span>
     </template>
diff --git a/src/modules/contacts/modules/permissions/components/permissions-tab-grantee-popup.vue b/src/modules/contacts/modules/permissions/components/permissions-tab-grantee-popup.vue
index df53ee6d..815b3154 100644
--- a/src/modules/contacts/modules/permissions/components/permissions-tab-grantee-popup.vue
+++ b/src/modules/contacts/modules/permissions/components/permissions-tab-grantee-popup.vue
@@ -4,26 +4,28 @@
     overflow
     @close="close"
   >
-    <template v-slot:title>
+    <template #title>
       {{ t('permissions.granteePopup.title') }}
     </template>
-    <template v-slot:main>
+    <template #main>
       <grantee-select
         :value="grantee"
         @input="grantee = $event"
-      ></grantee-select>
+      />
     </template>
-    <template v-slot:actions>
+    <template #actions>
       <wt-button
         :disabled="v$.$invalid"
         :loading="isLoading"
         @click="save"
-      >{{ $t('reusable.add') }}
+      >
+        {{ $t('reusable.add') }}
       </wt-button>
       <wt-button
         color="secondary"
         @click="close"
-      >{{ $t('reusable.close') }}
+      >
+        {{ $t('reusable.close') }}
       </wt-button>
     </template>
   </wt-popup>
diff --git a/src/modules/contacts/modules/permissions/components/the-permissions.vue b/src/modules/contacts/modules/permissions/components/the-permissions.vue
index cf0cb40e..0afa8acd 100644
--- a/src/modules/contacts/modules/permissions/components/the-permissions.vue
+++ b/src/modules/contacts/modules/permissions/components/the-permissions.vue
@@ -5,21 +5,24 @@
         v-if="isGranteePopup"
         :callback="grantPermissions"
         @close="isGranteePopup = false"
-      ></grantee-popup>
+      />
       <wt-icon-action
         :disabled="!access.hasRbacEditAccess"
         action="add"
         @click="isGranteePopup = true"
-      ></wt-icon-action>
+      />
       <wt-icon-action
         action="refresh"
         @click="loadData"
-      ></wt-icon-action>
+      />
     </header>
 
-    <wt-loader v-show="isLoading"></wt-loader>
+    <wt-loader v-show="isLoading" />
 
-    <div v-show="!isLoading" class="table-wrapper">
+    <div
+      v-show="!isLoading"
+      class="table-wrapper"
+    >
       <wt-table
         :headers="headers"
         :data="modifiedDataList"
@@ -27,61 +30,60 @@
         sortable
         @sort="sort"
       >
-
-        <template v-slot:grantee="{ item }">
+        <template #grantee="{ item }">
           <div class="permissions-role-column">
             <wt-icon
               :icon="item.grantee.user ? 'user' : 'role'"
               color="active"
-            ></wt-icon>
+            />
             {{ item.grantee.name }}
           </div>
         </template>
 
-        <template v-slot:read="{ item }">
+        <template #read="{ item }">
           <wt-select
             v-if="access.hasRbacEditAccess"
             :value="item.access.r"
             :options="accessOptions"
             :clearable="false"
             @input="changeReadAccessMode({ item, mode: $event })"
-          ></wt-select>
+          />
           <span v-else>{{ item.access.r.name }}</span>
         </template>
 
-        <template v-slot:edit="{ item }">
+        <template #edit="{ item }">
           <wt-select
             v-if="access.hasRbacEditAccess"
             :value="item.access.w"
             :options="accessOptions"
             :clearable="false"
             @input="changeUpdateAccessMode({ item, mode: $event })"
-          ></wt-select>
+          />
           <span v-else>{{ item.access.w.name }}</span>
         </template>
 
-        <template v-slot:delete="{ item }">
+        <template #delete="{ item }">
           <wt-select
             v-if="access.hasRbacEditAccess"
             :value="item.access.d"
             :options="accessOptions"
             :clearable="false"
             @input="changeDeleteAccessMode({ item, mode: $event })"
-          ></wt-select>
+          />
           <span v-else>{{ item.access.d.name }}</span>
         </template>
-        <template v-slot:actions="{ item }">
+        <template #actions="{ item }">
           <wt-icon-action
             :disabled="!access.hasRbacEditAccess"
             action="delete"
             @click="changeReadAccessMode({ item, mode: { id: AccessMode.FORBIDDEN }})"
-          ></wt-icon-action>
+          />
         </template>
       </wt-table>
       <filter-pagination
         :namespace="filtersNamespace"
         :is-next="isNext"
-      ></filter-pagination>
+      />
     </div>
   </div>
 </template>
diff --git a/src/modules/contacts/modules/phones/components/the-phones.vue b/src/modules/contacts/modules/phones/components/the-phones.vue
index 4ac8ae91..ee071782 100644
--- a/src/modules/contacts/modules/phones/components/the-phones.vue
+++ b/src/modules/contacts/modules/phones/components/the-phones.vue
@@ -5,24 +5,27 @@
       :edited-instance="editedItem"
       :callback="updatePhone"
       @close="editedItem = null"
-    ></communication-popup>
+    />
 
     <delete-confirmation-popup
       v-if="isConfirmationPopup"
       :callback="deleteCallback"
       :delete-count="deleteCount"
       @close="closeDelete"
-    ></delete-confirmation-popup>
+    />
 
-    <wt-loader v-show="isLoading"></wt-loader>
+    <wt-loader v-show="isLoading" />
 
     <wt-dummy
       v-if="!isLoading && showDummy"
       :src="darkMode ? dummyDark : dummyLight"
       :text="t('contacts.communications.phones.dummy')"
-    ></wt-dummy>
+    />
 
-    <div v-show="!isLoading && !showDummy" class="table-wrapper">
+    <div
+      v-show="!isLoading && !showDummy"
+      class="table-wrapper"
+    >
       <wt-table
         :headers="headers"
         :data="dataList"
@@ -30,29 +33,29 @@
         sortable
         @sort="sort"
       >
-        <template v-slot:primary="{ item, index }">
+        <template #primary="{ item, index }">
           <wt-icon
             v-if="item.primary"
             icon="tick"
             color="success"
-          ></wt-icon>
+          />
           <wt-icon-btn
             v-else
             :disabled="!access.hasRbacEditAccess"
             class="set-primary-btn"
             icon="tick"
             @click="setAsPrimary({ item, index })"
-          ></wt-icon-btn>
+          />
         </template>
-        <template v-slot:type="{ item }">
+        <template #type="{ item }">
           {{ item.type.name }}
         </template>
-        <template v-slot:actions="{ item, index }">
+        <template #actions="{ item, index }">
           <wt-icon-action
             :disabled="!access.hasRbacEditAccess"
             action="edit"
             @click="editedItem = item"
-          ></wt-icon-action>
+          />
           <wt-icon-action
             :disabled="!access.hasRbacEditAccess"
             action="delete"
@@ -60,7 +63,7 @@
               deleted: item,
               callback: () => deleteData(item),
             })"
-          ></wt-icon-action>
+          />
         </template>
       </wt-table>
     </div>
diff --git a/src/modules/contacts/modules/variables/components/the-variables.vue b/src/modules/contacts/modules/variables/components/the-variables.vue
index bec72721..228b28fc 100644
--- a/src/modules/contacts/modules/variables/components/the-variables.vue
+++ b/src/modules/contacts/modules/variables/components/the-variables.vue
@@ -6,12 +6,12 @@
         :edited-instance="editedItem"
         :callback="save"
         @close="handleEditedItem"
-      ></variable-popup>
+      />
       <wt-icon-action
         :disabled="!access.hasRbacEditAccess"
         action="add"
         @click="isVariablePopup = true"
-      ></wt-icon-action>
+      />
     </header>
 
     <delete-confirmation-popup
@@ -19,16 +19,19 @@
       :callback="deleteCallback"
       :delete-count="deleteCount"
       @close="closeDelete"
-    ></delete-confirmation-popup>
+    />
 
-    <wt-loader v-show="isLoading"></wt-loader>
+    <wt-loader v-show="isLoading" />
 
     <wt-dummy
       v-if="!isLoading && showDummy"
       :dark-mode="darkMode"
-    ></wt-dummy>
+    />
 
-    <div v-show="!isLoading && !showDummy" class="table-wrapper">
+    <div
+      v-show="!isLoading && !showDummy"
+      class="table-wrapper"
+    >
       <wt-table
         :headers="headers"
         :data="dataList"
@@ -36,32 +39,32 @@
         sortable
         @sort="sort"
       >
-        <template v-slot:key="{ item }">
+        <template #key="{ item }">
           {{ item.key }}
         </template>
-        <template v-slot:value="{ item }">
+        <template #value="{ item }">
           {{ item.value }}
         </template>
-        <template v-slot:actions="{ item }">
+        <template #actions="{ item }">
           <wt-icon-action
             :disabled="!access.hasRbacEditAccess"
             action="edit"
             @click="handleEditedItem(item)"
-          ></wt-icon-action>
+          />
           <wt-icon-action
             :disabled="!access.hasRbacEditAccess"
             action="delete"
             @click="askDeleteConfirmation({
-                  deleted: [item],
-                  callback: () => deleteData(item),
-                })"
-          ></wt-icon-action>
+              deleted: [item],
+              callback: () => deleteData(item),
+            })"
+          />
         </template>
       </wt-table>
       <filter-pagination
         :namespace="filtersNamespace"
         :is-next="isNext"
-      ></filter-pagination>
+      />
     </div>
   </div>
 </template>
diff --git a/src/modules/contacts/modules/variables/components/variable-popup.vue b/src/modules/contacts/modules/variables/components/variable-popup.vue
index 7ac829c4..bcb42635 100644
--- a/src/modules/contacts/modules/variables/components/variable-popup.vue
+++ b/src/modules/contacts/modules/variables/components/variable-popup.vue
@@ -4,11 +4,11 @@
     overflow
     @close="close"
   >
-    <template v-slot:header>
+    <template #header>
       {{ mode === 'update' ? t('reusable.edit') : t('reusable.add') }}
       {{ t('contacts.attributes', 1).toLowerCase() }}
     </template>
-    <template v-slot:main>
+    <template #main>
       <form>
         <wt-input
           v-model="draft.key"
@@ -16,27 +16,29 @@
           :clearable="false"
           :label="t('vocabulary.keys',1)"
           required
-        ></wt-input>
+        />
         <wt-input
           v-model="draft.value"
           :v="v$.draft.value"
           :clearable="false"
           :label="t('vocabulary.values',1)"
           required
-        ></wt-input>
+        />
       </form>
     </template>
-    <template v-slot:actions>
+    <template #actions>
       <wt-button
         :loading="isLoading"
         :disabled="v$.$invalid"
         @click="props.callback(draft)"
-      >{{ mode === 'update' ? t('reusable.edit') : t('reusable.add') }}
+      >
+        {{ mode === 'update' ? t('reusable.edit') : t('reusable.add') }}
       </wt-button>
       <wt-button
         color="secondary"
         @click="close"
-      >{{ t('reusable.cancel') }}
+      >
+        {{ t('reusable.cancel') }}
       </wt-button>
     </template>
   </wt-popup>