Skip to main content
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

Event-Driven Navigation

Emits seekForward and seekBack events for navigation logic.

Customizable Behavior

Handles both arrays and object lists, with options for inline navigation or external processing.

Optional Typing

Allows users to manually input values if allowTyping is enabled.

​
Usage

​
Basic Example: Array Navigation

import { InputSeek } from '@robojuice/velure-ui';

<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

<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

​
v-model
string | number | object
default:"''"
Two-way binding for the current displayed value.
​
type
string
default:"'text'"
The input type, e.g., 'text' or 'number'.
​
inputClass
string
default:"''"
Additional CSS classes for the input element.
​
seekClass
string
default:"''"
Additional CSS classes for the seek container.
​
size
string
default:"''"
Size modifier, e.g., 'small'.
​
label
string
default:"''"
Label text displayed alongside the input field.
​
disabled
boolean
default:"false"
Disables the navigation buttons if set to true.
​
allowTyping
boolean
default:"false"
Allows manual typing of values in the input field if set to true.

​
Events

​
seekForward
event
Triggered when the forward button is clicked.
​
seekBack
event
Triggered when the back button is clicked.

​
Example Use Cases

​
Simple Array Navigation

<InputSeek
  label="Navigate Items"
  v-model="currentItem"
  @seek-forward="seekForwardArray(itemList, model)"
  @seek-back="seekBackArray(itemList, model)"
/>

​
Object Property Navigation

<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.