### Vue 3 Example: Dynamic Pane Management

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/SUMMARY.txt

Example of dynamically adding and removing panes.

```html
<template>
  <splitpanes>
    <pane v-for="pane in panes" :key="pane.id">
      <!-- Dynamic content -->
    </pane>
  </splitpanes>
  <button @click="addPane">Add Pane</button>
  <button @click="removePane">Remove Pane</button>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes';

export default {
  components: {
    Splitpanes,
    Pane
  },
  data() {
    return {
      panes: [{ id: 1 }, { id: 2 }]
    };
  },
  methods: {
    addPane() {
      this.panes.push({ id: Date.now() });
    },
    removePane() {
      this.panes.pop();
    }
  }
};
</script>
```

--------------------------------

### Basic Usage Example

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/README.md

A simple example demonstrating how to use the Splitpanes and Pane components to create a basic two-pane layout.

```APIDOC
```vue
<template>
  <Splitpanes>
    <Pane size="30">Left (30%)</Pane>
    <Pane size="70">Right (70%)</Pane>
  </Splitpanes>
</template>

<script setup>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
</script>
```
```

--------------------------------

### Install Splitpanes Package

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/README.md

Install the Splitpanes component library using npm.

```bash
npm install splitpanes
```

--------------------------------

### Vue 3 Example: Three-Pane Editor Layout

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/SUMMARY.txt

An example demonstrating a three-pane editor layout.

```html
<template>
  <splitpanes>
    <pane>
      <!-- Editor pane 1 -->
    </pane>
    <pane>
      <!-- Editor pane 2 -->
    </pane>
    <pane>
      <!-- Editor pane 3 -->
    </pane>
  </splitpanes>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes';

export default {
  components: {
    Splitpanes,
    Pane
  }
};
</script>
```

--------------------------------

### Splitpanes Pane Maximize Event Example

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/types.md

Shows how to handle the @pane-maximize event to get detailed information about the maximized pane, including its full state.

```javascript
<Splitpanes @pane-maximize="onMaximize">
  <Pane size="30"></Pane>
  <Pane size="70"></Pane>
</Splitpanes>

function onMaximize({ pane, index, panes }) {
  console.log(`Pane at index ${index} maximized:`, pane)
  // Output:
  // Pane at index 0 maximized: {
  //   id: 1,
  //   el: HTMLElement,
  //   min: 0,
  //   max: 100,
  //   givenSize: 30,
  //   size: 100,
  //   index: 0
  // }
}
```

--------------------------------

### Install Splitpanes for Vue 2

Source: https://github.com/antoniandre/splitpanes/blob/main/README.md

Use this command to install the legacy version of Splitpanes for Vue 2 projects.

```bash
npm i splitpanes@legacy
```

--------------------------------

### Vue 3 Example: Responsive Layout with Toggle

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/SUMMARY.txt

Demonstrates a responsive layout that can be toggled.

```html
<template>
  <splitpanes :horizontal="isHorizontal">
    <pane>
      <!-- Content -->
    </pane>
    <pane>
      <!-- Content -->
    </pane>
  </splitpanes>
  <button @click="isHorizontal = !isHorizontal">Toggle Orientation</button>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes';

export default {
  components: {
    Splitpanes,
    Pane
  },
  data() {
    return {
      isHorizontal: false
    };
  }
};
</script>
```

--------------------------------

### Vue 3 Example: Live Event Logging

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/SUMMARY.txt

Logs Splitpanes events in real-time.

```html
<template>
  <splitpanes @resize="logEvent" @resized="logEvent" @pane-click="logEvent">
    <pane>
      <!-- Content -->
    </pane>
    <pane>
      <!-- Content -->
    </pane>
  </splitpanes>
  <div>
    <h3>Events:</h3>
    <ul>
      <li v-for="(event, index) in events" :key="index">{{ event }}</li>
    </ul>
  </div>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes';

export default {
  components: {
    Splitpanes,
    Pane
  },
  data() {
    return {
      events: []
    };
  },
  methods: {
    logEvent(payload) {
      this.events.push(payload);
    }
  }
};
</script>
```

--------------------------------

### Vue 3 Example: Two-Pane Layout

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/SUMMARY.txt

A basic two-pane layout example using Splitpanes in Vue 3.

```html
<template>
  <splitpanes>
    <pane>
      <!-- Content for pane 1 -->
    </pane>
    <pane>
      <!-- Content for pane 2 -->
    </pane>
  </splitpanes>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes';

export default {
  components: {
    Splitpanes,
    Pane
  }
};
</script>

<style>
/* Add your styles here */
</style>
```

--------------------------------

### Basic Splitpanes Usage

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/README.md

A basic example demonstrating a two-pane layout with Splitpanes and Pane components. Ensure to import the necessary CSS.

```vue
<template>
  <Splitpanes>
    <Pane size="30">Left (30%)</Pane>
    <Pane size="70">Right (70%)</Pane>
  </Splitpanes>
</template>

<script setup>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
</script>
```

--------------------------------

### Install Splitpanes for Vue 3

Source: https://github.com/antoniandre/splitpanes/blob/main/README.md

Use this command to install the latest version of Splitpanes for Vue 3 projects.

```bash
npm i splitpanes
```

--------------------------------

### Reactive Pane Sizing Example

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/configuration.md

Pane sizes (`size`, `minSize`, `maxSize`) are reactive and recalculate the layout immediately. This example toggles between two size configurations for two panes.

```vue
<template>
  <button @click="togglePaneSizes">Toggle Sizes</button>

  <Splitpanes>
    <Pane :size="expanded ? 80 : 20">Pane A</Pane>
    <Pane :size="expanded ? 20 : 80">Pane B</Pane>
  </Splitpanes>
</template>

<script setup>
import { ref } from 'vue'
import { Splitpanes, Pane } from 'splitpanes'

const expanded = ref(false)

function togglePaneSizes() {
  expanded.value = !expanded.value
}
</script>
```

--------------------------------

### Vue 3 Example: Keyboard Navigation

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/SUMMARY.txt

Enables keyboard navigation for panes.

```html
<template>
  <splitpanes :keyboard-step="10">
    <pane>
      <!-- Content -->
    </pane>
    <pane>
      <!-- Content -->
    </pane>
  </splitpanes>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes';

export default {
  components: {
    Splitpanes,
    Pane
  }
};
</script>
```

--------------------------------

### Vue 3 Example: Layout Persistence with localStorage

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/SUMMARY.txt

Persists pane sizes using localStorage.

```html
<template>
  <splitpanes @resized="saveLayout">
    <pane v-for="pane in panes" :key="pane.id" :size="pane.size">
      <!-- Content -->
    </pane>
  </splitpanes>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes';

export default {
  components: {
    Splitpanes,
    Pane
  },
  data() {
    return {
      panes: JSON.parse(localStorage.getItem('splitpanes-layout') || '[]')
    };
  },
  methods: {
    saveLayout(panes) {
      localStorage.setItem('splitpanes-layout', JSON.stringify(panes));
    }
  }
};
</script>
```

--------------------------------

### Vue 3 Example: Constrained Panes

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/SUMMARY.txt

Sets minimum and maximum sizes for panes.

```html
<template>
  <splitpanes>
    <pane :min-size="20" :max-size="80">
      <!-- Content -->
    </pane>
    <pane>
      <!-- Content -->
    </pane>
  </splitpanes>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes';

export default {
  components: {
    Splitpanes,
    Pane
  }
};
</script>
```

--------------------------------

### Using splitter-click Event

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/event-reference.md

This Vue example demonstrates how to listen for and handle the splitter-click event. It logs the index of the clicked splitter and the sizes of the adjacent panes.

```vue
<Splitpanes @splitter-click="onSplitterClick">
  <Pane>Left</Pane>
  <Pane>Right</Pane>
</Splitpanes>

<script setup>
function onSplitterClick({ index, prevPane, nextPane }) {
  console.log(`Splitter ${index} clicked (no drag)`)
  console.log(`Between panes: ${prevPane.size}% and ${nextPane.size}%`)
}
</script>
```

--------------------------------

### Pane Constraint Precedence Example

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/configuration.md

Demonstrates constraint precedence where `minSize` overrides `size` if they conflict. The pane will adhere to the `minSize` value.

```vue
<Pane size="50" minSize="80" maxSize="90"></Pane>
```

--------------------------------

### Managing Reactive Layout State

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/event-reference.md

Example of using Vue's `ref` to manage reactive layout state, including pane sizes, orientation, and readiness for interaction.

```vue
<script setup>
import { ref } from 'vue'

const layoutState = ref({
  sizes: [50, 50],
  horizontal: false,
  readyForInteraction: false
})

function onReady({ panes }) {
  layoutState.value.readyForInteraction = true
}

function onResized({ panes }) {
  layoutState.value.sizes = panes.map(p => p.size)
}
</script>
```

--------------------------------

### Example Usage of Resized Event

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/types.md

Demonstrates how to use the 'resized' event to differentiate between drag-based resizing and pane add/remove operations, and to access final pane sizes.

```javascript
<Splitpanes @resized="onResized">
  <Pane v-for="p in items" :key="p.id"></Pane>
</Splitpanes>

function onResized(payload) {
  if (payload.event) {
    console.log('Drag ended or keyboard navigation completed')
  } else {
    console.log('Panes were added or removed')
  }
  console.log('Final pane sizes:', payload.panes)
}
```

--------------------------------

### Handling Splitter Double Click in Vue

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/event-reference.md

Example of how to use the `splitter-dblclick` event to implement custom maximize or collapse logic.

```vue
<Splitpanes
  :maximizePanes="false"
  @splitter-dblclick="onSplitterDblClick"
>
  <Pane>Left</Pane>
  <Pane>Right</Pane>
</Splitpanes>

<script setup>
function onSplitterDblClick({ index, prevPane }) {
  // Custom maximize logic instead of default
  console.log(`Splitter ${index} double-clicked`)
  console.log(`Manually maximizing pane ${index}...`)
  
  // Could collapse the other pane instead of maximizing
  // Or apply custom animation/transition
}
</script>
```

--------------------------------

### Splitpanes Ready Event Example

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/types.md

Demonstrates how to use the @ready event to access pane size data upon initial layout. The `panes` array in the payload contains PaneData objects.

```javascript
<Splitpanes @ready="onReady">
  <Pane minSize="10" maxSize="80"></Pane>
  <Pane minSize="20" maxSize="90"></Pane>
</Splitpanes>

function onReady({ panes }) {
  console.log(panes)
  // Output:
  // [
  //   { min: 10, max: 80, size: 45 },
  //   { min: 20, max: 90, size: 55 }
  // ]
}
```

--------------------------------

### Basic Resize Event Handling

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/event-reference.md

Example of how to handle the 'resize' event in a Vue component to log information about the splitter and pane sizes during a drag operation.

```vue
<Splitpanes @resize="onResize">
  <Pane></Pane>
  <Pane></Pane>
</Splitpanes>

<script setup>
function onResize({ event, index, prevPane, nextPane, panes }) {
  console.log(`Splitter ${index} dragging`)
  console.log(`Left pane: ${prevPane?.size}%, Right pane: ${nextPane?.size}%`)
}
</script>
```

--------------------------------

### Persisting Layout State with Session Storage

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/event-reference.md

Example of persisting pane sizes to `sessionStorage` when the layout is resized and restoring it on component mount.

```vue
<script setup>
const STORAGE_KEY = 'app-layout-state'

function onResized({ panes }) {
  const sizes = panes.map(p => p.size)
  sessionStorage.setItem(STORAGE_KEY, JSON.stringify(sizes))
}

function restoreLayout() {
  const saved = sessionStorage.getItem(STORAGE_KEY)
  if (saved) {
    const sizes = JSON.parse(saved)
    // Apply to Pane components via v-bind
  }
}

onMounted(restoreLayout)
</script>
```

--------------------------------

### Pane Size Prop Example

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/api-reference-splitpanes.md

Control the initial size of a Pane using the 'size' prop, specified as a percentage. This prop can be a number or a string and is clamped between minSize and maxSize.

```vue
<Pane size="30"></Pane>  <!-- 30% -->
<Pane :size="30"></Pane> <!-- 30% -->
```

--------------------------------

### Ready Event Usage

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/event-reference.md

Fires once after the Splitpanes component mounts and the initial layout is complete. Use this to initialize external state or start animations based on pane sizes.

```vue
<Splitpanes @ready="onReady">
  <Pane size="30"></Pane>
  <Pane size="70"></Pane>
</Splitpanes>

<script setup>
function onReady({ panes }) {
  console.log('Layout ready. Pane sizes:', panes.map(p => p.size))
}
</script>
```

--------------------------------

### Using pane-maximize Event

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/event-reference.md

Example of how to use the pane-maximize event in a Vue component. This snippet demonstrates listening for the event and logging information about the maximized pane.

```vue
<Splitpanes :maximizePanes="true" @pane-maximize="onMaximize">
  <Pane minSize="10" maxSize="90">Left</Pane>
  <Pane minSize="10" maxSize="90">Right</Pane>
</Splitpanes>

<script setup>
function onMaximize({ index, pane, panes }) {
  console.log(`Pane ${index} maximized to ${pane.size}%`)
  console.log('All panes:', panes.map(p => p.size))
}
</script>
```

--------------------------------

### Splitpanes Resize Event Example

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/types.md

Illustrates how to use the @resize event to track splitter dragging in real-time. The payload provides access to the event, splitter index, adjacent panes, and current pane sizes.

```javascript
<Splitpanes @resize="onResize">
  <Pane></Pane>
  <Pane></Pane>
</Splitpanes>

function onResize({ event, index, prevPane, nextPane, panes }) {
  console.log(`Splitter ${index} being dragged`)
  if (prevPane) console.log(`Previous pane size: ${prevPane.size}%`)
  if (nextPane) console.log(`Next pane size: ${nextPane.size}%`)
}
```

--------------------------------

### Three-Pane Editor Layout

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/usage-examples.md

Creates an IDE-like interface with a sidebar, code editor, and output panel. This example uses nested Splitpanes and includes basic styling for panels and content.

```vue
<template>
  <Splitpanes class="default-theme" horizontal>
    <!-- Top: Editor -->
    <Pane size="70">
      <Splitpanes>
        <!-- Left: File Explorer -->
        <Pane size="20" minSize="15">
          <div class="panel">
            <h3>Files</h3>
            <div class="file-list">
              <div class="file" v-for="file in files" :key="file">
                {{ file }}
              </div>
            </div>
          </div>
        </Pane>
        
        <!-- Right: Code Editor -->
        <Pane size="80" minSize="30">
          <div class="panel">
            <h3>Editor</h3>
            <textarea placeholder="Your code here..."></textarea>
          </div>
        </Pane>
      </Splitpanes>
    </Pane>
    
    <!-- Bottom: Output -->
    <Pane size="30" minSize="20">
      <div class="panel">
        <h3>Output</h3>
        <pre>{{ output }}</pre>
      </div>
    </Pane>
  </Splitpanes>
</template>

<script setup>
import { ref } from 'vue'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'

const files = ['main.js', 'styles.css', 'index.html']
const output = ref('> Ready...')
</script>

<style scoped>
.panel {
  height: 100%;
  padding: 15px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.panel h3 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #666;
}

.file-list {
  flex: 1;
}

.file {
  padding: 5px;
  cursor: pointer;
  border-radius: 3px;
}

.file:hover {
  background: #e8e8e8;
}

textarea {
  flex: 1;
  font-family: monospace;
  font-size: 13px;
  border: 1px solid #ddd;
  padding: 10px;
  resize: none;
}

pre {
  margin: 0;
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 10px;
  border-radius: 3px;
  font-size: 12px;
  overflow: auto;
}
</style>
```

--------------------------------

### Using pane-add and pane-remove Events

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/event-reference.md

This Vue component example demonstrates how to add and remove panes dynamically and handle the corresponding pane-add and pane-remove events. It logs the number of panes after each operation.

```vue
<template>
  <button @click="addPane">Add Pane</button>
  
  <Splitpanes @pane-add="onPaneAdd" @pane-remove="onPaneRemove">
    <Pane v-for="pane in panes" :key="pane.id" :size="pane.size">
      {{ pane.label }}
    </Pane>
  </Splitpanes>
</template>

<script setup>
import { ref } from 'vue'
import { Splitpanes, Pane } from 'splitpanes'

const panes = ref([
  { id: 1, label: 'Pane 1', size: 50 },
  { id: 2, label: 'Pane 2', size: 50 }
])

function addPane() {
  panes.value.push({
    id: Math.max(...panes.value.map(p => p.id)) + 1,
    label: `Pane ${panes.value.length + 1}`,
    size: undefined // Auto-sized
  })
}

function onPaneAdd({ pane, panes }) {
  console.log(`Pane added. Total panes: ${panes.length}`)
}

function onPaneRemove({ panes }) {
  console.log(`Pane removed. Remaining: ${panes.length}`)
}
</script>
```

--------------------------------

### Pane Min/Max Size Props Example

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/api-reference-splitpanes.md

Set constraints for pane resizing using the 'minSize' and 'maxSize' props. These props, specified as percentages, prevent panes from shrinking or growing beyond defined limits during resize operations.

```vue
<Pane minSize="10" maxSize="80"></Pane>
```

--------------------------------

### Splitter Double Click Event Example

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/api-reference-splitpanes.md

Use the 'splitter-dblclick' event to respond to double-clicks or double-taps on a splitter. Similar to 'splitter-click', it provides event details and pane context.

```javascript
<Splitpanes @splitter-dblclick="onSplitterDblClick">
  <Pane></Pane>
  <Pane></Pane>
</Splitpanes>

function onSplitterDblClick(payload) {
  console.log(`Splitter ${payload.index} double-clicked`)
}
```

--------------------------------

### Custom Splitter Handle with CSS

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/styling-css.md

Create a custom visual handle for the splitter using pseudo-elements and absolute positioning. This example styles both vertical and horizontal splitters.

```vue
<template>
  <Splitpanes class="custom-splitter">
    <Pane>Panel 1</Pane>
    <Pane>Panel 2</Pane>
  </Splitpanes>
</template>

<style scoped>
.custom-splitter :deep(.splitpanes__splitter) {
  width: 2px;
  background: transparent;
  position: relative;

  /* Create a custom handle */
  &:before {
    content: '⋮';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #9ca3af;
    font-size: 10px;
    letter-spacing: 2px;
    background: #f3f4f6;
    padding: 2px 4px;
    border-radius: 2px;
  }

  &:hover:before {
    color: #3b82f6;
    background: #eff6ff;
  }
}

.custom-splitter :deep(.splitpanes--vertical > .splitpanes__splitter) {
  width: 10px;
  border-left: 1px solid #e5e7eb;
  margin-left: -5px;
}

.custom-splitter :deep(.splitpanes--horizontal > .splitpanes__splitter) {
  height: 10px;
  border-top: 1px solid #e5e7eb;
  margin-top: -5px;
}
</style>
```

--------------------------------

### Custom Transition Duration for Splitpanes

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/styling-css.md

Override the default transition duration and easing for pane resizing. This example sets a longer duration and a custom cubic-bezier timing function.

```vue
<template>
  <Splitpanes class="custom-transitions">
    <Pane>Pane 1</Pane>
    <Pane>Pane 2</Pane>
  </Splitpanes>
</template>

<style scoped>
.custom-transitions :deep(.splitpanes--ready .splitpanes__pane) {
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
</style>
```

--------------------------------

### Responsive Splitter Styling

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/styling-css.md

Adapt splitter appearance based on screen size for better mobile usability. This example increases splitter width on smaller screens for easier touch interaction.

```vue
<template>
  <Splitpanes class="responsive-splitter">
    <Pane>Panel 1</Pane>
    <Pane>Panel 2</Pane>
  </Splitpanes>
</template>

<style scoped>
/* Desktop: normal splitter */
.responsive-splitter :deep(.splitpanes__splitter) {
  width: 2px;
}

/* Mobile: larger splitter for touch */
@media (max-width: 768px) {
  .responsive-splitter :deep(.splitpanes__splitter) {
    width: 12px;
  }

  .responsive-splitter :deep(.splitpanes__pane) {
    min-width: 0; /* Allow panes to shrink below content width */
  }
}
</style>
```

--------------------------------

### Splitpanes Pane Add Event Example

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/api-reference-splitpanes.md

Handle the 'pane-add' event to be notified when a new Pane component is mounted within Splitpanes. This is useful for tracking the total number of panes.

```javascript
<Splitpanes @pane-add="onPaneAdded">
  <Pane v-for="pane in items" :key="pane.id"></Pane>
</Splitpanes>

function onPaneAdded(payload) {
  console.log('Pane added, total panes:', payload.panes.length)
}
```

--------------------------------

### Debug Mode Styles for Splitpanes

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/styling-css.md

Apply visual debugging styles to panes and splitters. This example uses dashed borders and semi-transparent backgrounds to highlight the components during development.

```vue
<template>
  <Splitpanes class="debug">
    <Pane>Panel 1</Pane>
    <Pane>Panel 2</Pane>
  </Splitpanes>
</template>

<style scoped>
.debug :deep(.splitpanes__pane) {
  border: 2px dashed red;
  background: rgba(255, 0, 0, 0.05);
}

.debug :deep(.splitpanes__splitter) {
  background: rgba(0, 0, 255, 0.3);
  border: 2px dashed blue;
}
</style>
```

--------------------------------

### Splitpanes Pane Click Event Example

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/api-reference-splitpanes.md

Respond to 'pane-click' events to detect when a user directly clicks on a pane. The event provides details about the clicked pane and its index.

```javascript
<Splitpanes @pane-click="onPaneClick">
  <Pane></Pane>
  <Pane></Pane>
</Splitpanes>

function onPaneClick(payload) {
  console.log(`Pane ${payload.index} clicked`)
}
```

--------------------------------

### Theming Splitpanes with CSS Variables

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/styling-css.md

Define custom themes for Splitpanes using CSS variables. This example demonstrates light and dark themes by overriding default variables like background and border colors.

```vue
<template>
  <div class="theme-light">
    <Splitpanes class="themed">
      <Pane>Panel 1</Pane>
      <Pane>Panel 2</Pane>
    </Splitpanes>
  </div>
</template>

<style scoped>
.theme-light {
  --sp-bg-pane: #f9fafb;
  --sp-bg-splitter: #e5e7eb;
  --sp-border-color: #d1d5db;
  --sp-text-color: #1f2937;
  --sp-focus-color: #3b82f6;
}

.theme-light.theme-dark {
  --sp-bg-pane: #1f2937;
  --sp-bg-splitter: #111827;
  --sp-border-color: #374151;
  --sp-text-color: #f3f4f6;
  --sp-focus-color: #60a5fa;
}

.themed :deep(.splitpanes__pane) {
  background: var(--sp-bg-pane);
  color: var(--sp-text-color);
  border: 1px solid var(--sp-border-color);
}

.themed :deep(.splitpanes__splitter) {
  background: var(--sp-bg-splitter);
}

.themed :deep(.splitpanes__splitter:focus-visible) {
  outline-color: var(--sp-focus-color);
}
</style>
```

--------------------------------

### High Contrast Mode Styling for Splitter

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/styling-css.md

Adjust splitter styling for high contrast mode using a media query. This example adds a thicker black border and outline.

```vue
<style scoped>
@media (prefers-contrast: more) {
  .my-splitpanes :deep(.splitpanes__splitter) {
    border-left: 2px solid #000;
  }

  .my-splitpanes :deep(.splitpanes__splitter:focus-visible) {
    outline: 3px solid #000;
  }
}
</style>
```

--------------------------------

### Resized Event Handling for Persistence

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/event-reference.md

Example of handling the 'resized' event to save pane sizes to localStorage. It checks for the presence of 'event' to distinguish between drag completion and pane add/remove operations.

```vue
<Splitpanes @resized="onResized">
  <Pane v-for="p in items" :key="p.id"></Pane>
</Splitpanes>

<script setup>
function onResized(payload) {
  if (payload.event) {
    console.log(`Drag completed. Splitter ${payload.index} is now at rest.`) 
  } else {
    console.log('Panes were added or removed.')
  }
  
  // Save sizes to localStorage
  const sizes = payload.panes.map(p => p.size)
  localStorage.setItem('splitpanes-sizes', JSON.stringify(sizes))
}
</script>
```

--------------------------------

### Splitpanes Initialization Data Flow

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/implementation-guide.md

Outlines the steps involved when the Splitpanes component is first mounted and ready for interaction.

```text
1. Splitpanes mounts
2. DOM tree is validated (non-Pane/non-Splitter nodes removed)
3. Splitters are injected between panes
4. Initial pane sizes are calculated
5. `ready` flag is set, transitions enabled
6. `ready` event emitted
```

--------------------------------

### Splitpanes Resize Algorithm Steps

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/implementation-guide.md

Summarizes the core logic for calculating pane sizes during drag operations, including constraint handling.

```text
1. **Clamp drag percentage** to valid range [minDrag, maxDrag]
2. **Identify panes to resize** (usually splitter index and index+1)
3. **Check for max size violations** on immediate neighbors
   - If violated, clamp and return early
4. **Push other panes if enabled** (cascade resizing):
   - If dragging beyond first pane's min, find previous expanded pane to resize
   - If dragging beyond last pane's min, find next expanded pane to resize
   - Update panes in between to their minimum size
5. **Calculate final sizes** for the two panes being resized:
   - Clamped to their respective min/max constraints
6. **Update DOM** via style binding (width: X% or height: X%)
```

--------------------------------

### Handling Direction Change in Vue

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/event-reference.md

Example of listening to the `direction-changed` event to react to layout orientation changes, such as updating UI elements or persisting state.

```vue
<template>
  <button @click="toggleLayout">
    Switch to {{ isHorizontal ? 'Vertical' : 'Horizontal' }}
  </button>
  
  <Splitpanes :horizontal="isHorizontal" @direction-changed="onDirectionChange">
    <Pane size="50">Pane A</Pane>
    <Pane size="50">Pane B</Pane>
  </Splitpanes>
</template>

<script setup>
import { ref } from 'vue'

const isHorizontal = ref(false)

function toggleLayout() {
  isHorizontal.value = !isHorizontal.value
}

function onDirectionChange({ horizontal, panes }) {
  console.log(`Layout changed to: ${horizontal ? 'horizontal' : 'vertical'}`)
  console.log('Panes:', panes)
}
</script>
```

--------------------------------

### Direction Changed Event Example

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/api-reference-splitpanes.md

Listen for the 'direction-changed' event, which fires when the layout orientation changes between horizontal and vertical. The payload indicates the new orientation.

```typescript
interface SplitpanesDirectionChangedPayload {
  horizontal: boolean
  panes: PaneData[]
}
```

```javascript
<Splitpanes :horizontal="isHorizontal" @direction-changed="onDirectionChange">
  <Pane></Pane>
  <Pane></Pane>
</Splitpanes>

function onDirectionChange(payload) {
  console.log(`Layout is now ${payload.horizontal ? 'horizontal' : 'vertical'}`)
}
```

--------------------------------

### ready

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/event-reference.md

Fired once after the Splitpanes component mounts and the initial layout is complete. It signifies that the panes have been sized and the component is ready for interaction. The payload includes an array of PaneData objects summarizing the size state.

```APIDOC
## ready

### Description
Fired once, after component mounts and initial layout is complete. This is the first event emitted after Splitpanes mounts, indicating that all panes have been sized and the container is ready for user interaction.

### Payload
```typescript
{
  panes: PaneData[];
}
```

### Usage
```vue
<Splitpanes @ready="onReady">
  <Pane size="30"></Pane>
  <Pane size="70"></Pane>
</Splitpanes>

<script setup>
function onReady({ panes }) {
  console.log('Layout ready. Pane sizes:', panes.map(p => p.size))
}
</script>
```

### Common Use Cases
- Initialize external state based on pane sizes
- Start animations or load content into panes
- Set up resize observers or state management
- Trigger analytics event
```

--------------------------------

### Pane Remove Event Example

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/api-reference-splitpanes.md

Listen for the 'pane-remove' event to be notified when a Pane component is unmounted. The payload includes the removed pane and the remaining panes.

```typescript
interface SplitpanesPaneRemovePayload {
  pane: Pane
  panes: PaneData[]
}
```

```javascript
<Splitpanes @pane-remove="onPaneRemoved">
  <Pane v-for="pane in items" :key="pane.id"></Pane>
</Splitpanes>

function onPaneRemoved(payload) {
  console.log('Pane removed, remaining panes:', payload.panes.length)
}
```

--------------------------------

### Fade-in Animation for Panes

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/styling-css.md

Apply a fade-in animation to panes as they appear. This example uses CSS keyframes and `animation-delay` to stagger the fade-in effect for each pane.

```vue
<template>
  <Splitpanes class="fade-in">
    <Pane>Panel 1</Pane>
    <Pane>Panel 2</Pane>
  </Splitpanes>
</template>

<style scoped>
.fade-in :deep(.splitpanes__pane) {
  opacity: 0;
  animation: fadeIn 0.5s ease-out forwards;
}

.fade-in :deep(.splitpanes__pane:nth-child(1)) {
  animation-delay: 0.1s;
}

.fade-in :deep(.splitpanes__pane:nth-child(3)) {
  animation-delay: 0.2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>
```

--------------------------------

### Basic Two-Pane Layout

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/configuration.md

Sets up a simple two-pane layout with predefined sizes. The first pane is not resizable by default.

```vue
<template>
  <Splitpanes>
    <Pane size="30">Left (30%)</Pane>
    <Pane size="70">Right (70%)</Pane>
  </Splitpanes>
</template>

<script setup>
import { Splitpanes, Pane } from 'splitpanes'
</script>
```

--------------------------------

### Custom Keyboard Focus Indicator for Splitter

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/styling-css.md

Customize the keyboard focus indicator for the splitter. This example uses a dashed outline with a different color and offset.

```vue
<style scoped>
.my-splitpanes :deep(.splitpanes__splitter:focus-visible) {
  outline: 3px dashed #10b981;
  outline-offset: -3px;
  border-radius: 2px;
}
</style>
```

--------------------------------

### Importing Components

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/README.md

How to import the Splitpanes and Pane components into your Vue 3 project.

```APIDOC
```javascript
import { Splitpanes, Pane } from 'splitpanes'
```
```

--------------------------------

### Splitpanes Resized Event Example

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/api-reference-splitpanes.md

Handle the 'resized' event, which fires once after a resize operation (drag completion or pane add/remove). It provides the final pane configuration.

```javascript
<Splitpanes @resized="onResized">
  <Pane></Pane>
  <Pane></Pane>
</Splitpanes>

function onResized(payload) {
  if (payload.event) {
    console.log('Drag completed')
  } else {
    console.log('Panes added or removed')
  }
  console.log('Final sizes:', payload.panes)
}
```

--------------------------------

### Reactive Pane Sizing

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/api-reference-splitpanes.md

Demonstrates how to make pane sizes reactive using Vue's ref. Changing the values in `paneSizes` or `constraints` will automatically update the pane dimensions.

```vue
<Splitpanes>
  <Pane :size="paneSizes[0]" :minSize="constraints[0].min"></Pane>
  <Pane :size="paneSizes[1]" :minSize="constraints[1].min"></Pane>
</Splitpanes>

<script setup>
const paneSizes = ref([30, 70])
const constraints = ref([
  { min: 10, max: 80 },
  { min: 20, max: 90 }
])
</script>
```

--------------------------------

### Live Preview with Resize Event

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/event-reference.md

A Vue component demonstrating a live preview of pane sizes updated by the 'resize' event. It shows how to bind pane sizes to refs and update them in real-time.

```vue
<template>
  <div>
    <div>Left: {{ leftSize }}% | Right: {{ rightSize }}%</div>
    <Splitpanes @resize="onResize">
      <Pane size="50"></Pane>
      <Pane size="50"></Pane>
    </Splitpanes>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Splitpanes, Pane } from 'splitpanes'

const leftSize = ref(50)
const rightSize = ref(50)

function onResize({ panes }) {
  leftSize.value = Math.round(panes[0].size)
  rightSize.value = Math.round(panes[1].size)
}
</script>
```

--------------------------------

### Basic Splitpanes Styling

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/styling-css.md

Customize the root container, panes, and splitter appearance. Ensure 'splitpanes' and 'Pane' components are imported and 'splitpanes.css' is included.

```vue
<template>
  <Splitpanes class="my-splitpanes">
    <Pane>Left</Pane>
    <Pane>Right</Pane>
  </Splitpanes>
</template>

<script setup>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
</script>

<style scoped>
.my-splitpanes {
  /* Customize root container */
  background: linear-gradient(to right, #f0f0f0, #ffffff);
}

.my-splitpanes :deep(.splitpanes__pane) {
  /* Customize panes */
  background: white;
  border: 1px solid #e5e7eb;
}

.my-splitpanes :deep(.splitpanes__splitter) {
  /* Customize splitter */
  background: #e5e7eb;
  width: 4px;
}

.my-splitpanes :deep(.splitpanes__splitter:hover) {
  background: #d1d5db;
}
</style>
```

--------------------------------

### Style Nested Splitpanes

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/styling-css.md

Style nested splitpanes to ensure they fill their parent container and differentiate splitter colors. This example shows styling for both outer and inner splitpanes.

```vue
<template>
  <Splitpanes class="outer">
    <Pane size="30">Left</Pane>
    <Pane size="70">
      <Splitpanes class="inner" horizontal>
        <Pane>Top</Pane>
        <Pane>Bottom</Pane>
      </Splitpanes>
    </Pane>
  </Splitpanes>
</template>

<style scoped>
.inner {
  /* Nested splitpanes should fill parent */
  width: 100%;
  height: 100%;
}

.outer :deep(.splitpanes__pane) {
  padding: 0; /* Remove padding for nested splitter */
}

.outer :deep(.splitpanes__splitter) {
  background: #e5e7eb;
}

.inner :deep(.splitpanes__splitter) {
  background: #d1d5db; /* Darker for visual distinction */
}
</style>
```

--------------------------------

### Applying the Default Theme in Vue

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/styling-css.md

Demonstrates how to apply the optional `.default-theme` class to Splitpanes or a parent element for professional styling.

```vue
<template>
  <!-- Apply to parent -->
  <div class="default-theme">
    <Splitpanes>
      <Pane>Left</Pane>
      <Pane>Right</Pane>
    </Splitpanes>
  </div>

  <!-- Or apply to Splitpanes itself -->
  <Splitpanes class="default-theme">
    <Pane>Left</Pane>
    <Pane>Right</Pane>
  </Splitpanes>
</template>
```

--------------------------------

### Import Splitpanes Component

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/api-reference-splitpanes.md

Import the main Splitpanes component from the library. This is the first step to using the component in your application.

```javascript
import { Splitpanes } from 'splitpanes'
```

--------------------------------

### Attribute Fallthrough Example

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/api-reference-splitpanes.md

Standard HTML attributes can be passed to the root element of Splitpanes via fallthrough. Ensure 'inheritAttrs: false' is set on the component to manage attribute binding.

```vue
<Splitpanes class="my-container" id="app-splitter" data-testid="splitter">
  <Pane>Pane 1</Pane>
  <Pane>Pane 2</Pane>
</Splitpanes>
```

--------------------------------

### Splitter Click Event Example

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/api-reference-splitpanes.md

Handle the 'splitter-click' event to detect when a user clicks on a splitter without dragging. The payload provides information about the clicked splitter and adjacent panes.

```typescript
interface SplitpanesSplitterClickPayload {
  event: MouseEvent | TouchEvent
  index: number
  prevPane: Pane | undefined
  nextPane: Pane | undefined
  panes: PaneData[]
}
```

```javascript
<Splitpanes @splitter-click="onSplitterClick">
  <Pane></Pane>
  <Pane></Pane>
</Splitpanes>

function onSplitterClick(payload) {
  console.log(`Splitter ${payload.index} between panes clicked`)
}
```

--------------------------------

### Enable Keyboard Navigation with Step

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/README.md

Configure keyboard navigation for Splitpanes, allowing users to resize panes using arrow keys. The `keyboardStep` prop defines the increment/decrement value.

```vue
<Splitpanes :keyboardStep="5">

```

--------------------------------

### Splitpanes Touch Event Handling

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/implementation-guide.md

Explains the handling of touch events for splitter dragging and double-tap detection.

```text
**Touch:**
- `touchstart` on splitter → bind events, detect if double-tap (for splitter double-click)
- `touchmove` on document → calculate drag, emit `resize`
- `touchend` on document → emit `resized`, unbind events

**Double-Click Detection:**
- Mouse: native `dblclick` event
- Touch: manual detection via two taps within 500ms on same splitter index
```

--------------------------------

### Pane Click Event Handling

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/event-reference.md

Example of handling the 'pane-click' event in a Vue component to log information about the clicked pane and its size. It demonstrates accessing the event target and pane data.

```vue
<Splitpanes @pane-click="onPaneClick">
  <Pane>
    <button>Click me</button>
    <input type="text">
  </Pane>
  <Pane>Another pane</Pane>
</Splitpanes>

<script setup>
function onPaneClick({ event, index, pane }) {
  console.log(`Pane ${index} was clicked`)
  console.log(`Clicked element:`, event.target.tagName)
  console.log(`Pane size: ${pane.size}%`)
}
</script>
```

--------------------------------

### Global Default Configuration with Wrapper Component

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/configuration.md

Applies global default props (e.g., `pushOtherPanes`, `maximizePanes`, `keyboardStep`) to all Splitpanes instances by using a wrapper component. This avoids repetitive prop definitions.

```vue
<!-- AppSplitpanes.vue -->
<template>
  <Splitpanes v-bind="{ pushOtherPanes: true, maximizePanes: true, keyboardStep: 5, ...props }">
    <slot></slot>
  </Splitpanes>
</template>

<script setup>
import { Splitpanes } from 'splitpanes'
const props = defineProps({
  horizontal: Boolean,
  pushOtherPanes: { type: Boolean, default: true },
  maximizePanes: { type: Boolean, default: true },
  keyboardStep: { type: Number, default: 5 }
})
```

--------------------------------

### Splitpanes Pane Addition Data Flow

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/implementation-guide.md

Explains the process when a new Pane component is added dynamically, such as via v-for.

```text
1. Pane component mounts
2. Calls `onPaneAdd` injected function
3. Pane is inserted into array at correct DOM position
4. Splitter structure is rebuilt
5. Sizes are recalculated to fit new pane
6. `pane-add` event emitted
7. `resized` event emitted
```

--------------------------------

### Splitpanes Component Hierarchy

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/implementation-guide.md

Illustrates the nested structure of Splitpanes, showing the container, panes, and auto-injected splitters.

```text
Splitpanes (container)
├── Pane (content slot)
├── Splitter (auto-injected DOM)
├── Pane (content slot)
├── Splitter (auto-injected DOM)
└── Pane (content slot)
```

--------------------------------

### Dark Mode Theme for Splitpanes

Source: https://github.com/antoniandre/splitpanes/blob/main/_autodocs/styling-css.md

Apply a dark theme to Splitpanes by conditionally applying CSS classes. This example uses Vue's ref for managing the dark mode state.

```vue
<template>
  <div :class="{ 'dark-mode': isDarkMode }">
    <Splitpanes class="splitpanes-dark">
      <Pane>Dark Panel 1</Pane>
      <Pane>Dark Panel 2</Pane>
    </Splitpanes>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'

const isDarkMode = ref(true)
</script>

<style scoped>
.dark-mode .splitpanes-dark {
  background: #1f2937;
}

.dark-mode .splitpanes-dark :deep(.splitpanes__pane) {
  background: #111827;
  border: 1px solid #374151;
  color: #f3f4f6;
}

.dark-mode .splitpanes-dark :deep(.splitpanes__splitter) {
  background: #1f2937;
  border-left-color: #374151;
}

.dark-mode .splitpanes-dark :deep(.splitpanes__splitter:hover) {
  background: #374151;
}

.dark-mode .splitpanes-dark :deep(.splitpanes__splitter:focus-visible) {
  outline-color: #60a5fa;
}
</style>
```