feat: Add the transitionend event to enhance the interactivity of the component. (#24)

Co-authored-by: Rijk van Zanten <[email protected]>

Author: rookie-orange

docs/content/1.getting-started/2.usage.md

@@ -123,6 +123,13 @@ import { SplitPanel } from '@directus/vue-split-panel';
   ::
 ::
 
+### Emits
+::field-group
+  ::field{name="transitionend" type="() => void"}
+    The event triggered when the transition end.
+  ::
+::
+
 ## Examples
 
 ### % / Pixels

packages/vue-split-panel/src/SplitPanel.vue

@@ -21,6 +21,10 @@ const props = withDefaults(defineProps<SplitPanelProps>(), {
 	snapThreshold: 12,
 });
 
+const emits = defineEmits<{
+	transitionend: [];
+}>();
+
 const panelEl = useTemplateRef('split-panel');
 const dividerEl = useTemplateRef('divider');
 
@@ -96,7 +100,10 @@ const collapsed = defineModel<boolean>('collapsed', { default: false });
 
 const collapseTransitionState = ref<null | 'expanding' | 'collapsing'>(null);
 
-const onTransitionEnd = () => collapseTransitionState.value = null;
+const onTransitionEnd = () => {
+	collapseTransitionState.value = null;
+	emits('transitionend');
+};
 
 watch(collapsed, (newCollapsed) => {
 	if (newCollapsed === true) {