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

@@ -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';

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,75 +29,73 @@ 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;
   transform-origin: center !important;
 }
 
 /** 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);
 }

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 />