<AisCurrentRefinements>

<template>
  <div>
    <AisInstantSearch :widgets :configuration>
      <AisCurrentRefinements id="shipping">
        <template v-slot="{ items, createURL }">
          <ul>
            <li v-for="item in items" :key="item.attribute">
              {{ item.label }}:
              <ul>
                <li
                  v-for="refinement in item.refinements"
                  :key="[
                    refinement.attribute,
                    refinement.type,
                    refinement.value,
                    refinement.operator
                  ].join(':')"
                >
                  <a
                    :href="createURL(refinement)"
                    @click.prevent="item.refine(refinement)"
                  >
                    {{ refinement.label }} X
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </template>
      </AisCurrentRefinements>
    </AisInstantSearch>
  </div>
</template>

<script setup lang="ts">
const widgets = computed(() => [useAisCurrentRefinements({
  included-attributes: ['free_shipping']
  // excluded-attributes: ['...']
  id: 'shipping'
})]
</script>