feat: add support for custom slot container classes (#44)

Author: rijkvanzanten

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

@@ -121,6 +121,10 @@ import { SplitPanel } from '@directus/vue-split-panel';
     How close the divider must be to a snap point for snapping to occur.  
     Defaults to `12`
   ::
+
+  ::field{name="ui" type="{ start?: string, divider?: string, end?: string }"}
+    Inject additional classes in the slot container elements.  
+  ::
 ::
 
 ### Emits

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

@@ -7,7 +7,19 @@ const collapsed = ref(false);
 </script>
 
 <template>
-	<SplitPanel id="panels-root" v-model:size="size" v-model:collapsed="collapsed" collapsible :collapse-threshold="100" :min-size="250" :max-size="400" size-unit="px">
+	<SplitPanel
+		id="panels-root"
+		v-model:size="size"
+		v-model:collapsed="collapsed"
+		collapsible
+		:collapse-threshold="100"
+		:min-size="250"
+		:max-size="400"
+		size-unit="px"
+		:ui="{
+			divider: 'my-custom-class',
+		}"
+	>
 		<template #start>
 			<div id="a" class="panel">
 				Panel A

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

@@ -108,18 +108,22 @@ defineExpose({ collapse, expand, toggle });
 <template>
 	<div
 		ref="split-panel"
-		class="split-panel"
-		:class="[orientation, collapseTransitionState, { collapsed, dragging: isDragging }]"
+		class="sp-root"
+		:class="[
+			`sp-${orientation}`,
+			`sp-${collapseTransitionState}`,
+			{ 'sp-collapsed': collapsed, 'sp-dragging': isDragging },
+		]"
 		data-testid="root"
 		@transitionend="onTransitionEnd"
 	>
-		<div class="start" data-testid="start">
+		<div class="sp-start" :class="ui?.start" data-testid="start">
 			<slot name="start" />
 		</div>
 		<div
 			ref="divider"
-			class="divider"
-			:class="[{ disabled }, orientation]"
+			class="sp-divider"
+			:class="[{ 'sp-disabled': disabled }, `sp-${orientation}`, ui?.divider]"
 			:tabindex="disabled ? undefined : 0"
 			role="separator"
 			:aria-valuenow="sizePercentage"
@@ -134,54 +138,54 @@ defineExpose({ collapse, expand, toggle });
 				<div />
 			</slot>
 		</div>
-		<div class="end" data-testid="end">
+		<div class="sp-end" :class="ui?.end" data-testid="end">
 			<slot name="end" />
 		</div>
 	</div>
 </template>
 
 <style scoped>
-.split-panel {
+.sp-root {
 	display: grid;
 
-	&.horizontal {
+	&.sp-horizontal {
 		transition-property: grid-template-columns;
 		grid-template-columns: v-bind(gridTemplate);
 
-		&.dragging {
+		&.sp-dragging {
 			cursor: ew-resize;
 		}
 	}
 
-	&.vertical {
+	&.sp-vertical {
 		grid-template-rows: v-bind(gridTemplate);
 		transition-property: grid-template-rows;
 
-		&.dragging {
+		&.sp-dragging {
 			cursor: ns-resize;
 		}
 	}
 
-	&.dragging {
+	&.sp-dragging {
 		user-select: none;
 	}
 
-	&.collapsing {
+	&.sp-collapsing {
 		transition-duration: v-bind(transitionDuration);
 		transition-timing-function: v-bind(transitionTimingFunctionCollapse);
 	}
 
-	&.expanding {
+	&.sp-expanding {
 		transition-duration: v-bind(transitionDuration);
 		transition-timing-function: v-bind(transitionTimingFunctionExpand);
 	}
 }
 
-.start, .end {
+.sp-start, .sp-end {
 	overflow: hidden;
 }
 
-.divider {
+.sp-divider {
 	position: relative;
 	z-index: 1;
 
@@ -193,7 +197,7 @@ defineExpose({ collapse, expand, toggle });
 			}
 		}
 
-		&.horizontal {
+		&.sp-horizontal {
 			block-size: 100%;
 			inline-size: max-content;
 
@@ -206,7 +210,7 @@ defineExpose({ collapse, expand, toggle });
 			}
 		}
 
-		&.vertical {
+		&.sp-vertical {
 			inline-size: 100%;
 			block-size: max-content;
 

packages/vue-split-panel/src/types.ts

@@ -3,6 +3,12 @@ export type Direction = 'ltr' | 'rtl';
 export type Primary = 'start' | 'end';
 export type SizeUnit = '%' | 'px';
 
+export interface UiClasses {
+	start?: string;
+	divider?: string;
+	end?: string;
+}
+
 export interface SplitPanelProps {
 	/**
 	 * Sets the split panel's orientation
@@ -84,4 +90,9 @@ export interface SplitPanelProps {
 	 * @default 12
 	 */
 	snapThreshold?: number;
+
+	/**
+	 * Inject additional classes into the elements that split-panel renders
+	 */
+	ui?: UiClasses;
 }

packages/vue-split-panel/tests/collapse.test.ts

@@ -8,23 +8,23 @@ describe('collapse', () => {
 			props: { collapsed: true },
 		});
 
-		expect(wrapper.find('[data-testid="root"]').classes()).toContain('collapsed');
+		expect(wrapper.find('[data-testid="root"]').classes()).toContain('sp-collapsed');
 	});
 
 	it('is not collapsed when collapsed is set to false', () => {
 		const wrapper = mount(SplitPanel, {
 			props: { collapsed: false },
 		});
 
-		expect(wrapper.find('[data-testid="root"]').classes()).not.toContain('collapsed');
+		expect(wrapper.find('[data-testid="root"]').classes()).not.toContain('sp-collapsed');
 	});
 
 	it('can be collapsed through a prop even when collapsible is false', () => {
 		const wrapper = mount(SplitPanel, {
 			props: { collapsible: false, collapsed: true },
 		});
 
-		expect(wrapper.find('[data-testid="root"]').classes()).toContain('collapsed');
+		expect(wrapper.find('[data-testid="root"]').classes()).toContain('sp-collapsed');
 	});
 
 	it('sets size to 0 when collapsed', async () => {

packages/vue-split-panel/tests/mounting.test.ts

@@ -31,7 +31,7 @@ describe('basic mounting and rendering', () => {
 
 	it('renders default divider div when no divider slot content is given', () => {
 		const wrapper = mount(SplitPanel);
-		const divider = wrapper.find('.divider');
+		const divider = wrapper.find('[data-testid="divider"]');
 
 		expect(divider.exists()).toBe(true);
 		expect(divider.find('div').exists()).toBe(true);