From 71c08dbc175093bbfc56160e3b07b8774fcbc683 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20CG?= <victorcg88@users.noreply.github.com>
Date: Tue, 30 Jul 2024 13:04:44 +0200
Subject: [PATCH] refactor(v-deep): replace by :deep() (#1577)

---
 .../animations/staggered-fade-and-slide.vue   |  4 +--
 .../fixed-header-and-asides-layout.vue        | 26 ++++++++++---------
 .../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, 22 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..b576104544 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,24 @@
       grid-column: max-width;
     }
 
-    ::v-deep .x-layout__aside {
-      &.x-modal {
-        // layout
-        z-index: 3;
-        flex-flow: row nowrap;
-      }
+    // layout
+    :deep(.x-layout__aside.x-modal) {
+      z-index: 3;
+      flex-flow: row nowrap;
+    }
 
-      // others
+    // layout
+    :deep(.x-layout__aside--right.x-modal) {
+      justify-content: flex-end;
+    }
+
+    // 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 +273,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..a1c7aea07a 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(),
+    :deep(.slot-helper) {
       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);