refactor(v-deep): replace by :deep()

empathyco · Jul 26, 2024 · b9c097e · b9c097e
1 parent 1877da6
commit b9c097e
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 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
@@ -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
@@ -226,22 +226,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 {
@@ -279,7 +280,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
@@ -448,7 +448,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
@@ -191,7 +191,7 @@
       grid-row: footer;
     }
 
-    ::v-deep .x-layout__aside {
+    :deep(.x-layout__aside) {
       grid-row: page;
       z-index: 3;
 
@@ -202,9 +202,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
@@ -670,7 +670,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);