Seek Input

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>

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

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

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