Size field

The size field stores an object that includes numeric values along with their corresponding units.

Examples

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

# blocks/Container.vue

<template>
  <div
    :style="{
      paddingTop: `${padding?.top.value}${padding?.top.unit}`,
      paddingBottom: `${padding?.bottom.value}${padding?.bottom.unit}`,
    }"
  >
    ...
  </div>
</template>

<script lang="ts" setup>
import { sizeField } from '#pruvious'

defineProps({
  padding: sizeField({
    required: true,
    inputs: {
      top: { min: 0, units: ['px', 'rem'] },
      bottom: { min: 0, units: ['px', 'rem'] },
    },
    default: {
      top: { value: 1, unit: 'rem' },
      bottom: { value: 1, unit: 'rem' },
    },
  }),
})
</script>

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

# collections/products.ts

export default defineCollection({
  name: 'products',
  mode: 'multi',
  fields: {
    dimensions: {
      type: 'size',
      options: {
        required: true,
        inputs: {
          width: {
            units: ['cm', 'in'],
          },
          height: {
            units: ['cm', 'in'],
          },
        },
      },
    },
    // ...
  },
})

Options

You can specify the following options in the size field: