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);