personae/app/components/OptionsFilter.vue

<template>
  <div class="flex min-h-57 flex-col justify-between gap-2">
    <Listbox
      v-model="model"
      :options="options"
      multiple
      scrollHeight="12rem"
      @change="emit('filterCallback')"
    >
      <!--suppress VueUnrecognizedSlot -->
      <template #option="{ option, selected, index }">
        <div
          :id="`filter_${index}`"
          class="flex w-full flex-row items-center gap-1"
          :class="
            !isFilteredOption(option) &&
            'text-surface-400! dark:text-surface-500!'
          "
        >
          <div class="min-w-[0.875em]">
            <Icon
              v-if="selected"
              name="ph:check-bold"
              size="0.875em"
            />
          </div>

          <div class="truncate">
            {{ option }}
          </div>
        </div>
      </template>
    </Listbox>

    <Button
      class="py-0.5!"
      variant="outlined"
      size="small"
      fluid
      :disabled="!hasFilterFor(props.field)"
      @click="resetFilterFor(props.field)"
    >
      Reset
    </Button>
  </div>
</template>

<script setup>
const model = defineModel()

const props = defineProps({
  field: {
    type: String,
    required: true
  },

  options: {
    type: Array,
    required: true
  },

  filteredOptions: {
    type: Array,
    required: true
  }
})

const emit = defineEmits(["filterCallback"])

const { hasFilterFor, resetFilterFor } = useFiltersStore()

function isFilteredOption(option) {
  return _includes(props.filteredOptions, option)
}
</script>

<style scoped></style>