Swap

Swap component.

# Basic Usage

<!-- Flat array -->
<x-swap :options="['Apple', 'Banana', 'Cherry']" />
 
<!-- Collection -->
<x-swap :options="collect(['Apple', 'Banana', 'Cherry'])" />
 
<!-- Dimensional array, default keys -->
<x-swap :options="[
    ['label' => 'Small', 'value' => 1],
    ['label' => 'Medium', 'value' => 2],
    ['label' => 'Large', 'value' => 3],
]" />

# Label & Hint

Size

Drag the value or use the arrows

<x-swap label="Size"
        hint="Drag the value or use the arrows"
        :options="['Small', 'Medium', 'Large']" />

# Different Indexes

Dimensional keys are remapped through the same select string the styled select uses.

<x-swap :options="[
    ['name' => 'Small', 'id' => 1],
    ['name' => 'Medium', 'id' => 2],
    ['name' => 'Large', 'id' => 3],
]" select="label:name|value:id" />

A dimensional option missing the resolved label or value key throws.

# Preview

An option to allow you to preview the previous and next values.

<x-swap preview :options="['January', 'February', 'March', 'April', 'May']" />

# Vertical

<x-swap vertical :options="['Monday', 'Tuesday', 'Wednesday', 'Thursday']" />

preview and vertical cannot be combined.

# Block

An option to display the component using the full width.

<x-swap block :options="['Daily', 'Weekly', 'Monthly', 'Yearly']" />

# Loop

<!-- Loops infinitely, the default -->
<x-swap :options="['One', 'Two', 'Three']" />
 
<!-- Stops at both ends: the matching button disables and the drag resists -->
<x-swap :loop="false" :options="['One', 'Two', 'Three']" />

With :loop="false" the matching button disables at either end and the drag gains rubber band resistance past them.

# Readonly & Disabled

<x-swap readonly :options="['Apple', 'Banana', 'Cherry']" />
<x-swap disabled :options="['Apple', 'Banana', 'Cherry']" />

# Tooltip

<x-swap tooltip="Pick the plan billing cycle"
        :options="['Monthly', 'Quarterly', 'Yearly']" />

# Events

<x-swap :options="['Apple', 'Banana', 'Cherry']"
        x-on:swap="console.log($event.detail)" />

Event	Detail	Fired when
`swap`	`{ value, label, index, direction }`	The option changes

# AlpineJS Helper

<div x-data="{ cycle: 'Monthly' }">
    <x-swap x-model="cycle" :options="['Monthly', 'Quarterly', 'Yearly']" />
 
    <span x-text="cycle"></span>
</div>