From 197d9db8e6f638247460b8c7a2dadbedafd80f66 Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Thu, 29 May 2025 12:39:37 -0400
Subject: [PATCH] implement SkTransitionGroup to dynamically switch between
 TransitionGroup or a native element based on the user's animation preference

---
 .../src/components/SkTransitionGroup.vue      | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 packages/frontend/src/components/SkTransitionGroup.vue

diff --git a/packages/frontend/src/components/SkTransitionGroup.vue b/packages/frontend/src/components/SkTransitionGroup.vue
new file mode 100644
index 0000000000..1c07186501
--- /dev/null
+++ b/packages/frontend/src/components/SkTransitionGroup.vue
@@ -0,0 +1,43 @@
+<!--
+SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<TransitionGroup v-if="animate ?? prefer.s.animation" v-bind="props" :class="props.class">
+	<slot></slot>
+</TransitionGroup>
+<component :is="tag" v-else :class="props.class">
+	<slot></slot>
+</component>
+</template>
+
+<script setup lang="ts">
+import type { TransitionGroupProps } from 'vue';
+import { prefer } from '@/preferences';
+
+// This is a "best guess" type.
+// If any valid :class binding produces a type error here, then please change this to match.
+type ClassBinding = string | Record<string, boolean | undefined>;
+
+// This can be an inline type, but pulling it out makes TS errors clearer.
+interface SkTransitionGroupProps extends TransitionGroupProps {
+	/**
+	 * Override CSS styles for the TransitionGroup or native element.
+	 */
+	class?: undefined | ClassBinding | ClassBinding[];
+
+	/**
+	 * If true, will render a TransitionGroup.
+	 * If false, will render a native element.
+	 * If null or undefined (default), will respect the value of prefer.s.animation.
+	 */
+	animate?: boolean | undefined | null;
+}
+
+const props = withDefaults(defineProps<SkTransitionGroupProps>(), {
+	tag: 'div',
+	class: undefined,
+	animate: undefined,
+});
+</script>