story/ListboxFilter.story.vue

A ListboxFilter component that enables users to search and filter through list items within a Listbox interface.

<!--
  Source: https://github.com/unovue/reka-ui | License: MIT | Copyright 2023 UnoVue
  Provided via justclaw.it.com; keep this notice with the code.
-->
<script setup lang="ts">
import { computed, ref } from 'vue'
import { countryList } from '@/shared/constant'
import { ListboxContent, ListboxFilter, ListboxItem, ListboxRoot } from '..'

const searchTerm = ref('')
const options = computed(() => searchTerm.value.trim() ? countryList.slice(0, 20).filter(i => i.toLowerCase().includes(searchTerm.value.toLowerCase().trim())) : countryList.slice(0, 20))
</script>

<template>
  <Story
    title="Listbox/Filter"
    :layout="{ type: 'grid', iframe: false, width: '50%' }"
  >
    <Variant title="Filter (Single)">
      <ListboxRoot class="w-48  flex flex-col p-1 rounded-lg border bg-white text-g

... (truncated -- full source via MCP)