fix!: revise transition to be number in ms (#45)

Co-authored-by: Copilot <[email protected]>

Author: rijkvanzanten

docs/components/example/ExampleTransitions.vue

@@ -11,7 +11,7 @@ import { SplitPanel } from '@directus/vue-split-panel';
 		:size="350"
 		:max-size="500"
 		:collapse-threshold="50"
-		transition-duration="150ms"
+		:transition-duration="150"
 	>
 		<template #start>
 			<div class="h-16 bg-orange-100 dark:bg-orange-900 flex items-center justify-center">Panel A</div>

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

@@ -97,9 +97,9 @@ import { SplitPanel } from '@directus/vue-split-panel';
     How far to drag beyond the minSize to collapse/expand the primary panel.  
   ::
 
-  ::field{name="transitionDuration" type="string"}
-    Duration of the collapse/expand transition. Accepts a CSS duration value.  
-    Defaults to `"0"`
+  ::field{name="transitionDuration" type="number"}
+    Duration of the collapse/expand transition in ms.  
+    Defaults to `0`
   ::
 
   ::field{name="transitionTimingFunctionExpand" type="string"}
@@ -127,13 +127,6 @@ import { SplitPanel } from '@directus/vue-split-panel';
   ::
 ::
 
-### Emits
-::field-group
-  ::field{name="transitionend" type="(event: TransitionEvent) => void"}
-    The event triggered when the transition end.
-  ::
-::
-
 ## Examples
 
 ### % / Pixels
@@ -434,7 +427,7 @@ import { SplitPanel } from '@directus/vue-split-panel';
     :size="350"
     :max-size="500"
     :collapse-threshold="50"
-    transition-duration="150ms"
+    :transition-duration="150"
   >
     <template #start>
       <div class="h-16 bg-orange-100 dark:bg-orange-900 flex items-center justify-center">Panel A</div>

packages/vue-split-panel/playground/src/App.vue

@@ -16,6 +16,7 @@ const collapsed = ref(false);
 		:min-size="250"
 		:max-size="400"
 		size-unit="px"
+		:transition-duration="200"
 		:ui="{
 			divider: 'my-custom-class',
 		}"

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

@@ -16,17 +16,13 @@ const props = withDefaults(defineProps<SplitPanelProps>(), {
 	sizeUnit: '%',
 	direction: 'ltr',
 	collapsible: false,
-	transitionDuration: '0',
+	transitionDuration: 0,
 	transitionTimingFunctionCollapse: 'cubic-bezier(0.4, 0, 0.6, 1)',
 	transitionTimingFunctionExpand: 'cubic-bezier(0, 0, 0.2, 1)',
 	snapPoints: () => [],
 	snapThreshold: 12,
 });
 
-const emits = defineEmits<{
-	transitionend: [event: TransitionEvent];
-}>();
-
 /** Size of the primary panel in either percentages or pixels as defined by the sizeUnit property */
 const size = defineModel<number>('size', { default: 50 });
 
@@ -100,7 +96,17 @@ useResize(sizePercentage, {
 	primary: () => props.primary,
 });
 
-const { onTransitionEnd, collapseTransitionState, toggle, expand, collapse } = useCollapse(collapsed, sizePercentage, emits);
+const {
+	collapseTransitionState,
+	toggle,
+	expand,
+	collapse,
+	transitionDurationCss,
+} = useCollapse(
+	collapsed,
+	sizePercentage,
+	{ transitionDuration: () => props.transitionDuration },
+);
 
 defineExpose({ collapse, expand, toggle });
 </script>
@@ -111,11 +117,9 @@ defineExpose({ collapse, expand, toggle });
 		class="sp-root"
 		:class="[
 			`sp-${orientation}`,
-			`sp-${collapseTransitionState}`,
-			{ 'sp-collapsed': collapsed, 'sp-dragging': isDragging },
+			{ 'sp-collapsed': collapsed, 'sp-dragging': isDragging, [`sp-${collapseTransitionState}`]: collapseTransitionState },
 		]"
 		data-testid="root"
-		@transitionend="onTransitionEnd"
 	>
 		<div class="sp-start" :class="ui?.start" data-testid="start">
 			<slot name="start" />
@@ -148,18 +152,34 @@ defineExpose({ collapse, expand, toggle });
 .sp-root {
 	display: grid;
 
+	&.sp-collapsing {
+		transition-duration: v-bind(transitionDurationCss);
+		transition-timing-function: v-bind(transitionTimingFunctionCollapse);
+	}
+
+	&.sp-expanding {
+		transition-duration: v-bind(transitionDurationCss);
+		transition-timing-function: v-bind(transitionTimingFunctionExpand);
+	}
+
 	&.sp-horizontal {
-		transition-property: grid-template-columns;
 		grid-template-columns: v-bind(gridTemplate);
 
+		&.sp-collapsing, &.sp-expanding {
+			transition-property: grid-template-columns;
+		}
+
 		&.sp-dragging {
 			cursor: ew-resize;
 		}
 	}
 
 	&.sp-vertical {
 		grid-template-rows: v-bind(gridTemplate);
-		transition-property: grid-template-rows;
+
+		&.sp-collapsing, &.sp-expanding {
+			transition-property: grid-template-rows;
+		}
 
 		&.sp-dragging {
 			cursor: ns-resize;
@@ -169,16 +189,6 @@ defineExpose({ collapse, expand, toggle });
 	&.sp-dragging {
 		user-select: none;
 	}
-
-	&.sp-collapsing {
-		transition-duration: v-bind(transitionDuration);
-		transition-timing-function: v-bind(transitionTimingFunctionCollapse);
-	}
-
-	&.sp-expanding {
-		transition-duration: v-bind(transitionDuration);
-		transition-timing-function: v-bind(transitionTimingFunctionExpand);
-	}
 }
 
 .sp-start, .sp-end {