fix: Make RTL work in dir="rtl" html

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

@@ -30,7 +30,7 @@
 /** Whether the primary column is collapsed or not */
 const collapsed = defineModel<boolean>('collapsed', { default: false });
 
 const panelEl = useTemplateRef('split-panel');
 const dividerEl = useTemplateRef('divider');
 
 const {
@@ -83,7 +83,6 @@
 
 const { gridTemplate } = useGridTemplate({
 	collapsed,
-	direction: () => props.direction,
 	dividerSize,
 	maxSizePercentage,
 	minSizePercentage,

packages/vue-split-panel/src/composables/use-grid-template.test.ts

@@ -13,7 +13,6 @@ describe('useGridTemplate', () => {
 		dividerSize: computed(() => 4),
 		collapsedSizePercentage: computed(() => 0),
 		primary: 'start',
-		direction: 'ltr',
 		orientation: 'horizontal',
 		...overrides,
 	});
@@ -82,13 +81,6 @@ describe('useGridTemplate', () => {
 		expect(gridTemplate.value).toBe('auto 4px clamp(0%, 50%, calc(100% - 4px))');
 	});
 
-	it('reverses order when direction is rtl and primary is start', () => {
-		const options = createOptions({ direction: 'rtl' });
-		const { gridTemplate } = useGridTemplate(options);
-
-		expect(gridTemplate.value).toBe('auto 4px clamp(0%, 50%, calc(100% - 4px))');
-	});
-
 	it('handles vertical orientation correctly', () => {
 		const options = createOptions({ orientation: 'vertical' });
 		const { gridTemplate } = useGridTemplate(options);

packages/vue-split-panel/src/composables/use-grid-template.ts

@@ -1,5 +1,5 @@
 import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
-import type { Direction, Orientation, Primary } from '../types';
+import type { Orientation, Primary } from '../types';
 import { computed, toValue } from 'vue';
 
 export interface UseGridTemplateOptions {
@@ -9,7 +9,6 @@ export interface UseGridTemplateOptions {
 	sizePercentage: ComputedRef<number>;
 	dividerSize: ComputedRef<number>;
 	primary: MaybeRefOrGetter<Primary | undefined>;
-	direction: MaybeRefOrGetter<Direction>;
 	orientation: MaybeRefOrGetter<Orientation>;
 	collapsedSizePercentage: ComputedRef<number>;
 }
@@ -34,20 +33,10 @@ export const useGridTemplate = (options: UseGridTemplateOptions) => {
 		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}`;
-			}
+			return `${primary} ${options.dividerSize.value}px ${secondary}`;
 		}
 		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 `${secondary} ${options.dividerSize.value}px ${primary}`;
 		}
 	});
 

packages/vue-split-panel/src/composables/use-pointer.test.ts

@@ -218,10 +218,11 @@ describe('usePointer', () => {
 			options.snapThreshold = ref(5);
 			usePointer(collapsed, sizePercentage, sizePixels, options);
 
-			// With RTL, snap point 100 becomes 400 - 100 = 300
-			mockDragX.value = 298; // Within threshold of transformed snap point
+			// With RTL, drag position is mirrored: newPositionInPixels = 400 - mockDragX
+			// mockDragX = 298 transforms to 102, which is within threshold of snap point 100
+			mockDragX.value = 298;
 			await nextTick();
-			expect(sizePercentage.value).toBe(75); // 300/400 * 100 = 75%
+			expect(sizePercentage.value).toBe(25); // 100/400 * 100 = 25%
 		});
 
 		it('should clamp sizePercentage between 0 and 100', async () => {

packages/vue-split-panel/src/composables/use-pointer.ts

@@ -31,6 +31,10 @@ export const usePointer = (collapsed: Ref<boolean>, sizePercentage: Ref<number>,
 
 		let newPositionInPixels = toValue(options.orientation) === 'horizontal' ? newX : newY;
 
+		if (toValue(options.orientation) === 'horizontal' && toValue(options.direction) === 'rtl') {
+			newPositionInPixels = options.componentSize.value - newPositionInPixels;
+		}
+
 		if (toValue(options.primary) === 'end') {
 			newPositionInPixels = options.componentSize.value - newPositionInPixels;
 		}
@@ -49,11 +53,7 @@ export const usePointer = (collapsed: Ref<boolean>, sizePercentage: Ref<number>,
 			}
 		}
 
-		for (let snapPoint of options.snapPixels.value) {
-			if (toValue(options.direction) === 'rtl' && toValue(options.orientation) === 'horizontal') {
-				snapPoint = options.componentSize.value - snapPoint;
-			}
-
+		for (const snapPoint of options.snapPixels.value) {
 			if (
 				newPositionInPixels >= snapPoint - toValue(options.snapThreshold)
 				&& newPositionInPixels <= snapPoint + toValue(options.snapThreshold)