> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Seek Input

> InputSeek.vue Component Documentation

The `InputSeek.vue` component allows users to navigate back and forth through a sequence of values (array or object list) while displaying only the current value. This is useful for scenarios where the next or previous value is not known or for linear navigation through options.

***

## Features

<CardGroup cols={2}>
  <Card title="Event-Driven Navigation" icon="square-1">
    Emits <code>seekForward</code> and <code>seekBack</code> events for navigation logic.
  </Card>

  <Card title="Customizable Behavior" icon="square-2">
    Handles both arrays and object lists, with options for inline navigation or external processing.
  </Card>

  <Card title="Optional Typing" icon="square-3">
    Allows users to manually input values if <code>allowTyping</code> is enabled.
  </Card>
</CardGroup>

***

## Usage

### Basic Example: Array Navigation

```js theme={null}
import { InputSeek } from '@robojuice/velure-ui';
```

```vue theme={null}
<template>
  <InputSeek
    seek-class="flex-1 shrink-0"
    input-class="w-full"
    size="small"
    label="Seek Array"
    v-model="seekModel.name"
    @seek-forward="seekForwardArray(seekList, seekModel)"
    @seek-back="seekBackArray(seekList, seekModel)"
  />
</template>

<script setup>
import { reactive } from 'vue';
import { seekForwardArray, seekBackArray } from '@robojuice/velure-ui/functions/seek-action';

const seekList = reactive(['first', 'middle', 'last']);
const seekModel = reactive({ name: 'first' });
</script>
```

### Example: Object List Navigation

```vue theme={null}
<template>
  <InputSeek
    input-class="w-[100px]"
    label="Seek Objects by Name"
    v-model="seekObjectModel.name"
    @seek-forward="seekForwardObjectList(seekObjectList, seekObjectModel)"
    @seek-back="seekBackObjectList(seekObjectList, seekObjectModel)"
  />
</template>

<script setup>
import { reactive } from 'vue';
import { seekForwardObjectList, seekBackObjectList } from '@robojuice/velure-ui/functions/seek-action';

const seekObjectList = reactive([
  { name: 'first', age: 2 },
  { name: 'middle', age: 1 },
  { name: 'last', age: 3 },
]);

const seekObjectModel = reactive({ name: 'middle', age: 1 });
</script>
```

***

## Props

<ParamField path="v-model" type="string | number | object" default="''">
  Two-way binding for the current displayed value.
</ParamField>

<ParamField path="type" type="string" default="'text'">
  The input type, e.g., `'text'` or `'number'`.
</ParamField>

<ParamField path="inputClass" type="string" default="''">
  Additional CSS classes for the input element.
</ParamField>

<ParamField path="seekClass" type="string" default="''">
  Additional CSS classes for the seek container.
</ParamField>

<ParamField path="size" type="string" default="''">
  Size modifier, e.g., `'small'`.
</ParamField>

<ParamField path="label" type="string" default="''">
  Label text displayed alongside the input field.
</ParamField>

<ParamField path="disabled" type="boolean" default="false">
  Disables the navigation buttons if set to `true`.
</ParamField>

<ParamField path="allowTyping" type="boolean" default="false">
  Allows manual typing of values in the input field if set to `true`.
</ParamField>

***

## Events

<ParamField path="seekForward" type="event" payload="string | number | object">
  Triggered when the forward button is clicked.
</ParamField>

<ParamField path="seekBack" type="event" payload="string | number | object">
  Triggered when the back button is clicked.
</ParamField>

***

## Example Use Cases

### Simple Array Navigation

```vue theme={null}
<InputSeek
  label="Navigate Items"
  v-model="currentItem"
  @seek-forward="seekForwardArray(itemList, model)"
  @seek-back="seekBackArray(itemList, model)"
/>
```

### Object Property Navigation

```vue theme={null}
<InputSeek
  label="Seek by Age"
  v-model="currentAge"
  @seek-forward="seekForwardObjectList(objectList, model, 'age')"
  @seek-back="seekBackObjectList(objectList, model, 'age')"
/>
```

***

## Notes

* **Event Handling**: Use `seekForward` and `seekBack` events to define custom navigation logic for arrays or object lists.
* **Custom Seek Logic**: Combine with helper functions (`seekForwardArray`, `seekBackObjectList`, etc.) to navigate through different data structures.
* **Typing Flexibility**: Enable `allowTyping` to allow direct user input for advanced use cases.

For further customization, refer to the component's source code.