Filter bar

'use client'

import { DateRangePicker } from '@/components/date-range-picker'
import { FilterBar } from '@/components/filter-bar'
import { Input, InputGroup } from '@/components/input'
import { MultiSelect } from '@/components/multi-select'
import { MagnifyingGlassIcon } from '@heroicons/react/16/solid'
import { useState } from 'react'

const typeOptions = [
  { value: 'individual', label: 'Individual' },
  { value: 'business', label: 'Business' },
]

const statusOptions = [
  { value: 'succeeded', label: 'Succeeded' },
  { value: 'pending', label: 'Pending' },
  { value: 'failed', label: 'Failed' },
]

export default function Example() {
  let [search, setSearch] = useState('')
  let [types, setTypes] = useState<string[]>([])
  let [statuses, setStatuses] = useState<string[]>([])
  let [range, setRange] = useState<{ from: string; to: string } | null>(null)

  let hasFilters = search.trim() !== '' || types.length > 0 || statuses.length > 0 || range !== null

  function clear() {
    setSearch('')
    setTypes([])
    setStatuses([])
    setRange(null)
  }

  return (
    <FilterBar hasFilters={hasFilters} onClear={clear}>
      <InputGroup className="col-span-2 lg:w-72">
        <MagnifyingGlassIcon />
        <Input
          type="search"
          name="search"
          placeholder="Search by name, email, ID…"
          aria-label="Search customers"
          value={search}
          onChange={(event) => setSearch(event.target.value)}
        />
      </InputGroup>
      <MultiSelect value={types} onChange={setTypes} placeholder="Type" options={typeOptions} className="lg:w-36" />
      <MultiSelect value={statuses} onChange={setStatuses} placeholder="Status" options={statusOptions} className="lg:w-36" />
      <DateRangePicker value={range} onChange={setRange} placeholder="Created" className="col-span-2 lg:w-56" />
    </FilterBar>
  )
}

<script setup lang="ts">
import DateRangePicker from '@/components/date-range-picker.vue'
import FilterBar from '@/components/filter-bar.vue'
import Input from '@/components/input.vue'
import InputGroup from '@/components/input-group.vue'
import MultiSelect from '@/components/multi-select.vue'
import { MagnifyingGlassIcon } from '@heroicons/vue/16/solid'
import { computed, ref } from 'vue'

const typeOptions = [
  { value: 'individual', label: 'Individual' },
  { value: 'business', label: 'Business' },
]

const statusOptions = [
  { value: 'succeeded', label: 'Succeeded' },
  { value: 'pending', label: 'Pending' },
  { value: 'failed', label: 'Failed' },
]

const search = ref('')
const types = ref<string[]>([])
const statuses = ref<string[]>([])
const range = ref<{ from: string; to: string } | null>(null)

const hasFilters = computed(
  () => search.value.trim() !== '' || types.value.length > 0 || statuses.value.length > 0 || range.value !== null
)

function clear() {
  search.value = ''
  types.value = []
  statuses.value = []
  range.value = null
}
</script>

<template>
  <FilterBar :has-filters="hasFilters" @clear="clear">
    <InputGroup class="col-span-2 lg:w-72">
      <MagnifyingGlassIcon />
      <Input v-model="search" type="search" name="search" placeholder="Search by name, email, ID…" aria-label="Search customers" />
    </InputGroup>
    <MultiSelect v-model="types" placeholder="Type" :options="typeOptions" class="lg:w-36" />
    <MultiSelect v-model="statuses" placeholder="Status" :options="statusOptions" class="lg:w-36" />
    <DateRangePicker v-model="range" placeholder="Created" class="col-span-2 lg:w-56" />
  </FilterBar>
</template>

<FilterBar hasFilters={hasFilters} onClear={clear}>
  …
  <FilterPopover count={countries.length + groups.length}>
    <Field>
      <Label>Country</Label>
      <MultiSelect value={countries} onChange={setCountries} placeholder="Any country" options={countryOptions} />
    </Field>
    <Field>
      <Label>Group</Label>
      <MultiSelect value={groups} onChange={setGroups} placeholder="Any group" options={groupOptions} />
    </Field>
  </FilterPopover>
</FilterBar>

<FilterBar :has-filters="hasFilters" @clear="clear">
  …
  <FilterPopover :count="countries.length + groups.length">
    <Field>
      <Label>Country</Label>
      <MultiSelect v-model="countries" placeholder="Any country" :options="countryOptions" />
    </Field>
    <Field>
      <Label>Group</Label>
      <MultiSelect v-model="groups" placeholder="Any group" :options="groupOptions" />
    </Field>
  </FilterPopover>
</FilterBar>

<FilterBar
  hasFilters={hasFilters}
  onClear={clear}
  actions={<DataTableColumns table={table} customized={isCustomized} onReset={resetColumns} />}
>
  …
</FilterBar>

<FilterBar :has-filters="hasFilters" @clear="clear">
  …
  <template #actions>
    <Button outline>
      <TableCellsIcon data-slot="icon" />
      Columns
    </Button>
  </template>
</FilterBar>

'use client'

import { Button } from '@/components/button'
import { DateRangePicker } from '@/components/date-range-picker'
import { FilterBar } from '@/components/filter-bar'
import { MultiSelect } from '@/components/multi-select'
import { useListFilters } from '@/components/use-list-filters'

type Invoice = { id: string; customer: string; status: string; tags: string[]; date: string }

const statuses = [
  { value: 'paid', label: 'Paid' },
  { value: 'pending', label: 'Pending' },
  { value: 'overdue', label: 'Overdue' },
]

export default function Invoices({ invoices }: { invoices: Invoice[] }) {
  let filters = useListFilters({
    data: invoices,
    search: (invoice) => `${invoice.id} ${invoice.customer}`,
    facets: {
      status: (invoice) => invoice.status,
      tags: { predicate: (invoice, selected) => selected.some((tag) => invoice.tags.includes(tag)) },
    },
    date: (invoice) => invoice.date,
    groupBy: (invoice) => invoice.date.slice(0, 7),
    pageSize: 25,
  })

  return (
    <>
      <FilterBar hasFilters={filters.hasFilters} onClear={filters.clearFilters}>
        <MultiSelect
          placeholder="Status"
          options={statuses}
          value={filters.values.status ?? []}
          onChange={(next) => filters.setValues('status', next)}
        />
        <DateRangePicker value={filters.range} onChange={filters.setRange} />
      </FilterBar>
      <p role="status" className="sr-only">
        {filters.filtered.length} invoices
      </p>
      {filters.sections.map((section) => (
        <section key={section.key} aria-label={section.key}>
          <h2>{section.key}</h2>
          <ul>
            {section.items.map((invoice) => (
              <li key={invoice.id}>
                {invoice.id} {invoice.customer}
              </li>
            ))}
          </ul>
        </section>
      ))}
      {filters.remaining > 0 && (
        <Button plain onClick={filters.showMore}>
          Show {filters.remaining} more
        </Button>
      )}
    </>
  )
}

<script setup lang="ts">
import Button from '@/components/button.vue'
import DateRangePicker from '@/components/date-range-picker.vue'
import FilterBar from '@/components/filter-bar.vue'
import MultiSelect from '@/components/multi-select.vue'
import { useListFilters } from '@/components/use-list-filters'

type Invoice = { id: string; customer: string; status: string; tags: string[]; date: string }

const statuses = [
  { value: 'paid', label: 'Paid' },
  { value: 'pending', label: 'Pending' },
  { value: 'overdue', label: 'Overdue' },
]

const props = defineProps<{ invoices: Invoice[] }>()

const { values, range, hasFilters, clearFilters, filtered, sections, remaining, showMore } = useListFilters({
  data: () => props.invoices,
  search: (invoice) => `${invoice.id} ${invoice.customer}`,
  facets: {
    status: (invoice) => invoice.status,
    tags: { predicate: (invoice, selected) => selected.some((tag) => invoice.tags.includes(tag)) },
  },
  date: (invoice) => invoice.date,
  groupBy: (invoice) => invoice.date.slice(0, 7),
  pageSize: 25,
})
</script>

<template>
  <FilterBar :has-filters="hasFilters" @clear="clearFilters">
    <MultiSelect v-model="values.status" placeholder="Status" :options="statuses" />
    <DateRangePicker v-model="range" />
  </FilterBar>
  <p role="status" class="sr-only">{{ filtered.length }} invoices</p>
  <section v-for="section in sections" :key="section.key" :aria-label="section.key">
    <h2>{{ section.key }}</h2>
    <ul>
      <li v-for="invoice in section.items" :key="invoice.id">{{ invoice.id }} {{ invoice.customer }}</li>
    </ul>
  </section>
  <Button v-if="remaining > 0" plain @click="showMore">Show {{ remaining }} more</Button>
</template>