From a216d28a7200cdb9aabf09f79801172fe5229af5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga@hotmail.com>
Date: Wed, 21 Aug 2024 14:33:47 +0200
Subject: [PATCH] refactor(JTransition): set scoped styles and remove comments

Vue 3.5 fixed the issue where Suspense didn't inherit correctly the scope id.

See vuejs/core/pull/10652
---
 frontend/src/App.vue                        |  3 --
 frontend/src/components/lib/JTransition.vue | 56 ++++++++++-----------
 frontend/src/components/lib/JView.vue       |  2 +-
 3 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index eddfb247f6c..6b91a8b0a8e 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -36,9 +36,6 @@
 </template>
 
 <script setup lang="ts">
-/**
- * TODO: Remove j-transition classes from this file once https://github.com/vuejs/core/issues/5148 is fixed
- */
 import { shallowRef, type Component as VueComponent, onMounted } from 'vue';
 import type { RouteMeta } from 'vue-router';
 import DefaultLayout from '@/layouts/default.vue';
diff --git a/frontend/src/components/lib/JTransition.vue b/frontend/src/components/lib/JTransition.vue
index 6ebb6eae2d7..4a85f8a8a43 100644
--- a/frontend/src/components/lib/JTransition.vue
+++ b/frontend/src/components/lib/JTransition.vue
@@ -2,8 +2,8 @@
   <component
     :is="props.group ? TransitionGroup : Transition"
     class="j-transition"
-    v-bind="mergeProps($props, $attrs)"
-    :name="prefersNoMotion || disabled || isSlow ? undefined : `j-transition-${props.name}`">
+    v-bind="mergeProps(props, $attrs)"
+    :name="prefersNoMotion || disabled || isSlow ? undefined : props.name">
     <slot />
   </component>
 </template>
@@ -29,9 +29,7 @@ export interface JTransitionProps extends BetterOmit<TransitionProps, 'name'> {
 const props = withDefaults(defineProps<JTransitionProps>(), { name: 'fade', group: undefined, disabled: undefined });
 </script>
 
-<!-- TODO: Set scoped and remove .j-transition* prefix after: https://github.com/vuejs/core/issues/5148 -->
-
-<style>
+<style scoped>
 .j-transition {
   transition-duration: .3s !important;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
@@ -39,65 +37,65 @@ const props = withDefaults(defineProps<JTransitionProps>(), { name: 'fade', grou
 }
 
 /** fade */
-.j-transition-fade-enter-from,
-.j-transition-fade-leave-to {
+.fade-enter-from,
+.fade-leave-to {
   opacity: 0 !important;
 }
 
-.j-transition-fade-enter-active,
-.j-transition-fade-leave-active {
+.fade-enter-active,
+.fade-leave-active {
   transition-property: opacity !important;
   will-change: opacity !important;
 }
 
 /** rotated-zoom */
-.j-transition-rotated-zoom-enter-from,
-.j-transition-rotated-zoom-leave-to {
+.rotated-zoom-enter-from,
+.rotated-zoom-leave-to {
   transform: scale(0) rotate(-45deg);
 }
 
-.j-transition-rotated-zoom-enter-active,
-.j-transition-rotated-zoom-leave-active {
+.rotated-zoom-enter-active,
+.rotated-zoom-leave-active {
   transition-property: transform !important;
   will-change: transform !important;
 }
 
 /** slide-* common classes */
-.j-transition-slide-x-reverse-enter-active,
-.j-transition-slide-x-reverse-leave-active,
-.j-transition-slide-y-reverse-enter-active,
-.j-transition-slide-y-reverse-leave-active,
-.j-transition-slide-x-enter-active,
-.j-transition-slide-x-leave-active,
-.j-transition-slide-y-enter-from,
-.j-transition-slide-y-leave-to {
+.slide-x-reverse-enter-active,
+.slide-x-reverse-leave-active,
+.slide-y-reverse-enter-active,
+.slide-y-reverse-leave-active,
+.slide-x-enter-active,
+.slide-x-leave-active,
+.slide-y-enter-from,
+.slide-y-leave-to {
   transition-property: transform, opacity !important;
 }
 
 /** slide-y */
-.j-transition-slide-y-enter-from,
-.j-transition-slide-y-leave-to {
+.slide-y-enter-from,
+.slide-y-leave-to {
   opacity: 0;
   transform: translateY(-15px);
 }
 
 /** slide-y-reverse */
-.j-transition-slide-y-reverse-enter-from,
-.j-transition-slide-y-reverse-leave-to {
+.slide-y-reverse-enter-from,
+.slide-y-reverse-leave-to {
   opacity: 0;
   transform: translateY(15px);
 }
 
 /** slide-x-reverse */
-.j-transition-slide-x-reverse-enter-from,
-.j-transition-slide-x-reverse-leave-to {
+.slide-x-reverse-enter-from,
+.slide-x-reverse-leave-to {
   opacity: 0;
   transform: translateX(15px);
 }
 
 /** slide-x */
-.j-transition-slide-x-enter-from,
-.j-transition-slide-x-leave-to {
+.slide-x-enter-from,
+.slide-x-leave-to {
   opacity: 0;
   transform: translateX(-15px);
 }
diff --git a/frontend/src/components/lib/JView.vue b/frontend/src/components/lib/JView.vue
index 23168908994..3cd14b7b678 100644
--- a/frontend/src/components/lib/JView.vue
+++ b/frontend/src/components/lib/JView.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="j-transition uno-h-full">
+    class="uno-h-full">
     <component
       :is="comp">
       <slot />