personae/app/components/character/CharacterFilterChips.vue

<!--suppress JSUnresolvedReference, VueUnrecognizedSlot -->
<template>
  <div class="flex flex-row flex-wrap gap-1">
    <template v-if="filters.global.value.length > 0">
      <Chip
        :label="`Anywhere: &ldquo;${filters.global.value}&rdquo;`"
        removable
      >
        <template #removeicon>
          <Icon
            name="ph:x-bold"
            class="rounded-full p-0.5 hover:bg-primary-200 dark:hover:bg-primary-600"
            size="1.25em"
            @click="resetGlobalFilter"
          />
        </template>
      </Chip>
    </template>

    <template
      v-if="hasAnyNameFilters"
      v-for="field in _keys(nameFields)"
      :key="field"
    >
      <Chip
        v-if="hasFilterFor(field)"
        :label="`${_startCase(field)}: &ldquo;${filters[field].value}&rdquo;`"
        removable
      >
        <template #removeicon>
          <Icon
            name="ph:x-bold"
            class="rounded-full p-0.5 hover:bg-primary-200 dark:hover:bg-primary-600"
            size="1.25em"
            @click="resetFilterFor(field)"
          />
        </template>
      </Chip>
    </template>

    <template
      v-if="hasAnyCategoryFilters"
      v-for="field in _keys(optionsFields)"
      :key="field"
    >
      <Chip
        v-if="hasFilterFor(field)"
        v-for="value in filters[field].value"
        :label="value"
        removable
      >
        <template #removeicon>
          <Icon
            name="ph:x-bold"
            class="rounded-full p-0.5 hover:bg-primary-200 dark:hover:bg-primary-600"
            size="1.25em"
            @click="removeFilterValueFrom(field, value)"
          />
        </template>
      </Chip>
    </template>
  </div>
</template>

<script setup>
const filtersStore = useFiltersStore()

const {
  hasAnyCategoryFilters,
  hasAnyNameFilters,
  hasFilterFor,
  hasGlobalFilter,
  removeFilterValueFrom,
  resetFilterFor,
  resetGlobalFilter
} = filtersStore

const { filters } = storeToRefs(filtersStore)
</script>

<style scoped></style>