Anchor ViewComponents

Pages

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="contents" data-controller="popover">
  <button name="button" type="button" class="flex items-center rounded-sm text-sm border py-1 pl-3 pr-2 bg-white" data-popover-target="button" data-testid="filter-description-donation-date" popovertarget="donation-date-popover">
    <span class="font-semibold uppercase mr-2">Donation date:</span>
    <span></span>
    <!-- Source: Iconoir, added via `bin/add_icon` -->
    <svg width="24" height="24" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0 inline w-4 h-4 text-secondary ml-1" aria-hidden="true">
      <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
  </button>
  <div popover="auto" class="absolute -left-full -top-full m-0 bg-white rounded-sm border border-subdued popover-open:block min-w-[200px] max-w-[400px] max-h-[352px] p-0" data-action="toggle->popover#positionPopover" data-popover-target="popover" data-testid="donation-date-popover" id="donation-date-popover">
    <form id="donation_date-form" class="flex flex-col gap-4 p-4 pb-1" accept-charset="UTF-8" method="get">
      <input value="%7B%7D" autocomplete="off" type="hidden" name="_display" id="_display" />
      <div data-testid="date-range-field-start-donation-date-start">
        <label class="font-semibold text-base text-primary" data-testid="label-donation-date-start" for="donation_date_start">From</label>
        <input value="2021-01-31" class="form-input min-h-[40px] resize-none block w-full rounded" max="9999-12-31" type="date" name="donation_date_start" id="donation_date_start" />
      </div>
      <div data-testid="date-range-field-end-donation-date-end">
        <label class="font-semibold text-base text-primary" data-testid="label-donation-date-end" for="donation_date_end">To</label>
        <input max="9999-12-31" class="form-input min-h-[40px] resize-none block w-full rounded" type="date" name="donation_date_end" id="donation_date_end" />
      </div>
    </form>
  
    <div class="flex p-4 pt-3 sticky bottom-0 bg-white">
      <button type="submit" class="btn-small btn btn-primary" data-testid="apply-button" form="donation_date-form">
        Apply
      </button>
      <a href="?_display=%257B%257D" class="btn-small btn btn-text" data-testid="clear-button">
        Clear
      </a>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
anchor_filter(
  param_key: :donation_date,
  type: :date_range,
  label: "Donation date",
  options: [],
  selected: {
    donation_date_start: "2021-01-31",
  }
)

No notes provided.

No params configured.