Repeater field

The repeater field stores an array of subfield values.

Examples

Here's an example of using the repeater field in a block:

# blocks/IconBoxes.vue

<template>
  <div class="grid grid-cols-3">
    <div v-for="{ icon, text } of iconBoxes">
      <PruviousIcon :icon="icon" />
      <p>{{ text }}</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { iconSubfield, repeaterField, textAreaSubfield } from '#pruvious'

defineProps({
  iconBoxes: repeaterField({
    subfields: {
      icon: iconSubfield(),
      text: textAreaSubfield({ placeholder: 'Enter text' }),
    },
    addLabel: 'Add icon box',
  }),
})
</script>

Here is another example of how to use it in a collection definition:

# collections/products.ts

import { defineCollection } from '#pruvious'

export default defineCollection({
  name: 'products',
  mode: 'multi',
  fields: {
    variations: {
      type: 'repeater',
      options: {
        subfields: {
          size: {
            type: 'button-group',
            options: {
              choices: {
                S: 'Small',
                M: 'Medium',
                L: 'Large',
              },
            },
          },
          available: {
            type: 'switch',
            options: {},
          },
        },
        fieldLayout: ['size', 'available'],
        addLabel: 'Add variation',
      },
    },
  },
})

Options

You can specify the following options in the repeater field (required fields are marked with the symbol R):