personae/app/pages/filter.vue

<template>
  <div class="w-54 flex flex-col gap-2">
    <InputText
      v-model="model.value"
      fluid
      type="search"
      placeholder="Filter&hellip;"
    />

    <SelectButton
      v-model="model.matchMode"
      :options="matchModeOptions"
      optionLabel="name"
      optionValue="value"
      :pt="{
          root: `gap-0.25 *:rounded-none *:not-last:border-r-0 *:first:rounded-s-md
          *:last:rounded-e-md *:focus-visible:relative *:focus-visible:z-10`,
          pcToggleButton: {
            root: `grow border-primary bg-primary text-primary-contrast hover:border-primary-emphasis
            hover:bg-primary-emphasis active:border-primary-emphasis-alt
            active:bg-primary-emphasis-alt p-checked:border-primary-emphasis-alt p-checked:bg-primary-emphasis-alt`,
            content: `p-checked:bg-transparent`
          }
        }"
    >
      <!--suppress VueUnrecognizedSlot -->
      <template #option="slotProps">
        {{ slotProps.option.name }}
      </template>
    </SelectButton>
  </div>

  <div>{{ model.value }}</div>
  <div>{{ model.matchMode }}</div>
</template>

<script setup>
import { FilterMatchMode } from "@primevue/core/api"

const model = ref({ value: "", matchMode: FilterMatchMode.CONTAINS })

const matchModeOptions = ref([
  { name: "lt", value: FilterMatchMode.STARTS_WITH },
  { name: "eq", value: FilterMatchMode.CONTAINS },
  { name: "gt", value: FilterMatchMode.ENDS_WITH }
])
</script>

<style scoped>

</style>