# Split

A resizable splitter component that allows users to adjust the size of adjacent panels by dragging the divider. Perfect for creating resizable layouts with flexible panel sizing.

## Features

- **Resizable Panels**: Drag to resize adjacent panels
- **Direction Support**: Horizontal and vertical orientations
- **Custom Width**: Set the divider width
- **Reverse Mode**: Optional reverse dragging direction
- **Fixed Mode**: Can be fixed (non-resizable)
- **Visual Feedback**: Cursor changes during drag operation
- **Minimum Size**: Enforces minimum panel size (5px)

## Installation

```bash
npm install @ticatec/uniface-element
```

```typescript
import Split from '@ticatec/uniface-element/Split';
```

## Basic Usage

```svelte
<script>
  import Split from '@ticatec/uniface-element/Split';

  let leftPanel;
  let rightPanel;
</script>

<div style="display: flex; height: 300px;">
  <div bind:this={leftPanel} style="flex: 0 0 200px; background: #f0f0f0;">
    Left Panel
  </div>
  <Split bindingPanel={leftPanel} direction="horizontal" />
  <div bind:this={rightPanel} style="flex: 1; background: #e0e0e0;">
    Right Panel
  </div>
</div>
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `direction` | `'horizontal' \| 'vertical'` | `'vertical'` | Splitter orientation |
| `width` | `number` | `2` | Width/thickness of the divider (px) |
| `bindingPanel` | `HTMLElement \| null` | `null` | Reference to the panel to resize |
| `reverse` | `boolean` | `false` | Reverse the drag direction |

## Examples

### Horizontal Split

```svelte
<script>
  import Split from '@ticatec/uniface-element/Split';

  let panel1;
  let panel2;
</script>

<div style="display: flex; height: 400px;">
  <div bind:this={panel1} style="flex: 0 0 250px; padding: 16px; background: #f5f5f5;">
    <h3>Left Panel</h3>
    <p>Resize me by dragging the divider!</p>
  </div>

  <Split bindingPanel={panel1} direction="horizontal" width="4" />

  <div style="flex: 1; padding: 16px; background: #e8e8e8;">
    <h3>Right Panel</h3>
    <p>This panel fills remaining space</p>
  </div>
</div>
```

### Vertical Split

```svelte
<script>
  import Split from '@ticatec/uniface-element/Split';

  let topPanel;
  let bottomPanel;
</script>

<div style="display: flex; flex-direction: column; height: 400px;">
  <div bind:this={topPanel} style="flex: 0 0 150px; padding: 16px; background: #f5f5f5;">
    <h3>Top Panel</h3>
  </div>

  <Split bindingPanel={topPanel} direction="vertical" width="4" />

  <div style="flex: 1; padding: 16px; background: #e8e8e8;">
    <h3>Bottom Panel</h3>
  </div>
</div>
```

### Custom Width

```svelte
<script>
  import Split from '@ticatec/uniface-element/Split';

  let panel1;
  let panel2;
</script>

<div style="display: flex; height: 300px;">
  <div bind:this={panel1} style="flex: 0 0 200px; background: #f0f0f0;">
    Panel 1
  </div>

  <!-- Thick divider -->
  <Split bindingPanel={panel1} width="8" />

  <div style="flex: 1; background: #e0e0e0;">
    Panel 2
  </div>
</div>
```

### Reverse Direction

```svelte
<script>
  import Split from '@ticatec/uniface-element/Split';

  let panel1;
  let panel2;
</script>

<div style="display: flex; height: 300px;">
  <div style="flex: 1; background: #e0e0e0;">
    Panel 1 (expands when panel 2 shrinks)
  </div>

  <!-- Reverse mode: drags in opposite direction -->
  <Split bindingPanel={panel1} reverse />

  <div bind:this={panel2} style="flex: 0 0 200px; background: #f0f0f0;">
    Panel 2
  </div>
</div>
```

### Fixed Divider

```svelte
<script>
  import Split from '@ticatec/uniface-element/Split';
</script>

<!-- Without bindingPanel, the divider is fixed (non-resizable) -->
<div style="display: flex; height: 300px;">
  <div style="flex: 1; background: #f0f0f0;">
    Panel 1
  </div>

  <Split /> <!-- Fixed divider -->

  <div style="flex: 1; background: #e0e0e0;">
    Panel 2
  </div>
</div>
```

### Complete Resizable Layout

```svelte
<script>
  import Split from '@ticatec/uniface-element/Split';

  let sidebar;
  let mainContent;
  let detailPanel;
</script>

<div style="display: flex; height: 100vh;">
  <!-- Sidebar -->
  <div bind:this={sidebar} style="flex: 0 0 250px; background: #2d3748; color: white; padding: 16px;">
    <h3>Sidebar</h3>
    <ul>
      <li>Menu Item 1</li>
      <li>Menu Item 2</li>
      <li>Menu Item 3</li>
    </ul>
  </div>

  <!-- Vertical split for sidebar -->
  <Split bindingPanel={sidebar} direction="horizontal" width="4" />

  <!-- Main content area with vertical split -->
  <div style="flex: 1; display: flex; flex-direction: column;">
    <!-- Top panel -->
    <div bind:this={mainContent} style="flex: 0 0 60%; background: #f7fafc; padding: 16px;">
      <h2>Main Content</h2>
      <p>This is the main content area. Drag the divider below to resize.</p>
    </div>

    <!-- Horizontal split -->
    <Split bindingPanel={mainContent} direction="vertical" width="4" />

    <!-- Bottom panel -->
    <div style="flex: 1; background: #edf2f7; padding: 16px;">
      <h3>Details Panel</h3>
      <p>Additional details and information</p>
    </div>
  </div>
</div>
```

## Best Practices

1. **Panel References**: Always bind the panel you want to resize using `bindingPanel`
2. **Flex Layout**: Use flexbox for predictable resizing behavior
3. **Initial Sizes**: Set reasonable initial sizes for resizable panels
4. **Minimum Size**: The component enforces a 5px minimum panel size
5. **User Feedback**: Cursor changes provide visual feedback during dragging
6. **Fixed Dividers**: Don't provide `bindingPanel` for non-resizable dividers

## Browser Support

- Modern browsers with full flexbox support
- Mouse events for drag functionality
- Touch devices (with touch event handling)

## Notes

- The `bindingPanel` must be a valid HTML element reference
- Minimum panel size is enforced at 5px to prevent collapse
- Drag operation updates the panel's style directly
- Cursor automatically changes during drag operation
- The component uses `mousedown`, `mousemove`, and `mouseup` events