feat(FilterInput): use expandable

frontend/src/components/project/partials/FilterInputDocs.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {ref} from 'vue'
 import BaseButton from '@/components/base/BaseButton.vue'
+import Expandable from '@/components/base/Expandable.vue'
 
 const showDocs = ref(false)
 </script>
@@ -13,9 +14,8 @@ const showDocs = ref(false)
 		{{ $t('filters.query.help.link') }}
 	</BaseButton>
 
-	<Transition>
-		<div
-			v-if="showDocs"
+	<Expandable
+		:open="showDocs"
 		class="content"
 	>
 		<p>{{ $t('filters.query.help.intro') }}</p>
@@ -63,18 +63,5 @@ const showDocs = ref(false)
 				{{ $t('filters.query.help.examples.priorityOneOrTwoPastDue') }}
 			</li>
 		</ul>
-		</div>
-	</Transition>
+	</Expandable>
 </template>
-
-<style scoped lang="scss">
-.v-enter-active,
-.v-leave-active {
-	transition: all $transition-duration ease;
-}
-
-.v-enter-from,
-.v-leave-to {
-	transform: scaleY(0);
-}
-</style>