feat: Add support for transitions (#12)

Author: rijkvanzanten

docs/components/example/ExampleTransitions.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { SplitPanel } from '@directus/vue-split-panel';
+</script>
+
+<template>
+<SplitPanel
+class="w-full"
+collapsible
+size-unit="px"
+:min-size="250"
+:size="350"
+:max-size="500"
+:collapse-threshold="50"
+transition-duration="150ms"
+>
+<template #start>
+<div class="h-16 bg-orange-50 flex items-center justify-center">Panel A</div>
+</template>
+
+<template #end>
+<div class="h-16 bg-blue-50 flex items-center justify-center">Panel B</div>
+</template>
+</SplitPanel>
+</template>

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

@@ -96,6 +96,21 @@ import { SplitPanel } from '@directus/vue-split-panel';
  ::field{name="collapseThreshold" type="number"}
  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="transitionTimingFunctionExpand" type="string"}
+ CSS timing function for the expand transition. 
+ Defaults to `"cubic-bezier(0, 0, 0.2, 1)"`
+ ::
+ 
+ ::field{name="transitionTimingFunctionCollapse" type="string"}
+ CSS timing function for the collapse transition. 
+ Defaults to `"cubic-bezier(0.4, 0, 0.6, 1)"`
+ ::
 ::
 
 ## Examples
@@ -376,6 +391,42 @@ import { SplitPanel } from '@directus/vue-split-panel';
 Resize your browser window to see primary in action.
 ::
 
+### Transitions
+
+By setting the `transitionDuration` prop, you can control the duration of the transition. Use the `transitionTimingFunctionExpand` and `transitionTimingFunctionCollapse` properties to fine-tune the timing functions of the expand and collapse transition respectively.
+
+::code-preview
+:example-transitions
+
+#code
+```vue
+<script lang="ts" setup>
+import { SplitPanel } from '@directus/vue-split-panel';
+</script>
+
+<template>
+ <SplitPanel
+ class="w-full"
+ collapsible
+ size-unit="px"
+ :min-size="250"
+ :size="350"
+ :max-size="500"
+ :collapse-threshold="50"
+ transition-duration="150ms"
+ >
+ <template #start>
+ <div class="h-16 bg-orange-50 flex items-center justify-center">Panel A</div>
+ </template>
+
+ <template #end>
+ <div class="h-16 bg-blue-50 flex items-center justify-center">Panel B</div>
+ </template>
+ </SplitPanel>
+</template>
+```
+::
+
 ## Accessibility
 
 Uses the [Window Splitter WAI-ARIA pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter).

docs/content/index.md

@@ -65,5 +65,13 @@ A split panel component based on Reka-UI and Web Awesome Split Panel
   description: Create rich layouts by nesting split panel components
  ---
  ::::
+
+ ::::u-page-feature
+ ---
+  title: Transitions
+  icon: lucide-send-to-back
+  description: Support for transitions when collapsing/expanding the primary panel
+ ---
+ ::::
  :::
 ::

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

@@ -29,12 +29,21 @@ export interface SplitPanelProps {
 
 /** How far to drag beyond the minSize to collapse/expand the primary panel */
 collapseThreshold?: number;
+
+/** How long should the collapse/expand state transition for in CSS value */
+transitionDuration?: string;
+
+/** CSS transition timing function for the expand transition */
+transitionTimingFunctionExpand?: string;
+
+/** CSS transition timing function for the collapse transition */
+transitionTimingFunctionCollapse?: string;
 }
 </script>
 
 <script lang="ts" setup>
 import { clamp, useDraggable, useElementSize, useResizeObserver } from '@vueuse/core';
-import { computed, onMounted, useTemplateRef, watch } from 'vue';
+import { computed, onMounted, ref, useTemplateRef, watch } from 'vue';
 import { percentageToPixels } from './utils/percentage-to-pixels';
 import { pixelsToPercentage } from './utils/pixels-to-percentage';
 
@@ -46,6 +55,9 @@ const props = withDefaults(defineProps<SplitPanelProps>(), {
 sizeUnit: '%',
 direction: 'ltr',
 collapsible: false,
+transitionDuration: '0',
+transitionTimingFunctionCollapse: 'cubic-bezier(0.4, 0, 0.6, 1)',
+transitionTimingFunctionExpand: 'cubic-bezier(0, 0, 0.2, 1)',
 });
 
 const panelEl = useTemplateRef('split-panel');
@@ -116,13 +128,19 @@ let expandedSizePercentage = 0;
 /** Whether the primary column is collapsed or not */
 const collapsed = defineModel<boolean>('collapsed', { default: false });
 
+const collapseTransitionState = ref<null | 'expanding' | 'collapsing'>(null);
+
+const onTransitionEnd = () => collapseTransitionState.value = null;
+
 watch(collapsed, (newCollapsed) => {
 if (newCollapsed === true) {
 expandedSizePercentage = sizePercentage.value;
 sizePercentage.value = 0;
+collapseTransitionState.value = 'collapsing';
 }
 else {
 sizePercentage.value = expandedSizePercentage;
+collapseTransitionState.value = 'expanding';
 }
 });
 
@@ -260,7 +278,7 @@ defineExpose({ collapse, expand, toggle });
 </script>
 
 <template>
-<div ref="split-panel" class="split-panel" :class="[orientation, { collapsed, dragging: isDragging }]">
+<div ref="split-panel" class="split-panel" :class="[orientation, collapseTransitionState, { collapsed, dragging: isDragging }]" @transitionend="onTransitionEnd">
 <div class="start">
 <slot name="start" />
 </div>
@@ -291,16 +309,28 @@ defineExpose({ collapse, expand, toggle });
 display: grid;
 
 &.horizontal {
+transition-property: grid-template-columns;
 grid-template-columns: v-bind(gridTemplate);
 }
 
 &.vertical {
 grid-template-rows: v-bind(gridTemplate);
+transition-property: grid-template-rows;
 }
 
 &.dragging {
 user-select: none;
 }
+
+&.collapsing {
+transition-duration: v-bind(transitionDuration);
+transition-timing-function: v-bind(transitionTimingFunctionCollapse);
+}
+
+&.expanding {
+transition-duration: v-bind(transitionDuration);
+transition-timing-function: v-bind(transitionTimingFunctionExpand);
+}
 }
 
 .start, .end {