personae/app/components/TextFilter.vue

<template>
  <div class="flex min-h-56.5 flex-col justify-between">
    <div class="flex flex-col gap-2">
      <InputText
        v-model="model.value"
        fluid
        type="search"
        placeholder="Filter&hellip;"
      />

      <div class="w-full bg-primary-200 px-2 py-1">
        {{ matchMode }}
      </div>

      <SelectButton
        v-model="model.matchMode"
        :options="matchModeOptions"
        optionLabel="name"
        optionValue="value"
        dataKey="value"
        :pt="{
          root: `*: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-200! bg-transparent! p-0! text-primary!
            hover:border-primary-300! hover:bg-primary-50! dark:border-primary-700!
            dark:hover:border-primary-600! dark:hover:bg-primary/5!
            p-checked:border-primary-400! p-checked:bg-primary-100!
            dark:p-checked:border-primary-500! dark:p-checked:bg-primary/15!`,
            content: 'px-0! py-0.5! p-checked:bg-transparent!'
          }
        }"
      >
        <!--suppress VueUnrecognizedSlot -->
        <template #option="slotProps">
          <Icon :name="slotProps.option.icon" />
        </template>
      </SelectButton>
    </div>

    <Button
      class="py-0.5!"
      variant="outlined"
      size="small"
      fluid
      :disabled="!hasFilter()"
      @click="resetFilter"
    >
      Clear
    </Button>
  </div>
</template>

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

const model = defineModel()

const props = defineProps({
  filterCallback: {
    type: Function,
    required: true
  },

  hasFilter: {
    type: Function,
    required: true
  },

  resetFilter: {
    type: Function,
    required: true
  }
})

const matchModeOptions = ref([
  {
    name: "Starts with",
    icon: "ph:arrow-line-left",
    value: FilterMatchMode.STARTS_WITH
  },
  {
    name: "Contains",
    icon: "ph:arrows-out-line-horizontal",
    value: FilterMatchMode.CONTAINS
  },
  {
    name: "Ends with",
    icon: "ph:arrow-line-right",
    value: FilterMatchMode.ENDS_WITH
  }
])

const matchMode = ref("Contains")
</script>

<style scoped></style>