From 1daebdb8394d51e64a1d9ff41e12d9c101f2d9c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20CG?= <victorcg@empathy.co>
Date: Fri, 26 Jul 2024 12:47:48 +0200
Subject: [PATCH] refactor(v-deep): replace by :deep()

---
 .../animations/staggered-fade-and-slide.vue   |  4 +--
 .../fixed-header-and-asides-layout.vue        | 25 ++++++++++---------
 .../layouts/multi-column-max-width-layout.vue |  2 +-
 .../layouts/single-column-layout.vue          |  8 +++---
 packages/x-components/src/views/home/Home.vue |  2 +-
 5 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
index bc2a484abd..e9bd78269c 100644
--- a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
@@ -41,13 +41,13 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
   $transition-duration: 0.25s;
 
   .x-staggered-fade-and-slide {
     z-index: 0;
 
-    &::v-deep .x-staggered-fade-and-slide {
+    &.x-staggered-fade-and-slide {
       &--enter-active,
       &--leave-active {
         transition: $transition-duration ease-out;
diff --git a/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue b/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
index dcec318d3a..bd7c867935 100644
--- a/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
+++ b/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
@@ -218,22 +218,23 @@
       grid-column: max-width;
     }
 
-    ::v-deep .x-layout__aside {
-      &.x-modal {
-        // layout
-        z-index: 3;
-        flex-flow: row nowrap;
-      }
+    :deep(.x-layout__aside.x-modal) {
+      // layout
+      z-index: 3;
+      flex-flow: row nowrap;
+    }
+
+    :deep(.x-layout__aside--right.x-modal) {
+      justify-content: flex-end;
+    }
 
-      // others
+    // others
+    :deep(.x-layout__aside) {
       pointer-events: none;
+
       > *:not(.slot-helper) {
         pointer-events: all;
       }
-
-      &--right.x-modal {
-        justify-content: flex-end;
-      }
     }
 
     &__scroll-to-top {
@@ -271,7 +272,7 @@
     }
   }
 
-  ::v-deep .x-layout__aside {
+  :deep(.x-layout__aside) {
     .x-modal__content {
       background-color: transparent;
       height: 100%;
diff --git a/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue b/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
index f872f3688d..0cfd52af5e 100644
--- a/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
+++ b/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
@@ -437,7 +437,7 @@
       padding-block-end: var(--x-size-margin-bottom-layout-columns-scroll-to-top, 10px);
       padding-inline-start: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);
 
-      ::v-deep > * {
+      :deep(> *) {
         pointer-events: all;
       }
     }
diff --git a/packages/x-components/src/components/layouts/single-column-layout.vue b/packages/x-components/src/components/layouts/single-column-layout.vue
index 4fdf4d5b7a..ccbf39e3c5 100644
--- a/packages/x-components/src/components/layouts/single-column-layout.vue
+++ b/packages/x-components/src/components/layouts/single-column-layout.vue
@@ -179,7 +179,7 @@
       grid-row: footer;
     }
 
-    ::v-deep .x-layout__aside {
+    :deep(.x-layout__aside) {
       grid-row: page;
       z-index: 3;
 
@@ -190,9 +190,9 @@
       }
     }
 
-    &__predictive ::v-deep,
-    &__floating ::v-deep,
-    .slot-helper ::v-deep {
+    &__predictive :deep(),
+    &__floating :deep(),
+    .slot-helper :deep() {
       pointer-events: none;
 
       > * {
diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index 306700b313..bc57bfeb61 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/packages/x-components/src/views/home/Home.vue
@@ -682,7 +682,7 @@
 </script>
 
 <style lang="scss" scoped>
-  .x-modal::v-deep .x-modal__content {
+  .x-modal :deep(.x-modal__content) {
     overflow: hidden;
     // Following is needed for closing the modal in base-events-modal.feature
     width: calc(100% - 20px);