Stepper ​

<script setup lang="ts">
import { MacStepper } from 'macvue'
import { ref } from 'vue'

const copies = ref(1)
</script>

<template>
  <div style="display: flex; align-items: center; gap: 8px">
    <span style="font-size: 13px">Copies: {{ copies }}</span>
    <MacStepper
      v-model="copies"
      :min="1"
      :max="99"
      aria-label="Copies"
    />
  </div>
</template>

<script setup lang="ts">
import { MacStepper, MacTextField } from 'macvue'
import { computed, ref } from 'vue'

const copies = ref(1)

// The classic AppKit pairing: a text field and a stepper share one value.
const text = computed({
  get: () => String(copies.value),
  set: (value) => {
    const parsed = Number.parseInt(value, 10)
    if (!Number.isNaN(parsed))
      copies.value = Math.min(99, Math.max(1, parsed))
  },
})
</script>

<template>
  <div style="display: flex; align-items: center; gap: 4px">
    <MacTextField
      v-model="text"
      aria-label="Copies"
      style="width: 60px"
    />
    <MacStepper
      v-model="copies"
      :min="1"
      :max="99"
      aria-label="Adjust copies"
    />
  </div>
</template>

<script setup lang="ts">
import type { MacControlSize } from 'macvue'
import { MacStepper } from 'macvue'

const sizes: MacControlSize[] = [
  'extra-large',
  'large',
  'regular',
  'small',
  'mini',
]
</script>

<template>
  <div style="display: flex; align-items: center; gap: 16px">
    <MacStepper
      v-for="size in sizes"
      :key="size"
      :size="size"
      :default-value="5"
      :aria-label="`Stepper (${size})`"
    />
  </div>
</template>

<script setup lang="ts">
import { MacStepper } from 'macvue'
</script>

<template>
  <MacStepper
    disabled
    :default-value="5"
    aria-label="Disabled"
  />
</template>