frontend: add lint rule for ":deep usage as a combinator has been deprecated"

Issue: ecamp#5121

Author: BacLuc

frontend/package-lock.json

@@ -103,6 +103,7 @@
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-vue": "9.25.0",
+    "eslint-plugin-vue-scoped-css": "2.8.0",
     "flush-promises": "1.0.2",
     "jest-serializer-vue-tjw": "3.20.0",
     "jsdom": "24.0.0",
@@ -125,6 +126,7 @@
     },
     "extends": [
       "plugin:vue/recommended",
+      "plugin:vue-scoped-css/vue3-recommended",
       "eslint:recommended",
       "plugin:prettier/recommended",
       "@vue/eslint-config-prettier"

frontend/package.json

@@ -171,7 +171,7 @@ export default {
   min-height: 10rem;
 }
 
-.draggable-area ::v-deep .content-node {
+.draggable-area ::v-deep(.content-node) {
   margin: 0 !important;
   flex-grow: 1;
   transition: all 0.4s 25ms ease;
@@ -194,10 +194,11 @@ export default {
 
 @supports selector(:has(+ *)) {
   .draggable-area--layout-mode
-    ::v-deep
-    .content-node:hover:is(
-      :not(:has(.content-node:hover)):not(:has(.ec-button-contentnode-add:hover)):not(
-          :has(.resize-btn:hover)
+    ::v-deep(
+      .content-node:hover:is(
+          :not(:has(.content-node:hover)):not(:has(.ec-button-contentnode-add:hover)):not(
+              :has(.resize-btn:hover)
+            )
         )
     ) {
     box-shadow:
@@ -207,7 +208,7 @@ export default {
   }
 }
 
-.draggable-area--row ::v-deep .content-node {
+.draggable-area--row ::v-deep(.content-node) {
   flex: 1 0 320px !important;
 }
 

frontend/src/components/activity/DraggableContentNodes.vue

@@ -120,7 +120,7 @@ export default {
 </script>
 
 <style scoped>
-.ec-status-field::v-deep .v-input__append-inner {
+.ec-status-field::v-deep(.v-input__append-inner) {
   margin-top: 0;
   align-self: center;
   margin-right: -4px;

frontend/src/components/collaborator/CollaboratorForm.vue

@@ -494,7 +494,7 @@ export default {
   }
 }
 
-:deep .e-avatarrow {
+:deep(.e-avatarrow) {
   position: absolute;
   bottom: 2px;
   right: 2px;

frontend/src/components/program/picasso/PicassoEntry.vue

@@ -151,25 +151,25 @@ export default {
   flex-grow: 1;
 }
 
-.ec-popover-prompt ::v-deep .ec-activator .v-btn {
+.ec-popover-prompt ::v-deep(.ec-activator .v-btn) {
   position: absolute;
   background-color: white !important;
   color: #424242 !important;
 }
 
-.ec-popover-prompt ::v-deep .ec-activator .v-btn:hover::before {
+.ec-popover-prompt ::v-deep(.ec-activator .v-btn:hover::before) {
   opacity: 0;
 }
 
-.ec-popover-prompt--align-left ::v-deep .ec-activator .v-btn {
+.ec-popover-prompt--align-left ::v-deep(.ec-activator .v-btn) {
   left: 0;
 }
 
-.ec-popover-prompt--align-right ::v-deep .ec-activator .v-btn {
+.ec-popover-prompt--align-right ::v-deep(.ec-activator .v-btn) {
   right: 0;
 }
 
-.ec-popover-prompt--position-bottom ::v-deep .ec-activator .v-btn {
+.ec-popover-prompt--position-bottom ::v-deep(.ec-activator .v-btn) {
   bottom: 100%;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
@@ -179,7 +179,7 @@ export default {
     0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
-.ec-popover-prompt--position-top ::v-deep .ec-activator .v-btn {
+.ec-popover-prompt--position-top ::v-deep(.ec-activator .v-btn) {
   top: calc(100% - 10px);
   z-index: 10;
   border-top-right-radius: 0;

frontend/src/components/prompt/PopoverPrompt.vue

@@ -116,7 +116,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.e-profile--email ::v-deep .v-input__append-inner {
+.e-profile--email ::v-deep(.v-input__append-inner) {
   margin-top: 0 !important;
   align-self: center;
 }