From 6061acb56b99ceb20019717536a947425b6910ac Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Tue, 26 Aug 2025 17:25:43 -0400
Subject: [PATCH] Refactor logic into composables

---
 packages/vue-split-panel/src/SplitPanel.vue   | 280 +++++-------------
 .../src/composables/use-grid-template.ts      |  51 ++++
 .../src/composables/use-keyboard.ts           |  55 ++++
 .../src/composables/use-pointer.ts            |  81 +++++
 .../src/composables/use-resize.ts             |  35 +++
 .../src/composables/use-sizes.ts              |  95 ++++++
 packages/vue-split-panel/src/types.ts         |  13 +-
 7 files changed, 392 insertions(+), 218 deletions(-)
 create mode 100644 packages/vue-split-panel/src/composables/use-grid-template.ts
 create mode 100644 packages/vue-split-panel/src/composables/use-keyboard.ts
 create mode 100644 packages/vue-split-panel/src/composables/use-pointer.ts
 create mode 100644 packages/vue-split-panel/src/composables/use-resize.ts
 create mode 100644 packages/vue-split-panel/src/composables/use-sizes.ts

diff --git a/packages/vue-split-panel/src/SplitPanel.vue b/packages/vue-split-panel/src/SplitPanel.vue
index 835a811..d4d305e 100644
--- a/packages/vue-split-panel/src/SplitPanel.vue
+++ b/packages/vue-split-panel/src/SplitPanel.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import type { SplitPanelProps } from './types';
-import { clamp, useDraggable, useElementSize, useResizeObserver } from '@vueuse/core';
-import { computed, onMounted, ref, useTemplateRef, watch } from 'vue';
-import { closestNumber } from './utils/closest-number';
-import { percentageToPixels } from './utils/percentage-to-pixels';
-import { pixelsToPercentage } from './utils/pixels-to-percentage';
+import { ref, useTemplateRef, watch } from 'vue';
+import { useGridTemplate } from './composables/use-grid-template';
+import { useKeyboard } from './composables/use-keyboard';
+import { usePointer } from './composables/use-pointer';
+import { useResize } from './composables/use-resize';
+import { useSizes } from './composables/use-sizes';
 
 const props = withDefaults(defineProps<SplitPanelProps>(), {
 	orientation: 'horizontal',
@@ -25,80 +26,80 @@ const emits = defineEmits<{
 	transitionend: [event: TransitionEvent];
 }>();
 
-const panelEl = useTemplateRef('split-panel');
-const dividerEl = useTemplateRef('divider');
-
-const { width: componentWidth, height: componentHeight } = useElementSize(panelEl);
-const componentSize = computed(() => props.orientation === 'horizontal' ? componentWidth.value : componentHeight.value);
-
-const { width: dividerWidth, height: dividerHeight } = useElementSize(dividerEl);
-const dividerSize = computed(() => props.orientation === 'horizontal' ? dividerWidth.value : dividerHeight.value);
-
 /** Size of the primary panel in either percentages or pixels as defined by the sizeUnit property */
 const size = defineModel<number>('size', { default: 50 });
 
-const sizePercentage = computed({
-	get() {
-		if (props.sizeUnit === '%') return size.value;
-		return pixelsToPercentage(componentSize.value, size.value);
-	},
-	set(newValue: number) {
-		if (props.sizeUnit === '%') {
-			size.value = newValue;
-		}
-		else {
-			size.value = percentageToPixels(componentSize.value, newValue);
-		}
-	},
-});
-
-const sizePixels = computed({
-	get() {
-		if (props.sizeUnit === 'px') return size.value;
-		return percentageToPixels(componentSize.value, size.value);
-	},
-	set(newValue: number) {
-		if (props.sizeUnit === 'px') {
-			size.value = newValue;
-		}
-		else {
-			size.value = pixelsToPercentage(componentSize.value, newValue);
-		}
-	},
-});
+/** Whether the primary column is collapsed or not */
+const collapsed = defineModel<boolean>('collapsed', { default: false });
 
-const minSizePercentage = computed(() => {
-	if (props.minSize === undefined) return;
+const panelEl = useTemplateRef('split-panel');
+const dividerEl = useTemplateRef('divider');
 
-	if (props.sizeUnit === '%') return props.minSize;
-	return pixelsToPercentage(componentSize.value, props.minSize);
-});
+let expandedSizePercentage = 0;
 
-const minSizePixels = computed(() => {
-	if (props.minSize === undefined) return;
+const collapseTransitionState = ref<null | 'expanding' | 'collapsing'>(null);
 
-	if (props.sizeUnit === 'px') return props.minSize;
-	return percentageToPixels(componentSize.value, props.minSize);
+const {
+	sizePercentage,
+	sizePixels,
+	maxSizePercentage,
+	minSizePercentage,
+	minSizePixels,
+	componentSize,
+	dividerSize,
+	snapPixels,
+} = useSizes(size, {
+	disabled: () => props.disabled,
+	collapsible: () => props.collapsible,
+	primary: () => props.primary,
+	orientation: () => props.orientation,
+	sizeUnit: () => props.sizeUnit,
+	minSize: () => props.minSize,
+	maxSize: () => props.maxSize,
+	snapPoints: () => props.snapPoints,
+	panelEl,
+	dividerEl,
 });
 
-const maxSizePercentage = computed(() => {
-	if (props.maxSize === undefined) return;
-
-	if (props.sizeUnit === '%') return props.maxSize;
-	return pixelsToPercentage(componentSize.value, props.maxSize);
+const { handleKeydown } = useKeyboard(sizePercentage, collapsed, {
+	disabled: () => props.disabled,
+	collapsible: () => props.collapsible,
+	primary: () => props.primary,
+	orientation: () => props.orientation,
 });
 
-const snapPixels = computed(() => {
-	if (props.sizeUnit === 'px') return props.snapPoints;
-	return props.snapPoints.map((snapPercentage) => percentageToPixels(componentSize.value, snapPercentage));
+const { isDragging, handleDblClick } = usePointer(collapsed, sizePercentage, sizePixels, {
+	collapseThreshold: () => props.collapseThreshold,
+	collapsible: () => props.collapsible,
+	direction: () => props.direction,
+	disabled: () => props.disabled,
+	orientation: () => props.orientation,
+	primary: () => props.primary,
+	snapThreshold: () => props.snapThreshold,
+	panelEl,
+	dividerEl,
+	minSizePixels,
+	componentSize,
+	snapPixels,
 });
 
-let expandedSizePercentage = 0;
-
-/** Whether the primary column is collapsed or not */
-const collapsed = defineModel<boolean>('collapsed', { default: false });
+const { gridTemplate } = useGridTemplate({
+	collapsed,
+	direction: () => props.direction,
+	dividerSize,
+	maxSizePercentage,
+	minSizePercentage,
+	orientation: () => props.orientation,
+	primary: () => props.primary,
+	sizePercentage,
+});
 
-const collapseTransitionState = ref<null | 'expanding' | 'collapsing'>(null);
+useResize(sizePercentage, {
+	sizePixels,
+	panelEl,
+	orientation: () => props.orientation,
+	primary: () => props.primary,
+});
 
 const onTransitionEnd = (event: TransitionEvent) => {
 	collapseTransitionState.value = null;
@@ -117,155 +118,6 @@ watch(collapsed, (newCollapsed) => {
 	}
 });
 
-let cachedSizePixels = 0;
-
-onMounted(() => {
-	cachedSizePixels = sizePixels.value;
-});
-
-const { x: dividerX, y: dividerY, isDragging } = useDraggable(dividerEl, { containerElement: panelEl });
-
-let hasToggledDuringCurrentDrag = false;
-
-watch([dividerX, dividerY], ([newX, newY]) => {
-	if (props.disabled) return;
-
-	let newPositionInPixels = props.orientation === 'horizontal' ? newX : newY;
-
-	if (props.primary === 'end') {
-		newPositionInPixels = componentSize.value - newPositionInPixels;
-	}
-
-	if (props.collapsible && minSizePixels.value !== undefined && props.collapseThreshold !== undefined && hasToggledDuringCurrentDrag === false) {
-		const collapseThreshold = minSizePixels.value - (props.collapseThreshold ?? 0);
-		const expandThreshold = (props.collapseThreshold ?? 0);
-
-		if (newPositionInPixels < collapseThreshold && collapsed.value === false) {
-			collapsed.value = true;
-			hasToggledDuringCurrentDrag = true;
-		}
-		else if (newPositionInPixels > expandThreshold && collapsed.value === true) {
-			collapsed.value = false;
-			hasToggledDuringCurrentDrag = true;
-		}
-	}
-
-	for (let snapPoint of snapPixels.value) {
-		if (props.direction === 'rtl' && props.orientation === 'horizontal') {
-			snapPoint = componentSize.value - snapPoint;
-		}
-
-		if (
-			newPositionInPixels >= snapPoint - props.snapThreshold
-			&& newPositionInPixels <= snapPoint + props.snapThreshold
-		) {
-			newPositionInPixels = snapPoint;
-		}
-	}
-
-	sizePercentage.value = clamp(pixelsToPercentage(componentSize.value, newPositionInPixels), 0, 100);
-});
-
-watch(isDragging, (newDragging) => {
-	if (newDragging === false) hasToggledDuringCurrentDrag = false;
-});
-
-watch(sizePixels, (newPixels, oldPixels) => {
-	if (newPixels === oldPixels) return;
-	cachedSizePixels = newPixels;
-});
-
-useResizeObserver(panelEl, (entries) => {
-	const entry = entries[0];
-	const { width, height } = entry.contentRect;
-	const size = props.orientation === 'horizontal' ? width : height;
-
-	if (props.primary) {
-		sizePercentage.value = pixelsToPercentage(size, cachedSizePixels);
-	}
-});
-
-const handleKeydown = (event: KeyboardEvent) => {
-	if (props.disabled) return;
-
-	if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter'].includes(event.key)) {
-		event.preventDefault();
-
-		let newPosition = sizePercentage.value;
-
-		const increment = (event.shiftKey ? 10 : 1) * (props.primary === 'end' ? -1 : 1);
-
-		if (
-			(event.key === 'ArrowLeft' && props.orientation === 'horizontal')
-			|| (event.key === 'ArrowUp' && props.orientation === 'vertical')
-		) {
-			newPosition -= increment;
-		}
-
-		if (
-			(event.key === 'ArrowRight' && props.orientation === 'horizontal')
-			|| (event.key === 'ArrowDown' && props.orientation === 'vertical')
-		) {
-			newPosition += increment;
-		}
-
-		if (event.key === 'Home') {
-			newPosition = props.primary === 'end' ? 100 : 0;
-		}
-
-		if (event.key === 'End') {
-			newPosition = props.primary === 'end' ? 0 : 100;
-		}
-
-		if (event.key === 'Enter' && props.collapsible) {
-			collapsed.value = !collapsed.value;
-		}
-
-		sizePercentage.value = clamp(newPosition, 0, 100);
-	}
-};
-
-const handleDblClick = () => {
-	const closest = closestNumber(snapPixels.value, sizePixels.value);
-
-	if (closest !== undefined) {
-		sizePixels.value = closest;
-	}
-};
-
-const gridTemplate = computed(() => {
-	let primary: string;
-
-	if (collapsed.value) {
-		primary = '0';
-	}
-	else if (minSizePercentage.value !== undefined && maxSizePercentage.value !== undefined) {
-		primary = `clamp(0%, clamp(${minSizePercentage.value}%, ${sizePercentage.value}%, ${maxSizePercentage.value}%), calc(100% - ${dividerSize.value}px))`;
-	}
-	else {
-		primary = `clamp(0%, ${sizePercentage.value}%, calc(100% - ${dividerSize.value}px))`;
-	}
-
-	const secondary = 'auto';
-
-	if (!props.primary || props.primary === 'start') {
-		if (props.direction === 'ltr' || props.orientation === 'vertical') {
-			return `${primary} ${dividerSize.value}px ${secondary}`;
-		}
-		else {
-			return `${secondary} ${dividerSize.value}px ${primary}`;
-		}
-	}
-	else {
-		if (props.direction === 'ltr' || props.orientation === 'vertical') {
-			return `${secondary} ${dividerSize.value}px ${primary}`;
-		}
-		else {
-			return `${primary} ${dividerSize.value}px ${secondary}`;
-		}
-	}
-});
-
 const collapse = () => collapsed.value = true;
 const expand = () => collapsed.value = false;
 const toggle = (val: boolean) => collapsed.value = val;
diff --git a/packages/vue-split-panel/src/composables/use-grid-template.ts b/packages/vue-split-panel/src/composables/use-grid-template.ts
new file mode 100644
index 0000000..dd93297
--- /dev/null
+++ b/packages/vue-split-panel/src/composables/use-grid-template.ts
@@ -0,0 +1,51 @@
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
+import type { Direction, Orientation, Primary } from '../types';
+import { computed, toValue } from 'vue';
+
+export interface UseGridTemplateOptions {
+	collapsed: Ref<boolean>;
+	minSizePercentage: ComputedRef<number | undefined>;
+	maxSizePercentage: ComputedRef<number | undefined>;
+	sizePercentage: ComputedRef<number>;
+	dividerSize: ComputedRef<number>;
+	primary: MaybeRefOrGetter<Primary | undefined>;
+	direction: MaybeRefOrGetter<Direction>;
+	orientation: MaybeRefOrGetter<Orientation>;
+}
+
+export const useGridTemplate = (options: UseGridTemplateOptions) => {
+	const gridTemplate = computed(() => {
+		let primary: string;
+
+		if (options.collapsed.value) {
+			primary = '0';
+		}
+		else if (options.minSizePercentage.value !== undefined && options.maxSizePercentage.value !== undefined) {
+			primary = `clamp(0%, clamp(${options.minSizePercentage.value}%, ${options.sizePercentage.value}%, ${options.maxSizePercentage.value}%), calc(100% - ${options.dividerSize.value}px))`;
+		}
+		else {
+			primary = `clamp(0%, ${options.sizePercentage.value}%, calc(100% - ${options.dividerSize.value}px))`;
+		}
+
+		const secondary = 'auto';
+
+		if (!toValue(options.primary) || toValue(options.primary) === 'start') {
+			if (toValue(options.direction) === 'ltr' || toValue(options.orientation) === 'vertical') {
+				return `${primary} ${options.dividerSize.value}px ${secondary}`;
+			}
+			else {
+				return `${secondary} ${options.dividerSize.value}px ${primary}`;
+			}
+		}
+		else {
+			if (toValue(options.direction) === 'ltr' || toValue(options.orientation) === 'vertical') {
+				return `${secondary} ${options.dividerSize.value}px ${primary}`;
+			}
+			else {
+				return `${primary} ${options.dividerSize.value}px ${secondary}`;
+			}
+		}
+	});
+
+	return { gridTemplate };
+};
diff --git a/packages/vue-split-panel/src/composables/use-keyboard.ts b/packages/vue-split-panel/src/composables/use-keyboard.ts
new file mode 100644
index 0000000..632cdaf
--- /dev/null
+++ b/packages/vue-split-panel/src/composables/use-keyboard.ts
@@ -0,0 +1,55 @@
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import type { Orientation, Primary } from '../types';
+import { clamp } from '@vueuse/core';
+import { toValue } from 'vue';
+
+export interface UseKeyboardOptions {
+	disabled: MaybeRefOrGetter<boolean>;
+	collapsible: MaybeRefOrGetter<boolean>;
+	primary: MaybeRefOrGetter<Primary | undefined>;
+	orientation: MaybeRefOrGetter<Orientation>;
+}
+
+export const useKeyboard = (sizePercentage: Ref<number>, collapsed: Ref<boolean>, options: UseKeyboardOptions) => {
+	const handleKeydown = (event: KeyboardEvent) => {
+		if (toValue(options.disabled)) return;
+
+		if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter'].includes(event.key)) {
+			event.preventDefault();
+
+			let newPosition = sizePercentage.value;
+
+			const increment = (event.shiftKey ? 10 : 1) * (toValue(options.primary) === 'end' ? -1 : 1);
+
+			if (
+				(event.key === 'ArrowLeft' && toValue(options.orientation) === 'horizontal')
+				|| (event.key === 'ArrowUp' && toValue(options.orientation) === 'vertical')
+			) {
+				newPosition -= increment;
+			}
+
+			if (
+				(event.key === 'ArrowRight' && toValue(options.orientation) === 'horizontal')
+				|| (event.key === 'ArrowDown' && toValue(options.orientation) === 'vertical')
+			) {
+				newPosition += increment;
+			}
+
+			if (event.key === 'Home') {
+				newPosition = toValue(options.primary) === 'end' ? 100 : 0;
+			}
+
+			if (event.key === 'End') {
+				newPosition = toValue(options.primary) === 'end' ? 0 : 100;
+			}
+
+			if (event.key === 'Enter' && toValue(options.collapsible)) {
+				collapsed.value = !collapsed.value;
+			}
+
+			sizePercentage.value = clamp(newPosition, 0, 100);
+		}
+	};
+
+	return { handleKeydown };
+};
diff --git a/packages/vue-split-panel/src/composables/use-pointer.ts b/packages/vue-split-panel/src/composables/use-pointer.ts
new file mode 100644
index 0000000..2552781
--- /dev/null
+++ b/packages/vue-split-panel/src/composables/use-pointer.ts
@@ -0,0 +1,81 @@
+import type { MaybeRefOrGetter } from '@vueuse/core';
+import type { ComputedRef, Ref } from 'vue';
+import type { Direction, Orientation, Primary } from '../types';
+import { clamp, useDraggable } from '@vueuse/core';
+import { toValue, watch } from 'vue';
+import { closestNumber } from '../utils/closest-number';
+import { pixelsToPercentage } from '../utils/pixels-to-percentage';
+
+export interface UsePointerOptions {
+	disabled: MaybeRefOrGetter<boolean>;
+	collapsible: MaybeRefOrGetter<boolean>;
+	primary: MaybeRefOrGetter<Primary | undefined>;
+	orientation: MaybeRefOrGetter<Orientation>;
+	direction: MaybeRefOrGetter<Direction>;
+	collapseThreshold: MaybeRefOrGetter<number | undefined>;
+	snapThreshold: MaybeRefOrGetter<number>;
+	dividerEl: MaybeRefOrGetter<HTMLElement | null>;
+	panelEl: MaybeRefOrGetter<HTMLElement | null>;
+	componentSize: ComputedRef<number>;
+	minSizePixels: ComputedRef<number | undefined>;
+	snapPixels: ComputedRef<number[]>;
+}
+
+export const usePointer = (collapsed: Ref<boolean>, sizePercentage: Ref<number>, sizePixels: Ref<number>, options: UsePointerOptions) => {
+	const { x: dividerX, y: dividerY, isDragging } = useDraggable(options.dividerEl, { containerElement: options.panelEl });
+
+	let hasToggledDuringCurrentDrag = false;
+
+	watch([dividerX, dividerY], ([newX, newY]) => {
+		if (toValue(options.disabled)) return;
+
+		let newPositionInPixels = toValue(options.orientation) === 'horizontal' ? newX : newY;
+
+		if (toValue(options.primary) === 'end') {
+			newPositionInPixels = options.componentSize.value - newPositionInPixels;
+		}
+
+		if (toValue(options.collapsible) && options.minSizePixels.value !== undefined && toValue(options.collapseThreshold) !== undefined && hasToggledDuringCurrentDrag === false) {
+			const collapseThreshold = options.minSizePixels.value - (toValue(options.collapseThreshold) ?? 0);
+			const expandThreshold = (toValue(options.collapseThreshold) ?? 0);
+
+			if (newPositionInPixels < collapseThreshold && collapsed.value === false) {
+				collapsed.value = true;
+				hasToggledDuringCurrentDrag = true;
+			}
+			else if (newPositionInPixels > expandThreshold && collapsed.value === true) {
+				collapsed.value = false;
+				hasToggledDuringCurrentDrag = true;
+			}
+		}
+
+		for (let snapPoint of options.snapPixels.value) {
+			if (toValue(options.direction) === 'rtl' && toValue(options.orientation) === 'horizontal') {
+				snapPoint = options.componentSize.value - snapPoint;
+			}
+
+			if (
+				newPositionInPixels >= snapPoint - toValue(options.snapThreshold)
+				&& newPositionInPixels <= snapPoint + toValue(options.snapThreshold)
+			) {
+				newPositionInPixels = snapPoint;
+			}
+		}
+
+		sizePercentage.value = clamp(pixelsToPercentage(options.componentSize.value, newPositionInPixels), 0, 100);
+	});
+
+	watch(isDragging, (newDragging) => {
+		if (newDragging === false) hasToggledDuringCurrentDrag = false;
+	});
+
+	const handleDblClick = () => {
+		const closest = closestNumber(options.snapPixels.value, sizePixels.value);
+
+		if (closest !== undefined) {
+			sizePixels.value = closest;
+		}
+	};
+
+	return { handleDblClick, isDragging };
+};
diff --git a/packages/vue-split-panel/src/composables/use-resize.ts b/packages/vue-split-panel/src/composables/use-resize.ts
new file mode 100644
index 0000000..922848f
--- /dev/null
+++ b/packages/vue-split-panel/src/composables/use-resize.ts
@@ -0,0 +1,35 @@
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
+import type { Orientation, Primary } from '../types';
+import { useResizeObserver } from '@vueuse/core';
+import { onMounted, toValue, watch } from 'vue';
+import { pixelsToPercentage } from '../utils/pixels-to-percentage';
+
+export interface UseResizeOptions {
+	sizePixels: ComputedRef<number>;
+	panelEl: MaybeRefOrGetter<HTMLElement | null>;
+	orientation: MaybeRefOrGetter<Orientation>;
+	primary: MaybeRefOrGetter<Primary | undefined>;
+}
+
+export const useResize = (sizePercentage: Ref<number>, options: UseResizeOptions) => {
+	let cachedSizePixels = 0;
+
+	onMounted(() => {
+		cachedSizePixels = options.sizePixels.value;
+	});
+
+	watch(options.sizePixels, (newPixels, oldPixels) => {
+		if (newPixels === oldPixels) return;
+		cachedSizePixels = newPixels;
+	});
+
+	useResizeObserver(options.panelEl, (entries) => {
+		const entry = entries[0];
+		const { width, height } = entry.contentRect;
+		const size = toValue(options.orientation) === 'horizontal' ? width : height;
+
+		if (toValue(options.primary)) {
+			sizePercentage.value = pixelsToPercentage(size, cachedSizePixels);
+		}
+	});
+};
diff --git a/packages/vue-split-panel/src/composables/use-sizes.ts b/packages/vue-split-panel/src/composables/use-sizes.ts
new file mode 100644
index 0000000..cba55a4
--- /dev/null
+++ b/packages/vue-split-panel/src/composables/use-sizes.ts
@@ -0,0 +1,95 @@
+import type { MaybeComputedElementRef } from '@vueuse/core';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import type { Orientation, Primary, SizeUnit } from '../types';
+import { useElementSize } from '@vueuse/core';
+import { computed, toValue } from 'vue';
+import { percentageToPixels } from '../utils/percentage-to-pixels';
+import { pixelsToPercentage } from '../utils/pixels-to-percentage';
+
+export interface UseSizesOptions {
+	disabled: MaybeRefOrGetter<boolean>;
+	collapsible: MaybeRefOrGetter<boolean>;
+	primary: MaybeRefOrGetter<Primary | undefined>;
+	orientation: MaybeRefOrGetter<Orientation>;
+	sizeUnit: MaybeRefOrGetter<SizeUnit>;
+	minSize: MaybeRefOrGetter<number>;
+	maxSize: MaybeRefOrGetter<number | undefined>;
+	snapPoints: MaybeRefOrGetter<number[]>;
+	panelEl: MaybeComputedElementRef;
+	dividerEl: MaybeComputedElementRef;
+}
+
+export const useSizes = (size: Ref<number>, options: UseSizesOptions) => {
+	const { width: componentWidth, height: componentHeight } = useElementSize(options.panelEl);
+	const componentSize = computed(() => toValue(options.orientation) === 'horizontal' ? componentWidth.value : componentHeight.value);
+
+	const { width: dividerWidth, height: dividerHeight } = useElementSize(options.dividerEl);
+	const dividerSize = computed(() => toValue(options.orientation) === 'horizontal' ? dividerWidth.value : dividerHeight.value);
+
+	const sizePercentage = computed({
+		get() {
+			if (toValue(options.sizeUnit) === '%') return size.value;
+			return pixelsToPercentage(componentSize.value, size.value);
+		},
+		set(newValue: number) {
+			if (toValue(options.sizeUnit) === '%') {
+				size.value = newValue;
+			}
+			else {
+				size.value = percentageToPixels(componentSize.value, newValue);
+			}
+		},
+	});
+
+	const sizePixels = computed({
+		get() {
+			if (toValue(options.sizeUnit) === 'px') return size.value;
+			return percentageToPixels(componentSize.value, size.value);
+		},
+		set(newValue: number) {
+			if (toValue(options.sizeUnit) === 'px') {
+				size.value = newValue;
+			}
+			else {
+				size.value = pixelsToPercentage(componentSize.value, newValue);
+			}
+		},
+	});
+
+	const minSizePercentage = computed(() => {
+		if (toValue(options.minSize) === undefined) return;
+
+		if (toValue(options.sizeUnit) === '%') return toValue(options.minSize);
+		return pixelsToPercentage(componentSize.value, toValue(options.minSize));
+	});
+
+	const minSizePixels = computed(() => {
+		if (toValue(options.minSize) === undefined) return;
+
+		if (toValue(options.sizeUnit) === 'px') return toValue(options.minSize);
+		return percentageToPixels(componentSize.value, toValue(options.minSize));
+	});
+
+	const maxSizePercentage = computed(() => {
+		if (toValue(options.maxSize) === undefined) return;
+
+		if (toValue(options.sizeUnit) === '%') return toValue(options.maxSize);
+		return pixelsToPercentage(componentSize.value, toValue(options.maxSize)!);
+	});
+
+	const snapPixels = computed(() => {
+		if (toValue(options.sizeUnit) === 'px') return toValue(options.snapPoints);
+		return toValue(options.snapPoints).map((snapPercentage) => percentageToPixels(componentSize.value, snapPercentage));
+	});
+
+	return {
+		componentSize,
+		dividerSize,
+		sizePercentage,
+		sizePixels,
+		minSizePercentage,
+		minSizePixels,
+		maxSizePercentage,
+		snapPixels,
+	};
+};
diff --git a/packages/vue-split-panel/src/types.ts b/packages/vue-split-panel/src/types.ts
index b9388bf..3d405b4 100644
--- a/packages/vue-split-panel/src/types.ts
+++ b/packages/vue-split-panel/src/types.ts
@@ -1,18 +1,23 @@
+export type Orientation = 'horizontal' | 'vertical';
+export type Direction = 'ltr' | 'rtl';
+export type Primary = 'start' | 'end';
+export type SizeUnit = '%' | 'px';
+
 export interface SplitPanelProps {
 	/**
 	 * Sets the split panel's orientation
 	 * @default 'horizontal'
 	 */
-	orientation?: 'horizontal' | 'vertical';
+	orientation?: Orientation;
 
 	/**
 	 * Sets the split panel's text direction
 	 * @default 'ltr'
 	 */
-	direction?: 'ltr' | 'rtl';
+	direction?: Direction;
 
 	/** If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the panels component is resized */
-	primary?: 'start' | 'end';
+	primary?: Primary | undefined;
 
 	/**
 	 * The invisible region around the divider where dragging can occur. This is usually wider than the divider to facilitate easier dragging. CSS value
@@ -24,7 +29,7 @@ export interface SplitPanelProps {
 	 * Whether the size v-model should be in relative percentages or absolute pixels
 	 * @default '%'
 	 */
-	sizeUnit?: '%' | 'px';
+	sizeUnit?: SizeUnit;
 
 	/**
 	 * Disable the manual resizing of the panels